Wire readingTIme prop in to script, add Python dependabot script, update styling on avatar with no image

Author: webstackdev

.github/dependabot.yml

@@ -22,3 +22,16 @@ updates:
       github-actions:
         patterns:
           - "*"
+
+  - package-ecosystem: "pip"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 1
+    labels:
+      - "type: dependencies 🔗"
+      - "automerge 🤞"
+    groups:
+      python-dependencies:
+        patterns:
+          - "*"

src/components/Avatar/index.astro

@@ -41,7 +41,7 @@ if (!avatarImage && !name) {
 
 const avatarAlt = name
 
-const avatarSizeClass = lead ? 'w-10 h-10' : 'w-16 h-16'
+const avatarSizeClass = lead ? 'w-10 h-10 text-xl' : 'w-16 h-16 text-2xl'
 ---
 
 <div class:list={['avatar-container', avatarSizeClass, 'rounded-full overflow-hidden', className]}>
@@ -59,9 +59,11 @@ const avatarSizeClass = lead ? 'w-10 h-10' : 'w-16 h-16'
       <div
         class:list={[
           'avatar-placeholder',
-          'bg-spotlight',
+          'bg-secondary',
           avatarSizeClass,
-          'rounded-full flex items-center justify-center text-content-offset',
+          'rounded-full',
+          'flex items-center justify-center',
+          'font-bold tracking-widest text-content-inverse',
         ]}
         role="img"
         aria-label={name}

src/components/Test/Demo.mdx

@@ -5,4 +5,4 @@
  */
 ---
 
-And a [link]('/about') to included text.
+And a [link](/about) to included text.

src/lib/markdown/__tests__/units/reading-time.spec.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest'
+import { getReadingTimeLabel } from '@lib/markdown/utils/readingTime'
+
+describe('getReadingTimeLabel', () => {
+  it('returns undefined for empty content', () => {
+    expect(getReadingTimeLabel('')).toBeUndefined()
+  })
+
+  it('returns at least 1 minute for short content', () => {
+    expect(getReadingTimeLabel('hello world')).toBe('1 min read')
+  })
+
+  it('rounds up minutes based on word count', () => {
+    const twoHundredAndOneWords = Array.from({ length: 201 }, () => 'word').join(' ')
+    expect(getReadingTimeLabel(twoHundredAndOneWords, { wordsPerMinute: 200 })).toBe('2 min read')
+  })
+
+  it('strips fenced code blocks and mdx imports', () => {
+    const content = `---
+    title: Test
+    ---
+    import X from './X.mdx'
+
+    Hello world
+
+    \`\`\`ts
+    const secret = 123
+    \`\`\`
+    `
+
+    expect(getReadingTimeLabel(content, { wordsPerMinute: 200 })).toBe('1 min read')
+  })
+})

src/lib/markdown/utils/readingTime.ts

@@ -0,0 +1,55 @@
+/**
+ * Estimate reading time for Markdown/MDX content.
+ *
+ * This is intentionally lightweight (no external deps) and runs at build-time.
+ * It strips common Markdown/MDX constructs (frontmatter, code blocks, tags, imports)
+ * before counting words.
+ */
+
+const defaultWordsPerMinute = 200
+
+export function getReadingTimeLabel(
+  content: string,
+  options?: {
+    wordsPerMinute?: number
+  }
+): string | undefined {
+  const wordsPerMinute = options?.wordsPerMinute ?? defaultWordsPerMinute
+  if (!Number.isFinite(wordsPerMinute) || wordsPerMinute <= 0) return undefined
+
+  const wordCount = countWords(stripMarkdownForReadingTime(content))
+  if (wordCount <= 0) return undefined
+
+  const minutes = Math.max(1, Math.ceil(wordCount / wordsPerMinute))
+  return `${minutes} min read`
+}
+
+function stripMarkdownForReadingTime(content: string): string {
+  // Remove YAML frontmatter if present (defensive; Astro collection body usually excludes it).
+  const withoutFrontmatter = content.replace(/^---\s*[\s\S]*?\s*---\s*/m, ' ')
+
+  // Remove fenced code blocks.
+  const withoutFences = withoutFrontmatter.replace(/```[\s\S]*?```/g, ' ')
+
+  // Remove inline code.
+  const withoutInlineCode = withoutFences.replace(/`[^`]*`/g, ' ')
+
+  // Remove MDX/ESM imports/exports.
+  const withoutImports = withoutInlineCode
+    .replace(/^\s*import\s+[^;\n]+;?\s*$/gm, ' ')
+    .replace(/^\s*export\s+[^;\n]+;?\s*$/gm, ' ')
+
+  // Remove JSX/HTML tags.
+  const withoutTags = withoutImports.replace(/<[^>]+>/g, ' ')
+
+  // Collapse links/images to their visible text.
+  const withoutImages = withoutTags.replace(/!\[[^\]]*\]\([^)]*\)/g, ' ')
+  const withoutLinks = withoutImages.replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
+
+  return withoutLinks
+}
+
+function countWords(text: string): number {
+  const matches = text.match(/[\p{L}\p{N}]+(?:['’][\p{L}\p{N}]+)*/gu)
+  return matches ? matches.length : 0
+}

src/pages/articles/[...slug].astro

@@ -2,6 +2,7 @@
 import { type CollectionEntry, getCollection, getEntry } from 'astro:content'
 import { Picture } from 'astro:assets'
 import { isDev } from '@lib/config/environmentServer'
+import { getReadingTimeLabel } from '@lib/markdown/utils/readingTime'
 import MarkdownLayout from '@layouts/MarkdownLayout.astro'
 import Shares from '@components/Social/Shares/index.astro'
 import Carousel from '@components/Carousel/index.astro'
@@ -25,6 +26,9 @@ export async function getStaticPaths() {
 const { article } = Astro.props
 const author = await getEntry(article.data.author)
 
+const articleBody = article.body ?? ''
+const readingTime = article.data.readingTime ?? getReadingTimeLabel(articleBody)
+
 const path = `/articles/${article.id}`
 const section = `Articles`
 ---
@@ -42,7 +46,7 @@ const section = `Articles`
   section={section}
   showToc={article.data.showToc ?? true}
   tags={article.data.tags?.map(t => (typeof t === 'string' ? t : t.id)) ?? []}
-  {...article.data.readingTime && { readingTime: article.data.readingTime }}
+  {...readingTime && { readingTime }}
 >
   {/** SLOT: hero-image */}
   {

src/styles/general.css

@@ -3,11 +3,11 @@
  * plugin, shows when hovering over the heading
  */
 .anchor-link {
-  margin-left: 0.2rem;
   display: inline-block;
+  margin-left: 0.2rem;
   opacity: 0;
-  transition: opacity 0.2s ease-in-out;
   transform: translateY(-4px);
+  transition: opacity 0.2s ease-in-out;
 }
 
 /* Ensure the injected heading anchor never inherits the global dotted underline. */
@@ -17,11 +17,6 @@
   text-decoration: none;
 }
 
-/* Also show when the *anchor* itself is focused (keyboard navigation/click focus). */
-.heading-anchor:focus-visible .anchor-link {
-  opacity: 1;
-}
-
 h1:hover .anchor-link,
 h2:hover .anchor-link,
 h3:hover .anchor-link,
@@ -30,3 +25,8 @@ h5:hover .anchor-link,
 h6:hover .anchor-link {
   opacity: 1;
 }
+
+/* Also show when the *anchor* itself is focused (keyboard navigation/click focus). */
+.heading-anchor:focus-visible .anchor-link {
+  opacity: 1;
+}