Awesome-Mirrors/decentralized-id.github.io
1
0
Fork 0
mirror of https://github.com/Decentralized-ID/decentralized-id.github.io.git synced 2024-12-25 23:29:26 -05:00
Code Issues Packages Projects Releases Wiki Activity
staticman_f7de1180-0ba4-11eb-a0a0-cff907ce0303
decentralized-id.github.io/_posts/drafts/2019-06-26-using-minimal-mistakes.md
Infominer 76bd23c733 truncate modified date and add to post index
2020-01-06 06:56:30 -05:00

31 KiB
Raw Permalink Blame History

layout title description excerpt header tags permalink categories published last_modified_at
single InfoHub Contributors: Using Minimal Mistakes Contributing to the InfoHub via GitHub, Jekyll and Minimal Mistakes. Since I've created four GitHub organizations for these public-domain educational resources, I needed to make it clear for others to understand and join in on the fun. You are presented with an review of how I'm using Minimal Mistakes to Publish Content for Free via GitHub Pages.
image teaser og_image caption
assets/img/minimal-mistakes-quickstart-header.png assets/img/minimal-mistakes-teaser.png assets/img/minimal-mistakes-teaser.png Minimal Mistakes Setup and [Quick-Start](https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide/).
Public-Domain
Open-Source
Jekyll
CSS
JavaScript
Configuration
MinimalMistakes
GitHub-Pages
Web-Pub
Web-Working
using-minimal-mistakes/
InfoHub
SourceCrypto
Web-Work-Tools
DIDecentral
Learn-Crypto-Trading
Contributors-Guide
false 2019-06-26

Since I've created four GitHub organizations for these public-domain educational resources, I needed to make it clear for others to understand and join in on the fun.

Using Minimal Mistakes

Each site is set up a little different, and will have its own version of this post, eventually.

GitHub Pages Starter Pack: Minimal Mistakes{: .btn .btn--info .align-center}

If you peruse the resource linked above, you'll find there are a number of integrations and potential use-cases that I've yet to explore, practically speaking.

infominer33/infominer33.github.io

Directory Structure

minimal-mistakes
├── _data                      # data files for customizing the theme
|  ├── navigation.yml          # main navigation links
|  └── ui-text.yml             # text used throughout the theme's UI
├── _includes
|  ├── analytics-providers     # snippets for analytics (Google and custom)
|  ├── comments-providers      # snippets for comments
|  ├── footer                  # custom snippets to add to site footer
|  ├── head                    # custom snippets to add to site head
|  ├── feature_row             # feature row helper
|  ├── gallery                 # image gallery helper
|  ├── group-by-array          # group by array helper for archives
|  ├── nav_list                # navigation list helper
|  ├── toc                     # table of contents helper
|  └── ...
├── _layouts
|  ├── archive-taxonomy.html   # tag/category archive for Jekyll Archives plugin
|  ├── archive.html            # archive base
|  ├── categories.html         # archive listing posts grouped by category
|  ├── category.html           # archive listing posts grouped by specific category
|  ├── collection.html         # archive listing documents in a specific collection
|  ├── compress.html           # compresses HTML in pure Liquid
|  ├── default.html            # base for all other layouts
|  ├── home.html               # home page
|  ├── posts.html              # archive listing posts grouped by year
|  ├── search.html             # search page
|  ├── single.html             # single document (post/page/etc)
|  ├── tag.html                # archive listing posts grouped by specific tag
|  ├── tags.html               # archive listing posts grouped by tags
|  └── splash.html             # splash page
├── _sass                      # SCSS partials
├── assets
|  ├── css
|  |  └── main.scss            # main stylesheet, loads SCSS partials from _sass
|  ├── images                  # image assets for posts/pages/collections/etc.
|  ├── js
|  |  ├── plugins              # jQuery plugins
|  |  ├── vendor               # vendor scripts
|  |  ├── _main.js             # plugin settings and other scripts to load after jQuery
|  |  └── main.min.js          # optimized and concatenated script file loaded before </body>
├── _config.yml                # site configuration
├── Gemfile                    # gem file dependencies
├── index.html                 # paginated home page showing recent posts
└── package.json               # NPM build scripts

