josh-stillman · josh-stillman · Oct 26, 2023 · Sep 29, 2023 · Sep 29, 2023 · Sep 29, 2023
diff --git a/.env b/.env
@@ -1 +1,2 @@
 NEXT_PUBLIC_API_URL=http://localhost:1337
+NEXT_PUBLIC_ENV=local
diff --git a/.github/workflows/build-deploy.yml b/.github/workflows/build-deploy.yml
@@ -11,7 +11,8 @@ jobs:
     runs-on: ubuntu-latest
     environment: ${{ inputs.environment }}
     env:
-      NEXT_PUBLIC_API_URL: ${{ secrets.API_URL }}
+      NEXT_PUBLIC_API_URL: ${{ vars.API_URL }}
+      NEXT_PUBLIC_ENV: ${{ inputs.environment}}
     steps:
       - name: Checkout
         uses: actions/checkout@v3

diff --git a/public/fonts/Baskerville.ttf b/public/fonts/Baskerville.ttf
diff --git a/public/fonts/BookmanBold.ttf b/public/fonts/BookmanBold.ttf
diff --git a/public/fonts/BookmanLight.otf b/public/fonts/BookmanLight.otf
diff --git a/public/fonts/FrankfurterStdRegular.otf b/public/fonts/FrankfurterStdRegular.otf
diff --git a/public/fonts/SansSerifShaded.ttf b/public/fonts/SansSerifShaded.ttf
diff --git a/public/next.svg b/public/next.svg
diff --git a/public/under-construction.gif b/public/under-construction.gif
diff --git a/src/app/foobar/page.module.css b/src/app/foobar/page.module.css
@@ -0,0 +1,10 @@
+.hero {
+  font-family: frankfurter, sans-serif;
+  font-size: 98px;
+  color: cornflowerblue;
+  text-align: center;
+}
+
+.gif {
+  width: 420px;
+}
diff --git a/src/app/foobar/page.tsx b/src/app/foobar/page.tsx
@@ -1,3 +1,16 @@
+/* eslint-disable @next/next/no-img-element */
+import styles from './page.module.css';
+
 export default function Foobar() {
-  return <h1>foobar!</h1>;
+  return (
+    <>
+      <h1 className={styles.hero}>Welcome to the Foobar page!</h1>
+
+      <img
+        className={styles.gif}
+        src="/under-construction.gif"
+        alt="under construction"
+      />
+    </>
+  );
 }
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -73,6 +73,33 @@
   }
 }
 
+@font-face {
+  font-family: "sans-shaded";
+  src: url("/fonts/SansSerifShaded.ttf");
+}
+
+@font-face {
+  font-family: "frankfurter";
+  src: url("/fonts/FrankfurterStdRegular.otf");
+}
+
+@font-face {
+  font-family: "baskerville";
+  src: url("/fonts/Baskerville.otf");
+}
+
+@font-face {
+  font-family: "bookman";
+  font-weight: 300;
+  src: url("/fonts/BookmanLight.ttf");
+}
+
+@font-face {
+  font-family: "bookman";
+  font-weight: 600;
+  src: url("/fonts/BookmanBold.ttf");
+}
+
 * {
   box-sizing: border-box;
   padding: 0;
@@ -82,7 +109,8 @@
 html,
 body {
   max-width: 100vw;
-  overflow-x: hidden;
+  overflow: hidden;
+  height: 100%;
 }
 
 body {

diff --git a/src/app/layout.module.css b/src/app/layout.module.css
@@ -0,0 +1,10 @@
+.main {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  padding: 4rem;
+  min-height: 100vh;
+  max-width: var(--max-width);
+  margin: 0 auto;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,12 +1,16 @@
-import './globals.css';
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 
+import './globals.css';
+import styles from './layout.module.css';
+
+import { NavBar } from '../components/NavBar/NavBar';
+
 const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: 'jss.computer',
+  description: 'Frontend for the DevOps for TypeScript Developers Course',
 };
 
 export default function RootLayout({
@@ -16,7 +20,11 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <NavBar />
+
+        <main className={styles.main}>{children}</main>
+      </body>
     </html>
   );
 }
diff --git a/src/app/page.module.css b/src/app/page.module.css
@@ -15,7 +15,6 @@
   max-width: var(--max-width);
   width: 100%;
   z-index: 2;
-  font-family: var(--font-mono);
 }
 
 .description a {
@@ -227,3 +226,9 @@
     transform: rotate(0deg);
   }
 }
