GitHub Pages Template Files (#522)

* pages template files

* dependabot

* react dependabot group

* fix footer link

.github/dependabot.yml

@@ -7,70 +7,83 @@
 
 version: 2
 updates:
-
-  - package-ecosystem: "nuget"
-    directory: "/" # Location of package manifests
+  - package-ecosystem: 'nuget'
+    directory: '/' # Location of package manifests
     schedule:
-      interval: "monthly"
+      interval: 'monthly'
 
-# Dependabot doesn't support glob syntax. Every solution needs an entry
+  # Dependabot doesn't support glob syntax. Every solution needs an entry
 
-  - package-ecosystem: "nuget"
-    directory: "/src/fdc3/dotnet/DesktopAgent/src/DesktopAgent" 
+  - package-ecosystem: 'nuget'
+    directory: '/src/fdc3/dotnet/DesktopAgent/src/DesktopAgent'
     schedule:
-      interval: "monthly"
+      interval: 'monthly'
 
-  - package-ecosystem: "nuget"
-    directory: "/src/messaging/dotnet/src/Client" 
+  - package-ecosystem: 'nuget'
+    directory: '/src/messaging/dotnet/src/Client'
     schedule:
-      interval: "monthly"
+      interval: 'monthly'
 
-  - package-ecosystem: "nuget"
-    directory: "/src/messaging/dotnet/src/Core" 
+  - package-ecosystem: 'nuget'
+    directory: '/src/messaging/dotnet/src/Core'
     schedule:
-      interval: "monthly"  
-    
-  - package-ecosystem: "nuget"
-    directory: "/src/messaging/dotnet/src/Host" 
+      interval: 'monthly'
+
+  - package-ecosystem: 'nuget'
+    directory: '/src/messaging/dotnet/src/Host'
     schedule:
-      interval: "monthly"  
+      interval: 'monthly'
 
-  - package-ecosystem: "nuget"
-    directory: "/src/messaging/dotnet/src/Server" 
+  - package-ecosystem: 'nuget'
+    directory: '/src/messaging/dotnet/src/Server'
     schedule:
-      interval: "monthly"  
-  
-  - package-ecosystem: "nuget"
-    directory: "/src/shell/dotnet/Shell" 
+      interval: 'monthly'
+
+  - package-ecosystem: 'nuget'
+    directory: '/src/shell/dotnet/Shell'
     schedule:
-      interval: "monthly"
+      interval: 'monthly'
 
-  - package-ecosystem: "nuget"
-    directory: "/prototypes/multi-module-prototype/examples/multi-module-example/ModulesPrototype" 
+  - package-ecosystem: 'nuget'
+    directory: '/prototypes/multi-module-prototype/examples/multi-module-example/ModulesPrototype'
     schedule:
-      interval: "monthly"
+      interval: 'monthly'
 
-  - package-ecosystem: "npm" 
-    directory: "/" 
+  - package-ecosystem: 'npm'
+    directory: '/'
     schedule:
-      interval: "monthly"
+      interval: 'monthly'
     groups:
+      react:
+        patterns:
+          - 'react*'
+      gatsby:
+        patterns:
+          - 'gatsby*'
       angular: # group all angular updates together
-        patterns: 
-        - "@angular*"
+        patterns:
+          - '@angular*'
         update-types: # group angular where highest version is minor or patch
-        - "minor"
-        - "patch"
+          - 'minor'
+          - 'patch'
       rollup: # group all rollup updates together
-        patterns: 
-        - "@rollup*"
-        - "rollup*"
+        patterns:
+          - '@rollup*'
+          - 'rollup*'
       testing: # group all dev testing updates together
-        patterns: 
-        - "@types/jasmine"
-        - "jasmine*"
-        - "karma*"
+        patterns:
+          - '@types/jasmine'
+          - 'jasmine*'
+          - 'karma*'
     ignore:
-      - dependency-name: "@angular*"
-        update-types: ["version-update:semver-major"]
-
+      - dependency-name: '@angular*'
+        update-types: ['version-update:semver-major']
+
+  - package-ecosystem: github-actions
+    directory: /
+    schedule:
+      interval: 'monthly'
+    groups:
+      artifact-actions:
+        patterns:
+          - 'actions/*-artifact*' # Upload/Download usually need to be updated together

.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,
+    });
+  }
+};