Merge branch 'deploy' into 'main'

Deploy See merge request flycro/flycro-me!6
2022-01-09 14:21:59 +00:00 · 2022-01-09 14:21:59 +00:00 · 5c90389f2b
parent d716e4e63d 19f9f9bc32
commit 5c90389f2b
7 changed files with 1344 additions and 1412 deletions
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -1,9 +1,9 @@
 --- 
-before_script: 
-  - "echo \"Before script\""
-  - "cd /var/www/html/flycro.me/deployment-flycro.me"
 building: 
+  only:
+    - deploy
  script: 
+    - "cd /var/www/html/flycro.me/deployment-flycro.me"
    - "echo \"Build\""
    - "git reset --hard"
    - "git pull origin deploy"
@ -16,6 +16,8 @@ building:
    - "cp -af /var/www/html/flycro.me/deployment-flycro.me/dist/. /var/www/html/flycro.me/flycro.me/"
  stage: build
 deploying: 
+  only:
+    - deploy
  script: 
    - "echo \"Deployed\""
  stage: deploy
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "private": true,
  "scripts": {
-    "build": "vite build",
+    "build": "vite-ssg build",
    "dev": "vite --port 3333 --open",
    "lint": "eslint \"**/*.{vue,ts,js}\"",
    "preview": "vite preview",
@ -14,8 +14,8 @@
  "dependencies": {
    "@vueuse/core": "^7.4.1",
    "@vueuse/head": "^0.7.4",
+    "@vueuse/motion": "^2.0.0-beta.9",
    "dayjs": "^1.10.7",
-    "motion": "^10.5.0",
    "nprogress": "^0.2.0",
    "pinia": "^2.0.9",
    "prism-theme-vars": "^0.2.2",
@ -47,6 +47,7 @@
    "https-localhost": "^4.7.0",
    "markdown-it-link-attributes": "^4.0.0",
    "markdown-it-prism": "^2.2.1",
+    "patch-vue-directive-ssr": "^0.0.1",
    "pnpm": "^6.24.3",
    "typescript": "^4.5.4",
    "unplugin-auto-import": "^0.5.4",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/modules/motion.ts
+++ b/src/modules/motion.ts
@ -0,0 +1,6 @@
+import { MotionPlugin } from '@vueuse/motion'
+import type { UserModule } from '~/types'
+
+export const install: UserModule = ({ app, isClient }) => {
+  isClient && app.use(MotionPlugin)
+}
--- a/src/pages/posts/[slug].vue
+++ b/src/pages/posts/[slug].vue
@ -7,26 +7,22 @@
 </route>

 <template>
-  <div v-if="post && Object.keys(post.currentPost).length !== 0">
-    <Motion
-      :initial="{ opacity: 0 }"
-      :animate="{ opacity: 1}"
-      :transition="{ duration: 0.5, easing: 'ease-in-out' }"
-    >
-      <div class="text-3xl my-2">
-        <span class="font-bold text-fly-600 dark:text-fly-500">|</span>
-        <span class="align-middle mx-2">{{ post.currentPost.title }}</span>
-      </div>
-      <div v-html="post.currentPost.body" />
-    </Motion>
+  <div
+    v-if="post && Object.keys(post.currentPost).length !== 0" v-motion
+    :initial="{ opacity: 0 }" :enter="{opacity: 1, transition: {delay: 0.5,} }"
+  >
+    <div class="text-3xl my-2">
+      <span class="font-bold text-fly-600 dark:text-fly-500">|</span>
+      <span class="align-middle mx-2">{{ post.currentPost.title }}</span>
+    </div>
+    <div v-html="post.currentPost.body" />
  </div>
-  <router-link class="no-underline dark:hover:text-fly-500" :to="`/posts/`">
+  <router-link v-if="post && Object.keys(post.currentPost).length !== 0" class="no-underline dark:hover:text-fly-500" :to="`/posts/`">
    Back to Posts
  </router-link>
 </template>

 <script setup lang="ts">
-import { Motion } from 'motion/vue'
 import { usePostStore } from '~/stores/post'

 const post = usePostStore()
--- a/src/pages/posts/index.vue
+++ b/src/pages/posts/index.vue
@ -10,43 +10,33 @@
  <div>
    <h1>Blog</h1>
    <div>
-      <ul v-if="post.postList && post.loading === false" key="test" class="list-none">
-        <Motion
-          :initial="{ opacity: 0 }"
-          :animate="{ opacity: 1}"
-          :transition="{ duration: 0.5, easing: 'ease-in-out' }"
-        >
-          <router-link v-for="p in post.postList" :key="p.slug" class="no-underline dark:hover:text-fly-500" :to="`/posts/${p.slug}`">
-            <li>
-              <div class="text-xl">
-                {{ p.title }}
-              </div>
-              <div class="flex justify-start flex-row">
-                <div class="text-xs">
-                  {{ convertDate(p.date_created) }}
-                </div>
-              </div>
-            </li>
-          </router-link>
-        </Motion>
-      </ul>
-
-      <Motion
-        :initial="{ opacity: 0 }"
-        :animate="{ opacity: 1}"
-        :transition="{ duration: 0.5, easing: 'ease-in-out' }"
+      <ul
+        v-if="post.postList && post.loading === false" key="test" v-motion class="list-none"
+        :initial="{ opacity: 0 }" :enter="{opacity: 1, transition: {delay: 0.5,} }"
      >
-        <div v-if="post.loading === false && post.postList.length === 0" class="text-xl">
-          No Posts found
-        </div>
-      </Motion>
+        <router-link v-for="p in post.postList" :key="p.slug" class="no-underline dark:hover:text-fly-500" :to="`/posts/${p.slug}`">
+          <li>
+            <div class="text-xl">
+              {{ p.title }}
+            </div>
+            <div class="flex justify-start flex-row">
+              <div class="text-xs">
+                {{ convertDate(p.date_created) }}
+              </div>
+            </div>
+          </li>
+        </router-link>
+      </ul>
+      <div
+        v-if="post.loading === false && post.postList.length === 0" class="text-xl"
+      >
+        No Posts found
+      </div>
    </div>
  </div>
 </template>

 <script setup lang="ts">
-import { Motion } from 'motion/vue'
-import type { Ref } from 'vue'
 import dayjs from 'dayjs'
 import { usePostStore } from '~/stores/post'

@ -58,7 +48,6 @@ useHead({
 })

 const post = usePostStore()
-const show = ref(false)

 function convertDate(date: string): string {
  return dayjs(date).format('DD. MMMM YYYY')
--- a/src/styles/main.css
+++ b/src/styles/main.css
@ -75,6 +75,7 @@ html.dark {
       url('/assets/fonts/titillium-web-v10-latin-200.woff') format('woff'), /* Modern Browsers */
       url('/assets/fonts/titillium-web-v10-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/assets/fonts/titillium-web-v10-latin-200.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
+  font-display: swap;
 }

 /* titillium-web-200italic - latin */
@ -89,6 +90,7 @@ html.dark {
       url('/assets/fonts/titillium-web-v10-latin-200italic.woff') format('woff'), /* Modern Browsers */
       url('/assets/fonts/titillium-web-v10-latin-200italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/assets/fonts/titillium-web-v10-latin-200italic.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
+  font-display: swap;
 }

 /* titillium-web-300 - latin */
@ -103,6 +105,7 @@ html.dark {
       url('/assets/fonts/titillium-web-v10-latin-300.woff') format('woff'), /* Modern Browsers */
       url('/assets/fonts/titillium-web-v10-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/assets/fonts/titillium-web-v10-latin-300.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
+  font-display: swap;
 }

 /* titillium-web-300italic - latin */
@ -117,6 +120,7 @@ html.dark {
       url('/assets/fonts/titillium-web-v10-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('/assets/fonts/titillium-web-v10-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/assets/fonts/titillium-web-v10-latin-300italic.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
+  font-display: swap;
 }

 /* titillium-web-regular - latin */
@ -131,6 +135,7 @@ html.dark {
       url('/assets/fonts/titillium-web-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/assets/fonts/titillium-web-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/assets/fonts/titillium-web-v10-latin-regular.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
+  font-display: swap;
 }

 /* titillium-web-italic - latin */
@ -145,6 +150,7 @@ html.dark {
       url('/assets/fonts/titillium-web-v10-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('/assets/fonts/titillium-web-v10-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/assets/fonts/titillium-web-v10-latin-italic.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
+  font-display: swap;
 }

 /* titillium-web-600 - latin */
@ -159,6 +165,7 @@ html.dark {
       url('/assets/fonts/titillium-web-v10-latin-600.woff') format('woff'), /* Modern Browsers */
       url('/assets/fonts/titillium-web-v10-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/assets/fonts/titillium-web-v10-latin-600.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
+  font-display: swap;
 }

 /* titillium-web-600italic - latin */
@ -173,6 +180,7 @@ html.dark {
       url('/assets/fonts/titillium-web-v10-latin-600italic.woff') format('woff'), /* Modern Browsers */
       url('/assets/fonts/titillium-web-v10-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/assets/fonts/titillium-web-v10-latin-600italic.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
+  font-display: swap;
 }

 /* titillium-web-700 - latin */
@ -187,6 +195,7 @@ html.dark {
       url('/assets/fonts/titillium-web-v10-latin-700.woff') format('woff'), /* Modern Browsers */
       url('/assets/fonts/titillium-web-v10-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/assets/fonts/titillium-web-v10-latin-700.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
+  font-display: swap;
 }

 /* titillium-web-700italic - latin */
@ -201,6 +210,7 @@ html.dark {
       url('/assets/fonts/titillium-web-v10-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('/assets/fonts/titillium-web-v10-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/assets/fonts/titillium-web-v10-latin-700italic.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
+  font-display: swap;
 }

 /* titillium-web-900 - latin */
@ -215,5 +225,6 @@ html.dark {
       url('/assets/fonts/titillium-web-v10-latin-900.woff') format('woff'), /* Modern Browsers */
       url('/assets/fonts/titillium-web-v10-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/assets/fonts/titillium-web-v10-latin-900.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
+  font-display: swap;
 }