chore(web app): upgrade to Fresh 1.6.5 and Tailwind CSS

Also move all Fresh files into `website/` directory

.vscode/catechism-of-the-catholic-church.code-workspace

@@ -0,0 +1,16 @@
+{
+    "folders": [
+        {
+            "path": ".."
+        }
+    ],
+    "settings": {
+        "deno.enable": true,
+        "deno.lint": true,
+        "deno.unstable": false,
+        "editor.defaultFormatter": "denoland.vscode-deno",
+		"files.associations": {
+			"*.css": "tailwindcss"
+		}
+    }
+}

.vscode/extensions.json

@@ -1,6 +1,7 @@
 {
     "recommendations": [
         "denoland.vscode-deno",
-        "sastan.twind-intellisense"
+        "bradlc.vscode-tailwindcss",
+        "stivo.tailwind-fold"
     ]
 }

.vscode/launch.json

@@ -8,7 +8,7 @@
             "request": "launch",
             "name": "Web App",
             "type": "node",
-            "program": "${workspaceFolder}/dev.ts",
+            "program": "${workspaceFolder}/website/dev.ts",
             "cwd": "${workspaceFolder}",
             "runtimeExecutable": "deno",
             "runtimeArgs": [
@@ -39,7 +39,7 @@
             "runtimeArgs": [
                 "test",
                 "--inspect-brk",
-                "web/rendering.test.ts"
+                "website/web/rendering.test.ts"
             ],
             "attachSimplePort": 9229
         },

DEVELOPMENT.md

