From 958d0968dea62d4c3e9f28c184450a7ad5b54e6b Mon Sep 17 00:00:00 2001 From: Nico Date: Tue, 22 Oct 2024 11:57:36 -0500 Subject: [PATCH] Add @remark-reading-time to blog --- astro.config.mjs | 8 +++- package-lock.json | 1 + package.json | 1 + remark-reading-time.mjs | 6 +-- src/layouts/BlogLayout.astro | 54 +++++++++++++++++++----- src/pages/blog/cli-productivity/index.md | 1 - src/pages/blog/ergonomics/index.md | 1 - src/pages/blog/mit-iquhack-2024/index.md | 3 +- src/pages/blog/the-hollow-path/index.md | 1 - 9 files changed, 54 insertions(+), 22 deletions(-) diff --git a/astro.config.mjs b/astro.config.mjs index 758dfcb..3ba323c 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,8 +1,12 @@ import { defineConfig } from 'astro/config'; import expressiveCode from 'astro-expressive-code'; +import { remarkReadingTime } from './remark-reading-time.mjs'; export default defineConfig({ - site: 'https://salm.dev', - integrations: [expressiveCode()] + site: 'https://salm.dev', + markdown: { + remarkPlugins: [remarkReadingTime] + }, + integrations: [expressiveCode()] }); diff --git a/package-lock.json b/package-lock.json index 39df1ef..2bfc134 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@expressive-code/plugin-line-numbers": "^0.37.0", "astro": "^4.16.2", "astro-expressive-code": "^0.37.0", + "mdast-util-to-string": "^4.0.0", "reading-time": "^1.5.0" }, "devDependencies": { diff --git a/package.json b/package.json index 118e17f..10ed918 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@expressive-code/plugin-line-numbers": "^0.37.0", "astro": "^4.16.2", "astro-expressive-code": "^0.37.0", + "mdast-util-to-string": "^4.0.0", "reading-time": "^1.5.0" }, "devDependencies": { diff --git a/remark-reading-time.mjs b/remark-reading-time.mjs index 21a56e4..df618c0 100644 --- a/remark-reading-time.mjs +++ b/remark-reading-time.mjs @@ -1,14 +1,10 @@ - import getReadingTime from 'reading-time'; import { toString } from 'mdast-util-to-string'; export function remarkReadingTime() { - return function (tree, { data }) { const textOnPage = toString(tree); const readingTime = getReadingTime(textOnPage); - // readingTime.text will give us minutes read as a friendly string, i.e. "3 min read" - data.astro.frontmatter.minutesRead = Math.round(readingTime.minutes); + data.astro.frontmatter.minutesRead = readingTime.text; }; - } diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro index 044b594..7d2fd2c 100644 --- a/src/layouts/BlogLayout.astro +++ b/src/layouts/BlogLayout.astro @@ -10,9 +10,13 @@ export interface Props { pubDate: string; minutesRead: string; tags: string[]; + discussion?: string; + discussion_link?: string; } } const { content } = Astro.props as Props; +const hasTags = content.tags && content.tags.length > 0; +const hasDiscussion = content.discussion && content.discussion_link; ---
@@ -24,23 +28,31 @@ const { content } = Astro.props as Props; {new Date(content.pubDate).toLocaleDateString('en-us', { year:"numeric", month:"long", day:"numeric"})} - {content.minutesRead} read + {content.minutesRead} min read +

{hasDiscussion && ( +

+ + Discussion: + + {content.discussion} +

+ )}

{content.description}

- {content.tags && content.tags.length > 0 && ( -
-

Tags:

-
    - {content.tags.map(tag => ( -
  • {tag}
    • - ))} -
-
+ {hasTags && ( +
+

Tags:

+
    + {content.tags.map(tag => ( +
  • {tag}
    • + ))} +
+
)} @@ -67,6 +79,28 @@ const { content } = Astro.props as Props; line-height: 1.2; } + .discussion { + text-align: center; + margin: 0.5rem 0 1rem 0; + font-size: 1rem; + } + + .discussion i { + margin-right: 0.25rem; + } + + .discussion-link { + color: var(--color-accent); + text-decoration: none; + border-bottom: none; + transition: color 0.3s ease; + margin-left: 0.25rem; + } + + .discussion-link:hover { + color: var(--color-primary); + border-bottom: none; + } .back-link { display: inline-block; color: var(--color-secondary); diff --git a/src/pages/blog/cli-productivity/index.md b/src/pages/blog/cli-productivity/index.md index 95a3ddf..8096dd5 100644 --- a/src/pages/blog/cli-productivity/index.md +++ b/src/pages/blog/cli-productivity/index.md @@ -4,7 +4,6 @@ pubDate: 2024/10/10 title: "Spotlight: CLI Productivity" description: "My command-line-centric workflow where I do my best work." tags: ["productivity", "neovim", "tmux", "terminal efficiency"] -minutesRead: "9" --- _You can achieve peak productivity with nothing but the command line and your web browser. I will describe my minimal, focused, keyboard-centric workflow where I do my best work._ diff --git a/src/pages/blog/ergonomics/index.md b/src/pages/blog/ergonomics/index.md index b9cb224..8bf7f62 100644 --- a/src/pages/blog/ergonomics/index.md +++ b/src/pages/blog/ergonomics/index.md @@ -4,7 +4,6 @@ pubDate: 2024/08/18 title: "Preserving my Future Self" description: "I underwent an ergonomic overhaul to improve health and reduce strain." tags: ["ergonomics", "typing setup", "health", "split keyboards", "colemak-dh"] -minutesRead: "6" --- ### Motivation diff --git a/src/pages/blog/mit-iquhack-2024/index.md b/src/pages/blog/mit-iquhack-2024/index.md index f3227be..b9df30c 100644 --- a/src/pages/blog/mit-iquhack-2024/index.md +++ b/src/pages/blog/mit-iquhack-2024/index.md @@ -3,8 +3,7 @@ layout: ../../../layouts/BlogLayout.astro pubDate: 2024/01/21 title: "MIT's IQuHACK 2024" description: "We secured a Top 3 finish at MIT's quantum hackathon!" -tags: ["Quantum Computing", "Hackathon", "Student Experience"] -minutesRead: "7" +tags: ["quantum computing", "hackathon", "student experience"] --- ### Introduction diff --git a/src/pages/blog/the-hollow-path/index.md b/src/pages/blog/the-hollow-path/index.md index 38c6521..87a129d 100644 --- a/src/pages/blog/the-hollow-path/index.md +++ b/src/pages/blog/the-hollow-path/index.md @@ -4,7 +4,6 @@ pubDate: 2024/09/28 title: "Retrospective: The Hollow Path" description: "AI’s silent undoing of true mastery." tags: ["personal growth", "generative ai", "education"] -minutesRead: "9" --- _Coming soon..._