├── .env.example
├── .gitignore
├── README.md
├── app.vue
├── app
    └── router.options.ts
├── assets
    └── main.css
├── components
    ├── Button.vue
    ├── Command.vue
    ├── Drawer.vue
    ├── Drawer
    │   └── EditPost.vue
    ├── Footer.vue
    ├── Loader.vue
    ├── Logo.vue
    ├── Modal.vue
    ├── Modal
    │   └── Login.vue
    ├── Post
    │   └── Card.vue
    ├── TagsInput.vue
    ├── Tiptap.vue
    ├── Tiptap
    │   ├── Bubble.vue
    │   ├── CommandList.vue
    │   ├── ModalIframe.vue
    │   └── ModalImage.vue
    ├── TiptapHeading.vue
    ├── Toggle.vue
    └── Upload.vue
├── composables
    ├── dashboard.ts
    ├── head.ts
    ├── subdomain.ts
    └── url.ts
├── layouts
    ├── default.vue
    └── user.vue
├── license.md
├── middleware
    └── auth.ts
├── modules
    └── og.ts
├── nuxt.config.ts
├── package.json
├── pages
    ├── dashboard.vue
    ├── dashboard
    │   ├── domain.vue
    │   ├── index.vue
    │   ├── posts.vue
    │   └── profile.vue
    ├── edit
    │   └── [id].vue
    ├── index.vue
    ├── login.vue
    ├── posts.vue
    └── user
    │   ├── [siteId].vue
    │   └── [siteId]
    │       ├── [slug].vue
    │       ├── home.vue
    │       └── index.vue
├── plugins
    └── umami.client.ts
├── public
    ├── banner.png
    ├── fonts
    │   ├── arial.ttf
    │   └── arial_bold.ttf
    ├── hero.png
    ├── logo.svg
    └── og.png
├── server
    ├── api
    │   ├── _supabase
    │   │   └── session.post.ts
    │   ├── add-domain.post.ts
    │   ├── check-domain.post.ts
    │   ├── delete-domain.post.ts
    │   ├── request-delegation.ts
    │   └── user-validation.post.ts
    ├── middleware
    │   ├── login.ts
    │   └── subdomain.ts
    └── routes
    │   └── og
    │       └── [slug].ts
├── tsconfig.json
├── utils
    ├── functions.ts
    ├── tiptap
    │   ├── code.ts
    │   ├── commands.ts
    │   ├── hardbreak.ts
    │   ├── iframe.ts
    │   ├── link.ts
    │   ├── move.ts
    │   ├── placeholder.ts
    │   ├── suggestion.ts
    │   └── upload.ts
    └── types.ts
└── yarn.lock