@@ -0,0 +1,38 @@
+## Dependencies
+
+- [Deno](https://deno.land/)
+
+## Useful tools
+
+- [Deno extension for VS Code](https://marketplace.visualstudio.com/items?itemName=denoland.vscode-deno)
+  - see `.vscode/extensions.json` for recommeded extensions
+
+## Main tasks
+
+- `deno task pre-commit` (linting, testing, formatting, and artifact creation)
+- `deno task build-mock-data`
+- `deno task web-app-start`
+
+See `deno.json` for all tasks.
+
+## Committing to `master`
+
+The `pre-commit` task should be successfully executed before committing to ensure that the code is linted, correct, and
+formatted, and that the artifacts are kept in-sync with the source.
+
+Commit messages should follow the following pattern:
+
+```
+type(scope): details
+
+more details (optional)
+```
+
+Where `type` is one of:
+
+- `feat` — for user-facing functionality additions and improvements
+- `fix` — for bug fixes
+- `refactor` — for code refactoring that does not substantially change user-facing functionality
+- `chore` — for non-user-facing changes such build or configuration changes, or dependency updates
+- `style` — for merely cosmetic code changes
+- `docs` — for documentation changes

README.md

@@ -17,41 +17,3 @@ It is available at [https://www.catholiccatechism.app/](https://www.catholiccate
 - [Reddit Catechism bot](https://github.com/konohitowa/catebot)
 - [Something that generates a random paragraph from the Catechism of the Catholic Church](https://github.com/regdoug/ccc)
 - [Golang library of the Catechism of the Council of Trent](https://github.com/mborders/romanus)
-
-## Development
-
-### Dependencies
-
-- [Deno](https://deno.land/)
-
-### Useful tools
-
-- [Deno extension for VS Code](https://marketplace.visualstudio.com/items?itemName=denoland.vscode-deno)
-
-### Tasks
-
-- `deno task pre-commit` (linting, testing, formatting, and artifact creation)
-- `deno task build-mock-data`
-- `deno task web-app-start`
-
-### Committing to `master`
-
-The `pre-commit` task should be successfully executed before committing to ensure that the code is linted, correct, and
-formatted, and that the artifacts are kept in-sync with the source.
-
-Commit messages should follow the following pattern:
-
-```
-type(scope): details
-
-more details (optional)
-```
-
-Where `type` is one of:
-
-- `feat` — for user-facing functionality additions and improvements
-- `fix` — for bug fixes
-- `refactor` — for code refactoring that does not substantially change user-facing functionality
-- `build` — for build changes
-- `style` — for merely cosmetic code changes
-- `docs` — for documentation changes

TODO.md

@@ -1,22 +1,29 @@
 # Tasks to complete now
 
-- [ ] update the intro page if appropriate
+- [ ] improve UI construction
+  - [ ] implement a dark mode toggle
+  - [ ] light/dark/high-contrast mode toggle
+  - [ ] consider using a Layout for the `[...path].tsx` rendering
+  - [ ] use Partials in all appropriate spots
+  - [ ] handle RTL languages
 - merge
 
-- [ ] separate the state logic into obvious client-side and server-side files (to aid with developer understanding, and
-      to mitigate potential bugs)
+- [ ] update UI
+  - [ ] fonts to consider
+    - [ ] Bookman
+    - [ ] Alegreya
+  - [ ] accomodate Forced Colors mode (see Polypane blog)
+  - [ ] dark mode: try to avoid the "window blending" problem (cannot tell where the browser window starts and another
+        application window begins)
+  - [ ] consider all notes about colors found elsewhere in this file
+
+- [ ] update the intro page if appropriate
 - merge
 
 - [ ] set caching headers for the fonts (and any other static files?)
 - merge
 
-- [ ] upgrade to Fresh 1.5.x
-  - check for deployment errors & verify the intro page works
-
-- [ ] consider using a Deno Fresh layout for the `[...path].tsx` rendering
-
 - [ ] translations: always use a server-side component so data isn't sent up to the client unnecessarily
-- [ ] UI changes: handle RTL languages
 - [ ] implement Action bar
   - Table of Contents
     - "Home" (to a new "Dashboard" page (at `/en`): TOC with a link to the current "intro" page)
@@ -60,7 +67,6 @@
 - [ ] consider improving artifact management
   - should artifacts not be commited, and instead be built during deployment?
 - [ ] UI: style for LTR and RTL text
-- [ ] add dark-mode functionality
 - [ ] add e2e UI tests to validate links
 - [ ] add a UI language switcher
   - [ ] update all user-facing text to be
@@ -77,16 +83,12 @@
   - [ ] routing
     - [ ] to in-page anchor tags
 - UI:
-  - consider using Twind presets:
-    - https://twind.style/presets#official-presets
+  - consider if any of the official Tailwind presets would be useful:
+    - https://tailwindcss.com/docs/plugins#official-plugins
   - consider using Radix UI things:
-    - https://twind.style/preset-radix-ui
-      - https://www.radix-ui.com/colors
+    - https://www.radix-ui.com/colors
     - https://www.radix-ui.com/
     - https://icons.radix-ui.com/
-  - [ ] light/dark/high-contrast mode toggle
-    - [ ] dark mode: try to avoid the "window blending" problem (cannot tell where the browser window starts and another
-          application window begins)
   - [ ] consider using the following colors:
     - [ ] #E86D82 (red-pink)
 - [ ] implement unimplemented tests

catechism/artifact-builders/paragraph-number-to-url-map.ts

@@ -1,6 +1,6 @@
 import { CatechismStructure, ParagraphNumberUrlMap } from '../source/types/types.ts';
 import { getAllParagraphs } from '../source/utils/content.ts';
-import { getUrl } from '../../web/routing-server.ts';
+import { getUrl } from '../../website/logic/server/routing.ts';
 
 export function build(catechism: CatechismStructure): ParagraphNumberUrlMap {
     const urlMap: ParagraphNumberUrlMap = {};

catechism/artifact-builders/path-id-to-content-map.ts

@@ -1,5 +1,5 @@
 import { CatechismStructure, PathIdContentMap, SemanticPathPathIdMap } from '../source/types/types.ts';
-import { getContentForRendering } from '../../web/rendering.ts';
+import { getContentForRendering } from '../../website/logic/server/rendering.ts';
 
 export function build(renderablePathMap: SemanticPathPathIdMap, catechism: CatechismStructure): PathIdContentMap {
     const contentMap: PathIdContentMap = {};

catechism/artifact-builders/table-of-contents.ts

@@ -11,7 +11,7 @@ import {
 } from '../source/types/types.ts';
 import { getFinalContent, getInBrief, getMainContent, getParagraphs } from '../source/utils/content.ts';
 import { buildSemanticPath, getSemanticPathSource } from '../source/utils/semantic-path.ts';
-import { getUrl } from '../../web/routing-server.ts';
+import { getUrl } from '../../website/logic/server/routing.ts';
 
 //#region builders
 export function build(catechism: CatechismStructure): TableOfContentsType {

catechism/artifacts/paragraph-number_to_content.test.ts

@@ -1,4 +1,4 @@
-import { assertExists, assertStrictEquals } from '$deno/testing/asserts.ts';
+import { assertExists, assertStrictEquals } from '$deno/assert/mod.ts';
 
 import { getAllParagraphs, getCatechism } from '../source/utils/content.ts';
 import { CatechismStructure, ParagraphNumberContentMap } from '../source/types/types.ts';

catechism/artifacts/path-id_to_renderable-nodes.test.ts

@@ -1,4 +1,4 @@
-import { assert, assertStrictEquals } from '$deno/testing/asserts.ts';
+import { assert, assertStrictEquals } from '$deno/assert/mod.ts';
 import { RenderableNode } from '../source/types/renderable-node.ts';
 import { RenderableNodeMap } from '../source/types/types.ts';
 import { getRenderableNodeMap } from '../source/utils/artifacts.ts';

catechism/artifacts/renderable-path-id_to_content.test.ts

@@ -1,4 +1,4 @@
-import { assertStrictEquals, fail } from '$deno/testing/asserts.ts';
+import { assertStrictEquals, fail } from '$deno/assert/mod.ts';
 
 import { getAllOfProperty, getAllPathIDs, getCatechism } from '../source/utils/content.ts';
 import { CatechismStructure, PathID, PathIdContentMap, SemanticPathPathIdMap } from '../source/types/types.ts';

catechism/artifacts/semantic-path_to_renderable-path-id.test.ts

@@ -1,4 +1,4 @@
-import { assertStrictEquals } from '$deno/testing/asserts.ts';
+import { assertStrictEquals } from '$deno/assert/mod.ts';
 import { SemanticPathPathIdMap } from '../source/types/semantic-path-path-id-map.ts';
 import { getRenderablePathMap } from '../source/utils/artifacts.ts';
 import { getSupportedLanguages } from '../source/utils/language.ts';

catechism/artifacts/table-of-contents.test.ts

@@ -1,4 +1,4 @@
-import { assert, assertExists, assertStrictEquals } from '$deno/testing/asserts.ts';
+import { assert, assertExists, assertStrictEquals } from '$deno/assert/mod.ts';
 
 import { CatechismStructure, TableOfContentsEntry, TableOfContentsType } from '../source/types/types.ts';
 import { getTableOfContents } from '../source/utils/artifacts.ts';

catechism/content/catechism-structure.test.ts

@@ -1,4 +1,4 @@
-import { assert, assertNotMatch, assertStrictEquals } from '$deno/testing/asserts.ts';
+import { assert, assertNotMatch, assertStrictEquals } from '$deno/assert/mod.ts';
 
 import {
     BibleReference,

catechism/content/catechism-text-all.test.ts

@@ -1,4 +1,4 @@
-import { assertNotMatch, assertNotStrictEquals, assertStrictEquals, fail } from '$deno/testing/asserts.ts';
+import { assertNotMatch, assertNotStrictEquals, assertStrictEquals, fail } from '$deno/assert/mod.ts';
 
 import { CatechismText, getText } from './test-utils.ts';
 import { PathID } from '../source/types/types.ts';

catechism/content/catechism-text-en.test.ts

@@ -1,6 +1,6 @@
-import Catechism from './catechism-en.json' assert { type: 'json' };
+import Catechism from './catechism-en.json' with { type: 'json' };
 
-import { assertNotMatch, assertStrictEquals, assertStringIncludes } from '$deno/testing/asserts.ts';
+import { assertNotMatch, assertStrictEquals, assertStringIncludes } from '$deno/assert/mod.ts';
 
 import { errorMessage, getText, testCharacters, testLines } from './test-utils.ts';
 import { CatechismStructure, Language, PathID } from '../source/types/types.ts';

catechism/content/catechism-text-es.test.ts

@@ -1,6 +1,6 @@
-import Catechism from './catechism-es.json' assert { type: 'json' };
+import Catechism from './catechism-es.json' with { type: 'json' };
 
-import { assertStrictEquals } from '$deno/testing/asserts.ts';
+import { assertStrictEquals } from '$deno/assert/mod.ts';
 
 import { CatechismStructure, Language } from '../source/types/types.ts';
 

catechism/content/catechism-text-la.test.ts

@@ -1,6 +1,6 @@
-import Catechism from './catechism-la.json' assert { type: 'json' };
+import Catechism from './catechism-la.json' with { type: 'json' };
 
-import { assertStrictEquals } from '$deno/testing/asserts.ts';
+import { assertStrictEquals } from '$deno/assert/mod.ts';
 
 import { CatechismStructure, Language } from '../source/types/types.ts';
 

catechism/mock-data/build/build.ts

@@ -27,7 +27,7 @@ import {
 } from '../../source/utils/content.ts';
 import { getContainerDesignator } from '../../source/utils/path-id.ts';
 import { buildSemanticPath, getSemanticPathSource } from '../../source/utils/semantic-path.ts';
-import { getUrl } from '../../../web/routing-server.ts';
+import { getUrl } from '../../../website/logic/server/routing.ts';
 
 //#region top-level functions
 export function buildMockData(): CatechismStructure {

catechism/source/types/enums.test.ts

@@ -1,4 +1,4 @@
-import { assertStrictEquals } from '$deno/testing/asserts.ts';
+import { assertStrictEquals } from '$deno/assert/mod.ts';
 import { Artifact, BibleBook, Container, Content, Language, OtherSourceEnum, ReferenceEnum } from './types.ts';
 
 console.log('\nEnums ...');

catechism/source/utils/content.test.ts

@@ -1,4 +1,4 @@
-import { assertEquals } from '$deno/testing/asserts.ts';
+import { assertEquals } from '$deno/assert/mod.ts';
 
 import { getParagraphNumbers } from './content.ts';
 

catechism/source/utils/content.ts

@@ -16,7 +16,7 @@ import {
 
 export async function getCatechism(language: Language): Promise<CatechismStructure> {
     const file = `catechism-${language}.json`;
-    const catechism = await import(`../../content/${file}`, { assert: { type: 'json' } });
+    const catechism = await import(`../../content/${file}`, { with: { type: 'json' } });
     return catechism.default;
 }
 

catechism/source/utils/path-id.test.ts

@@ -1,4 +1,4 @@
-import { assert, assertEquals, assertStrictEquals, assertThrows } from '$deno/testing/asserts.ts';
+import { assert, assertEquals, assertStrictEquals, assertThrows } from '$deno/assert/mod.ts';
 
 import {
     getContainerDesignator,

catechism/source/utils/semantic-path.test.ts

@@ -1,4 +1,4 @@
-import { assertStrictEquals } from '$deno/testing/asserts.ts';
+import { assertStrictEquals } from '$deno/assert/mod.ts';
 
 import { buildSemanticPath, getSemanticPathSource } from './semantic-path.ts';
 import {

catechism/source/utils/semantic-path.ts

@@ -14,7 +14,7 @@ import {
     SemanticPathSource,
     Subarticle,
 } from '../types/types.ts';
-import { translate } from '../../../web/translation.ts';
+import { translate } from '../../../website/logic/shared/translation.ts';
 
 /**
  * @param ancestors a list of ancestors of `child`, in descending order (i.e. `ancestors[i]` is the parent of `ancestors[i+1]`)