Deploy tramlinehq/devnotes to tramlinehq/devnotes:gh-pages

tramlinehq · Aug 8, 2023 · b49926d · b49926d
commit b49926d
Show file tree

Hide file tree

Showing 32 changed files with 4,981 additions and 0 deletions.
diff --git a/404.html b/404.html
@@ -0,0 +1,3 @@
+<!doctype html>
+<title>404 Not Found</title>
+<h1>404 Not Found</h1>
diff --git a/CNAME b/CNAME
@@ -0,0 +1 @@
+devnotes.tramline.app
diff --git a/atom.xml b/atom.xml
diff --git a/elasticlunr.min.js b/elasticlunr.min.js
diff --git a/favicon.png b/favicon.png
diff --git a/images/dir.png b/images/dir.png
diff --git a/images/has_one.png b/images/has_one.png
diff --git a/images/logo.png b/images/logo.png
diff --git a/images/rubymine.png b/images/rubymine.png
diff --git a/images/txns-suck.png b/images/txns-suck.png
diff --git a/index.html b/index.html
diff --git a/main.js b/main.js
@@ -0,0 +1,210 @@
+function switchScheme(e) {
+	e.style.color = 'var(--secondary-text)';
+
+	window.localStorage.setItem(
+		'colorscheme',
+		currentlyPrefersDark() ? 'light' : 'dark',
+	);
+
+	updateScheme();
+	return e;
+}
+
+function currentlyPrefersDark() {
+	const savedScheme = window.localStorage.getItem('colorscheme');
+
+	if (savedScheme != null) {
+		return savedScheme === 'dark';
+	}
+
+	return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
+
+function updateScheme() {
+	if (currentlyPrefersDark()) {
+		document.body.classList.add('dark');
+		document.body.classList.remove('light')
+	} else {
+		document.body.classList.add('light')
+		document.body.classList.remove('dark');
+	}
+}
+
+function debounce(func, wait) {
+	var timeout;
+
+	return function () {
+		var context = this;
+		var args = arguments;
+		clearTimeout(timeout);
+
+		timeout = setTimeout(function () {
+			timeout = null;
+			func.apply(context, args);
+		}, wait);
+	};
+}
+
+// Taken from mdbook
+// The strategy is as follows:
+// First, assign a value to each word in the document:
+//  Words that correspond to search terms (stemmer aware): 40
+//  Normal words: 2
+//  First word in a sentence: 8
+// Then use a sliding window with a constant number of words and count the
+// sum of the values of the words within the window. Then use the window that got the
+// maximum sum. If there are multiple maximas, then get the last one.
+// Enclose the terms in <b>.
+function makeTeaser(body, terms) {
+	var TERM_WEIGHT = 40;
+	var NORMAL_WORD_WEIGHT = 2;
+	var FIRST_WORD_WEIGHT = 8;
+	var TEASER_MAX_WORDS = 30;
+
+	var stemmedTerms = terms.map(function (w) {
+		return elasticlunr.stemmer(w.toLowerCase());
+	});
+	var termFound = false;
+	var index = 0;
+	var weighted = []; // contains elements of ["word", weight, index_in_document]
+
+	// split in sentences, then words
+	var sentences = body.toLowerCase().split(". ");
+
+	for (var i in sentences) {
+		var words = sentences[i].split(" ");
+		var value = FIRST_WORD_WEIGHT;
+
+		for (var j in words) {
+			var word = words[j];
+
+			if (word.length > 0) {
+				for (var k in stemmedTerms) {
+					if (elasticlunr.stemmer(word).startsWith(stemmedTerms[k])) {
+						value = TERM_WEIGHT;
+						termFound = true;
+					}
+				}
+				weighted.push([word, value, index]);
+				value = NORMAL_WORD_WEIGHT;
+			}
+
+			index += word.length;
+			index += 1;  // ' ' or '.' if last word in sentence
+		}
+
+		index += 1;  // because we split at a two-char boundary '. '
+	}
+
+	if (weighted.length === 0) {
+		return body;
+	}
+
+	var windowWeights = [];
+	var windowSize = Math.min(weighted.length, TEASER_MAX_WORDS);
+	// We add a window with all the weights first
+	var curSum = 0;
+	for (var i = 0; i < windowSize; i++) {
+		curSum += weighted[i][1];
+	}
+	windowWeights.push(curSum);
+
+	for (var i = 0; i < weighted.length - windowSize; i++) {
+		curSum -= weighted[i][1];
+		curSum += weighted[i + windowSize][1];
+		windowWeights.push(curSum);
+	}
+
+	// If we didn't find the term, just pick the first window
+	var maxSumIndex = 0;
+	if (termFound) {
+		var maxFound = 0;
+		// backwards
+		for (var i = windowWeights.length - 1; i >= 0; i--) {
+			if (windowWeights[i] > maxFound) {
+				maxFound = windowWeights[i];
+				maxSumIndex = i;
+			}
+		}
+	}
+
+	var teaser = [];
+	var startIndex = weighted[maxSumIndex][2];
+	for (var i = maxSumIndex; i < maxSumIndex + windowSize; i++) {
+		var word = weighted[i];
+		if (startIndex < word[2]) {
+			// missing text from index to start of `word`
+			teaser.push(body.substring(startIndex, word[2]));
+			startIndex = word[2];
+		}
+
+		// add <em/> around search terms
+		if (word[1] === TERM_WEIGHT) {
+			teaser.push("<b>");
+		}
+		startIndex = word[2] + word[0].length;
+		teaser.push(body.substring(word[2], startIndex));
+
+		if (word[1] === TERM_WEIGHT) {
+			teaser.push("</b>");
+		}
+	}
+	teaser.push("…");
+	return teaser.join("");
+}
+
+function formatSearchResultItem(item, terms) {
+	return '<div class="search-results__item">'
+	+ `<a href="${item.ref}">${item.doc.title}</a>`
+	+ `<div>${makeTeaser(item.doc.body, terms)}</div>`
+	+ '</div>';
+}
+
+function initSearch() {
+	var $searchInput = document.getElementById("search");
+	var $searchResults = document.querySelector(".search-results");
+	var $searchResultsItems = document.querySelector(".search-results__items");
+	var MAX_ITEMS = 10;
+
+	var options = {
+		bool: "AND",
+		fields: {
+			title: {boost: 2},
+			body: {boost: 1},
+		}
+	};
+	var currentTerm = "";
+	var index = elasticlunr.Index.load(window.searchIndex);
+
+	$searchInput.addEventListener("keyup", debounce(function() {
+		var term = $searchInput.value.trim();
+		if (term === currentTerm || !index) {
+			return;
+		}
+		$searchResults.style.display = term === "" ? "none" : "block";
+		$searchResultsItems.innerHTML = "";
+		currentTerm = term;
+		if (term === "") {
+			return;
+		}
+
+		var results = index.search(term, options);
+		if (results.length === 0) {
+			$searchResults.style.display = "none";
+			return;
+		}
+
+		for (var i = 0; i < Math.min(results.length, MAX_ITEMS); i++) {
+			var item = document.createElement("li");
+			item.innerHTML = formatSearchResultItem(results[i], term.split(" "));
+			$searchResultsItems.appendChild(item);
+		}
+	}, 150));
+
+	window.addEventListener('click', function(e) {
+		if ($searchResults.style.display == "block" && !$searchResults.contains(e.target)) {
+			$searchResults.style.display = "none";
+		}
+	});
+}
+
diff --git a/page/1/index.html b/page/1/index.html
@@ -0,0 +1,6 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="canonical" href="https://devnotes.tramline.app/">
+<meta http-equiv="refresh" content="0; url=https://devnotes.tramline.app/">
+<title>Redirect</title>
+<p><a href="https://devnotes.tramline.app/">Click here</a> to be redirected.</p>
diff --git a/post-2022-09-25t21-18-31/index.html b/post-2022-09-25t21-18-31/index.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <script defer data-domain="devnotes.tramline.app" src="https://plausible.io/js/script.js"></script>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <link rel="stylesheet" href="https://devnotes.tramline.app/styles/styles.css">
+    <link rel="stylesheet" href="https://devnotes.tramline.app/styles/header.css">
+    <link rel="apple-touch-icon" sizes="180x180" href="https://devnotes.tramline.app/favicon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="https://devnotes.tramline.app/favicon.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="https://devnotes.tramline.app/favicon.png">
+    <title>Tramline | Engineering notes</title>
+    <style type="text/css">
+     body {
+       text-rendering: optimizeLegibility;
+       -webkit-font-smoothing: antialiased;
+       -moz-osx-font-smoothing: grayscale;
+     }
+    </style>
+  </head>
+
+  <body class="bg-tram-green-light bg-no-repeat bg-gradient-to-br min-h-screen border-b-8 border-tram-green">
+
+<header>
+  <div data-collapse="small" data-animation="default" data-duration="400" data-easing="ease" data-easing2="ease" role="banner" class="nav-bar w-nav">
+    <div class="nav-container w-container">
+      <div class="logo-div">
+        <a href="https://tramline.app" aria-current="page" class="nav-logo w-inline-block w--current">
+          <img src="https://devnotes.tramline.app/images/logo.png" loading="eager" width="50" alt="logo" class="logo">
+        </a>
+      </div>
+      <nav role="navigation" class="nav-content w-nav-menu">
+        <div class="nav-menu">
+          <a href="/" aria-current="page" class="nav-link tramline w-nav-link w--current style-hNwNo" id="style-hNwNo">
+            Tramline
+            <p class="text-sm">engineering notes</p>
+          </a>
+        </div>
+      </nav>
+    </div>
+  </div>
+</header>
+
+    <div class="border-b mb-3"></div>
+    <main>
+      <div class="px-2">
+        <div class="mb-24 mt-16 px-4">
+          <h1 data-w-id="18a9bc4c-33dd-e424-566d-cf277b93ef10" class="text-center heading-large style-J5dMq my-8" id="style-J5dMq">
+            Short notes from engineering
+          </h1>
+          <div class="container max-w-[625px] mx-auto text-center
+                      prose prose-lg
+                      prose-a:border-b-[1px] prose-a:border-slate-500 prose-a:font-sans prose-a:no-underline
+                      hover:prose-a:border-slate-200">
+            <p>
+              Micro-posts on programming and patterns as we build <a href="https://tramline.app" target="_blank">Tramline</a> in public.
+              Follow this <a href="/atom.xml" target="_blank">feed</a> if you find these bits interesting.
+            </p>
+          </div>
+        </div>
+      </div>
+
+
+<article class="container max-w-[900px] mx-auto my-8 px-2">
+  <hr class="border-slate-200 mx-auto max-w-7xl">
+  <div class="my-8"></div>
+  <div class="md:flex">
+    <div class="md:basis-[100px] md:flex-grow-0 md:flex-shrink-0 md:mr-4 px-1 ml-3 mb-8">
+      <div class="font-medium my-2 leading-normal text-xs">
+        <div class="tracking-wide">2022 &#x2F; Sep 25 — 21:18</div>
+        <div class="mt-2 mb-2 underline">kitallis</div>
+        <a href="https://devnotes.tramline.app/post-2022-09-25t21-18-31/">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
+            <g fill="none" class="nc-icon-wrapper">
+              <path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1 0 1.71-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" fill="#212121">
+              </path>
+            </g>
+          </svg>
+        </a>
+      </div>
+    </div>
+    <div class="container max-w-[900px] mx-auto px-4">
+      <div class="md:flex-grow md:ml-4">
+        <div class="max-w-none
+                    prose prose-md
+                    prose-a:border-b-[1px] prose-a:border-slate-500 prose-a:font-sans prose-a:no-underline
+                    hover:prose-a:border-b-slate-200
+                    prose-pre:prose-code:prose-a:text-sm prose-code:prose-p:text-sm
+                    prose-h1:font-bold prose-h1:text-base
+                    prose-p:font-serif
+                    prose-p:prose-blockquote:font-sans
+                    prose-strong:font-sans
+                    prose-ol:font-serif
+                    prose-ul:font-serif">
+		      <p>The log streams feature in <a href="https://render.com">Render</a> is a little bit strange. From the <a href="https://render.com/docs/log-streams#configuring-log-streams">docs</a>,</p>
+<pre style="background-color:#383838;color:#e6e1dc;"><code><span>Render Log Streams forward logs from your web services,
+</span><span>private services, background workers, databases,
+</span><span>and cron jobs to any logging provider that supplies a TLS-enabled syslog drain.
+</span></code></pre>
+<p>I hooked this up with datadog and it is indeed a syslog drain across <em>all</em> services. This means my newly setup datadog is now filled with thousands of non-application related logs. Not only now do I have to filter all these out, but also pay for them.</p>
+<p>Surely a log streaming pipeline should have a minimum of a service-level (if not content-level) filtering as baseline features?</p>
+
+        </div>
+      </div>
+	  </div>
+  </div>
+</article>
+
+
+    </main>
+  </body>
+</html>