@hutusi/amytis 1.5.6 → 1.7.0

package/content/posts/multimedia-showcase/index.mdx

@@ -0,0 +1,261 @@
+---
+title: "Multimedia Showcase: Video, Podcasts & Embeds"
+date: "2026-02-20"
+excerpt: "A comprehensive test of multimedia embedding support — YouTube, Vimeo, podcasts, livestreams, HTML5 native media, and audio platforms."
+category: "Showcase"
+tags: ["multimedia", "video", "audio", "podcast", "embed", "test"]
+coverImage: "text:Media"
+toc: true
+---
+
+This post tests how Amytis renders multimedia content embedded via raw HTML iframes and native HTML5 media elements. Since `rehype-raw` is enabled, standard HTML embed codes work directly inside Markdown.
+
+---
+
+## YouTube Video
+
+Responsive 16:9 YouTube embed using a padded wrapper:
+
+<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; margin: 1.5rem 0;">
+  <iframe
+    src="https://www.youtube.com/embed/jNQXAC9IVRw?rel=0"
+    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    allowfullscreen
+    title="Me at the zoo — first YouTube video ever uploaded (2005)"
+  ></iframe>
+</div>
+
+*"Me at the zoo" — the very first video uploaded to YouTube (April 23, 2005).*
+
+---
+
+## Vimeo Video
+
+Vimeo also supports responsive 16:9 embedding:
+
+<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; margin: 1.5rem 0;">
+  <iframe
+    src="https://player.vimeo.com/video/76979871?color=ff9933&title=0&byline=0&portrait=0"
+    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"
+    allow="autoplay; fullscreen; picture-in-picture"
+    allowfullscreen
+    title="Big Buck Bunny — Blender Foundation (Vimeo)"
+  ></iframe>
+</div>
+
+*Big Buck Bunny (2008) — open-source animated short by the Blender Foundation.*
+
+---
+
+## Podcast Embeds
+
+### Spotify Podcast
+
+Spotify provides a fixed-height iframe embed for individual episodes:
+
+<iframe
+  src="https://open.spotify.com/embed/episode/0b8q6Q7fKqZLlSc0Lh1WQe?utm_source=generator&theme=0"
+  style="border-radius: 12px; margin: 1rem 0;"
+  width="100%"
+  height="152"
+  frameborder="0"
+  allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+  loading="lazy"
+  title="Spotify Podcast Episode"
+></iframe>
+
+You can also embed the full show player at a taller height (352px) to show the episode list:
+
+<iframe
+  src="https://open.spotify.com/embed/show/5as3aKmN2k11yfDDDSrvaZ?utm_source=generator"
+  style="border-radius: 12px; margin: 1rem 0;"
+  width="100%"
+  height="352"
+  frameborder="0"
+  allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+  loading="lazy"
+  title="Spotify Show Player"
+></iframe>
+
+### Apple Podcasts
+
+Apple Podcasts uses a similar iframe embed pattern:
+
+<iframe
+  src="https://embed.podcasts.apple.com/us/podcast/syntax-tasty-web-development-treats/id1253186678?itsct=podcast_box_player&amp;itscg=30200&amp;ls=1&amp;theme=auto"
+  height="175px"
+  frameborder="0"
+  sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation"
+  allow="autoplay *; encrypted-media *; clipboard-write"
+  style="width: 100%; max-width: 660px; overflow: hidden; border-radius: 10px; margin: 1rem 0; display: block;"
+  title="Apple Podcasts — Syntax.fm"
+></iframe>
+
+---
+
+## Livestream Embeds
+
+### YouTube Live
+
+A YouTube Live channel or active live video can be embedded exactly like a regular video. Use the channel's live URL (`/live`) or a live event ID:
+
+```html
+<!-- Replace CHANNEL_ID with the YouTube channel ID -->
+<iframe
+  src="https://www.youtube.com/embed/live_stream?channel=CHANNEL_ID"
+  ...
+></iframe>
+```
+
+Below is NASA's public live stream:
+
+<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; margin: 1.5rem 0;">
+  <iframe
+    src="https://www.youtube.com/embed/xAieE-QtOeM?autoplay=0"
+    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+    allowfullscreen
+    title="NASA TV Live"
+  ></iframe>
+</div>
+
+### Twitch Stream
+
+Twitch requires your site's hostname in the `parent` query parameter (so the embed works in production):
+
+```html
+<!-- Replace CHANNEL_NAME with a Twitch channel, and your-domain.com with your domain -->
+<iframe
+  src="https://player.twitch.tv/?channel=CHANNEL_NAME&parent=your-domain.com"
+  height="378"
+  width="100%"
+  allowfullscreen
+  title="Twitch Stream"
+></iframe>
+```
+
+Twitch also supports embedding past broadcasts (VODs) and clips:
+
+```html
+<!-- VOD -->
+<iframe src="https://player.twitch.tv/?video=VOD_ID&parent=your-domain.com" ...></iframe>
+<!-- Clip -->
+<iframe src="https://clips.twitch.tv/embed?clip=CLIP_SLUG&parent=your-domain.com" ...></iframe>
+```
+
+---
+
+## HTML5 Native Media
+
+Native `<video>` and `<audio>` elements work without any third-party embeds.
+
+### HTML5 Video
+
+<video
+  controls
+  style="width: 100%; border-radius: 12px; margin: 1rem 0; background: #000;"
+  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg"
+>
+  <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4" />
+  Your browser does not support the HTML5 video element.
+</video>
+
+*Elephants Dream (2006) — first open-source animated film by the Blender Foundation.*
+
+Attributes you can use:
+
+| Attribute | Description |
+| :--- | :--- |
+| `controls` | Show playback controls |
+| `autoplay` | Start playing automatically (use with `muted`) |
+| `muted` | Mute by default (required for autoplay) |
+| `loop` | Loop the video |
+| `poster` | Preview image shown before play |
+| `preload` | `auto` \| `metadata` \| `none` |
+
+### HTML5 Audio
+
+<audio
+  controls
+  style="width: 100%; margin: 1rem 0;"
+>
+  <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg" />
+  Your browser does not support the HTML5 audio element.
+</audio>
+
+*SoundHelix royalty-free sample track.*
+
+Multiple formats improve cross-browser support:
+
+```html
+<audio controls>
+  <source src="audio.ogg" type="audio/ogg" />
+  <source src="audio.mp3" type="audio/mpeg" />
+  Your browser does not support the HTML5 audio element.
+</audio>
+```
+
+---
+
+## Audio Platforms
+
+### SoundCloud
+
+SoundCloud exposes an iframe embed from any track's "Share → Embed" menu:
+
+<iframe
+  width="100%"
+  height="166"
+  scrolling="no"
+  frameborder="no"
+  allow="autoplay"
+  style="border-radius: 8px; margin: 1rem 0;"
+  src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"
+  title="SoundCloud track"
+></iframe>
+
+The full visual player (300px height) shows the waveform:
+
+```html
+<iframe
+  width="100%"
+  height="300"
+  src="https://w.soundcloud.com/player/?url=TRACK_URL&visual=true"
+  ...
+></iframe>
+```
+
+### Bandcamp
+
+Bandcamp provides both album and track embed codes:
+
+```html
+<!-- Album embed -->
+<iframe
+  style="border: 0; width: 100%; height: 120px;"
+  src="https://bandcamp.com/EmbeddedPlayer/album=ALBUM_ID/size=large/bgcol=ffffff/linkcol=0687f5/"
+  seamless
+></iframe>
+```
+
+---
+
+## Embed Best Practices
+
+When embedding third-party media, keep these in mind:
+
+- **Responsive sizing**: Wrap iframes in a `padding-bottom: 56.25%; position: relative` container to maintain 16:9 ratio.
+- **`loading="lazy"`**: Add this to below-the-fold embeds to defer loading and improve page speed.
+- **`title` attribute**: Always provide a descriptive `title` for screen reader accessibility.
+- **Privacy-enhanced mode**: YouTube supports `youtube-nocookie.com` to reduce tracking when embeds don't auto-play.
+- **`sandbox` attribute**: Use for untrusted embeds to restrict what the iframe can do.
+- **Twitch `parent` parameter**: Twitch requires your site's hostname in `parent` for embeds to work outside localhost.
+
+```html
+<!-- YouTube privacy-enhanced embed -->
+<iframe
+  src="https://www.youtube-nocookie.com/embed/VIDEO_ID?rel=0"
+  ...
+></iframe>
+```

