View Markdown button on posts page

Help
1

I’m having a brain freeze :frowning: Currently there is a More/Less button on blog posts:

Pippim post need edit button for admin

Next to the “More”/“Less” button I’d like to place a “Markdown” button so the user (OK well me) can view how the Kramdown is setup for this page.

I’m having trouble wrapping my head around how the Markdown button needs to create the Liquid//Kramdown in order to open the _posts/....md file in GitHub Repo in a new window / tab in the browser.

Here’s the live link to the recorded .gif example above

In URL-Speak the link is:

https://pippim.github.io/2018/08/01/How-to-use-xrandr-gamma-for-Gnome-Night-Light-like-usage.html

In G-H-Pages-Speak the link is:

https://github.com/pippim/pippim.github.io/blob/main/_posts/2018/2018-08-01-How-to-use-%22xrandr---gamma%22-for-Gnome-%22Night-Light%22-like-usage%3F.md

In Jekyll-Speak the link is:

_posts/2018/2018/08/01/How-to-use-"xrandr---gamma"-for-Gnome-"Night-Light"-like-usage?

Because there were over 1000 _posts I had to divide them into the years 2016 to 2022 otherwise GitHub wouldn’t display all the files (the maximum in GitHub is 1,000 displayable filenames per directory)…

I’ve looked at slugify: pretty but that didn’t help much. How do I get Liquid to return the GitHub Repo Post filename URL from the Jekyll Post filename?

2

Hopefully I am not missing anything and this is an easy fix.

In your _config.yml, add a variable that represents your GitHub Pages code link. In my case, I am calling it code_url, but you can call it anything.

Anywhere in your _config.yml file, put the following two lines:

# Link to content on the repo
code_url: https://github.com/pippim/pippim.github.io/blob/main

(note: you may or may not have to add a / at the end of that line… you will have to test.

Now, in your code, you will use assign to prepend the code_url. Here is an example that gets all the posts in your site and adds a direct link to the GitHub repo markdown file:

{% for post in site.posts %}
    title: {{ post.title }}
    {% assign repo_url = post.url | prepend: site.code_url %}
    repo_url: {{ repo_url }}
{% endfor %}
4

@BillRaymond Hi Bill, Sorry for the tardy response. I actually had this working over a week ago and moved onto “priority projects” with intention of “coming back soon”. It’s working fine now as .gif shows:

.gif showing More/Less button and View on GitHub button

Post More & View Buttons

Front Matter on Blog post

$ head 2017-02-11-Can* -n20
---
layout:       post
title:        >
    Can BASH display in systray as application indicator?
site:         Ask Ubuntu
stack_url:    https://askubuntu.com/q/882420
type:         Answer
tags:         unity bash scripts system-tray eyesome multi-timer
created_date: 2017-02-11 23:34:13
edit_date:    2021-12-12 22:34:32
votes:        "6 "
favorites:    
views:        "1,906 "
accepted:     Accepted
uploaded:     2022-01-19 20:40:17
git_md_url:   https://github.com/pippim/pippim.github.io/blob/main/_posts/2017/2017-02-11-Can-BASH-display-in-systray-as-application-indicator^.md
toc:          false
navigation:   true
clipboard:    true
---

I used a variation of your suggestion to put the GitHub Pages URL directly into the blog post’s front matter above.

Python Code snippet

The big problem is how GitHub Pages sanitizes the URL. So the first step is to fix the filename used for the blog post based on sanitized title:

""" Return blog filename.
    Replace all spaces in title with "-"
    Prepend "/YYYY/" to post filename as required.

    The filename needs to be sanitized for URL. There is no
    direct citation but this link is close:

    - https://github.com/AndyGlew/Test-GitHub-stuff/wiki/
      Special-characters-in-GitHub-wiki-page-names-GFMarkdown

    GitHub allows:

        '"', "'", "`". "(", ")", "<", ">", "[", "]", "{", "}",
        "~", ":", "_", "-", "!", "^", "*", ".", "\", "|", " "
        Unicode division symbol: "∕"

    GitHub converts:

        "#" to "%23"
        "$" to "%24"
        "%" to "%25"
        "&" to "%26"
        "+" to "%2B"
        ";" to "%3B"
        "," to "%2C"
        "=" to "%3D"
        "?" to "%3F"
        "@" to "%40"

        "▶️" to " ▶%EF%B8%8F"

    HTML breaks references in links when using:

        "'", '"', '<', '>', '(', ')', '[', ']'
"""
global total_special_chars_in_titles, total_unicode_in_titles

sub_dir = make_output_year_dir(r[CREATED])

# little is just a cute abbreviation for "list title"
little = list(r[TITLE])
for i, lit in enumerate(little):
    if lit == " ":
        little[i] = "-"
    elif lit in "#$%&+;,=?/'<>()[]":
        little[i] = "^"
        total_special_chars_in_titles += 1
    elif lit in '"':
        little[i] = "^"
        total_special_chars_in_titles += 1
    elif len(lit) > 1:
        little[i] = "u"
        total_unicode_in_titles += 1
    elif len(little) != len(r[TITLE]):
        fatal_error('Should be a unicode here?')

base_fn = sub_dir + r[CREATED].split()[0] + '-' + ''.join(little)

blog_fn = OUTPUT_DIR + base_fn + ".md"
blog_fn = blog_fn.replace('//', '/')

return base_fn, blog_fn

I left in the lengthy comments above in case it may help others.

Note: The unicode section has not been tested because I have no blog post titles with unicode (that I’ve come across anyway).