feat(dashboard): paragraphs in 3D context

Author: Novout

packages/better-write-app/package.json

@@ -118,6 +118,7 @@
         "three/examples/jsm/capabilities/WebGL.js",
         "three/examples/jsm/geometries/TextGeometry.js",
         "three/examples/jsm/loaders/FontLoader",
+        "three/examples/jsm/loaders/FontLoader.js",
         "v-tooltip",
         "vue",
         "vue-i18n",

packages/better-write-app/public/three/fonts/poppins.typeface.json

@@ -28,46 +28,31 @@
     <PDFConfigurationSetParagraph
       v-motion
       :initial="{ opacity: 0, y: 30 }"
-      :visible-once="{
-        opacity: 1,
-        y: 0,
-      }"
+      :enter="{ opacity: 1, y: 0 }"
       :delay="0"
     />
     <PDFConfigurationSetHeadingOne
       v-motion
       :initial="{ opacity: 0, y: 30 }"
-      :visible-once="{
-        opacity: 1,
-        y: 0,
-      }"
+      :enter="{ opacity: 1, y: 0 }"
       :delay="0"
     />
     <PDFConfigurationSetHeadingTwo
       v-motion
       :initial="{ opacity: 0, y: 30 }"
-      :visible-once="{
-        opacity: 1,
-        y: 0,
-      }"
+      :enter="{ opacity: 1, y: 0 }"
       :delay="0"
     />
     <PDFConfigurationSetHeadingThree
       v-motion
       :initial="{ opacity: 0, y: 30 }"
-      :visible-once="{
-        opacity: 1,
-        y: 0,
-      }"
+      :enter="{ opacity: 1, y: 0 }"
       :delay="0"
     />
     <PDFConfigurationSetLineBreak
       v-motion
       :initial="{ opacity: 0, y: 30 }"
-      :visible-once="{
-        opacity: 1,
-        y: 0,
-      }"
+      :enter="{ opacity: 1, y: 0 }"
       :delay="0"
     />
   </div>

packages/better-write-app/src/components/editor/pdf/configuration/PDFConfiguration.vue

@@ -11,5 +11,34 @@ export default {
       website: 'Editor',
       desktop: 'Desktop',
     },
+    paragraphs: [
+      '— Entre o relento e o desespero, sobrevivi.',
+      `      É possível observar uma casa modesta ao
+final da estrada, interrompendo a passagem para
+todos os tipos de locomoção.`,
+      '— Não! Não! NÃO!',
+      `      — Desculpe-me pela arrogância, podê-lo-ei 
+retribuir satisfatoriamente em outras circunstâncias.`,
+      `      O que nos resta acabará por romper o futuro promissor.`,
+      `      O imbróglio não pode ser resolvido. A 
+complacência dos envolvidos na discussão foi dissolvida
+pelo puro ódio individualista.`,
+      `Comecei a palrar,
+Sufocando o desprovido,
+Aprendi a falhar,
+Compreendendo o improviso,
+Sustentei a salvar,
+Desfalecendo no auspício.`,
+      'Escrever melhor ou melhor escrever?',
+      'A criatividade é a salvação para o ostracismo cotidiano.',
+      '— Música para meus ouvidos! Uníssono da vitória!',
+      '— A passagem está logo ali! Vamos!',
+      `Kino apareceu na fresta, de relance, mais que o suficiente 
+para Linea aceitar a perda.`,
+      `No último esforço,
+Percebi a insolência,
+Recebendo o amor doloroso,
+Aceitei a clarência.`,
+    ],
   },
 }

packages/better-write-app/src/components/landing/LandingFirst.vue

@@ -1,17 +1,87 @@
 <template>
   <main class="min-h-screen w-full overflow-x-hidden">