/.env.example:
--------------------------------------------------------------------------------
1 | SUPABASE_URL=<supabase url>
2 | SUPABASE_KEY=<supabase key>
3 | AUTH_BEARER_TOKEN=<vercel auth bearer token. https://vercel.com/account/tokens>
4 | VERCEL_PROJECT_ID=<vercel projecet id. https://vercel.com/zernonia/keypress/settings>
5 | GITHUB_PROVIDER_TOKEN=<supabase. retrieve when redirecting user from main domain>


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log*
3 | .nuxt
4 | .nitro
5 | .cache
6 | .output
7 | .env
8 | dist
9 | .vercel


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <br />
  2 | <p align="center">
  3 |   <a href="https://github.com/zernonia/keypress">
  4 |     <img src="public/logo.svg" alt="KeyPress's Logo" width="80">
  5 |   </a>
  6 |   <br />
  7 | 
  8 |   <p align="center">
  9 |     A keyboard-first blogging platform. <br> 
 10 |     Finally write your blog post only with keys 🎹
 11 |   </p>
 12 | 
 13 |   <p align="center"> 
 14 |     <a href="https://keypress.blog/">View Demo</a>
 15 |     ·
 16 |     <a href="https://github.com/zernonia/keypress/issues">Report Bug</a>
 17 |     ·
 18 |     <a href="https://github.com/zernonia/keypress/issues">Request Feature</a>
 19 |   </p>
 20 | </p>
 21 | 
 22 | <br/>
 23 | 
 24 | ![KeyPress - open-source blogging platform that focused on keyboard-first experience](public/hero.png)
 25 | 
 26 | ## Introduction
 27 | 
 28 | KeyPress is an open-source blogging platform that focused on keyboard-first experience. It was inspired by Vercel's Platform Starter Kit.
 29 | 
 30 | I always wanted to build a multi-tenant platform using [Nuxt3](https://v3.nuxtjs.org/), and I finally did it! - in `nuxt-rc11`.
 31 | 
 32 | If you are interested to implement the same, checkout
 33 | 
 34 | 1. [`server/middleware/subdomain.ts`](https://github.com/zernonia/keypress/blob/main/server/middleware/subdomain.ts) - check the current domain and set srr context.
 35 | 2. [`app/router.option.ts`](https://github.com/zernonia/keypress/blob/main/app/router.options.ts) - based on the ssr context, map a new route.
 36 | 3. [`pages/user/[siteId]`](https://github.com/zernonia/keypress/tree/main/pages/user/%5BsiteId%5D) - this will now be your new router root
 37 | 
 38 | ## 🚀 Features
 39 | 
 40 | - 🤩 Free
 41 | - 📖 Open-Source
 42 | - 🚀 Free custom domain
 43 | - 🌌 Auto OG image (using [Satori](https://github.com/vercel/satori))
 44 | 
 45 | ### 🔨 Built With
 46 | 
 47 | - [Nuxt 3](https://v3.nuxtjs.org/)
 48 | - [Supabase](https://supabase.com)
 49 | - [UnoCss](https://uno.antfu.me/)
 50 | - [Vercel - Hosting & Domain](https://vercel.com)
 51 | 
 52 | ## 🌎 Setup
 53 | 
 54 | ### Prerequisites
 55 | 
 56 | Yarn
 57 | 
 58 | - ```sh
 59 |   npm install --global yarn
 60 |   ```
 61 | 
 62 | ### Development
 63 | 
 64 | 1. Clone the repo
 65 |    ```sh
 66 |    git clone https://github.com/zernonia/keypress.git
 67 |    ```
 68 | 2. Install NPM packages
 69 |    ```sh
 70 |    cd keypress
 71 |    yarn install
 72 |    ```
 73 | 3. Run local development instance
 74 |    ```sh
 75 |    yarn dev
 76 |    ```
 77 | 
 78 | ### Supabase Database
 79 | 
 80 | ```sql
 81 | create table domains (
 82 |   user_id uuid,
 83 |   url text not null primary key,
 84 |   active boolean,
 85 |   created_at timestamp default now()
 86 | );
 87 | 
 88 | create table profiles (
 89 |   id uuid default uuid_generate_v4() primary key,
 90 |   username text,
 91 |   avatar_url text,
 92 |   name text,
 93 |   created_at timestamp default now(),
 94 |   subdomain text references domains (url)
 95 | );
 96 | 
 97 | create table posts (
 98 |   id uuid default uuid_generate_v4() primary key,
 99 |   author_id uuid references profiles (id),
100 |   created_at timestamp default now(),
101 |   slug text not null,
102 |   title text,
103 |   body text,
104 |   cover_img text,
105 |   active boolean,
106 |   tags ARRAY,
107 |   featured boolean not null
108 | );
109 | 
110 | 
111 | create or replace view tags_view as
112 |   select *, count(*)
113 |   from
114 |     (select unnest(tags) as name from posts where active is true) s
115 |   group by name;
116 | 
117 | 
118 | 
119 | create or replace function public.handle_new_user()
120 |   returns trigger as $$
121 |   begin
122 |     insert into public.profiles (id, avatar_url, username, name)
123 |     values (new.id, new.raw_user_meta_data->>'avatar_url', new.raw_user_meta_data->>'user_name', new.raw_user_meta_data->>'preferred_username');
124 |     return new;
125 |   end;
126 |   $$ language plpgsql security definer;
127 | 
128 | 
129 | create trigger on_auth_user_created
130 |   after insert on auth.users
131 |   for each row execute procedure public.handle_new_user();
132 | ```
133 | 
134 | ## ➕ Contributing
135 | 
136 | Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
137 | 
138 | 1. Fork the Project
139 | 2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
140 | 3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
141 | 4. Push to the Branch (`git push origin feature/AmazingFeature`)
142 | 5. Open a Pull Request
143 | 
144 | ## Acknowledgement
145 | 
146 | 1. [Nuxt 3 - Awesome framework](https://v3.nuxtjs.org/)
147 | 1. [Supabase - Super easy setup (as always)](https://supabase.com)
148 | 1. [Tiptap - Awesome editor](https://tiptap.dev/)
149 | 1. [Vercel's Platform Starter Kit - Subdomain/Custom domain](https://github.com/vercel/platforms)
150 | 1. [Vercel's new og generation](https://github.com/vercel/satori)
151 | 
152 | ## Author
153 | 
154 | - Zernonia ([@zernonia](https://twitter.com/zernonia))
155 | 
156 | Also, if you like my work, please buy me a coffee ☕😳
157 | 
158 | <a href="https://www.buymeacoffee.com/zernonia" target="_blank">
159 |     <img src="https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png" alt="Logo" >
160 |   </a>
161 | 
162 | ## 🔥 Contributors
163 | 
164 | <a href="https://github.com/zernonia/keypress/graphs/contributors">
165 |   <img src="https://contrib.rocks/image?repo=zernonia/keypress" />
166 | </a>
167 | 
168 | ## 📜 License
169 | 
170 | Distributed under the MIT License. See `LICENSE` for more information.
171 | 


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { createFocusTrap } from "focus-trap"
 3 | 
 4 | useHead({
 5 |   charset: "utf-8",
 6 |   titleTemplate: (title) => `${title} | KeyPress`,
 7 |   link: [{ rel: "icon", href: "/logo.svg" }],
 8 | })
 9 | 
10 | onMounted(() => {
11 |   const trap = createFocusTrap("body", { escapeDeactivates: false })
12 |   trap.activate()
13 | })
14 | </script>
15 | <template>
16 |   <div class="relative">
17 |     <NuxtLayout>
18 |       <NuxtPage></NuxtPage>
19 |     </NuxtLayout>
20 |   </div>
21 | </template>
22 | 


--------------------------------------------------------------------------------
/app/router.options.ts:
--------------------------------------------------------------------------------
 1 | import type { RouterOptions } from "@nuxt/schema"
 2 | 
 3 | // https://router.vuejs.org/api/interfaces/routeroptions.html
 4 | export default <RouterOptions>{
 5 |   routes: (_routes) => {
 6 |     const { ssrContext } = useNuxtApp()
 7 |     const subdomain = useSubdomain()
 8 |     if (ssrContext?.event.context.subdomain) subdomain.value = ssrContext?.event.context.subdomain
 9 | 
10 |     if (subdomain.value) {
11 |       const userRoute = _routes.filter((i) => i.path.includes("/user/:siteId"))
12 |       const userRouteMapped = userRoute.map((i) => ({
13 |         ...i,
14 |         path: i.path === "/user/:siteId" ? i.path.replace("/user/:siteId", "/") : i.path.replace("/user/:siteId/", "/"),
15 |       }))
16 | 
17 |       return userRouteMapped
18 |     }
19 |   },
20 |   scrollBehavior(to, from, savedPosition) {
21 |     if (savedPosition) return savedPosition
22 |     if (to.hash) {
23 |       const el = document.querySelector(to.hash) as HTMLElement
24 |       return { left: 0, top: (el?.offsetTop ?? 0) - 30, behavior: "smooth" }
25 |     }
26 | 
27 |     if (to.fullPath === from.fullPath) return
28 |     return { left: 0, top: 0, behavior: "smooth" }
29 |   },
30 | }
31 | 


--------------------------------------------------------------------------------
/assets/main.css:
--------------------------------------------------------------------------------
  1 | /* for easy focus tracking */
  2 | button:not(:where(.not-default, [data-tippy-root])),
  3 | a:not(:where(.not-default, [data-tippy-root])) {
  4 |   outline: 2px solid transparent;
  5 |   outline-offset: 15px;
  6 |   transition: 0.3s all ease !important;
  7 | }
  8 | button:not(:where(.not-default)):focus,
  9 | a:not(:where(.not-default)):focus {
 10 |   outline-offset: 2px;
 11 |   outline: 2px solid #2d2d2d;
 12 |   border-radius: 1rem;
 13 | }
 14 | 
 15 | html {
 16 |   scroll-behavior: smooth;
 17 | }
 18 | body {
 19 |   @apply text-dark-300 overflow-x-hidden;
 20 | }
 21 | ::-moz-selection {
 22 |   /* Code for Firefox */
 23 |   @apply bg-gray-200;
 24 | }
 25 | 
 26 | ::selection {
 27 |   @apply bg-gray-200;
 28 | }
 29 | ::-webkit-scrollbar {
 30 |   @apply bg-light-300 w-6px h-6px md:w-8px md:h-8px;
 31 | }
 32 | ::-webkit-scrollbar-thumb {
 33 |   @apply rounded-xl transition bg-light-900;
 34 | }
 35 | ::-webkit-scrollbar-thumb:hover {
 36 |   @apply bg-gray-300;
 37 | }
 38 | ::-webkit-scrollbar-track {
 39 |   @apply rounded-xl bg-transparent;
 40 | }
 41 | 
 42 | kbd {
 43 |   height: 20px;
 44 |   width: 20px;
 45 |   border-radius: 4px;
 46 |   padding: 0 4px;
 47 |   display: flex;
 48 |   align-items: center;
 49 |   justify-content: center;
 50 |   font-family: inherit;
 51 |   @apply text-gray-400 bg-light-300;
 52 | }
 53 | kbd:first-of-type {
 54 |   margin-left: 8px;
 55 | }
 56 | 
 57 | input[type="text"]:not(:where(.not-default)),
 58 | input[type="url"]:not(:where(.not-default)) {
 59 |   @apply flex items-center rounded-2xl w-full h-10 py-1 md:py-2 px-5 bg-light-300  placeholder-gray-400 outline-none transition ring-3 ring-transparent !focus-within:ring-gray-400;
 60 | }
 61 | 
 62 | .fade-enter-active,
 63 | .fade-leave-active {
 64 |   transition: all 0.3s ease-in-out;
 65 | }
 66 | 
 67 | .fade-enter-from,
 68 | .fade-leave-to {
 69 |   opacity: 0;
 70 | }
 71 | .fade-enter-active .inner,
 72 | .fade-leave-active .inner {
 73 |   transition: all 0.3s ease-in-out;
 74 | }
 75 | 
 76 | .fade-enter-from .inner,
 77 | .fade-leave-to .inner {
 78 |   opacity: 0;
 79 |   transform: scale(0);
 80 | }
 81 | 
 82 | .slide-in-right-enter-active,
 83 | .slide-in-right-leave-active {
 84 |   transition: all 0.3s ease-in-out;
 85 | }
 86 | 
 87 | .slide-in-right-enter-from,
 88 | .slide-in-right-leave-to {
 89 |   opacity: 0;
 90 |   transform: translateX(300px);
 91 | }
 92 | 
 93 | .command-dialog-enter-active,
 94 | .command-dialog-leave-active {
 95 |   transition: all 0.2s ease-in-out;
 96 | }
 97 | 
 98 | .command-dialog-enter-from,
 99 | .command-dialog-leave-to {
100 |   opacity: 0;
101 |   transform: scale(0.95);
102 | }
103 | 
104 | .prose :where(iframe):not(:where(.not-prose, .not-prose *)) {
105 |   width: 100%;
106 |   max-width: 100%;
107 | }
108 | 
109 | /* .prose pre {
110 |   background: #0d0d0d;
111 |   color: #fff;
112 |   font-family: "JetBrainsMono", monospace;
113 |   padding: 0.75rem 1rem;
114 |   border-radius: 0.5rem;
115 | } */
116 | 
117 | .hljs-comment,
118 | .hljs-quote {
119 |   color: #616161;
120 | }
121 | 
122 | .hljs-variable,
123 | .hljs-template-variable,
124 | .hljs-attribute,
125 | .hljs-tag,
126 | .hljs-name,
127 | .hljs-regexp,
128 | .hljs-link,
129 | .hljs-name,
130 | .hljs-selector-id,
131 | .hljs-selector-class {
132 |   color: #f98181;
133 | }
134 | 
135 | .hljs-number,
136 | .hljs-meta,
137 | .hljs-built_in,
138 | .hljs-builtin-name,
139 | .hljs-literal,
140 | .hljs-type,
141 | .hljs-params {
142 |   color: #fbbc88;
143 | }
144 | 
145 | .hljs-string,
146 | .hljs-symbol,
147 | .hljs-bullet {
148 |   color: #b9f18d;
149 | }
150 | 
151 | .hljs-title,
152 | .hljs-section {
153 |   color: #faf594;
154 | }
155 | 
156 | .hljs-keyword,
157 | .hljs-selector-tag {
158 |   color: #70cff8;
159 | }
160 | 
161 | .hljs-emphasis {
162 |   font-style: italic;
163 | }
164 | 
165 | .hljs-strong {
166 |   font-weight: 700;
167 | }
168 | 


--------------------------------------------------------------------------------
/components/Button.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | defineProps({
 3 |   loading: Boolean,
 4 | })
 5 | </script>
 6 | 
 7 | <template>
 8 |   <button :data-loading="loading" :disabled="loading" class="btn-loader" v-bind="$attrs">
 9 |     <slot></slot>
10 |   </button>
11 | </template>
12 | 
13 | <style>
14 | .btn-loader[data-loading="true"]::before,
15 | [data-loading] [data-type="submit"] .formkit-input::before {
16 |   -webkit-animation: rotate 0.5s linear infinite;
17 |   animation: rotate 0.5s linear infinite;
18 |   width: 1rem;
19 |   border: 0.1428571429em solid #fff;
20 |   border-right-color: transparent;
21 |   margin-right: 0.75em;
22 | }
23 | 
24 | .btn-loader::before,
25 | [data-type="submit"] .formkit-input::before {
26 |   box-sizing: border-box;
27 |   content: "";
28 |   width: 0;
29 |   margin-right: 0;
30 |   height: 1rem;
31 |   border: 0 solid transparent;
32 |   border-radius: 1rem;
33 |   transition: width 0.25s, border 0.25s, margin-right 0.25s;
34 | }
35 | 
36 | @-ms-keyframes rotate {
37 |   from {
38 |     -ms-transform: rotate(0deg);
39 |   }
40 |   to {
41 |     -ms-transform: rotate(360deg);
42 |   }
43 | }
44 | @-moz-keyframes rotate {
45 |   from {
46 |     -moz-transform: rotate(0deg);
47 |   }
48 |   to {
49 |     -moz-transform: rotate(360deg);
50 |   }
51 | }
52 | @-webkit-keyframes rotate {
53 |   from {
54 |     -webkit-transform: rotate(0deg);
55 |   }
56 |   to {
57 |     -webkit-transform: rotate(360deg);
58 |   }
59 | }
60 | @keyframes rotate {
61 |   from {
62 |     transform: rotate(0deg);
63 |   }
64 |   to {
65 |     transform: rotate(360deg);
66 |   }
67 | }
68 | </style>
69 | 


--------------------------------------------------------------------------------
/components/Command.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | import { useFuse } from "@vueuse/integrations/useFuse"
  3 | 
  4 | const router = useRouter()
  5 | const user = useSupabaseUser()
  6 | const subdomain = useSubdomain()
  7 | const url = useUrl()
  8 | 
  9 | const keys = useMagicKeys()
 10 | const CmdK = keys["Meta+K"]
 11 | const Escape = keys["Escape"]
 12 | const isVisible = useState("command-visible", () => false)
 13 | 
 14 | watch(CmdK, (v) => {
 15 |   if (v) {
 16 |     isVisible.value = !isVisible.value
 17 |   }
 18 | })
 19 | watch(Escape, () => (isVisible.value = false))
 20 | 
 21 | const navAction = (path: string) => {
 22 |   router.push(path)
 23 |   isVisible.value = false
 24 |   searchTerm.value = ""
 25 | }
 26 | const navList = computed(() =>
 27 |   subdomain.value
 28 |     ? [
 29 |         { label: "Home", value: "home", action: () => navAction("/"), show: true },
 30 |         {
 31 |           label: "Write",
 32 |           value: "write",
 33 |           action: () => (window.location.href = url + "/write"),
 34 |           show: true,
 35 |         },
 36 |         {
 37 |           label: "Login",
 38 |           value: "login",
 39 |           action: () => (window.location.href = url + "/login"),
 40 |           show: !user.value?.id,
 41 |         },
 42 |         {
 43 |           label: "Dashboard",
 44 |           value: "dashboard",
 45 |           action: () => (window.location.href = url + "/dashboard/posts"),
 46 |           show: user.value?.id,
 47 |         },
 48 |         {
 49 |           label: "KeyPress",
 50 |           value: "keypress",
 51 |           action: () => (window.location.href = url),
 52 |           show: true,
 53 |         },
 54 |       ]
 55 |     : [
 56 |         { label: "Home", value: "home", action: () => navAction("/"), show: true },
 57 |         { label: "Write", value: "write", action: () => navAction("/write"), show: true },
 58 |         { label: "Posts", value: "posts", action: () => navAction("/posts"), show: true },
 59 |         { label: "Login", value: "login", action: () => navAction("/login"), show: !user.value?.id },
 60 |         { label: "Dashboard", value: "dashboard", action: () => navAction("/dashboard/posts"), show: user.value?.id },
 61 |       ]
 62 | )
 63 | 
 64 | const searchTerm = ref("")
 65 | const { results } = useFuse(
 66 |   searchTerm,
 67 |   navList.value.filter((i) => i.show),
 68 |   {
 69 |     fuseOptions: {
 70 |       keys: ["label"],
 71 |     },
 72 |     matchAllWhenSearchEmpty: true,
 73 |   }
 74 | )
 75 | </script>
 76 | 
 77 | <template>
 78 |   <div>
 79 |     <button class="btn-plain" @click="isVisible = true">⌘K</button>
 80 | 
 81 |     <Modal class="!items-start" inner-class="!max-w-screen-sm rounded-xl mt-48" v-model:open="isVisible">
 82 |       <div class="p-2">
 83 |         <div>
 84 |           <input
 85 |             type="text"
 86 |             class="not-default p-2 w-full focus-visible:outline-none text-sm"
 87 |             v-model="searchTerm"
 88 |             placeholder="Search for commands..."
 89 |           />
 90 |         </div>
 91 | 
 92 |         <div class="py-6">
 93 |           <ul v-if="results?.length">
 94 |             <div class="text-xs p-2">Navigation</div>
 95 |             <li v-for="{ item } in results">
 96 |               <button
 97 |                 @click="item.action()"
 98 |                 class="not-default outline-none bg-transparent focus-visible:bg-light-300 rounded-lg transition-all p-2 my-0.5 w-full text-left text-sm"
 99 |               >
100 |                 {{ item.label }}
101 |               </button>
102 |             </li>
103 |           </ul>
104 |           <div v-else class="p-8 text-sm text-center">No results found.</div>
105 |         </div>
106 |       </div>
107 |     </Modal>
108 |   </div>
109 | </template>
110 | 


--------------------------------------------------------------------------------
/components/Drawer.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useFocusTrap } from "@vueuse/integrations/useFocusTrap"
 3 | 
 4 | const props = defineProps({ open: Boolean, confirmAction: Function })
 5 | const emits = defineEmits(["update:open"])
 6 | const el = ref()
 7 | onClickOutside(el, () => {
 8 |   emits("update:open", !props.open)
 9 | })
10 | const { activate, deactivate } = useFocusTrap(el)
11 | 
12 | onKeyStroke("Escape", () => emits("update:open", false))
13 | 
14 | watch(
15 |   () => props.open,
16 |   (n) => nextTick(() => (n ? activate() : deactivate())),
17 |   { immediate: true }
18 | )
19 | </script>
20 | 
21 | <template>
22 |   <transition name="slide-in-right">
23 |     <div v-if="open" class="fixed top-0 left-0 w-screen h-screen z-100 flex justify-end">
24 |       <div ref="el" class="inner w-full max-w-112 ml-8 bg-white rounded-xl shadow-xl overflow-hidden">
25 |         <slot>Content</slot>
26 |       </div>
27 |     </div>
28 |   </transition>
29 | </template>
30 | 


--------------------------------------------------------------------------------
/components/Drawer/EditPost.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { PropType } from "vue"
 3 | 
 4 | const props = defineProps({
 5 |   show: Boolean,
 6 |   settings: Object as PropType<{
 7 |     image: string
 8 |     active: boolean
 9 |     tags: string[]
10 |   }>,
11 | })
12 | const emits = defineEmits(["update:show"])
13 | const { settings } = toRefs(props)
14 | 
15 | watch(
16 |   () => props.show,
17 |   () => {
18 |     if (!props.show) {
19 |       const editorEl = document.querySelector(".content .ProseMirror") as HTMLDivElement
20 |       if (editorEl) editorEl.focus()
21 |     }
22 |   }
23 | )
24 | </script>
25 | 
26 | <template>
27 |   <Drawer :open="show" @update:open="emits('update:show', $event)">
28 |     <div class="flex flex-col px-4 py-12">
29 |       <h2 class="text-3xl font-bold">Settings</h2>
30 |       <div class="mt-8">
31 |         <Toggle class="mt-4" v-model="settings.active">Publish</Toggle>
32 |       </div>
33 | 
34 |       <div class="mt-8">
35 |         <label for="url">Cover image: </label>
36 |         <Upload class="mt-4" v-model="settings.image"></Upload>
37 |       </div>
38 | 
39 |       <div class="mt-8">
40 |         <label for="url">Tags: </label>
41 |         <TagsInput class="mt-4" v-model="settings.tags"></TagsInput>
42 |       </div>
43 |     </div>
44 |   </Drawer>
45 | </template>
46 | 


--------------------------------------------------------------------------------
/components/Footer.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const url = useUrl()
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div class="max-w-screen-lg mx-auto">
 7 |     <footer class="mt-12 py-6 border-t-2 border-light-700 flex flex-col sm:flex-row justify-between">
 8 |       <div>
 9 |         <NuxtLink class="flex items-center font-bold text-xl text-dark-300" to="/"
10 |           ><NuxtImg src="/banner.png" class="w-auto h-10 mr-4"></NuxtImg>
11 |         </NuxtLink>
12 |       </div>
13 |       <div class="mt-4 sm:mt-0 flex text-sm sm:text-base space-x-6">
14 |         <ul>
15 |           <h5 class="pr-10 mb-4 font-semibold text-dark-50">Menu</h5>
16 |           <li class="py-0.5">
17 |             <NuxtLink class="text-gray-400 hover:text-dark-300 transition" :to="`${url}/write`">Write</NuxtLink>
18 |           </li>
19 |           <li class="py-0.5">
20 |             <NuxtLink class="text-gray-400 hover:text-dark-300 transition" :to="`${url}/posts`">All Posts</NuxtLink>
21 |           </li>
22 |           <li class="py-0.5">
23 |             <NuxtLink class="text-gray-400 hover:text-dark-300 transition" :to="`${url}/login`">Login</NuxtLink>
24 |           </li>
25 |         </ul>
26 | 
27 |         <ul>
28 |           <h5 class="pr-10 mb-4 font-semibold text-dark-50">Open Source</h5>
29 |           <li class="py-0.5">
30 |             <NuxtLink
31 |               class="text-gray-400 hover:text-dark-300 transition"
32 |               to="https://github.com/zernonia/keypress"
33 |               target="_blank"
34 |               >GitHub</NuxtLink
35 |             >
36 |           </li>
37 |         </ul>
38 |       </div>
39 |     </footer>
40 |   </div>
41 | </template>
42 | 


--------------------------------------------------------------------------------
/components/Loader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="my-20 flex flex-col justify-center w-full items-center">
 3 |     <Logo class="w-12 h-12 animate-spin animate-duration-1500 animate-ease-in-out"></Logo>
 4 |     <div class="mt-12 font-medium text-gray-400 flex">
 5 |       <p class="mr-2">Tips:</p>
 6 |       <p>⌘ + K to search for commands</p>
 7 |     </div>
 8 |   </div>
 9 | </template>
10 | 


--------------------------------------------------------------------------------
/components/Logo.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts"></script>
 2 | 
 3 | <template>
 4 |   <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
 5 |     <path
 6 |       d="M0 50C0 8.825 8.825 0 50 0C91.175 0 100 8.825 100 50C100 91.175 91.175 100 50 100C8.825 100 0 91.175 0 50Z"
 7 |       fill="#2D2D2D"
 8 |     />
 9 |     <path
10 |       d="M29.4375 30.4688H46.25V72.9375H29.4375V30.4688ZM51.4375 42.0312C51.4375 37.4271 52.6042 34.3333 54.9375 32.75C57.1458 31.2708 61.3021 30.5312 67.4062 30.5312H70.5625V36.4375C70.5625 41.1458 69.3646 44.5 66.9688 46.5C64.5312 48.5 60.3333 49.5 54.375 49.5H51.4375V42.0312ZM51.4375 52.75H54.375C60.25 52.75 64.4479 53.9167 66.9688 56.25C69.3646 58.4792 70.5625 62 70.5625 66.8125V73H67.4062C61.4271 73 57.2708 72.1042 54.9375 70.3125C52.6042 68.5 51.4375 65.25 51.4375 60.5625V52.75Z"
11 |       fill="white"
12 |     />
13 |   </svg>
14 | </template>
15 | 


--------------------------------------------------------------------------------
/components/Modal.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useFocusTrap } from "@vueuse/integrations/useFocusTrap"
 3 | 
 4 | const props = defineProps({ open: Boolean, confirmAction: Function, innerClass: String })
 5 | const emits = defineEmits(["update:open"])
 6 | const el = ref()
 7 | onClickOutside(el, () => {
 8 |   emits("update:open", !props.open)
 9 | })
10 | const { activate, deactivate } = useFocusTrap(el, { immediate: true })
11 | 
12 | onKeyStroke("Escape", () => emits("update:open", false))
13 | 
14 | watch(
15 |   () => props.open,
16 |   (n) => nextTick(() => (n ? activate() : deactivate()))
17 | )
18 | </script>
19 | 
20 | <template>
21 |   <transition name="command-dialog">
22 |     <div v-if="open" class="fixed top-0 left-0 w-screen h-screen z-300 flex items-center justify-center">
23 |       <div
24 |         ref="el"
25 |         class="inner w-full mx-4 max-w-112 bg-white rounded-2xl shadow-xl overflow-hidden"
26 |         :class="innerClass"
27 |       >
28 |         <slot>Content</slot>
29 |       </div>
30 |     </div>
31 |   </transition>
32 | </template>
33 | 


--------------------------------------------------------------------------------
/components/Modal/Login.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const client = useSupabaseClient()
 3 | 
 4 | defineProps({
 5 |   show: Boolean,
 6 | })
 7 | const emits = defineEmits(["update:show"])
 8 | 
 9 | const signIn = async () => {
10 |   const { user } = await client.auth.signIn({ provider: "github" })
11 | }
12 | </script>
13 | 
14 | <template>
15 |   <Modal :open="show" @update:open="emits('update:show', $event)">
16 |     <div class="flex flex-col items-center px-6 py-12">
17 |       <h1 class="text-4xl font-bold text-center">Login</h1>
18 |       <button autofocus class="btn-primary w-max mt-6" @click="signIn">Login with GitHub</button>
19 |     </div>
20 |   </Modal>
21 | </template>
22 | 


--------------------------------------------------------------------------------
/components/Post/Card.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { stripHtml } from "string-strip-html";
 3 | import { format } from "date-fns";
 4 | import { PropType } from "vue";
 5 | import { Posts } from "~~/utils/types";
 6 | import { constructUrl } from "~~/utils/functions";
 7 | 
 8 | const props = defineProps({
 9 |   subdomain: Boolean,
10 |   post: Object as PropType<Posts>,
11 | });
12 | 
13 | const url = computed(() => constructUrl(props.post, props.subdomain));
14 | </script>
15 | 
16 | <template>
17 |   <NuxtLink class="group block" :target="subdomain ? '' : '_blank'" :to="url">
18 |     <div
19 |       class="p-4 md:p-6 my-4 flex flex-col-reverse md:flex-row bg-white shadow-none group-focus:shadow-xl group-focus:shadow-xl hover:shadow-xl shadow-gray-200 rounded-2xl transition-all"
20 |     >
21 |       <div class="w-full flex flex-col justify-between md:h-40">
22 |         <div>
23 |           <div v-if="!subdomain" class="flex items-center space-x-2">
24 |             <NuxtImg class="w-5 h-5 rounded-full" :src="post.profiles.avatar_url"></NuxtImg>
25 |             <h4 class="text-sm font-medium">{{ post.profiles.name }}</h4>
26 |             <div
27 |               v-if="post.featured"
28 |               class="px-2 py-1 rounded-lg bg-light-300 text-gray-400 !ml-6 text-sm font-semibold flex items-center"
29 |             >
30 |               <div class="i-mdi-star mr-1"></div>
31 |               <span>Featured</span>
32 |             </div>
33 |           </div>
34 | 
35 |           <h1 class="mt-2 font-semibold text-2xl">{{ post.title }}</h1>
36 |           <p class="mt-1 text-gray-400">{{ stripHtml(post.body).result.slice(0, 120) }}...</p>
37 |         </div>
38 | 
39 |         <div class="mt-4 text-sm text-gray-400 place-items-end">
40 |           <span> {{ format(new Date(post.created_at), "MMM d") }}</span>
41 |           <NuxtLink v-if="post.tags" class="ml-2 bg-light-300 px-2 py-1 rounded">{{ post.tags?.[0] }}</NuxtLink>
42 |         </div>
43 |       </div>
44 |       <NuxtImg
45 |         class="w-full md:w-40 h-40 md:ml-12 mb-6 md:mb-0 rounded-xl flex-shrink-0"
46 |         v-if="post.cover_img"
47 |         :src="post.cover_img"
48 |       ></NuxtImg>
49 |     </div>
50 |   </NuxtLink>
51 | </template>
52 | 


--------------------------------------------------------------------------------
/components/TagsInput.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { Tags } from "~~/utils/types"
 3 | import { PropType } from "vue"
 4 | import Multiselect from "@vueform/multiselect"
 5 | 
 6 | const props = defineProps({
 7 |   modelValue: { type: Object as PropType<string[]>, default: [] },
 8 |   id: String,
 9 | })
10 | const emits = defineEmits(["update:modelValue"])
11 | 
12 | const client = useSupabaseClient()
13 | const { data: tags } = useAsyncData("tags", async () => {
14 |   const { data } = await client.from<Tags>("tags_view").select("*")
15 |   return data.map((i) => i.name)
16 | })
17 | </script>
18 | 
19 | <template>
20 |   <div>
21 |     <Multiselect
22 |       v-model="modelValue"
23 |       @change="emits('update:modelValue', $event)"
24 |       :options="tags ?? []"
25 |       createOption
26 |       mode="tags"
27 |       placeholder="Add tags"
28 |       :close-on-select="false"
29 |       :searchable="true"
30 |       :classes="{
31 |         container: 'relative mx-auto p-2 w-full flex items-center justify-end cursor-pointer rounded-2xl bg-light-300',
32 |         tag: 'bg-dark-300 text-white text-sm font-semibold py-0.5 pl-2 rounded-lg mr-1.5 mb-1.5 flex items-center whitespace-nowrap rtl:pl-0 rtl:pr-2 rtl:mr-0 rtl:ml-1',
33 |         tagsSearch:
34 |           'not-default bg-transparent absolute inset-0 border-0 focus:ring-0 outline-none appearance-none p-0 text-base font-sans box-border w-full',
35 |         tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px',
36 |         placeholder:
37 |           'flex items-center h-full absolute left-2 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
38 |         dropdown:
39 |           'max-h-60 absolute -left-px -right-px bottom-0 transform translate-y-full -mt-px py-2 overflow-y-scroll z-50 bg-light-300 flex flex-col rounded-b-2xl shadow-lg',
40 |         dropdownHidden: '!hidden',
41 |         optionPointed: 'text-dark-300 bg-light-700',
42 |         optionSelected: 'text-dark-300 bg-light-700',
43 |         noResults: 'py-2 px-3 text-gray-400 text-center font-semibold',
44 |       }"
45 |     />
46 |   </div>
47 | </template>
48 | 
49 | <style src="@vueform/multiselect/themes/default.css"></style>
50 | 
51 | <style>
52 | .is-open {
53 |   @apply rounded-b-none transition;
54 | }
55 | .is-active {
56 |   @apply ring-3 ring-gray-400;
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/components/Tiptap.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { useEditor, EditorContent } from "@tiptap/vue-3"
 3 | import StarterKit from "@tiptap/starter-kit"
 4 | import Underline from "@tiptap/extension-underline"
 5 | import Image from "@tiptap/extension-image"
 6 | import Focus from "@tiptap/extension-focus"
 7 | 
 8 | import Commands from "~~/utils/tiptap/commands"
 9 | import suggestion from "~~/utils/tiptap/suggestion"
10 | import HardBreak from "~~/utils/tiptap/hardbreak"
11 | import Code from "~~/utils/tiptap/code"
12 | import Link from "~~/utils/tiptap/link"
13 | import Placeholder from "~~/utils/tiptap/placeholder"
14 | import Upload from "~~/utils/tiptap/upload"
15 | import Iframe from "~~/utils/tiptap/iframe"
16 | import Move from "~~/utils/tiptap/move"
17 | 
18 | const props = defineProps<{
19 |   modelValue: string
20 |   editable?: boolean
21 | }>()
22 | const emit = defineEmits(["update:modelValue"])
23 | 
24 | const editor = useEditor({
25 |   content: props.modelValue ?? "",
26 |   extensions: [
27 |     Link,
28 |     StarterKit,
29 |     Image,
30 |     Underline,
31 |     Focus,
32 |     Upload,
33 |     HardBreak,
34 |     Code,
35 |     Placeholder,
36 |     Iframe,
37 |     Move,
38 |     Commands.configure({
39 |       suggestion,
40 |     }),
41 |   ],
42 |   editable: props.editable ?? false,
43 |   onUpdate(props) {
44 |     emit("update:modelValue", props.editor.getHTML())
45 |   },
46 | })
47 | 
48 | watch(
49 |   () => props.modelValue,
50 |   (newValue) => {
51 |     const isSame = editor.value.getHTML() === newValue
52 |     if (isSame) return
53 | 
54 |     editor.value.commands.setContent(newValue, false)
55 |   }
56 | )
57 | </script>
58 | 
59 | <template>
60 |   <div>
61 |     <TiptapBubble :editor="editor"></TiptapBubble>
62 |     <EditorContent class="content" :editor="editor" />
63 |   </div>
64 | </template>
65 | 
66 | <style lang="postcss">
67 | .ProseMirror {
68 |   @apply p-2 focus:outline-none;
69 | }
70 | 
71 | .ProseMirror .is-empty::before {
72 |   content: attr(data-placeholder);
73 |   float: left;
74 |   pointer-events: none;
75 |   height: 0;
76 |   @apply text-gray-300;
77 | }
78 | 
79 | @keyframes highlight {
80 |   0% {
81 |     @apply bg-light-700;
82 |   }
83 |   100% {
84 |     @apply bg-transparent;
85 |   }
86 | }
87 | 
88 | .has-focus {
89 |   animation: highlight 0.75s ease-out;
90 |   @apply rounded;
91 | }
92 | </style>
93 | 


--------------------------------------------------------------------------------
/components/Tiptap/Bubble.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | // bubble menu: https://tiptap.dev/api/extensions/bubble-menu
 3 | import { BubbleMenu } from "@tiptap/vue-3"
 4 | import { PropType } from "vue"
 5 | import type { Editor } from "@tiptap/core"
 6 | import type { NodeSelection } from "prosemirror-state"
 7 | import { TextSelection } from "prosemirror-state"
 8 | 
 9 | const props = defineProps({
10 |   editor: Object as PropType<Editor>,
11 | })
12 | 
13 | type NodeType = "image" | "text" | "video" | "iframe"
14 | const nodeType = computed<NodeType | undefined>(() => {
15 |   const selection = props.editor.state.selection as NodeSelection
16 |   const isImage = selection.node?.type.name === "image"
17 |   const isIframe = selection.node?.type.name === "iframe"
18 |   const isText = selection instanceof TextSelection
19 |   if (isImage) return "image"
20 |   if (isIframe) return "iframe"
21 |   if (isText) return "text"
22 |   return undefined
23 | })
24 | </script>
25 | 
26 | <template>
27 |   <BubbleMenu :editor="editor" :tippy-options="{ duration: 100 }" v-if="editor">
28 |     <div class="p-2 rounded-xl shadow-md bg-white">
29 |       <div v-if="nodeType === 'text'" class="flex items-center space-x-1 text-xl text-gray-400">
30 |         <button
31 |           class="bubble-item"
32 |           @click="editor.chain().focus().toggleBold().run()"
33 |           :class="{ 'is-active': editor.isActive('bold') }"
34 |         >
35 |           <div class="i-ic-round-format-bold"></div>
36 |         </button>
37 |         <button
38 |           class="bubble-item"
39 |           @click="editor.chain().focus().toggleItalic().run()"
40 |           :class="{ 'is-active': editor.isActive('italic') }"
41 |         >
42 |           <div class="i-ic-round-format-italic"></div>
43 |         </button>
44 |         <button
45 |           class="bubble-item"
46 |           @click="editor.chain().focus().toggleStrike().run()"
47 |           :class="{ 'is-active': editor.isActive('strike') }"
48 |         >
49 |           <div class="i-ic-round-format-strikethrough"></div>
50 |         </button>
51 |         <button
52 |           class="bubble-item"
53 |           @click="editor.chain().focus().toggleUnderline().run()"
54 |           :class="{ 'is-active': editor.isActive('underline') }"
55 |         >
56 |           <div class="i-ic-round-format-underlined"></div>
57 |         </button>
58 |       </div>
59 | 
60 |       <div v-if="nodeType === 'image'">
61 |         <button class="bubble-item" @click="editor.commands.openModal('image')">Edit</button>
62 |       </div>
63 |       <div v-if="nodeType === 'iframe'">
64 |         <button class="bubble-item" @click="editor.commands.openModal('iframe')">Edit</button>
65 |         <button>Focus</button>
66 |       </div>
67 |     </div>
68 |   </BubbleMenu>
69 | </template>
70 | 
71 | <style lang="postcss">
72 | .bubble-item {
73 |   @apply focus:bg-light-500 focus:text-dark-300 p-1 rounded-lg transition;
74 | }
75 | .is-active {
76 |   @apply !text-dark-300;
77 | }
78 | </style>
79 | 


--------------------------------------------------------------------------------
/components/Tiptap/CommandList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="bg-white px-2 py-4 rounded-xl shadow-xl flex flex-col w-72">
 3 |     <template v-if="items.length">
 4 |       <button
 5 |         class="p-2 flex flex-col text-sm text-left rounded-lg bg-transparent transition"
 6 |         :class="{ '!bg-light-300': index === selectedIndex }"
 7 |         v-for="(item, index) in items"
 8 |         :key="index"
 9 |         @click="selectItem(index)"
10 |       >
11 |         <span>{{ item.title }}</span>
12 |         <span class="opacity-40 text-xs">{{ item.description }}</span>
13 |       </button>
14 |     </template>
15 |     <div class="item" v-else>No result</div>
16 |   </div>
17 | </template>
18 | 
19 | <script setup lang="ts">
20 | import { PropType } from "vue"
21 | 
22 | interface Item {
23 |   title: string
24 |   description: string
25 | }
26 | 
27 | const props = defineProps({
28 |   items: {
29 |     type: Array as PropType<Item[]>,
30 |     required: true,
31 |   },
32 |   command: {
33 |     type: Function,
34 |     required: true,
35 |   },
36 | })
37 | const { items } = toRefs(props)
38 | const selectedIndex = ref(0)
39 | 
40 | watch(items, () => (selectedIndex.value = 0))
41 | 
42 | const selectItem = (index: number) => {
43 |   const item = items.value[index]
44 | 
45 |   if (item) {
46 |     props.command(item)
47 |   }
48 | }
49 | 
50 | const onKeyDown = (event: KeyboardEvent) => {
51 |   if (event.key === "ArrowUp") {
52 |     selectedIndex.value = (selectedIndex.value + items.value.length - 1) % items.value.length
53 |     return true
54 |   }
55 |   if (event.key === "ArrowDown") {
56 |     selectedIndex.value = (selectedIndex.value + 1) % items.value.length
57 |     return true
58 |   }
59 |   if (event.key === "Enter") {
60 |     selectItem(selectedIndex.value)
61 |     return true
62 |   } else return
63 | }
64 | 
65 | defineExpose({
66 |   onKeyDown,
67 | })
68 | </script>
69 | 


--------------------------------------------------------------------------------
/components/Tiptap/ModalIframe.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { Editor } from "@tiptap/core"
 3 | import { PropType } from "vue"
 4 | 
 5 | const props = defineProps({
 6 |   show: Boolean,
 7 |   editor: Object as PropType<Editor>,
 8 | })
 9 | const open = ref(props.show)
10 | 
11 | const url = ref("")
12 | const save = () => {
13 |   if (!url.value?.match(/[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)?/gi)) return
14 | 
15 |   props.editor
16 |     .chain()
17 |     .focus()
18 |     .setIframe({
19 |       src: url.value,
20 |     })
21 |     .run()
22 |   open.value = false
23 | }
24 | 
25 | watch(open, () => {
26 |   if (!open.value) {
27 |     const editorEl = document.querySelector(".content .ProseMirror") as HTMLDivElement
28 |     if (editorEl) editorEl.focus()
29 |   }
30 | })
31 | </script>
32 | 
33 | <template>
34 |   <Modal v-model:open="open">
35 |     <div class="flex flex-col p-6">
36 |       <h2 class="text-3xl font-bold">Add iframe</h2>
37 | 
38 |       <div class="flex items-center my-6">
39 |         <label for="url" class="mr-4 flex-shrink-0">URL :</label>
40 |         <input type="url" name="url" id="url" placeholder="https://supabase.com" v-model="url" />
41 |       </div>
42 | 
43 |       <div class="flex justify-end">
44 |         <button class="btn-plain" @click="open = false">Cancel</button>
45 |         <Button class="btn-primary ml-2" @click="save">Save</Button>
46 |       </div>
47 |     </div>
48 |   </Modal>
49 | </template>
50 | 


--------------------------------------------------------------------------------
/components/Tiptap/ModalImage.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { Editor } from "@tiptap/core"
 3 | import { PropType } from "vue"
 4 | 
 5 | const props = defineProps({
 6 |   show: Boolean,
 7 |   editor: Object as PropType<Editor>,
 8 | })
 9 | const isVisible = ref(props.show)
10 | 
11 | const alt = ref("")
12 | const image = ref("")
13 | const isLoading = ref(false)
14 | 
15 | const save = async () => {
16 |   if (!image.value) return
17 |   isLoading.value = true
18 | 
19 |   props.editor
20 |     .chain()
21 |     .focus()
22 |     .setImage({
23 |       src: image.value,
24 |       alt: alt.value,
25 |     })
26 |     .run()
27 | 
28 |   isLoading.value = false
29 |   isVisible.value = false
30 | }
31 | 
32 | watch(isVisible, () => {
33 |   if (!isVisible.value) {
34 |     const editorEl = document.querySelector(".content .ProseMirror") as HTMLDivElement
35 |     if (editorEl) editorEl.focus()
36 |   }
37 | })
38 | </script>
39 | 
40 | <template>
41 |   <Modal v-model:open="isVisible">
42 |     <div class="flex flex-col p-6">
43 |       <h2 class="text-3xl font-bold">Add image</h2>
44 | 
45 |       <div class="my-6">
46 |         <Upload v-model="image"></Upload>
47 | 
48 |         <div class="mt-4 flex items-center">
49 |           <input type="text" name="alt-name" id="alt-name" placeholder="alternate" v-model="alt" />
50 |         </div>
51 |       </div>
52 | 
53 |       <div class="flex justify-end">
54 |         <Button class="btn-primary ml-2" :loading="isLoading" @click="save">Save</Button>
55 |         <button class="btn-plain" @click="isVisible = false">Cancel</button>
56 |       </div>
57 |     </div>
58 |   </Modal>
59 | </template>
60 | 


--------------------------------------------------------------------------------
/components/TiptapHeading.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { useEditor, EditorContent, Extension } from "@tiptap/vue-3"
 3 | import Document from "@tiptap/extension-document"
 4 | import Text from "@tiptap/extension-text"
 5 | import Heading from "@tiptap/extension-heading"
 6 | import Placeholder from "@tiptap/extension-placeholder"
 7 | import Focus from "@tiptap/extension-focus"
 8 | import History from "@tiptap/extension-history"
 9 | 
10 | const props = defineProps<{
11 |   modelValue: string
12 | }>()
13 | const emit = defineEmits(["update:modelValue"])
14 | 
15 | const focusNextEditor = () => {
16 |   const editors = document.querySelectorAll(".ProseMirror")
17 |   let nextEditor = editors.item(1) as HTMLElement
18 |   if (nextEditor) {
19 |     nextEditor.focus()
20 |     return true
21 |   }
22 | }
23 | const Enter = Extension.create({
24 |   addKeyboardShortcuts() {
25 |     return {
26 |       Enter: focusNextEditor,
27 |       "Mod-Enter": focusNextEditor,
28 |       ArrowDown: focusNextEditor,
29 |     }
30 |   },
31 | })
32 | 
33 | const CustomDocument = Document.extend({
34 |   content: "heading",
35 | })
36 | const editor = useEditor({
37 |   content: props.modelValue ?? "",
38 |   extensions: [
39 |     CustomDocument,
40 |     Text,
41 |     Heading,
42 |     Focus,
43 |     Enter,
44 |     History,
45 |     Placeholder.configure({
46 |       placeholder: "What’s the title?",
47 |     }),
48 |   ],
49 |   autofocus: true,
50 |   onUpdate(props) {
51 |     emit("update:modelValue", props.editor.getJSON().content?.[0].content?.[0].text)
52 |   },
53 | })
54 | 
55 | watch(
56 |   () => props.modelValue,
57 |   (newValue) => {
58 |     const title = editor.value.getJSON().content?.[0].content?.[0].text
59 |     const isSame = title === newValue
60 |     if (isSame) return
61 | 
62 |     editor.value.commands.setContent(newValue, false)
63 |   }
64 | )
65 | </script>
66 | 
67 | <template>
68 |   <EditorContent :editor="editor" />
69 | </template>
70 | 


--------------------------------------------------------------------------------
/components/Toggle.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const props = defineProps({
 3 |   modelValue: Boolean,
 4 |   id: String,
 5 | })
 6 | const emits = defineEmits(["update:modelValue"])
 7 | 
 8 | const emitData = (ev: InputEvent) => {
 9 |   //@ts-ignore
10 |   emits("update:modelValue", ev.target.checked)
11 | }
12 | </script>
13 | 
14 | <template>
15 |   <label :for="id" class="inline-flex relative items-center cursor-pointer">
16 |     <input
17 |       type="checkbox"
18 |       class="peer h-1px w-1px absolute border-0 outline-none"
19 |       v-model="modelValue"
20 |       :id="id"
21 |       @change="emitData"
22 |     />
23 |     <div
24 |       class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-3 peer-focus:ring-gray-400 rounded-full peer-checked:bg-dark-300 transition"
25 |     ></div>
26 |     <div
27 |       class="peer-checked:translate-x-full peer-checked:border-white absolute top-[2px] left-[2px] bg-white border-gray-400 rounded-full h-5 w-5 transition-all"
28 |     ></div>
29 |     <span class="ml-2">
30 |       <slot>Toggle</slot>
31 |     </span>
32 |   </label>
33 | </template>
34 | 


--------------------------------------------------------------------------------
/components/Upload.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const props = defineProps({
 3 |   modelValue: String,
 4 | })
 5 | const emits = defineEmits(["update:modelValue"])
 6 | 
 7 | const client = useSupabaseClient()
 8 | const user = useSupabaseUser()
 9 | const { files, open: openFileDialog, reset } = useFileDialog({ accept: "image/*" })
10 | 
11 | const { base64 } = useBase64(computed(() => files.value?.item?.(0)))
12 | const imageSrc = ref(props.modelValue)
13 | 
14 | const isUploading = ref(false)
15 | const upload = async (file: File) => {
16 |   isUploading.value = true
17 |   const filename = `${user.value?.id}/${file.name}`
18 |   const { data, error } = await client.storage.from("posts").upload(filename, file, { cacheControl: "3600" })
19 | 
20 |   const { publicURL } = client.storage.from("posts").getPublicUrl(data?.Key?.replace("posts/", "") ?? filename)
21 |   emits("update:modelValue", publicURL)
22 |   isUploading.value = false
23 | }
24 | 
25 | watch(files, async (n) => {
26 |   if (n.length) {
27 |     const file = n.item(0)
28 |     upload(file)
29 |   }
30 | })
31 | watch(base64, (n) => (imageSrc.value = n))
32 | </script>
33 | 
34 | <template>
35 |   <button
36 |     :disabled="isUploading"
37 |     accept="image/*"
38 |     type="button"
39 |     class="block w-full p-0 ring-3 ring-transparent hover:ring-gray-400 focus:ring-gray-400 rounded-2xl transition overflow-hidden"
40 |     @click="openFileDialog()"
41 |   >
42 |     <div class="h-64 w-full bg-light-300 flex items-center justify-center">
43 |       <img class="w-full h-full object-scale-down" :src="imageSrc" v-if="imageSrc" />
44 |       <p v-else class="text-gray-400">Press 'Enter' to upload image</p>
45 |     </div>
46 |   </button>
47 | </template>
48 | 


--------------------------------------------------------------------------------
/composables/dashboard.ts:
--------------------------------------------------------------------------------
 1 | import type { Profiles } from "~~/utils/types"
 2 | import type { Ref } from "vue"
 3 | 
 4 | export const useProfile = () => useState<Profiles>("profile", () => null)
 5 | 
 6 | export const useProfileSave = (payload: Ref<Partial<Profiles>>) => {
 7 |   const user = useSupabaseUser()
 8 |   const client = useSupabaseClient()
 9 | 
10 |   const isSaving = ref(false)
11 | 
12 |   const save = async () => {
13 |     // validate input here (if any)
14 |     isSaving.value = true
15 | 
16 |     console.log("save profile settings", payload.value)
17 |     const { data } = await client
18 |       .from<Profiles>("profiles")
19 |       .upsert({ ...payload.value, id: user.value?.id })
20 |       .single()
21 |     console.log({ data })
22 |     isSaving.value = false
23 |   }
24 | 
25 |   useMagicKeys({
26 |     passive: false,
27 |     onEventFired(e) {
28 |       if ((e.ctrlKey || e.metaKey) && e.key === "s" && e.type === "keydown") {
29 |         e.preventDefault()
30 |         save()
31 |       }
32 |     },
33 |   })
34 | 
35 |   return {
36 |     save,
37 |     isSaving,
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/composables/head.ts:
--------------------------------------------------------------------------------
 1 | import { ComputedRef } from "vue"
 2 | 
 3 | export const useCustomHead = (
 4 |   title?: string | ComputedRef<string>,
 5 |   description?: string | ComputedRef<string>,
 6 |   image?: string | ComputedRef<string>
 7 | ) => {
 8 |   useHead({
 9 |     title,
10 |     meta: [
11 |       {
12 |         name: "description",
13 |         content:
14 |           description ?? "An open-source blogging platform + free custom domains. Powered by Nuxt 3, Supabase & Vercel",
15 |       },
16 |       { name: "twitter:card", content: "summary_large_image" },
17 |       { name: "twitter:site", content: "@zernonia" },
18 |       { name: "twitter:title", content: title ?? "KeyPress | Write your blog with keyboard only experience" },
19 |       {
20 |         name: "twitter:description",
21 |         content:
22 |           description ?? "An open-source blogging platform + free custom domains. Powered by Nuxt 3, Supabase & Vercel",
23 |       },
24 |       { name: "twitter:image", content: image ?? "https://keypress.blog/og.png" },
25 |       { property: "og:type", content: "website" },
26 |       { property: "og:title", content: title ?? "KeyPress | Write your blog with keyboard only experience" },
27 |       { property: "og:url", content: "https://keypress.blog/" },
28 |       { property: "og:image", content: image ?? "https://keypress.blog/og.png" },
29 |       { property: "og:image:secure_url", content: image ?? "https://keypress.blog/og.png" },
30 |       { property: "og:image:type", content: "image/png" },
31 |       {
32 |         property: "og:description",
33 |         content:
34 |           description ?? "An open-source blogging platform + free custom domains. Powered by Nuxt 3, Supabase & Vercel",
35 |       },
36 |     ],
37 |   })
38 | }
39 | 


--------------------------------------------------------------------------------
/composables/subdomain.ts:
--------------------------------------------------------------------------------
1 | import type { Profiles } from "~~/utils/types"
2 | 
3 | export const useSubdomain = () => useState<string>("subdomain", () => null)
4 | export const useSubdomainProfile = () => useState<Profiles>("subdomain-profile", () => null)
5 | 


--------------------------------------------------------------------------------
/composables/url.ts:
--------------------------------------------------------------------------------
1 | export const useUrl = () => (process.dev ? "http://localhost:3000" : "https://keypress.blog")
2 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | const user = useSupabaseUser()
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div class="p-4 bg-light-300 min-h-screen w-full flex flex-col">
 7 |     <div class="max-w-screen-lg mx-auto w-full">
 8 |       <nav class="flex justify-between items-center">
 9 |         <NuxtLink to="/">
10 |           <Logo class="w-12 h-12"></Logo>
11 |         </NuxtLink>
12 | 
13 |         <div class="flex items-center">
14 |           <Command class="mr-4"></Command>
15 |           <NuxtLink to="/login" v-if="!user">Login</NuxtLink>
16 |           <div>
17 |             <NuxtImg
18 |               v-if="user?.user_metadata?.avatar_url"
19 |               class="w-10 h-10 rounded-full"
20 |               :src="user?.user_metadata?.avatar_url"
21 |               :alt="user?.user_metadata?.full_name"
22 |             />
23 |           </div>
24 |         </div>
25 |       </nav>
26 |       <slot />
27 |     </div>
28 |   </div>
29 | </template>
30 | 


--------------------------------------------------------------------------------
/layouts/user.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | const user = useSupabaseUser();
 3 | const url = useUrl();
 4 | </script>
 5 | 
 6 | <template>
 7 |   <div class="p-4 bg-light-300 min-h-screen w-full flex flex-col">
 8 |     <div class="max-w-screen-lg mx-auto w-full">
 9 |       <nav class="flex justify-between items-center">
10 |         <NuxtLink to="/">
11 |           <Logo class="w-12 h-12"></Logo>
12 |         </NuxtLink>
13 | 
14 |         <div class="flex items-center">
15 |           <Command class="mr-4"></Command>
16 |           <NuxtLink rel="noopener" :to="`${url}/login`" v-if="!user">Login</NuxtLink>
17 |           <div>
18 |             <NuxtImg
19 |               v-if="user?.user_metadata?.avatar_url"
20 |               class="w-10 h-10 rounded-full"
21 |               :src="user?.user_metadata?.avatar_url"
22 |               :alt="user?.user_metadata?.full_name"
23 |             />
24 |           </div>
25 |         </div>
26 |       </nav>
27 | 
28 |       <div class="min-h-screen">
29 |         <slot />
30 |       </div>
31 | 
32 |       <Footer></Footer>
33 |     </div>
34 |   </div>
35 | </template>
36 | 


--------------------------------------------------------------------------------
/license.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 zernonia
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/middleware/auth.ts:
--------------------------------------------------------------------------------
1 | export default defineNuxtRouteMiddleware((to, from) => {
2 |   const user = useSupabaseUser()
3 |   if (!user.value && to.path !== "/write") {
4 |     return navigateTo("/login")
5 |   }
6 | })
7 | 


--------------------------------------------------------------------------------
/modules/og.ts:
--------------------------------------------------------------------------------
 1 | import { defineNuxtModule } from "@nuxt/kit"
 2 | import { copyFile, cp } from "fs/promises"
 3 | 
 4 | export default defineNuxtModule({
 5 |   setup(options, nuxt) {
 6 |     nuxt.hook("close", async () => {
 7 |       await cp("public/fonts", ".vercel/output/functions/__nitro.func/public/fonts", { recursive: true })
 8 |     })
 9 |   },
10 | })
11 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | import transformerDirective from "@unocss/transformer-directives"
 2 | 
 3 | // https://v3.nuxtjs.org/api/configuration/nuxt.config
 4 | export default defineNuxtConfig({
 5 |   modules: ["@unocss/nuxt", "@nuxtjs/supabase", "@vueuse/nuxt", "@nuxt/image-edge", "~~/modules/og"],
 6 |   css: ["@unocss/reset/tailwind.css", "~~/assets/main.css"],
 7 |   runtimeConfig: {
 8 |     public: {
 9 |       UMAMI_WEBSITE_ID: process.env.UMAMI_WEBSITE_ID,
10 |     },
11 |   },
12 |   unocss: {
13 |     // presets
14 |     uno: true, // enabled `@unocss/preset-uno`
15 |     icons: true, // enabled `@unocss/preset-icons`,
16 |     typography: {
17 |       cssExtend: {
18 |         h1: {
19 |           "font-weight": 700,
20 |         },
21 |         img: {
22 |           "border-radius": "1.5rem",
23 |         },
24 |         pre: {
25 |           "border-radius": "1.5rem",
26 |           background: "white !important",
27 |         },
28 |         iframe: {
29 |           height: "400px",
30 |           "border-radius": "1.5rem",
31 |         },
32 |         "p code": {
33 |           padding: "0.25rem 0.5rem",
34 |           "border-radius": "0.35rem",
35 |           "background-color": "#ececec",
36 |         },
37 |         "code::before": {
38 |           content: "''",
39 |         },
40 |         "code::after": {
41 |           content: "''",
42 |         },
43 |       },
44 |     },
45 |     transformers: [transformerDirective({ enforce: "pre" })], // enabled `@unocss/transformer-directives`,
46 |     safelist: [
47 |       "ic-round-format-bold",
48 |       "ic-round-format-underlined",
49 |       "ic-round-format-strikethrough",
50 |       "ic-round-format-italic",
51 |     ],
52 |     // core options
53 |     shortcuts: [
54 |       {
55 |         btn: " text-sm md:text-base font-medium rounded-2xl py-2 px-4 transition ring-3 ring-transparent disabled:opacity-50 relative inline-flex justify-center items-center shadow-none",
56 |         "btn-plain": "btn font-semibold text-gray-400 focus:text-dark-50 hover:text-dark-50",
57 |         "btn-primary": "btn bg-dark-300 text-white focus:ring-gray-400 focus:shadow-xl",
58 |         "btn-secondary": "btn bg-white hover:bg-gray-100 focus:ring-gray-100",
59 |         "btn-danger": "btn bg-red-500 text-white hover:bg-red-600 focus:ring-red-300",
60 |       },
61 |     ],
62 |     rules: [],
63 |   },
64 |   image: {
65 |     domains: ["avatars0.githubusercontent.com", "avatars.githubusercontent.com/", "images.unsplash.com/"],
66 |   },
67 |   build: {
68 |     transpile: ["@tiptap/extension-link", "@tiptap/extension-placeholder", "@tiptap/extension-document"],
69 |   },
70 |   nitro: {
71 |     preset: "vercel",
72 |   },
73 | })
74 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "build": "nuxt build",
 5 |     "dev": "nuxt dev",
 6 |     "generate": "nuxt generate",
 7 |     "preview": "nuxt preview",
 8 |     "postinstall": "nuxt prepare"
 9 |   },
10 |   "devDependencies": {
11 |     "@iconify-json/ic": "^1.1.9",
12 |     "@iconify-json/mdi": "^1.1.9",
13 |     "@nuxt/image-edge": "^1.0.0-27719579.87dcdf2",
14 |     "@nuxtjs/supabase": "^0.1.25",
15 |     "@unocss/nuxt": "^0.45.6",
16 |     "@unocss/preset-icons": "^0.45.6",
17 |     "@unocss/preset-typography": "^0.45.8",
18 |     "@unocss/preset-uno": "^0.45.6",
19 |     "@unocss/reset": "^0.45.6",
20 |     "@unocss/transformer-directives": "^0.45.6",
21 |     "@vueuse/core": "^9.1.0",
22 |     "@vueuse/integrations": "^9.3.0",
23 |     "@vueuse/nuxt": "^9.1.0",
24 |     "nuxt": "3.0.0-rc.11"
25 |   },
26 |   "dependencies": {
27 |     "@resvg/resvg-js": "^2.1.0",
28 |     "@tiptap/extension-bubble-menu": "^2.0.0-beta.199",
29 |     "@tiptap/extension-code-block": "^2.0.0-beta.199",
30 |     "@tiptap/extension-code-block-lowlight": "^2.0.0-beta.199",
31 |     "@tiptap/extension-focus": "^2.0.0-beta.199",
32 |     "@tiptap/extension-image": "^2.0.0-beta.199",
33 |     "@tiptap/extension-link": "^2.0.0-beta.199",
34 |     "@tiptap/extension-placeholder": "^2.0.0-beta.199",
35 |     "@tiptap/extension-underline": "^2.0.0-beta.199",
36 |     "@tiptap/starter-kit": "^2.0.0-beta.199",
37 |     "@tiptap/suggestion": "^2.0.0-beta.199",
38 |     "@tiptap/vue-3": "^2.0.0-beta.199",
39 |     "@vueform/multiselect": "^2.5.6",
40 |     "date-fns": "^2.29.3",
41 |     "focus-trap": "^7.0.0",
42 |     "fuse.js": "^6.6.2",
43 |     "lowlight": "^2.7.0",
44 |     "prosemirror-tables": "^1.2.5",
45 |     "prosemirror-utils": "^0.9.6",
46 |     "satori": "^0.0.38",
47 |     "slugify": "^1.6.5",
48 |     "string-strip-html": "^11.6.10"
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/pages/dashboard.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { Profiles } from "~~/utils/types"
 3 | 
 4 | const user = useSupabaseUser()
 5 | const client = useSupabaseClient()
 6 | const profile = useProfile()
 7 | 
 8 | const { pending } = useAsyncData(
 9 |   "profile",
10 |   async () => {
11 |     const { data } = await client
12 |       .from<Profiles>("profiles")
13 |       .select("*, domains(url, active), posts(id, title, created_at)")
14 |       .order("created_at", { ascending: false, foreignTable: "posts" })
15 |       .eq("id", user.value?.id)
16 |       .maybeSingle()
17 | 
18 |     profile.value = data
19 |     return data
20 |   },
21 |   { server: false }
22 | )
23 | 
24 | useCustomHead("Dashboard")
25 | 
26 | definePageMeta({
27 |   middleware: "auth",
28 | })
29 | </script>
30 | 
31 | <template>
32 |   <div class="my-12">
33 |     <h2 class="text-3xl font-bold">Dashboard</h2>
34 | 
35 |     <div class="flex">
36 |       <aside class="flex-shrink-0 w-72 my-8">
37 |         <ul>
38 |           <li class="my-2"><NuxtLink to="/dashboard/posts">Posts</NuxtLink></li>
39 |           <li class="my-2"><NuxtLink to="/dashboard/profile">Profile</NuxtLink></li>
40 |           <li class="my-2"><NuxtLink to="/dashboard/domain">Domain</NuxtLink></li>
41 |         </ul>
42 |       </aside>
43 |       <Loader v-if="pending"></Loader>
44 |       <NuxtPage v-else></NuxtPage>
45 |     </div>
46 |   </div>
47 | </template>
48 | 


--------------------------------------------------------------------------------
/pages/dashboard/domain.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | const profile = useProfile()
  3 | 
  4 | const payload = ref({ subdomain: profile.value.subdomain })
  5 | const isSaving = ref(false)
  6 | const { save } = useProfileSave(payload)
  7 | const saveDomain = async () => {
  8 |   // validate here
  9 |   try {
 10 |     isSaving.value = true
 11 | 
 12 |     // add domain and check first
 13 |     const data = await $fetch("/api/add-domain", {
 14 |       method: "POST",
 15 |       body: {
 16 |         domain: payload.value.subdomain,
 17 |       },
 18 |     })
 19 |     console.log(data)
 20 | 
 21 |     await Promise.all([save(), checkDomain()])
 22 |   } catch (err) {
 23 |     console.log(err)
 24 |   } finally {
 25 |     isSaving.value = false
 26 |   }
 27 | }
 28 | 
 29 | const isCheckingDomain = ref(false)
 30 | const isValid = ref(false)
 31 | const checkDomain = async () => {
 32 |   isCheckingDomain.value = true
 33 |   const { valid } = await $fetch("/api/check-domain", {
 34 |     method: "POST",
 35 |     body: {
 36 |       domain: payload.value.subdomain,
 37 |     },
 38 |   })
 39 |   isValid.value = valid
 40 |   isCheckingDomain.value = false
 41 | }
 42 | 
 43 | onMounted(() => {
 44 |   if (profile.value.domains.active) {
 45 |     isValid.value = true
 46 |   } else if (!payload.value.subdomain) {
 47 |     isValid.value = false
 48 |   } else {
 49 |     checkDomain()
 50 |   }
 51 | })
 52 | </script>
 53 | 
 54 | <template>
 55 |   <div class="w-full">
 56 |     <div class="flex w-full justify-end">
 57 |       <Button :loading="isSaving" @click="saveDomain" class="mb-8 btn-primary"
 58 |         >Save <span class="ml-2">⌘S</span></Button
 59 |       >
 60 |     </div>
 61 | 
 62 |     <div class="flex items-center">
 63 |       <label for="domain" class="flex-shrink-0 mr-2">Domain :</label>
 64 |       <input
 65 |         type="text"
 66 |         name="domain"
 67 |         id="domain"
 68 |         class="bg-white"
 69 |         v-model="payload.subdomain"
 70 |         placeholder="https://foo.bar.com"
 71 |       />
 72 |     </div>
 73 | 
 74 |     <div v-if="!isValid && payload.subdomain">
 75 |       <Button :loading="isCheckingDomain" class="btn-plain mt-12" @click="checkDomain">Check domain</Button>
 76 | 
 77 |       <div class="mt-4 bg-white p-6 rounded-2xl">
 78 |         <p>Set the following record on your DNS provider to continue:</p>
 79 | 
 80 |         <div class="mt-6 flex items-center space-x-6">
 81 |           <div class="flex-shrink-0 justify-start">
 82 |             <p>Type</p>
 83 |             <p>CNAME</p>
 84 |           </div>
 85 |           <div class="flex-shrink-0">
 86 |             <p>Name</p>
 87 |             <p>{{ payload.subdomain.split(".")[0] }}</p>
 88 |           </div>
 89 |           <div class="flex-grow">
 90 |             <p>Value</p>
 91 |             <p>cname.vercel-dns.com</p>
 92 |           </div>
 93 |         </div>
 94 | 
 95 |         <div class="mt-4 text-sm text-gray-400">
 96 |           Depending on your provider, it might take some time for the changes to apply.
 97 | 
 98 |           <NuxtLink target="_blank" to="https://vercel.com/guides/why-is-my-vercel-domain-unverified"
 99 |             >Learn More</NuxtLink
100 |           >
101 |         </div>
102 |       </div>
103 |     </div>
104 |   </div>
105 | </template>
106 | 


--------------------------------------------------------------------------------
/pages/dashboard/index.vue:
--------------------------------------------------------------------------------
1 | <script setup lang="ts"></script>
2 | 
3 | <template>
4 |   <div></div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/pages/dashboard/posts.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { format } from "date-fns"
 3 | 
 4 | const profile = useProfile()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <div class="w-full">
 9 |     <ul>
10 |       <li v-for="post in profile.posts" class="my-4">
11 |         <NuxtLink :to="`/edit/${post.id}`" class="block">
12 |           <div class="p-4 rounded-2xl bg-white shadow-none focus:shadow-lg hover:shadow-lg transition">
13 |             <h2 class="text-lg font-semibold">{{ post.title }}</h2>
14 |             <span class="text-sm text-gray-400"> {{ format(new Date(post.created_at), "MMM d") }}</span>
15 |           </div>
16 |         </NuxtLink>
17 |       </li>
18 |     </ul>
19 |   </div>
20 | </template>
21 | 


--------------------------------------------------------------------------------
/pages/dashboard/profile.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const profile = useProfile()
 3 | 
 4 | const payload = ref({ name: profile.value.name })
 5 | const { save, isSaving } = useProfileSave(payload)
 6 | 
 7 | const saveProfile = async () => {
 8 |   // validate
 9 |   save()
10 | }
11 | </script>
12 | 
13 | <template>
14 |   <div class="w-full">
15 |     <div class="flex w-full justify-end">
16 |       <Button :loading="isSaving" @click="saveProfile" class="mb-8 btn-primary"
17 |         >Save <span class="ml-2">⌘S</span></Button
18 |       >
19 |     </div>
20 | 
21 |     <div class="flex items-center">
22 |       <label for="name" class="flex-shrink-0 mr-2">Name :</label>
23 |       <input type="text" name="name" id="name" class="bg-white" v-model="payload.name" />
24 |     </div>
25 |   </div>
26 | </template>
27 | 


--------------------------------------------------------------------------------
/pages/edit/[id].vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | import { stripHtml } from "string-strip-html"
  3 | import slugify from "slugify"
  4 | import { Posts } from "~~/utils/types"
  5 | 
  6 | const user = useSupabaseUser()
  7 | const client = useSupabaseClient()
  8 | 
  9 | const { params } = useRoute()
 10 | const postId = ref(params.id)
 11 | 
 12 | const title = postId.value ? ref("") : useLocalStorage("new-post-title", "")
 13 | const body = postId.value ? ref("") : useLocalStorage("new-post-body", "")
 14 | const settings = ref({
 15 |   image: "",
 16 |   active: false,
 17 |   tags: [],
 18 | })
 19 | 
 20 | const isSaving = ref(false)
 21 | const isLoginVisible = ref(false)
 22 | const save = async () => {
 23 |   if (!title.value || !stripHtml(body.value).result || isSaving.value) return
 24 |   if (!user.value?.id) {
 25 |     // login modal
 26 |     isLoginVisible.value = true
 27 |     return
 28 |   }
 29 | 
 30 |   isSaving.value = true
 31 |   const { data, error } = await client
 32 |     .from<Posts>("posts")
 33 |     .upsert({
 34 |       id: postId.value?.toString(),
 35 |       slug: slugify(title.value, { lower: true }),
 36 |       title: title.value,
 37 |       body: body.value,
 38 |       author_id: user.value.id,
 39 |       active: settings.value.active,
 40 |       cover_img: settings.value.image,
 41 |       tags: settings.value.tags,
 42 |     })
 43 |     .single()
 44 |   console.log({ data })
 45 |   if (data) {
 46 |     if (!postId.value) {
 47 |       postId.value = data.id
 48 |       // history.pushState(null, "Title?", `${window.origin}/edit/${postId.value}`)
 49 | 
 50 |       localStorage.removeItem("new-post-title")
 51 |       localStorage.removeItem("new-post-body")
 52 |       navigateTo(`/edit/${postId.value}`)
 53 |     }
 54 |   }
 55 |   isSaving.value = false
 56 | }
 57 | 
 58 | useMagicKeys({
 59 |   passive: false,
 60 |   onEventFired(e) {
 61 |     if ((e.ctrlKey || e.metaKey) && e.key === "s" && e.type === "keydown") {
 62 |       e.preventDefault()
 63 |       save()
 64 |     }
 65 | 
 66 |     if ((e.ctrlKey || e.metaKey) && e.key === "e" && e.type === "keydown") {
 67 |       isDrawerOpen.value = !isDrawerOpen.value
 68 |     }
 69 |   },
 70 | })
 71 | 
 72 | const { pending } = await useAsyncData(
 73 |   `post-${postId.value}`,
 74 |   async () => {
 75 |     if (!postId.value) throw Error("no id found")
 76 |     const { data } = await client.from<Posts>("posts").select("*").eq("id", postId.value).single()
 77 |     title.value = data.title
 78 |     body.value = data.body
 79 |     settings.value = {
 80 |       image: data.cover_img ?? "",
 81 |       active: data.active ?? false,
 82 |       tags: data.tags ?? [],
 83 |     }
 84 | 
 85 |     return data
 86 |   },
 87 |   { server: false, lazy: true }
 88 | )
 89 | 
 90 | const isDrawerOpen = ref(false)
 91 | 
 92 | useCustomHead("Write your post")
 93 | definePageMeta({
 94 |   alias: "/write",
 95 |   middleware: "auth",
 96 | })
 97 | </script>
 98 | 
 99 | <template>
100 |   <div>
101 |     <Loader v-if="pending"></Loader>
102 |     <div v-else ref="el" class="flex flex-col mt-8">
103 |       <div class="flex justify-end prose mx-auto w-full">
104 |         <button :disabled="isSaving" class="btn-plain mr-6" @click="isDrawerOpen = true">
105 |           Settings <span class="ml-2">⌘E</span>
106 |         </button>
107 |         <Button :loading="isSaving" class="btn-primary" @click="save">Save <span class="ml-2">⌘S</span></Button>
108 |       </div>
109 | 
110 |       <div class="md:p-2 prose mx-auto w-full" spellcheck="false">
111 |         <TiptapHeading v-model="title"></TiptapHeading>
112 |         <Tiptap editable v-model="body"></Tiptap>
113 |       </div>
114 | 
115 |       <DrawerEditPost v-model:show="isDrawerOpen" :settings="settings"></DrawerEditPost>
116 |       <div id="modal"></div>
117 |       <ModalLogin v-model:show="isLoginVisible"></ModalLogin>
118 |     </div>
119 |   </div>
120 | </template>
121 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { Posts } from "~~/utils/types";
 3 | 
 4 | useCustomHead("Experience keyboard-first blogging platform");
 5 | 
 6 | const client = useSupabaseClient();
 7 | const { data, pending } = useAsyncData(
 8 |   "posts",
 9 |   async () => {
10 |     const { data } = await client
11 |       .from<Posts>("posts")
12 |       .select("*, profiles(avatar_url, name, username, domains (url, active) )")
13 |       .eq("active", true)
14 |       .order("featured", { ascending: false })
15 |       .order("created_at", { ascending: false });
16 | 
17 |     return data;
18 |   },
19 |   { lazy: true }
20 | );
21 | 
22 | const writeEl = ref();
23 | const { Slash } = useMagicKeys();
24 | watch(Slash, (n) => {
25 |   if (n && writeEl.value) {
26 |     writeEl.value.$el.focus();
27 |     setTimeout(() => {
28 |       writeEl.value.$el.click();
29 |     }, 300);
30 |   }
31 | });
32 | </script>
33 | 
34 | <template>
35 |   <div class="pb-20">
36 |     <div class="relative my-20 md:my-30 text-center">
37 |       <div class="z-100">
38 |         <h1 class="text-4xl md:text-6xl font-bold">
39 |           Keyboard-first <br />
40 |           Blogging Platform
41 |         </h1>
42 | 
43 |         <h2 class="mt-8 text-xl md:text-3xl font-semibold text-gray-300">
44 |           KeyPress let you write your blog <br />
45 |           with only keyboard
46 |         </h2>
47 | 
48 |         <div class="mt-12 flex flex-col items-center justify-center">
49 |           <NuxtLink ref="writeEl" class="btn-primary text-xl" to="/write">Press '/' to write</NuxtLink>
50 |           <span class="text-sm mt-2 text-gray-300">or 'Tab' to Navigate</span>
51 |         </div>
52 |       </div>
53 |     </div>
54 | 
55 |     <NuxtLink to="https://github.com/zernonia/keypress" target="_blank" class="w-full relative block">
56 |       <NuxtImg
57 |         style="object-position: 0 20%"
58 |         class="w-full h-60 md:h-80 object-cover rounded-2xl"
59 |         src="https://images.unsplash.com/photo-1665049420194-8f562db50cbd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80"
60 |         alt=""
61 |       />
62 |       <h3
63 |         class="absolute left-4 md:left-1/2 top-8 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2 md:text-3xl font-semibold flex flex-wrap items-center"
64 |       >
65 |         <div class="i-mdi-github mr-2"></div>
66 |         Nuxt 3 + Supabase + Vercel
67 |       </h3>
68 |     </NuxtLink>
69 | 
70 |     <h2 class="mt-20 text-4xl font-bold">Posts</h2>
71 |     <Loader v-if="pending"></Loader>
72 |     <ul v-else class="mt-4">
73 |       <li v-for="post in data">
74 |         <PostCard :post="post"></PostCard>
75 |       </li>
76 |     </ul>
77 |   </div>
78 | </template>
79 | 


--------------------------------------------------------------------------------
/pages/login.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | const client = useSupabaseClient()
 3 | 
 4 | const signIn = async () => {
 5 |   const { user } = await client.auth.signIn({ provider: "github" })
 6 | }
 7 | 
 8 | useCustomHead("Login")
 9 | </script>
10 | 
11 | <template>
12 |   <div class="flex flex-col mx-auto max-w-48 mt-20">
13 |     <h1 class="text-4xl font-bold text-center">Login</h1>
14 | 
15 |     <button autofocus class="btn-primary mt-4" @click="signIn">Login with GitHub</button>
16 |   </div>
17 | </template>
18 | 


--------------------------------------------------------------------------------
/pages/posts.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { Posts, Tags } from "~~/utils/types";
 3 | 
 4 | const client = useSupabaseClient();
 5 | 
 6 | const { data, pending } = useAsyncData("posts", async () => {
 7 |   const { data } = await client
 8 |     .from<Posts>("posts")
 9 |     .select("*, profiles(avatar_url, name,username, domains (url, active))")
10 |     .eq("active", true)
11 |     .order("featured", { ascending: false })
12 |     .order("created_at", { ascending: false });
13 | 
14 |   return data;
15 | });
16 | 
17 | const { data: tags } = useAsyncData("tags", async () => {
18 |   const { data } = await client.from<Tags>("tags_view").select("*");
19 |   return data;
20 | });
21 | 
22 | useCustomHead("Explore all posts");
23 | </script>
24 | 
25 | <template>
26 |   <div class="my-12">
27 |     <h1 class="text-4xl font-semibold">Posts</h1>
28 |     <div class="flex flex-col-reverse md:flex-row">
29 |       <div class="w-full">
30 |         <div v-if="pending">
31 |           <Loader></Loader>
32 |         </div>
33 |         <ul v-else>
34 |           <li class="my-4" v-for="post in data">
35 |             <PostCard :post="post"></PostCard>
36 |           </li>
37 |         </ul>
38 |       </div>
39 |       <aside class="md:ml-6 md:w-60 mt-3 flex-shrink-0">
40 |         <h5 class="text-xl font-medium">Tags</h5>
41 | 
42 |         <ul class="mt-4 p-4 bg-light-600 rounded-xl flex flex-col space-y-2">
43 |           <li v-for="tag in tags" class="flex justify-between items-center">
44 |             <div class="text-sm">{{ tag.name }}</div>
45 |             <div class="text-xs px-1 py-0.5 flex items-center bg-gray-200 font-medium rounded">{{ tag.count }}</div>
46 |           </li>
47 |         </ul>
48 |       </aside>
49 |     </div>
50 |   </div>
51 | </template>
52 | 


--------------------------------------------------------------------------------
/pages/user/[siteId].vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { Profiles } from "~~/utils/types"
 3 | 
 4 | const client = useSupabaseClient()
 5 | const subdomain = useSubdomain()
 6 | const profile = useSubdomainProfile()
 7 | 
 8 | // this should fetch user's profiles and settings (if any)
 9 | useAsyncData("profile", async () => {
10 |   const { data, error } = await client
11 |     .from<Profiles>("profiles")
12 |     .select("*")
13 |     .or(`username.eq.${subdomain.value}, subdomain.eq.${subdomain.value}`)
14 |     .maybeSingle()
15 | 
16 |   profile.value = data
17 |   return data
18 | })
19 | 
20 | definePageMeta({
21 |   layout: "user",
22 | })
23 | </script>
24 | 
25 | <template>
26 |   <div>
27 |     <NuxtPage v-if="profile"></NuxtPage>
28 |     <div class="text-4xl my-20 font-bold text-center" v-else>Page not found</div>
29 |   </div>
30 | </template>
31 | 


--------------------------------------------------------------------------------
/pages/user/[siteId]/[slug].vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { format } from "date-fns"
 3 | import { Posts } from "~~/utils/types"
 4 | import { stripHtml } from "string-strip-html"
 5 | import { constructUrl } from "~~/utils/functions"
 6 | 
 7 | const client = useSupabaseClient()
 8 | const { params } = useRoute()
 9 | const url = useUrl()
10 | 
11 | const { data, pending } = useAsyncData(`posts-${params.slug}`, async () => {
12 |   const { data } = await client
13 |     .from<Posts>("posts")
14 |     .select("*, profiles(avatar_url, name, username)")
15 |     .eq("slug", params.slug)
16 |     .single()
17 |   return data
18 | })
19 | 
20 | useCustomHead(
21 |   computed(() => data.value?.title),
22 |   computed(() => (data.value?.body ? stripHtml(data.value?.body)?.result?.slice(0, 160) : undefined)),
23 |   computed(() => (data.value?.cover_img === "" ? `${url}/og/${params.slug}` : data.value?.cover_img))
24 | )
25 | 
26 | const fullUrl = computed(() => constructUrl(data.value, false))
27 | </script>
28 | 
29 | <template>
30 |   <div>
31 |     <Transition name="fade" mode="out-in">
32 |       <article class="prose mx-auto w-full" v-if="!pending && data">
33 |         <div class="not-prose flex items-center pt-8 pb-4">
34 |           <NuxtImg class="w-12 h-12 rounded-full mr-4" :src="data.profiles.avatar_url"></NuxtImg>
35 |           <div>
36 |             <h3 class="text-lg">{{ data.profiles?.name }}</h3>
37 |             <h4 class="text-sm text-gray-400">{{ format(new Date(data.created_at), "MMMM d") }}</h4>
38 |           </div>
39 |         </div>
40 |         <h1>{{ data.title }}</h1>
41 | 
42 |         <NuxtImg v-if="data.cover_img" :src="data.cover_img" class="my-8 w-full h-auto"></NuxtImg>
43 | 
44 |         <!-- <Tiptap v-model="data.body"></Tiptap> -->
45 |         <div v-html="data.body"></div>
46 | 
47 |         <hr />
48 | 
49 |         <div class="not-prose mt-2 flex items-center space-x-2">
50 |           <NuxtLink
51 |             class="px-1 text-2xl text-gray-300 focus:text-dark-300 hover:text-dark-300 transition"
52 |             :to="`https://twitter.com/intent/tweet?url=${fullUrl}&text=Check%20out%20this%20new%20post`"
53 |             target="_blank"
54 |           >
55 |             <div class="i-mdi-twitter"></div>
56 |           </NuxtLink>
57 |           <NuxtLink
58 |             class="px-1 text-2xl text-gray-300 focus:text-dark-300 hover:text-dark-300 transition"
59 |             :to="`https://www.facebook.com/sharer/sharer.php?u=${fullUrl}`"
60 |             target="_blank"
61 |           >
62 |             <div class="i-mdi-facebook"></div
63 |           ></NuxtLink>
64 |           <NuxtLink
65 |             class="px-1 text-2xl text-gray-300 focus:text-dark-300 hover:text-dark-300 transition"
66 |             :to="`https://www.linkedin.com/shareArticle?mini=true&url=${fullUrl}`"
67 |             target="_blank"
68 |           >
69 |             <div class="i-mdi-linkedin"></div
70 |           ></NuxtLink>
71 |         </div>
72 | 
73 |         <!-- <div>More posts</div> -->
74 | 
75 |         <!-- <div>Comments</div> -->
76 |       </article>
77 |       <Loader v-else></Loader>
78 |     </Transition>
79 |   </div>
80 | </template>
81 | 


--------------------------------------------------------------------------------
/pages/user/[siteId]/home.vue:
--------------------------------------------------------------------------------
1 | <script setup lang="ts">
2 | const { params } = useRoute()
3 | </script>
4 | 
5 | <template>
6 |   <div>Home for user {{ params.slug }}</div>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/pages/user/[siteId]/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { Posts } from "~~/utils/types";
 3 | 
 4 | const client = useSupabaseClient();
 5 | const profile = useSubdomainProfile();
 6 | 
 7 | const { data, pending } = useAsyncData("posts", async () => {
 8 |   const { data, error } = await client
 9 |     .from<Posts>("posts")
10 |     .select("*, profiles!inner (username)")
11 |     .eq("active", true)
12 |     // @ts-ignore
13 |     .eq("profiles.id", profile.value.id)
14 |     .order("featured", { ascending: false })
15 |     .order("created_at", { ascending: false });
16 | 
17 |   return data;
18 | });
19 | 
20 | useCustomHead(computed(() => `${profile.value?.name}'s blog`));
21 | </script>
22 | 
23 | <template>
24 |   <div class="my-20">
25 |     <h1 class="text-4xl font-semibold">{{ profile?.name }}'s posts</h1>
26 |     <div>
27 |       <ul v-if="data">
28 |         <li class="my-4" v-for="post in data">
29 |           <PostCard subdomain v-if="post.id" :post="post"></PostCard>
30 |         </li>
31 |       </ul>
32 |       <Loader v-if="pending"></Loader>
33 |     </div>
34 |     <!-- <aside></aside> -->
35 |   </div>
36 | </template>
37 | 


--------------------------------------------------------------------------------
/plugins/umami.client.ts:
--------------------------------------------------------------------------------
 1 | export default defineNuxtPlugin(() => {
 2 |   const cfg = useRuntimeConfig()
 3 | 
 4 |   const moduleOptions = {
 5 |     scriptUrl: "https://umami-zernonia.vercel.app/script.js",
 6 |     websiteId: cfg.public.UMAMI_WEBSITE_ID,
 7 |   }
 8 |   const options = { ...moduleOptions }
 9 | 
10 |   if (moduleOptions.websiteId) {
11 |     loadScript(options)
12 |   }
13 | })
14 | 
15 | function loadScript(options: any) {
16 |   const head = document.head || document.getElementsByTagName("head")[0]
17 |   const script = document.createElement("script")
18 | 
19 |   script.async = true
20 |   script.defer = true
21 |   script.setAttribute('data-website-id', options.websiteId);
22 | 
23 |   script.src = options.scriptUrl
24 | 
25 |   head.appendChild(script)
26 | }
27 | 


--------------------------------------------------------------------------------
/public/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zernonia/keypress/7bfb22382810dc84e26cfaa1b0dd589ff8e8da23/public/banner.png


--------------------------------------------------------------------------------
/public/fonts/arial.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zernonia/keypress/7bfb22382810dc84e26cfaa1b0dd589ff8e8da23/public/fonts/arial.ttf


--------------------------------------------------------------------------------
/public/fonts/arial_bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zernonia/keypress/7bfb22382810dc84e26cfaa1b0dd589ff8e8da23/public/fonts/arial_bold.ttf


--------------------------------------------------------------------------------
/public/hero.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zernonia/keypress/7bfb22382810dc84e26cfaa1b0dd589ff8e8da23/public/hero.png


--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
 1 |   <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |     <path
 3 |       d="M0 50C0 8.825 8.825 0 50 0C91.175 0 100 8.825 100 50C100 91.175 91.175 100 50 100C8.825 100 0 91.175 0 50Z"
 4 |       fill="#2D2D2D"
 5 |     />
 6 |     <path
 7 |       d="M29.4375 30.4688H46.25V72.9375H29.4375V30.4688ZM51.4375 42.0312C51.4375 37.4271 52.6042 34.3333 54.9375 32.75C57.1458 31.2708 61.3021 30.5312 67.4062 30.5312H70.5625V36.4375C70.5625 41.1458 69.3646 44.5 66.9688 46.5C64.5312 48.5 60.3333 49.5 54.375 49.5H51.4375V42.0312ZM51.4375 52.75H54.375C60.25 52.75 64.4479 53.9167 66.9688 56.25C69.3646 58.4792 70.5625 62 70.5625 66.8125V73H67.4062C61.4271 73 57.2708 72.1042 54.9375 70.3125C52.6042 68.5 51.4375 65.25 51.4375 60.5625V52.75Z"
 8 |       fill="white"
 9 |     />
10 |   </svg>


--------------------------------------------------------------------------------
/public/og.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zernonia/keypress/7bfb22382810dc84e26cfaa1b0dd589ff8e8da23/public/og.png


--------------------------------------------------------------------------------
/server/api/_supabase/session.post.ts:
--------------------------------------------------------------------------------
 1 | import { setCookie, defineEventHandler } from "h3"
 2 | 
 3 | export default defineEventHandler(async (event) => {
 4 |   const body = await useBody(event)
 5 |   const config = useRuntimeConfig().public
 6 | 
 7 |   const cookieOptions = config.supabase.cookies
 8 | 
 9 |   const { event: signEvent, session } = body
10 | 
11 |   if (!event) {
12 |     throw new Error("Auth event missing!")
13 |   }
14 | 
15 |   if (signEvent === "SIGNED_IN") {
16 |     if (!session) {
17 |       throw new Error("Auth session missing!")
18 |     }
19 |     setCookie(event, `${cookieOptions.name}-access-token`, session.access_token, {
20 |       domain: cookieOptions.domain,
21 |       maxAge: cookieOptions.lifetime ?? 0,
22 |       path: cookieOptions.path,
23 |       sameSite: cookieOptions.sameSite as boolean | "lax" | "strict" | "none",
24 |     })
25 |     setCookie(event, `${cookieOptions.name}-refresh-token`, session.refresh_token, {
26 |       domain: cookieOptions.domain,
27 |       maxAge: cookieOptions.lifetime ?? 0,
28 |       path: cookieOptions.path,
29 |       sameSite: cookieOptions.sameSite as boolean | "lax" | "strict" | "none",
30 |     })
31 |   }
32 | 
33 |   if (signEvent === "SIGNED_OUT") {
34 |     setCookie(event, `${cookieOptions.name}-access-token`, "", {
35 |       maxAge: -1,
36 |       path: cookieOptions.path,
37 |     })
38 |   }
39 | 
40 |   return "custom auth cookie set"
41 | })
42 | 


--------------------------------------------------------------------------------
/server/api/add-domain.post.ts:
--------------------------------------------------------------------------------
 1 | // ref: https://github.com/vercel/platforms/blob/main/lib/api/domain.ts
 2 | import { serverSupabaseClient, serverSupabaseUser } from "#supabase/server"
 3 | import type { Domains } from "~~/utils/types"
 4 | 
 5 | export default defineEventHandler(async (event) => {
 6 |   try {
 7 |     const { domain, user_id } = await useBody(event)
 8 |     const user = await serverSupabaseUser(event)
 9 |     const client = serverSupabaseClient(event)
10 | 
11 |     if (Array.isArray(domain) || Array.isArray(user_id))
12 |       createError({ statusCode: 400, statusMessage: "Bad request. Query parameters are not valid." })
13 | 
14 |     const { data: domainData } = await client.from<Domains>("domains").select("*").eq("url", domain).maybeSingle()
15 |     if (domainData.user_id === user.id) return true
16 | 
17 |     const data = (await $fetch(`https://api.vercel.com/v9/projects/${process.env.VERCEL_PROJECT_ID}/domains`, {
18 |       method: "POST",
19 |       headers: {
20 |         Authorization: `Bearer ${process.env.AUTH_BEARER_TOKEN}`,
21 |       },
22 |       body: {
23 |         name: domain,
24 |       },
25 |     })) as any
26 |     console.log({ domain, data })
27 |     // Domain is already owned by another team but you can request delegation to access it
28 |     if (data.error?.code === "forbidden") return createError({ statusCode: 400, statusMessage: data.error.code })
29 | 
30 |     // Domain is already being used by a different project
31 |     if (data.error?.code === "domain_taken") return createError({ statusCode: 409, statusMessage: data.error.code })
32 | 
33 |     const { error: domainError } = await client.from<Domains>("domains").upsert({
34 |       url: domain,
35 |       user_id: user.id,
36 |       active: false,
37 |     })
38 | 
39 |     if (domainError) return createError({ statusCode: 400, statusMessage: domainError.message })
40 | 
41 |     return data
42 |   } catch (err) {
43 |     return createError({ statusCode: 500, statusMessage: err })
44 |   }
45 | })
46 | 


--------------------------------------------------------------------------------
/server/api/check-domain.post.ts:
--------------------------------------------------------------------------------
 1 | //ref: https://github.com/vercel/platforms/blob/main/pages/api/domain/check.ts
 2 | import { serverSupabaseClient } from "#supabase/server"
 3 | import type { Domains } from "~~/utils/types"
 4 | 
 5 | export default defineEventHandler(async (event) => {
 6 |   try {
 7 |     const { domain, subdomain = false } = await useBody(event)
 8 |     const client = serverSupabaseClient(event)
 9 | 
10 |     if (Array.isArray(domain))
11 |       return createError({ statusCode: 400, statusMessage: "Bad request. domain parameter cannot be an array." })
12 | 
13 |     // if (subdomain) {
14 |     //   const sub = (domain as string).replace(/[^a-zA-Z0-9/-]+/g, "");
15 | 
16 |     //   const data = await prisma.site.findUnique({
17 |     //     where: {
18 |     //       subdomain: sub,
19 |     //     },
20 |     //   });
21 | 
22 |     //   const available = data === null && sub.length !== 0;
23 | 
24 |     //   return res.status(200).json(available);
25 |     // }
26 | 
27 |     const data = (await $fetch(`https://api.vercel.com/v6/domains/${domain}/config`, {
28 |       headers: {
29 |         Authorization: `Bearer ${process.env.AUTH_BEARER_TOKEN}`,
30 |       },
31 |     })) as any
32 |     console.log({ domain, data })
33 | 
34 |     const valid = data?.configuredBy ? true : false
35 |     if (valid) {
36 |       const { error: domainError } = await client.from<Domains>("domains").update({
37 |         url: domain,
38 |         active: true,
39 |       })
40 |       if (domainError)
41 |         return createError({ statusCode: 400, statusMessage: "Bad request. domain parameter cannot be an array." })
42 |     }
43 | 
44 |     return { valid }
45 |   } catch (err) {
46 |     return createError({ statusCode: 404, statusMessage: err })
47 |   }
48 | })
49 | 


--------------------------------------------------------------------------------
/server/api/delete-domain.post.ts:
--------------------------------------------------------------------------------
 1 | // ref: https://github.com/vercel/platforms/blob/main/lib/api/domain.ts
 2 | 
 3 | export default defineEventHandler(async (event) => {
 4 |   try {
 5 |     const { domain, user_id } = await useBody(event)
 6 | 
 7 |     if (Array.isArray(domain) || Array.isArray(user_id))
 8 |       createError({ statusCode: 400, statusMessage: "Bad request. Query parameters are not valid." })
 9 | 
10 |     const data = (await $fetch(
11 |       `https://api.vercel.com/v9/projects/${process.env.VERCEL_PROJECT_ID}/domains/${domain}`,
12 |       {
13 |         method: "DELETE",
14 |         headers: {
15 |           Authorization: `Bearer ${process.env.AUTH_BEARER_TOKEN}`,
16 |         },
17 |       }
18 |     )) as any
19 |     console.log({ domain, data })
20 | 
21 |     // Domain is successfully added
22 |     // await prisma.site.update({
23 |     //   where: {
24 |     //     id: siteId,
25 |     //   },
26 |     //   data: {
27 |     //     customDomain: domain,
28 |     //   },
29 |     // });
30 | 
31 |     return data
32 |   } catch (err) {
33 |     return createError({ statusCode: 500, statusMessage: err })
34 |   }
35 | })
36 | 


--------------------------------------------------------------------------------
/server/api/request-delegation.ts:
--------------------------------------------------------------------------------
1 | export default defineEventHandler((event) => {
2 |   return 'Hello add-domain'
3 | })
4 | 


--------------------------------------------------------------------------------
/server/api/user-validation.post.ts:
--------------------------------------------------------------------------------
 1 | export default defineEventHandler(async (event) => {
 2 |   const { access_token } = await useBody(event)
 3 |   const hostname = event.req.headers.host
 4 | 
 5 |   // validate this token
 6 |   // setCookie(event, "sb-access-token", access_token, {
 7 |   //   maxAge: 60 * 60 * 8 ?? 0,
 8 |   //   path: "/",
 9 |   //   sameSite: "lax",
10 |   // })
11 |   return "auth cookie set"
12 | })
13 | 


--------------------------------------------------------------------------------
/server/middleware/login.ts:
--------------------------------------------------------------------------------
 1 | import { sendRedirect, defineEventHandler } from "h3"
 2 | 
 3 | export default defineEventHandler(async (event) => {
 4 |   const { req, res } = event
 5 |   const referrer = req.headers.referer
 6 |   const cookie = useCookies(event)
 7 |   const accessToken = cookie["sb-access-token"]
 8 |   const refreshToken = cookie["sb-refresh-token"]
 9 |   // console.log({ url: req.url, referrer, accessToken, refreshToken, cookie })
10 |   // if cookie already exist in main route, then redirect with jwt
11 |   if (req.url === "/login" && referrer && accessToken && refreshToken) {
12 |     // redirect with same parameter as Supabase login
13 |     return await sendRedirect(
14 |       event,
15 |       referrer +
16 |         `#access_token=${accessToken}&expires_in=604800&provider_token=${process.env.GITHUB_PROVIDER_TOKEN}&refresh_token=${refreshToken}&token_type=bearer`,
17 |       302
18 |     )
19 |   }
20 | })
21 | 


--------------------------------------------------------------------------------
/server/middleware/subdomain.ts:
--------------------------------------------------------------------------------
 1 | export default defineEventHandler(({ req, res, context }) => {
 2 |   const hostname = req.headers.host || "keypress.blog"
 3 | 
 4 |   const mainDomain = ["localhost:3000", "keypress.blog"]
 5 | 
 6 |   if (!mainDomain.includes(hostname)) {
 7 |     const currentHost =
 8 |       process.env.NODE_ENV === "production" && process.env.VERCEL === "1"
 9 |         ? hostname.replace(`.keypress.blog`, "")
10 |         : hostname.replace(`.localhost:3000`, "")
11 | 
12 |     console.log({ currentHost })
13 |     context.subdomain = currentHost
14 |   }
15 | })
16 | 


--------------------------------------------------------------------------------
/server/routes/og/[slug].ts:
--------------------------------------------------------------------------------
  1 | import { readFileSync } from "fs"
  2 | import { join, resolve } from "path"
  3 | import { serverSupabaseClient } from "#supabase/server"
  4 | import { useUrl } from "~~/composables/url"
  5 | import { Resvg, ResvgRenderOptions } from "@resvg/resvg-js"
  6 | import type { Posts } from "~~/utils/types"
  7 | import satori from "satori"
  8 | 
  9 | export default defineEventHandler(async (event) => {
 10 |   const client = serverSupabaseClient(event)
 11 |   const url = useUrl()
 12 |   const slug = event.context.params.slug
 13 |   const fonts = ["arial.ttf", "arial_bold.ttf"]
 14 | 
 15 |   try {
 16 |     const { data, error } = await client
 17 |       .from<Posts>("posts")
 18 |       .select("title, profiles(name, avatar_url)")
 19 |       .eq("slug", slug)
 20 |       .single()
 21 |     if (error) throw Error(error.message)
 22 | 
 23 |     // svg inspired from https://og-playground.vercel.app/
 24 |     const svg = await satori(
 25 |       {
 26 |         type: "div",
 27 |         props: {
 28 |           style: {
 29 |             display: "flex",
 30 |             height: "100%",
 31 |             width: "100%",
 32 |             alignItems: "center",
 33 |             justifyContent: "center",
 34 |             letterSpacing: "-.02em",
 35 |             fontWeight: 700,
 36 |             background: "#f8f9fa",
 37 |           },
 38 |           children: [
 39 |             {
 40 |               type: "img",
 41 |               props: {
 42 |                 style: {
 43 |                   right: 42,
 44 |                   bottom: 42,
 45 |                   position: "absolute",
 46 |                   display: "flex",
 47 |                   alignItems: "center",
 48 |                   width: "300px",
 49 |                 },
 50 |                 src: url + "/banner.png",
 51 |               },
 52 |             },
 53 |             {
 54 |               type: "div",
 55 |               props: {
 56 |                 style: {
 57 |                   left: 42,
 58 |                   bottom: 42,
 59 |                   position: "absolute",
 60 |                   display: "flex",
 61 |                   alignItems: "center",
 62 |                 },
 63 |                 children: [
 64 |                   {
 65 |                     type: "img",
 66 |                     props: {
 67 |                       style: {
 68 |                         width: "70px",
 69 |                         height: "70px",
 70 |                         borderRadius: "9999px",
 71 |                       },
 72 |                       src: data.profiles.avatar_url,
 73 |                     },
 74 |                   },
 75 |                   {
 76 |                     type: "p",
 77 |                     props: {
 78 |                       style: {
 79 |                         marginLeft: "20px",
 80 |                         fontSize: "24px",
 81 |                       },
 82 |                       children: data.profiles.name,
 83 |                     },
 84 |                   },
 85 |                 ],
 86 |               },
 87 |             },
 88 |             {
 89 |               type: "div",
 90 |               props: {
 91 |                 style: {
 92 |                   display: "flex",
 93 |                   flexWrap: "wrap",
 94 |                   justifyContent: "center",
 95 |                   padding: "20px 50px",
 96 |                   margin: "0 42px 150px 42px",
 97 |                   fontSize: "64px",
 98 |                   width: "auto",
 99 |                   maxWidth: 1200 - 48 * 2,
100 |                   textAlign: "center",
101 |                   backgroundColor: "#2D2D2D",
102 |                   borderRadius: "30px",
103 |                   color: "white",
104 |                   lineHeight: 1.4,
105 |                 },
106 |                 children: data.title,
107 |               },
108 |             },
109 |           ],
110 |         },
111 |       },
112 |       {
113 |         width: 1200,
114 |         height: 630,
115 |         fonts: [
116 |           {
117 |             name: "Arial",
118 |             data: readFileSync(join(process.cwd(), "public/fonts", fonts[0])),
119 |             weight: 400,
120 |             style: "normal",
121 |           },
122 |           {
123 |             name: "Arial",
124 |             data: readFileSync(join(process.cwd(), "public/fonts", fonts[1])),
125 |             weight: 700,
126 |             style: "normal",
127 |           },
128 |         ],
129 |       }
130 |     )
131 | 
132 |     // render to svg as image
133 | 
134 |     const resvg = new Resvg(svg, {
135 |       fitTo: {
136 |         mode: "width",
137 |         value: 1200,
138 |       },
139 |       font: {
140 |         fontFiles: fonts.map((i) => join(resolve("."), "public/fonts", i)), // Load custom fonts.
141 |         loadSystemFonts: false,
142 |       },
143 |     })
144 | 
145 |     const resolved = await Promise.all(
146 |       resvg.imagesToResolve().map(async (url) => {
147 |         console.info("image url", url)
148 |         const img = await fetch(url)
149 |         const buffer = await img.arrayBuffer()
150 |         return {
151 |           url,
152 |           buffer: Buffer.from(buffer),
153 |         }
154 |       })
155 |     )
156 |     if (resolved.length > 0) {
157 |       for (const result of resolved) {
158 |         const { url, buffer } = result
159 |         resvg.resolveImage(url, buffer)
160 |       }
161 |     }
162 | 
163 |     const renderData = resvg.render()
164 |     const pngBuffer = renderData.asPng()
165 | 
166 |     event.res.setHeader("Cache-Control", "s-maxage=7200, stale-while-revalidate")
167 |     return pngBuffer
168 |   } catch (err) {
169 |     return createError({ statusCode: 500, statusMessage: err })
170 |   }
171 | })
172 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://v3.nuxtjs.org/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/utils/functions.ts:
--------------------------------------------------------------------------------
 1 | import { Posts } from "./types"
 2 | 
 3 | export const constructUrl = (post: Posts, subdomain = false) => {
 4 |   if (subdomain) return `/${post.slug}`
 5 |   if (process.dev) return `http://${post?.profiles?.username}.localhost:3000/${post.slug}`
 6 |   else {
 7 |     if (post?.profiles?.domains?.active) return `https://${post.profiles.domains.url}/${post.slug}`
 8 |     else return `https://${post?.profiles?.username}.keypress.blog/${post.slug}`
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/utils/tiptap/code.ts:
--------------------------------------------------------------------------------
 1 | import { Extension } from "@tiptap/core"
 2 | import Code from "@tiptap/extension-code"
 3 | import CodeBlock from "@tiptap/extension-code-block"
 4 | import CodeBlockLowLight from "@tiptap/extension-code-block-lowlight"
 5 | import { lowlight } from "lowlight"
 6 | 
 7 | import css from "highlight.js/lib/languages/css"
 8 | import js from "highlight.js/lib/languages/javascript"
 9 | import ts from "highlight.js/lib/languages/typescript"
10 | import html from "highlight.js/lib/languages/xml"
11 | 
12 | // ref: https://tiptap.dev/experiments/commands
13 | 
14 | lowlight.registerLanguage("html", html)
15 | lowlight.registerLanguage("css", css)
16 | lowlight.registerLanguage("js", js)
17 | lowlight.registerLanguage("ts", ts)
18 | 
19 | export default Extension.create({
20 |   name: "code",
21 |   addExtensions() {
22 |     return [
23 |       Code,
24 |       CodeBlock,
25 |       CodeBlockLowLight.configure({
26 |         lowlight,
27 |       }),
28 |     ]
29 |   },
30 | })
31 | 


--------------------------------------------------------------------------------
/utils/tiptap/commands.ts:
--------------------------------------------------------------------------------
 1 | import { Extension } from "@tiptap/core"
 2 | import Suggestion from "@tiptap/suggestion"
 3 | 
 4 | // ref: https://tiptap.dev/experiments/commands
 5 | export default Extension.create({
 6 |   name: "commands",
 7 | 
 8 |   addOptions() {
 9 |     return {
10 |       suggestion: {
11 |         char: "/",
12 |         command: ({ editor, range, props }) => {
13 |           props.command({ editor, range })
14 |         },
15 |       },
16 |     }
17 |   },
18 | 
19 |   addProseMirrorPlugins() {
20 |     return [
21 |       Suggestion({
22 |         editor: this.editor,
23 |         startOfLine: true,
24 |         ...this.options.suggestion,
25 |       }),
26 |     ]
27 |   },
28 | })
29 | 


--------------------------------------------------------------------------------
/utils/tiptap/hardbreak.ts:
--------------------------------------------------------------------------------
 1 | import { Extension } from "@tiptap/core"
 2 | 
 3 | export default Extension.create({
 4 |   addKeyboardShortcuts() {
 5 |     // copied from tiptap
 6 |     const defaultHandler = () =>
 7 |       this.editor.commands.first(({ commands }) => [
 8 |         () => commands.newlineInCode(),
 9 |         () => commands.createParagraphNear(),
10 |         () => commands.liftEmptyBlock(),
11 |         () => commands.splitListItem("listItem"),
12 |         () => commands.splitBlock(),
13 |       ])
14 | 
15 |     const shiftEnter = () => {
16 |       return this.editor.commands.first(({ commands }) => [
17 |         () => commands.newlineInCode(),
18 |         () => commands.createParagraphNear(),
19 |       ])
20 |     }
21 | 
22 |     const modEnter = () => {
23 |       return this.editor.commands.first(({ commands }) => [
24 |         () => commands.newlineInCode(),
25 | 
26 |         (a) => {
27 |           commands.selectTextblockEnd()
28 |           return commands.createParagraphNear()
29 |         },
30 |       ])
31 |     }
32 | 
33 |     return {
34 |       Enter: defaultHandler,
35 |       "Shift-Enter": shiftEnter,
36 |       "Mod-Enter": modEnter,
37 |     }
38 |   },
39 | })
40 | 


--------------------------------------------------------------------------------
/utils/tiptap/iframe.ts:
--------------------------------------------------------------------------------
 1 | // ref: https://github.com/ueberdosis/tiptap/blob/9afadeb7fe368f95064f84424d6a3dd6cd85b43d/demos/src/Experiments/Embeds/Vue/iframe.ts
 2 | import { mergeAttributes, Node } from "@tiptap/core"
 3 | 
 4 | export interface IframeOptions {
 5 |   allowFullscreen: boolean
 6 |   HTMLAttributes: {
 7 |     [key: string]: any
 8 |   }
 9 | }
10 | 
11 | declare module "@tiptap/core" {
12 |   interface Commands<ReturnType> {
13 |     iframe: {
14 |       /**
15 |        * Add an iframe
16 |        */
17 |       setIframe: (options: { src: string }) => ReturnType
18 |     }
19 |   }
20 | }
21 | 
22 | export default Node.create<IframeOptions>({
23 |   name: "iframe",
24 | 
25 |   group: "block",
26 | 
27 |   atom: true,
28 | 
29 |   addOptions() {
30 |     return {
31 |       allowFullscreen: true,
32 |       HTMLAttributes: {
33 |         class: "iframe-wrapper",
34 |       },
35 |     }
36 |   },
37 | 
38 |   addAttributes() {
39 |     return {
40 |       src: {
41 |         default: null,
42 |       },
43 |       frameborder: {
44 |         default: 0,
45 |       },
46 |       allowfullscreen: {
47 |         default: this.options.allowFullscreen,
48 |         parseHTML: () => this.options.allowFullscreen,
49 |       },
50 |     }
51 |   },
52 | 
53 |   parseHTML() {
54 |     return [
55 |       {
56 |         tag: "iframe",
57 |       },
58 |     ]
59 |   },
60 | 
61 |   renderHTML({ HTMLAttributes }) {
62 |     return [
63 |       "div",
64 |       this.options.HTMLAttributes,
65 |       ["iframe", mergeAttributes(HTMLAttributes, { frameborder: 10, tabindex: -1 })],
66 |     ]
67 |   },
68 | 
69 |   addCommands() {
70 |     return {
71 |       setIframe:
72 |         (options: { src: string }) =>
73 |         ({ tr, dispatch }) => {
74 |           const { selection } = tr
75 |           const node = this.type.create(options)
76 | 
77 |           if (dispatch) {
78 |             tr.replaceRangeWith(selection.from, selection.to, node)
79 |           }
80 | 
81 |           return true
82 |         },
83 |     }
84 |   },
85 | })
86 | 


--------------------------------------------------------------------------------
/utils/tiptap/link.ts:
--------------------------------------------------------------------------------
1 | // 1. Import the extension
2 | import Link from "@tiptap/extension-link"
3 | 
4 | // 2. Overwrite the keyboard shortcuts
5 | export default Link.extend({
6 |   exitable: true,
7 | })
8 | 


--------------------------------------------------------------------------------
/utils/tiptap/move.ts:
--------------------------------------------------------------------------------
  1 | import { CommandProps, Editor, Extension } from "@tiptap/core"
  2 | import { findParentNodeOfType } from "prosemirror-utils"
  3 | import { EditorState, NodeSelection, Selection, TextSelection } from "prosemirror-state"
  4 | import { Fragment, NodeType, Slice } from "prosemirror-model"
  5 | import { ReplaceStep } from "prosemirror-transform"
  6 | 
  7 | declare module "@tiptap/core" {
  8 |   interface Commands<ReturnType> {
  9 |     move: {
 10 |       moveParent: (direction: "up" | "down") => ReturnType
 11 |     }
 12 |   }
 13 | }
 14 | 
 15 | // ref: https://github.com/bangle-io/bangle.dev/blob/960fb4706a953ef910a9ddf2d80a7f10bdd2921b/core/core-commands.js#L101
 16 | 
 17 | function arrayify(x: any) {
 18 |   if (x == null) {
 19 |     throw new Error("undefined value passed")
 20 |   }
 21 |   return Array.isArray(x) ? x : [x]
 22 | }
 23 | function mapChildren(node: any, callback: any) {
 24 |   const array = []
 25 |   for (let i = 0; i < node.childCount; i++) {
 26 |     array.push(callback(node.child(i), i, node instanceof Fragment ? node : node.content))
 27 |   }
 28 | 
 29 |   return array
 30 | }
 31 | 
 32 | const moveNode = (type: NodeType, dir: "up" | "down") => {
 33 |   const isDown = dir === "down"
 34 |   return (state: EditorState, dispatch: any) => {
 35 |     // @ts-ignore  (node) only exist in custom element. eg: image, iframe
 36 |     const { $from, node } = state.selection
 37 | 
 38 |     const currentResolved = findParentNodeOfType(type)(state.selection) ?? {
 39 |       depth: 1,
 40 |       node,
 41 |       pos: 34,
 42 |       start: 34,
 43 |     }
 44 | 
 45 |     if (!currentResolved.node) {
 46 |       return false
 47 |     }
 48 | 
 49 |     const { node: currentNode } = currentResolved
 50 |     const parentDepth = currentResolved.depth - 1
 51 |     const parent = $from.node(parentDepth)
 52 |     const parentPos = $from.start(parentDepth)
 53 | 
 54 |     if (currentNode.type !== type) {
 55 |       return false
 56 |     }
 57 | 
 58 |     const arr = mapChildren(parent, (node) => node)
 59 | 
 60 |     let index = arr.indexOf(currentNode)
 61 | 
 62 |     let swapWith = isDown ? index + 1 : index - 1
 63 | 
 64 |     // If swap is out of bound
 65 |     if (swapWith >= arr.length || swapWith < 0) {
 66 |       return false
 67 |     }
 68 | 
 69 |     const swapWithNodeSize = arr[swapWith].nodeSize
 70 |     ;[arr[index], arr[swapWith]] = [arr[swapWith], arr[index]]
 71 | 
 72 |     let tr = state.tr
 73 |     let replaceStart = parentPos
 74 |     let replaceEnd = $from.end(parentDepth)
 75 | 
 76 |     const slice = new Slice(Fragment.fromArray(arr), 0, 0) // the zeros  lol -- are not depth they are something that represents the opening closing
 77 |     // .toString on slice gives you an idea. for this case we want them balanced
 78 |     tr = tr.step(new ReplaceStep(replaceStart, replaceEnd, slice, false))
 79 | 
 80 |     tr = tr.setSelection(
 81 |       Selection.near(tr.doc.resolve(isDown ? $from.pos + swapWithNodeSize : $from.pos - swapWithNodeSize))
 82 |     )
 83 |     if (dispatch) {
 84 |       dispatch(tr.scrollIntoView())
 85 |     }
 86 |     return true
 87 |   }
 88 | }
 89 | 
 90 | export default Extension.create({
 91 |   name: "move",
 92 | 
 93 |   addCommands() {
 94 |     return {
 95 |       moveParent:
 96 |         (direction: "up" | "down") =>
 97 |         ({ editor, state, dispatch, ...a }) => {
 98 |           // @ts-ignore  (node) only exist in custom element. eg: image, iframe
 99 |           const type = editor.state.selection.node?.type ?? editor.state.selection.$head.parent.type
100 |           return moveNode(type, direction)(state, dispatch)
101 |         },
102 |     }
103 |   },
104 | 
105 |   addKeyboardShortcuts() {
106 |     return {
107 |       "Alt-ArrowUp": () => this.editor.commands.moveParent("up"),
108 |       "Alt-ArrowDown": () => this.editor.commands.moveParent("down"),
109 |     }
110 |   },
111 | })
112 | 


--------------------------------------------------------------------------------
/utils/tiptap/placeholder.ts:
--------------------------------------------------------------------------------
 1 | // 1. Import the extension
 2 | import Placeholder from "@tiptap/extension-placeholder"
 3 | import { NodeSelection, TextSelection } from "prosemirror-state"
 4 | 
 5 | // 2. Overwrite the keyboard shortcuts
 6 | export default Placeholder.extend({
 7 |   addOptions() {
 8 |     return {
 9 |       ...this.parent?.(),
10 |       placeholder: ({ node, editor }) => {
11 |         const selection = editor.state.selection as NodeSelection
12 |         if (selection instanceof TextSelection) {
13 |           return " Type '/' for commands"
14 |         }
15 |       },
16 |       includeChildren: true,
17 |     }
18 |   },
19 | })
20 | 


--------------------------------------------------------------------------------
/utils/tiptap/suggestion.ts:
--------------------------------------------------------------------------------
  1 | import type { Editor, Range } from "@tiptap/core"
  2 | import { VueRenderer } from "@tiptap/vue-3"
  3 | import tippy from "tippy.js"
  4 | 
  5 | import CommandsList from "~~/components/Tiptap/CommandList.vue"
  6 | 
  7 | interface Command {
  8 |   editor: Editor
  9 |   range: Range
 10 | }
 11 | export default {
 12 |   items: ({ query }) => {
 13 |     return [
 14 |       {
 15 |         title: "Heading 2",
 16 |         description: "Big section heading.",
 17 |         command: ({ editor, range }: Command) => {
 18 |           editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run()
 19 |         },
 20 |       },
 21 |       {
 22 |         title: "Heading 3",
 23 |         description: "Medium section heading.",
 24 |         command: ({ editor, range }: Command) => {
 25 |           editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run()
 26 |         },
 27 |       },
 28 |       {
 29 |         title: "Numbered List",
 30 |         description: "Create a list with numbering.",
 31 |         command: ({ editor, range }: Command) => {
 32 |           editor.chain().focus().deleteRange(range).wrapInList("orderedList").run()
 33 |         },
 34 |       },
 35 |       {
 36 |         title: "Bulleted List",
 37 |         description: "Create a simple bulleted list.",
 38 |         command: ({ editor, range }: Command) => {
 39 |           editor.chain().focus().deleteRange(range).wrapInList("bulletList").run()
 40 |         },
 41 |       },
 42 |       {
 43 |         title: "Image",
 44 |         description: "Upload or embed with link.",
 45 |         command: ({ editor, range }: Command) => {
 46 |           editor.chain().focus().deleteRange(range).openModal("image").run()
 47 |         },
 48 |       },
 49 |       {
 50 |         title: "Iframe",
 51 |         description: "Embed website with link.",
 52 |         command: ({ editor, range }: Command) => {
 53 |           editor.chain().focus().deleteRange(range).openModal("iframe").run()
 54 |         },
 55 |       },
 56 |       // {
 57 |       //   title: "bold",
 58 |       //   command: ({ editor, range }: Command) => {
 59 |       //     editor.chain().focus().deleteRange(range).setMark("bold").run()
 60 |       //   },
 61 |       // },
 62 |       // {
 63 |       //   title: "underline",
 64 |       //   command: ({ editor, range }: Command) => {
 65 |       //     editor.chain().focus().deleteRange(range).setMark("underline").run()
 66 |       //   },
 67 |       // },
 68 |       // {
 69 |       //   title: "italic",
 70 |       //   command: ({ editor, range }: Command) => {
 71 |       //     editor.chain().focus().deleteRange(range).setMark("italic").run()
 72 |       //   },
 73 |       // },
 74 |     ]
 75 |       .filter((item) => item.title.toLowerCase().startsWith(query.toLowerCase()))
 76 |       .slice(0, 10)
 77 |   },
 78 | 
 79 |   render: () => {
 80 |     let component
 81 |     let popup
 82 | 
 83 |     return {
 84 |       onStart: (props) => {
 85 |         component = new VueRenderer(CommandsList, {
 86 |           props,
 87 |           editor: props.editor,
 88 |         })
 89 | 
 90 |         if (!props.clientRect) {
 91 |           return
 92 |         }
 93 | 
 94 |         popup = tippy("body", {
 95 |           getReferenceClientRect: props.clientRect,
 96 |           appendTo: () => document.body,
 97 |           content: component.element,
 98 |           showOnCreate: true,
 99 |           interactive: true,
100 |           trigger: "manual",
101 |           placement: "bottom-start",
102 |         })
103 |       },
104 | 
105 |       onUpdate(props) {
106 |         component.updateProps(props)
107 | 
108 |         if (!props.clientRect) {
109 |           return
110 |         }
111 | 
112 |         popup[0].setProps({
113 |           getReferenceClientRect: props.clientRect,
114 |         })
115 |       },
116 | 
117 |       onKeyDown(props) {
118 |         if (props.event.key === "Escape") {
119 |           popup[0].hide()
120 | 
121 |           return true
122 |         }
123 | 
124 |         return component.ref?.onKeyDown(props.event)
125 |       },
126 | 
127 |       onExit() {
128 |         popup[0].destroy()
129 |         component.destroy()
130 |       },
131 |     }
132 |   },
133 | }
134 | 


--------------------------------------------------------------------------------
/utils/tiptap/upload.ts:
--------------------------------------------------------------------------------
 1 | import { Extension } from "@tiptap/core"
 2 | import ModalImage from "~~/components/Tiptap/ModalImage.vue"
 3 | import ModalIframe from "~~/components/Tiptap/ModalIframe.vue"
 4 | import { createApp } from "vue"
 5 | 
 6 | declare module "@tiptap/core" {
 7 |   interface Commands<ReturnType> {
 8 |     upload: {
 9 |       openModal: (type: "image" | "iframe") => ReturnType
10 |     }
11 |   }
12 | }
13 | 
14 | export default Extension.create({
15 |   name: "upload",
16 | 
17 |   addCommands() {
18 |     return {
19 |       openModal:
20 |         (type: "image" | "iframe") =>
21 |         ({ commands, editor }) => {
22 |           let component: typeof ModalImage
23 | 
24 |           switch (type) {
25 |             case "image": {
26 |               component = ModalImage
27 |               break
28 |             }
29 |             case "iframe": {
30 |               component = ModalIframe
31 |               break
32 |             }
33 |           }
34 |           if (!component) return
35 | 
36 |           const instance = createApp(component, {
37 |             show: true,
38 |             editor,
39 |           }).mount("#modal")
40 | 
41 |           return !!instance
42 |         },
43 |     }
44 |   },
45 | })
46 | 


--------------------------------------------------------------------------------
/utils/types.ts:
--------------------------------------------------------------------------------
 1 | // generated from https://supabase-schema.vercel.app/
 2 | export interface Profiles {
 3 |   id: string /* primary key */;
 4 |   username?: string;
 5 |   avatar_url?: string;
 6 |   name?: string;
 7 |   created_at?: string;
 8 |   subdomain?: string;
 9 |   domains: Domains;
10 |   posts: Posts[];
11 | }
12 | 
13 | export interface Domains {
14 |   user_id?: string /* foreign key to profiles.id */;
15 |   url: string /* primary key */;
16 |   active?: boolean;
17 |   created_at?: string;
18 |   profiles?: Profiles;
19 | }
20 | 
21 | export interface Posts {
22 |   id: string /* primary key */;
23 |   author_id?: string /* foreign key to profiles.id */;
24 |   created_at?: string;
25 |   slug?: string;
26 |   title?: string;
27 |   body?: string;
28 |   cover_img?: string;
29 |   active?: boolean;
30 |   tags?: string[];
31 |   profiles?: Profiles;
32 |   featured?: boolean;
33 | }
34 | 
35 | export interface Tags {
36 |   name: string;
37 |   count: number;
38 | }
39 | 


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