From 4714b0c4195bb97ac8676e8d4d7f2f8c482dbbd1 Mon Sep 17 00:00:00 2001 From: Rashid N H M <95639609+rashidnhm@users.noreply.github.com> Date: Mon, 22 Jan 2024 16:34:15 -0500 Subject: [PATCH] Add modified gatsby-node file (#1022) **Title:** Add modified gatsby-node.ts file **Summary:** There have been issues where backend SWC services being down causes QML PR Preview deployment to fail. This PR adds a modified gatsby-node.ts file that removes the dependency of this deployment from the SWC backend services, especially since they are not needed within the scope of QML PR previews. This modified gatsby file will overwrite the one in the react repo prior to building within deploy-pr. Note, the changes proposed in this PR won't' be used by CI for the build for this very PR. Any changes to deploy-pr.yml only take affect once merged to master. **Relevant references:** [sc-53956](https://app.shortcut.com/xanaduai/story/53956/remove-qml-react-dependency-of-swc-backend-services) **Possible Drawbacks:** **Related GitHub Issues:** --------- Co-authored-by: Ashish Kanwar Singh <104938869+ashishks0522@users.noreply.github.com> --- .github/workflows/deploy-pr.yml | 5 + .github/workflows/gatsby-node.ts | 207 +++++++++++++++++++++++++++++++ 2 files changed, 212 insertions(+) create mode 100644 .github/workflows/gatsby-node.ts diff --git a/.github/workflows/deploy-pr.yml b/.github/workflows/deploy-pr.yml index f413185502..725886184e 100644 --- a/.github/workflows/deploy-pr.yml +++ b/.github/workflows/deploy-pr.yml @@ -104,7 +104,12 @@ jobs: # This step will update the pages so that only /qml/* is built - name: Setup PennyLane.ai-react if: steps.build_context.outputs.result != '' + env: + QML_REPO_DIR: qml-${{ steps.pr_info.outputs.pr_ref_name }} run: | + rm pennylane.ai-react/apps/pennylane-website/gatsby-node.ts + cp "${QML_REPO_DIR}/.github/workflows/gatsby-node.ts" pennylane.ai-react/apps/pennylane-website/gatsby-node.ts + cd pennylane.ai-react/apps/pennylane-website/src/pages # Find all files under apps/pennylane-website/src/pages and deletes them (exception for 404 page and ./qml/ directory) diff --git a/.github/workflows/gatsby-node.ts b/.github/workflows/gatsby-node.ts new file mode 100644 index 0000000000..ae4031844f --- /dev/null +++ b/.github/workflows/gatsby-node.ts @@ -0,0 +1,207 @@ +/* +* *** Used by CI *** +* This file is used by deploy-pr.yml when building the PR Previews for QML. +* This is a modified gatsby-node.ts file that replaces the gatsby-node in pennylane-website build +* and remove the dependency on other SWC backend service that the QML PR Previews does not need. +*/ + + +/* eslint-disable @typescript-eslint/no-var-requires */ +const { createFilePath } = require(`gatsby-source-filesystem`) +import { + CreateBabelConfigArgs, + GatsbyNode, +} from 'gatsby' +import { demosCategories } from './content/demos/demonstrations_categories' +import path from 'path' +import { createDemoCategorySearchRoute } from './src/utils/url_helpers' + +interface IOnCreateNodeProps { + node: { internal: { type: string } } + actions: { + createNodeField: (field: { + name: string + node: { internal: { type: string } } + value: string + }) => void + } + getNode: () => void +} + +interface IOnCreateNodeProps { + node: { internal: { type: string } } + actions: { + createNodeField: (field: { + name: string + node: { internal: { type: string } } + value: string + }) => void + } + getNode: () => void +} + +/** + * @type {import('gatsby').GatsbyNode['onCreateNode']} + */ +exports.onCreateNode = ({ node, actions, getNode }: IOnCreateNodeProps) => { + const { createNodeField } = actions + + if (node.internal.type === `MarkdownRemark`) { + const value = createFilePath({ node, getNode }) + + createNodeField({ + name: `slug`, + node, + value, + }) + } +} + +exports.onCreateBabelConfig = ({ actions }: CreateBabelConfigArgs) => { + actions.setBabelPlugin({ + name: '@babel/plugin-transform-react-jsx', + options: { + runtime: 'automatic', + }, + }) +} + +/** + * @type {import('gatsby').GatsbyNode['createSchemaCustomization']} + */ +exports.createSchemaCustomization = ({ + actions, +}: { + actions: { + createTypes: (types: string) => void + } +}) => { + const { createTypes } = actions + + // Explicitly define the siteMetadata {} object + // This way those will always be defined even if removed from gatsby-config.js + + // Also explicitly define the Markdown frontmatter + // This way the "MarkdownRemark" queries will return `null` even when no + // blog posts are stored inside "content/blog" instead of returning an error + createTypes(` + type SiteSiteMetadata { + author: Author + siteUrl: String + social: Social + } + + type Author { + name: String + summary: String + } + + type Social { + twitter: String + } + + type MarkdownRemark implements Node { + frontmatter: Frontmatter + fields: Fields + } + + type Frontmatter { + title: String + description: String + date: Date @dateformat + categories: [String!] + relatedContent: [RelatedContent] + hardware: [Hardware] + } + + type Fields { + slug: String + } + + type RelatedContent { + id: String! + title: String! + previewImages: [PreviewImages] + } + + type PreviewImages { + type: String! + uri: String! + } + + type Hardware { + id: String! + link: String! + logo: String! + } + `) +} + +const demoPage = path.resolve( + `${__dirname}/src/templates/demos/individualDemo/demo.tsx` +) + +export const createPages: GatsbyNode['createPages'] = async ({ + graphql, + actions, + reporter, +}) => { + const { createPage, createRedirect } = actions + + type allMarkdownRemarkTypeData = { + allMarkdownRemark: { + nodes: { + frontmatter: { + slug: string + title: string + meta_description: string + } + id: string + }[] + } + } + + const DemosResults = await graphql(` + query GetDemoData { + allMarkdownRemark(filter: { fileAbsolutePath: { regex: "/demos/" } }) { + nodes { + frontmatter { + slug + title + meta_description + } + id + } + } + } + `) + + const demos = DemosResults.data + ? DemosResults.data.allMarkdownRemark.nodes + : [] + + if (demos && demos.length) { + demos.forEach((demo) => { + createPage({ + path: `/qml/demos/${demo.frontmatter.slug}`, + component: demoPage, + context: { + id: demo.id, + }, + }) + }) + } + + /* Redirect from category pages to search page */ + if (demosCategories) { + demosCategories.forEach((category) => { + if (category.urlFragment) + createRedirect({ + fromPath: `/qml/demonstrations/${category.urlFragment}/`, + toPath: createDemoCategorySearchRoute(category.title), + isPermanent: true, + redirectInBrowser: true, + }) + }) + } +} \ No newline at end of file