Incorporate front matter and refactor MDX. (#161)

Co-authored-by: Mat Jordan <[email protected]>

config/.default/navigation.default.json

@@ -30,6 +30,10 @@
       "path": "/about/example",
       "text": "Markdown Example"
     },
+    {
+      "path": "/about/another-example",
+      "text": "Another Example"
+    },
     {
       "path": "/about/history",
       "text": "Project History"

content/404.mdx

@@ -0,0 +1,7 @@
+---
+title: 404 - Page Not Found
+---
+
+# Page Not Found
+
+404 Error

content/about/another-example.mdx

@@ -0,0 +1,66 @@
+---
+title: "Another Markdown Example"
+navigation: "about"
+referencedManifests:
+  - "https://api.dc.library.northwestern.edu/api/v2/works/84aec8c1-42e8-4e2c-a6b2-1c7e3790217f?as=iiif"
+  - "https://api.dc.library.northwestern.edu/api/v2/works/431db4ca-a452-496e-91dc-3a266e4a2d83?as=iiif"
+  - "https://api.dc.library.northwestern.edu/api/v2/works/588a6527-88b6-4b70-ae6c-f42aceea9efb?as=iiif"
+  - "https://api.dc.library.northwestern.edu/api/v2/works/83fbe94b-6db7-463e-9942-6beb256aa606?as=iiif"
+---
+
+# Another Markdown Example
+
+In this particular example, we are creating mock content adding context to a work represented by a
+specific Manifest. To do so we add the Manifest URI to the `referencedManifests` list in front matter,
+and then use a combintation of `<Viewer/>` and `<ReferencedItems/>` components to output a deep-zoom
+IIIF viewer and a link to the respective `/work` page.
+
+## The IIIF Viewer
+
+A IIIF viewer is a React component that takes a single property, `iiifContent`, which is the URI to the
+IIIF manifest. The component will then fetch the Manifest and render a deep-zoom viewer. The viewer is
+responsive and will resize to fit the container it is placed in.
+
+<Viewer iiifContent="https://api.dc.library.northwestern.edu/api/v2/works/84aec8c1-42e8-4e2c-a6b2-1c7e3790217f?as=iiif" />
+
+## The Referenced Items
+
+The `<ReferencedItems/>` automatically outputs a grid of items that are referenced by the current page.
+
+<ReferencedItems />
+
+## Example MDX
+
+```jsx
+---
+title: "Another Markdown Example"
+navigation: "about"
+referencedManifests:
+  - "https://api.dc.library.northwestern.edu/api/v2/works/84aec8c1-42e8-4e2c-a6b2-1c7e3790217f?as=iiif"
+  - "https://api.dc.library.northwestern.edu/api/v2/works/431db4ca-a452-496e-91dc-3a266e4a2d83?as=iiif"
+  - "https://api.dc.library.northwestern.edu/api/v2/works/588a6527-88b6-4b70-ae6c-f42aceea9efb?as=iiif"
+  - "https://api.dc.library.northwestern.edu/api/v2/works/83fbe94b-6db7-463e-9942-6beb256aa606?as=iiif"
+---
+
+# Another Markdown Example
+
+In this particular example, we are creating mock content adding context to a work represented by a
+specific Manifest. To do so we add the Manifest URI to the `referencedManifests` list in front matter,
+and then use a combintation of `<Viewer/>` and `<ReferencedItems/>` components to output a deep-zoom
+IIIF viewer and a link to the respective `/work` page.
+
+## The IIIF Viewer
+
+A IIIF viewer is a React component that takes a single property, `iiifContent`, which is the URI to the
+IIIF manifest. The component will then fetch the Manifest and render a deep-zoom viewer. The viewer is
+responsive and will resize to fit the container it is placed in.
+
+<Viewer iiifContent="https://api.dc.library.northwestern.edu/api/v2/works/84aec8c1-42e8-4e2c-a6b2-1c7e3790217f?as=iiif" />
+
+## The Referenced Items
+
+The `<ReferencedItems/>` automatically outputs a grid of items that are referenced by the current page.
+
+<ReferencedItems />
+
+```

src/pages/about/documentation.mdx → content/about/documentation.mdx

@@ -1,4 +1,7 @@
-import Basic from "@components/Layouts/Basic";
+---
+title: Documentation
+navigation: "about"
+---
 
 # Documentation
 
@@ -307,7 +310,3 @@ If you plan to host your site in a subdirectory or subdomain, you will need to s
 NEXT_PUBLIC_URL = "https://canopy-iiif.vercel.app"
 NEXT_PUBLIC_BASE_PATH = ""
 ```
-
-export default ({ children }) => (
-  <Basic content={children} navigation="about" />
-);

content/about/example.mdx

@@ -0,0 +1,111 @@
+---
+title: "Markdown Example"
+navigation: "about"
+referencedManifests:
+  - "https://api.dc.library.northwestern.edu/api/v2/works/84aec8c1-42e8-4e2c-a6b2-1c7e3790217f?as=iiif"
+  - "https://api.dc.library.northwestern.edu/api/v2/works/cd5e1b9c-370b-40e5-b3d9-defc1d8e0777?as=iiif"
+  - "https://api.dc.library.northwestern.edu/api/v2/works/15871197-1616-4c37-9257-b0ad0dc5ab30?as=iiif"
+  - "https://api.dc.library.northwestern.edu/api/v2/works/14a6aa15-9e12-47a7-9617-91f430d4f47b?as=iiif"
+---
+
+# Markdown Example
+
+Canopy IIIF is designed to work with Markdown using the [MDX](https://mdxjs.com/) library. This allows us to use React components in our Markdown content. This example page demonstrates the various components that are available for use in Markdown content, front matter, and compatible Canopy components that can augment and create links betwen your Markdown content and the IIIF Manifests contained in your source IIIF Collection. This page is output from the `/content/about/example.mdx` file.
+
+Using generated Latin, a sample blockquote and paragraph is included below.
+
+> Aenean viverra quam sit amet sapien tempor, vel sagittis velit ultricies. In imperdiet posuere risus non sodales. Mauris posuere elit a lectus vehicula, nec ullamcorper metus aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+Pellentesque et scelerisque tellus, nec vehicula nisi. Mauris auctor nisl non bibendum varius. Donec nec pretium leo. Sed ut sapien metus. Nullam elementum est leo, ac ornare ipsum accumsan id. Sed nec metus sed lacus fringilla feugiat. Nulla ut nunc sem. Ut efficitur tincidunt mi. Curabitur sed dapibus ex.
+
+## Referencing Manifests
+
+When authoring markdown content, users can reference IIIF Manifests in front matter. The referenced items can be output using the `<ReferencedItems />` component and will be rendered in a grid format. A link will automatically be created between the referenced item and the referencing content page.
+
+<ReferencedItems />
+
+## Inserting a IIIF Viewer
+
+Users authoring content can bring a pan-zoom compatible IIIF Viewer into their content by using the `<Viewer />` component. The viewer will automatically be sized to the width of the content container.
+
+<Viewer iiifContent="https://api.dc.library.northwestern.edu/api/v2/works/cd5e1b9c-370b-40e5-b3d9-defc1d8e0777?as=iiif" />
+
+## Inserting a Card
+
+Users can also add a figure representing a Manifest to their content by using the `<Card />` component. The figure will include a rendered thumbnail for the Manifest, the label, and a link to the respective `/work` page. A Card does not create automatic linking from a `/work` page back to content pages.
+
+<Card iiifContent="https://api.dc.library.northwestern.edu/api/v2/works/19efac1e-5e79-471c-89c2-a60a775562ce?as=iiif" />
+
+## Leveraging Facets
+
+During the Canopy build process, new IIIF Collections are automatically generated from the source IIIF Collection. These new collections are faceted by the metadata fields that are defined in the Canopy configuration file. The faceted collections are available at the URL pattern `/api/facet/{label}/{value}.json`.
+
+The `<Viewer />` component can be used to display a faceted IIIF Collection by passing the URL of the faceted collection to the `iiifContent` prop. In this example we are passing the relative URL of the faceted collection for the `date` field with the value `1910` for the path `/api/facet/date/1910.json` to the `iiifContent` prop.
+
+### Viewer Component
+
+<Viewer iiifContent="/api/facet/date/1910.json" />
+
+### Slider Component
+
+These can alternatively be rendered in `<Slider />` component.
+
+<Slider iiifContent="/api/facet/date/1910.json" />
+
+## Example MDX
+
+```jsx
+---
+title: "Markdown Example"
+navigation: "about"
+referencedManifests:
+  - "https://api.dc.library.northwestern.edu/api/v2/works/84aec8c1-42e8-4e2c-a6b2-1c7e3790217f?as=iiif"
+  - "https://api.dc.library.northwestern.edu/api/v2/works/cd5e1b9c-370b-40e5-b3d9-defc1d8e0777?as=iiif"
+  - "https://api.dc.library.northwestern.edu/api/v2/works/15871197-1616-4c37-9257-b0ad0dc5ab30?as=iiif"
+  - "https://api.dc.library.northwestern.edu/api/v2/works/14a6aa15-9e12-47a7-9617-91f430d4f47b?as=iiif"
+---
+
+# Markdown Example
+
+Canopy IIIF is designed to work with Markdown using the [MDX](https://mdxjs.com/) library. This allows us to use React components in our Markdown content. This example page demonstrates the various components that are available for use in Markdown content, front matter, and compatible Canopy components that can augment and create links betwen your Markdown content and the IIIF Manifests contained in your source IIIF Collection. This page is output from the `/content/about/example.mdx` file.
+
+Using generated Latin, a sample blockquote and paragraph is included below.
+
+> Aenean viverra quam sit amet sapien tempor, vel sagittis velit ultricies. In imperdiet posuere risus non sodales. Mauris posuere elit a lectus vehicula, nec ullamcorper metus aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+Pellentesque et scelerisque tellus, nec vehicula nisi. Mauris auctor nisl non bibendum varius. Donec nec pretium leo. Sed ut sapien metus. Nullam elementum est leo, ac ornare ipsum accumsan id. Sed nec metus sed lacus fringilla feugiat. Nulla ut nunc sem. Ut efficitur tincidunt mi. Curabitur sed dapibus ex.
+
+## Referencing Manifests
+
+When authoring markdown content, users can reference IIIF Manifests in front matter. The referenced items can be output using the `<ReferencedItems />` component and will be rendered in a grid format. A link will automatically be created between the referenced item and the referencing content page.
+
+<ReferencedItems />
+
+## Inserting a IIIF Viewer
+
+Users authoring content can bring a pan-zoom compatible IIIF Viewer into their content by using the `<Viewer />` component. The viewer will automatically be sized to the width of the content container.
+
+<Viewer iiifContent="https://api.dc.library.northwestern.edu/api/v2/works/cd5e1b9c-370b-40e5-b3d9-defc1d8e0777?as=iiif" />
+
+## Inserting a Card
+
+Users can also add a figure representing a Manifest to their content by using the `<Card />` component. The figure will include a rendered thumbnail for the Manifest, the label, and a link to the respective `/work` page. A Card does not create automatic linking from a `/work` page back to content pages.
+
+<Card iiifContent="https://api.dc.library.northwestern.edu/api/v2/works/19efac1e-5e79-471c-89c2-a60a775562ce?as=iiif" />
+
+## Leveraging Facets
+
+During the Canopy build process, new IIIF Collections are automatically generated from the source IIIF Collection. These new collections are faceted by the metadata fields that are defined in the Canopy configuration file. The faceted collections are available at the URL pattern `/api/facet/{label}/{value}.json`.
+
+The `<Viewer />` component can be used to display a faceted IIIF Collection by passing the URL of the faceted collection to the `iiifContent` prop. In this example we are passing the relative URL of the faceted collection for the `date` field with the value `1910` for the path `/api/facet/date/1910.json` to the `iiifContent` prop.
+
+### Viewer Component
+
+<Viewer iiifContent="/api/facet/date/1910.json" />
+
+### Slider Component
+
+These can alternatively be rendered in `<Slider />` component.
+
+<Slider iiifContent="/api/facet/date/1910.json" />
+```

src/pages/about/history.mdx → content/about/history.mdx

@@ -1,4 +1,7 @@
-import Basic from "@components/Layouts/Basic";
+---
+title: Project History
+navigation: "about"
+---
 
 # Project History
 
@@ -41,7 +44,3 @@ This demonstration instance of Canopy IIIF is hosted on Vercel with a consistent
 **David Schober**
 
 - Product Owner and Team Lead, Northwestern University Libraries
-
-export default ({ children }) => (
-  <Basic content={children} navigation="about" />
-);

src/pages/about/index.mdx → content/about/index.mdx

@@ -1,4 +1,7 @@
-import Basic from "@components/Layouts/Basic";
+---
+title: About
+navigation: "about"
+---
 
 # About
 
@@ -15,7 +18,3 @@ Canopy IIIF offers solutions to many use cases including:
 ## Features
 
 Canopy IIIF extends the features of Next.js to produce a full-text search index using FlexSearch, provides support for both IIIF Presentation API 2.x and 3.0 specifications, and automatically generates facets based on the curated metadata labels and values found within Manifests. The platform’s API routes return IIIF collections and allow for users to reference IIIF resources internally and externally. In addition to these features, the product roadmap and planned features include expanding internationalization support, generating interactive maps and timelines based on the presence of navPlace and navDate properties, and leveraging IIIF Content State and Change Discovery APIs.
-
-export default ({ children }) => (
-  <Basic content={children} navigation="about" />
-);

content/index.mdx

@@ -0,0 +1,17 @@
+---
+title: Canopy IIIF
+showHero: true
+showHighlighted: true
+---
+
+## About Canopy
+
+**Canopy IIIF** is a purely [IIIF](https://iiif.io/) sourced site generator using Next.js. Canopy is an experimental application that will standup a browseable and searchable digital collections style site entirely from a [IIIF Collection](https://iiif.io/api/presentation/3.0/#51-collection) and the resources it references.
+
+<ButtonWrapper>
+  <Button children="Read More" href="/about" buttonType="primary" />
+  <Button
+    children="View Code"
+    href="https://github.com/canopy-iiif/canopy-iiif"
+  />
+</ButtonWrapper>

jest.config.next.ts

@@ -1,3 +1,6 @@
+// This file is ignored...but keeping for future reference
+
+// @ts-ignore
 import type { JestConfigWithTsJest } from "ts-jest";
 import nextJest from "next/jest.js";
 

next.config.js

@@ -9,10 +9,6 @@ const {
   getNavigation,
 } = require("./src/lib/build/config.ts");
 
-const withMDX = require("@next/mdx")({
-  extension: /\.mdx?$/,
-});
-
 module.exports = (phase) => {
   const isDev = phase === PHASE_DEVELOPMENT_SERVER;
   const isProd = phase === PHASE_PRODUCTION_BUILD;
@@ -64,7 +60,7 @@ module.exports = (phase) => {
     ];
   };
 
-  return withMDX({
+  return {
     env,
     assetPrefix: process.env.NEXT_PUBLIC_BASE_PATH,
     basePath: process.env.NEXT_PUBLIC_BASE_PATH,
@@ -73,5 +69,5 @@ module.exports = (phase) => {
     typescript: {
       ignoreBuildErrors: true,
     },
-  });
+  };
 };