Landslovjubileet 2024

This is the repo for the digital exhibition of the 2024 jubilee of Landsloven. The site is built with Nextra and is statically generated from markdown files. The code is hosted on github and the site is hosted on Vercel.

Nextra is built with the Next.js framework that allows you to build static sites from markdown files. It uses Tailwind CSS for styling and MDX for rendering React components in markdown files. Many of the works in the exhibition are rendered with the Clover-IIIF viewer.

Live Demo →

Local Development

First clone the repository:

git clone git@github.com:uib-ub/exhibition-landsloven-nextra.git
npm i
npm run dev
# Visit http://localhost:3000

Folder Structure

└── 📁exhibition-landsloven-nextra
    └── 📁components # All react components here
        └── .gitkeep
        └── work.tsx # Client side rendering of the IIIF Manifest with Clover-IIIF
    └── middleware.ts # Handles i18n
    └── next-env.d.ts # Auto generated, ignore
    └── next.config.js # Next.js config
    └── package-lock.json
    └── package.json # Nextra and other dependencies
    └── 📁pages
        └── _app.js # Serves the app
        └── _meta.en.json # The navigation and sidebar config for the site
        └── _meta.no.json # The navigation and sidebar config for the site
        └── 📁arvetallet
            └── _meta.en.json # The navigation and sidebar config for the subpath
            └── _meta.no.json # The navigation and sidebar config for the subpath
            └── arvetallet.en.mdx 
            └── arvetallet.no.mdx
            └── ekteskap.en.mdx # Text pages available in the sidebar
            └── ekteskap.no.mdx # Text pages available in the sidebar
            └── ...
        └── arvetallet.en.mdx # The main page for the subpath, is full width
        └── arvetallet.no.mdx # The main page for the subpath, is full width
        └── ...
    └── .gitignore
    └── LICENSE
    └── README.md
    └── postcss.config.js # Imports necessary postcss plugins
    └── 📁styles
        └── globals.css # Global styles, imports tailwind
    └── tailwind.config.js # Tailwind CSS config
    └── theme.config.tsx # The Nextra config
    └── tsconfig.json # TypeScript config

Components

The components are written in TypeScript and are located in the components folder. The work.tsx component is used to render the IIIF Manifest with Clover-IIIF.

All components are imported from components/??? as a tsconfig path has been set up for easier importing no matter what folder level the page is on.

Component filenames are in cebab-case, and the component name is in PascalCase. E.g. work.tsx exports the Work component.

Work

The Work component is used to render the IIIF Manifest with Clover-IIIF. It takes an id prop that is the IIIF Manifest ID. The component is wrapped in a Suspense component to handle the loading state.

<Work id="ubb-ms-0558" />

It can also take a url prop that is the URL to the IIIF Manifest. This is useful when the manifest is not hosted on the same domain as the site.

NB! The National Library of Norway's IIIF Manifests are not CORS enabled, so they cannot be used with the url prop.

<Work url="https://api.nb.no/catalog/v1/iiif/9fc1417235e4f584c7bcc667b9e77ba2/manifest" />

License

This project is licensed under the MIT License.

espenmn / exhibition-landsloven-nextra