init

.env.example

@@ -0,0 +1,2 @@
+GITHUB_CLIENT_ID='1234'
+GITHUB_CLIENT_SECRET='1234'

.gitignore

@@ -0,0 +1,8 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist

README.md

@@ -0,0 +1,42 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [nuxt 3 documentation](https://v3.nuxtjs.org) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# yarn
+yarn install
+
+# npm
+npm install
+
+# pnpm
+pnpm install --shamefully-hoist
+```
+
+## Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+npm run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Locally preview production build:
+
+```bash
+npm run preview
+```
+
+Checkout the [deployment documentation](https://v3.nuxtjs.org/guide/deploy/presets) for more information.

app.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>Do</h1>
+  </div>
+</template>

assets/css/main.css

@@ -0,0 +1,26 @@
+@tailwind base;
+
+@layer base {
+  h1,.h1 {
+    @apply text-4xl sm:text-5xl text-slate-800 font-bold;
+  }
+  h2,.h2 {
+    @apply text-2xl sm:text-3xl text-slate-800 font-bold;
+  }
+  h3,.h3 {
+    @apply text-xl sm:text-2xl text-slate-800 font-bold;
+  }
+  p,.p {
+    @apply text-lg text-slate-700;
+  }
+  p > a,.p > a {
+    @apply text-teal-600 hover:text-teal-700;
+  }
+}
+
+@tailwind components;
+@tailwind utilities;
+
+body {
+  @apply overflow-y-scroll bg-slate-100;
+}

constants/index.ts

@@ -0,0 +1,2 @@
+export const GH_COOKIE = 'do_gh_token'
+export const USER_STATE = 'user'

nuxt.config.ts

@@ -0,0 +1,15 @@
+import { defineNuxtConfig } from 'nuxt'
+
+// https://v3.nuxtjs.org/api/configuration/nuxt.config
+export default defineNuxtConfig({
+  css: ['@/assets/css/main.css'],
+  build: {
+    postcss: {
+      postcssOptions: require('./postcss.config.cjs'),
+    },
+    transpile: ['mdi-vue'],
+  },
+  typescript: {
+    strict: true,
+  },
+})

package.json

@@ -0,0 +1,18 @@
+{
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview"
+  },
+  "devDependencies": {
+    "@types/luxon": "^3.0.0",
+    "nuxt": "3.0.0-rc.6",
+    "tailwindcss": "^3.1.6"
+  },
+  "dependencies": {
+    "luxon": "^3.0.1",
+    "octokit": "^2.0.4"
+  }
+}

postcss.config.cjs

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

server/api/auth/callback.ts

@@ -0,0 +1,34 @@
+import { GH_COOKIE } from '@/constants'
+import { useQuery, sendRedirect, setCookie } from 'h3'
+import { DateTime } from 'luxon'
+
+export default defineEventHandler(async (event) => {
+  const { code } = useQuery(event)
+
+  if (!code) {
+    return sendRedirect(event, '/')
+  }
+  const response: any = await $fetch(
+    'https://github.com/login/oauth/access_token',
+    {
+      method: 'POST',
+      body: {
+        client_id: process.env.GITHUB_CLIENT_ID,
+        client_secret: process.env.GITHUB_CLIENT_SECRET,
+        code,
+      },
+    }
+  )
+  if (response.error) {
+    return sendRedirect(event, '/')
+  }
+
+  setCookie(event, GH_COOKIE, response.access_token, {
+    path: '/',
+    httpOnly: true,
+    secure: process.env.NODE_ENV === 'production',
+    expires: DateTime.now().plus({ days: 7 }).toJSDate(),
+  })
+
+  return sendRedirect(event, '/')
+})

server/api/auth/login.ts

@@ -0,0 +1,8 @@
+import { sendRedirect } from 'h3'
+
+export default defineEventHandler((event) =>
+  sendRedirect(
+    event,
+    `https://github.com/login/oauth/authorize?client_id=${process.env.GITHUB_CLIENT_ID}&scope=user:email`
+  )
+)

server/api/auth/logout.ts

@@ -0,0 +1,12 @@
+import { getCache } from '@/server/cache'
+import { GH_COOKIE } from '@/constants'
+
+export default defineEventHandler((event) => {
+  const ghToken = useCookies(event)[GH_COOKIE]
+  if (!ghToken) {
+    return true
+  }
+  getCache().del(ghToken)
+  deleteCookie(event, GH_COOKIE)
+  return true
+})

store/api.ts

@@ -0,0 +1,18 @@
+import { Octokit } from 'octokit'
+import { GH_COOKIE } from '@/constants'
+
+let octokit: Octokit | undefined
+
+export async function getApi() {
+  if (!process.client) {
+    throw null
+  }
+  if (!octokit) {
+    const ghToken = useCookie(GH_COOKIE)
+    if (!ghToken) {
+      return null
+    }
+    octokit = new Octokit({ auth: ghToken.value })
+  }
+  return octokit
+}

store/auth.ts

@@ -0,0 +1,33 @@
+import { getApi } from '@/store/api'
+import { USER_STATE } from '@/constants'
+
+export async function getUser() {
+  const api = await getApi()
+
+  if (!api) {
+    return
+  }
+  const { data, status } = await api.rest.users.getAuthenticated()
+
+  if (status >= 400) {
+    return
+  }
+
+  const user = useState(USER_STATE)
+  user.value = {
+    avatarUrl: data.avatar_url,
+  }
+}
+
+export function login() {
+  if (!process.client) {
+    return
+  }
+  window.location.pathname = '/api/auth/login'
+}
+
+export async function logout() {
+  await $fetch('/api/auth/logout')
+  await refreshNuxtData()
+  useRouter().push('/')
+}

tailwind.config.cjs

@@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './app.vue',
+    './components/**/*.{js,vue,ts}',
+    './layouts/**/*.vue',
+    './pages/**/*.vue',
+    './plugins/**/*.{js,ts}',
+    './hooks/**/*.{js,ts}',
+    './nuxt.config.{js,ts}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://v3.nuxtjs.org/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}