feat: navbar

feat: glsl support with shaderview
ci: add workflow dispatch button
2026-04-26 18:38:49 +02:00 · 2026-04-26 17:05:01 +02:00 · 2026-04-26 16:47:29 +02:00 · 2026-04-26 15:39:15 +02:00 · 2026-04-26 15:16:33 +02:00 · 2026-04-26 15:10:30 +02:00
18 changed files with 107 additions and 88 deletions
@@ -1,5 +0,0 @@
-VITE_BASE_URL=http://localhost:8080/
-VITE_APP_TITLE=<i icon=rss></i> My Blog
-VITE_APP_SIGNATURE=By <b>me</b>
-VITE_APP_LANG=en
-VITE_CUSTOM_HEAD=
@@ -3,6 +3,9 @@ on:
    schedule:
        - cron: "*/30 * * * *"
    push:
+        branches:
+            - "main"
+    workflow_dispatch:

 jobs:
    build:
@@ -18,12 +21,6 @@ jobs:
                  ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}
            - run: git clone ${{ vars.ARTICLES_REPOSITORY }} articles
            - run: bun run build
-              env:
-                  VITE_BASE_URL: ${{ vars.VITE_BASE_URL }}
-                  VITE_APP_TITLE: ${{ vars.VITE_APP_TITLE }}
-                  VITE_APP_SIGNATURE: ${{ vars.VITE_APP_SIGNATURE }}
-                  VITE_APP_LANG: ${{ vars.VITE_APP_LANG }}
-                  VITE_CUSTOM_HEAD: ${{ vars.VITE_CUSTOM_HEAD }}
            - uses: actions/upload-artifact@v7
              with:
                  name: production-files
@@ -4,8 +4,6 @@

 ```bash
 git clone $REPOSITORY articles
-cp .env.example .env
-$EDITOR .env
 bun run build
 ```

@@ -20,6 +18,12 @@ bun run build
 - [x] set page title
 - [x] SPA and opengraph
 - [x] build with github actions
- [ ] proper docs
- [ ] custom layout in sub repo ?
- [ ] link to previous/next article
+- [x] config in sub repo
+- [x] copyright
+- [x] nav bar on top
+- [ ] date updated
+- [ ] archive page
+- [ ] about page
+- [ ] contact/links
+- [ ] link to previous/next article
+- [ ] proper docs
@@ -5,6 +5,7 @@
    "": {
      "name": "md-blog",
      "dependencies": {
+        "@keithclark/shaderview": "git+https://github.com/keithclark/shaderview",
        "highlight.js": "^11.11.1",
        "katex": "^0.16.45",
        "lucide": "^1.11.0",
@@ -210,6 +211,8 @@

    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],

+    "@keithclark/shaderview": ["@keithclark/shaderview@github:keithclark/shaderview#fee0cf0", {}, "keithclark-shaderview-fee0cf0"],
+
    "@mermaid-js/parser": ["@mermaid-js/parser@1.1.0", "", { "dependencies": { "langium": "^4.0.0" } }, "sha512-gxK9ZX2+Fex5zu8LhRQoMeMPEHbc73UKZ0FQ54YrQtUxE1VVhMwzeNtKRPAu5aXks4FasbMe4xB4bWrmq6Jlxw=="],

    "@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.4", "", { "dependencies": { "@tybys/wasm-util": "^0.10.1" }, "peerDependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1" } }, "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow=="],
@@ -8,7 +8,7 @@
    <link rel="stylesheet" type="text/css" href="/src/style.scss" />
    <meta property="og:url" content="%VITE_BASE_URL%" />
    <meta property="og:title" content="%VITE_APP_TITLE_NO_HTML%" />
-    <link rel="alternate" href="%VITE_BASE_URL%/rss" type="application/rss+xml" title="RSS 2.0" />
+    <link rel="alternate" href="%VITE_BASE_URL%/rss.xml" type="application/rss+xml" title="RSS 2.0" />
    <link rel="alternate" href="%VITE_BASE_URL%/atom.xml" type="application/atom+xml" title="Atom 2.0" />
    <link rel="alternate" href="%VITE_BASE_URL%/feed.json" type="application/json" title="JSON Feed 1.0"/>
    %VITE_CUSTOM_HEAD%
