hrm docs - deploy updates

Author: EhfazAdnan

.github/workflows/ci.yml

@@ -0,0 +1,50 @@
+name: Deploy Static Site to GitHub Pages
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  # This single job handles installing dependencies, generating the static site, and deploying it.
+  deploy_pages:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          run_install: false # Skip initial install here
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: pnpm
+
+      - name: Install Dependencies
+        # Using --frozen-lockfile ensures reproducible builds
+        run: pnpm install --frozen-lockfile
+
+      - name: Generate Static Site
+        # This step runs your "generate" script: "nuxt prepare && nuxt generate www"
+        # This command is responsible for generating files into 'www/.output/public'
+        env:
+          NUXT_APP_BASE_URL: /comforthrmdocsnuxt/ # Setting the BASE_URL environment variable for Nuxt
+        run: pnpm run generate
+
+      - name: Deploy to GitHub Pages
+        # This action pushes the generated content to the 'gh-pages' branch
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          # Ensure this path matches the output of 'nuxt generate www'
+          publish_dir: www/.output/public
+          publish_branch: gh-pages
+          # Optional: Add a custom commit message
+          commit_message: Deploying static Nuxt site to gh-pages

components/OgImage/ShadcnDocs.vue

@@ -5,8 +5,8 @@
     :style="`background-size: 120px 120px; background-image: linear-gradient(to right, ${colorMode === 'light' ? '#e5e7eb' : '#27272a'} 1px, transparent 1px), linear-gradient(to bottom, ${colorMode === 'light' ? '#e5e7eb' : '#27272a'} 1px, transparent 1px);`"
   >
     <div class="mb-4 flex">
-      <img v-if="colorMode === 'light'" :src="logo.light" height="65" />
-      <img v-else :src="logo.dark" height="65" />
+      <NuxtImg v-if="colorMode === 'light'" :src="logo.light" height="65" />
+      <NuxtImg v-else :src="logo.dark" height="65" />
       <span
         v-if="showTitle && siteTitle"
         class="ml-4 self-center text-4xl font-bold"

components/content/FeaturesSection.vue

@@ -11,12 +11,12 @@
           <CardContentCustom class="flex flex-col items-center">
             <div class="mb-6 flex h-20 w-20 items-center justify-center rounded-2xl bg-primary/10 p-3 group-hover:bg-primary/20 transition-colors">
               <template v-if="feature?.icon">
-                <img
+                <NuxtImg
                     :src="feature.icon.light || '/placeholder-icon-light.png'"
                     :alt="feature.icon.alt || feature.title"
                     class="h-10 w-10 object-contain dark:hidden"
                 />
-                <img
+                <NuxtImg
                     :src="feature.icon.dark || feature.icon.light || '/placeholder-icon-dark.png'"
                     :alt="feature.icon.alt || feature.title"
                     class="hidden h-10 w-10 object-contain dark:block"

components/content/HeroAltCustom.vue

@@ -49,12 +49,12 @@
     <div class="flex items-center justify-center order-first md:order-last">
       <div class="flex flex-col items-center gap-4">
         <div class="flex items-center justify-center rounded-2xl bg-muted/20">
-          <img
+          <NuxtImg
               :src="logo?.light"
               :alt="logo?.alt"
               class="h-80 w-80 object-contain dark:hidden"
           />
-          <img
+          <NuxtImg
               :src="logo?.dark || logo?.light"
               :alt="logo?.alt"
               class="hidden h-80 w-80 object-contain dark:block"

nuxt.config.ts

@@ -4,17 +4,14 @@ import tailwindcss from '@tailwindcss/vite';
 
 const currentDir = dirname(fileURLToPath(import.meta.url));
 
-//const base = process.env.NUXT_APP_BASE_URL || '/comforthrmdocsnuxt/';
-
 export default defineNuxtConfig({
     nitro: {
         //preset: 'github-pages',
         preset: process.env.PRESET,
     },
     app: {
-        //baseURL: '/comforthrmdocsnuxt/'
         //baseURL: process.env.BASE_URL || '/comforthrmdocsnuxt/',
-        baseURL: process.env.BASE_URL,
+        baseURL: process.env.NUXT_APP_BASE_URL ?? '/',
         head: {
             link: [
                 { rel: 'icon', type: 'image/svg', href: '/logo_icon_brand_512.png' },

package.json

@@ -38,8 +38,9 @@
   "scripts": {
     "build": "nuxt prepare && nuxt build www",
     "dev": "nuxt prepare && nuxt dev www",
+    "generate": "nuxt prepare && nuxt generate www",
     "generate2": "nuxt prepare && nuxt generate www",
-    "generate": "nuxt prepare && NUXT_APP_BASE_URL=/comforthrmdocsnuxt/ nuxt generate --preset github_pages",
+    "generate3": "nuxt prepare && NUXT_APP_BASE_URL=/comforthrmdocsnuxt/ nuxt generate --preset github_pages || echo 'Ignoring prerender errors'",
     "preview": "nuxt prepare && nuxt preview www",
     "typecheck": "nuxt prepare && nuxt typecheck",
     "lint": "eslint .",