fix: ui demo, and make it an opt-in feature

Dockerfile

@@ -69,4 +69,4 @@ WORKDIR /code
 RUN npm ci
 ARG PROJECT_NAME
 ARG BUILD_ID
-RUN npm run build --project=$PROJECT_NAME --build-id=$BUILD_ID
+RUN npm run build:css --project=$PROJECT_NAME --build-id=$BUILD_ID

docs/develop-project.md

@@ -70,17 +70,11 @@ A demo of any documented CSS modules from [Core Styles] and [Core CMS].
     ```sh
     docker exec -it core_cms /bin/bash
     # That opens a command prompt within the container.
-        npm run build:css-demo --project="core-cms"
+        npm run build:ui-demo
     ```
 
-2. Serve:
-
-    This feature is not built-in yet. You have options:
-
-    | option | steps |
-    | - | - |
-    | clone small Django app  | [working app in tup-ui](https://github.com/TACC/tup-ui/tree/v1.0.5/apps/ui-patterns) |
-    | serve locally with Node | `npx serve taccsite_ui/dist` |
+2. Give the server time to automatically restart.
+3. Open http://localhost:8000/static/ui/index.html.
 
 ## Develop with [Core Styles] Simultaneously
 

package.json

@@ -16,12 +16,12 @@
   },
   "repository": "git@github.com:TACC/Core-CMS.git",
   "scripts": {
-    "build": "npm run build:css && npm run build:css-demo",
+    "build": "npm run build:css && npm run build:ui-demo",
     "build:css": "bin/build-css.js --project=$npm_config_project --build-id=$npm_config_build_id",
     "postbuild:css": "cp -r node_modules/@tacc/core-styles/src/lib/fonts/* taccsite_cms/static/site_cms/fonts",
-    "build:css-demo": "cd taccsite_ui && fractal build --project=$npm_config_project",
-    "prebuild:css-demo": "cp -r node_modules/@tacc/core-styles/src/lib/_imports/_preview.hbs taccsite_cms/static/site_cms/css/src/_imports/",
-    "postbuild:css-demo": "rm taccsite_cms/static/site_cms/css/src/_imports/_preview.hbs"
+    "build:ui-demo": "cd taccsite_ui && fractal build",
+    "prebuild:ui-demo": "cp -r node_modules/@tacc/core-styles/src/lib/_imports/_preview.hbs taccsite_cms/static/site_cms/css/src/_imports/",
+    "postbuild:ui-demo": "rm taccsite_cms/static/site_cms/css/src/_imports/_preview.hbs"
   },
   "homepage": "https://github.com/TACC/Core-CMS"
 }

taccsite_cms/settings.py

@@ -299,10 +299,10 @@ def gettext(s): return s
     os.path.join(BASE_DIR, 'taccsite_custom', '*', 'static')
 ))
 
-# If the UI Pattern Library exists, serve it at .../ui
-staticfiles_dir_ui = os.path.join(BASE_DIR, 'taccsite_ui', 'dist')
-if os.path.exists(staticfiles_dir_ui):
-    STATICFILES_DIRS += (('ui', staticfiles_dir_ui),)
+# Serve UI Demo (if it exists) at .../ui
+ui_demo_dir = os.path.join(BASE_DIR, 'taccsite_ui', 'dist')
+if os.path.exists(ui_demo_dir):
+    STATICFILES_DIRS += (('ui', ui_demo_dir),)
 
 # User Uploaded Files Location.
 MEDIA_URL = '/media/'

taccsite_cms/templates/assets_site.html

@@ -17,7 +17,7 @@
 
 <link id="css-site" rel="stylesheet" href="{% static 'site_cms/css/build/site.css' %}">
 <link id="css-site-header" rel="stylesheet" href="{% static 'site_cms/css/build/site.header.css' %}">
-{# CAVEAT: Requires `npm run build` step before running the Django project. #}
+{# CAVEAT: Requires `npm run build:css` step #}
 <link id="css-site-v3-11+" rel="stylesheet" href="{% static 'site_cms/css/build/site.v3-11-plus.css' %}">
 
 

taccsite_ui/fractal.config.js

@@ -1,54 +1,31 @@
 'use strict';
 
-const path = require('path');
-const mandelbrot = require('@frctl/mandelbrot');
-const minimist = require('minimist');
-
-// Get base config
 const fractal = require('@tacc/core-styles/fractal.config.js');
-const themeConfig = require('./fractal.theme.js');
 const defaultContext = fractal.components.get('default.context');
 
-// Get project
-// (name)
-const args = minimist( process.argv.slice( 2 ));
-let cmsName = 'core-cms';
-let projName = args['project'] || '';
-    projName = ( projName !== cmsName ) ? projName : '';
-// (stylesheet)
-const escapeDemoDir = '/../..'; // i.e. back out of '/static/ui'
-const cmsCSSFiles = [
+// Customize styles
+const cmsStyles = [
   ...defaultContext.cmsStyles,
   {
     isInternal: false,
     layer: 'project',
-    path: `${escapeDemoDir}/static/site_cms/css/build/site.cms.css`
+    // FAQ: The '/../..' backs out of '/static/ui'
+    path: `/../../static/site_cms/css/build/core-cms.css`
   },
 ];
-const projCSSFiles = ( projName ) ? [
-  {
-    isInternal: false,
-    layer: 'cosmetic',
-    path: `${escapeDemoDir}/static/${projName}/css/build/site.cms.css`
-  },
-] : [];
 
 // Set source paths
 // (for components)
 fractal.components.set('exclude', '*.md');
 fractal.components.set('path', __dirname + '/patterns');
 // (for stylesheets)
 fractal.components.set('default.context', {
-  ...fractal.components.get('default.context'),
-  shouldSkipPattern: true, // true, because …base.css loads most components
-  cmsStyles: cmsCSSFiles.concat( projCSSFiles )
+  ...defaultContext,
+  shouldSkipPattern: true, // true, because Core-Styles loads most patterns
+  cmsStyles: cmsStyles
 });
-fractal.cli.log(`+ Included CSS for "${cmsName}"`);
-cmsCSSFiles.forEach( file => { fractal.cli.log(file.path) });
-if ( projCSSFiles.length > 0 ) {
-  fractal.cli.log(`+ Included CSS for "${projName}"`);
-  projCSSFiles.forEach( file => { fractal.cli.log(file.path) });
-}
+fractal.cli.log(`+ Included Core-CMS stylesheets`);
+cmsStyles.forEach( file => { fractal.cli.log(file.path) });
 
 // Set website paths
 // FAQ: Setting static.path results in `shouldSkipPattern: false` letting ONLY Core-CMS assets load, because that directory ONLY has Core-CMS assets
@@ -57,6 +34,8 @@ if ( projCSSFiles.length > 0 ) {
 fractal.web.set('builder.dest', __dirname + '/dist');
 
 // Customize theme
+const mandelbrot = require('@frctl/mandelbrot');
+const themeConfig = require('./fractal.theme.js');
 const theme = mandelbrot( themeConfig );
 fractal.web.theme( theme );