acaptutorials · acaptutorials · Sep 2, 2025 · Sep 2, 2025 · Sep 2, 2025 · Sep 2, 2025
diff --git a/.github/workflows/deploy-dev.yml b/.github/workflows/deploy-dev.yml
@@ -19,9 +19,10 @@ jobs:
       OPENGRAPH_IMAGE_URL: ${{ secrets.OPENGRAPH_IMAGE_URL }}
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v5
         with:
           ref: 'dev'
+          fetch-depth: 0
       - name: Use NodeJS v20.15.0
         uses: actions/setup-node@v3
         with:

diff --git a/.github/workflows/deploy-prod.yml b/.github/workflows/deploy-prod.yml
@@ -19,9 +19,10 @@ jobs:
       OPENGRAPH_IMAGE_URL: ${{ secrets.OPENGRAPH_IMAGE_URL }}
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v5
         with:
           ref: ${{ github.event.release.tag_name }}
+          fetch-depth: 0
       - name: Use NodeJS v20.15.0
         uses: actions/setup-node@v3
         with:
@@ -82,7 +83,7 @@ jobs:
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
       - name: Checkout the repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v5
         with:
           ref: ${{ github.event.release.tag_name }}
 

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -12,7 +12,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v5
       - name: Use NodeJS v20.15.0
         uses: actions/setup-node@v3
         with:

diff --git a/.github/workflows/pull-images.yml b/.github/workflows/pull-images.yml
@@ -12,7 +12,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v5
 
       - name: Fetch and check out latest tag
         run: |

diff --git a/README.md b/README.md
@@ -94,7 +94,7 @@ The app depends these libraries and frameworks.
 
 #### To display a new image:
 
-1. Upload the image to the `/assets` branch, ([Issue #102](https://github.com/acaptutorials/acaptutorials.github.io/issues/102))
+1. Upload the image to the [`/assets`](https://github.com/acaptutorials/acaptutorials.github.io/tree/assets) branch, ([Issue #102](https://github.com/acaptutorials/acaptutorials.github.io/issues/102))
    - Commit the file under the appropriate directory (e.g., `/images/`, `/docs/`, etc.).
    - Use **unique, versioned file names** (e.g., `feature-v2.png`) to prevent caching issues.
 

diff --git a/docs/pages/404.jsx b/docs/pages/404.jsx
@@ -0,0 +1,70 @@
+import Head from 'next/head'
+import Image from 'next/image'
+
+const NotFoundPage = () => {
+  return (
+    <>
+      <Head>
+        <title>404 Page Not Found | ACAP Tutorials</title>
+        <meta name="description" content="The page you're looking for doesn't exist. Navigate back to ACAP Tutorials documentation." />
+        <meta name="robots" content="noindex, nofollow" />
+      </Head>
+
+      <div className="min-h-screen flex flex-col items-center justify-center bg-gray-50 dark:bg-gray-900 px-4">
+        <div className="max-w-md w-full text-center">
+          {/* Logo */}
+          <div className="flex items-center justify-center mb-8">
+            <Image
+              src="/images/logos/logo-acaptutorials.png"
+              width="64"
+              height="64"
+              alt="ACAP Tutorials Logo"
+              className="mr-3"
+            />
+            <span className="text-2xl font-bold text-gray-900 dark:text-white">
+              ACAP Tutorials
+            </span>
+          </div>
+
+          {/* 404 Error */}
+          <div className="mb-8">
+            <h1 className="text-9xl font-bold text-black-600 dark:text-blue-400 mb-4">404</h1>
+            <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-2">
+              Page Not Found
+            </h2>
+            <p className="text-gray-600 dark:text-gray-400">
+              The page you&apos;re looking for doesn&apos;t exist or has been moved.
+            </p>
+          </div>
+
+          {/* Help Section */}
+          <div className="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
+            <p className="text-sm text-gray-500 dark:text-gray-400 mb-3">
+              Need help finding what you&apos;re looking for?
+            </p>
+            <div className="flex flex-col sm:flex-row gap-3 justify-center">
+              <a
+                href="https://github.com/acaptutorials/acaptutorials.github.io/issues"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-200"
+              >
+                📝 Report an Issue
+              </a>
+              <a
+                href="https://deepwiki.com/acaptutorials/acaptutorials.github.io"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-200"
+              >
+                🤖 Ask DeepWiki
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default NotFoundPage
diff --git a/docs/pages/_meta.json b/docs/pages/_meta.json
@@ -29,10 +29,6 @@
     "title": "Video Tutorials",
     "type": "page"
   },
-  "showcase": {
-    "title": "Showcase",
-    "type": "page"
-  },
   "about": {
     "title": "About",
     "type": "page"

diff --git a/docs/pages/showcase.mdx b/docs/pages/showcase.mdx
diff --git a/docs/styles/globals.css b/docs/styles/globals.css
@@ -1,3 +1,19 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+.logo-text {
+  line-height: 1;
+}
+
+@media (max-width: 888px) {
+  .logo-text {
+    display: none;
+  }
+}
+
+@media (max-width: 767px) {
+  .logo-text {
+    display: unset;
+  }
+}
diff --git a/docs/theme.config.jsx b/docs/theme.config.jsx
@@ -9,18 +9,41 @@ export default {
   logo: (
     <>
       <Image src="/images/logos/logo-acaptutorials.png" width="24" height="24" alt="logo" />&nbsp;
-      <span>ACAP Development Docs</span>
+      <span className="logo-text">ACAP Development Docs</span>
     </>
   ),
+
+  // Code repository URL
   project: {
     link: 'https://github.com/acaptutorials/acaptutorials.github.io'
   },
+
+  // Nextra docs base URL within the repository
   docsRepositoryBase: 'https://github.com/acaptutorials/acaptutorials.github.io/tree/dev/docs',
+
+  // Use SEO settings (eg., page title)
   useNextSeoProps: () => {
     return {
       titleTemplate: 'ACAP Tutorials - %s'
     }
   },
+
+  // Displays the last-edited date on each page (from git)
+  gitTimestamp: ({ timestamp }) => {
+    const formatted = timestamp.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    })
+
+    return (
+      <span className="text-xs text-gray-500">
+        Last updated on {formatted}
+      </span>
+    )
+  },
+
+  // HTML head customizations
   head: function Head () {
     const { asPath, defaultLocale, locale } = useRouter()
     const { frontMatter } = useConfig()
@@ -57,13 +80,27 @@ export default {
       </>
     )
   },
+
+  // Top banner content
   banner: {
     key: process.env.RELEASE_VERSION ?? 'v10.1.0-alpha.6-release',
     text: <BannerText />
   },
+
+  // Right-most icon in the navbar
+  chat: {
+    link: 'https://deepwiki.com/acaptutorials/acaptutorials.github.io',
+    icon: (
+      <img src="https://deepwiki.com/badge.svg" alt="Ask DeepWiki" />
+    )
+  },
+
+  // Side bar settings
   sidebar: {
     defaultMenuCollapseLevel: 1
   },
+
+  // Custom footer contet
   footer: {
     text: (
       <Footer />