init

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.prettierrc

@@ -0,0 +1,4 @@
+semi: false
+singleQuote: true
+printWidth: 80
+trailingComma: none

.vitepress/config.js

@@ -0,0 +1,28 @@
+const fs = require('fs')
+const path = require('path')
+const matter = require('gray-matter')
+
+/**
+ * @type {import('vitepress').UserConfig}
+ */
+module.exports = {
+ title: 'The Vue Point',
+ description: 'The offical blog for the Vue.js project',
+ customData: {
+ posts: getPosts()
+ }
+}
+
+function getPosts() {
+ const postDir = path.resolve(__dirname, '../posts')
+ return fs.readdirSync(postDir).map((file) => {
+ const src = fs.readFileSync(path.join(postDir, file), 'utf-8')
+ const { data, excerpt } = matter(src, { excerpt: true })
+ return {
+ title: data.title,
+ href: `/posts/${file.replace(/\.md$/, '.html')}`,
+ date: data.date instanceof Date ? +data.date : null,
+ excerpt
+ }
+ }).sort((a, b) => b.date - a.date)
+}

.vitepress/theme/Article.vue

@@ -0,0 +1,60 @@
+<template>
+ <article class="xl:divide-y xl:divide-gray-200">
+ <header class="pt-6 xl:pb-10 space-y-1 text-center">
+ <Date :date="data.date" />
+ <h1
+ class="text-3xl leading-9 font-extrabold text-gray-900 tracking-tight sm:text-4xl sm:leading-10 md:text-5xl md:leading-14"
+ >{{ data.title }}</h1>
+ </header>
+
+ <div
+ class="divide-y xl:divide-y-0 divide-gray-200 xl:grid xl:grid-cols-4 xl:gap-x-6 pb-16 xl:pb-20"
+ style="grid-template-rows: auto 1fr;"
+ >
+ <Author />
+ <div class="divide-y divide-gray-200 xl:pb-0 xl:col-span-3 xl:row-span-2">
+ <Content class="prose max-w-none pt-10 pb-8" />
+ </div>
+
+ <footer
+ class="text-sm font-medium leading-5 divide-y divide-gray-200 xl:col-start-1 xl:row-start-2"
+ >
+ <div v-if="nextPost" class="space-y-8 py-8">
+ <div>
+ <h2 class="text-xs tracking-wide uppercase text-gray-500">Next Article</h2>
+ <div class="link">
+ <a :href="nextPost.href">{{ nextPost.title }}</a>
+ </div>
+ </div>
+ </div>
+ <div v-if="prevPost" class="space-y-8 py-8">
+ <div >
+ <h2 class="text-xs tracking-wide uppercase text-gray-500">Previous Article</h2>
+ <div class="link">
+ <a :href="prevPost.href">{{ prevPost.title }}</a>
+ </div>
+ </div>
+ </div>
+ <div class="pt-8">
+ <a class="link" href="/">← Back to the blog</a>
+ </div>
+ </footer>
+ </div>
+ </article>
+</template>
+
+<script setup>
+import Date from './Date.vue'
+import Author from './Author.vue'
+import { computed } from 'vue'
+import { useFrontmatter, useSiteData } from 'vitepress'
+
+const data = useFrontmatter()
+const posts = useSiteData().value.customData.posts
+
+function findCurrentIndex() {
+ return posts.findIndex(p => p.title === data.value.title)
+}
+const nextPost = computed(() => posts[findCurrentIndex() - 1])
+const prevPost = computed(() => posts[findCurrentIndex() + 1])
+</script>

.vitepress/theme/Author.vue

@@ -0,0 +1,35 @@
+<template>
+ <dl class="pt-6 pb-10 xl:pt-11 xl:border-b xl:border-gray-200">
+ <dt class="sr-only">Authors</dt>
+ <dd>
+ <ul class="flex justify-center xl:block space-x-8 sm:space-x-12 xl:space-x-0 xl:space-y-8">
+ <li class="flex items-center space-x-2">
+ <img
+ v-if="data.gravatar"
+ :src="'https://gravatar.com/avatar/' + data.gravatar"
+ alt="author image"
+ class="w-10 h-10 rounded-full"
+ />
+ <dl class="text-sm font-medium leading-5 whitespace-nowrap">
+ <dt class="sr-only">Name</dt>
+ <dd class="text-gray-900">{{ data.author }}</dd>
+ <dt v-if="data.twitter" class="sr-only">Twitter</dt>
+ <dd v-if="data.twitter">
+ <a
+ :href="'https://twitter.com/' + data.twitter"
+ target="_blank"
+ class="link"
+ >{{ data.twitter }}</a>
+ </dd>
+ </dl>
+ </li>
+ </ul>
+ </dd>
+ </dl>
+</template>
+
+<script setup>
+import { useFrontmatter } from 'vitepress'
+
+const data = useFrontmatter()
+</script>

.vitepress/theme/Date.vue

