chore: init

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "@antfu"
+}

.gitignore

@@ -0,0 +1,6 @@
+node_modules
+*.log
+dist
+.output
+.nuxt
+.env

.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

.stackblitzrc

@@ -0,0 +1,4 @@
+{
+  "installDependencies": true,
+  "startCommand": "npm run dev"
+}

.vscode/extensions.json

@@ -0,0 +1,10 @@
+{
+  "recommendations": [
+    "antfu.iconify",
+    "antfu.unocss",
+    "antfu.goto-alias",
+    "csstools.postcss",
+    "dbaeumer.vscode-eslint",
+    "vue.volar"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  "prettier.enable": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "files.associations": {
+    "*.css": "postcss"
+  },
+  "editor.formatOnSave": false
+}

README.md

@@ -0,0 +1,80 @@
+<p align="center">
+<img src="https://user-images.githubusercontent.com/11247099/140462375-7b7ac4db-35b7-453c-8a05-13d8d20282c4.png" width="600"/>
+</p>
+
+<h2 align="center">
+<a href="https://github.com/antfu/vitesse">Vitesse</a> for Nuxt 3
+</h2><br>
+
+<pre align="center">
+🧪 Working in Progress
+</pre>
+
+<p align="center">
+<br>
+<a href="https://vitesse-nuxt3.netlify.app/">🖥 Online Preview</a>
+<br><br>
+<a href="https://stackblitz.com/github/antfu/vitesse-nuxt3"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt=""></a>
+</p>
+
+## Features
+
+- [💚 Nuxt 3](https://v3.nuxtjs.org) - SSR, ESR, File-based routing, components auto importing, modules, etc.
+
+- ⚡️ Vite - Instant HMR
+
+- 🎨 [UnoCSS](https://github.com/antfu/unocss) - The instant on-demand atomic CSS engine.
+
+- 😃 Use icons from any icon sets in Pure CSS, powered by [UnoCSS](https://github.com/antfu/unocss)
+
+- 🔥 The `<script setup>` syntax
+
+- 🍍 [State Management via Pinia](https://pinia.esm.dev), see [./composables/user.ts](./composables/user.ts)
+
+- 📑 [Layout system](./layouts)
+
+- 📥 APIs auto importing - for Composition API, VueUse and custom composables.
+
+- 🏎 Zero-config cloud functions and deploy
+
+- 🦾 TypeScript, of course
+
+## Plugins
+
+### Nuxt Modules
+
+- [VueUse](https://github.com/vueuse/vueuse) - collection of useful composition APIs.
+- [ColorMode](https://github.com/nuxt-community/color-mode-module) - dark and Light mode with auto detection made easy with Nuxt.
+- [UnoCSS](https://github.com/antfu/unocss) - the instant on-demand atomic CSS engine.
+- [Pinia](https://pinia.esm.dev/) - intuitive, type safe, light and flexible Store for Vue.
+
+## IDE
+
+We recommend using [VS Code](https://code.visualstudio.com/) with [Volar](https://github.com/johnsoncodehk/volar) to get the best experience (You might want to disable Vetur if you have it).
+
+## Variations
+
+- [vitesse](https://github.com/antfu/vitesse) - Opinionated Vite Starter Template
+- [vitesse-lite](https://github.com/antfu/vitesse-lite) - Lightweight version of Vitesse
+- [vitesse-nuxt-bridge](https://github.com/antfu/vitesse-nuxt-bridge) - Vitesse for Nuxt 2 with Bridge
+- [vitesse-webext](https://github.com/antfu/vitesse-webext) - WebExtension Vite starter template
+
+## Try it now!
+
+### Online
+
+<a href="https://stackblitz.com/github/antfu/vitesse-nuxt3"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt=""></a>
+
+### GitHub Template
+
+[Create a repo from this template on GitHub](https://github.com/antfu/vitesse-nuxt3/generate).
+
+### Clone to local
+
+If you prefer to do it manually with the cleaner git history
+
+```bash
+npx degit antfu/vitesse-nuxt3 my-nuxt3-app
+cd my-nuxt3-app
+pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
+```

api-client/index.ts

@@ -0,0 +1,24 @@
+import { Headers, createFetch, fetch } from 'ohmyfetch'
+import type { Post } from './types'
+
+export interface MastodonClientOptions {
+  host: string
+}
+
+export class Client {
+  $fetch: ReturnType<typeof createFetch> = undefined!
+
+  constructor(public options: MastodonClientOptions) {
+    this.$fetch = createFetch({
+      defaults: {
+        baseURL: options.host,
+      },
+      fetch,
+      Headers,
+    })
+  }
+
+  getPublicTimeline(): Promise<Post[]> {
+    return this.$fetch('/api/v1/timelines/public')
+  }
+}

api-client/types.ts

@@ -0,0 +1,114 @@
+export interface Post {
+  id: string
+  created_at: Date
+  in_reply_to_id: null | string
+  in_reply_to_account_id: null | string
+  sensitive: boolean
+  spoiler_text: string
+  visibility: Visibility
+  language: string
+  uri: string
+  url: string
+  replies_count: number
+  reblogs_count: number
+  favourites_count: number
+  edited_at: null
+  favourited: boolean
+  reblogged: boolean
+  muted: boolean
+  bookmarked: boolean
+  content: string
+  filtered: any[]
+  reblog: null
+  account: Account
+  media_attachments: MediaAttachment[]
+  mentions: any[]
+  tags: Tag[]
+  emojis: Emoji[]
+  card: null
+  poll: null
+  application?: Application
+}
+
+export interface Account {
+  id: string
+  username: string
+  acct: string
+  display_name: string
+  locked: boolean
+  bot: boolean
+  discoverable: boolean
+  group: boolean
+  created_at: Date
+  note: string
+  url: string
+  avatar: string
+  avatar_static: string
+  header: string
+  header_static: string
+  followers_count: number
+  following_count: number
+  statuses_count: number
+  last_status_at: Date
+  emojis: Emoji[]
+  fields: Field[]
+  noindex?: boolean
+}
+
+export interface Emoji {
+  shortcode: string
+  url: string
+  static_url: string
+  visible_in_picker: boolean
+}
+
+export interface Field {
+  name: string
+  value: string
+  verified_at: Date | null
+}
+
+export interface Application {
+  name: string
+  website: null | string
+}
+
+export interface MediaAttachment {
+  id: string
+  type: string
+  url: string
+  preview_url: string
+  remote_url: string
+  preview_remote_url: null
+  text_url: null
+  meta: Meta
+  description: null | string
+  blurhash: string
+}
+
+export interface Meta {
+  focus?: Focus
+  original: Original
+  small: Original
+}
+
+export interface Focus {
+  x: number
+  y: number
+}
+
+export interface Original {
+  width: number
+  height: number
+  size: string
+  aspect: number
+}
+
+export interface Tag {
+  name: string
+  url: string
+}
+
+export enum Visibility {
+  Public = 'public',
+}

app.vue

@@ -0,0 +1,29 @@
+<script setup>
+useHead({
+  title: 'Vitesse Nuxt 3',
+  link: [
+    {
+      rel: 'icon', type: 'image/png', href: '/nuxt.png',
+    },
+  ],
+})
+</script>
+
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+
+<style>
+html, body , #__nuxt{
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+}
+
+html.dark {
+  background: #222;
+  color: white;
+}
+</style>

components/AccountInfo.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { Account } from '~/api-client/types'
+
+const props = defineProps<{
+  account: Account
+}>()
+</script>
+
+<template>
+  <div flex gap-2>
+    <div p1>
+      <img :src="account.avatar" rounded w-10 h-10>
+    </div>
+    <div flex flex-col>
+      <h4 font-bold>
+        {{ account.display_name }}
+      </h4>
+      <p op50>
+        @{{ account.acct }}
+      </p>
+    </div>
+  </div>
+</template>

components/PostActions.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { Post } from '~/api-client/types'
+
+const props = defineProps<{
+  post: Post
+}>()
+</script>
+
+<template>
+  <div flex justify-around px-2>
+    <button flex gap-1 items-center>
+      <div i-ri:chat-3-line />
+      <span>{{ post.replies_count }}</span>
+    </button>
+    <button flex gap-1 items-center>
+      <div i-ri:repeat-fill />
+      <span>{{ post.reblogs_count }}</span>
+    </button>
+    <button flex gap-1 items-center>
+      <div i-ri:heart-3-line />
+      <span>{{ post.favourites_count }}</span>
+    </button>
+  </div>
+</template>

components/PostCard.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { Post } from '~/api-client/types'
+
+const props = defineProps<{
+  post: Post
+}>()
+</script>
+
+<template>
+  <div flex flex-col gap-4 mb-5>
+    <AccountInfo :account="post.account" />
+    <div v-html="post.content" />
+    <PostActions :post="post" />
+  </div>
+</template>

composables/client.ts

@@ -0,0 +1,9 @@
+import { Client } from '~/api-client'
+
+const client = new Client({
+  host: 'https://mas.to',
+})
+
+export function useClient() {
+  return client
+}

html.d.ts

@@ -0,0 +1,13 @@
+// for UnoCSS attributify mode compact in Volar
+// refer: https://github.com/johnsoncodehk/volar/issues/1077#issuecomment-1145361472
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes {
+    [key: string]: any
+  }
+}
+declare module '@vue/runtime-core' {
+  interface AllowedComponentProps {
+    [key: string]: any
+  }
+}
+export {}

layouts/README.md

@@ -0,0 +1,15 @@
+## Layouts
+
+Vue components in this dir are used as layouts.
+
+By default, `default.vue` will be used unless an alternative is specified in the route meta.
+
+```html
+<script setup lang="ts">
+definePageMeta({
+  layout: 'home',
+})
+</script>
+```
+
+Learn more on https://v3.nuxtjs.org/guide/directory-structure/layouts