CSS - Stylesheets

At the moment, I'm quite CSS agnostic. One thing at a time.. However, if you wanted to add a little style to the page, I might not complain. This is how the sytlesheets are named \ organized.

minimal-mistakes
├── _sass
|  └── minimal-mistakes
|     ├── vendor               # vendor SCSS partials
|     |   ├── breakpoint       # media query mixins
|     |   ├── magnific-popup   # Magnific Popup lightbox
|     |   └── susy             # Susy grid system
|     ├── _animations.scss     # animations
|     ├── _archive.scss        # archives (list, grid, feature views)
|     ├── _base.scss           # base HTML elements
|     ├── _buttons.scss        # buttons
|     ├── _footer.scss         # footer
|     ├── _masthead.scss       # masthead
|     ├── _mixins.scss         # mixins (em function, clearfix)
|     ├── _navigation.scss     # nav links (breadcrumb, priority+, toc, pagination, etc.)
|     ├── _notices.scss        # notices
|     ├── _page.scss           # pages
|     ├── _print.scss          # print styles
|     ├── _reset.scss          # reset
|     ├── _sidebar.scss        # sidebar
|     ├── _syntax.scss         # syntax highlighting
|     ├── _tables.scss         # tables
|     ├── _utilities.scss      # utility classes (text/image alignment)
|     └── _variables.scss      # theme defaults (fonts, colors, etc.)
├── assets
|  ├── css
|  |  └── main.scss            # main stylesheet, loads SCSS partials in _sass

To make basic tweaks to theme’s style Sass variables can be overridden by adding to <your_project>/assets/css/main.scss. For instance, to change the link color used throughout the theme add:

$link-color: red;

_variables.scss

There are a number of other variables, you may find by following the link. These are the variables I have changed, so far. Before messing with CSS please check the variables, to be sure you aren't doing too much work!


/*
   Colors
   ========================================================================== */

