Merge branch 'main' into feature/SOEOPSFY24-205--mdx

.github/workflows/preview.yml

@@ -1,24 +1,24 @@
-# .github/workflows/preview.yml
-name: Deploy PR previews
-concurrency: preview-${{ github.ref }}
-on:
-  pull_request:
-    types:
-      - opened
-      - reopened
-      - synchronize
-      - closed
-jobs:
-  deploy-preview:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - run: npm i && npm run build
-        if: github.event.action != 'closed'
-      - uses: rossjrw/pr-preview-action@v1
-        with:
-          source-dir: ./out
-          preview-branch: gh-pages
-          umbrella-dir: pr-preview
-          action: auto
+# # .github/workflows/preview.yml
+# name: Deploy PR previews
+# concurrency: preview-${{ github.ref }}
+# on:
+#   pull_request:
+#     types:
+#       - opened
+#       - reopened
+#       - synchronize
+#       - closed
+# jobs:
+#   deploy-preview:
+#     runs-on: ubuntu-latest
+#     steps:
+#       - uses: actions/checkout@v3
+#       - run: npm i && npm run build
+#         if: github.event.action != 'closed'
+#       - uses: rossjrw/pr-preview-action@v1
+#         with:
+#           source-dir: ./out
+#           preview-branch: gh-pages
+#           umbrella-dir: pr-preview
+#           action: auto
 

.github/workflows/publish.yml

@@ -0,0 +1,52 @@
+# File: .github/workflows/publish.yml
+name: Publish to Github Pages
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧
+        uses: ./.github/workflows/setup-node
+
+      - name: Setup Pages ⚙️
+        uses: actions/configure-pages@v4
+        with:
+          static_site_generator: next
+
+      - name: Build with Next.js 🏗️
+        run: npx next build # TODO: return to update to use yarn build or simplify build process
+
+      - 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: Publish to GitHub Pages 🚀
+        id: deployment
+        uses: actions/deploy-pages@v4

app/components/ShapeAnimation/ShapeAnimation.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import React, {useState, useEffect} from 'react';
+import * as flubber from 'flubber';
+
+interface PathMap {
+  A: string;
+  B: string;
+  C: string;
+}
+
+const paths:PathMap = {
+  A: 'M2.00037 408.703C2.00037 241.336 0.326884 187.778 222.899 187.778C445.471 187.778 699.839 187.778 781.839 187.778C929.104 187.778 930.778 2 781.839 2C632.9 2 408.654 2 335.021 2C130.857 2 149.266 355.145 335.021 355.145C520.777 355.145 833.716 355.145 907.349 355.145C1133.27 355.145 1149.15 505.985 1032.86 674.817C929.104 825.448 509.063 1392.82 432.083 1494.92C384.638 1557.84 326.401 1636.94 264.735 1660.61C135.222 1710.32 2.00037 1635.51 2.00037 1494.92C2.00037 1122.69 2.00037 615.681 2.00037 408.703Z',
+  B: 'M100.004 1650C316.004 1650 1604 1650 1724 1650C1844 1650 1820 1598 1820 1458C1820 1318 1820 1138 1820 1078C1820 894 1616 874 1488 962C1314.1 1081.55 1118.66 1261.26 1012 1266C916.367 1270.25 896.004 1126 896.004 1034C896.004 942 896.004 286 896.004 198C896.004 110 908.004 2 1052 2C1196 2 1576 2 1616 2C1760 2 1820 179.467 1616 326C1332 530 178.789 1282.22 120.004 1318C-76.0002 1437.3 12.0024 1650 100.004 1650Z',
+  C: 'M2.37858 1417.69C2.37858 1503.37 -13.6166 1638 162.33 1638C338.277 1638 926.1 1638 998.078 1638C1194.02 1638 1258 1584.96 1258 1450.33C1258 1352.42 1258 556.856 1258 487.5C1258 356.947 1142.03 201.915 978.084 356.946C814.134 511.978 690.173 613.973 550.214 756.767C374.268 936.276 246.305 871 246.305 675.17C246.305 536.397 246.305 214.148 246.305 169.271C246.305 42.7976 362.27 2.00041 422.252 2.00023C590.249 1.99971 962.089 2.00023 1018.07 2.00023C1158.03 2.00023 1150.03 185.59 1018.07 189.67C886.112 193.75 382.264 189.67 210.316 189.67C38.3679 189.67 2.37858 189.67 2.37858 373.26C2.37858 467.094 2.37858 1352.81 2.37858 1417.69Z',
+};
+
+export const ShapeAnimation = () => {
+  const [currentPath, setCurrentPath] = useState<string>(paths.A);
+  const [pathIndex, setPathIndex] = useState<number>(0);
+
+  const pathArray: string[] = [paths.A, paths.B, paths.C];
+
+  const morphToNext = (nextPath: string): void => {
+    const interpolator = flubber.interpolate(currentPath, nextPath);
+    const steps = 500; 
+    const animationDuration = 4000; 
+
+    let progress = 0;
+    const interval = setInterval(() => {
+      const nextStep = interpolator(progress / steps);
+      setCurrentPath(nextStep);
+      progress += 1;
+      if (progress > steps) {
+        clearInterval(interval);
+      }
+    }, animationDuration / steps);
+  };
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const nextIndex = (pathIndex + 1) % pathArray.length;
+      morphToNext(pathArray[nextIndex]);
+      setPathIndex(nextIndex);
+    }, 1000); 
+
+    return () => clearInterval(interval); 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pathIndex, currentPath]);
+
+  return (
+    <div>
+      <motion.svg width="500px" height="100%" viewBox="0 0 1820 1700">
+        <motion.path d={currentPath} fill="none" stroke="black" strokeWidth="3" />
+      </motion.svg>
+    </div>
+  );
+};

