feat(web app): add navigation footer

inkwell-studio · Oct 13, 2023 · bf16974 · bf16974
1 parent 0fba60f
commit bf16974
Show file tree

Hide file tree

Showing 9 changed files with 141 additions and 93 deletions.
diff --git a/TODO.md b/TODO.md
@@ -1,14 +1,37 @@
 # Tasks to complete now
 
-- [ ] implement a mechanism to return to:
-  - the homepage
-  - table of contents
+- [ ] implement a next/previous navigation mechanism
+  - new artifact: a map object, where `PathID`s are the new "renderable PathID"s:
+    ```TypeScript
+    Record<PathID, {
+        previous: { pathID: PathID; title: string } | null;
+        next: { pathID: PathID; title: string } | null;
+    }>;
+    ```
+    - this is derived from an ordered list of "renderable PathID"s (these may need to be newly computed or derived
+      — they can be derived from the Table of Contents entries: taking them in order and filtering out those with URL
+      fragments (i.e. `#` in the URL))
+  - add the current "renderable PathID" to the state
+    - this new state property is used as an index on the the new artifact to display the Next/Previous selectors on the
+      UI
+  - also consider the previously thought of algorithms (potentially now obsolete):
+    - "Next" algorithm:
+      - 2nd main-content child: `0__m.0` -> `0__m.0__m.1`
+      - next sibling: `0__m.0__m.1` -> `0__m.0__m.2`
+      - parent sibling, next (continue ascending as necessary)
+      - `null`
+  - "Previous" algorithm
+    - previous non-first main content sibling: `0__m.0__m.2` -> `0__m.0__m.1`
+    - parent sibling, previous (continue ascending as necessary)
+    - `null`
 - merge
 
-- [ ] set caching headers for the fonts (and any other static files?)
 - [ ] implement citations
+  - [ ] also set caching headers for the fonts (and any other static files?)
 - merge
 
+- [ ] upgrade to Fresh 1.5.x
+
 - [ ] 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
@@ -38,24 +61,16 @@
 - [ ] implement hierarchical navigation
 - merge
 
-- [ ] add "next" and "previous" content
-  - "Next" algorithm:
-    - 2nd main-content child: `0__m.0` -> `0__m.0__m.1`
-    - next sibling: `0__m.0__m.1` -> `0__m.0__m.2`
-    - parent sibling, next (continue ascending as necessary)
-    - `null`
-  - "Previous" algorithm
-    - previous non-first main content sibling: `0__m.0__m.2` -> `0__m.0__m.1`
-    - parent sibling, previous (continue ascending as necessary)
-    - `null`
-- merge
-
 - [ ] look into "ahead-of-time" builds: https://fresh.deno.dev/docs/concepts/ahead-of-time-builds
 - [ ] research artifact caching methods
 
 ## Unprioritized
 
-- [ ] consider using an unstyled component library for buttons and other like elements
+- [ ] consider using a component library for buttons and other like elements
+  - https://mantine.dev/
+  - https://www.radix-ui.com/primitives
+  - https://chakra-ui.com/
+  - https://headlessui.com/
 - [ ] determine the proper status code to use for the paragraph-number redirects
 - [ ] add helpful information and links to the 404 page
 - [ ] look into using Astral for e2e testing: https://astral.deno.dev/

diff --git a/fresh.gen.ts b/fresh.gen.ts
@@ -15,10 +15,9 @@ import * as $$1 from './routes/(_islands)/changelog.tsx';
 import * as $$2 from './routes/(_islands)/citations.tsx';
 import * as $$3 from './routes/(_islands)/content-base.tsx';
 import * as $$4 from './routes/(_islands)/cross-references.tsx';
