docs: fix deploy

neolitec · Oct 9, 2023 · daf3491 · daf3491
1 parent a68e3e7
commit daf3491
Show file tree

Hide file tree

Showing 10 changed files with 192 additions and 69 deletions.
diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml
@@ -2,9 +2,10 @@ name: Build and Deploy docs
 
 on:
   workflow_dispatch:
-  workflow_run:
-    workflows: [Release]
-    types: [completed]
+  pull_request:
+  # workflow_run:
+  #   workflows: [Release]
+  #   types: [completed]
 
 permissions:
   contents: write
@@ -21,24 +22,23 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 16
-          cache: 'yarn'
 
       - name: Install and Build 🔧
         run: |
           cd docs
           yarn install --frozen-lockfile
           yarn build
 
-      - name: Deploy 🚀
-        id: deploy
-        uses: JamesIves/github-pages-deploy-action@v4
-        with:
-          folder: docs/dist
+      - name: Deploy with gh-pages 🚀
+        run: |
+          cd docs
+          git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
+          yarn deploy --user "github-actions-bot <[email protected]>"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: New version notification
         uses: neolitec/[email protected]
-        continue-on-error: true
-        if: ${{ steps.deploy.outputs.deployment-status == 'success' }}
         with:
           discord_webhook_url: ${{ secrets.DISCORD_WEBHOOK }}
           title: '📖 Documentation for ${{ github.repository }} has been deployed'

diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
@@ -1,15 +1,20 @@
 import mdx from '@astrojs/mdx'
 import react from '@astrojs/react'
 import { defineConfig } from 'astro/config'
-import { fileURLToPath } from 'node:url'
 import theme from './shiki-theme.json'
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [mdx({
-    syntaxHighlight: 'shiki',
-    shikiConfig: { theme: 'nord' },
-  }), react()],
+  site: 'https://neolitec.github.com/kevlar-tabs',
+  base: '/kevlar-tabs',
+  trailingSlash: 'never',
+  integrations: [
+    mdx({
+      syntaxHighlight: 'shiki',
+      shikiConfig: { theme: 'nord' }
+    }),
+    react()
+  ],
   markdown: {
     syntaxHighlight: 'prism',
     shikiConfig: {
@@ -20,40 +25,10 @@ export default defineConfig({
       // Note: Shiki has countless langs built-in, including .astro!
       // https://github.com/shikijs/shiki/blob/main/docs/languages.md
       // langs: ['ts', 'tsx', 'js', 'jsx', 'json', 'css', 'html', 'astro'],
-      langs: [
-        'tsx',
-        {
-          language: 'source.css.styled',
-          scopeName: 'source.css.styled',
-          path: fileURLToPath(new URL('css.styled.json', import.meta.url)),
-        },
-        {
-          injectTo: [
-            'source.js',
-            'source.ts',
-            'source.jsx',
-            'source.js.jsx',
-            'source.tsx',
-            'source.vue',
-            'source.svelte',
-          ],
-          scopeName: 'styled',
-          path: fileURLToPath(new URL('styled.json', import.meta.url)),
-          embeddedLanguages: {
-            'source.css.scss': 'css',
-            'meta.embedded.line.ts': 'typescript',
-          },
-        },
-
-        //   {
-        //   id: 'styled',
-        //   scopeName: 'tsx',
-        //   path: fileURLToPath(new URL('styled.json', import.meta.url)),
-        // }
-      ],
+      langs: ['tsx'],
       // Enable word wrap to prevent horizontal scrolling
-      wrap: true,
-    },
+      wrap: true
+    }
   },
   vite: {
     css: {
@@ -66,13 +41,9 @@ export default defineConfig({
             @use "src/styles/effects" as *;
             @use "node_modules/include-media/dist/include-media" as *;
             $breakpoints: (small: 800px, medium: 1024px, large: 1440px);
-          `,
-
-        },
-      },
-    },
-    // ssr: {
-    //   noExternal: ['styled-components']
-    // }
-  },
+          `
+        }
+      }
+    }
+  }
 })
diff --git a/docs/package.json b/docs/package.json
@@ -7,7 +7,8 @@
 		"start": "astro dev",
 		"build": "astro build",
 		"preview": "astro preview",
-		"astro": "astro"
+		"astro": "astro",
+    "deploy": "gh-pages --dist dist --dotfiles"
 	},
 	"dependencies": {
 		"@astrojs/mdx": "^0.17.0",
@@ -17,6 +18,7 @@
 		"@types/react-dom": "^18.0.6",
 		"astro": "^2.0.14",
 		"copy-to-clipboard": "^3.3.3",
+		"gh-pages": "^5.0.0",
 		"include-media": "^2.0.0",
 		"kevlar-tabs": "^1.5.0",
 		"react": "^18.0.0",

diff --git a/docs/public/.nojekyll b/docs/public/.nojekyll
diff --git a/docs/src/components/LogoAndName.astro b/docs/src/components/LogoAndName.astro
@@ -3,7 +3,11 @@ import { SITE } from '../config'
 ---
 
 <a class="logo-name" href={SITE.url}>
-  <img class="logo-name__logo" src="/logo.svg" alt={SITE.title} />
+  <img
+    class="logo-name__logo"
+    src={`${import.meta.env.BASE_URL}/logo.svg`}
+    alt={SITE.title}
+  />
   <h1 class="logo-name__title">{SITE.title}</h1>
 </a>
 <style lang="scss">

diff --git a/docs/src/config.ts b/docs/src/config.ts
@@ -10,7 +10,7 @@ interface ISite {
 
 export const SITE: ISite = {
   title: 'Kevlar Tabs',
-  url: 'https://kevlar-tabs.netlify.app',
+  url: 'https://neolitec.github.io/kevlar-tabs',
   subtitle: 'A simple tabs library for React.',
   description: '100% customizable, accessible and built with Typescript.',
   github: 'https://github.com/neolitec/kevlar-tabs',

diff --git a/docs/src/layouts/DocLayout.astro b/docs/src/layouts/DocLayout.astro
@@ -15,7 +15,11 @@ const { title } = Astro.props
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href={`${import.meta.env.BASE_URL}/logo.svg`}
+    />
     <title>{SITE.title} - {title}</title>
   </head>
   <body class="doc-container">

diff --git a/docs/src/layouts/Layout.astro b/docs/src/layouts/Layout.astro
@@ -16,7 +16,11 @@ const { title } = Astro.props
     <meta name="viewport" content="width=device-width" />
     <title>{title}</title>
     {SITE.description && <meta name="description" content={SITE.description} />}
-    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href={`${import.meta.env.BASE_URL}/logo.svg`}
+    />
     <meta property="og:type" content="website" />
     <meta property="og:title" content={SITE.title} />
     <meta property="og:image" content={`${SITE.url}/og-image.png`} />

diff --git a/docs/src/pages/index.astro b/docs/src/pages/index.astro
@@ -21,7 +21,7 @@ const cssCode = rawCssCode.replace('.example__tabs', '.tabs')
         <div class="logo-container__background"></div>
         <img
           class="logo-container__logo"
-          src="/logo.svg"
+          src={`${import.meta.env.BASE_URL}/logo.svg`}
           alt={`Logo of ${SITE.title}`}
         />
       </div>