Improve static export

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

.github/workflows/sync_canon.yml

@@ -26,11 +26,11 @@ jobs:
         with:
           cache-prefix: ${{ runner.os }}-v20.x
 
-      - name: Checkout backstage/canon-docs
+      - name: Checkout backstage/canon-storybook
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
         with:
-          repository: backstage/canon-docs
-          path: canon-docs
+          repository: backstage/canon-storybook
+          path: canon-external-docs
           token: ${{ secrets.GH_SERVICE_ACCOUNT_TOKEN }}
 
       - name: Configure Git
@@ -43,14 +43,14 @@ jobs:
         run: |
           yarn build
 
-      - name: Replace contents of canon-docs repo with docs build output
-        working-directory: canon-docs
+      - name: Replace contents of canon-external-docs repo with docs build output
+        working-directory: canon-external-docs
         run: |
           git rm -rf .
-          cp -R out/. .
+          cp -R ../canon-docs/out/. .
 
-      - name: Commit to canon-docs repo
-        working-directory: canon-docs
+      - name: Commit to canon-storybook repo
+        working-directory: canon-external-docs
         run: |
           git add .
           git commit -am "Canon Docs build for backstage/backstage@${{ github.sha }}"

canon-docs/next.config.mjs

@@ -2,18 +2,8 @@ import createMDX from '@next/mdx';
 
 const nextConfig = {
   pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
-  /**
-   * Enable static exports for the App Router.
-   *
-   * @see https://nextjs.org/docs/app/building-your-application/deploying/static-exports
-   */
   output: 'export',
-  /**
-   * Disable server-based image optimization. Next.js does not support
-   * dynamic features with static exports.
-   *
-   * @see https://nextjs.org/docs/app/api-reference/components/image#unoptimized
-   */
+  assetPrefix: '/',
   images: {
     unoptimized: true,
   },

canon-docs/public/CNAME

@@ -0,0 +1 @@
+canon.backstage.io

canon-docs/src/app/(docs)/page.mdx

@@ -1,6 +1,9 @@
 import { CodeBlock } from '@/components/CodeBlock';
 
-<img src="header.png" style={{ width: '100%', marginBottom: '32px' }} />
+<img
+  src="header.png"
+  style={{ width: '100%', marginBottom: '32px', marginTop: '64px' }}
+/>
 
 Welcome to the Canon, the new design library for Backstage plugins. This
 project is still under active development but we will make sure to document