GitHub Pages Template Files

.github/workflows/deploy-site.yml

@@ -0,0 +1,35 @@
+name: GH Page Deploy
+
+on:
+  push:
+    branches:
+      - main
+
+defaults:
+  run:
+    working-directory: ./site
+
+permissions:
+  contents: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: 'npm'
+          cache-dependency-path: './site/package-lock.json'
+      - run: npm ci
+      - run: npm run build
+      - name: Deploy
+        uses: crazy-max/ghaction-github-pages@v3
+        with:
+          target_branch: gh-pages
+          build_dir: docs
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/pr-build-site.yml

@@ -0,0 +1,25 @@
+name: GH Page PR Build
+
+on:
+  pull_request:
+    branches:
+      - main
+
+defaults:
+  run:
+    working-directory: ./site
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+          cache-dependency-path: './site/package-lock.json'
+      - run: npm ci
+      - run: npm run build

.gitignore

@@ -1386,3 +1386,9 @@ $RECYCLE.BIN/
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
+
+##
+## gatsby files
+##
+.cache/
+public

site/content/documentation/examples.mdx

@@ -16,4 +16,4 @@ To run the example:
 --url http://localhost:4200 --FDC3:AppDirectory:Source $(ComposeUIRepositoryRoot)/examples/fdc3-appdirectory/apps.json
 ```
 
-(you'll have to manually substitute `$(ComposeUIRepositoryRoot)` with the actual root path of the repo).
+(you'll have to manually substitute `$(ComposeUIRepositoryRoot)` with the actual root path of the repo).

site/content/news/components.mdx

@@ -0,0 +1,6 @@
+---
+date: 2023-07-15
+title: Example news page
+---
+
+Example news page

site/gatsby-browser.js

@@ -0,0 +1,8 @@
+import './src/styles/fonts.css';
+import './src/styles/global.css';
+import './src/styles/prismjs.css';
+import './src/styles/style.css';
+import './src/styles/header.css';
+import './src/styles/footer.css';
+import './src/styles/hero.css';
+import './src/styles/card.css';

site/gatsby-config.js

@@ -0,0 +1,13 @@
+const { plugins } = require('./src/config/base-gatsby-plugins');
+
+module.exports = {
+  siteMetadata: {
+    title: `ComposeUI`,
+    description: `ComposeUI is a .NET based general UI Container and Unified UI and App host which enables the hosting of Web and desktop content.`,
+    siteUrl: 'http://opensource.morganstanley.com/ComposeUI',
+    documentationUrl: false,
+    //  documentationUrl: url-of.documentation.site,
+  },
+  pathPrefix: `/`, // put GitHub project url slug here e.g. github.com/morganstanley/<project url slug>
+  plugins,
+};

site/gatsby-node.js

@@ -0,0 +1,90 @@
+const path = require(`path`);
+const { createFilePath } = require(`gatsby-source-filesystem`);
+
+exports.createPages = async ({ graphql, actions }) => {
+  const { createPage } = actions;
+
+  const result = await graphql(
+    `
+      {
+        allMdx {
+          nodes {
+            id
+            tableOfContents
+            frontmatter {
+              date
+              title
+            }
+            internal {
+              contentFilePath
+            }
+            fields {
+              slug
+            }
+          }
+        }
+      }
+    `
+  );
+
+  if (result.errors) {
+    throw result.errors;
+  }
+
+  // Create  pages.
+  const pages = result.data.allMdx.nodes;
+  const newsTemplate = path.resolve(`./src/templates/news.js`);
+  const documentationTemplate = path.resolve(
+    `./src/templates/documentation.js`
+  );
+  const pageTemplate = path.resolve(`./src/templates/page.js`);
+
+  function getCategory(page) {
+    const path = page.internal.contentFilePath;
+
+    return path
+      ? path.includes('news')
+        ? 'news'
+        : path.includes('documentation')
+        ? 'documentation'
+        : ''
+      : '';
+  }
+
+  function getTemplate(category) {
+    return category
+      ? category.includes('news')
+        ? newsTemplate
+        : category.includes('documentation')
+        ? documentationTemplate
+        : pageTemplate
+      : pageTemplate;
+  }
+
+  pages.forEach((page, index) => {
+    const category = getCategory(page);
+    createPage({
+      path: page.fields.slug,
+      component: `${getTemplate(category)}?__contentFilePath=${
+        page.internal.contentFilePath
+      }`,
+      context: {
+        id: page.id,
+        category,
+      },
+    });
+  });
+};
+
+exports.onCreateNode = ({ node, actions, getNode }) => {
+  const { createNodeField } = actions;
+
+  if (node.internal.type === `Mdx`) {
+    const value = createFilePath({ node, getNode });
+    createNodeField({
+      name: `slug`,
+      node,
+      value,
+    });
+  }
+};