@aarhus-university/au-designsystem-delphinus 0.48.0 → 1.0.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## 1.0.0 (July 20, 2023)
+**Big release!** At least for those of us building Delphinus. With this release, we have transitioned away from using Grunt as our build tool. From now on Sass and TypeScript files are compiled using Node, and Pug files render on the fly using an Express server. This results in dramatically improved build speed and development experience.
+
+Two things to note:
+* If you have cloned the Delpinus repo, please delete your local copy and clone from new and run `npm install`.
+* If you are sourceing the compiled css files from the CDN, please note that the URLs have a slight change, as compiled css files are now in the `public` dir, not in the previous `build` dir.
+
+Hopefulley, this update will make us able to build and develop Delphinus at warp speed ;)
+
+
+## 0.48.1 (July 18, 2023)
+
+### Core Delphinus Updates
+Updates Figma tokens to use the new black Omnibus theme color.
+
+### Delphinus Projects Updates
+None
+
+
+
 ## 0.48.0 (July 18, 2023)
 
 ### Core Delphinus Updates

package/Gruntfile.js

@@ -1,10 +1,3 @@
-/* eslint-disable max-len */
-/* eslint-disable consistent-return */
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-env node */
-const sass = require('node-sass');
-const webpackConfig = require('./webpack.config.js');
-
 module.exports = (grunt) => {
   // configure the tasks
   grunt.initConfig({
@@ -12,289 +5,104 @@ module.exports = (grunt) => {
 
     // clean the build directory
     clean: {
-      prebuild: {
-        src: ['build'],
-      },
-      postbuild: {
-        src: ['build/**/_*.html'],
-      },
-      figmatokens: {
-        src: ['build/figma-tokens', 'bin'],
+      figmatokensbin: {
+        src: ['public/figma-tokens/bin'],
       },
-      bin: {
-        src: ['bin'],
-      },
-    },
-    cleanempty: {
-      options: {},
-      src: ['build/**'],
     },
     // copy from the source directory to build
     copy: {
-      build: {
-        cwd: 'source',
-        src: [
-          '**',
-          '!**/*.scss',
-          '!**/*.pug',
-          '!**/*.js',
-          '!figma-tokens/**/*.json',
-          'js/3rdparty/**/*.js',
-          'projects/**/*.js',
-          '.htaccess',
-        ],
-        dest: 'build',
-        expand: true,
-      },
       figmastyles: {
         options: {
           flatten: true,
         },
         files: {
           // the breakpoints
-          'bin/pre/breakpoint/01_medium.json': 'source/figma-tokens/styles/breakpoint.json',
-          'bin/pre/breakpoint/02_wide.json': 'source/figma-tokens/styles/breakpoint.json',
+          'public/figma-tokens/bin/pre/breakpoint/01_medium.json': 'source/figma-tokens/styles/breakpoint.json',
+          'public/figma-tokens/bin/pre/breakpoint/02_wide.json': 'source/figma-tokens/styles/breakpoint.json',
           // the color colorthemes
-          'bin/pre/theme/01_cyan.json': 'source/figma-tokens/styles/theme.json',
-          'bin/pre/theme/02_turquoise.json': 'source/figma-tokens/styles/theme.json',
-          'bin/pre/theme/03_green.json': 'source/figma-tokens/styles/theme.json',
-          'bin/pre/theme/04_yellow.json': 'source/figma-tokens/styles/theme.json',
-          'bin/pre/theme/05_orange.json': 'source/figma-tokens/styles/theme.json',
-          'bin/pre/theme/06_red.json': 'source/figma-tokens/styles/theme.json',
-          'bin/pre/theme/07_magenta.json': 'source/figma-tokens/styles/theme.json',
-          'bin/pre/theme/08_purple.json': 'source/figma-tokens/styles/theme.json',
-          'bin/pre/theme/09_blue.json': 'source/figma-tokens/styles/theme.json',
-          'bin/pre/theme/21_mitstudie.json': 'source/figma-tokens/styles/theme.json',
-          'bin/pre/theme/22_omnibus.json': 'source/figma-tokens/styles/theme.json',
-          'bin/pre/theme/23_brightspace.json': 'source/figma-tokens/styles/theme.json',
+          'public/figma-tokens/bin/pre/theme/01_cyan.json': 'source/figma-tokens/styles/theme.json',
+          'public/figma-tokens/bin/pre/theme/02_turquoise.json': 'source/figma-tokens/styles/theme.json',
+          'public/figma-tokens/bin/pre/theme/03_green.json': 'source/figma-tokens/styles/theme.json',
+          'public/figma-tokens/bin/pre/theme/04_yellow.json': 'source/figma-tokens/styles/theme.json',
+          'public/figma-tokens/bin/pre/theme/05_orange.json': 'source/figma-tokens/styles/theme.json',
+          'public/figma-tokens/bin/pre/theme/06_red.json': 'source/figma-tokens/styles/theme.json',
+          'public/figma-tokens/bin/pre/theme/07_magenta.json': 'source/figma-tokens/styles/theme.json',
+          'public/figma-tokens/bin/pre/theme/08_purple.json': 'source/figma-tokens/styles/theme.json',
+          'public/figma-tokens/bin/pre/theme/09_blue.json': 'source/figma-tokens/styles/theme.json',
+          'public/figma-tokens/bin/pre/theme/21_mitstudie.json': 'source/figma-tokens/styles/theme.json',
+          'public/figma-tokens/bin/pre/theme/22_omnibus.json': 'source/figma-tokens/styles/theme.json',
+          'public/figma-tokens/bin/pre/theme/23_brightspace.json': 'source/figma-tokens/styles/theme.json',
         },
       },
       figmatokens: {
         cwd: 'source',
         src: 'figma-tokens/*.json',
-        dest: 'bin/pre',
+        dest: 'public/figma-tokens/bin/pre',
         expand: true,
         flatten: true,
       },
     },
-    watch: {
-      sass: {
-        files: ['source/**/*.scss', '!source/figma-tokens/**/*.scss'],
-        tasks: ['sass', 'cleanempty'],
-      },
-      pug: {
-        files: ['source/**/*.pug', 'CHANGELOG.md'],
-        tasks: ['pug', 'cleanempty'],
-      },
-      webpack: {
-        files: ['source/**/*.ts'],
-        tasks: ['webpack'],
-      },
-      copy: {
-        files: ['source/**', '!source/**/*.scss', '!source/**/*.pug', '!source/figma-tokens/**/*.json'],
-        tasks: ['copy', 'cleanempty'],
-      },
-    },
-    pug: {
-      compile: {
-        options: {
-          data: {},
-        },
-        files: [
-          {
-            expand: true,
-            cwd: 'source/markup',
-            src: ['**/*.pug'],
-            dest: 'build',
-            ext: '.html',
-          },
-        ],
-      },
-      compileatoms: {
-        options: {
-          data: {},
-        },
-        files: [
-          {
-            expand: true,
-            cwd: 'source/atoms',
-            src: ['**/*.pug'],
-            dest: 'build/atoms',
-            ext: '.html',
-          },
-        ],
-      },
-      compileprojects: {
-        options: {
-          data: {},
-        },
-        files: [
-          {
-            expand: true,
-            cwd: 'source/projects',
-            //src: ['typo3/**/*.pug', 'medarbejdere/**/*.pug'],
-            src: ['**/*.pug'],
-            dest: 'build/projects',
-            ext: '.html',
-          },
-        ],
-      },
-    },
-    sass: {
-      options: {
-        outputStyle: 'compressed',
-        implementation: sass,
-        sourceMap: true,
-      },
-      dist: {
-        files: [
-          {
-            expand: true,
-            cwd: 'source',
-            src: ['**/*.scss'],
-            dest: 'build',
-            ext: '.css',
-          },
-        ],
-      },
-      figmatokens: {
-        files: [
-          {
-            expand: true,
-            cwd: 'source',
-            src: ['figma-tokens/**/*.scss'],
-            dest: 'bin/pre/cssvars',
-            ext: '.css',
-            flatten: true,
-          },
-        ],
-      },
-    },
-    connect: {
-      server: {
-        options: {
-          port: 3001,
-          base: 'build',
-          hostname: '*',
-        },
-      },
-    },
-    browserSync: {
-      dev: {
-        bsFiles: {
-          src: ['img/**/*'],
-        },
-        options: {
-          watchTask: true,
-          proxy: 'http://localhost:3001',
-        },
-      },
-    },
-    webpack: {
-      prod: webpackConfig,
-      dev: webpackConfig,
-    },
-    'sftp-deploy': {
-      production: {
-        auth: {
-          host: 'cmsftp.auit.au.dk',
-          port: 22,
-          authKey: 'key1',
-        },
-        cache: false,
-        src: 'build',
-        dest: '/aucms/installations/delphinus.au.dk/http',
-        exclusions: [
-          'build/**/.DS_Store',
-          'build/.htaccess',
-          'build/projects/au-webshop/*',
-        ],
-        serverSep: '/',
-        localSep: '/',
-        concurrency: 4,
-        progress: true,
-      },
-      dev: {
-        auth: {
-          host: 'cmsftp.auit.au.dk',
-          port: 22,
-          authKey: 'key1',
-        },
-        cache: false,
-        src: 'build',
-        dest: '/aucms/installations/delphinus.au.dk/dev',
-        exclusions: [
-          'build/**/.DS_Store',
-          'build/.htaccess',
-          'build/projects/au-webshop/*',
-        ],
-        serverSep: '/',
-        localSep: '/',
-        concurrency: 4,
-        progress: true,
-      },
-    },
     'merge-json': {
       breakpoints: {
-        src: ['bin/pre/breakpoint/*.json'],
-        dest: 'bin/pre/sizes-breakpoints.json',
+        src: ['public/figma-tokens/bin/pre/breakpoint/*.json'],
+        dest: 'public/figma-tokens/bin/pre/sizes-breakpoints.json',
       },
       themes: {
-        src: ['bin/pre/theme/*.json'],
-        dest: 'bin/pre/colors-themes.json',
+        src: ['public/figma-tokens/bin/pre/theme/*.json'],
+        dest: 'public/figma-tokens/bin/pre/colors-themes.json',
       },
       designsystem: {
         src: [
-          'bin/figma-tokens/colors-all.json',
-          'bin/figma-tokens/colors-themes.json',
-          'bin/figma-tokens/sizes-default.json',
-          'bin/figma-tokens/sizes-breakpoints.json',
-          'bin/figma-tokens/sizing.json',
-          'bin/figma-tokens/spacing.json',
-          'bin/figma-tokens/shadows-default.json',
-          'bin/figma-tokens/blurs-default.json',
-          'bin/figma-tokens/typography-fonts.json',
-          'bin/figma-tokens/typography-line-widths.json',
-          'bin/figma-tokens/typography-styles.json',
-          'bin/figma-tokens/borders-widths.json',
-          'bin/figma-tokens/borders-default.json',
-          'bin/figma-tokens/borders-theme.json',
-          'bin/figma-tokens/borders-nav-item.json',
-          'bin/figma-tokens/borders-nav-item-theme.json',
+          'public/figma-tokens/bin/colors-all.json',
+          'public/figma-tokens/bin/colors-themes.json',
+          'public/figma-tokens/bin/sizes-default.json',
+          'public/figma-tokens/bin/sizes-breakpoints.json',
+          'public/figma-tokens/bin/sizing.json',
+          'public/figma-tokens/bin/spacing.json',
+          'public/figma-tokens/bin/shadows-default.json',
+          'public/figma-tokens/bin/blurs-default.json',
+          'public/figma-tokens/bin/typography-fonts.json',
+          'public/figma-tokens/bin/typography-line-widths.json',
+          'public/figma-tokens/bin/typography-styles.json',
+          'public/figma-tokens/bin/borders-widths.json',
+          'public/figma-tokens/bin/borders-default.json',
+          'public/figma-tokens/bin/borders-theme.json',
+          'public/figma-tokens/bin/borders-nav-item.json',
+          'public/figma-tokens/bin/borders-nav-item-theme.json',
         ],
-        dest: 'build/figma-tokens/design-system.json',
+        dest: 'public/figma-tokens/design-system.json',
       },
       designfile: {
         src: [
-          'bin/figma-tokens/sizes-default.json',
-          'bin/figma-tokens/sizes-breakpoints.json',
-          'bin/figma-tokens/sizing.json',
-          'bin/figma-tokens/spacing.json',
-          'bin/figma-tokens/blurs-default.json',
-          'bin/figma-tokens/typography-fonts.json',
-          'bin/figma-tokens/typography-line-widths.json',
-          'bin/figma-tokens/typography-styles.json',
-          'bin/figma-tokens/borders-widths.json',
+          'public/figma-tokens/bin/sizes-default.json',
+          'public/figma-tokens/bin/sizes-breakpoints.json',
+          'public/figma-tokens/bin/sizing.json',
+          'public/figma-tokens/bin/spacing.json',
+          'public/figma-tokens/bin/blurs-default.json',
+          'public/figma-tokens/bin/typography-fonts.json',
+          'public/figma-tokens/bin/typography-line-widths.json',
+          'public/figma-tokens/bin/typography-styles.json',
+          'public/figma-tokens/bin/borders-widths.json',
         ],
-        dest: 'build/figma-tokens/design-file.json',
+        dest: 'public/figma-tokens/design-file.json',
       },
       colorthemes: {
         src: [
-          'bin/figma-tokens/borders-widths.json',
-          'bin/figma-tokens/borders-theme.json',
-          'bin/figma-tokens/borders-nav-item-theme.json',
-          'bin/figma-tokens/colors-themes.json',
+          'public/figma-tokens/bin/borders-widths.json',
+          'public/figma-tokens/bin/borders-theme.json',
+          'public/figma-tokens/bin/borders-nav-item-theme.json',
+          'public/figma-tokens/bin/colors-themes.json',
         ],
-        dest: 'build/figma-tokens/color-themes.json',
+        dest: 'public/figma-tokens/color-themes.json',
       },
       breakpointstyles: {
         src: [
-          'bin/figma-tokens/typography-fonts.json',
-          'bin/figma-tokens/typography-line-widths.json',
-          'bin/figma-tokens/typography-styles.json',
-          'bin/figma-tokens/sizes-breakpoints.json',
+          'public/figma-tokens/bin/typography-fonts.json',
+          'public/figma-tokens/bin/typography-line-widths.json',
+          'public/figma-tokens/bin/typography-styles.json',
+          'public/figma-tokens/bin/sizes-breakpoints.json',
         ],
-        dest: 'build/figma-tokens/breakpoint-styles.json',
+        dest: 'public/figma-tokens/breakpoint-styles.json',
       },
     },
     'string-replace': {
@@ -302,16 +110,16 @@ module.exports = (grunt) => {
         files: [{
           flatten: true,
           expand: true,
-          cwd: 'bin/',
+          cwd: 'public/figma-tokens/bin/',
           src: 'pre/*.json',
-          dest: 'bin/figma-tokens',
+          dest: 'public/figma-tokens/bin/',
         }],
         options: {
           replacements: [{
             pattern: /(--[a-z0-9-]+)/ig,
             replacement(match) {
               // console.log(match)
-              const cssvars = grunt.file.read('bin/pre/cssvars/figma-tokens.css');
+              const cssvars = grunt.file.read('public/figma-tokens/style.css');
               const regex = new RegExp(`${match}: ([a-zA-Z0-9-#.,()]+)`);
               const value = cssvars.match(regex);
               if (value == null) {
@@ -326,9 +134,9 @@ module.exports = (grunt) => {
       figmastyles: {
         files: [{
           expand: true,
-          cwd: 'bin/',
+          cwd: 'public/figma-tokens/bin/',
           src: ['pre/breakpoint/*.json', 'pre/theme/*.json'],
-          dest: 'bin/',
+          dest: 'public/figma-tokens/bin/',
         }],
         options: {
           replacements: [{
@@ -350,7 +158,7 @@ module.exports = (grunt) => {
 
               // if matched value is not name, find display name i css vars file. Else return the filename.
               if (value !== 'name') {
-                const cssvars = grunt.file.read('bin/pre/cssvars/figma-tokens.css');
+                const cssvars = grunt.file.read('public/figma-tokens/style.css');
                 const re2 = new RegExp(`--${foldername}-${filename}: ([a-zA-Z0-9-#. ]+)`);
                 const displayname = cssvars.match(re2);
                 if (displayname == null) {
@@ -372,50 +180,28 @@ module.exports = (grunt) => {
 
   // load the tasks
   grunt.loadNpmTasks('grunt-contrib-copy');
-  grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-contrib-clean');
-  grunt.loadNpmTasks('grunt-cleanempty');
-  grunt.loadNpmTasks('grunt-contrib-pug');
-  grunt.loadNpmTasks('grunt-sass');
-  grunt.loadNpmTasks('node-sass');
-  grunt.loadNpmTasks('grunt-contrib-connect');
-  grunt.loadNpmTasks('grunt-browser-sync');
-  grunt.loadNpmTasks('grunt-webpack');
-  grunt.loadNpmTasks('grunt-sftp-deploy');
   grunt.loadNpmTasks('grunt-merge-json');
   grunt.loadNpmTasks('grunt-string-replace');
 
   // define the tasks
-
-  grunt.registerTask('build', [
-    'clean:prebuild',
-    'copy',
-    'pug',
-    'sass:dist',
-    'figma-tokens',
-    'clean:postbuild',
-    'cleanempty',
-    'webpack',
-  ]);
-
-  grunt.registerTask('default', ['build', 'connect', 'browserSync', 'watch']);
-
-  grunt.registerTask('deploy', ['sftp-deploy:production']);
-
-  grunt.registerTask('dev-deploy', ['sftp-deploy:dev']);
-
-  grunt.registerTask('deploy-both', ['sftp-deploy']);
-
   grunt.registerTask('figma-tokens', [
-    'clean:figmatokens',
-    'sass:figmatokens',
+    //start by deleting the temporary bin folder
+    'clean:figmatokensbin',
+    //the we copy some json files from the source folder to the temporary bin folder, we start by creating a json file for each breakpoint and then one for each color theme
     'copy:figmastyles',
+    //the we also copy json files for our tokens from the source folder to the temporary bin folder
     'copy:figmatokens',
+    //then we replace {{name}} in the breakpoint and color theme json files with the theme/breakpoint name from each json file
     'string-replace:figmastyles',
+    //we then merge alle the breakpoint json files in to one file and the same for the color theme json files
     'merge-json:breakpoints',
     'merge-json:themes',
+    //finally we go through the json files and find all css variable names and replace them with the value from the css file we created in the beginning - this is done in a new copy of each json file
     'string-replace:cssvars',
+    //lastly all json files are merged in to the four files we need for the design system, breakpoints, design file and color themes (these are placed on the build folder and can be deployed to delphinus site)
     'merge-json',
-    'clean:bin',
+    //at the end we delete the temporary bin folder
+    'clean:figmatokensbin',
   ]);
 };

package/app.js

@@ -0,0 +1,41 @@
+var createError = require('http-errors');
+var express = require('express');
+var path = require('path');
+var cookieParser = require('cookie-parser');
+var logger = require('morgan');
+
+var indexRouter = require('./routes/index');
+var usersRouter = require('./routes/users');
+
+var app = express();
+
+// view engine setup
+app.set('views', path.join(__dirname, 'source/markup'));
+app.set('view engine', 'pug');
+
+app.use(logger('dev'));
+app.use(express.json());
+app.use(express.urlencoded({ extended: false }));
+app.use(cookieParser());
+app.use(express.static(path.join(__dirname, 'public')));
+
+app.use('/', indexRouter);
+app.use('/users', usersRouter);
+
+// catch 404 and forward to error handler
+app.use(function(req, res, next) {
+  next(createError(404));
+});
+
+// error handler
+app.use(function(err, req, res, next) {
+  // set locals, only providing error in development
+  res.locals.message = err.message;
+  res.locals.error = req.app.get('env') === 'development' ? err : {};
+
+  // render the error page
+  res.status(err.status || 500);
+  res.render('error');
+});
+
+module.exports = app;

package/bin/www

@@ -0,0 +1,90 @@
+#!/usr/bin/env node
+
+/**
+ * Module dependencies.
+ */
+
+var app = require('../app');
+var debug = require('debug')('express:server');
+var http = require('http');
+
+/**
+ * Get port from environment and store in Express.
+ */
+
+var port = normalizePort(process.env.PORT || '3000');
+app.set('port', port);
+
+/**
+ * Create HTTP server.
+ */
+
+var server = http.createServer(app);
+
+/**
+ * Listen on provided port, on all network interfaces.
+ */
+
+server.listen(port);
+server.on('error', onError);
+server.on('listening', onListening);
+
+/**
+ * Normalize a port into a number, string, or false.
+ */
+
+function normalizePort(val) {
+  var port = parseInt(val, 10);
+
+  if (isNaN(port)) {
+    // named pipe
+    return val;
+  }
+
+  if (port >= 0) {
+    // port number
+    return port;
+  }
+
+  return false;
+}
+
+/**
+ * Event listener for HTTP server "error" event.
+ */
+
+function onError(error) {
+  if (error.syscall !== 'listen') {
+    throw error;
+  }
+
+  var bind = typeof port === 'string'
+    ? 'Pipe ' + port
+    : 'Port ' + port;
+
+  // handle specific listen errors with friendly messages
+  switch (error.code) {
+    case 'EACCES':
+      console.error(bind + ' requires elevated privileges');
+      process.exit(1);
+      break;
+    case 'EADDRINUSE':
+      console.error(bind + ' is already in use');
+      process.exit(1);
+      break;
+    default:
+      throw error;
+  }
+}
+
+/**
+ * Event listener for HTTP server "listening" event.
+ */
+
+function onListening() {
+  var addr = server.address();
+  var bind = typeof addr === 'string'
+    ? 'pipe ' + addr
+    : 'port ' + addr.port;
+  debug('Listening on ' + bind);
+}

package/esbuild.mjs

@@ -0,0 +1,18 @@
+#!/usr/bin/env node
+
+import * as esbuild from 'esbuild';
+
+await esbuild.build({
+  entryPoints: {
+    'js/app': './source/js/production/app.ts',
+    'js/demo': './source/js/demo/app.ts',
+    'projects/medarbejdere/js/app': './source/js/production/app.ts',
+    'projects/typo3/js/app': './source/js/production/typo3.ts',
+    'projects/mitstudie/js/app': './source/js/production/app.ts',
+    'projects/bachelor-applications/js/app': './source/js/production/app.ts',
+    'projects/course-catalogue/js/app': './source/js/production/app.ts',
+  },
+  bundle: true,
+  minify: true,
+  outdir: 'public',
+});