SLB-201: remove copy operations and streamline artefacts

apps/cms/.gitignore

@@ -32,5 +32,9 @@ generated/translations.json
 # GraphQL autoload registry
 autoload.json
 
+# Stylesheet symlinks into the ui package
+!/web/gutenberg.css
+!/web/iframe.css
+
 # A workaround to avoid turbo caching locally.
 turbo-seed.txt

apps/cms/config/sync/graphql.graphql_servers.main.yml

@@ -1,7 +1,7 @@
 uuid: f31854e4-2c2b-4687-9553-9f2d1f87028c
 langcode: en
 status: true
-dependencies: {  }
+dependencies: {}
 name: main
 label: Main
 endpoint: /graphql
@@ -15,7 +15,7 @@ query_complexity: null
 schema_configuration:
   directable:
     schema_definition: ../node_modules/@custom/schema/build/schema.graphql
-    autoload_registry: ../autoload.json
+    autoload_registry: ../node_modules/@custom/schema/build/drupal-autoload.json
     extensions:
       silverback_campaign_urls: silverback_campaign_urls
       silverback_gatsby: silverback_gatsby

apps/cms/package.json

@@ -33,6 +33,7 @@
     "@custom/custom_heavy": "workspace:*",
     "@custom/gutenberg_blocks": "workspace:*",
     "@custom/schema": "workspace:*",
-    "@custom/test_content": "workspace:*"
+    "@custom/test_content": "workspace:*",
+    "@custom/ui": "workspace:*"
   }
 }

apps/cms/web/gutenberg.css

@@ -0,0 +1 @@
+../node_modules/@custom/ui/build/gutenberg.css

apps/cms/web/iframe.css

@@ -0,0 +1 @@
+../node_modules/@custom/ui/build/iframe.css

apps/website/.gitignore

@@ -5,5 +5,3 @@
 public
 styles.css
 persisted-store
-
-autoload.mjs

apps/website/gatsby-browser.ts

@@ -1,4 +1,4 @@
-import './styles.css';
+import '@custom/ui/styles.css';
 
 import { registerExecutor } from '@custom/schema';
 import { GatsbyBrowser } from 'gatsby';

apps/website/gatsby-config.mjs

@@ -7,10 +7,9 @@
 // pick it up instead of the JS file.
 
 import { getPages } from '@custom/decap';
+import autoload from '@custom/schema/gatsby-autoload';
 import { resolve } from 'path';
 
-import autoload from './autoload.mjs';
-
 const dir = resolve('node_modules/@custom/decap/data/page');
 
 process.env.GATSBY_DRUPAL_URL =
