WIP

pentacent · May 14, 2024 · 5d3eb8e · 5d3eb8e
1 parent 2898b7b
commit 5d3eb8e
Show file tree

Hide file tree

Showing 67 changed files with 24,869 additions and 32,662 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,11 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=827846
+  // for the documentation about the extensions.json format
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "EditorConfig.EditorConfig",
+    "Orta.vscode-jest",
+    "Vue.volar",
+    "Vue.vscode-typescript-vue-plugin"
+  ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,20 @@
+{
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "editor.formatOnSave": true,
+  "eslint.format.enable": true,
+  "typescript.format.enable": false,
+  "editor.quickSuggestions": {
+    "strings": true
+  }
+}
diff --git a/app.vue b/app.vue
@@ -0,0 +1,5 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
diff --git a/components/README.md b/components/README.md
diff --git a/components/global/docs-image.vue b/components/global/docs-image.vue
@@ -21,9 +21,7 @@ export default {
   },
   data() {
     return {
-      image: this.src.startsWith('~')
-        ? require(this.src)
-        : require(`~/assets/${this.src}`),
+      image: this.src.startsWith('/') ? this.src : `/${this.src}`,
     }
   },
 }

diff --git a/components/newsletter.vue b/components/newsletter.vue
@@ -6,17 +6,17 @@
     target="_blank"
   >
     <div class="flex flex-col">
-      <label for="contact_email">{{ $t('email') }}</label
+      <label for="contact_email">{{ t('email') }}</label
       ><input
         id="contact_email"
         name="contact[email]"
-        :placeholder="$t('email:placeholder')"
+        :placeholder="t('email:placeholder')"
         class="bg-white-200 text-black shadow-sm p-2"
         type="email"
       />
     </div>
     <div class="flex flex-col">
-      <label for="contact_first_name">{{ $t('first-name') }}</label
+      <label for="contact_first_name">{{ t('first-name') }}</label
       ><input
         id="contact_first_name"
         class="bg-white-200 text-black shadow-sm p-2"
@@ -36,14 +36,14 @@
       <button
         class="inline-flex items-center gap-4 px-4 py-4 bg-green-600 text-white font-semibold rounded-lg shadow-sm hover:bg-green-500 hover:shadow-lg"
       >
-        {{ $t('submit') }}
+        {{ t('submit') }}
       </button>
     </div>
     <i18n tag="div" path="privacy-hint" class="text-xs">
       <template #link>
-        <a href="https://pentacent.com/privacy" class="underline">{{
-          $t('privacy-hint:link')
-        }}</a>
+        <a href="https://pentacent.com/privacy" class="underline">
+          {{ t('privacy-hint:link') }}
+        </a>
       </template>
     </i18n>
   </form>
