├── public
    ├── robots.txt
    └── favicon.ico
├── server
    ├── tsconfig.json
    ├── api
    │   ├── posts.get.ts
    │   └── posts
    │   │   └── new.post.ts
    └── routes
    │   └── auth
    │       └── github.get.ts
├── tsconfig.json
├── eslint.config.mjs
├── app
    ├── middleware
    │   └── logged-in.ts
    ├── pages
    │   ├── index.vue
    │   └── new.vue
    ├── app.vue
    └── components
    │   └── TiptapEditor.client.vue
├── .gitignore
├── shared
    └── post.ts
├── package.json
├── nuxt.config.ts
└── README.md


/public/robots.txt:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../.nuxt/tsconfig.server.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danielroe/nuxtpressable/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | // @ts-check
2 | import withNuxt from './.nuxt/eslint.config.mjs'
3 | 
4 | export default withNuxt(
5 |   // Your custom configs here
6 | )
7 | 


--------------------------------------------------------------------------------
/app/middleware/logged-in.ts:
--------------------------------------------------------------------------------
1 | export default defineNuxtRouteMiddleware(() => {
2 |   const { loggedIn } = useUserSession()
3 | 
4 |   if (!loggedIn.value) {
5 |     return navigateTo('/')
6 |   }
7 | })
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Nuxt dev/build outputs
 2 | .output
 3 | .data
 4 | .nuxt
 5 | .nitro
 6 | .cache
 7 | dist
 8 | 
 9 | # Node dependencies
10 | node_modules
11 | 
12 | # Logs
13 | logs
14 | *.log
15 | 
16 | # Misc
17 | .DS_Store
18 | .fleet
19 | .idea
20 | 
21 | # Local env files
22 | .env
23 | .env.*
24 | !.env.example
25 | 
26 | .posts
27 | 


--------------------------------------------------------------------------------
/shared/post.ts:
--------------------------------------------------------------------------------
 1 | import * as v from 'valibot'
 2 | 
 3 | const postSchema = v.object({
 4 |   slug: v.string(),
 5 |   title: v.string(),
 6 |   body: v.string(),
 7 | })
 8 | 
 9 | export const validatePost = (data: unknown) => v.parse(postSchema, data)
10 | 
11 | export type Post = v.InferInput<typeof postSchema> & {
12 |   author: string
13 |   createdAt: string
14 | }
15 | 


--------------------------------------------------------------------------------
/server/api/posts.get.ts:
--------------------------------------------------------------------------------
 1 | import type { Post } from '#shared/post'
 2 | 
 3 | const storage = useStorage()
 4 | 
 5 | export default defineCachedEventHandler(async () => {
 6 |   const postKeys = await storage.getKeys('posts')
 7 |   const posts = await storage.getItems(postKeys)
 8 |   return posts.map(p => p.value as Post).sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
 9 | }, { swr: true })
10 | 


--------------------------------------------------------------------------------
/app/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { data: posts, refresh, status } = useFetch('/api/posts')
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div>
 7 |     <h1>index page</h1>
 8 |     <article
 9 |       v-for="post of posts"
10 |       :key="post.slug"
11 |     >
12 |       <hgroup>
13 |         <h2>{{ post.title }}</h2>
14 |         <p>by {{ post.author }} on {{ new Date(post.createdAt).toLocaleDateString() }}</p>
15 |       </hgroup>
16 |       <div v-html="post.body" />
17 |     </article>
18 |     <button :aria-busy="status === 'pending'" class="outline" @click="() => refresh()">
19 |       refresh posts
20 |     </button>
21 |   </div>
22 | </template>
23 | 