@@ -0,0 +1,26 @@
+<template>
+ <dl>
+ <dt class="sr-only">Published on</dt>
+ <dd class="text-base leading-6 font-medium text-gray-500">
+ <time :datetime="date">{{ format(date) }}</time>
+ </dd>
+ </dl>
+</template>
+
+<script setup>
+import { defineProps } from 'vue'
+
+defineProps({
+ date: String
+})
+
+function format(date) {
+ const d = new Date(date)
+ d.setHours(24)
+ return d.toLocaleDateString('en-US', {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric'
+ })
+}
+</script>

.vitepress/theme/Home.vue

@@ -0,0 +1,34 @@
+<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"
+ >{{ $frontmatter.title }}</h1>
+ <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 $site.customData.posts">
+ <article 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">
+ <div class="space-y-6">
+ <h2 class="text-2xl leading-8 font-bold tracking-tight">
+ <a class="text-gray-900" :href="href">{{ title }}</a>
+ </h2>
+ <div v-if="excerpt" class="prose max-w-none text-gray-500">
+ <p>{{ excerpt }}</p>
+ </div>
+ </div>
+ <div class="text-base leading-6 font-medium">
+ <a class="link" aria-label="read more" :href="href">Read more →</a>
+ </div>
+ </div>
+ </article>
+ </li>
+ </ul>
+ </div>
+</template>
+
+<script setup>
+import Date from './Date.vue'
+</script>

.vitepress/theme/Layout.vue

@@ -0,0 +1,29 @@
+<template>
+ <div class="antialiased">
+ <div class="max-w-3xl mx-auto px-4 sm:px-6 xl:max-w-5xl xl:px-0">
+ <nav class="flex justify-between items-center py-10 font-bold">
+ <a class="text-xl" href="/" aria-label="The Vue Point">
+ <img class="inline-block mr-2" style="width:36px" src="/logo.svg" />
+ <span v-if="!isIndex">The Vue Point</span>
+ </a>
+ <div class="text-base text-gray-500 leading-5">
+ <a class="hover:text-gray-700" href="https://v3.vuejs.org" target="_blank">Vuejs.org →</a>
+ </div>
+ </nav>
+ </div>
+ <main class="max-w-3xl mx-auto px-4 sm:px-6 xl:max-w-5xl xl:px-0">
+ <Home v-if="isIndex" />
+ <Article v-else />
+ </main>
+ </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vitepress'
+import Home from './Home.vue'
+import Article from './Article.vue'
+
+const route = useRoute()
+const isIndex = computed(() => route.path.replace(/index.html$/, '') === '/')
+</script>

.vitepress/theme/index.js

@@ -0,0 +1,9 @@
+import 'vitepress/dist/client/theme-default/styles/vars.css'
+import './tailwind.css'
+import './style.css'
+
+import Layout from './Layout.vue'
+
+export default {
+ Layout
+}

.vitepress/theme/style.css

@@ -0,0 +1,92 @@
+.link {
+ color: var(--c-brand);
+}
+
+.link:hover {
+ color: var(--c-brand-light);
+}
+
+.header-anchor {
+ display: none;
+}
+
+/**
+ * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML.
+ * Based on https://github.com/chriskempson/tomorrow-theme
+ *
+ * @author Rose Pritchard
+ */
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+ color: #999;
+}
+
+.token.punctuation {
+ color: #ccc;
+}
+
+.token.tag,
+.token.attr-name,
+.token.namespace,
+.token.deleted {
+ color: #e2777a;
+}
+
+.token.function-name {
+ color: #6196cc;
+}
+
+.token.boolean,
+.token.number,
+.token.function {
+ color: #f08d49;
+}
+
+.token.property,
+.token.class-name,
+.token.constant,
+.token.symbol {
+ color: #f8c555;
+}
+
+.token.selector,
+.token.important,
+.token.atrule,
+.token.keyword,
+.token.builtin {
+ color: #cc99cd;
+}
+
+.token.string,
+.token.char,
+.token.attr-value,
+.token.regex,
+.token.variable {
+ color: #7ec699;
+}
+
+.token.operator,
+.token.entity,
+.token.url {
+ color: #67cdcc;
+}
+
+.token.important,
+.token.bold {
+ font-weight: bold;
+}
+
+.token.italic {
+ font-style: italic;
+}
+
+.token.entity {
+ cursor: help;
+}
+
+.token.inserted {
+ color: green;
+}

.vitepress/theme/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

index.md

@@ -0,0 +1,4 @@
+---
+title: The Vue Point
+subtext: Updates, tips & opinions from the maintainers of Vue.js.
+---

package.json

@@ -0,0 +1,18 @@
+{
+ "name": "vue-blog",
+ "version": "1.0.0",
+ "private": true,
+ "scripts": {
+ "dev": "vitepress",
+ "build": "vitepress build",
+ "serve": "vitepress serve"
+ },
+ "devDependencies": {
+ "@tailwindcss/typography": "^0.3.1",
+ "autoprefixer": "^10.2.1",
+ "gray-matter": "^4.0.2",
+ "postcss": "^8.2.4",
+ "tailwindcss": "^2.0.2",
+ "vitepress": "^0.11.1"
+ }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+}