Add tips

config.yaml

@@ -4,6 +4,7 @@ title: lyte.dev
 pygmentsCodeFences: true
 pygmentsCodeFencesGuessSyntax: true
 pygmentsUseClasses: true
+enableGitInfo: true
 markup:
   goldmark:
     renderer:
@@ -29,7 +30,11 @@ menu:
       name: blog
       url: /blog
       weight: 20
+    - identifier: tips
+      name: tips
+      url: /tips
+      weight: 30
     - identifier: contact
       name: contact
       url: /contact
-      weight: 30
+      weight: 40

content/blog/_index.md

@@ -2,4 +2,4 @@
 title: Blog
 ---
 
-## Latest Posts ([RSS](/blog/index.xml))
+## Latest Blog Posts ([RSS](/blog/index.xml))

content/blog/how-to-setup-a-fast-simple-and-free-blog-like-this.md

@@ -4,10 +4,14 @@ title: How to Setup A Free, Fast, and Simple Blog Like This
 draft: true
 ---
 
+<!-- better intro and summary? -->
+
 **TL;DR**: Netlify is incredible for hosting static websites. The code for this
 entire site is available [here][repo]. I publish at-will using their CLI via
 `netlify deploy --prod`. It's simple and awesome.
 
+<!--more-->
+
 # Introduction
 
 This website may not look like much, but that's *intentional*. It is simple

content/blog/mirroring-gitea-to-other-repository-management-services.md

