Jekyll (first) 🧪

You don’t want a site that’s not really you. A site filled with social buttons and widgets and gadgets and analytics and tracking cookies and banner ads and pop-up ads and everything else that makes your visitors scream at you from afar. Generated anew every time someone visits your site. Every. Single. Time. - Building a blog with jekyll - [1]

see also

20 Years of Bloggin
One million (small web) screenshots / HN - which happens to contain this site!!

# Basics

introduction
Yes we Jekyll
Mardown
- Jekyll: Markdown Basics
- quick-ref-jekyll-markdown.md
- How to force a linebreak? - two or more space at the end of the line.

# Configuring Jekyll

# Rouge higlightning

{% highlight cpp %}
code
{% endhighlight %}

# Youtube trick

[![caption](https://img.youtube.com/vi/XXXvideo_idXXX/0.jpg)](https://www.youtube.com/watch?v=XXXvideo_idXXX)

# embeded video

see Adding a Video to a GitHub

{::nomarkdown}
<div class="myvideo">
   <video  style="display:block; width:100%; height:auto;" autoplay controls loop="loop">
       <source src="XXX_url_XXX.webm"  type="video/webm"  />
       <source src="XXX_url_XXX.mp4"  type="video/mp4"  />
       <source src="XXX_url_XXX.ogg"  type="video/ogg"  />
   </video>
</div>
{:/}

# site images

![caption](/images/XXXimage.gifXXX)

see also

Display an array of images

# external images 🖼

CSS properties can be added as html comments

![caption](XXX_url_XXX) <!-- .element height="50%" width="50% ustify-content="left" -->

For SVG:
<img src="XXX_url_XXX">

# excerp

Disable (default is first paragraph)

excerpt_separator: ""

Custom

excerpt_separator: <!--more-->

# inline SVG

{::nomarkdown}
<svg width="400" height=300>
    <circle cx="150" cy="100" r="10" fill="blue"/>
</svg>
{:/}

# Advanced Formating

Sorting Posts by Something Other Than Date

# Link to post 🔗

[Mean-Max]({% post_url 2017-11-27-CG-meanmax %})
[Mean-Max]({% post_url 2017-11-27-CG-meanmax %}#anchor-id)

Controlling URLs and Links in Jekyll
Jekyll heading links - javascript for generating MFragment URLs
- Linking to an element on the same page
Jekyll Heading Anchors without JavaScript

# Citation¹

{::nomarkdown}
Here is some content with a citation[^1].

Another example of content[^2].

[^1]: Author Name. *Title of the Work*. Publisher, Year. URL or DOI.
[^2]: Another Author. *Another Work*. Publisher, Year. URL or DOI.
{:/}

Example:
Here is some content with a citation^(¹).
Another example of content^(²).

see also

setup CSS for citation

# favicon ⬙

image
<link rel="shortcut icon" href="https://crystal-lang.org/favicon.ico" type="image/x-icon" />

or for svg
<link rel="shortcut icon" href="https://pic.onlinewebfonts.com/thumbnails/icons_537547.svg" type="image/svg+xml" />

# Colored text 🔴 🟠 🟡 🟢

<span style="color:red">[**Warning**]</span>

Alternatives is to use coloured Unicode characters, such as 🔴, U+1F534 ‘large red circle’.

🔴 red: +5V 🟠 orange: +3.3V ⚫ black: ground ⚪ white: ground (pull-down) 🟣 purple: I2C signal 🟢 green: clock signal 🟡 yellow: WS2812 signal 🔵 blue: resistor bridge (analogue) input

Or using LATEX code ${\color{red}Red}$

# Strike throudh

There are several ways to do it:

<strike>strike</strike> → ~~strike~~
<del>strike</del> → ~~strike~~
<s>strike</s>→ ~~strike~~
~~strike~~ → ~~strike~~
~strike~- → ~strike~

# Latex Formula

add use_math: true

- $h_\theta(x) = \Large\frac{1}{1 + \mathcal{e}^{(-\theta^\top x)}}$
- $a^2 + b^2 = c^2$
- $\sum_{i=1}^m y^{(i)}$

Example:

$h_\theta(x) = \Large\frac{1}{1 + \mathcal{e}^{(-\theta^\top x)}}$
$a^2 + b^2 = c^2$
$\sum_{i=1}^m y^{(i)}$

# ASCII art

<pre><code>
   ___
  /   \
 |     |
  \___/
</code></pre>

# Directory & File structure

Use tree, then use <pre>

$ tree
.
├── CHANGELOG.md
├── const.hh
├── doc
│   ├── ControlPanel.png
│   └── marslander.png

# Folding content

using HTML only?
- custom expand
- Can I replace the expand icon (▶) of the <details> element?

Summary

Detailed content goes here …

$ tree
.
├── CHANGELOG.md
├── const.hh
├── doc
│   ├── ControlPanel.png
│   └── marslander.png

</code>

Summary

Detailed content goes here …

$ tree
.
├── CHANGELOG.md
├── const.hh
├── doc
│   ├── ControlPanel.png
│   └── marslander.png

Notes

summary markdown is not rendered properly
code example are working though…

# Table ᎒᎒᎒᎒

CSV Can be edited in VSCode with Edit CSV.

from CSV Data

{::nomarkdown}
<table>
  {\% for row in site.data.amd_price_per_core %}
    {\% if forloop.first %}
    <tr>
      {\% for pair in row %}
        <th></th>
      {\% endfor %}
    </tr>
    {\% endif %}

    {\% tablerow pair in row %}
      

    {\% endtablerow %}
  {\% endfor %}
</table>
{:/}

# Table of Content (TOC) ☰

Dynamic ToC Floating Pane - javascript that scan the DOM and display the corresponding ToC on a floating pane. jsfiddle

use toc: true or Include script

<script src="/assets/js/toc.js"></script>

see also 💭

this site for inspiration
- following/tracking scrolled toc entry
- side note

# Encart 🖵

## New Way
<div class="encart orange" markdown="1">

## Old way
<div style="
  border-left: 4px solid #3498db;
  background: #eef7ff;
  padding: 1rem;
  margin: 1rem 0;
  border-radius: 6px;
"  markdown="1" >
  
Your text here

Your text here

</div>

# Theme ☀️

Link Color Switcher - give user Theme control
- DarkMode 🌙 / ☀️ - The dark mode isn’t persisting across pages because CSS alone cannot save state between page loads / need minimal javascript for that. - using Javascript one can use save in local storage (also used by graph)

see also

Dark Mode vs. Light Mode: Which Is Better? - people with normal vision (or corrected-to-normal vision), visual performance tends to be better with light mode, whereas some people with cataract and related disorders may perform better with dark mode.

# Other

# Time Stamps 📆

How to insert the last updated time-stamp in Jekyll page at build time? - using _data/mtimes.json (see Data Files)
- Sorting Jekyll posts by modification date instead of posted date?

# Single Page theme

How do I customize Jekyll theme for a single page in GitHub pages?

The easiest way would be to just define a new layout for your help.md

Create a copy of the layout currently used by help.md (say, page.html)
Rename the new layout as help.html (path: _layouts/help.html)
Remove markup that renders the large hero header

Use layout: help in the front matter of help.md:

---
layout: help
---

# Javascript helper

Slugify - make string usable as #href

# Diagnosing on Github

Github Jekyll pages

Go to repository and look into Actions

# Traffic ?

# Rotten Link

Run locally and use Xenu’s Link Sleuth (through Wine).

# Running Jekyll locally ⮺

Install ruby 3.2.0 💎

$ rbenv install 3.2.0
$ rbenv rehash
$ rbenv local 3.2.0
$ gem install jekyll bundler

$ bundle install
# if it fails 
# rm -rf vendor/bundle .bundle Gemfile.lock
# and try again

see also

install
- Obsolete Not compatible with Ruby 3.0 - use ruby 2.7
Liquid Exception comparison of Array with Array failed #406

$ jekyll new myblog

And copy Gemfile* into Github blog Now you can run

$ bundle exec jekyll serve --incremental

# Online Editor

# see also

# RSS 💭

Publish on your own site, syndicate elsewhere - HN

# Liquid

Jekyll uses the Liquid templating language to process templates. All of the standard Liquid tags and filters are supported.

Escape Liquid tags in Jekyll using {{ “{{“ }} site.title }} trick or use raw.

inlined comment on doc side only

[//]: # ( https://jsfiddle.net/y_duf/6cz94d5e/ )

# Alternatives

Zola