@@ -54,6 +54,13 @@ export default {
   data() {
     return { hCaptchaReady: false, captchaLoaded: false }
   },
+  setup() {
+    const { t } = useI18n({
+      useScope: 'local',
+    })
+
+    return { t }
+  },
   head() {
     return {
       script: [
@@ -93,7 +100,7 @@ export default {
 }
 </style>
 
-<i18n>
+<i18n lang="json">
 {
   "en": {
     "email": "Email",

diff --git a/components/page-footer.vue b/components/page-footer.vue
@@ -6,15 +6,15 @@
       <p>Made in 🇩🇪 ❤️ 🇪🇺.</p>
       <p class="text-sm">
         <a class="underline" href="/credits">Credits</a>
-        <a class="underline ml-2" href="https://pentacent.com/legal"
-          >Legal notice</a
-        >
-        <nuxt-link class="underline ml-2" to="/privacy"
-          >Privacy policy</nuxt-link
-        >
-        <nuxt-link class="underline ml-2" to="/terms"
-          >Terms &amp; Conditions</nuxt-link
-        >
+        <a class="underline ml-2" href="https://pentacent.com/legal">
+          Legal notice
+        </a>
+        <nuxt-link class="underline ml-2" to="/privacy">
+          Privacy policy
+        </nuxt-link>
+        <nuxt-link class="underline ml-2" to="/terms">
+          Terms &amp; Conditions
+        </nuxt-link>
       </p>
     </div>
     <div
@@ -26,8 +26,9 @@
         :key="locale.code"
         :to="path"
         :class="[{ 'font-bold': $i18n.locale === locale.code }]"
-        >{{ locale.name }}</nuxt-link
       >
+        {{ locale.name }}
+      </nuxt-link>
     </div>
   </footer>
 </template>

diff --git a/components/participate-cta.vue b/components/participate-cta.vue
@@ -1,56 +1,53 @@
 <template>
-  <lazy-hydrate never>
-    <div class="my-16">
-      <h2
-        class="text-3xl font-semibold flex flex-col md:flex-row items-center gap-5"
+  <div class="my-16">
+    <h2
+      class="text-3xl font-semibold flex flex-col md:flex-row items-center gap-5"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        class="h-12 text-green-500"
       >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          class="h-12 text-green-500"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
-          /></svg
-        >{{ $t('h2') }}
-      </h2>
-      <ul class="text-lg">
-        <li class="mt-5">
-          <a class="underline" rel="me" href="https://fosstodon.org/@keila">{{
-            $t('mastodon')
-          }}</a>
-        </li>
-        <li class="mt-5">
-          <a class="underline" href="https://twitter.com/keila_io">{{
-            $t('twitter')
-          }}</a>
-        </li>
-        <li class="mt-5">
-          <a class="underline" href="https://app.keila.io/forms/frm_GX8qGEZd">{{
-            $t('newsletter')
-          }}</a>
-        </li>
-        <li class="mt-5">
-          <a class="underline" href="https://github.com/pentacent/keila">{{
-            $t('github')
-          }}</a>
-        </li>
-      </ul>
-    </div>
-  </lazy-hydrate>
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+        />
+      </svg>
+      {{ t('h2') }}
+    </h2>
+    <ul class="text-lg">
+      <li class="mt-5">
+        <a class="underline" rel="me" href="https://fosstodon.org/@keila">
+          {{ t('mastodon') }}
+        </a>
+      </li>
+      <li class="mt-5">
+        <a class="underline" href="https://twitter.com/keila_io">
+          {{ t('twitter') }}
+        </a>
+      </li>
+      <li class="mt-5">
+        <a class="underline" href="https://app.keila.io/forms/frm_GX8qGEZd">
+          {{ t('newsletter') }}
+        </a>
+      </li>
+      <li class="mt-5">
+        <a class="underline" href="https://github.com/pentacent/keila">
+          {{ t('github') }}
+        </a>
+      </li>
+    </ul>
+  </div>
 </template>
 
-<script>
-import LazyHydrate from 'vue-lazy-hydration'
-
-export default {
-  components: { LazyHydrate },
-}
+<script lang="ts" setup>
+const { t } = useI18n({
+  useScope: 'local',
+})
 </script>
 
 <style scoped>
@@ -67,7 +64,7 @@ export default {
 }
 </style>
 
-<i18n>
+<i18n lang="json">
 {
   "en": {
     "h2": "Participate & Follow us",

diff --git a/content/legal/privacy.md b/content/legal/privacy.md
@@ -97,4 +97,4 @@ Hetzner Online AG, based in Germany, is a leading German data center operator. W
 ## [Tawk.to Inc./Tawk.to Ltd](https://www.tawk.to/)
 Tawk.to, based in the USA, operates the chat widget on the Keila website.
 Data for users from the European Economic Area are processed by their affiliate,
-Tawk.to Ltd, based in the United Kingdom.
+Tawk.to Ltd, based in the United Kingdom.
diff --git a/layouts/README.md b/layouts/README.md
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -14,60 +14,68 @@
             class="flex flex-wrap gap-2 align-center justify-end font-semibold text-black"
           >
             <li class="hidden md:block">
-              <nuxt-link :to="localePath('/')" class="px-3 py-5">{{
-                $t('menu:home')
-              }}</nuxt-link>
+              <nuxt-link :to="localePath('/')" class="px-3 py-5">
+                {{ t('menu:home') }}
+              </nuxt-link>
             </li>
             <li class="hidden md:block">
-              <nuxt-link to="/docs" class="px-3 py-5">{{
-                $t('menu:docs')
-              }}</nuxt-link>
+              <nuxt-link to="/docs" class="px-3 py-5">
+                {{ t('menu:docs') }}
+              </nuxt-link>
             </li>
             <li class="hidden md:block">
-              <nuxt-link :to="localePath('/try')" class="px-3 py-5">{{
-                $t('menu:pricing')
-              }}</nuxt-link>
+              <nuxt-link :to="localePath('/try')" class="px-3 py-5">
+                {{ t('menu:pricing') }}
+              </nuxt-link>
             </li>
             <li class="hidden md:block">
               <a
                 href="https://github.com/pentacent/keila"
                 target="_blank"
                 class="px-3 py-5"
-                >{{ $t('menu:github') }}</a
               >
+                {{ t('menu:github') }}
+              </a>
             </li>
             <div class="hidden md:block flex-grow"></div>
             <li class="block">
-              <a href="https://app.keila.io" class="px-3 py-5">{{
-                $t('menu:login')
-              }}</a>
+              <a href="https://app.keila.io" class="px-3 py-5">
+                {{ t('menu:login') }}
+              </a>
             </li>
             <li class="block">
               <a
                 href="https://app.keila.io/auth/register"
                 class="p-3 bg-green-600 font-semibold text-white rounded-md hover:bg-green-500"
               >
-                {{ $t('menu:try') }}
+                {{ t('menu:try') }}
               </a>
             </li>
           </ul>
         </nav>
       </div>
     </header>
     <main>
-      <Nuxt />
+      <slot />
     </main>
     <page-footer class="max-w-4xl" />
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import logo from '../components/logo.vue'
-import ogImage from '@/static/og_image.png'
+import ogImage from '@/public/og_image.png'
 const baseUrl = process.env.BASE_URL || ''
 
 export default {
   components: { logo },
+  setup() {
+    const { t } = useI18n({
+      useScope: 'local',
+    })
+
+    return { t }
+  },
   head() {
     const i18nHead = this.$nuxtI18nHead
       ? this.$nuxtI18nHead({ addSeoAttributes: true })
@@ -139,7 +147,7 @@ body {
 }
 </style>
 
-<i18n>
+<i18n lang="json">
 {
   "en": {
     "meta:description": "A reliable and easy-to-use email newsletter tool. Keila is an Open Source alternative to Mailchimp that you can host yourself.",