fardjad/.my-gistful-musings

## .my-gistful-musings
A selected list of my gists that are written in the style of a blog post

## index.md

      
    Raw
  

              index.md
            
          
My Gistful Musings


Fardjad Davari 
 Published on GitHub Gist


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:

It supports Markdown and hosting images.
Readers can leave comments on the gists.
Gists are discoverable in search engines.
Gists are version controlled. So I can keep updating the posts and readers
can see the changes.
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


Considerations for Running Postgres on NFS
Debugging and Authoring Helm Charts and Post Rendering Hooks with Viddy
How to Install Homebrew on Manjaro


## render-gist.html
<!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>
  </head>

  <body class="markdown-body">
    <div class="container"></div>
    <script 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@2.1.0/+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 renderGist = async () => {
        const queryParameters = new URLSearchParams(window.location.search);

        let gistId;
        if (!queryParameters.has("gist_id")) {
          gistId = "7e97b97a5034cc2ecb5f8e3344bd44a4/index.md";
        } else {
          gistId = queryParameters.get("gist_id");
        }

        let rendered;
        const md = await fetch(
          `https://gist.githubusercontent.com/raw/${gistId}`
        ).then((response) => response.text());
        rendered = marked(md);

        document.querySelector(".container").innerHTML = rendered;
        window.document.title =
          document.querySelector("h1")?.innerText ?? "Untitled";
        const sourceAnchor = document.querySelector("#source-anchor");
        if (sourceAnchor) {
          sourceAnchor.href = `https://gist.github.com/${gistId.split("/")[0]}`;
        }
      };

      try {
        await renderGist();
      } catch (error) {
        document.querySelector(".container").innerHTML = error.message;
      }
    </script>
  </body>
</html>
	<!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>
	</head>

	<body class="markdown-body">
	<div class="container"></div>
	<script 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@2.1.0/+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 renderGist = async () => {
	const queryParameters = new URLSearchParams(window.location.search);

	let gistId;
	if (!queryParameters.has("gist_id")) {
	gistId = "7e97b97a5034cc2ecb5f8e3344bd44a4/index.md";
	} else {
	gistId = queryParameters.get("gist_id");
	}

	let rendered;
	const md = await fetch(
	`https://gist.githubusercontent.com/raw/${gistId}`
	).then((response) => response.text());
	rendered = marked(md);

	document.querySelector(".container").innerHTML = rendered;
	window.document.title =
	document.querySelector("h1")?.innerText ?? "Untitled";
	const sourceAnchor = document.querySelector("#source-anchor");
	if (sourceAnchor) {
	sourceAnchor.href = `https://gist.github.com/${gistId.split("/")[0]}`;
	}
	};

	try {
	await renderGist();
	} catch (error) {
	document.querySelector(".container").innerHTML = error.message;
	}
	</script>
	</body>
	</html>