@@ -9,15 +9,15 @@ title: Mirroring Gitea to Other Repository Management Services (GitHub, GitLab,
 draft: false
 ---
 
-**NOTE**: Gitea now supports this out-of-the-box and probably fits your
-use-case: https://docs.gitea.io/en-us/repo-mirror/
-
 I have a [Gitea][gitea] instance I self-host at home. I keep most of my
 repositories there, but I recognize that most other developers and potential
 employers will want to see [my work _on_ GitHub][me-on-github].
 
 <!--more-->
 
+**NOTE**: Gitea now supports this out-of-the-box and probably fits your
+use-case: https://docs.gitea.io/en-us/repo-mirror/
+
 # TL;DR
 
 - Setup an SSH key for your Gitea instance on the relevant external repositories

content/blog/the-only-good-thing-about-yaml-anchors-and-aliases-and-extend.md

@@ -9,6 +9,8 @@ create an anchor with that name and reference it later with `*{NAME_HERE}` (like
 `*key`) to avoid repeating yourself in a document. You can also "merge" object
 values using the `<<` key.
 
+<!--more-->
+
 # Introduction
 
 Since working at [Postmates][pm] ([we're hiring][pm-referral]!) and getting my

content/blog/why-you-should-use-makefiles.md

@@ -11,6 +11,8 @@ a long time and forgotten what all is necessary in order to spin up
 a development environment or which incantation is needed to get this particular
 project to compile, you need a Makefile.
 
+<!--more-->
+
 # Introduction
 
 

content/tips/_index.md

@@ -0,0 +1,5 @@
+---
+title: Blog
+---
+
+## Latest Tips ([RSS](/tips/index.xml))

content/tips/iex-dbg-pry.md

@@ -1,10 +1,15 @@
+---
+title: "iex and dbg/1 without pry prompts"
+date: "2023-06-22"
+---
+
 I love `iex -S mix ...` but I usually don't like when `dbg` asks me to `pry`.
 Just show me my data! Well, today I learned about `iex --no-pry`:
 
-```bash
+```console
 $ iex --help
 Usage: iex [options] [.exs file] [data]
-... (snip)
+  ...
   --no-pry            Doesn't start pry sessions when dbg/2 is called.
 ```
 

layouts/_default/list.html

@@ -1,12 +1,12 @@
 {{ define "main" }}
 	{{ .Content }}
-	<ul>
+
 	{{ range .Pages }}
 		{{ .Render "li" }}
 	{{ else }}
-		<li>Looks like there's nothing here!... yet!</li>
+		<p>Looks like there's nothing here!... yet!</p>
 	{{ end }}
-	</ul>
+
 {{ end }}
 
 {{ define "title" }}

layouts/blog/li.html

@@ -1,7 +1,6 @@
-<li style="margin-bottom: 0.5em">
-	{{ dateFormat "Jan 2 2006" .Lastmod }}
-	<br />
-	<a href="{{ .Permalink }}">
-		{{ .Title }}
+<h3>
+	<a style="flex-shrink: 1; margin-right: auto;" href="{{ .Permalink }}">
+		{{ print .Title " posted on " (dateFormat "Jan 2 2006" (cond .Date.IsZero .Lastmod .Date)) }}
 	</a>
-</li>
+</h3>
+{{ .Summary }}

layouts/index.html

@@ -2,14 +2,19 @@
 
 {{ .Content }}
 
-<h2 id="latest-posts">Latest Posts (<a target="_blank" href="/blog/index.xml">RSS</a>)</h2>
+<h2 id="latest-posts">Latest <a href="/blog">Blog</a> Posts (<a target="_blank" href="/blog/index.xml">RSS</a>)</h2>
 
-<ul>
-	{{ range (where .Site.RegularPages "Section" "blog") }}
+{{ range (where .Site.RegularPages "Section" "blog") }}
 	{{ .Render "li" }}
-	{{ else }}
+{{ else }}
 	<p>Looks like there's nothing here!... yet!</p>
-	{{ end }}
-</ul>
+{{ end }}
+
+<h2 id="latest-tips">Latest <a href="/tips">Tips</a> (<a target="_blank" href="/tips/index.xml">RSS</a>)</h2>
+{{ range (where .Site.RegularPages "Section" "tips") }}
+	{{ .Render "li" }}
+{{ else }}
+	<p>Looks like there's nothing here!... yet!</p>
+{{ end }}
 
 {{ end }}

layouts/tips/li.html

@@ -0,0 +1,6 @@
+<h3>
+	<a style="flex-shrink: 1; margin-right: auto;" href="{{ .Permalink }}">
+		{{ print .Title " posted on " (dateFormat "Jan 2 2006" (cond .Date.IsZero .Lastmod .Date)) }}
+	</a>
+</h3>
+{{ .Content }}

layouts/tips/single.html

@@ -0,0 +1,13 @@
+{{ define "title" }}
+	{{ .Title }} - {{ .Site.Title }}
+{{ end }}
+
+{{ define "main" }}
+	<h2 id="{{ .Title }}"><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
+	{{ with .Lastmod }}
+		<p>
+			Posted on {{ dateFormat "Jan 2 2006" . }}
+		</p>
+	{{ end }}
+	{{ .Content }}
+{{ end }}

src/stylus/core.styl

@@ -12,25 +12,14 @@ a
 a > svg
 	margin-right: 0.5em
 
-.copy-code-button-container
-	position absolute
-	// top 1em
-	right 0.5em
-	overflow visible
-	padding 0
-	margin 0
-	max-width 100%
-	width 100%
-	display flex
-
 button.copy-code-button
 	color var(--link-fg)
 	text-decoration underline
 	z-index 10
 	position relative
-	margin-left auto
-
-	@media (max-width: 600px)
+	align-self flex-start
+	position absolute
+	right 0
 	opacity 0.75
 
 	&:hover
@@ -61,8 +50,11 @@ html,body
 
 	&> main, > footer
 		.highlight
+			position relative
+			background-color var(--syntax-bg)
 			max-width 100vw
 			border-left solid var(--syntax-bpx) var(--syntax-ledg)
+			display flex
 
 		.highlight, h1, h2, h3, h4, h5, h6, form, ul, ol, p
 			margin-top 1em
@@ -76,7 +68,8 @@ html,body
 		*:first-child { margin-top: 0 }
 
 		h1, h2, h3, h4, h5, h6
-			display flex
+			position relative
+			display block
 
 			.anchor-link
 				flex-grow 1
@@ -84,7 +77,6 @@ html,body
 				font-weight normal
 				font-size 75%
 				text-decoration underline
-				display flex
 				color transparent
 				
 				&:focus-visible
@@ -101,9 +93,9 @@ html,body
 					font-weight normal
 					font-size 75%
 					text-decoration none
-					display flex
 					position absolute
 					right 0
+					top 0
 
 		> p code, > h1 code, > h2 code, > h3 code, > h4 code, > h5 code, > h6 code, blockquote code
 			padding 0.1em 0.25em
@@ -165,6 +157,14 @@ button, input[type=submit]
 .lead { font-size: 1.5rem }
 .rounded { border-radius: 0.5em }
 
+table tr > td.leading
+	padding-right 1em
+
+table tr > td
+	vertical-align top
+	padding-top 0.25em
+	padding-bottom 0.25em
+
 form
 	&> label, > fieldset
 		border 0
@@ -219,7 +219,7 @@ form
 				line-height 1.5em
 				text-align left
 
-			h1, h2, h3, h4, h5, h6, form, ul, ol, p
+			h1, h2, h3, h4, h5, h6, form, ul, ol, p, table, .content
 				position relative
 				max-width 600px
 				margin-left auto

static/global.mjs

@@ -52,12 +52,12 @@ function initCodeCopyButtons() {
   const codeBlocks = document.querySelectorAll("pre.chroma");
   codeBlocks.forEach((block) => {
     const code = block.querySelectorAll("code")[0];
-    const buttonContainer = document.createElement("p");
-    buttonContainer.classList.add("copy-code-button-container");
+
+    // const buttonContainer = document.createElement("p");
+    // buttonContainer.classList.add("copy-code-button-container");
     const button = document.createElement("button");
-    buttonContainer.appendChild(button);
+    // buttonContainer.appendChild(button);
     button.classList.add("copy-code-button");
-    block.parentNode.parentNode.insertBefore(buttonContainer, block.parentNode);
     button.textContent = "Copy";
     button.addEventListener("click", (_ev) => {
       button.disabled = true;
@@ -77,6 +77,8 @@ function initCodeCopyButtons() {
         }, 3000);
       });
     });
+
+    block.parentNode.appendChild(button);
   });
 }