-import * as $$5 from './routes/(_islands)/menu.tsx';
-import * as $$6 from './routes/(_islands)/search.tsx';
-import * as $$7 from './routes/(_islands)/trail-hierarchical.tsx';
-import * as $$8 from './routes/(_islands)/trail-historical.tsx';
+import * as $$5 from './routes/(_islands)/search.tsx';
+import * as $$6 from './routes/(_islands)/trail-hierarchical.tsx';
+import * as $$7 from './routes/(_islands)/trail-historical.tsx';
 
 const manifest = {
     routes: {
@@ -37,10 +36,9 @@ const manifest = {
         './routes/(_islands)/citations.tsx': $$2,
         './routes/(_islands)/content-base.tsx': $$3,
         './routes/(_islands)/cross-references.tsx': $$4,
-        './routes/(_islands)/menu.tsx': $$5,
-        './routes/(_islands)/search.tsx': $$6,
-        './routes/(_islands)/trail-hierarchical.tsx': $$7,
-        './routes/(_islands)/trail-historical.tsx': $$8,
+        './routes/(_islands)/search.tsx': $$5,
+        './routes/(_islands)/trail-hierarchical.tsx': $$6,
+        './routes/(_islands)/trail-historical.tsx': $$7,
     },
     baseUrl: import.meta.url,
 };

diff --git a/routes/(_components)/action-bar.tsx b/routes/(_components)/action-bar.tsx
@@ -1,17 +1,17 @@
 import { JSX } from 'preact';
 
+import { NavigationMenu } from '../(_components)/navigation-menu.tsx';
 import Search from '../(_islands)/search.tsx';
-import Menu from '../(_islands)/menu.tsx';
 import TrailHierarchical from '../(_islands)/trail-hierarchical.tsx';
 import TrailHistorical from '../(_islands)/trail-historical.tsx';
 
 export function ActionBar(): JSX.Element {
     return (
-        <div class='flex justify-center gap-8 bg-tan-100 border py-4'>
-            <TrailHierarchical></TrailHierarchical>
-            <TrailHistorical></TrailHistorical>
-            <Search></Search>
-            <Menu></Menu>
+        <div class='flex justify-center gap-8 bg-tan-100 border'>
+            {/* <TrailHierarchical></TrailHierarchical> */}
+            {/* <TrailHistorical></TrailHistorical> */}
+            {/* <Search></Search> */}
+            <NavigationMenu></NavigationMenu>
         </div>
     );
 }
diff --git a/routes/(_components)/navigation-menu.tsx b/routes/(_components)/navigation-menu.tsx
@@ -0,0 +1,38 @@
+import { JSX } from 'preact';
+import { Selectors } from '../../web/state.ts';
+import { translate } from '../../web/translation.ts';
+
+export function NavigationMenu(): JSX.Element {
+    const language = Selectors.language.value;
+    const linkClasses = 'flex items-center text-center py-4 px-8 hover:bg-tan-50 transition-colors';
+
+    return (
+        <div className='flex text-sm'>
+            <a href={`/${language}`} class={linkClasses}>{translate('Table of Contents', language)}</a>
+
+            <div class='my-2 border-l'></div>
+
+            <a href='/' class={linkClasses}>{translate('Introduction (Home)', language)}</a>
+
+            <div class='my-2 border-l'></div>
+
+            <a href='/select-language' class={linkClasses + ' gap-4'}>
+                <svg
+                    xmlns='http://www.w3.org/2000/svg'
+                    fill='none'
+                    viewBox='0 0 24 24'
+                    stroke-width='1.5'
+                    stroke='currentColor'
+                    class='w-6 h-6'
+                >
+                    <path
+                        stroke-linecap='round'
+                        stroke-linejoin='round'
+                        d='M10.5 21l5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 016-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 01-3.827-5.802'
+                    />
+                </svg>
+                <span>{translate('Select Language', language)}</span>
+            </a>
+        </div>
+    );
+}
diff --git a/routes/(_islands)/menu.tsx b/routes/(_islands)/menu.tsx
diff --git a/routes/[language]/[...path].tsx b/routes/[language]/[...path].tsx
@@ -13,7 +13,7 @@ import { getAllLanguages, getLanguageInfo, getNativeLanguageText } from '../../c
 
 import { loadContent } from '../../web/rendering.ts';
 import { Element, getElementAndPathID } from '../../web/routing-server.ts';
-import { Actions, Selectors } from '../../web/state.ts';
+import { Selectors } from '../../web/state.ts';
 import { translate } from '../../web/translation.ts';
 
 export default defineRoute(async (request, context) => {
@@ -70,7 +70,7 @@ function RenderApp(mainElement: JSX.Element): JSX.Element {
                     {mainElement}
                 </div>
                 <div>
-                    {/* <ActionBar></ActionBar> */}
+                    <ActionBar></ActionBar>
                 </div>
             </body>
         </>

diff --git a/routes/index.tsx b/routes/index.tsx
@@ -57,45 +57,40 @@ export default function Home(): JSX.Element {
                         </>
                     </Paragraph>
                     <ol class='list-disc mb-2 ml-6 space-y-0.5'>
-                        <li>
-                            <a class='hover:underline' href='http://www.vatican.va/archive/ENG0015/_INDEX.HTM'>
-                                Vatican archive
-                            </a>
-                        </li>
-                        <li>
-                            <a
-                                class='hover:underline'
-                                href='https://www.usccb.org/beliefs-and-teachings/what-we-believe/catechism/catechism-of-the-catholic-church'
-                            >
-                                United States Conference of Catholic Bishops
-                            </a>
-                        </li>
-                        <li>
-                            <a
-                                class='hover:underline'
-                                href='https://scborromeo2.org/catechism-of-the-catholic-church'
-                            >
-                                St. Charles Borromeo Catholic Church of Picayune, Mississippi
-                            </a>
-                        </li>
-                        <li>
-                            <a class='hover:underline' href='http://cccref.com/'>
-                                A wrapper around the St. Charles Borromeo website
-                            </a>
-                        </li>
-                        <li>
-                            <a class='hover:underline' href='https://www.catechismonline.com/home'>
-                                www.catechismonline.com
-                            </a>
-                        </li>
-                        <li>
-                            <a
-                                class='hover:underline'
-                                href='https://www.catholicculture.org/culture/library/catechism/index.cfm'
-                            >
-                                www.catholicculture.org
-                            </a>
-                        </li>
+                        {[
+                            {
+                                url: 'http://www.vatican.va/archive/ENG0015/_INDEX.HTM',
+                                text: 'Vatican archive',
+                            },
+                            {
+                                url: 'https://www.usccb.org/beliefs-and-teachings/what-we-believe/catechism/catechism-of-the-catholic-church',
+                                text: 'United States Conference of Catholic Bishops',
+                            },
+                            {
+                                url: 'https://scborromeo2.org/catechism-of-the-catholic-church',
+                                text: 'St. Charles Borromeo Catholic Church of Picayune, Mississippi',
+                            },
+                            {
+                                url: 'http://cccref.com/',
+                                text: 'A wrapper around the St. Charles Borromeo website',
+                            },
+                            {
+                                url: 'https://www.catechismonline.com/home',
+                                text: 'www.catechismonline.com',
+                            },
+                            {
+                                url: 'https://www.catholicculture.org/culture/library/catechism/index.cfm',
+                                text: 'www.catholicculture.org',
+                            },
+                            {
+                                url: 'https://www.catholicdoors.com/catechis/index.htm',
+                                text: 'www.catholicdoors.com',
+                            },
+                        ].map((site) => (
+                            <li>
+                                <a class='hover:underline' href={site.url}>{site.text}</a>
+                            </li>
+                        ))}
                     </ol>
                     <Paragraph>
                         <>

diff --git a/routes/select-language.tsx b/routes/select-language.tsx
@@ -17,7 +17,21 @@ export default function SelectLanguage(): JSX.Element {
                     </a>
                 ))}
             </div>
-            <a href='/' class='mt-16 mb-8 text-lg hover:underline'>Return to the Introduction</a>
+            <a href='/' class='flex items-center gap-2 mt-16 mb-8 text-lg hover:underline'>
+                <svg
+                    xmlns='http://www.w3.org/2000/svg'
+                    fill='none'
+                    viewBox='0 0 24 24'
+                    stroke-width='1.5'
+                    stroke='currentColor'
+                    class='w-6 h-6'
+                >
+                    <path stroke-linecap='round' stroke-linejoin='round' d='M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3' />
+                </svg>
+                <span>
+                    Return to the Introduction
+                </span>
+            </a>
         </div>
     );
 }

diff --git a/web/translation.ts b/web/translation.ts
@@ -29,6 +29,14 @@ const translationMap: Record<string, Record<Exclude<Language, Language.ENGLISH>,
         [Language.LATIN]: 'Redira ad Initium',
         [Language.SPANISH]: 'Volver a Empezar',
     },
+    'Introduction (Home)': {
+        [Language.LATIN]: 'Praelocutio (Initium)',
+        [Language.SPANISH]: 'Introducción (Empezar)',
+    },
+    'Select Language': {
+        [Language.LATIN]: 'Eligere Lingua',
+        [Language.SPANISH]: 'Seleccione el Idioma',
+    },
     'Open': {
         [Language.LATIN]: 'Pando',
         [Language.SPANISH]: 'Desplegar',