Add Feed to docs

docs/.vitepress/config.mts

@@ -43,7 +43,8 @@ export default defineConfig({
     // Top navigation
     nav: [
       { text: 'Docs', activeMatch: `^/docs`, link: '/docs/overview' },
-      { text: 'Guides', activeMatch: `^/guides`, link: '/guides/index' }
+      { text: 'Guides', activeMatch: `^/guides`, link: '/guides/index' },
+      { text: 'Feed', activeMatch: `^/feed`, link: '/feed' },
     ],
 
     // Sidebar nav

docs/.vitepress/theme/components/Feed.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { type Post } from '@theme/feed.data'
+
+defineProps<{
+  posts: Post[]
+}>()
+
+function formatDate(raw: string) {
+  const date = new Date(raw)
+  date.setUTCHours(12)
+  return {
+    time: +date,
+    string: date.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    })
+  }
+}
+
+</script>
+
+<template>
+<section>
+  <article v-for="post in posts" :key="post.url">
+    <h2>{{ post.title }}</h2>
+    <time :datetime="post.published_time" v-if="post.published_time">{{ formatDate(post.published_time).string }}</time>
+
+    <img :src="post.image" />
+
+    <p style="margin-top: 40px;">{{ post.description }}</p>
+    <a :href="post.url" target="_blank" noreferrer>Read more</a>
+  </article>
+</section>
+</template>
+
+<style scoped>
+h2 {
+  font-size: 28px;
+  font-weight: bold;
+}
+
+section {
+  max-width: calc(var(--vp-layout-max-width) - 64px);
+  margin-left: auto;
+  margin-right: auto;
+  padding: 40px 0;
+}
+
+section > * {
+  margin-top: 120px;
+  padding-bottom: 40px;
+  border-bottom: 1px solid #333;
+}
+
+section > *:first-child {
+  margin-top: 0;
+}
+
+section >*:last-child {
+  border-bottom: 0;
+}
+
+article a {
+  color: #00bbff;
+  text-decoration: underline;
+  margin-top: 20px;
+  display: inline-block;
+}
+
+time {
+  font-size: 12px;
+  color: #999;
+}
+</style>

docs/.vitepress/theme/feed.data.ts

@@ -0,0 +1,58 @@
+import cheerio from 'cheerio'
+import fs from 'node:fs'
+
+export type Post = {
+  title: string,
+  description: string,
+  url: string,
+  published_time: string,
+  site_name: string,
+  image: string,
+  icon: string,
+  url: string
+}
+
+const postsUrls: string[] = require('./posts.json')
+
+export default {
+  async load() {
+    const posts = postsUrls.map(async (url): Post[] => {
+      try {
+        const html = await (await fetch(url)).text()
+
+        // Using cheerio to parse the html into actual dom nodes that we can interact.
+        const $ = cheerio.load(html)
+
+        // Tiny helper
+        const getMetaTag = (name) => (
+          $(`meta[name=${name}]`).attr("content") ||
+          $(`meta[property="og:${name}"]`).attr("content") ||
+          $(`meta[property="twitter${name}"]`).attr("content")
+        )
+
+        const title = getMetaTag('title') || $('title').text()
+        const description = getMetaTag('description')
+        const site_name = getMetaTag('site_name')
+        const image = getMetaTag('image') || $('meta[property="og:image:url"]').attr('content')
+        const icon = $('link[rel="icon"]').attr('href') || $('link[rel="shortcut icon"]').attr('href') || $('link[rel="alternate icon"]').attr('href')
+        const author = getMetaTag('author')
+        const published_time = $('meta[property="article:published_time"]').attr('content')
+
+        return {
+          url,
+          title,
+          description,
+          published_time,
+          site_name,
+          image,
+          icon
+        } as Post
+      }
+      catch (e) {
+        console.error(e)
+      }
+    })
+
+    return Promise.all(posts)
+  }
+}

docs/.vitepress/theme/index.ts

@@ -1,6 +1,6 @@
 // https://vitepress.dev/guide/custom-theme
 import { h, ref } from 'vue'
-import type { Theme } from 'vitepress'
+import { type Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import PlatformSelect from './components/PlatformSelect.vue'
 import PlatformSnippet from './components/PlatformSnippet.vue'

docs/.vitepress/theme/posts.json

@@ -0,0 +1,4 @@
+[
+  "https://blog.vuejs.org/posts/vue-3-4",
+  "https://wordpress.com/blog/2024/02/22/wordpress-themes-february-24/"
+]

docs/package.json

@@ -12,6 +12,7 @@
     "docs:preview": "vitepress preview"
   },
   "dependencies": {
-    "@vueuse/core": "^10.7.2"
+    "@vueuse/core": "^10.7.2",
+    "cheerio": "1.0.0-rc.12"
   }
 }

docs/src/feed.md

@@ -0,0 +1,10 @@
+---
+layout: page
+sidebar: false
+---
+<script setup lang="ts">
+import Feed from '@theme/components/Feed.vue'
+import { data as posts } from '@theme/feed.data.ts'
+</script>
+
+<Feed :posts="posts" />