Skip to content

Instantly share code, notes, and snippets.

@fardjad
Last active May 29, 2024 18:13
Show Gist options
  • Save fardjad/7e97b97a5034cc2ecb5f8e3344bd44a4 to your computer and use it in GitHub Desktop.
Save fardjad/7e97b97a5034cc2ecb5f8e3344bd44a4 to your computer and use it in GitHub Desktop.
My Gistful Musings (https://blog.fardjad.com)
A selected list of my gists that are written in the style of a blog post

My Gistful Musings

This page contains a selected list of my gists that are written in the style of a blog post (i.e. they are not just code snippets).

A Blog on GitHub Gist?

GitHub Gist is great for writing blog posts because:

  1. It supports Markdown and hosting images.
  2. Readers can leave comments on the gists.
  3. Gists are discoverable in search engines.
  4. Gists are version controlled. So I can keep updating the posts and readers can see the changes.
  5. Writing Markdown in my text editor is much more convenient than using a web-based CMS.

To show the gists in a blog-like format, I wrote a bit of code to fetch the markdown contents of the gists and render them in the browser. You can find the implementation here.

My goal is to keep everything as simple as possible and focus on the content. Even for the content, I'll steer clear of superfluous details and try to keep the articles both useful and to the point.

Posts

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Untitled</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/github-markdown-css/github-markdown-dark.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/github-dark.min.css"
/>
<style>
.markdown-body {
box-sizing: border-box;
min-width: 200px;
max-width: 980px;
margin: 0 auto;
padding: 45px;
}
@media (max-width: 767px) {
.markdown-body {
padding: 15px;
}
}
</style>
<script id="helpers">
/**
* @param {URL} url
* @returns {string}
*/
const getGistId = (url) => {
const queryParameters = new URLSearchParams(url.search);
if (!queryParameters.has("gist_id")) {
// home page
return "7e97b97a5034cc2ecb5f8e3344bd44a4/index.md";
} else {
return queryParameters.get("gist_id");
}
};
/**
* @param {(md: string) => string} markdownToHtml
* @param {string} gistId
* @returns {Promise<string>}
*/
const gistToHtml = async (markdownToHtml, gistId) => {
const md = await fetch(
`https://gist.githubusercontent.com/raw/${gistId}`
).then((response) => response.text());
return markdownToHtml(md);
};
/**
* @param {Document} document
* @param {string} title
* @returns {HTMLHeadingElement}
*/
const createTitleElement = (document, title) => {
const titleElement = document.createElement("h1");
titleElement.innerText = title;
return titleElement;
};
/**
* @param {Document} document
* @param {string} renderedGist
* @param {string} gistPageHref
*/
const updateDocument = async (document, renderedGist, gistPageHref) => {
const articleElement = document.querySelector("article");
articleElement.innerHTML = renderedGist;
// title
let titleElement = articleElement.querySelector("h1");
if (titleElement) {
titleElement.parentElement.removeChild(titleElement);
} else {
titleElement = createTitleElement(document, "Untitled");
}
document.querySelector("header").prepend(titleElement);
document.title = document.querySelector("h1").textContent;
// source link
const sourceAnchor = document.querySelector("#source-anchor");
sourceAnchor.href = gistPageHref;
};
/**
* @param {URL} url
* @param {Document} document
* @param {(md: string) => string} markdownToHtml
*/
const render = async (url, document, markdownToHtml) => {
const gistId = getGistId(url);
const gistPageHref = `https://gist.github.com/${gistId.split("/")[0]}`;
const gistHtml = await gistToHtml(markdownToHtml, gistId);
try {
await updateDocument(document, gistHtml, gistPageHref);
} catch (error) {
console.error(error);
document.querySelector("article").innerHTML = error.message;
}
};
</script>
<script id="render" type="module">
import { marked } from "https://cdn.jsdelivr.net/npm/marked/lib/marked.esm.js";
import hljs from "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/es/highlight.min.js";
import { markedHighlight } from "https://cdn.jsdelivr.net/npm/marked-highlight/+esm";
marked.use(
markedHighlight({
langPrefix: "hljs language-",
highlight(code, lang, info) {
const language = hljs.getLanguage(lang) ? lang : "plaintext";
return hljs.highlight(code, { language }).value;
},
})
);
const boundRender = render.bind(
null,
new URL(location.href),
document,
marked
);
if (document.readyState !== "loading") {
await boundRender();
} else {
document.addEventListener("DOMContentLoaded", boundRender);
}
</script>
</head>
<body class="markdown-body">
<header>
<blockquote>
<p>
<a href="https://github.com/fardjad">Fardjad Davari</a> <br />
Published on
<a href="https://gist.github.com/fardjad" id="source-anchor"
>GitHub Gist</a
>
</p>
</blockquote>
</header>
<article>Loading...</article>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment