Blog: What's new in Herb v0.8

docs/.vitepress/blog.data.ts

@@ -0,0 +1,37 @@
+import { createContentLoader } from 'vitepress'
+
+interface Post {
+  title: string
+  url: string
+  date: {
+    time: number
+    string: string
+  }
+}
+
+declare const data: Post[]
+export { data }
+
+export default createContentLoader('blog/*.md', {
+  transform(raw): Post[] {
+    return raw.map(({ url, frontmatter }) => ({
+      title: frontmatter.head.find((e: any) => e[1].property === 'og:title')[1].content,
+      url,
+      date: formatDate(frontmatter.date),
+    })).sort((a, b) => b.date.time - a.date.time)
+  },
+})
+
+function formatDate(raw: string): Post['date'] {
+  const date = new Date(raw)
+  date.setUTCHours(12)
+
+  return {
+    time: +date,
+    string: date.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    }),
+  }
+}

docs/.vitepress/components/BlogIndex.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+  import { data as posts } from '../blog.data'
+
+  function getDateTime(time: number) {
+    return new Date(time).toISOString()
+  }
+</script>
+
+<template>
+  <ul class="blog-list">
+    <li v-for="post of posts" :key="post.url" class="blog-entry">
+      <article>
+        <time :datetime="getDateTime(post.date.time)">{{
+          post.date.string
+        }}</time>
+
+        <h2 class="title">
+          <a :href="post.url">{{ post.title }}</a>
+        </h2>
+      </article>
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+  .blog-list {
+    list-style-type: none;
+    padding: 0;
+  }
+
+  .blog-entry {
+    margin-top: 3em;
+    border-bottom: 1px solid var(--vp-c-divider);
+  }
+
+  .blog-entry time {
+    font-size: 14px;
+  }
+
+  .title {
+    border: none;
+    margin-top: 0;
+    padding-top: 0;
+    font-size: 22px;
+  }
+
+  .title a {
+    font-weight: 600;
+    text-decoration: none;
+  }
+</style>

docs/.vitepress/config.mts

@@ -37,13 +37,19 @@ export default defineConfig({
 
     const pageTitle = pageData.frontmatter.title || pageData.title
 
-    pageData.frontmatter.head.push([
-      'meta',
-      {
-        property: 'og:title',
-        content: pageTitle ? `${pageTitle} | ${title}` : `${title} - ${description}`
-      }
-    ])
+    const hasOgTitle = pageData.frontmatter.head.some(
+      (item: any) => item[0] === 'meta' && item[1].property === 'og:title'
+    )
+
+    if (!hasOgTitle) {
+      pageData.frontmatter.head.push([
+        'meta',
+        {
+          property: 'og:title',
+          content: pageTitle ? `${pageTitle} | ${title}` : `${title} - ${description}`
+        }
+      ])
+    }
   },
 
   async buildEnd() {

docs/.vitepress/config/markdown.mts

@@ -10,6 +10,9 @@ export function createMarkdownConfig() {
       herbLinterTransformer,
     ],
     // Explicitly load these languages for types highlighting
-    languages: ["js", "jsx", "ts", "tsx", "bash", "shell", "ruby", "html", "erb"],
+    languages: ["js", "ts", "bash", "shell", "ruby", "html", "erb", "java", "rust"],
+    image: {
+      lazyLoading: true
+    },
   }
 }

docs/.vitepress/config/theme.mts

@@ -132,6 +132,7 @@ export function createThemeConfig() {
     logo: "/herb.svg",
     nav: [
       { text: "Home", link: "/" },
+      { text: "Blog", link: "/blog/whats-new-in-herb-v0-8" },
       { text: "Documentation", link: "/overview" },
       { text: "Playground", link: "/playground" },
     ],
@@ -180,6 +181,7 @@ export function createThemeConfig() {
         }
       ],
       '/projects/linter': linterSidebar,
+      '/blog': [],
       '/': defaultSidebar
     },
     socialLinks: [

docs/.vitepress/config/vite.mts

@@ -32,6 +32,8 @@ export function createViteConfig() {
       browser: "vscode-icons:file-type-js",
       "Node.js": "vscode-icons:file-type-js",
       ".js": "vscode-icons:file-type-js",
+      ".java": "vscode-icons:file-type-java",
+      ".rs": "vscode-icons:file-type-rust",
       javascript: "vscode-icons:file-type-js",
       shell: "vscode-icons:file-type-shell",
       ".erb": localIconLoader(import.meta.url, "../assets/herb.svg"),

docs/.vitepress/theme/custom.css

@@ -262,3 +262,20 @@ pre .twoslash-error-level-error {
   filter: brightness(0) invert(1);
 }
 
+/* Medium Zoom Styles */
+.medium-zoom-overlay {
+  z-index: 100;
+}
+
+.medium-zoom-image--opened {
+  z-index: 101;
+  cursor: zoom-out;
+  max-width: 95vw !important;
+  max-height: 95vh !important;
+  object-fit: contain !important;
+}
+
+.vp-doc img {
+  cursor: zoom-in;
+  height: auto;
+}

docs/.vitepress/theme/index.ts

@@ -1,5 +1,9 @@
 import type { EnhanceAppContext } from "vitepress"
 import Theme from "vitepress/theme"
+import { h } from "vue"
+import { onMounted, watch, nextTick } from 'vue'
+import { useRoute } from 'vitepress'
+import mediumZoom from 'medium-zoom'
 
 import TwoslashFloatingVue from "@shikijs/vitepress-twoslash/client"
 
@@ -16,6 +20,25 @@ export default {
     app.component("GitHubContributors", GitHubContributors)
   },
   setup() {
+    const route = useRoute()
+
+    const initZoom = () => {
+      mediumZoom('.main img', {
+        background: 'var(--vp-c-bg)',
+        margin: 24,
+        scrollOffset: 0
+      })
+    }
+
+    onMounted(() => {
+      initZoom()
+    })
+
+    watch(
+      () => route.path,
+      () => nextTick(() => initZoom())
+    )
+
     if (typeof window !== 'undefined') {
       const updateThemeState = () => {
         const isDark = document.documentElement.classList.contains('dark')

docs/docs/blog.md

@@ -0,0 +1,13 @@
+---
+sidebar: false
+editLink: false
+outline: false
+---
+
+<script setup>
+import BlogIndex from '../.vitepress/components/BlogIndex.vue'
+</script>
+
+# Latest From the Herb Blog
+
+<BlogIndex />