add post title

docs/.vitepress/config.mts

@@ -8,6 +8,7 @@ import { groupIconMdPlugin, groupIconVitePlugin } from 'vitepress-plugin-group-i
 import { fileURLToPath, URL } from 'node:url'
 
 import llmstxt from 'vitepress-plugin-llms'
+import { addTitleFromFrontmatter } from './plugins/add-title'
 
 export default defineConfig({
   title: "Xmake",
@@ -15,6 +16,16 @@ export default defineConfig({
 
   markdown: {
     config(md) {
+      // Add title from frontmatter plugin FIRST, before other plugins
+      // Process all files - the function will check if title should be added
+      const originalParse = md.parse.bind(md)
+      md.parse = (src: string, env: any) => {
+        // Always process - addTitleFromFrontmatter will check if title exists
+        // and content doesn't already start with H1
+        const processedSrc = addTitleFromFrontmatter(src)
+        return originalParse(processedSrc, env)
+      }
+      
       md.use(groupIconMdPlugin, {
         titleBar: {
           includeSnippet: true,

docs/.vitepress/plugins/add-title.ts

@@ -0,0 +1,46 @@
+/**
+ * Extract title from frontmatter and add it to content if not present
+ * Only processes files that have frontmatter with a title field
+ */
+export function addTitleFromFrontmatter(src: string): string {
+  // Extract frontmatter
+  const frontmatterMatch = src.match(/^---\s*\n([\s\S]*?)\n---\s*\n/)
+  if (!frontmatterMatch) {
+    return src
+  }
+
+  // Get content after frontmatter
+  const contentAfterFrontmatter = src.slice(frontmatterMatch[0].length)
+  
+  // Check if content already starts with a heading (H1)
+  const trimmedContent = contentAfterFrontmatter.trim()
+  if (/^#\s+/.test(trimmedContent)) {
+    return src
+  }
+
+  // Extract title from frontmatter
+  const frontmatter = frontmatterMatch[1]
+  const titleMatch = frontmatter.match(/^title:\s*(.+)$/m)
+  if (!titleMatch) {
+    return src
+  }
+
+  // Extract title (handle quoted and unquoted strings)
+  let title = titleMatch[1].trim()
+  // Remove quotes if present
+  if ((title.startsWith('"') && title.endsWith('"')) || 
+      (title.startsWith("'") && title.endsWith("'"))) {
+    title = title.slice(1, -1)
+  }
+  
+  // Ensure title is not empty
+  if (!title) {
+    return src
+  }
+
+  // Add title as H1 after frontmatter
+  // Escape any markdown special characters in the title to prevent parsing issues
+  const escapedTitle = title.replace(/\n/g, ' ').trim()
+  return frontmatterMatch[0] + `# ${escapedTitle}\n\n` + contentAfterFrontmatter
+}
+

docs/.vitepress/theme/blog-data.js

@@ -52,6 +52,21 @@ export const posts = [
     ],
     "excerpt": "<p>In the new version, we have added cosmocc tool chain support. Using it, we can compile once and run everywhere. In addition, we also refactored the implementation of C++ Modules and solved many C++ Modules-related problems.</p>\n<p>The cosmocc tool chain is the compilation tool chain provided by the <a href=\"https://github.com/jart/cosmopolitan\">cosmopolitan</a> project. Programs compiled using this tool chain can be compiled once and run anywhere.</p>\n<p>In the new version, we also support this tool chain, which can compile programs under macosx/linux/windows, and can also support automatic downloading of the cosmocc tool chain.</p>\n"
   },
+  {
+    "title": "New Feature, Enhanced Package Management",
+    "url": "/posts/new-feature-announcement",
+    "date": {
+      "time": 1705752000000,
+      "string": "January 20, 2024"
+    },
+    "author": "Ruki",
+    "tags": [
+      "feature",
+      "package-management",
+      "xmake"
+    ],
+    "excerpt": "<p>We're excited to announce a major enhancement to Xmake's package management system that will make dependency handling even more powerful and user-friendly.</p>\n<p>The new package management system features:</p>\n<ul>\n<li><strong>Smart dependency resolution</strong>: Automatically resolves complex dependency chains</li>\n<li><strong>Version conflict detection</strong>: Identifies and helps resolve version conflicts</li>\n<li><strong>Parallel downloads</strong>: Faster package installation with parallel downloading</li>\n<li><strong>Better caching</strong>: Improved caching system for faste...</li>\n</ul>\n"
+  },
   {
     "title": "Xmake v2.8.6 released, New Packaging Plugin, XPack",
     "url": "/posts/xmake-update-v2.8.6",

docs/.vitepress/theme/components/PostTitle.vue

@@ -0,0 +1,29 @@
+<template>
+  <h1 v-if="showTitle && title" :id="titleId" tabindex="-1">
+    {{ title }}
+    <a class="header-anchor" :href="`#${titleId}`" :aria-label="`Permalink to "${title}"`">​</a>
+  </h1>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useData } from 'vitepress'
+
+const { page, frontmatter } = useData()
+
+const title = computed(() => frontmatter.value.title)
+const showTitle = computed(() => {
+  const path = page.value.relativePath || ''
+  return path.includes('/posts/') && title.value
+})
+
+const titleId = computed(() => {
+  if (!title.value) return ''
+  // Generate a URL-friendly ID from the title
+  return title.value
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-|-$/g, '')
+})
+</script>
+

docs/.vitepress/theme/components/VPDoc.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useData } from 'vitepress'
+
+const { page, frontmatter } = useData()
+
+const showTitle = computed(() => {
+  const path = page.value.relativePath || page.value.filePath || ''
+  // Check if it's a posts file
+  const isPost = path.includes('/posts/')
+  return isPost && !!title.value
+})
+
+const title = computed(() => frontmatter.value.title)
+
+const titleId = computed(() => {
+  if (!title.value) return ''
+  return title.value
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-|-$/g, '')
+})
+</script>
+
+<template>
+  <div class="vp-doc-wrapper">
+    <h1 v-if="showTitle" :id="titleId" tabindex="-1" class="vp-doc-title">
+      {{ title }}
+      <a class="header-anchor" :href="`#${titleId}`" :aria-label="'Permalink to ' + title">​</a>
+    </h1>
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.vp-doc-wrapper {
+  width: 100%;
+}
+
+.vp-doc-title {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  font-size: 2rem;
+  font-weight: 600;
+  line-height: 1.25;
+}
+</style>
+

docs/.vitepress/theme/index.ts

@@ -1,4 +1,6 @@
 import Theme from 'vitepress/theme'
+import { h } from 'vue'
+import VPDoc from './components/VPDoc.vue'
 import './styles.css'
 import 'virtual:group-icons.css'
 
@@ -20,6 +22,11 @@ const hashToRoute = {
 
 export default {
   extends: Theme,
+  Layout: () => {
+    return h(Theme.Layout, null, {
+      'doc-content-before': () => h(VPDoc)
+    })
+  },
   enhanceApp({ router }) {
     router.onBeforeRouteChange = (to) => {
       const u = new URL(to, 'https://xmake.io')

docs/posts/new-feature-announcement.md

@@ -1,13 +1,10 @@
 ---
----
 title: New Feature, Enhanced Package Management
 tags: [feature, package-management, xmake]
 date: 2024-01-20
 author: Ruki
 ---
 
-# New Feature: Enhanced Package Management
-
 We're excited to announce a major enhancement to Xmake's package management system that will make dependency handling even more powerful and user-friendly.
 
 ## What's New

package.json

@@ -7,6 +7,7 @@
     "generate-blog": "node scripts/generate-blog-data.js"
   },
   "devDependencies": {
+    "glob": "^11.0.3",
     "gray-matter": "^4.0.3",
     "markdown-it": "^14.1.0",
     "vitepress": "^2.0.0-alpha.6",