--------------------------------------------------------------------------------
/server/api/posts/new.post.ts:
--------------------------------------------------------------------------------
 1 | import type { Post } from '#shared/post'
 2 | import { validatePost } from '#shared/post'
 3 | 
 4 | const storage = useStorage('posts')
 5 | 
 6 | export default defineEventHandler(async (event) => {
 7 |   const session = await getUserSession(event)
 8 |   if (!session.user) {
 9 |     throw createError({
10 |       message: 'Not logged in',
11 |       status: 401,
12 |     })
13 |   }
14 |   const { body, slug, title } = await readValidatedBody(event, validatePost)
15 | 
16 |   await storage.setItem(slug, {
17 |     title,
18 |     body,
19 |     slug,
20 |     author: session.user.name,
21 |     createdAt: new Date().toISOString(),
22 |   } satisfies Post)
23 | 
24 |   return null
25 | })
26 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-app",
 3 |   "private": true,
 4 |   "type": "module",
 5 |   "scripts": {
 6 |     "build": "nuxt build",
 7 |     "dev": "nuxt dev",
 8 |     "lint": "eslint .",
 9 |     "generate": "nuxt generate",
10 |     "preview": "nuxt preview",
11 |     "postinstall": "nuxt prepare"
12 |   },
13 |   "dependencies": {
14 |     "@nuxt/eslint": "^0.7.1",
15 |     "@picocss/pico": "^2.0.6",
16 |     "nuxt": "^3.14.159",
17 |     "nuxt-auth-utils": "^0.5.5",
18 |     "nuxt-tiptap-editor": "^2.0.0",
19 |     "valibot": "1.0.0-beta.7",
20 |     "vue": "latest",
21 |     "vue-router": "latest"
22 |   },
23 |   "devDependencies": {
24 |     "typescript": "^5.6.3"
25 |   },
26 |   "packageManager": "pnpm@9.13.2"
27 | }
28 | 