@@ -39,9 +38,21 @@ export default {
     siteUrl: process.env.NETLIFY_URL,
   },
   plugins: [
+    'gatsby-plugin-uninline-styles',
     'gatsby-plugin-pnpm',
     'gatsby-plugin-layout',
     'gatsby-plugin-sharp',
+    {
+      resolve: '@amazeelabs/gatsby-plugin-static-dirs',
+      options: {
+        directories: {
+          'node_modules/@custom/ui/build/styles.css': '/styles.css',
+          'node_modules/@custom/ui/static/public': '/',
+          'node_modules/@custom/decap/dist': '/admin',
+          'node_modules/@custom/decap/media': '/media',
+        },
+      },
+    },
     {
       resolve: '@amazeelabs/gatsby-plugin-operations',
       options: {

apps/website/gatsby-node.mjs

@@ -1,8 +1,6 @@
 import { graphqlQuery } from '@amazeelabs/gatsby-plugin-operations';
 import { IndexPagesQuery, ListPagesQuery, Locale } from '@custom/schema';
-import { cpSync } from 'fs';
 import { resolve } from 'path';
-import serve from 'serve-static';
 
 /**
  * @type {import('gatsby').GatsbyNode['onCreateWebpackConfig']}
@@ -160,28 +158,4 @@ export const createPages = async ({ actions }) => {
 /**
  * @type Record<string, string>
  */
-const staticDirectories = {
-  'node_modules/@custom/ui/static/public': '/',
-  'node_modules/@custom/decap/dist': '/admin',
-  'node_modules/@custom/decap/media': '/media',
-};
-
-/**
- * @type {import('gatsby').GatsbyNode['onPostBuild']}
- */
-export const onPostBuild = () => {
-  Object.keys(staticDirectories).forEach((src) => {
-    const dest = staticDirectories[src];
-    cpSync(src, `public${dest}`, { force: true, recursive: true });
-  });
-};
-
-/**
- * @type {import('gatsby').GatsbyNode['onCreateDevServer']}
- */
-export const onCreateDevServer = ({ app }) => {
-  Object.keys(staticDirectories).forEach((src) => {
-    const dest = staticDirectories[src];
-    app.use(dest, serve(src));
-  });
-};
+const staticDirectories = {};

apps/website/gatsby-ssr.ts

@@ -1,5 +1,3 @@
-import './styles.css';
-
 import { Locale, registerExecutor } from '@custom/schema';
 import { GatsbySSR } from 'gatsby';
 

apps/website/package.json

@@ -5,7 +5,7 @@
     "@amazeelabs/bridge-gatsby": "^1.2.7",
     "@amazeelabs/cloudinary-responsive-image": "^1.6.15",
     "@amazeelabs/gatsby-plugin-operations": "^1.1.3",
-    "@amazeelabs/gatsby-silverback-cloudinary": "^1.2.7",
+    "@amazeelabs/gatsby-plugin-static-dirs": "^1.0.1",
     "@amazeelabs/gatsby-source-silverback": "^1.13.10",
     "@amazeelabs/publisher": "^2.4.17",
     "@amazeelabs/strangler-netlify": "^1.1.9",
@@ -20,13 +20,13 @@
     "gatsby-plugin-robots-txt": "^1.8.0",
     "gatsby-plugin-sharp": "^5.13.0",
     "gatsby-plugin-sitemap": "^6.13.0",
+    "gatsby-plugin-uninline-styles": "^0.2.0",
     "gatsby-source-filesystem": "^5.13.0",
     "image-size": "^1.1.1",
     "mime-types": "^2.1.35",
     "netlify-cli": "^17.11.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "serve-static": "^1.15.0"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@testing-library/react": "^14.1.2",
@@ -39,8 +39,6 @@
   },
   "scripts": {
     "test:static": "tsc --noEmit && eslint '**/*.{ts,tsx,js,jsx}' --ignore-path='./.gitignore'",
-    "prep": "pnpm run prep:styles",
-    "prep:styles": "rm -f styles.css && cp node_modules/@custom/ui/build/styles.css styles.css",
     "build:gatsby": "pnpm build:dotenv && gatsby build",
     "build:dotenv": "rm -rf .env && echo \"DRUPAL_EXTERNAL_URL='$DRUPAL_EXTERNAL_URL'\nDRUPAL_INTERNAL_URL='$DRUPAL_INTERNAL_URL'\" >> .env",
     "rebuild": "gatsby build",

packages/drupal-themes/custom_iframe/custom_iframe.libraries.yml

@@ -1,4 +1,4 @@
 global:
   css:
     theme:
-      styles.css: { preprocess: false }
+      /iframe.css: { preprocess: false }

packages/drupal/gutenberg_blocks/gutenberg_blocks.libraries.yml

@@ -1,16 +1,17 @@
 edit:
   version: VERSION
   js:
-   js/gutenberg_blocks.umd.js: { }
+    js/gutenberg_blocks.umd.js: {}
   css:
     theme:
-      css/edit.css: { }
+      css/edit.css: {}
   dependencies:
     - gutenberg/edit-node
     - silverback_gutenberg/base
 customisations:
   css:
     theme:
-      css/ui.css: { preprocess: false }
+      /gutenberg.css: { preprocess: false }
   dependencies:
-    - core/drupalSettings
+    - core/drupalSettings
+

packages/schema/.graphqlrc.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://unpkg.com/[email protected]/config-schema.json",
   "schema": [
-    "../../apps/website/node_modules/@amazeelabs/*/directives.graphql",
+    "node_modules/@amazeelabs/*/directives.graphql",
     "../../apps/cms/web/modules/contrib/*/directives.graphql",
     "../../apps/cms/web/modules/custom/*/directives.graphql",
     "src/schema.graphql"

packages/schema/codegen.ts

@@ -32,7 +32,7 @@ const config: CodegenConfig = {
       plugins: ['@amazeelabs/codegen-operation-ids'],
     },
     // Directive autoloader for Gatsby.
-    '../../apps/website/autoload.mjs': {
+    'build/gatsby-autoload.mjs': {
       plugins: ['@amazeelabs/codegen-autoloader'],
       config: {
         mode: 'js',
@@ -41,7 +41,7 @@ const config: CodegenConfig = {
       },
     },
     // Directive autoloader for Drupla.
-    '../../apps/cms/autoload.json': {
+    'build/drupal-autoload.json': {
       plugins: ['@amazeelabs/codegen-autoloader'],
       config: {
         mode: 'drupal',

packages/schema/package.json

@@ -15,6 +15,9 @@
     ],
     "./operations": [
       "./build/operations.json"
+    ],
+    "./gatsby-autoload": [
+      "./build/gatsby-autoload.mjs"
     ]
   },
   "typesVersions": {
@@ -24,6 +27,9 @@
       ],
       "/source": [
         "build/generated/source.d.ts"
+      ],
+      "gatsby-autoload": [
+        "src/types/gatsby-autoload.d.ts"
       ]
     }
   },
@@ -43,14 +49,20 @@
     "@graphql-codegen/typescript-operations": "^4.0.1",
     "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.67",
+    "@types/image-size": "^0.8.0",
+    "@types/node": "^18",
     "concurrently": "^8.2.2",
     "graphql": "16.8.1",
     "typescript": "^5.3.3"
   },
   "dependencies": {
     "@amazeelabs/executors": "^1.1.0",
+    "@amazeelabs/gatsby-silverback-cloudinary": "^1.2.7",
+    "@amazeelabs/gatsby-source-silverback": "^1.13.10",
     "@amazeelabs/scalars": "^1.6.13",
     "@swc/cli": "^0.1.63",
-    "@swc/core": "^1.3.102"
+    "@swc/core": "^1.3.102",
+    "image-size": "^1.1.1",
+    "mime-types": "^2.1.35"
   }
 }

apps/website/image.mjs → packages/schema/src/image.ts

@@ -1,10 +1,8 @@
+import type { GraphQLFieldResolver } from 'graphql';
 import sizeOf from 'image-size';
-import mime from 'mime-types';
+import { lookup } from 'mime-types';
 
-/**
- * @param {string | undefined} source
- */
-export function imageProps(source) {
+export const imageProps: GraphQLFieldResolver<string, any> = (source) => {
   // If its a decap image, process it.
   // Otherwise, it comes from Drupal and
   // already has all necessary props.
@@ -20,8 +18,8 @@ export function imageProps(source) {
       originalSrc: imageSrc,
       width: dimensions.width || 0,
       height: dimensions.height || 0,
-      mime: mime.lookup(relativeSource) || 'application/octet-stream',
+      mime: lookup(relativeSource) || 'application/octet-stream',
     });
   }
   return source;
-}
+};

packages/schema/src/schema.graphql

@@ -6,7 +6,7 @@ scalar ImageSource @default @value(json: "\"\"")
 Retrieve the properties of an image.
 TODO: Move to a shared "image" package.
 
-implementation(gatsby): ./image.mjs#imageProps
+implementation(gatsby): ./image.js#imageProps
 """
 directive @imageProps repeatable on FIELD_DEFINITION | SCALAR | UNION | ENUM | INTERFACE | OBJECT
 

packages/schema/src/types/gatsby-autoload.d.ts

@@ -0,0 +1,3 @@
+import { GraphQLFieldResolver } from 'graphql';
+
+export default Record<string, GraphQLFieldResolver<any, any>>;

packages/schema/tsconfig.json

@@ -6,7 +6,8 @@
     "forceConsistentCasingInFileNames": true,
     "declaration": true,
     "declarationDir": "build",
-    "outDir": "build"
+    "outDir": "build",
+    "lib": ["ES2015"]
   },
   "include": ["src"]
 }

packages/schema/turbo.json

@@ -13,11 +13,7 @@
         ".graphqlrc.json",
         "tsconfig.json"
       ],
-      "outputs": [
-        "build/**",
-        "../../apps/website/autoload.mjs",
-        "../../apps/cms/autoload.json"
-      ]
+      "outputs": ["build/**"]
     }
   }
 }

packages/ui/package.json

@@ -3,13 +3,18 @@
   "private": true,
   "version": "1.0.0",
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "styles.css"
+  ],
   "exports": {
     "./intl": [
       "./build/utils/intl/index.js"
     ],
     "./routes/*": [
       "./build/components/Routes/*.js"
+    ],
+    "./styles.css": [
+      "./build/styles.css"
     ]
   },
   "typesVersions": {
@@ -26,7 +31,7 @@
     "prep:types": "tsc --emitDeclarationOnly",
     "prep:scripts": "swc ./src -d ./build",
     "prep:styles": "NODE_ENV=production pnpm postcss tailwind.css -o build/styles.css",
-    "prep:cms-css": "NODE_ENV=production pnpm postcss cms.css -o ../drupal-themes/custom_iframe/styles.css",
+    "prep:iframe": "NODE_ENV=production pnpm postcss iframe.css -o build/iframe.css",
     "prep:gutenberg": "NODE_ENV=production PREFIX=gutenberg pnpm postcss tailwind.css -o build/gutenberg.css",
     "prep:i18n": "formatjs extract 'src/**/*.ts*' --ignore='**/*.d.ts' --ignore='**/*.stories.ts*' --out-file build/translatables.json --id-interpolation-pattern '[sha512:contenthash:base64:6]'\n",
     "build": "storybook build",

packages/ui/postcss.config.cjs

@@ -2,7 +2,7 @@ module.exports = {
   plugins: {
     'postcss-import-ext-glob': {},
     'postcss-import': {},
-    tailwindcss: {},
+    tailwindcss: require('./tailwind.config.cjs'),
     autoprefixer: {},
     'postcss-prefix-selector': {
       prefix:

packages/ui/src/components/Organisms/PageContent/BlockForm.stories.tsx

@@ -1,7 +1,7 @@
 import { Url } from '@custom/schema';
 import { Meta, StoryObj } from '@storybook/react';
 
-import cmsCss from '../../../../cms.css?inline';
+import cmsCss from '../../../../iframe.css?inline';
 import { BlockForm } from './BlockForm';
 
 export default {