Merge pull request #23 from minnoroth/upgrade-vitepress

Upgrade vitepress. Upgrade project structure.

package.json

@@ -19,7 +19,7 @@
     "glob": "^8.0.1",
     "gray-matter": "^4.0.3",
     "typescript": "^4.8.4",
-    "vitepress": "^1.0.0-beta.3",
+    "vitepress": "^1.0.0-rc.39",
     "vue-eslint-parser": "^9.1.0"
   }
 }

site/.vitepress/config.ts

@@ -19,7 +19,7 @@ export default defineConfig({
   themeConfig: {
     logo: '/wren.png',
     footer: {
-      copyright: 'Copyright © 2017-2023 Wren Security'
+      copyright: 'Copyright © 2017-2024 Wren Security'
     },
     nav: [
       {
@@ -104,7 +104,7 @@ export default defineConfig({
     },
     socialLinks: [
       { icon: 'github', link: 'https://github.com/WrenSecurity' },
-      { icon: { svg: '<svg fill="#000000" viewBox="0 0 1200 1227" role="img"><path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"/></svg>' }, link: 'https://twitter.com/WrenSecurity' },
+      { icon: 'x', link: 'https://twitter.com/WrenSecurity' },
       { icon: { svg: '<svg fill="#000000" viewBox="0 0 24 24" role="img"><path d="M8.501 4.001H10.5V24H8.501V4.001zm6.999 0V24h-2V4.001h2zM3.5 0h2.001v15H3.5V0zm15 4.001h2V15h-2V4.001z"/></svg>' }, link: 'https://gitter.im/WrenSecurity/Lobby' },
     ],
   },

site/.vitepress/theme/components/blog/Blog.vue

@@ -1,24 +1,24 @@
 <script setup lang="ts">
 import { withBase } from 'vitepress';
-import { data as posts } from '../../../data/posts.data';
+import { data as posts } from '../../posts.data';
 </script>
 
 <template>
   <article
     v-for="post of posts"
-    :key="post.link"
+    :key="post.url"
   >
     <PostHeader
       :title="post.title"
       :author="post.author"
       :date="post.date"
-      :link="post.link"
+      :url="post.url"
     />
     <section>
-      <div v-html="post.excerpt" />
+      <p v-html="post.excerpt" />
     </section>
     <div>
-      <a :href="withBase(post.link)">Read more →</a>
+      <a :href="withBase(post.url)">Read more →</a>
     </div>
   </article>
 </template>

site/.vitepress/theme/components/blog/PostHeader.vue

@@ -3,22 +3,22 @@ import { withBase } from 'vitepress';
 
 defineProps({
   title: { type: String, required: true },
-  author: { type: String, required: true },
-  date: { type: [String, Number], required: true },
-  link: { type: String, required: false, default: null },
+  author: { type: String, required: false, default: null },
+  date: { type: String, required: true },
+  url: { type: String, required: false, default: null },
 });
 
-function formatDate(date: number | string) {
+function formatDate(date: string) {
   let parsed = new Date(date);
-  return parsed.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' });
+  return parsed.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
 }
 </script>
 
 <template>
   <h1>
     <a
-      v-if="link"
-      :href="withBase(link)"
+      v-if="url"
+      :href="withBase(url)"
     >{{ title }}</a>
     <span v-else>{{ title }}</span>
   </h1>

site/.vitepress/theme/custom.css

@@ -1,27 +1,32 @@
 :root {
-  --vp-c-brand: #c12233;
-  --vp-c-brand-light: #dd3e4f;
-  --vp-c-brand-lighter: #e15665;
-  --vp-c-brand-dark: #dd3e4f;
-  --vp-c-brand-darker: #e05161;
+  --vp-c-brand-1: #c12233;
+  --vp-c-brand-2: #d92639;
+  --vp-c-brand-3: #dd3c4d;
   --vp-custom-block-tip-text: #155F3E;
   --vp-custom-block-tip-bg: rgba(66, 184, 131, 0.05);
   --vp-custom-block-tip-border: rgba(66, 184, 131, 0.5);
 }
 
 .dark {
-  --vp-c-brand: #dd3e4f;
+  --vp-c-brand-1: #dd3e4f;
+  --vp-c-brand-2: #dd3c4d;
+  --vp-c-brand-3: #d92639;
   --vp-custom-block-tip-text: #42D392;
   --vp-custom-block-tip-bg: rgba(66, 184, 131, 0.05);
   --vp-custom-block-tip-border: rgba(66, 184, 131, 0.25);
+  --vp-c-gutter: var(--vp-c-divider);
 }
 
 .dark img {
   filter: grayscale(1) invert(1);
 }
 
-.dark .VPFooter {
-  border-top: 1px solid var(--vp-c-divider);
+.vp-doc a {
+  text-decoration: inherit;
+}
+
+.vp-doc a:hover {
+  text-decoration: underline;
 }
 
 .project-origin {

site/.vitepress/theme/posts.data.ts

@@ -0,0 +1,27 @@
+import { createContentLoader } from 'vitepress';
+
+export interface Post {
+  title: string,
+  url: string,
+  date: string,
+  excerpt: string | undefined,
+  author: string | undefined
+}
+
+declare const data: Post[];
+export { data };
+
+export default createContentLoader('blog/**/!(*index).md', {
+  excerpt: true,
+  transform(raw): Post[] {
+    return raw
+      .map(({ url, frontmatter }) => ({
+        title: frontmatter.title,
+        url,
+        excerpt: frontmatter.excerpt,
+        author: frontmatter.author,
+        date: frontmatter.date
+      }))
+      .sort((a, b) => b.date - a.date);
+  }
+});