package/content/privacy.mdx

@@ -0,0 +1,32 @@
+---
+title: "Privacy Policy"
+date: "2026-02-20"
+excerpt: "How this site collects and handles your data."
+layout: "simple"
+---
+
+# Privacy Policy
+
+Your privacy matters. This page explains what data is collected when you visit this site and how it is used.
+
+## Analytics
+
+This site uses **Umami**, a privacy-focused, open-source analytics platform. Umami does not use cookies, does not track users across websites, and does not collect personally identifiable information. The data collected is limited to anonymous page-view statistics such as referrer, browser type, and country — used solely to understand which content is most useful.
+
+No data is sold or shared with third parties.
+
+## Comments
+
+Post comments are powered by **Giscus**, which uses GitHub Discussions. To leave a comment you must sign in with a GitHub account. Your comment and GitHub username are stored by GitHub and are subject to [GitHub's Privacy Policy](https://docs.github.com/en/site-policy/privacy-policies/github-general-privacy-statement).
+
+If you do not have a GitHub account or prefer not to use it, you can always reach out directly by email.
+
+## External Links
+
+This site may contain links to external websites. Once you leave this site, the privacy practices of those third-party sites apply and are outside this site's control.
+
+## Contact
+
+If you have any questions about this privacy policy, feel free to reach out at the email address listed in the footer.
+
+*Last updated: February 2026.*

package/content/privacy.zh.mdx

@@ -0,0 +1,32 @@
+---
+title: "隐私政策"
+date: "2026-02-20"
+excerpt: "本站如何收集和处理您的数据。"
+layout: "simple"
+---
+
+# 隐私政策
+
+您的隐私对我们很重要。本页面说明您在访问本站时收集了哪些数据，以及这些数据如何被使用。
+
+## 数据分析
+
+本站使用 **Umami**，一个注重隐私的开源分析平台。Umami 不使用 Cookie，不跨网站追踪用户，也不收集任何个人身份信息。所收集的数据仅限于匿名页面访问统计，如来源网站、浏览器类型和所在国家，仅用于了解哪些内容最受欢迎。
+
+数据不会被出售或与任何第三方共享。
+
+## 评论
+
+文章评论由 **Giscus** 提供支持，基于 GitHub Discussions 实现。留言需要使用 GitHub 账号登录。您的评论和 GitHub 用户名由 GitHub 存储，受 [GitHub 隐私政策](https://docs.github.com/en/site-policy/privacy-policies/github-general-privacy-statement)约束。
+
+如果您没有 GitHub 账号或不希望使用，也可以通过页脚中的电子邮件直接联系我。
+
+## 外部链接
+
+本站可能包含指向外部网站的链接。一旦您离开本站，这些第三方网站的隐私实践将适用，超出本站的控制范围。
+
+## 联系我们
+
+如果您对本隐私政策有任何疑问，请通过页脚中的电子邮件地址联系我们。
+
+*最后更新：2026 年 2 月。*

package/docs/ARCHITECTURE.md

@@ -50,6 +50,10 @@ src/app/
     [author]/page.tsx               # Posts by author
   archive/
     page.tsx                        # Chronological archive
+  subscribe/
+    page.tsx                        # Subscription options
+  search.json/
+    route.ts                        # Supplementary structured search data
   [slug]/page.tsx                   # Static pages (about, etc.)
 ```
 
@@ -60,6 +64,7 @@ src/app/
 - **`Footer`** - Social links, copyright, site metadata, and language switch.
 - **`Hero`** - Homepage hero with collapsible intro.
 - **`BookLayout`** - Dedicated layout for book chapters with sidebar navigation.
+- **`PageHeader`** - Consistent header for simple pages (Archive, Tags, About).
 
 ### Content Display
 - **`PostList`** - Card-based post listing.
@@ -67,6 +72,8 @@ src/app/
 - **`SeriesCatalog`** - Timeline-style post listing for series.
 - **`PostCard`** - Individual post preview card.
 - **`CoverImage`** - Optimized image component using `next-image-export-optimizer` with dynamic desaturated gradients.
+- **`ShareBar`** - Social sharing buttons for posts and books.
+- **`TagContentTabs`** - Tabbed interface for filtering posts vs flows by tag.
 
 ### Content Rendering
 - **`MarkdownRenderer`** - Core rendering component using `react-markdown` with plugins (GFM, Math, Raw HTML).
@@ -75,9 +82,10 @@ src/app/
 
 ### Navigation & Discovery
 - **`TableOfContents`** - Sticky TOC with scroll-based tracking.
-- **`Search`** - Client-side fuzzy search modal (Cmd/Ctrl+K).
+- **`Search`** - Full-text search modal (Cmd/Ctrl+K) powered by Pagefind. Supports type filter tabs (All/Post/Flow/Book), recent searches, keyboard navigation, debounced input, focus trap, and ARIA accessibility. Search syntax: `"exact phrase"`, `word1 word2` (AND), `-exclude`.
 - **`Pagination`** - Previous/Next page navigation.
 - **`ReadingProgressBar`** - Top-of-page progress bar for book chapters.
+- **`SubscribePage`** - Centralized page for all subscription options.
 
 ## Data Access Layer (`src/lib/markdown.ts`)
 
@@ -100,4 +108,5 @@ Theming is handled by `next-themes` and Tailwind CSS v4. `src/app/globals.css` d
 
 1. **`scripts/copy-assets.ts`** - Copies images from content directories (`posts/`, `series/`, `books/`, `flows/`) to `public/posts/` for static hosting.
 2. **`next build`** - Next.js static export to `out/`.
-3. **`next-image-export-optimizer`** - Generates optimized WebP variants.
+3. **`next-image-export-optimizer`** - Generates optimized WebP variants (production build only).
+4. **`pagefind --site out`** - Crawls the exported HTML and builds a full-text search index in `out/pagefind/`. The index is loaded at runtime by `src/components/Search.tsx` via a dynamic import. Pure utility functions used by the search component and the search index route live in `src/lib/search-utils.ts`.

package/docs/CONTRIBUTING.md

@@ -13,6 +13,8 @@
    ```
    Open [http://localhost:3000](http://localhost:3000).
 
+   > **Search in dev:** The search index is generated by `pagefind` at build time. Run `bun run build:dev` once to generate `public/pagefind/`. After that, the search modal (Cmd/Ctrl+K) will work while `bun dev` is running. Re-run `bun run build:dev` whenever content changes.
+
 ## Writing Content
 
 ### Creating Posts
@@ -74,8 +76,8 @@ bun run test:e2e           # Run end-to-end tests
 ## Building
 
 ```bash
-bun run build              # Production build
-bun run build:dev          # Development build (faster)
+bun run build              # Production build (includes image optimization and Pagefind index)
+bun run build:dev          # Development build (faster, no image optimization; also generates Pagefind index)
 ```
 
 ## Code Style

package/docs/deployment.md

@@ -17,7 +17,7 @@ bun run build:dev
 bun run clean && bun run build
 ```
 
-The `out/` directory contains plain HTML, CSS, JS, and images — ready to be served by any static file server.
+The `out/` directory contains plain HTML, CSS, JS, images, and the Pagefind search index (`out/pagefind/`) — ready to be served by any static file server.
 
 ### Preview Locally
 
@@ -190,6 +190,11 @@ server {
         add_header Cache-Control "public";
     }
 
+    # Cache Pagefind search index (regenerated on each build, so short TTL is fine)
+    location /pagefind/ {
+        add_header Cache-Control "public, max-age=3600";
+    }
+
     # trailingSlash is true, so pages are slug/index.html
     # Redirect URLs without trailing slash to add one (except files)
     location / {
@@ -228,6 +233,9 @@ yourdomain.com {
     @postassets path /posts/*
     header @postassets Cache-Control "public, max-age=2592000"
 
+    @pagefind path /pagefind/*
+    header @pagefind Cache-Control "public, max-age=3600"
+
     handle_errors {
         rewrite * /404/index.html
         file_server

package/eslint.config.mjs

@@ -12,6 +12,8 @@ const eslintConfig = defineConfig([
     "out/**",
     "build/**",
     "next-env.d.ts",
+    // Generated at build time — not authored code
+    "public/pagefind/**",
   ]),
 ]);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hutusi/amytis",
-  "version": "1.5.6",
+  "version": "1.7.0",
   "description": "A high-performance digital garden and blog engine with Next.js 16 and Tailwind CSS v4",
   "repository": {
     "type": "git",
@@ -14,8 +14,8 @@
   "packageManager": "bun@1.3.4",
   "scripts": {
     "dev": "next dev",
-    "build": "bun scripts/copy-assets.ts && next build && next-image-export-optimizer",
-    "build:dev": "bun scripts/copy-assets.ts && next build",
+    "build": "bun scripts/copy-assets.ts && next build && next-image-export-optimizer && pagefind --site out",
+    "build:dev": "bun scripts/copy-assets.ts && next build && pagefind --site out --output-path public/pagefind",
     "validate": "bun run lint && bun run test && bun run build:dev",
     "clean": "rm -rf .next out public/posts public/books public/flows",
     "new": "bun scripts/new-post.ts",
@@ -35,7 +35,6 @@
   "dependencies": {
     "@giscus/react": "^3.1.0",
     "@tailwindcss/typography": "^0.5.19",
-    "fuse.js": "^7.1.0",
     "github-slugger": "^2.0.0",
     "gray-matter": "^4.0.3",
     "image-size": "^2.0.2",
@@ -45,6 +44,7 @@
     "next-themes": "^0.4.6",
     "react": "19.2.4",
     "react-dom": "19.2.4",
+    "react-icons": "^5.5.0",
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^16.1.0",
     "rehype-katex": "^7.0.1",
@@ -66,6 +66,7 @@
     "babel-plugin-react-compiler": "1.0.0",
     "eslint": "^9.0.0",
     "eslint-config-next": "16.1.6",
+    "pagefind": "^1.4.0",
     "pdf-to-img": "^5.0.0",
     "tailwindcss": "^4.1.18",
     "typescript": "^5.9.3"

package/public/next-image-export-optimizer-hashes.json

@@ -1,7 +1,4 @@
 {
     "posts/02-routing-mastery/assets/m-p-model.png": "fDmvlEkZnE-UCvPK4gmDkJD7SU8coOTl4iw5hpsmcWI=",
-    "posts/advanced-markdown/images/m-p-model.png": "BdYG3Wq+FcOnoSrZeJeb6x2V-LsB-gwvms3WQJFq+Wg=",
-    "posts/part-1/images/m-p-model.png": "94OaqjvkCmDcz+Iuhw14vHXYUzYl3Y8+wwoU1CQZ6l0=",
-    "posts/part-2-rich-content/images/m-p-model.png": "Vp5bOs9N2OHHjMM2PFntkkCl1uY7DleLymwrSHbecOA=",
     "/screenshot.png": "dGCNrjp1oMIL3NrVh1VDW0K+7Pp-cI5KH6tW4-6o9zg="
 }

package/scripts/copy-assets.ts

@@ -51,7 +51,7 @@ function getSlugFromFilename(filename: string): string {
   const dateRegex = /^(\d{4}-\d{2}-\d{2})-(.*)$/;
   const match = nameWithoutExt.match(dateRegex);
 
-  if (match && !siteConfig.includeDateInUrl) {
+  if (match && !siteConfig.posts?.includeDateInUrl) {
     return match[2];
   }
   return nameWithoutExt;