Misc cleanup

Author: edwardhorsford

app/assets/sass/_typography.scss

@@ -0,0 +1,11 @@
+h1 {
+  @extend %nhsuk-heading-l;
+}
+
+h2 {
+  @extend %nhsuk-heading-m;
+}
+
+h3 {
+  @extend %nhsuk-heading-s;
+}

app/assets/sass/main.scss

@@ -5,6 +5,7 @@
 @import 'components/list-border';
 @import 'components/related-nav';
 
+@import 'typography';
 @import 'utils';
 
 ///////////////////////////////////////////

app/lib/utils/strings.js

@@ -172,7 +172,7 @@ const stringLiteral = function(str) {
  * @param {string} input - String to wrap
  * @returns {string} HTML string with no-wrap class
  */
-const nowrap = (input) => {
+const noWrap = (input) => {
   if (!input) return '';
   return `<span class="app-nowrap">${input}</span>`;
 };
@@ -184,7 +184,7 @@ module.exports = {
   formatWords,
   isString,
   kebabCase,
-  nowrap,
+  noWrap,
   padDigits,
   possessive,
   sentenceCase,

app/views/clinics/index.html

@@ -6,8 +6,9 @@
 {% set back = {
   href: "/"
   } %}
+
 {% block pageContent %}
-  <h1 class="nhsuk-heading-l">{{pageHeading}}</h1>
+  <h1>{{pageHeading}}</h1>
 
   {% if data.clinics.length === 0 %}
     <p>No clinics found.</p>
@@ -37,7 +38,7 @@ <h1 class="nhsuk-heading-l">{{pageHeading}}</h1>
                 {% endif %}
               </a>
             </td>
-            <td>{{ clinic.date | formatDate }}</td>
+            <td>{{ clinic.date | formatDate |  noWrap }}</td>
             <td class="nhsuk-table__cell--numeric">
               {{ tag({
                 text: clinic.status | formatWords | sentenceCase,

app/views/clinics/show.html

@@ -52,7 +52,7 @@ <h1 class="nhsuk-heading-l">
             </td>
             <td class="nhsuk-table__cell">
               {% if event.status === 'scheduled' %}
-                <a href="/clinics/{{ clinicId }}/check-in/{{ event.id }}" class="nhsuk-link">{{ "Check in" | nowrap | safe }}</a>
+                <a href="/clinics/{{ clinicId }}/check-in/{{ event.id }}" class="nhsuk-link">{{ "Check in" | noWrap }}</a>
               {% endif %}
             </td>
           </tr>

app/views/participants/show.html

@@ -3,6 +3,10 @@
 
 {% set pageHeading = "Today’s clinics" %}
 
+{% set back = {
+  href: "/clinics",
+  text: "All clinics"
+} %}
 
 {% block pageContent %}
 

gulpfile.js

@@ -25,12 +25,11 @@ sass.compiler = require('sass');
 function compileStyles() {
   return gulp
     .src(['app/assets/sass/**/*.scss', 'docs/assets/sass/**/*.scss'])
-    .pipe(sass())
-    .pipe(gulp.dest('public/css'))
-    .on('error', (err) => {
-      console.log(err);
-      process.exit(1);
-    });
+    .pipe(sass({
+      outputStyle: 'expanded',
+      sourceComments: true
+    }).on('error', sass.logError))
+    .pipe(gulp.dest('public/css'));
 }
 
 // Compile JavaScript (with ES6 support)
@@ -47,31 +46,31 @@ function compileAssets() {
     .src([
       'app/assets/**/**/*.*',
       'docs/assets/**/**/*.*',
-      '!**/assets/**/**/*.js', // Don't copy JS files
-      '!**/assets/**/**/*.scss', // Don't copy SCSS files
+      '!**/assets/**/**/*.js',
+      '!**/assets/**/**/*.scss',
     ], { encoding: false })
     .pipe(gulp.dest('public'));
 }
 
-// Start nodemon with enhanced watching
+// Start nodemon
 function startNodemon(done) {
   const server = nodemon({
     script: 'app.js',
     stdout: true,
-    ext: 'js json', // Added json to watch for package.json changes
+    ext: 'js json',
     watch: [
-      'app/**/*.js',    // Watch all JS files in app directory
-      'app.js',         // Watch main app file
-      'routes/**/*.js', // Watch route files
-      'lib/**/*.js',    // Watch library files
-      'config/**/*.js'  // Watch configuration files
+      'app/**/*.js',
+      'app.js',
+      'routes/**/*.js',
+      'lib/**/*.js',
+      'config/**/*.js'
     ],
     ignore: [
-      'app/assets/**',  // Ignore asset files
-      'public/**',      // Ignore compiled files
-      'node_modules/**' // Ignore node_modules
+      'app/assets/**',
+      'public/**',
+      'node_modules/**'
     ],
-    delay: 1000,        // Add a small delay to prevent rapid restarts
+    delay: 1000,
     quiet: false,
   });
 
@@ -94,7 +93,6 @@ function startNodemon(done) {
     }
   });
 
-  // Add restart event handler
   server.on('restart', () => {
     console.log('Restarting server due to changes...');
   });
@@ -104,31 +102,26 @@ function reload() {
   browserSync.reload();
 }
 
-// Start browsersync with enhanced configuration
+// Start browsersync
 function startBrowserSync(done) {
-  browserSync.init(
-    {
-      proxy: 'localhost:' + port,
-      port: port + 1000,
-      ui: false,
-      files: [
-        'app/views/**/*.*',
-        'docs/views/**/*.*',
-        'public/**/*.*'
-      ],
-      ghostMode: false,
-      open: false,
-      notify: true,
-      watch: true,
-      reloadDelay: 1000, // Add delay before reload
-      reloadDebounce: 1000 // Debounce reloads
-    },
-    done
-  );
-  gulp.watch('public/**/*.*').on('change', reload);
+  browserSync.init({
+    proxy: 'localhost:' + port,
+    port: port + 1000,
+    ui: false,
+    files: [
+      'public/css/**/*.css',
+      'public/js/**/*.js',
+      'app/views/**/*'
+    ],
+    ghostMode: false,
+    open: false,
+    notify: false,
+    logFileChanges: false,
+    reloadDebounce: 1000
+  }, done);
 }
 
-// Enhanced watch function
+// Watch files
 function watch() {
   gulp.watch('app/assets/sass/**/*.scss', gulp.series(compileStyles, reload));
   gulp.watch('app/assets/javascript/**/*.js', gulp.series(compileScripts, reload));
@@ -143,8 +136,8 @@ exports.compileStyles = compileStyles;
 exports.compileScripts = compileScripts;
 exports.cleanPublic = cleanPublic;
 
-gulp.task(
-  'build',
+gulp.task('build',
   gulp.series(cleanPublic, compileStyles, compileScripts, compileAssets)
 );
+
 gulp.task('default', gulp.series(startNodemon, startBrowserSync, watch));

lib/utils.js

@@ -8,10 +8,21 @@ const crypto = require('crypto');
 const coreFilters = require('./core_filters');
 const customFilters = require('../app/filters');
 
-exports.addNunjucksFilters = function (env) { /* eslint-disable-line func-names */
+const SAFE_FILTERS = ['noWrap'];
+
+exports.addNunjucksFilters = function (env) {
   const filters = Object.assign(coreFilters(env), customFilters(env));
+  const safe = env.getFilter('safe');
+
   Object.keys(filters).forEach((filterName) => {
-    env.addFilter(filterName, filters[filterName]);
+    const filter = filters[filterName];
+    
+    // If it's in our safe list, wrap the filter to mark its output as safe
+    if (SAFE_FILTERS.includes(filterName)) {
+      env.addFilter(filterName, (...args) => safe(filter(...args)));
+    } else {
+      env.addFilter(filterName, filter);
+    }
   });
 };