--------------------------------------------------------------------------------
/server/routes/auth/github.get.ts:
--------------------------------------------------------------------------------
 1 | export default defineOAuthGitHubEventHandler({
 2 |   config: {
 3 |     scope: ['user:email'],
 4 |     emailRequired: true,
 5 |   },
 6 |   async onSuccess(event, { user }) {
 7 |     await setUserSession(event, {
 8 |       user: {
 9 |         name: user.name,
10 |         email: user.email,
11 |         githubId: user.id,
12 |       },
13 |     })
14 |     return sendRedirect(event, '/')
15 |   },
16 |   // Optional, will return a json error and 401 status code by default
17 |   onError(event, error) {
18 |     console.error('GitHub OAuth error:', error)
19 |     return sendRedirect(event, '/')
20 |   },
21 | })
22 | 
23 | declare module '#auth-utils' {
24 |   interface User {
25 |     name: string
26 |     email: string
27 |     githubId: string
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/app/app.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { loggedIn, clear } = useUserSession()
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div class="container">
 7 |     <NuxtRouteAnnouncer />
 8 |     <nav>
 9 |       <ul>
10 |         <li>
11 |           <nuxt-link to="/">
12 |             blog
13 |           </nuxt-link>
14 |         </li>
15 |         <li v-if="loggedIn">
16 |           <nuxt-link to="/new">
17 |             new
18 |           </nuxt-link>
19 |         </li>
20 |       </ul>
21 |       <ul>
22 |         <li>
23 |           <nuxt-link
24 |             v-if="!loggedIn"
25 |             external
26 |             to="/auth/github"
27 |           >
28 |             login
29 |           </nuxt-link>
30 |           <button
31 |             v-else
32 |             @click="clear"
33 |           >
34 |             log out
35 |           </button>
36 |         </li>
37 |       </ul>
38 |     </nav>
39 |     <NuxtPage />
40 |   </div>
41 | </template>
42 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://nuxt.com/docs/api/configuration/nuxt-config
 2 | export default defineNuxtConfig({
 3 |   modules: [
 4 |     'nuxt-tiptap-editor',
 5 |     'nuxt-auth-utils',
 6 |     '@nuxt/eslint',
 7 |   ],
 8 |   $production: {
 9 |     nitro: {
10 |       storage: {
11 |         posts: {
12 |           driver: 'cloudflareKVHTTP',
13 |           accountId: process.env.CF_ACCOUNT_ID,
14 |           namespaceId: process.env.CF_NAMESPACE_ID,
15 |           apiToken: process.env.CF_API_TOKEN,
16 |         },
17 |       },
18 |     },
19 |   },
20 |   $development: {
21 |     nitro: {
22 |       storage: {
23 |         posts: {
24 |           driver: 'fsLite',
25 |           base: '.posts',
26 |         },
27 |       },
28 |     },
29 |   },
30 |   devtools: { enabled: true },
31 |   css: ['@picocss/pico'],
32 |   runtimeConfig: {
33 |     oauth: {
34 |       github: {
35 |         clientId: '',
36 |         clientSecret: '',
37 |       },
38 |     },
39 |   },
40 |   future: {
41 |     compatibilityVersion: 4,
42 |   },
43 |   compatibilityDate: '2024-04-03',
44 |   eslint: {
45 |     config: {
46 |       stylistic: true,
47 |     },
48 |   },
49 | })
50 | 


--------------------------------------------------------------------------------
/app/pages/new.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | definePageMeta({
 3 |   middleware: ['logged-in'],
 4 | })
 5 | 
 6 | const html = ref('hi')
 7 | const loading = ref(false)
 8 | 
 9 | async function addNewPost(event: Event) {
10 |   const data = new FormData(event.target as HTMLFormElement)
11 |   const title = data.get('title')!
12 | 
13 |   loading.value = true
14 | 
15 |   try {
16 |     await $fetch('/api/posts/new', {
17 |       method: 'POST',
18 |       body: {
19 |         title,
20 |         slug: title.toString().toLowerCase().replace(/\s+/g, '-'),
21 |         body: html.value,
22 |       },
23 |     })
24 | 
25 |     return navigateTo('/')
26 |   }
27 |   finally {
28 |     loading.value = false
29 |   }
30 | }
31 | </script>
32 | 
33 | <template>
34 |   <div>
35 |     <h1>create new post</h1>
36 |     <form @submit.prevent="addNewPost">
37 |       <label>
38 |         title
39 |         <input
40 |           name="title"
41 |           required
42 |           type="text"
43 |         >
44 |       </label>
45 |       <TiptapEditor v-model="html" />
46 |       <button
47 |         :aria-busy="loading"
48 |         type="submit"
49 |       >
50 |         submit
51 |       </button>
52 |     </form>
53 |   </div>
54 | </template>
55 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt + WordPress (nuxtpressable)
 2 | 
 3 | This is a tiny, incomplete clone of WordPress built in [Nuxt](https://nuxt.com/) for a live-coding session at [Vue Toronto](https://vuetoronto.com/).
 4 | 
 5 | <p align="center">
 6 |   <a href="https://nuxtpressable.netlify.app/" target="_blank">
 7 |     <img width="1090" alt="Screenshot of the nuxtpressable home page, displaying a single blog post" src="https://github.com/user-attachments/assets/919267b0-ef39-4884-8e4c-205a8ddd9f2f">
 8 |   </a>
 9 | </p>
10 | 
11 | - [✨ &nbsp;Live Demo](https://nuxtpressable.netlify.app/)
12 | <!-- - [🔈 &nbsp;Talk](https://www.youtube.com/watch?) -->
13 | 
14 | ## Features
15 | 
16 | - Built with [Nuxt](https://nuxt.com/)
17 | - Authentication via [nuxt-auth-utils](https://github.com/atinux/nuxt-auth-utils) and GitHub OAuth
18 | - Data stored in [Cloudflare KV](https://developers.cloudflare.com/kv/) with [unstorage](https://unstorage.unjs.io/)
19 | - Tiptap editor via [nuxt-tiptap-editor](https://github.com/modbender/nuxt-tiptap-editor)
20 | - Light & dark mode using [pico.css](https://picocss.com/docs/)
21 | - Hosted on Netlify
22 | 
23 | ## Try it out
24 | 
25 | ### Setup
26 | 
27 | ```bash
28 | # install dependencies
29 | pnpm install
30 | 
31 | # serve in dev mode, with hot reload at localhost:3000
32 | pnpm dev
33 | 
34 | # build for production + preview locally
35 | pnpm build && pnpm preview
36 | ```
37 | 
38 | ## License
39 | 
40 | MIT
41 | 


--------------------------------------------------------------------------------
/app/components/TiptapEditor.client.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div v-if="editor">
  4 |       <button
  5 |         :disabled="!editor.can().chain().focus().toggleBold().run()"
  6 |         :class="{ 'is-active': editor.isActive('bold') }"
  7 |         @click="editor.chain().focus().toggleBold().run()"
  8 |       >
  9 |         bold
 10 |       </button>
 11 |       <button
 12 |         :disabled="!editor.can().chain().focus().toggleItalic().run()"
 13 |         :class="{ 'is-active': editor.isActive('italic') }"
 14 |         @click="editor.chain().focus().toggleItalic().run()"
 15 |       >
 16 |         italic
 17 |       </button>
 18 |       <button
 19 |         :disabled="!editor.can().chain().focus().toggleStrike().run()"
 20 |         :class="{ 'is-active': editor.isActive('strike') }"
 21 |         @click="editor.chain().focus().toggleStrike().run()"
 22 |       >
 23 |         strike
 24 |       </button>
 25 |       <button
 26 |         :disabled="!editor.can().chain().focus().toggleCode().run()"
 27 |         :class="{ 'is-active': editor.isActive('code') }"
 28 |         @click="editor.chain().focus().toggleCode().run()"
 29 |       >
 30 |         code
 31 |       </button>
 32 |       <button @click="editor.chain().focus().unsetAllMarks().run()">
 33 |         clear marks
 34 |       </button>
 35 |       <button @click="editor.chain().focus().clearNodes().run()">
 36 |         clear nodes
 37 |       </button>
 38 |       <button
 39 |         :class="{ 'is-active': editor.isActive('paragraph') }"
 40 |         @click="editor.chain().focus().setParagraph().run()"
 41 |       >
 42 |         paragraph
 43 |       </button>
 44 |       <button
 45 |         :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
 46 |         @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
 47 |       >
 48 |         h1
 49 |       </button>
 50 |       <button
 51 |         :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
 52 |         @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
 53 |       >
 54 |         h2
 55 |       </button>
 56 |       <button
 57 |         :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
 58 |         @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
 59 |       >
 60 |         h3
 61 |       </button>
 62 |       <button
 63 |         :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }"
 64 |         @click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
 65 |       >
 66 |         h4
 67 |       </button>
 68 |       <button
 69 |         :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }"
 70 |         @click="editor.chain().focus().toggleHeading({ level: 5 }).run()"
 71 |       >
 72 |         h5
 73 |       </button>
 74 |       <button
 75 |         :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }"
 76 |         @click="editor.chain().focus().toggleHeading({ level: 6 }).run()"
 77 |       >
 78 |         h6
 79 |       </button>
 80 |       <button
 81 |         :class="{ 'is-active': editor.isActive('bulletList') }"
 82 |         @click="editor.chain().focus().toggleBulletList().run()"
 83 |       >
 84 |         bullet list
 85 |       </button>
 86 |       <button
 87 |         :class="{ 'is-active': editor.isActive('orderedList') }"
 88 |         @click="editor.chain().focus().toggleOrderedList().run()"
 89 |       >
 90 |         ordered list
 91 |       </button>
 92 |       <button
 93 |         :class="{ 'is-active': editor.isActive('codeBlock') }"
 94 |         @click="editor.chain().focus().toggleCodeBlock().run()"
 95 |       >
 96 |         code block
 97 |       </button>
 98 |       <button
 99 |         :class="{ 'is-active': editor.isActive('blockquote') }"
100 |         @click="editor.chain().focus().toggleBlockquote().run()"
101 |       >
102 |         blockquote
103 |       </button>
104 |       <button @click="editor.chain().focus().setHorizontalRule().run()">
105 |         horizontal rule
106 |       </button>
107 |       <button @click="editor.chain().focus().setHardBreak().run()">
108 |         hard break
109 |       </button>
110 |       <button
111 |         :disabled="!editor.can().chain().focus().undo().run()"
112 |         @click="editor.chain().focus().undo().run()"
113 |       >
114 |         undo
115 |       </button>
116 |       <button
117 |         :disabled="!editor.can().chain().focus().redo().run()"
118 |         @click="editor.chain().focus().redo().run()"
119 |       >
120 |         redo
121 |       </button>
122 |     </div>
123 | 
124 |     <hr>
125 |     <TiptapEditorContent :editor="editor" />
126 |   </div>
127 | </template>
128 | 
129 | <script setup>
130 | const html = defineModel({
131 |   type: String,
132 |   default: '<p>I\'m running Tiptap with Vue.js. 🎉</p>',
133 | })
134 | 
135 | const editor = useEditor({
136 |   content: html.value,
137 |   extensions: [TiptapStarterKit],
138 | })
139 | 
140 | onMounted(() => {
141 |   editor.value.on('update', () => {
142 |     html.value = editor.value.getHTML()
143 |   })
144 | })
145 | 
146 | onBeforeUnmount(() => {
147 |   unref(editor).destroy()
148 | })
149 | </script>
150 | 


--------------------------------------------------------------------------------