+
+.headline {
+  font-family: sans-shaded, sans-serif;
+  font-size: 64px;
+  text-align: center;
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,17 +1,16 @@
-import { NewsFeed } from '../components/NewsFeed';
+import { NewsFeed } from '../components/NewsFeed/NewsFeed';
 import styles from './page.module.css';
-import Link from 'next/link';
 
 export default function Home() {
   return (
-    <main className={styles.main}>
+    <>
       <div className={styles.description}>
-        <h1>Hello World we are deployed!</h1>
-
-        <Link href="/foobar">go to foobar page!</Link>
+        <h1 className={styles.headline}>
+          Hello World, we are deployed in {process.env.NEXT_PUBLIC_ENV}!
+        </h1>
       </div>
-      <h2>we are in PROD!</h2>
+
       <NewsFeed />
-    </main>
+    </>
   );
 }
diff --git a/src/components/NavBar/NavBar.module.css b/src/components/NavBar/NavBar.module.css
@@ -0,0 +1,30 @@
+.navbar {
+  width: 100%;
+  height: 64px;
+  border-bottom: 3px solid burlywood;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+
+  padding-left: 16px;
+  padding-right: 86px;
+  box-shadow: -1px 11px 54px 10px rgba(130,100,100,0.45);
+}
+
+.siteHeader {
+    font-family: sans-shaded, sans-serif;
+    font-size: 32px;
+}
+
+.navLinkText {
+  font-family: frankfurter, sans-serif;
+  font-size: 20px;
+  text-decoration: underline;
+}
+
+.link:hover {
+  color: blue;
+  cursor: pointer;
+}
+
diff --git a/src/components/NavBar/NavBar.tsx b/src/components/NavBar/NavBar.tsx
@@ -0,0 +1,18 @@
+import Link from 'next/link';
+import styles from './NavBar.module.css';
+
+export const NavBar = () => {
+  return (
+    <>
+      <nav className={styles.navbar}>
+        <Link href="/" className={styles.link}>
+          <span className={styles.siteHeader}>jss.computer</span>
+        </Link>
+
+        <Link href="/foobar" className={styles.link}>
+          <span className={styles.navLinkText}>Go to foobar page!</span>
+        </Link>
+      </nav>
+    </>
+  );
+};
diff --git a/src/components/NewsFeed.module.css b/src/components/NewsFeed.module.css
diff --git a/src/components/NewsFeed.tsx b/src/components/NewsFeed.tsx
diff --git a/src/components/NewsFeed/NewsFeed.module.css b/src/components/NewsFeed/NewsFeed.module.css
@@ -0,0 +1,65 @@
+.newsItemList {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  padding: 50px;
+  background: rgba(0, 0, 100, .5);
+  border-radius: 48px;
+  height: 500px;
+  max-height: 500px;
+  width: 445px;
+  max-width: 445px;
+}
+
+.hero {
+  font-family: baskerville, serif;
+  font-size: 50px;
+  font-style: italic;
+}
+
+.newsItem {
+  margin: 20px 0;
+}
+
+.headline {
+  font-family: bookman serif;
+  font-weight: 600;
+}
+
+.body {
+  font-family: bookman serif;
+  font-weight: 300;
+}
+
+.headerContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+
+.itemsContainer {
+  overflow-y: scroll;
+}
+
+.newspaper {
+  animation-name: spin;
+  animation-duration: 1000ms;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  width: fit-content;
+  font-size: 3rem;
+}
+
+.newspaper--loading {
+  animation-iteration-count: infinite;
+}
+
+.newspaper--settled {
+  animation-iteration-count: 0;
+}
+
+@keyframes spin {
+    to {
+        transform:rotate(360deg);
+    }
+}
diff --git a/src/components/NewsFeed/NewsFeed.tsx b/src/components/NewsFeed/NewsFeed.tsx
@@ -0,0 +1,54 @@
+'use client';
+import useSWR from 'swr';
+import { NewsItemsResponse } from '../../types/api';
+import styles from './NewsFeed.module.css';
+
+const fetcher = (url: string) => fetch(url).then(res => res.json());
+
+const params = new URLSearchParams();
+
+params.set('sort', 'publishedAt:desc');
+
+export function NewsFeed() {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  const { data, error, isLoading } = useSWR<NewsItemsResponse>(
+    `${process.env.NEXT_PUBLIC_API_URL}/api/news-items?${params.toString()}`,
+    fetcher
+  );
+
+  return (
+    <div className={styles.newsItemList}>
+      <div className={styles.headerContainer}>
+        <h1 className={styles.hero}>NewsFeed!</h1>
+
+        <div
+          className={`${styles.newspaper} ${
+            isLoading
+              ? styles['newspaper--loading']
+              : styles['newspaper--settled']
+          }`}
+        >
+          🗞
+        </div>
+      </div>
+
+      <div className={styles.itemsContainer}>
+        {!isLoading &&
+          !error &&
+          data?.data.map(({ attributes, id }) => (
+            <div key={id} className={styles.newsItem}>
+              <h2 className={styles.headline}>{attributes.Title}</h2>
+
+              <h3 className={styles.body}>
+                <i>{attributes.Body}</i>
+              </h3>
+
+              <span>
+                {new Date(attributes.publishedAt).toLocaleDateString()}
+              </span>
+            </div>
+          ))}
+      </div>
+    </div>
+  );
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		NEXT_PUBLIC_API_URL=http://localhost:1337
		NEXT_PUBLIC_ENV=local