├── .env.example
├── .gitignore
├── .npmrc
├── LICENSE
├── README.md
├── app
    ├── app.config.ts
    ├── app.vue
    ├── components
    │   └── OgImage
    │   │   └── OgImagePage.vue
    └── pages
    │   └── [[slug]].vue
├── eslint.config.mjs
├── nuxt.config.ts
├── package.json
├── pnpm-lock.yaml
├── public
    └── favicon.ico
├── server
    ├── api
    │   ├── login.post.ts
    │   ├── pages.ts
    │   └── pages
    │   │   ├── [slug].get.ts
    │   │   └── [slug].put.ts
    └── routes
    │   └── assets
    │       └── [...pathname].get.ts
└── tsconfig.json


/.env.example:
--------------------------------------------------------------------------------
1 | ADMIN_PASSWORD=your-admin-password
2 | NUXT_SESSION_PASSWORD=password-for-sealed-session-of-32-chars-min
3 | # Nuxt UI Pro License, available on https://ui.nuxt.com/pro
4 | NUXT_UI_PRO_LICENSE=


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | *.log*
 3 | .nuxt
 4 | .nitro
 5 | .cache
 6 | .output
 7 | .env
 8 | dist
 9 | .data
10 | data
11 | .wrangler
12 | wrangler.toml
13 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | strict-peer-dependencies=false
3 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Sébastien Chopin
 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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Save your Markdown notes online with Atinotes 🖌️
 2 | 
 3 | Read more on https://notes.atinux.com
 4 | 
 5 | [![Nuxt UI Pro](https://img.shields.io/badge/Made%20with-Nuxt%20UI%20Pro-00DC82?logo=nuxt.js&labelColor=020420)](https://ui.nuxt.com/pro)
 6 | 
 7 | [![Deploy to NuxtHub](https://hub.nuxt.com/button.svg)](https://admin.hub.nuxt.com/new?template=atinotes)
 8 | 
 9 | ## Setup
10 | 
11 | Make sure to install the dependencies:
12 | 
13 | ```bash
14 | # pnpm
15 | pnpm install
16 | ```
17 | 
18 | ## Development Server
19 | 
20 | Start the development server on http://localhost:3000
21 | 
22 | ```bash
23 | pnpm run dev
24 | ```
25 | 
26 | Copy the `.env.example` to `.env` and update the variables to your own.
27 | 
28 | ## Production
29 | 
30 | Note that you need a [Nuxt UI Pro license](https://ui.nuxt.com/pro) to build the application for production.
31 | 
32 | Build the application for production:
33 | 
34 | ```bash
35 | pnpm run build
36 | ```
37 | 
38 | Locally preview production build:
39 | 
40 | ```bash
41 | pnpm run preview
42 | ```
43 | 
44 | Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
45 | 
46 | ## Deploy
47 | 
48 | ### With NuxtHub
49 | 
50 | You can deploy this template directy on your CloudFlare account with zero configuration with the [NuxtHub Console](https://console.hub.nuxt.com) and get a free `.nuxt.dev` domain.
51 | 
52 | ```bash
53 | pnpx nuxthub deploy
54 | ```
55 | 
56 | Once deployed, you can manage your project by running:
57 | 
58 | ```bash
59 | pnpx nuxthub manage
60 | ```
61 | 
62 | Then add the following environement variables:
63 | 
64 | ```
65 | ADMIN_PASSWORD=<your-password>
66 | NUXT_SESSION_PASSWORD=<a-32-characters-long-password>
67 | NUXT_UI_PRO_LICENSE=<your-license>
68 | ```
69 | 
70 | Once saved, the deployment will be updated with the new environment variables.
71 | 
72 | ### Manually on Cloudflare Pages
73 | 
74 | Once you created your GitHub repository with this template, you can connect to it, then add those env variables:
75 | 
76 | ```
77 | ADMIN_PASSWORD=<your-password>
78 | NUXT_SESSION_PASSWORD=<a-32-characters-long-password>
79 | NUXT_UI_PRO_LICENSE=<your-license>
80 | ```
81 | 
82 | Then, setup the build command on CloudFlare Pages to be:
83 | 
84 | ```bash
85 | nuxt build
86 | ```
87 | 
88 | The output directory is: `dist/`
89 | 
90 | Next, you need to link a KV namespace to the deployment, the binding should be named `KV`.
91 | 
92 | ![KV example on CloudFlare](https://github.com/Atinux/atinotes/assets/904724/3c35a422-b646-41b9-9337-cc7de06f0d14)
93 | 
94 | That's all :sparkles:
95 | 
96 | ## License
97 | 
98 | [MIT](./LICENSE) - Sébastien Chopin
99 | 


--------------------------------------------------------------------------------
/app/app.config.ts:
--------------------------------------------------------------------------------
1 | export default defineAppConfig({
2 |   ui: {
3 |     primary: 'lime',
4 |     gray: 'neutral'
5 |   }
6 | })
7 | 


--------------------------------------------------------------------------------
/app/app.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | const { loggedIn, fetch: refreshSession, clear } = useUserSession()
  3 | const toast = useToast()
  4 | const loginModal = ref(false)
  5 | const logging = ref(false)
  6 | const password = ref('')
  7 | 
  8 | useSeoMeta({
  9 |   ogSiteName: 'Atinotes',
 10 |   ogType: 'website',
 11 |   twitterCard: 'summary_large_image',
 12 |   twitterSite: 'atinux'
 13 | })
 14 | 
 15 | async function login() {
 16 |   if (!password.value) return
 17 |   logging.value = true
 18 |   await $fetch('/api/login', {
 19 |     method: 'POST',
 20 |     body: { password: password.value }
 21 |   })
 22 |     .then(async () => {
 23 |       await refreshSession()
 24 |       loginModal.value = false
 25 |     })
 26 |     .catch(err => toast.add({
 27 |       title: 'Wrong password',
 28 |       description: err.data?.message,
 29 |       color: 'red'
 30 |     }))
 31 |   password.value = ''
 32 |   logging.value = false
 33 | }
 34 | </script>
 35 | 
 36 | <template>
 37 |   <Head>
 38 |     <Html lang="en" />
 39 |   </Head>
 40 |   <NuxtLoadingIndicator />
 41 |   <UHeader>
 42 |     <template #logo>
 43 |       Atinotes
 44 |     </template>
 45 |     <template #right>
 46 |       <UColorModeButton />
 47 |       <UButton
 48 |         icon="i-simple-icons-github"
 49 |         to="https://github.com/atinux/atinotes"
 50 |         target="_blank"
 51 |         color="gray"
 52 |         variant="ghost"
 53 |       />
 54 |       <UButton
 55 |         v-if="loggedIn"
 56 |         color="gray"
 57 |         @click="clear"
 58 |       >
 59 |         Logout
 60 |       </UButton>
 61 |       <UButton
 62 |         v-else
 63 |         color="gray"
 64 |         @click="loginModal = true"
 65 |       >
 66 |         Login
 67 |       </UButton>
 68 |     </template>
 69 |   </UHeader>
 70 |   <UMain>
 71 |     <UContainer>
 72 |       <NuxtPage />
 73 |     </UContainer>
 74 |   </UMain>
 75 |   <UModal v-model="loginModal">
 76 |     <UCard>
 77 |       <UForm
 78 |         class="space-y-2"
 79 |         @submit="login"
 80 |       >
 81 |         <UFormGroup label="Password">
 82 |           <UInput
 83 |             v-model="password"
 84 |             type="password"
 85 |             icon="i-heroicons-lock-closed"
 86 |           />
 87 |         </UFormGroup>
 88 |         <UButton
 89 |           type="submit"
 90 |           :disabled="password.length < 1"
 91 |           :loading="logging"
 92 |         >
 93 |           Login
 94 |         </UButton>
 95 |       </UForm>
 96 |     </UCard>
 97 |   </UModal>
 98 |   <UNotifications />
 99 | </template>
100 | 


--------------------------------------------------------------------------------
/app/components/OgImage/OgImagePage.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | defineProps({
 3 |   title: {
 4 |     type: String,
 5 |     required: true
 6 |   },
 7 |   description: {
 8 |     type: String,
 9 |     required: true
10 |   }
11 | })
12 | 
13 | const { host } = useRequestURL()
14 | </script>
15 | 
16 | <template>
17 |   <div
18 |     class="w-full h-full flex flex-col justify-between items-start bg-white p-20 pt-24 pb-16"
19 |     style="background-image: linear-gradient(135deg, #fff 0%, #eee 100%);"
20 |   >
21 |     <div>
22 |       <h1 class="text-8xl mb-4 text-black flex items-center">
23 |         {{ title }}
24 |       </h1>
25 |       <p class="text-5xl text-gray-700 leading-tight pr-10">
26 |         {{ description }}
27 |       </p>
28 |     </div>
29 |     <div class="font-bold text-4xl flex flex-row">
30 |       notes.atinux.com
31 |     </div>
32 |   </div>
33 | </template>
34 | 


--------------------------------------------------------------------------------
/app/pages/[[slug]].vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | const editor = ref(null)
  3 | const editing = ref(false)
  4 | const saving = ref(false)
  5 | const slug = useRoute().params.slug || 'index'
  6 | const { data: page } = await useFetch(`/api/pages/${slug}`)
  7 | const { loggedIn } = useUserSession()
  8 | 
  9 | useSeoMeta({
 10 |   titleTemplate: '%s | Atinotes',
 11 |   title: () => page.value.parsed.data?.title || 'Missing title',
 12 |   description: () => page.value.parsed.data?.description || 'Missing description',
 13 |   ogTitle: () => (page.value.parsed.data?.title || 'Missing title') + ' | Atinotes'
 14 | })
 15 | 
 16 | defineOgImageComponent('OgImagePage', {
 17 |   title: page.value.parsed.data?.title || 'Missing title',
 18 |   description: page.value.parsed.data?.description || 'Missing description'
 19 | })
 20 | 
 21 | async function editMode() {
 22 |   if (!loggedIn.value) {
 23 |     return
 24 |   }
 25 |   editing.value = true
 26 |   await nextTick()
 27 |   editor.value.focus()
 28 |   autogrow()
 29 | }
 30 | 
 31 | function autogrow() {
 32 |   if (!editor.value) return
 33 |   editor.value.style.height = '5px'
 34 |   editor.value.style.height = `${editor.value.scrollHeight}px`
 35 | }
 36 | 
 37 | function save() {
 38 |   if (!editing.value || saving.value) return
 39 |   saving.value = true
 40 |   $fetch(`/api/pages/${slug}`, {
 41 |     method: 'PUT',
 42 |     body: { body: page.value.body }
 43 |   }).then(async ({ parsed }) => {
 44 |     page.value.parsed = parsed
 45 |     editing.value = saving.value = false
 46 |   }).catch((err) => {
 47 |     editing.value = saving.value = false
 48 |     alert(err.data.message)
 49 |   })
 50 | }
 51 | </script>
 52 | 
 53 | <template>
 54 |   <UPage>
 55 |     <template #right>
 56 |       <UContentToc :links="page.parsed?.toc?.links">
 57 |         <template
 58 |           v-if="loggedIn"
 59 |           #bottom
 60 |         >
 61 |           <UButton
 62 |             v-if="!editing"
 63 |             color="gray"
 64 |             @click="editMode"
 65 |           >
 66 |             Edit this page
 67 |           </UButton>
 68 |         </template>
 69 |       </UContentToc>
 70 |     </template>
 71 |     <UPageHeader
 72 |       v-if="!editing"
 73 |       :title="page.parsed?.data?.title"
 74 |       :description="page.parsed?.data?.description"
 75 |       @dblclick="editMode"
 76 |     />
 77 |     <UPageBody
 78 |       prose
 79 |       @dblclick="editMode"
 80 |     >
 81 |       <form
 82 |         v-if="editing"
 83 |         class="editor-wrapper"
 84 |         @submit.prevent="save"
 85 |       >
 86 |         <textarea
 87 |           ref="editor"
 88 |           v-model="page.body"
 89 |           @blur="save"
 90 |           @input="autogrow"
 91 |         />
 92 |         <UButton type="submit">
 93 |           {{ saving ? 'Saving' : 'Save' }}
 94 |         </UButton>
 95 |       </form>
 96 |       <MDCRenderer
 97 |         v-else
 98 |         :body="page.parsed.body"
 99 |         class="body"
100 |       />
101 |     </UPageBody>
102 |   </UPage>
103 | </template>
104 | 
105 | <style lang="postcss" scoped>
106 | textarea {
107 |   width: 100%;
108 |   min-height: 200px;
109 |   height: 100%;
110 |   border-width: 0;
111 |   outline: none;
112 |   resize: none;
113 | }
114 | </style>
115 | 


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


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://nuxt.com/docs/api/configuration/nuxt-config
 2 | export default defineNuxtConfig({
 3 |   compatibilityDate: '2024-07-29',
 4 |   future: { compatibilityVersion: 4 },
 5 | 
 6 |   extends: [
 7 |     // https://ui.nuxt.com/pro
 8 |     '@nuxt/ui-pro'
 9 |   ],
10 | 
11 |   modules: [
12 |     '@nuxthub/core',
13 |     '@nuxt/eslint',
14 |     '@nuxt/ui',
15 |     '@nuxt/content',
16 |     'nuxt-og-image',
17 |     'nuxt-auth-utils',
18 |     '@nuxtjs/plausible'
19 |   ],
20 | 
21 |   routeRules: {
22 |     // Used for notes.atinux.com
23 |     // Fell free to remove it
24 |     '/nuxt-custom-fetch': { redirect: { to: 'https://nuxt.com/docs/guide/recipes/custom-usefetch', statusCode: 302 } }
25 |   },
26 | 
27 |   hub: {
28 |     kv: true
29 |   },
30 | 
31 |   mdc: {
32 |     highlight: {
33 |       theme: {
34 |         default: 'vitesse-light',
35 |         dark: 'material-theme-palenight'
36 |       }
37 |     }
38 |   },
39 | 
40 |   eslint: {
41 |     config: {
42 |       stylistic: {
43 |         quotes: 'single',
44 |         commaDangle: 'never'
45 |       }
46 |     }
47 |   },
48 | 
49 |   devtools: {
50 |     enabled: true
51 |   }
52 | })
53 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "atinotes",
 3 |   "private": true,
 4 |   "packageManager": "pnpm@9.15.0",
 5 |   "scripts": {
 6 |     "build": "nuxt build",
 7 |     "dev": "nuxt dev",
 8 |     "generate": "nuxt generate",
 9 |     "preview": "nuxt preview",
10 |     "postinstall": "nuxt prepare",
11 |     "lint": "eslint ."
12 |   },
13 |   "dependencies": {
14 |     "@iconify-json/simple-icons": "^1.2.38",
15 |     "@nuxt/content": "^2.13.4",
16 |     "@nuxt/eslint": "^1.4.1",
17 |     "@nuxt/image": "^1.10.0",
18 |     "@nuxt/ui": "^2.20.0",
19 |     "@nuxt/ui-pro": "^1.6.0",
20 |     "@nuxthub/core": "^0.9.0",
21 |     "@nuxtjs/mdc": "^0.17.0",
22 |     "@nuxtjs/plausible": "^1.2.0",
23 |     "nuxt": "^3.17.5",
24 |     "nuxt-auth-utils": "^0.5.20",
25 |     "nuxt-og-image": "5.1.6",
26 |     "pathe": "^1.1.2",
27 |     "scule": "^1.3.0"
28 |   },
29 |   "devDependencies": {
30 |     "@nuxt/devtools": "^2.5.0",
31 |     "@nuxt/eslint-config": "^1.4.1",
32 |     "@types/node": "^24.0.3",
33 |     "eslint": "^9.29.0",
34 |     "typescript": "^5.8.3",
35 |     "vue-tsc": "^2.2.10",
36 |     "wrangler": "^4.20.1"
37 |   },
38 |   "resolutions": {
39 |     "@nuxtjs/tailwindcss": "6.12.2"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atinux/atinotes/e5638a325495a4f7decaec1d380b2b014f1a0607/public/favicon.ico


--------------------------------------------------------------------------------
/server/api/login.post.ts:
--------------------------------------------------------------------------------
 1 | export default eventHandler(async (event) => {
 2 |   if (!process.env.ADMIN_PASSWORD) {
 3 |     throw createError({
 4 |       statusCode: 500,
 5 |       message: 'Missing ADMIN_PASSWORD environment variable'
 6 |     })
 7 |   }
 8 |   const { password } = (await readBody(event)) || {}
 9 |   if (password !== process.env.ADMIN_PASSWORD) {
10 |     throw createError({
11 |       statusCode: 401,
12 |       message: 'Wrong password'
13 |     })
14 |   }
15 |   await setUserSession(event, {
16 |     user: { admin: true }
17 |   })
18 |   return { ok: true }
19 | })
20 | 


--------------------------------------------------------------------------------
/server/api/pages.ts:
--------------------------------------------------------------------------------
1 | export default eventHandler(async () => {
2 |   return hubKV().keys()
3 | })
4 | 


--------------------------------------------------------------------------------
/server/api/pages/[slug].get.ts:
--------------------------------------------------------------------------------
 1 | interface Note {
 2 |   body: string
 3 |   parsed?: object
 4 | }
 5 | 
 6 | export default eventHandler(async (event) => {
 7 |   const { slug } = event.context.params || {}
 8 |   if (!slug) {
 9 |     throw createError({ statusCode: 400, message: 'Missing slug' })
10 |   }
11 | 
12 |   let note = await hubKV().get<Note>(slug)
13 | 
14 |   if (!note) {
15 |     note = { body: '# Hello' }
16 |     note.parsed = await parseMarkdown(note.body)
17 |   }
18 | 
19 |   return { slug, ...note }
20 | })
21 | 


--------------------------------------------------------------------------------
/server/api/pages/[slug].put.ts:
--------------------------------------------------------------------------------
 1 | export default eventHandler(async (event) => {
 2 |   await requireUserSession(event)
 3 |   const { slug } = event.context.params || {}
 4 |   if (!slug) {
 5 |     throw createError({ statusCode: 400, message: 'Missing slug' })
 6 |   }
 7 |   // Force being a string
 8 |   const { body } = await readBody(event)
 9 |   const parsed = await parseMarkdown(body)
10 | 
11 |   await hubKV().set(slug, { body, parsed })
12 | 
13 |   return { slug, body, parsed }
14 | })
15 | 


--------------------------------------------------------------------------------
/server/routes/assets/[...pathname].get.ts:
--------------------------------------------------------------------------------
 1 | export default eventHandler(async (event) => {
 2 |   const { pathname } = event.context.params || {}
 3 |   if (!pathname) {
 4 |     throw createError({
 5 |       status: 400,
 6 |       message: 'Invalid path'
 7 |     })
 8 |   }
 9 | 
10 |   return hubBlob().serve(event, pathname)
11 | })
12 | 


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


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