use typescript

.vitepress/config.js → .vitepress/config.ts

@@ -30,10 +30,5 @@ export default defineConfig({
  defer: ''
  }
  ]
- ],
- vite: {
- build: {
- // minify: 'terser'
- }
- }
+ ]
 })

.vitepress/genFeed.js → .vitepress/genFeed.ts

@@ -1,8 +1,8 @@
-import fs from 'fs'
 import path from 'path'
+import { readFileSync, writeFileSync } from 'fs'
 import { Feed } from 'feed'
-import postsData from './posts.data.js'
 import { fileURLToPath } from 'url'
+import postsData from './theme/posts.data.js'
 
 const url = `https://blog.vuejs.org`
 const dirname = path.dirname(fileURLToPath(import.meta.url))
@@ -21,11 +21,15 @@ const feed = new Feed({
 postsData.load(true).then((posts) => {
  posts.forEach((post) => {
  const file = path.resolve(dirname, `dist${post.href}`)
- const rendered = fs.readFileSync(file, 'utf-8')
+ const rendered = readFileSync(file, 'utf-8')
  const content = rendered.match(
  /<div [^<>]+?class="prose[^<>]+?>([\s\S]*)<\/div><\/div><footer/
  )
 
+ if (!content) {
+ throw new Error(`no content match found for file ${post.href}`)
+ }
+
  feed.addItem({
  title: post.title,
  id: `${url}${post.href}`,
@@ -44,5 +48,5 @@ postsData.load(true).then((posts) => {
  })
  })
 
- fs.writeFileSync(path.resolve(dirname, 'dist/feed.rss'), feed.rss2())
+ writeFileSync(path.resolve(dirname, 'dist/feed.rss'), feed.rss2())
 })

.vitepress/theme/Article.vue

@@ -1,9 +1,9 @@
-<script setup>
+<script setup lang="ts">
 import Date from './Date.vue'
 import Author from './Author.vue'
 import { computed } from 'vue'
 import { useData, useRoute } from 'vitepress'
-import { data as posts } from '../posts.data'
+import { data as posts } from './posts.data.js'
 
 const { frontmatter: data } = useData()
 

.vitepress/theme/Author.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { useData } from 'vitepress'
 
 const { frontmatter } = useData()

.vitepress/theme/Date.vue

@@ -1,10 +1,7 @@
-<script setup>
-const props = defineProps({
- /**
- * { time, string }
- */
- date: Object
-})
+<script setup lang="ts">
+import type { Post } from './posts.data.js'
+
+const props = defineProps<{ date: Post['date'] }>()
 
 function getDateTime() {
  return new Date(props.date.time).toISOString()

.vitepress/theme/Home.vue

@@ -1,33 +1,25 @@
-<script setup>
+<script setup lang="ts">
 import Date from './Date.vue'
-import { data as posts } from '../posts.data'
+import { data as posts } from './posts.data.js'
+import { useData } from 'vitepress'
+
+const { frontmatter } = useData()
 </script>
 
 <template>
  <div class="divide-y divide-gray-200">
  <div class="pt-6 pb-8 space-y-2 md:space-y-5">
  <h1
- class="
- text-3xl
- leading-9
- font-extrabold
- text-gray-900
- tracking-tight
- sm:text-4xl sm:leading-10
- md:text-6xl md:leading-14
- "
+ class="text-3xl leading-9 font-extrabold text-gray-900 tracking-tight sm:text-4xl sm:leading-10 md:text-6xl md:leading-14"
  >
- {{ $frontmatter.title }}
+ {{ frontmatter.title }}
  </h1>
- <p class="text-lg leading-7 text-gray-500">{{ $frontmatter.subtext }}</p>
+ <p class="text-lg leading-7 text-gray-500">{{ frontmatter.subtext }}</p>
  </div>
  <ul class="divide-y divide-gray-200">
  <li class="py-12" v-for="{ title, href, date, excerpt } of posts">
  <article
- class="
- space-y-2
- xl:grid xl:grid-cols-4 xl:space-y-0 xl:items-baseline
- "
+ class="space-y-2 xl:grid xl:grid-cols-4 xl:space-y-0 xl:items-baseline"
  >
  <Date :date="date" />
  <div class="space-y-5 xl:col-span-3">

.vitepress/theme/Layout.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue'
 import { useRoute } from 'vitepress'
 import Home from './Home.vue'

.vitepress/posts.data.js → .vitepress/theme/posts.data.ts

@@ -1,28 +1,49 @@
 import fs from 'fs'
 import path from 'path'
 import matter from 'gray-matter'
-import { createMarkdownRenderer } from 'vitepress'
+import { createMarkdownRenderer, MarkdownRenderer } from 'vitepress'
 import { fileURLToPath } from 'url'
 
-let md
-
+let md: MarkdownRenderer
 const dirname = path.dirname(fileURLToPath(import.meta.url))
+const postDir = path.resolve(dirname, '../../posts')
 
-export default {
- watch: '../posts/*.md',
- async load(asFeed = false) {
- md = md || (await createMarkdownRenderer(process.cwd()))
- const postDir = path.resolve(dirname, '../posts')
- return fs
- .readdirSync(postDir)
- .map((file) => getPost(file, postDir, asFeed))
- .sort((a, b) => b.date.time - a.date.time)
+export interface Post {
+ title: string
+ href: string
+ date: {
+ time: number
+ string: string
  }
+ excerpt: string | undefined
+ data?: Record<string, any>
+}
+
+interface PostWithData extends Post {
+ data: Record<string, any>
+}
+
+declare const data: Post[]
+export { data }
+
+async function load(): Promise<Post[]>
+async function load(asFeed: boolean): Promise<PostWithData[]>
+async function load(asFeed = false) {
+ md = md || (await createMarkdownRenderer(process.cwd()))
+ return fs
+ .readdirSync(postDir)
+ .map((file) => getPost(file, postDir, asFeed))
+ .sort((a, b) => b.date.time - a.date.time)
+}
+
+export default {
+ watch: path.join(postDir, '*.md'),
+ load
 }
 
 const cache = new Map()
 
-function getPost(file, postDir, asFeed = false) {
+function getPost(file: string, postDir: string, asFeed = false): Post {
  const fullePath = path.join(postDir, file)
  const timestamp = fs.statSync(fullePath).mtimeMs
 
@@ -34,11 +55,11 @@ function getPost(file, postDir, asFeed = false) {
  const src = fs.readFileSync(fullePath, 'utf-8')
  const { data, excerpt } = matter(src, { excerpt: true })
 
- const post = {
+ const post: Post = {
  title: data.title,
  href: `/posts/${file.replace(/\.md$/, '.html')}`,
  date: formatDate(data.date),
- excerpt: md.render(excerpt)
+ excerpt: excerpt && md.render(excerpt)
  }
  if (asFeed) {
  // only attach these when building the RSS feed to avoid bloating the
@@ -50,10 +71,11 @@ function getPost(file, postDir, asFeed = false) {
  timestamp,
  post
  })
+
  return post
 }
 
-function formatDate(date) {
+function formatDate(date: string | Date): Post['date'] {
  if (!(date instanceof Date)) {
  date = new Date(date)
  }

package.json

@@ -5,16 +5,18 @@
  "type": "module",
  "scripts": {
  "dev": "vitepress",
- "build": "vitepress build && node ./.vitepress/genFeed",
+ "build": "vitepress build && tsx ./.vitepress/genFeed",
  "serve": "vitepress serve"
  },
  "devDependencies": {
  "@tailwindcss/typography": "^0.5.4",
+ "@types/markdown-it": "^12.2.3",
+ "@types/node": "^18.7.13",
  "feed": "^4.2.1",
  "gray-matter": "^4.0.2",
- "vitepress": "^1.0.0-alpha.8"
- },
- "dependencies": {
- "tailwindcss": "^3.1.8"
+ "tailwindcss": "^3.1.8",
+  "tsx": "^3.8.2",
+  "vitepress": "^1.0.0-alpha.10",
+ "vue": "^3.2.37"
  }
 }