Merge branch 'main' into feature/SOEOPSFY24-202

.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:
+      - master
+
+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

@@ -51,7 +51,7 @@ export const ShapeAnimation = () => {
 
   return (
     <div>
-      <motion.svg width="100%" height="100%" viewBox="0 0 1820 1700">
+      <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/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,11 +1,13 @@
 import { Heading } from '@/components/Typography';
-import { ShapeAnimation } from './components/ShapeAnimation';
+import { ShapeAnimation } from '@/components/ShapeAnimation';
+import { TimelineBanner } from '@/components/TimelineBanner';
 
 export default function Home() {
   return (
     <div>
       <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." />
     </div>
   );
 }

next.config.mjs

@@ -1,5 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  basePath: '/soe-centennial-nextjs',
   output: 'export', 
   reactStrictMode: true,
 };