NEW: Placeholder Component Page

index.js

@@ -47,7 +47,7 @@ app.get(`/grammar`, handlers.md(`Grammar`))
 app.get(`/research`, handlers.md(`Research`))
 app.get(`/research/:pub`, handlers.Research)
 app.get(`/components`, handlers.Components)
-app.get(`/components/:component`, handlers.Component)
+app.get(`/components/:componentID`, handlers.Component)
 app.use(handlers.PageNotFound)
 app.use(handlers.ServerError)
 

pages/Component/Component.hbs

@@ -1,6 +1,8 @@
 <main id=main class=component-page>
 
-  <h1>{{ language }}: <i class=inex>{{ component.form }}</i></h1>
+  {{#with component }}
+    <h1>{{ language }}: <i class=inex>{{ form }}</i></h1>
+  {{/with}}
 
   <pre><code>{{ json }}</code></pre>
 

pages/Component/Component.js

@@ -1,20 +1,33 @@
+import db from '../../database/index.js'
+
 export function Component(req, res) {
 
-  const component = {
-    form: `-a·mɛhk-`,
-    id:   1234,
-  }
+  const { componentID } = req.params
+  const component       = db.index.get(componentID)
+
+  if (!component) {
+
+    const status = 404
 
-  const language = `Menominee`
+    res.status = status
+
+    return res.render(`Error/Error.md`, {
+      cssClass: `error`,
+      Error:    true,
+      message:  `A component with ID <code>${ componentID }</code> does not exist.`,
+      status,
+      title:    `Component Not Found`,
+    })
+
+  }
 
   res.render(`Component/Component`, {
     component,
     Component:    true,
     construction: true,
     json:         JSON.stringify(component, null, 2),
-    language,
     pageCSS:      res.app.locals.styles.Component,
-    title:        `${ language }: ${ component.form }`,
+    title:        `${ component.language }: ${ component.form }`,
   })
 
 }

pages/Components/Components.js

@@ -1,5 +1,3 @@
-import db from '../../database/index.js'
-
 export function Components(req, res) {
 
   res.render(`Components/Components`, {