Initial commit.

.github/workflows/nextjs.yml

@@ -0,0 +1,70 @@
+---
+name: Deploy Next.js site to Pages
+
+on:
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to gitHub pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+      - name: Setup pages
+        uses: actions/configure-pages@v4
+        with:
+          # Automatically inject basePath in your Next.js configuration file and disable
+          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
+          static_site_generator: next
+      - name: Restore cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+      - name: Install dependencies
+        run: npm install
+      - name: Build with next.js
+        run: npm run build
+      - name: nojekyll
+        run: touch ./out/.nojekyll
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./out
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to gitHub pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+out
+.next
+.husky

README.org

@@ -0,0 +1,32 @@
+#+TITLE: OpenShift Workshops
+#+AUTHOR: James Blair
+#+DATE: <2023-12-04 Mon>
+
+This repository contains a basic [[https://nextjs.org/][nextjs]] frontend designed to be exported as a static site and served via [[https://pages.github.com/][github pages]].
+
+The frontend is used to serve workshop instructions for several workshops.
+
+** Local development
+
+To set up a local development environment run the following:
+
+#+begin_src bash
+# Install dependencies
+npm install
+
+# Build and serve the site
+npm run build && npm run serve
+#+end_src
+
+
+** Exporting static site
+
+To export the site to static html to serve for example via github pages, run:
+
+#+begin_src bash
+# Install dependencies
+npm install
+
+# Build and export the site
+npm run build && npm run export
+#+end_src

components/Card.js

@@ -0,0 +1,51 @@
+import Image from './Image'
+import Link from './Link'
+
+const Card = ({ title, description, imgSrc, href }) => (
+  <div className="p-4 md:w-1/2 md" style={{ maxWidth: '544px' }}>
+    <div className="h-full overflow-hidden border-2 border-gray-200 rounded-md border-opacity-60 dark:border-gray-700">
+      {href ? (
+        <Link href={href} aria-label={`Link to ${title}`}>
+          <Image
+            alt={title}
+            src={imgSrc}
+            className="object-cover object-center lg:h-48 md:h-36"
+            width={544}
+            height={306}
+          />
+        </Link>
+      ) : (
+        <Image
+          alt={title}
+          src={imgSrc}
+          className="object-cover object-center lg:h-48 md:h-36"
+          width={544}
+          height={306}
+        />
+      )}
+      <div className="p-6">
+        <h2 className="mb-3 text-2xl font-bold leading-8 tracking-tight">
+          {href ? (
+            <Link href={href} aria-label={`Link to ${title}`}>
+              {title}
+            </Link>
+          ) : (
+            title
+          )}
+        </h2>
+        <p className="mb-3 prose text-gray-500 max-w-none dark:text-gray-400">{description}</p>
+        {href && (
+          <Link
+            href={href}
+            className="text-base font-medium leading-6 text-primary-800 hover:text-primary-900 dark:hover:text-primary-400"
+            aria-label={`Link to ${title}`}
+          >
+            Learn more &rarr;
+          </Link>
+        )}
+      </div>
+    </div>
+  </div>
+)
+
+export default Card

components/ClientReload.js

@@ -0,0 +1,23 @@
+import { useEffect } from 'react'
+import Router from 'next/router'
+
+/**
+ * Client-side complement to next-remote-watch
+ * Re-triggers getStaticProps when watched mdx files change
+ *
+ */
+export const ClientReload = () => {
+  // Exclude socket.io from prod bundle
+  useEffect(() => {
+    import('socket.io-client').then((module) => {
+      const socket = module.io()
+      socket.on('reload', (data) => {
+        Router.replace(Router.asPath, undefined, {
+          scroll: false,
+        })
+      })
+    })
+  }, [])
+
+  return null
+}

components/Footer.js

@@ -0,0 +1,17 @@
+import Link from './Link'
+import siteMetadata from '@/data/siteMetadata'
+import SocialIcon from '@/components/social-icons'
+
+export default function Footer() {
+  return (
+    <footer>
+      <div className="flex flex-col items-center mt-16">
+        <div className="flex mb-2 space-x-2 text-sm text-gray-500 dark:text-gray-400">
+          <div>{`© ${new Date().getFullYear()}`}</div>
+          <div>{` • `}</div>
+          <Link href="/">{siteMetadata.author}</Link>
+        </div>
+      </div>
+    </footer>
+  )
+}

components/Image.js

@@ -0,0 +1,6 @@
+import NextImage from 'next/image'
+
+// eslint-disable-next-line jsx-a11y/alt-text
+const Image = ({ ...rest }) => <NextImage {...rest} />
+
+export default Image

components/LayoutWrapper.js

@@ -0,0 +1,54 @@
+import siteMetadata from '@/data/siteMetadata'
+import headerNavLinks from '@/data/headerNavLinks'
+import Logo from '@/data/logo.svg'
+import Link from './Link'
+import SectionContainer from './SectionContainer'
+import Footer from './Footer'
+import MobileNav from './MobileNav'
+import ThemeSwitch from './ThemeSwitch'
+
+const LayoutWrapper = ({ children }) => {
+  return (
+    <SectionContainer>
+      <div className="flex flex-col justify-between h-screen">
+        <header className="flex items-center justify-between py-10">
+          <div>
+            <Link href="/" aria-label="Tailwind CSS Blog">
+              <div className="flex items-center justify-between">
+                <div className="mr-3">
+                  <Logo />
+                </div>
+                {typeof siteMetadata.headerTitle === 'string' ? (
+                  <div className="hidden h-6 text-2xl font-semibold sm:block">
+                    {siteMetadata.headerTitle}
+                  </div>
+                ) : (
+                  siteMetadata.headerTitle
+                )}
+              </div>
+            </Link>
+          </div>
+          <div className="flex items-center text-base leading-5">
+            <div className="hidden sm:block">
+              {headerNavLinks.map((link) => (
+                <Link
+                  key={link.title}
+                  href={link.href}
+                  className="p-1 font-medium text-gray-900 sm:p-4 dark:text-gray-100"
+                >
+                  {link.title}
+                </Link>
+              ))}
+            </div>
+            <ThemeSwitch />
+            <MobileNav />
+          </div>
+        </header>
+        <main className="mb-auto">{children}</main>
+        <Footer />
+      </div>
+    </SectionContainer>
+  )
+}
+
+export default LayoutWrapper

components/Link.js

@@ -0,0 +1,23 @@
+/* eslint-disable jsx-a11y/anchor-has-content */
+import Link from 'next/link'
+
+const CustomLink = ({ href, ...rest }) => {
+  const isInternalLink = href && href.startsWith('/')
+  const isAnchorLink = href && href.startsWith('#')
+
+  if (isInternalLink) {
+    return (
+      (<Link href={href} {...rest}>
+
+      </Link>)
+    );
+  }
+
+  if (isAnchorLink) {
+    return <a href={href} {...rest} />
+  }
+
+  return <a target="_blank" rel="noopener noreferrer" href={href} {...rest} />
+}
+
+export default CustomLink

components/MDXComponents.js

@@ -0,0 +1,32 @@
+/* eslint-disable react/display-name */
+import { useMemo } from 'react'
+import { getMDXComponent } from 'mdx-bundler/client'
+import Image from './Image'
+import CustomLink from './Link'
+import TOCInline from './TOCInline'
+import Pre from './Pre'
+import Quote from './Quote'
+import YoutubeEmbed from './YoutubeEmbed'
+
+import Zoom from 'react-medium-image-zoom'
+import 'react-medium-image-zoom/dist/styles.css'
+
+export const MDXComponents = {
+  Image,
+  TOCInline,
+  a: CustomLink,
+  pre: Pre,
+  Quote,
+  YoutubeEmbed,
+  Zoom,
+  wrapper: ({ components, layout, ...rest }) => {
+    const Layout = require(`../layouts/${layout}`).default
+    return <Layout {...rest} />
+  },
+}
+
+export const MDXLayoutRenderer = ({ layout, mdxSource, ...rest }) => {
+  const MDXLayout = useMemo(() => getMDXComponent(mdxSource), [mdxSource])
+
+  return <MDXLayout layout={layout} components={MDXComponents} {...rest} />
+}