$gray: #7a8288 !default;
$dark-gray: mix(#000, $gray, 40%) !default;
$darker-gray: mix(#000, $gray, 60%) !default;
$light-gray: mix(#fff, $gray, 50%) !default;
$lighter-gray: mix(#fff, $gray, 90%) !default;

$background-color: #fff !default;
$code-background-color: #fafafa !default;
$code-background-color-dark: $light-gray !default;
$text-color: $dark-gray !default;
$muted-text-color: mix(#fff, $text-color, 35%) !default;
$border-color: $lighter-gray !default;
$form-background-color: $lighter-gray !default;
$footer-background-color: $lighter-gray !default;

$primary-color: #6f777d !default;
$success-color: #3fa63f !default;
$warning-color: #d67f05 !default;
$danger-color: #ee5f5b !default;
$info-color: #3b9cba !default;
$focus-color: $primary-color !default;
$active-color: mix(#fff, $primary-color, 80%) !default;

/* YIQ color contrast */
$yiq-contrasted-dark-default: $dark-gray !default;
$yiq-contrasted-light-default: #fff !default;
$yiq-contrasted-threshold: 175 !default;
$yiq-debug: false !default;

/* brands */
$behance-color: #1769ff !default;
$bitbucket-color: #205081 !default;
$dribbble-color: #ea4c89 !default;
$facebook-color: #3b5998 !default;
$flickr-color: #ff0084 !default;
$foursquare-color: #0072b1 !default;
$github-color: #171516 !default;
$gitlab-color: #e24329 !default;
$instagram-color: #517fa4 !default;
$lastfm-color: #d51007 !default;
$linkedin-color: #007bb6 !default;
$mastodon-color: #2b90d9 !default;
$pinterest-color: #cb2027 !default;
$reddit-color: #ff4500 !default;
$rss-color: #fa9b39 !default;
$soundcloud-color: #ff3300 !default;
$stackoverflow-color: #fe7a15 !default;
$tumblr-color: #32506d !default;
$twitter-color: #55acee !default;
$vimeo-color: #1ab7ea !default;
$vine-color: #00bf8f !default;
$youtube-color: #bb0000 !default;
$xing-color: #006567 !default;

/* links */
$link-color: mix(#000, $info-color, 15%) !default;
$link-color-hover: mix(#000, $link-color, 25%) !default;
$link-color-visited: mix(#fff, $link-color, 15%) !default;
$masthead-link-color: $primary-color !default;
$masthead-link-color-hover: mix(#000, $primary-color, 25%) !default;
$navicon-link-color-hover: mix(#fff, $primary-color, 75%) !default;

Fonts

I've done nothing about fonts yet, but I mean to.

  • smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide
  • web.archive.org - medium.com/designing-medium/system-shock-6b1dc6d6596f

    The obvious way to use system fonts in CSS is to… just list all of the ones you can imagine by name:

    font-family: "San Francisco", "Roboto", "Segoe UI";

    (The way CSS works, if the first font is not present, the second one will be tried, and so on. Since it’s not common for an operating system to have more than one of these fonts installed, only one will be selected.)

    We also need to take care of the older systems, including a fallback to use a generic sans serif font if nothing matches before:

    font-family: "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;

So, I'm not 100% but it seems that we have some default fonts installed, based upon the most popularly supported?

JavaScript

minimal mistakes
├── assets
|  ├── js
|  |  ├── plugins
|  |  |   ├── gumshoe.js                     # simple scrollspy
|  |  |   ├── jquery.ba-throttle-debounce.js # rate-limit functions
|  |  |   ├── jquery.fitvids.js              # fluid width video embeds
|  |  |   ├── jquery.greedy-navigation.js    # priority plus navigation
|  |  |   ├── jquery.magnific-popup.js       # responsive lightbox
|  |  |   └── smooth-scroll.js               # make same-page links scroll smoothly
|  |  ├── vendor
|  |  |   └── jquery
|  |  |       └── jquery-3.4.1.js
|  |  ├── _main.js                           # jQuery plugin settings and other scripts
|  |  └── main.min.js                        # concatenated and minified theme script

Configuration

This will be most useful if you decide to clone and work on the theme locally. I have cloned the minimal mistakes theme, and am running it directly via jekyll. I have not used the remote theme or the gem-based theme method, for this particular repository.

These _config.yml and Gem settings ar particular to that method. You should even be able to copy all the files from the minimal mistakes to your own empty repository, and noticing my configuration settings be able to create your own site. However, Minimal Mistakes Quickstart Guide is quite adequate to the task.

This guide is designed to familiarize those interested in contributing to the InfoHub, so that you may see how it is put together.

_config.yml

These are the most important settings for infominer.xyz

# Welcome to Jekyll!
# Theme Settings
#
# Review documentation to determine if you should use `theme` or `remote_theme`
# https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide/#installing-the-theme

# theme                  : "minimal-mistakes-jekyll"
# remote_theme           : "mmistakes/minimal-mistakes"
minimal_mistakes_skin    : "mint" # "air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum", "sunrise"

# Site Settings
locale                   : "en-US"
title                    : "InfoHub"
title_separator          : "|"
name                     : "⧉ Infominer"
description              : "Infominer on Bitcoin History, Self-Sovereign Identity, Blockchain Development and other Web Technologies."
url                      : "https://infominer.xyz"
baseurl                  : ''
repository               : "infominer33/infominer33.github.io"
github                   : [metadata]
teaser                   : "/assets/img/info-og.png"
logo                     : "/assets/icons/android-chrome-512x512.png"
masthead_title           : "Research Driven Content"
# breadcrumbs            : false # true, false (default)
words_per_minute         : 200
search                   : true
search_full_content      : false # CHANGE TO true AT YOUR OWN RISK
search_provider          : # lunr (default), algolia, google

# Social Sharing
twitter:
  username               : "infominer33"

# Analytics
analytics:
  provider               : google # false (default), "google", "google-universal", "custom"
  google:
    tracking_id          : UA-132558656-1
    anonymize_ip         : true

# Site Author
author:
  name             : "Infominer"
  avatar           : "https://i.imgur.com/S1UmInX.gif"
  links:
    - label: "Email"
      icon: "fas fa-fw fa-envelope-square"
      url: "mailto:infominer@protonmail.com"
    - label: "Keybase"
      icon: "fab fa-fw fa-keybase"
      url:  "https://keybase.io/infominer"
    - label: "GitHub"
      icon: "fab fa-fw fa-github"
      url: "https://github.com/infominer33/"
    - label: "Twitter"
      icon: "fab fa-fw fa-twitter-square"
      url: "https://twitter.com/infominer33"
    - label: "Telegram"
      icon: "fab fa-fw fa-telegram"
      url: "https://t.me/InfoMiner33"
   # - label: "Bitcoin"
    #  icon: "fab fa-fw fa-bitcoin"
     # url: 

# Site Footer
footer:
  links:
    - label: "Inf⧉Hub"
      icon: "fa fa-fw fa-cube"
      url: "https://infominer.xyz"
    - label: "Email"
      icon: "fas fa-fw fa-envelope-square"
      url: "mailto:infominer@protonmail.com"
    - label: "Keybase"
      icon: "fab fa-fw fa-keybase"
      url:  "https://keybase.io/infominer"
    - label: "GitHub"
      icon: "fab fa-fw fa-github"
      url: "https://github.com/infominer33/"
    - label: "Twitter"
      icon: "fab fa-fw fa-twitter-square"
      url: "https://twitter.com/infominer33"
    - label: "Telegram"
      icon: "fab fa-fw fa-telegram"
      url: "https://t.me/InfoMiner33"
    

# Sass/SCSS
sass:
  sass_dir: _sass
  style: compressed # http://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style


# Outputting
permalink: /:categories/:title/
paginate: 9 # amount of posts to show
paginate_path: /page:num/
timezone: # https://en.wikipedia.org/wiki/List_of_tz_database_time_zones


# Plugins (previously gems:)
plugins:
  - jekyll-paginate
  - jekyll-sitemap
  - jekyll-gist
  - jekyll-feed
  - jemoji
  - jekyll-include-cache
  - jekyll-optional-front-matter
  - jekyll-readme-index
  - jekyll-redirect-from
  - jekyll-mentions

  
jekyll-mentions:
  base_url: https://twitter.com

# mimic GitHub Pages with --safe
whitelist:
  - jekyll-paginate
  - jekyll-sitemap
  - jekyll-gist
  - jekyll-feed
  - jemoji
  - jekyll-include-cache
  - jekyll-optional-front-matter
  - jekyll-readme-index
  - jekyll-redirect-from
  - jekyll-mentions


# Defaults
defaults:
  # _posts
  - scope:
      path: ""
      type: posts
    values:
      layout: single
      author_profile: true
      read_time: true
      comments: # true
      share: true
      related: true
      sidebar:
        title: "⧉Info⧉"
        nav: "infonav"
      toc: true
      toc_label   : "Contents"
      toc_icon    : "link"
      toc_sticky  : true

Gemfile

These Gem settings are necessary to build infominer.xyz locally, when testing larger changes.

source "https://rubygems.org"

gem "github-pages", group: :jekyll_plugins


# If you have any plugins, put them here!
group :jekyll_plugins do
  gem "jekyll-paginate"
  gem "jekyll-sitemap"
  gem "jekyll-gist"
  gem "jekyll-feed"
  gem "jemoji"
  gem "jekyll-include-cache"
  gem "jekyll-target-blank"
  gem "jekyll-optional-front-matter"
  gem "jekyll-readme-index"
  gem "jekyll-redirect-from"
  gem "jekyll-seo-tag"
  gem "jekyll-mentions"
  gem 'jekyll-algolia'
  gem "html-proofer"
end

Content

Posts are the blog posts... straight-forward enough. Pages are individual, and not connected in a feed. Having a blog feed is better for discoverability \ accessibility than using individual pages.

Front Matter

I'll use this post as an example, and give a more detailed explanation here, where you are most likely to need one, should you decide to contribute a 'finished' piece of content.

Every Post or Page must have front matter. Without front-matter, jekyll won't read it. That's why you might see empty front-matter in some of the source files.

---
layout: single # this is the layout I always use, except in special cases.
title:  "Contributors Guide: How I use Minimal Mistakes - 2019"
description: "Contributing to the InfoHub via GitHub Pages, Jekyll and Minimal Mistakes."
excerpt: >
  This guide will introduce you to how some of these sites operate, to encourage participation. You are presented with an overview of how I'm using Minimal Mistakes, and Publishing Content for Free via GitHub Pages.

The excerpt is what social media uses in the preview, when sharing... and it also is used in the blog feed for preview text.

header:
  teaser: https://imgur.com/xeWd7Zz.png
  image: https://infominer.xyz/assets/img/minimal-mistakes-teaser.png
  caption: "Minimal Mistakes Setup and [Quick-Start](https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide/)."

The teaser image is used in the blog feed, and for related posts. image is for the header image. og_image may be optionally used, if you want a different social media image than your header image.

The only way to have a uniform capitalization guide I could live with is to capitalize all tags, and capitalize categories as would be officially recognized, or simply first letter capital.

tags: 
  - INFOHUB
  - CONTRIBUTORS-GUIDE
  - PUBLIC-DOMAIN
  - OPEN-SOURCE
  - SOURCECRYPTO
  - DECENTRALIZED-ID
  - JEKYLL
  - MINIMAL-MISTAKES
  - SETUP
  - GITHUB-PAGES
  - WEB-WORK
authors: 
  - "<a href='https://infominer.xyz'>Infominer</a>"
  - "<a href='https://www.caballerojuan.com'>JuanSC</a>"
permalink: how-i-use-minmal-mistakes/
categories: [InfoHub, SourceCrypto, Web-Work-Tools, DIDecentral, Learn-Crypto-Trading]
published: true
last_modified_at: 2019-06-25
---

If you edit an existing post, you can add your name in the authors front matter like i've done here. Permalink is the way I decide which is the official link, and I set canonical once I feel good about the name structure.

Header Video

header:
  video:
    id: 212731897
    provider: google-drive

Defaults

You may recall this section from _config.yml

# Defaults
defaults:
  # _posts
  - scope:
      path: ""
      type: posts
    values:
      layout: single
      author_profile: true
      read_time: true
      comments: # true
      share: true
      related: true
      sidebar:
        title: "⧉Info⧉"
        nav: "infonav"
      toc: true
      toc_label   : "Contents"
      toc_icon    : "link"
      toc_sticky  : true

I'll be honest, I haven't intentionally set up defaults for posts and pages... I've mostly been doing everything manually. Eventually I'll go through and clean all that up so the default settings are default, and there are minimal manual settings in the frontmatter.

Pages work basically the same, except for the naming structure and where they are located.

Responsive Video

I primarily use the youtube video helper.

{% raw %}{% include video id="XsxDH4HcOWA" provider="youtube" %}{% endraw %}

{% raw %}{% include video id="212731897" provider="vimeo" %}{% endraw %}

{% raw %}{% include video id="1u41lIbMLbV53PvMbyYc9HzvBug5lNWaO" provider="google-drive" %}{% endraw %}

You could also introduce a video header, if you have a high quality video.

Syntax Highlighting

In this document I'm highlighting code syntax, and for certain code, the codeblock markdown doesn't work unless you indicate the syntax.

Raw Liquid Code

Figure Images

This allows you to create an image that will fill the width of the content column.

{% raw %}{% include figure image_path="https://sourcecrypto.pub/images/interlinked.png" alt="sourcecrypto.pub" caption="[SourceCrypto.pub](https://sourcecrypto.pub)" %}{% endraw %}

Utility Classes

This page will show you how to create buttons and notices.
.notice}

Feature

This technique can be used to introduce feature rows or individual feature images in any post or layout. In fact, an entire page could be built with just these settings.

You may include these variables:

  • image_path - Required - Full path to image eg: /assets/images/filename.jpg. Use absolute URLS for those hosted externally.
  • image_caption - Optional - Caption for image, Markdown is supported eg: `“Image from Unsplash”
  • alt - Optional - Alternate text for image.
  • title - Optional - Content block title.
  • excerpt - Optional - Content block excerpt text. Markdown is allowed.
  • url - Optional - URL that the button should link to.
  • btn_label - Optional - Button text label. more_label in UI Text data file.
  • btn_class - Optional - Button style. See utility classes for options.

More information: minimal-mistakes/docs/helpers/#feature-row

infominer33.github.io/index.html

Frontmatter for feature images:

intro:
  - image_path: https://infominer.xyz/assets/img/infohub-contributors-thumb.png
    alt: "Contributors Guide"
    title: "Contributors Guide: Introduction"
    excerpt: "This contributors introduction is to encourage participation, with minimal barriar to entry. Quickstart for [GitHub](https://github.com/infominer33), [Twitter](https://twitter.com/SourceCrypto), and [Discord](https://discord.gg/29mZwPQ) Contributions."
    url: "/contributors-intro/"
    btn_label: "Read More"
    btn_class: "btn--primary"
feature_row:
  - image_path: "https://sourcecrypto.pub/bitcoin-history/assets/img/elems10.png"
    alt: "erights.org - CapTP Ops: provideFor() ‘98"
    title: "Bitcoin History - Smart Contracts"
    excerpt: "From Szabo and E Lang - to Ethereum, the DAO, Smart Signatures, and the Cambrian Explosion."
    url: "https://sourcecrypto.pub/bitcoin-history/smart-contracts/"
    btn_label: "Read More"
    btn_class: "btn--primary"
  - image_path: "https://sourcecrypto.pub/images/thecryptoconomy-podcast_guy-swann.png"
    alt: "Down the @TheCryptoconomy Rabbithole"
    title: "Guy Swan - @TheCryptoconomy Essential Episods"
    excerpt: "Audio for Hundreds of Essential Bitcoin Articles. @TheCryptoconomy - Guy Swan..... These Podcasts are essential. So I made an index of them, organized by topic."
    url: "https://sourcecrypto.pub/blog/thecryptoconomy-podcast-deep-dive/"
    btn_label: "Read More"
    btn_class: "btn--primary"
  - image_path: "https://web-work.tools/images/github-pages.jpeg"
    alt: "GHPages Starter Pack"
    title: "GitHub Pages Starter Pack"
    excerpt: "Publishing a Website via GitHub pages is free, and easy. Everything you need to get going in one place + extended resources."
    url: "https://web-work.tools/github-pages-starter-pack/"
    btn_label: "Read More"
    btn_class: "btn--primary"
feature_row2:
  - image_path: "https://web-work.tools/images/pgp-og.png"
    alt: "cypherpunk essentials"
    title: "Using PGP, Escrow, and Cryptocurrency Keysignatures"
    excerpt: "Asymmetric Encryption: Phil Zimmerman, PGP, Bitcoin and Ethereum key-signatures, Escrow, SSL, Various Apps and Resourses."
    url: "https://web-work.tools/practical-public-key-crypto/"
    btn_label: "Read More"
    btn_class: "btn--primary"
  - image_path: "https://sourcecrypto.pub/rare-digital-art/img/Salvador-Pepe-rare-Pepe-auction-1-13-18.jpeg"
    alt: "Digital Rare"
    title: "Rare Pepe - Bitcoin History"
    excerpt: "Starting in October 2014, users on the /r9k/ (robot9000) board on 4chan began referring to original illustrations and photoshops of Pepe the Frog as 'Rare Pepes'; sharing the 'rare' images of Pepe as if they were trading cards, some of which were posted with watermarks to retain their value."
    url: "https://sourcecrypto.pub/bitcoin-history/rare-pepe/"
    btn_label: "Read More"
    btn_class: "btn--primary"
  - image_path: "https://web-work.tools/images/content-creation.png"
    alt: "Resources for Content Creation"
    title: "Resources for Content Creation"
    excerpt: "All kinda tools for images and editing and handy stuff to assist with content creation."
    url: "https://web-work.tools/content-creation/"
    btn_label: "Read More"
btn_class: "btn--primary"

Home Layout

You can see in this markup exactly how my home-page is generated:

---
layout: archive
---

{% raw %}{{ content }}{% endraw %}

<h2>Featured</h2>

{% raw %}{% include feature_row id="intro" type="center" %}{% endraw %}

<h2 class="archive__subtitle">{{ site.data.ui-text[site.locale].recent_posts | default: "Recent Posts" }}</h2>

{% raw %}{% for post in paginator.posts %}{% endraw %}
{% raw %}  {% include archive-single.html %}{% endraw %}
{% raw %}{% endfor %}{% endraw %}

<h2>InfoHub Featured</h2>

{% raw %}{% include feature_row id="feature_row" %}{% endraw %}

{% raw %}{% include feature_row id="feature_row2" %}{% endraw %}

{% raw %}{% include social-share.html %}{% endraw %}

Social Share

I modified this to include the 'Edit this page' button, and some cryptocurrency addresses.

<section class="page__share">
  <h4>ON GITHUB</h4>
  <p><a href="https://github.com/infominer33/infominer33.github.io/blob/master/{{ page.path }}" class="edit">Edit this page <i class="fa fa-pencil"></i></a></p>
    {% raw %}{% if site.data.ui-text[site.locale].share_on_label %}{% endraw %}
  <h4 class="page__share-title">{{ site.data.ui-text[site.locale].share_on_label | default: "Share on" }}</h4>
    {% raw %}{% endif %}{% endraw %}
  <a href="https://twitter.com/intent/tweet?{% if site.twitter.username %}via={{ site.twitter.username | url_encode }}&{% endif %}text={{ page.title | url_encode }}%20{{ page.url | absolute_url | url_encode }}" class="btn btn--twitter" onclick="window.open(this.href, 'window', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" title="{{ site.data.ui-text[site.locale].share_on_label | default: 'Share on' }} Twitter"><i class="fab fa-fw fa-twitter" aria-hidden="true"></i><span> Twitter</span></a>
  <a href="https://www.facebook.com/sharer/sharer.php?u={{ page.url | absolute_url | url_encode }}" class="btn btn--facebook" onclick="window.open(this.href, 'window', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" title="{{ site.data.ui-text[site.locale].share_on_label | default: 'Share on' }} Facebook"><i class="fab fa-fw fa-facebook" aria-hidden="true"></i><span> Facebook</span></a>
  <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ page.url | absolute_url | url_encode }}" class="btn btn--linkedin" onclick="window.open(this.href, 'window', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" title="{{ site.data.ui-text[site.locale].share_on_label | default: 'Share on' }} LinkedIn"><i class="fab fa-fw fa-linkedin" aria-hidden="true"></i><span> LinkedIn</span></a>
  <a href="https://www.reddit.com/submit?url={{ page.url | relative_url }}&title={{ page.title }}" class="btn btn--reddit" title="{{ site.data.ui-text[site.locale].share_on_label }} Reddit"><i class="fab fa-fw fa-reddit" aria-hidden="true"></i><span> Reddit</span></a>
  <p><img src="https://infominer.xyz/assets/img/1pLr.gif"/></p>
  <h4>SUPPORT THE CAUSE</h4>
    <p>Feel free to <a href="mailto:infominer@protonmail.com">contact me</a>!</p>
    <p>Especially if you're interested in <a href="https://web-work.tools/services/#iso-clients-who-want-bitcoin-related-content">bitcoin related content</a> and/or research!</p>
    <!-- Beginning of tippin.me Button -->
    <p><div id="tippin-button" data-dest="infominer33"></div>
    <script src="https://tippin.me/buttons/tip.js" type="text/javascript"></script></p>
    <!-- End of tippin.me Button -->
  <table class="table table-bordered table-hover table-condensed">
      <thead>
      <tr>
        <th title="Field #1">Bitcoin</th>
        <th title="Field #2">DOGE</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>1A1DZfw4VgpHCgnMjnmfDnMjddKf8xdYbd</td>
        <td>DQKkzfJjqnXUD8Z7C3e84vKzvghPe9dXSa</td>
      </tr>
      <tr>
        <td><img src="https://imgur.com/yXLLm9Bl.png" width="150"></td>
        <td><img src="https://imgur.com/z316u0c.png" width="150"></td>
      </tr>
    </tbody>
  </table>  
</section>

Thank You for Stopping By

That's it!

Hope you've found this informative.

Over time, it will become more detailed, and include all the bits I haven't thoroughly explained \ understood.