feat: add blog page

HerringtonDarkholme · HerringtonDarkholme · commit aa0ee10cd9fb · 2024-12-22T16:32:58.000-05:00
diff --git a/website/_data/blog.data.ts b/website/_data/blog.data.ts
@@ -0,0 +1,40 @@
+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', {
+  // excerpt: true,
+  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',
+    }),
+  }
+}
diff --git a/website/blog.md b/website/blog.md
@@ -0,0 +1,12 @@
+---
+sidebar: false
+outline: false
+---
+
+# ast-grep Blog
+
+<script setup>
+import BlogIndex from './src/BlogIndex.vue'
+</script>
+
+<BlogIndex/>
diff --git a/website/blog/code-search-design-space.md.draft b/website/blog/code-search-design-space.md.draft
@@ -1,3 +1,23 @@
+---
+author:
+  - name: Herrington Darkholme
+sidebar: false
+date: 2024-12-23
+head:
+  - - meta
+    - property: og:type
+      content: website
+  - - meta
+    - property: og:title
+      content: Design Space for Code Search
+  - - meta
+    - property: og:url
+      content: https://ast-grep.github.io/blog/code-search-design-space.html
+  - - meta
+    - property: og:description
+      content: A review of the design space for code search tools.
+---
+
 # Design Space for Code Search
 
 Code search is a critical tool for developers, enabling them to find, understand, and reuse existing code.
@@ -115,4 +135,4 @@ its subtrees are compared against AST subtrees of source files in the repository
 
 * Semantics-Based Code Search Using Input/Output Examples https://seg.nju.edu.cn/uploadPublication/copyright/1201675797649.pdf
   *  encodes Java methods in code repositories into path constraints via symbolic analysis and leverages SMT solvers to
-find the methods whose path constraints can satisfy the given input/output examples
+find the methods whose path constraints can satisfy the given input/output examples
diff --git a/website/blog/index.md b/website/blog/index.md
diff --git a/website/src/BlogIndex.vue b/website/src/BlogIndex.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { data as posts } from '../_data/blog.data'
+
+function getDateTime(time: number) {
+  return new Date(time).toISOString()
+}
+</script>
+
+<template>
+  <ul class="blog-list">
+    <li class="blog-entry" v-for="post of posts">
+      <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>
