Updated Documentation Site to Nuxt 3.8 (#38)

* Updated package to 3.8 for Nuxt * Nuxt Upgrade, OG Images, ready for testing * Update .env.example file with BASE_PATH configuration * Add workflows for site deployment --------- Co-authored-by: Jay Rogers <[email protected]>
serversideup · Dec 14, 2023 · 496dc2d · 496dc2d
1 parent 250ee37
commit 496dc2d
Show file tree

Hide file tree

Showing 13 changed files with 5,387 additions and 3,028 deletions.
diff --git a/.github/workflows/action_marketing-site-preview.yml b/.github/workflows/action_marketing-site-preview.yml
@@ -0,0 +1,14 @@
+name: Site Deployment - Preview 👨‍🔬
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+    paths:
+      - docs/**
+
+jobs:
+  publish-preview-site:
+    uses: ./.github/workflows/service_deploy-static-site.yml
+    secrets: inherit
+    with:
+      environment-name: 'Spin - Docs Site (Preview)'
diff --git a/.github/workflows/action_marketing-site-publish.yml b/.github/workflows/action_marketing-site-publish.yml
@@ -0,0 +1,14 @@
+name: Site Deployment - Production 🚀
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - docs/**
+
+jobs:
+  publish-production-site: 
+    secrets: inherit
+    uses: ./.github/workflows/service_deploy-static-site.yml
+    with:
+      environment-name: 'Spin - Docs Site (Production)'
diff --git a/.github/workflows/service_deploy-static-site.yml b/.github/workflows/service_deploy-static-site.yml
@@ -0,0 +1,48 @@
+on:
+  workflow_call:
+    inputs:
+      environment-name:
+        required: true
+        type: string
+
+jobs:
+  deploy-static-site:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      deployments: write
+    environment: 
+      name: ${{ inputs.environment-name }}
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: './docs/.nvmrc'
+
+      - name: Set env file
+        run: |
+          if [[ -z "$BASE_64_SECRET" ]]; then
+            echo '🚨🚨🚨 ENV File not set 🚨🚨🚨'  1>&2
+            exit 1
+          fi
+          echo $BASE_64_SECRET | base64 -d > .env
+        working-directory: ./docs
+        env:
+          BASE_64_SECRET: ${{ secrets.ENV_FILE_BASE64 }}
+
+      - run: | 
+              yarn install --frozen-lockfile
+              yarn build
+              npx nuxi generate
+        working-directory: ./docs
+
+      - name: Publish to Cloudflare Pages
+        uses: cloudflare/pages-action@v1
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          projectName: ssu-spin
+          directory: docs/.output/public
+          branch: ${{ github.head_ref || github.ref_name }}
+          gitHubToken: ${{ secrets.GITHUB_TOKEN }}
diff --git a/docs/.env.example b/docs/.env.example
@@ -1,5 +1,7 @@
 NUXT_APP_BASE_URL=/open-source/spin
 TOP_LEVEL_DOMAIN=http://localhost:3000
+BASE_PATH=http://localhost:3000/open-source/spin
+TOP_LEVEL_DOMAIN=http://localhost:3000
 ALGOLIA_API_KEY=changeme
 ALGOLIA_APPLICATION_ID=changeme
 ALGOLIA_INDEX=changeme
diff --git a/docs/.nvmrc b/docs/.nvmrc
@@ -1 +1 @@
-18
+20
diff --git a/docs/components/Global/OgImage/DocsImage.vue b/docs/components/Global/OgImage/DocsImage.vue
@@ -0,0 +1,35 @@
+<script setup>
+// inherited attrs can mess up the satori parser
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = defineProps({
+    title: {
+        type: String,
+        default: '',
+    },
+    description: {
+        type: String,
+        default: '',
+    }
+})
+</script>
+
+<template>
+    <div class="w-full h-full border-[#13B767] border-solid border-[14px] relative rounded-[20px] bg-[#13B767]">
+        <div class="w-full h-full bg-[#151A1F] relative rounded-[18px]">
+            <div style="position: absolute; left: 0px; top: 0px; bottom: 0px; width: 852px; padding-left: 24px; padding-right: 48px;">
+                <div style="display: flex; flex-direction: column; justify-content: center; height: 606px;">
+                    <span class="text-white font-sans text-8xl font-bold" v-text="title"></span>
+                    <span class="text-gray-400 font-sans text-3xl font-normal mt-6" v-text="description"></span>
+                </div>
+            </div>
+
+            <div style="position: absolute; right: 0px; top: 0px; bottom: 0px; width: 323px">
+                <img style="position: absolute; right: 30px; top: 30px;" src="data:image/png;base64,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"/>
+                <img style="position: absolute; right: 10px; bottom: 0px" src="data:image/png;base64,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"/>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/docs/components/content/CodeGroup.vue b/docs/components/content/CodeGroup.vue
@@ -24,7 +24,7 @@
                         :label="label"/>
 
                     <div class="relative overflow-x-auto p-4 text-xs text-white">
-                        <ContentSlot :use="$slots[tab.key]" unwrap="pre"/>
+                        <ContentSlot :use="$slots[tab.key]"/>
                         <CopyButton :code="$slots[tab.key]()[0].props.code"/>
                     </div>
                 </div>

diff --git a/docs/components/content/CodePanel.vue b/docs/components/content/CodePanel.vue
@@ -8,7 +8,7 @@
 
         <div class="group bg-white/2.5">
             <div class="relative overflow-x-auto p-4 text-xs text-white">
-                <ContentSlot :use="$slots.default" unwrap="pre"/>
+                <ContentSlot :use="$slots.default"/>
                 <CopyButton :code="$slots.default()[0].props.code"/>
             </div>
         </div>

diff --git a/docs/layouts/docs.vue b/docs/layouts/docs.vue
@@ -4,11 +4,11 @@
             <Link rel="preconnect" href="https://fonts.googleapis.com"/>
             <Link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
             <Link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"/>
-            <Link rel="apple-touch-icon" sizes="180x180" href="/open-source/spin/images/favicon/apple-touch-icon.png"/>
-            <Link rel="icon" type="image/png" sizes="32x32" href="/open-source/spin/images/favicon/favicon-32x32.png"/>
-            <Link rel="icon" type="image/png" sizes="16x16" href="/open-source/spin/images/favicon/favicon-16x16.png"/>
-            <Link rel="manifest" href="/open-source/spin/images/favicon/site.webmanifest"/>
-            <Link rel="mask-icon" href="/open-source/spin/images/favicon/safari-pinned-tab.svg" color="#5bbad5"/>
+            <Link rel="apple-touch-icon" sizes="180x180" :href="( basePath != '/' ? basePath : '' )+'/images/favicon/apple-touch-icon.png'"/>
+            <Link rel="icon" type="image/png" sizes="32x32" :href="( basePath != '/' ? basePath : '' )+'/images/favicon/favicon-32x32.png'"/>
+            <Link rel="icon" type="image/png" sizes="16x16" :href="( basePath != '/' ? basePath : '' )+'/images/favicon/favicon-16x16.png'"/>
+            <Link rel="manifest" :href="( basePath != '/' ? basePath : '' )+'/images/favicon/site.webmanifest'"/>
+            <Link rel="mask-icon" :href="( basePath != '/' ? basePath : '' )+'/images/favicon/safari-pinned-tab.svg'" color="#5bbad5"/>
             <Meta name="msapplication-TileColor" content="#da532c"/>
             <Meta name="theme-color" content="#ffffff"/>
         </Head>
@@ -40,6 +40,10 @@
 </template>
 
 <script setup>
+const route = useRoute();
+const { basePath, domain } = useRuntimeConfig().public;
+const { page } = useContent();
+
 useHead({
     htmlAttrs: {
         lang: 'en'
@@ -49,24 +53,22 @@ useHead({
     }
 })
 
-const route = useRoute();
-const { basePath, domain } = useRuntimeConfig().public;
-const { page } = useContent();
-
 useSeoMeta({
     ogLocale: 'en_US',
     ogUrl: domain+basePath+route.path,
     ogType: 'website',
     ogSiteName: 'Server Side Up - Spin',
-    ogImage: domain+basePath+'/images/social-image.jpg',
-    ogImageWidth: 1200,
-    ogImageHeight: 627,
-    ogImageType: 'image/png',
-    ogTitle: () => page.value?.head.title,
+    ogTitle: page.value?.head.title,
+    ogDescription: page.value.description,
     twitterCard: 'summary_large_image',
-    twitterDescription: () => page.value?.description,
-    twitterImage: domain+basePath+'/images/social-image.jpg',
+    twitterDescription: page.value?.description,
     twitterSite: '@serversideup',
-    twitterTitle: () => page.value?.head.title
+    twitterTitle: page.value?.head.title
 })
+
+defineOgImage({
+    component: 'DocsImage',
+    title: page.value.title,
+    description: page.value.description
+});
 </script>