@@ -1,6 +1,6 @@
 {
  "name": "md-blog",
-  "version": "1.0.0",
+  "version": "1.5.0",
  "private": true,
  "type": "module",
  "repository": "https://github.com/klemek/md-blog",
@@ -17,6 +17,7 @@
    "format": "prettier --write src/ *.ts *.json"
  },
  "dependencies": {
+    "@keithclark/shaderview": "git+https://github.com/keithclark/shaderview",
    "highlight.js": "^11.11.1",
    "katex": "^0.16.45",
    "lucide": "^1.11.0",
@@ -50,4 +51,4 @@
  "engines": {
    "node": "^20.19.0 || >=22.12.0"
  }
-}
+}
@@ -1,10 +1,7 @@
 import fs from 'fs'
 import process from 'process'
 import { Feed } from 'feed'
-
-try {
-  process.loadEnvFile()
-} catch {}
+import articlesConfig from './articles/config.json'

 function getFiles(dir: string): string[] {
  return fs.readdirSync(dir).flatMap((name) => {
@@ -31,10 +28,6 @@ function readArticleMetadata(path: string): Record<string, string> | null {
  const metadata: Record<string, string> = {
    path: path.replaceAll('/index.md', ''),
  }
-  const dateMatch = path.match(/(\d{4}\/\d{2}\/\d{2})/)
-  if (dateMatch && dateMatch[1]) {
-    metadata['date'] = dateMatch[1].replaceAll('/', '-')
-  }
  do {
    subMatch = METADATA_REGEX.exec(match[1])
    if (subMatch && subMatch[1] && subMatch[2]) {
@@ -49,9 +42,9 @@ function formatArticlePage(metadata: Record<string, string>, baseHtml: string):
  outHtml = outHtml.replace(/<.*?property="og:url".*?>/gm, '')
  outHtml = outHtml.replace(
    /<\/head>/gm,
-    `<meta property="og:url" content="${process.env.VITE_BASE_URL}${metadata.path}/">\n</head>`,
+    `<meta property="og:url" content="${articlesConfig['base_url']}${metadata.path}/">\n</head>`,
  )
-  const blog_title = process.env.VITE_APP_TITLE?.replace(/(<([^>]+)>)/gi, '').trim()
+  const blog_title = articlesConfig['title']?.replace(/(<([^>]+)>)/gi, '').trim()
  if (metadata.title) {
    const title = metadata.title.replace(/(<([^>]+)>)/gi, '').trim()
    outHtml = outHtml.replace(/<title>.*?<\/title>/gm, `<title>${blog_title} — ${title}</title>`)
@@ -70,7 +63,7 @@ function formatArticlePage(metadata: Record<string, string>, baseHtml: string):
    outHtml = outHtml.replace(/<.*?property="og:image".*?>/gm, '')
    outHtml = outHtml.replace(
      /<\/head>/gm,
-      `<meta property="og:image" content="${metadata.thumbnail.replace('./', process.env.VITE_BASE_URL + metadata.path + '/')}">\n</head>`,
+      `<meta property="og:image" content="${metadata.thumbnail.replace('./', articlesConfig['base_url'] + metadata.path + '/')}">\n</head>`,
    )
  }
  return outHtml
@@ -81,9 +74,9 @@ function addFeedArticle(metadata: Record<string, string>, feed: Feed) {
    feed.addItem({
      title: metadata.title.replace(/(<([^>]+)>)/gi, '').trim(),
      id: metadata.path,
-      link: `${process.env.VITE_BASE_URL}${metadata.path}/`,
+      link: `${articlesConfig['base_url']}${metadata.path}/`,
      date: new Date(Date.parse(metadata.date)),
-      image: metadata.thumbnail.replace('./', process.env.VITE_BASE_URL + metadata.path + '/'),
+      image: metadata.thumbnail.replace('./', articlesConfig['base_url'] + metadata.path + '/'),
    })
  }
 }
@@ -96,21 +89,21 @@ if (!indexContent) {
 }

 const metadatas = getFiles('articles')
-  .filter((path) => path.match(/\d{4}\/\d{2}\/\d{2}\/index.md$/))
+  .filter((path) => path.match(/\/index.md$/))
  .map((path) => readArticleMetadata(path))
  .filter((metadata) => !!metadata)

 const feed = new Feed({
-  title: process.env.VITE_APP_TITLE?.replace(/(<([^>]+)>)/gi, '').trim() ?? '',
-  id: process.env.VITE_BASE_URL,
-  link: process.env.VITE_BASE_URL,
-  language: process.env.VITE_APP_LANG,
-  favicon: process.env.VITE_BASE_URL + '/articles/favicon.ico',
+  title: articlesConfig['title']?.replace(/(<([^>]+)>)/gi, '').trim() ?? '',
+  id: articlesConfig['base_url'],
+  link: articlesConfig['base_url'],
+  language: articlesConfig['lang'],
+  favicon: articlesConfig['base_url'] + 'articles/favicon.ico',
  generator: 'md-blog',
  feedLinks: {
-    json: process.env.VITE_BASE_URL + 'feed.json',
-    atom: process.env.VITE_BASE_URL + 'atom.xml',
-    rss: process.env.VITE_BASE_URL + 'rss',
+    json: articlesConfig['base_url'] + 'feed.json',
+    atom: articlesConfig['base_url'] + 'atom.xml',
+    rss: articlesConfig['base_url'] + 'rss',
  },
  updated: new Date(
    Math.max(
@@ -129,5 +122,8 @@ metadatas.forEach((metadata) => {
 })

 fs.writeFileSync('dist/feed.json', feed.json1())
+console.info(`Wrote dist/feed.json`)
 fs.writeFileSync('dist/atom.xml', feed.atom1())
-fs.writeFileSync('dist/rss', feed.rss2())
+console.info(`Wrote dist/atom.xml`)
+fs.writeFileSync('dist/rss.xml', feed.rss2())
+console.info(`Wrote dist/rss.xml`)
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { BASE_URL, TITLE, RSS_LINK } from '@/lib/meta'
+</script>
+
+<template>
+  <nav>
+    <RouterLink to="/" class="nav-title"><span v-html="TITLE"></span></RouterLink>
+    <span class="nav-items">
+      <a :href="BASE_URL + 'atom.xml'" v-html="RSS_LINK"></a>
+    </span>
+  </nav>
+</template>
@@ -1,17 +1,11 @@
 <script setup lang="ts">
-import { REPOSITORY, NAME, VERSION, BASE_URL } from '@/lib/meta'
+import { REPOSITORY, NAME, VERSION, TITLE, COPYRIGHT } from '@/lib/meta'
+import { stripHTML } from '@/lib/strings';
 </script>

 <template>
-  <template v-if="$route.fullPath != '/'">
-    <RouterLink to="/"><i icon="undo-2"></i> Back to home</RouterLink>
-  </template>
-  <hr />
  <footer>
-    <small>
-      {{ new Date().getFullYear() }} — Made with
-      <a :href="REPOSITORY">{{ NAME }} {{ VERSION }}</a> —
-      <a :href="BASE_URL + 'atom.xml'"><i icon="rss"></i> RSS</a>
-    </small>
+    {{ stripHTML(TITLE) }} &copy; {{ new Date().getFullYear() }}, <span v-html="COPYRIGHT"></span> | Made with
+    <a :href="REPOSITORY">{{ NAME }} {{ VERSION }}</a>
  </footer>
 </template>
@@ -1,16 +1,14 @@
 import type { MarkdownData, Article, ArticleMetadata } from '@interfaces'
-import { dateFromParts } from './dates'
 import katex from 'katex'

 function parseMetadata(
  srcAttributes: Record<string, unknown>,
  pathPrefix: string,
-  date: Date,
 ): ArticleMetadata {
  return {
    path: pathPrefix,
    title: decodeURIComponent((srcAttributes.title as string) ?? 'Untitled'),
-    date: date,
+    date: new Date(Date.parse((srcAttributes.date as string) ?? '')),
    author: decodeURIComponent((srcAttributes.author as string) ?? ''),
    thumbnail: (srcAttributes.thumbnail as string) ?? '',
    draft: !!srcAttributes.draft,
@@ -55,7 +53,10 @@ function transformHtml(srcHtml: string): string {
  return outHtml
 }

-export async function loadArticle(date: Date): Promise<Article | null> {
+/**
+ * @deprecated
+ */
+export async function loadArticleOld(date: Date): Promise<Article | null> {
  const year = date.getFullYear().toString()
  const month = (date.getMonth() + 1).toString().padStart(2, '0')
  const day = date.getDate().toString().padStart(2, '0')
@@ -63,7 +64,23 @@ export async function loadArticle(date: Date): Promise<Article | null> {
  try {
    const data = (await import(`@articles/${year}/${month}/${day}/index.md`)) as MarkdownData
    return {
-      metadata: parseMetadata(data.attributes, path, date),
+      metadata: parseMetadata(data.attributes, path),
+      html: transformHtml(data.html),
+    }
+  } catch (ex) {
+    console.error(ex)
+    return null
+  }
+}
+
+export async function loadArticle(path: string): Promise<Article | null> {
+  const raw_articles = import.meta.glob('@articles/**/index.md')
+  const key = `/articles/${path}index.md`
+  if (!raw_articles[key]) return null
+  try {
+    const data = (await raw_articles[key]()) as MarkdownData
+    return {
+      metadata: parseMetadata(data.attributes, path),
      html: transformHtml(data.html),
    }
  } catch (ex) {
@@ -79,12 +96,7 @@ export async function listArticles(): Promise<ArticleMetadata[]> {
      Object.keys(raw_articles).map(async (key) => {
        if (!raw_articles[key]) return null
        const data = (await raw_articles[key]()) as MarkdownData
-        const match = key.match(/\/(\d+)\/(\d+)\/(\d+)\//)
-        if (match === null) {
-          return null
-        }
-        const date = dateFromParts(match[1], match[2], match[3])
-        return parseMetadata(data.attributes, key.replace('index.md', ''), date)
+        return parseMetadata(data.attributes, key.replace('index.md', ''))
      }),
    )
  ).filter((item) => item !== null)
@@ -1,11 +1,3 @@
-export function dateFromParts(
-  year: string | undefined,
-  month: string | undefined,
-  day: string | undefined,
-): Date {
-  return new Date(parseInt(year ?? ''), parseInt(month ?? '') - 1, parseInt(day ?? ''))
-}
-
 export function simpleDateFormat(date: Date): string {
  return (
    date.getFullYear() +
@@ -5,4 +5,7 @@ export const VERSION = packageJson.version
 export const REPOSITORY = packageJson.repository
 export const TITLE = import.meta.env.VITE_APP_TITLE
 export const SIGNATURE = import.meta.env.VITE_APP_SIGNATURE
+export const COPYRIGHT = import.meta.env.VITE_APP_COPYRIGHT
+export const RSS_LINK = import.meta.env.VITE_APP_RSS_LINK
+export const BACK_LINK = import.meta.env.VITE_APP_BACK_LINK
 export const BASE_URL = import.meta.env.BASE_URL
@@ -2,6 +2,9 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'

+import ShaderviewElement from '@keithclark/shaderview';
+customElements.define('kc-shaderview', ShaderviewElement);
+
 const app = createApp(App)

 app.use(router)
@@ -7,7 +7,7 @@ const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: HomeView },
-    { path: '/articles/:year(\\d{4})/:month(\\d{2})/:day(\\d{2})/', component: ArticleView },
+    { path: '/articles/:pathMatch(.*)/', component: ArticleView },
    { path: '/:pathMatch(.*)', component: NotFoundView },
  ],
 })
@@ -4,10 +4,11 @@ import { ref, onBeforeMount } from 'vue'
 import { loadArticle } from '@lib/articles'
 import { useRoute, onBeforeRouteUpdate, type RouteLocation } from 'vue-router'
 import NotFoundView from './NotFoundView.vue'
-import { dateFromParts, simpleDateFormat } from '@lib/dates'
-import { SIGNATURE, TITLE } from '@lib/meta'
+import { simpleDateFormat } from '@lib/dates'
+import { BACK_LINK, SIGNATURE, TITLE } from '@lib/meta'
 import PageFooter from '@components/PageFooter.vue'
 import { stripHTML } from '@/lib/strings'
+import NavBar from '@/components/NavBar.vue'

 const article = ref<Article | null>(null)
 const loading = ref<boolean>(true)
@@ -15,13 +16,7 @@ const route = useRoute()

 async function loadPage(target: RouteLocation) {
  loading.value = true
-  article.value = await loadArticle(
-    dateFromParts(
-      target.params.year as string,
-      target.params.month as string,
-      target.params.day as string,
-    ),
-  )
+  article.value = await loadArticle(target.params.pathMatch as string)
  window.document.title =
    stripHTML(TITLE) + ' — ' + stripHTML(article.value?.metadata.title ?? 'Not Found')
  loading.value = false
@@ -40,6 +35,7 @@ onBeforeRouteUpdate(loadPage)
  </template>
  <template v-else>
    <main class="article">
+      <NavBar />
      <div class="article-header">
        <RouterLink class="link-home" to="/"><i icon="undo-2">↑</i></RouterLink>
        <h1 class="article-title" v-html="article.metadata.title"></h1>
@@ -56,7 +52,9 @@ onBeforeRouteUpdate(loadPage)
      </div>
      <div class="article-text" v-html="article.html"></div>
      <div class="article-signature" v-html="SIGNATURE"></div>
-      <br />
+      <template v-if="$route.fullPath != '/'">
+        <RouterLink class="link-back" to="/"><span v-html="BACK_LINK"></span></RouterLink>
+      </template>
      <PageFooter />
    </main>
  </template>
@@ -6,6 +6,7 @@ import { simpleDateFormat } from '@lib/dates'
 import { TITLE } from '@lib/meta'
 import PageFooter from '@components/PageFooter.vue'
 import { stripHTML } from '@/lib/strings'
+import NavBar from '@/components/NavBar.vue'

 const articles = ref<ArticleMetadata[]>([])

@@ -17,8 +18,8 @@ onBeforeMount(async () => {
 </script>

 <template>
-  <main>
-    <h1 class="title" v-html="TITLE"></h1>
+  <main class="home">
+    <NavBar />
    <template v-for="(metadata, index) in articles" v-bind:key="index">
      <div v-if="!metadata.draft && metadata.path" class="article-item">
        <RouterLink :to="metadata.path">
@@ -11,6 +11,7 @@ onBeforeMount(() => {

 <template>
  <main>
+    <NavBar />
    <h1>Page not found</h1>
    <PageFooter />
  </main>
@@ -4,14 +4,21 @@ import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
 import { plugin as mdPlugin, Mode } from 'vite-plugin-markdown'

+import articlesConfig from './articles/config.json'
+
 // https://vite.dev/config/
 export default ({ mode }: { mode: string }) => {
  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) }

-  process.env.VITE_APP_TITLE_NO_HTML = process.env.VITE_APP_TITLE?.replace(
-    /(<([^>]+)>)/gi,
-    '',
-  ).trim()
+  process.env.VITE_BASE_URL = articlesConfig['base_url']
+  process.env.VITE_APP_TITLE = articlesConfig['title']
+  process.env.VITE_APP_TITLE_NO_HTML = articlesConfig['title'].replace(/(<([^>]+)>)/gi, '').trim()
+  process.env.VITE_APP_LANG = articlesConfig['lang']
+  process.env.VITE_APP_SIGNATURE = articlesConfig['signature']
+  process.env.VITE_CUSTOM_HEAD = articlesConfig['custom_head']
+  process.env.VITE_APP_COPYRIGHT = articlesConfig['copyright']
+  process.env.VITE_APP_RSS_LINK = articlesConfig['rss_link']
+  process.env.VITE_APP_BACK_LINK = articlesConfig['back_link']

  return defineConfig({
    plugins: [vue(), vueDevTools(), mdPlugin({ mode: [Mode.HTML] })],
Author	SHA1	Message	Date
klemek	748f52241f	feat: navbar	2026-04-26 18:38:49 +02:00
klemek	21e1469b51	feat: glsl support with shaderview	2026-04-26 17:05:01 +02:00
klemek	649102d1aa	ci: add workflow dispatch button	2026-04-26 16:47:29 +02:00
klemek	169f35b556	feat: copyright	2026-04-26 15:39:15 +02:00
klemek	8d7388835b	fix: push on default branch only	2026-04-26 15:16:33 +02:00
klemek	34c410b687	feat: do not use path as date	2026-04-26 15:10:30 +02:00
klemek	af9b20485e	refactor: config in sub repo	2026-04-26 14:47:14 +02:00