app/components/ShapeAnimation/index.ts

@@ -0,0 +1 @@
+export * from './ShapeAnimation';

app/components/TimelineBanner/TimelineBanner.styles.ts

@@ -0,0 +1,8 @@
+export const root = 'overflow-hidden';
+export const wrapper = 'mr-0 au-ml-auto flex-col lg:flex-row';
+export const contentWrapper = 'lg:rs-pr-9 ml-0';
+export const heading = '2xl:whitespace-pre-line -mt-01em rs-mb-2 xl:max-w-1200';
+export const superhead = 'order-first';
+export const body = 'max-w-[50ch] rs-mb-3 *:*:leading-snug';
+export const imageWrapper = 'group relative w-300 h-300 perspective-600';
+export const image = 'object-cover w-full h-full transform rotate-y-30 group-hocus:-rotate-y-30 skew-y-12  ease-in duration-300 rounded-[30px]';

app/components/TimelineBanner/TimelineBanner.tsx

@@ -0,0 +1,61 @@
+import { HTMLAttributes } from 'react';
+import { Container } from '../Container';
+import { Heading, Text } from '../Typography';
+import { FlexBox } from '../FlexBox';
+import * as styles from './TimelineBanner.styles';
+
+type TimelineBannerProps = HTMLAttributes<HTMLDivElement> & {
+  heading?: string;
+  superhead?: string;
+  // isSmallHeading?: boolean;
+  body?: React.ReactNode;
+  cta?: React.ReactNode;
+  imageSrc?: string;
+  // bgColor?: BgTextColorPairBlackWhiteType;
+};
+
+export const TimelineBanner = ({
+  heading,
+  superhead,
+  body,
+  cta,
+  imageSrc='https://placecats.com/neo/600/600',
+  ...props
+}: TimelineBannerProps) => (
+  <Container {...props} as="section" bgColor="red-gradient" width="site" py={9} className={styles.root}>
+    <FlexBox alignItems="start" justifyContent="between" gap className={styles.wrapper}>
+      {imageSrc && (
+        <div className={styles.imageWrapper}>
+          <img
+            alt=""
+            src={imageSrc}
+            className={styles.image}
+            width={360}
+            height={360}
+          />
+          </div>
+      )}
+      <Container className={styles.contentWrapper}>
+      {heading && (
+            <Heading
+              leading="none"
+              className={styles.heading}
+            >
+              {heading}
+            </Heading>
+        )}
+        {superhead && (
+            <Text font="serif" variant="overview" weight="normal" className={styles.superhead}>
+              {superhead}
+            </Text>)}
+          {body && (
+            <Text font="serif" variant="overview" weight="normal" className={styles.body}>
+              {body}
+            </Text>
+          )}
+          {cta}
+      </Container>
+
+    </FlexBox>
+  </Container>
+);

app/components/TimelineBanner/index.ts

@@ -0,0 +1,2 @@
+export * from './TimelineBanner';
+export * from './TimelineBanner.styles';

app/page.tsx

@@ -1,6 +1,9 @@
 import Link from 'next/link';
 import { compareDesc, format, parseISO } from 'date-fns';
 import { allPages, Page } from 'contentlayer/generated';
+import { Heading } from '@/components/Typography';
+import { ShapeAnimation } from '@/components/ShapeAnimation';
+import { TimelineBanner } from '@/components/TimelineBanner';
 
 function PostCard(page: Page) {
   return (
@@ -13,7 +16,7 @@ function PostCard(page: Page) {
       <time dateTime={page.lastUpdatedDate} className="mb-2 block text-xs text-gray-600">
         {format(parseISO(page.lastUpdatedDate), 'LLLL d, yyyy')}
       </time>
-    </div>
+   </div>
   );
 }
 
@@ -22,6 +25,9 @@ export default function Home() {
 
   return (
     <div className="mx-auto max-w-xl py-8">
+      <Heading>SOE Centennial</Heading>
+      <ShapeAnimation />
+      <TimelineBanner heading='Headline lorem ipsum dolar sit' superhead='1983' body="Cras felis tortor, bibendum quis porttitor at, ullamcorper eu diam. Aenean iaculis efficitur quam, quis dignissim lacus. Cras nec dui id mi blandit lobortis eget in enim." />
       <h1 className="mb-8 text-center text-2xl font-black">Next.js + Contentlayer Example</h1>
       {posts.map((page, idx) => (
         <PostCard key={idx} {...page} />

next.config.mjs

@@ -2,6 +2,7 @@
 import { withContentlayer } from 'next-contentlayer';
 
 const nextConfig = {
+  basePath: '/soe-centennial-nextjs',
   output: 'export', 
   reactStrictMode: true,
   swcMinify: true,