-    <LandingFirst />
+    <section
+      id="landing-base"
+      class="flex flex-col bg-theme-background-2 z-max text-white items-center justify-between min-h-screen w-full overflow-x-hidden"
+    >
+      <div
+        v-if="webgl.isLoaded.value"
+        class="flex-1 bg-theme-background-2 container mx-auto flex px-5 py-24 flex-col justify-center items-center z-50"
+      >
+        <div class="lg:flex-grow w-full flex flex-col items-center text-center">
+          <div class="flex justify-start items-end">
+            <img
+              class="shadow-lg rounded-xs w-12 md:w-18"
+              src="@/assets/logo.png"
+            />
+            <span
+              class="ml-5 relative top-3 sm:top-4 lg:top-6 md:ml-10 text-3xl sm:text-4xl lg:text-5xl font-bold"
+              >Better Write.</span
+            >
+          </div>
+          <v-typical
+            v-motion
+            :initial="{ opacity: 0, y: 50 }"
+            :enter="{ opacity: 1, y: 0, transition: { delay: 300 } }"
+            class="mt-8 border-b leading-relaxed text-lg blink"
+            :steps="[
+              t('landing.first.typical.1'),
+              1500,
+              t('landing.first.typical.2'),
+              150,
+              t('landing.first.typical.3'),
+              1500,
+              t('landing.first.typical.3'),
+              1500,
+            ]"
+            :loop="Infinity"
+            :wrapper="'p'"
+          ></v-typical>
+          <div
+            v-motion
+            class="flex items-center justify-between w-1/2 lg:w-5/12 xl:w-1/3 mt-32"
+            :initial="{ opacity: 0 }"
+            :enter="{ opacity: 1, transition: { delay: 300 } }"
+          >
+            <button
+              class="flex items-center justify-center font-bold transition-colors shadow-xl w-full text-base md:text-lg px-6 py-3 md:px-5 md:py-5 border border-gray-800 bg-black-opacity hover:bg-gray-900 text-gray-200 flex flex-col"
+              @click.prevent.stop="onClick"
+            >
+              <div>
+                {{ t('landing.first.editor.website') }}
+              </div>
+              <div class="text-xs">
+                {{ version }}
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        v-else
+        class="flex justify-center items-center h-screen w-full bg-theme-background-2 z-umax"
+      >
+        <Spinner :width="150" :height="150" />
+      </div>
+    </section>
   </main>
 </template>
 
 <script setup lang="ts">
   import { useHead } from '@vueuse/head'
   import { useI18n } from 'vue-i18n'
-  import { computed, onMounted } from 'vue'
+  import { computed, onMounted, nextTick } from 'vue'
   import { useWebGL } from '@/use/webgl'
+  import { useEnv } from '@/use/env'
+  import { useNProgress } from '@vueuse/integrations'
+  import { useRouter } from 'vue-router'
+  import VTypical from 'vue-typical'
 
   const { t } = useI18n()
   const webgl = useWebGL()
+  const env = useEnv()
+  const { isLoading } = useNProgress()
+  const router = useRouter()
 
   onMounted(() => {
     document.body.removeAttribute('class')
@@ -28,4 +98,16 @@
   })
 
   webgl.init()
+
+  const version = computed(() => `v${env.packageVersion()}`)
+
+  const onClick = async () => {
+    isLoading.value = true
+
+    await nextTick
+
+    router.push('/').finally(() => {
+      isLoading.value = false
+    })
+  }
 </script>

packages/better-write-app/src/components/landing/LandingFooter.vue

@@ -4,6 +4,30 @@ import i18n from '@/lang'
 export const useDefines = () => {
   const { t } = i18n.global
 
+  const landing = () => {
+    const name = () => {
+      // vue-i18n limitation zzzzzzzzzzzzzzz
+      const arr = [
+        t('landing.first.paragraphs[0]'),
+        t('landing.first.paragraphs[1]'),
+        t('landing.first.paragraphs[3]'),
+        t('landing.first.paragraphs[4]'),
+        t('landing.first.paragraphs[5]'),
+        t('landing.first.paragraphs[6]'),
+        t('landing.first.paragraphs[7]'),
+        t('landing.first.paragraphs[8]'),
+        t('landing.first.paragraphs[9]'),
+        t('landing.first.paragraphs[10]'),
+        t('landing.first.paragraphs[11]'),
+        t('landing.first.paragraphs[12]'),
+      ]
+
+      return arr[Math.floor(Math.random() * arr.length)]
+    }
+
+    return { name }
+  }
+
   const pdf = () => {
     const fixFonts = () => {
       return ['EB Garamond', 'Cormorant Garamond']
@@ -215,5 +239,6 @@ export const useDefines = () => {
   return {
     pdf,
     themes,
+    landing,
   }
 }