Implement frontend build using CFPB Design System 2.0.1

.dockerignore

@@ -15,7 +15,6 @@
 !sample/sample.sqlite3
 
 !viewer/**/*.py
-!viewer/static/download-files
 !viewer/static_src
 !viewer/templates
 

.gitignore

@@ -63,8 +63,6 @@ venv
 *.egg-info
 .installed.cfg
 viewer/static/**
-!viewer/static/download-files
-!viewer/static/download-files/*
 
 # Unit test / coverage reports
 #################

.prettierignore

@@ -0,0 +1,7 @@
+.github
+.tox
+
+htmlcov
+sample
+venv
+viewer/static

.vscode/launch.json

@@ -0,0 +1,14 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Django runserver",
+      "type": "debugpy",
+      "request": "launch",
+      "args": ["runserver"],
+      "django": true,
+      "autoStartBrowser": false,
+      "program": "${workspaceFolder}/manage.py"
+    }
+  ]
+}

CONTRIBUTING.md

@@ -5,11 +5,10 @@
 > feature request, you are agreeing to comply with this waiver of copyright interest.
 > Details can be found in our [TERMS](TERMS.md) and [LICENSE](LICENSE).
 
-
 There are two primary ways to help:
- - Using the issue tracker, and
- - Changing the code-base.
 
+- Using the issue tracker, and
+- Changing the code-base.
 
 ## Using the issue tracker
 
@@ -21,7 +20,6 @@ Use the issue tracker to find ways to contribute. Find a bug or a feature, menti
 the issue that you will take on that effort, then follow the _Changing the code-base_
 guidance below.
 
-
 ## Changing the code-base
 
 Generally speaking, you should fork this repository, make changes in your
@@ -31,7 +29,6 @@ Additionally, the code should follow any stylistic and architectural guidelines
 prescribed by the project. In the absence of such guidelines, mimic the styles
 and patterns in the existing code-base.
 
-
 ## Browser support
 
 We configure our build chain tools

README.md

@@ -129,13 +129,20 @@ sqlite> SELECT url FROM crawler_page WHERE html LIKE "%<br>%" ORDER BY URL asc;
 
 ## Running the viewer application
 
-From the repo's root, compile front-end assets:
+From the repo's root, compile frontend assets:
 
 ```
 yarn
 yarn build
 ```
 
+Alternatively, to continuously watch the frontend assets and rebuild as necessary:
+
+```
+yarn
+yarn watch
+```
+
 Create a Python virtual environment and install required packages:
 
 ```
@@ -205,7 +212,7 @@ yarn prettier
 You can fix any problems by running:
 
 ```
-yarn fix
+yarn prettier:fix
 ```
 
 ### Sample test data
@@ -291,9 +298,10 @@ The `deploy` command:
 
 See [fabfile.py](fabfile.py) for additional detail.
 
-----
+---
 
 ## Open source licensing info
+
 1. [TERMS](TERMS.md)
 2. [LICENSE](LICENSE)
 3. [CFPB Source Code Policy](https://github.com/cfpb/source-code-policy/)

TERMS.md

@@ -1,7 +1,7 @@
 As a work of the United States Government, this package (excluding any
 exceptions listed below) is in the public domain within the United States.
 Additionally, we waive copyright and related rights in the work worldwide
-through the [CC0 1.0 Universal public domain dedication][CC0].
+through the [CC0 1.0 Universal public domain dedication][cc0].
 
 Software source code previously released under an open source license and then
 modified by CFPB staff or its contractors is considered a "joint work"
@@ -14,10 +14,9 @@ rights for that work are waived through the CC0 1.0 Universal dedication.
 
 For further details, please see the CFPB [Source Code Policy][policy].
 
-
 ## CC0 1.0 Universal Summary
 
-This is a human-readable summary of the [Legal Code (read the full text)][CC0].
+This is a human-readable summary of the [Legal Code (read the full text)][cc0].
 
 ### No Copyright
 
@@ -26,7 +25,7 @@ the public domain by waiving all of his or her rights to the work worldwide
 under copyright law, including all related and neighboring rights, to the
 extent allowed by law.
 
-You can copy, modify, distribute and perform the work, even for commercial 
+You can copy, modify, distribute and perform the work, even for commercial
 purposes, all without asking permission. See Other Information below.
 
 ### Other Information
@@ -42,8 +41,7 @@ When using or citing the work, you should not imply endorsement by the
 author or the affirmer.
 
 [policy]: https://github.com/cfpb/source-code-policy/
-[CC0]: http://creativecommons.org/publicdomain/zero/1.0/legalcode
-
+[cc0]: http://creativecommons.org/publicdomain/zero/1.0/legalcode
 
 ## Exceptions
 

esbuild.mjs

@@ -0,0 +1,89 @@
+import { context } from "esbuild";
+import { copy } from "esbuild-plugin-copy";
+import autoprefixer from "autoprefixer";
+import { promises, readdirSync } from "fs";
+import { dirname } from "path";
+import postcss from "postcss";
+import less from "less";
+
+const modules = "./node_modules";
+
+// Copied from https://github.com/cfpb/consumerfinance.gov/blob/fcb4eab638db45003cac57432b89c0a249bc2aff/esbuild/plugins/postcss.js
+const postCSSPlugin = ({ plugins = [], lessOptions = {} }) => ({
+  name: "less-and-postcss",
+  setup(build) {
+    build.onLoad({ filter: /.\.less$/ }, async (args) => {
+      const fileContent = await promises.readFile(args.path, {
+        encoding: "utf-8",
+      });
+      const lessResult = await less.render(fileContent, {
+        ...lessOptions,
+        filename: args.path,
+        rootpath: dirname(args.path),
+      });
+      const result = await postcss(plugins).process(lessResult.css, {
+        from: args.path,
+      });
+
+      return {
+        contents: result.css,
+        loader: "css",
+        watchFiles: lessResult.imports,
+      };
+    });
+  },
+});
+
+(async function () {
+  const watch = process.argv.slice(2)[0] === "--watch";
+
+  const ctx = await context({
+    entryPoints: [
+      "viewer/static_src/js/main.js",
+      "viewer/static_src/css/main.less",
+    ],
+    bundle: true,
+    sourcemap: true,
+    minify: true,
+    logLevel: "debug",
+    outbase: "viewer/static_src",
+    outdir: "viewer/static",
+    external: ["*.png", "*.woff", "*.woff2", "*.gif"],
+    loader: {
+      ".svg": "text",
+    },
+    plugins: [
+      copy({
+        assets: [
+          {
+            from: ["viewer/static_src/query-string-filtering.docx"],
+            to: ["."],
+          },
+          {
+            from: [`${modules}/@cfpb/cfpb-icons/src/icons/*`],
+            to: ["./icons"],
+          },
+        ],
+      }),
+      postCSSPlugin({
+        plugins: [autoprefixer],
+        lessOptions: {
+          math: "always",
+          paths: [
+            ...readdirSync(`${modules}/@cfpb`).map(
+              (v) => `${modules}/@cfpb/${v}/src`
+            ),
+            `${modules}`,
+          ],
+        },
+      }),
+    ],
+  });
+
+  if (watch) {
+    await ctx.watch();
+  } else {
+    await ctx.rebuild();
+    return await ctx.dispose();
+  }
+})();

package.json

@@ -2,36 +2,36 @@
   "name": "website-indexer",
   "version": "1.1.0",
   "license": "CC0-1.0",
-  "type": "module",
   "engines": {
     "node": ">=16.x"
   },
   "scripts": {
-    "prettier": "prettier --check 'viewer/static_src/*.{css,js}' 'viewer/**/*.html'",
-    "fix": "npm run prettier -- --write",
-    "fonts": "cp -r viewer/static_src/fonts viewer/static/fonts",
-    "styles": "curl -o viewer/static/cfgov.css https://www.consumerfinance.gov/static/css/main.css && curl https://www.consumerfinance.gov/static/apps/regulations3k/css/main.css >> viewer/static/cfgov.css && cp viewer/static_src/main.css viewer/static/main.css",
-    "scripts": "esbuild viewer/static_src/main.js --bundle --outfile=viewer/static/main.js",
-    "build": "yarn fonts && yarn styles && yarn scripts"
+    "build": "node ./esbuild.mjs",
+    "clean": "rm -rf ./viewer/static/",
+    "prettier": "prettier . --check",
+    "prettier:fix": "prettier . --write",
+    "watch": "yarn build --watch"
   },
   "dependencies": {
-    "@cfpb/cfpb-expandables": "0.32.0",
-    "esbuild": "^0.14.38"
+    "@cfpb/cfpb-atomic-component": "^2.0.1",
+    "@cfpb/cfpb-buttons": "^2.0.0",
+    "@cfpb/cfpb-core": "^2.0.0",
+    "@cfpb/cfpb-expandables": "^2.0.1",
+    "@cfpb/cfpb-forms": "^2.0.0",
+    "@cfpb/cfpb-grid": "^2.0.0",
+    "@cfpb/cfpb-icons": "^2.0.0",
+    "@cfpb/cfpb-layout": "^2.0.0",
+    "@cfpb/cfpb-notifications": "^2.0.1",
+    "@cfpb/cfpb-pagination": "^2.0.0",
+    "@cfpb/cfpb-typography": "^2.0.1",
+    "autoprefixer": "^10.4.19",
+    "esbuild": "^0.23.0",
+    "esbuild-plugin-copy": "^2.1.1",
+    "less": "^4.2.0",
+    "postcss": "^8.4.39",
+    "postcss-less": "^6.0.0"
   },
   "devDependencies": {
     "prettier": "^2.7.1"
-  },
-  "prettier": {
-    "bracketSameLine": true,
-    "htmlWhitespaceSensitivity": "strict",
-    "tabWidth": 2,
-    "overrides": [
-      {
-        "files": "*.css",
-        "options": {
-          "tabWidth": 4
-        }
-      }
-    ]
   }
 }

