Updating Fomantic UI

NOTE: This is largely based on the instructions in Fomantic-UI's docs, which might have been updated since the time of writing (Fomantic-UI 2.9.2 was the newest version).

Prerequisites

• NodeJS >= v12
• NPM >= v6 (this is installed with NodeJS)

Building and updating the Fomantic-UI files

1. Navigate to the node folder:

   cd node

2. Update the Fomantic-UI installation:

   npm update fomantic-ui

   Running this command will create a node_modules folder within the node folder, which can optionally be deleted after all these steps are completed. The command will also update the node/package.json and node/package-lock.json files, which should be committed.
3. Create the files necessary for building:

   cd node_modules/fomantic-ui
   npx gulp install

   The following prompts should now be displayed:
   1. "It looks like you have a semantic.json file already. (Use arrow keys)"
      • Choose "Yes, extend my current settings."
   2. "Set-up Fomantic UI (Use arrow keys)"
      • Choose "Automatic (Use default locations and all components)"
   3. "We detected you are using NPM Nice! Is this your project folder? <repository folder location>/node (Use arrow keys)"
      • Choose "Yes"
   4. "Where should we put Fomantic UI inside your project? (semantic/)"
      • Press Enter
4. Build the CSS and JavaScript files:

   cd ../../semantic
   npx gulp build

   This should create a dist folder within the current semantic folder (full path node/semantic/dist relative to the repository folder).
5. The dist folder should contain - among other things - two files named semantic.min.css and semantic.min.js. Copy the contents of these files to the corresponding files in src/web/static/lib/fomantic-ui. Remember to keep/add one blank line at the end of these files, to not mess up the diff!
6. Overwrite the assets for the default theme:
   1. Within dist/themes/default/assets/fonts, delete the files whose names begin with Lato (these are not needed, as we use our own font)
   2. Within src/web/static/lib/fomantic-ui/themes/default, delete the old assets folder
   3. Move the new assets folder (dist/themes/default/assets) to src/web/static/lib/fomantic-ui/themes/default
7. Delete the whole semantic folder (node/semantic) and use Git to reset any existing committed files within that folder that have been deleted. If on Windows, also reset any / characters that have been changed to \\ in node/semantic.json.
8. Commit the changes.