settings.py

@@ -57,6 +57,7 @@
 TEMPLATES = [
     {
         "BACKEND": "django.template.backends.django.DjangoTemplates",
+        "DIRS": [BASE_DIR / "viewer/static/icons"],
         "APP_DIRS": True,
         "OPTIONS": {
             "context_processors": [

viewer/static_src/css/breadcrumbs.less

@@ -0,0 +1,29 @@
+// Copied from https://github.com/cfpb/consumerfinance.gov/blob/f19227f9d13d90f19c06dd1dbd78e9233d1d3432/cfgov/unprocessed/css/breadcrumbs.less
+.m-breadcrumbs {
+  // Mobile size.
+  position: relative;
+  display: flex;
+  gap: unit(10px / @base-font-size-px, rem);
+  align-items: center;
+  flex-wrap: wrap;
+
+  font-size: unit(14px / @base-font-size-px, rem);
+  padding-top: unit(15px / @base-font-size-px, rem);
+  padding-bottom: unit(15px / @base-font-size-px, rem);
+  min-height: 33px;
+
+  // Desktop and above.
+  .respond-to-min(@bp-med-min, {
+    padding-top: unit(30px / @base-font-size-px, rem);
+    // Bottom is zero because main content area may or may not have a breadcrumb,
+    // so the main content needs to set it s own spacing.
+    padding-bottom: 0;
+  });
+}
+
+// Hide on print.
+.respond-to-print({
+  .m-breadcrumbs {
+    display: none;
+  }
+});