01 navbar

strapi/src/api/global/content-types/global/schema.json

@@ -0,0 +1,20 @@
+{
+  "kind": "singleType",
+  "collectionName": "globals",
+  "info": {
+    "singularName": "global",
+    "pluralName": "globals",
+    "displayName": "Global"
+  },
+  "options": {
+    "draftAndPublish": true
+  },
+  "pluginOptions": {},
+  "attributes": {
+    "Navbar": {
+      "type": "component",
+      "repeatable": false,
+      "component": "global.navbar"
+    }
+  }
+}

strapi/src/api/global/controllers/global.ts

@@ -0,0 +1,7 @@
+/**
+ * global controller
+ */
+
+import { factories } from '@strapi/strapi'
+
+export default factories.createCoreController('api::global.global');

strapi/src/api/global/routes/global.ts

@@ -0,0 +1,7 @@
+/**
+ * global router
+ */
+
+import { factories } from '@strapi/strapi';
+
+export default factories.createCoreRouter('api::global.global');

strapi/src/api/global/services/global.ts

@@ -0,0 +1,7 @@
+/**
+ * global service
+ */
+
+import { factories } from '@strapi/strapi';
+
+export default factories.createCoreService('api::global.global');

strapi/src/components/global/navbar.json

@@ -0,0 +1,23 @@
+{
+  "collectionName": "components_global_navbars",
+  "info": {
+    "displayName": "navbar",
+    "description": ""
+  },
+  "options": {},
+  "attributes": {
+    "logo": {
+      "type": "media",
+      "multiple": false,
+      "required": false,
+      "allowedTypes": [
+        "images"
+      ]
+    },
+    "NavItems": {
+      "type": "component",
+      "repeatable": true,
+      "component": "link.link"
+    }
+  }
+}

strapi/tsconfig.json

@@ -13,6 +13,7 @@
     ".tmp/",
     "src/admin/",
     "**/*.test.*",
-    "src/plugins/**"
+    "src/plugins/**",
+    "types/generated/**"
   ]
 }

web/.netlify/deploy/v1/config.json

@@ -1,5 +1 @@
-{
-  "images": {
-    "remote_images": ["https?://wdcc-website\\.fly\\.storage\\.tigris\\.dev/.*"]
-  }
-}
+{"images":{"remote_images":["https?://wdcc-website\\.fly\\.storage\\.tigris\\.dev/.*"]}}

web/astro.config.mjs

@@ -1,8 +1,8 @@
-import { defineConfig } from "astro/config";
 import mdx from "@astrojs/mdx";
+import netlify from "@astrojs/netlify";
 import sitemap from "@astrojs/sitemap";
 import tailwind from "@astrojs/tailwind";
-import netlify from "@astrojs/netlify";
+import { defineConfig } from "astro/config";
 
 import react from "@astrojs/react";
 

web/src/components/navigation/Header.tsx

@@ -0,0 +1,122 @@
+interface NavItem {
+  href: string;
+  value: string;
+}
+
+interface HeaderProps {
+  logoUrl: string;
+  logoAlt: string;
+  navItemsCenter: NavItem[];
+  navItemsRight: NavItem[];
+}
+
+const Header = ({
+  logoUrl,
+  logoAlt,
+  navItemsCenter,
+  navItemsRight,
+}: HeaderProps) => {
+  const currentPath = window.location.pathname;
+  const openMenu = () => {
+    // Disable scrolling
+    const body = document.querySelector<HTMLElement>("body");
+    if (body) body.style.overflowY = "hidden";
+
+    // Show menu
+    const menu = document.querySelector<HTMLElement>("#hamburg-options");
+    if (menu) menu.style.display = "flex";
+  };
+
+  const closeMenu = () => {
+    // Enable scrolling
+    const body = document.querySelector<HTMLElement>("body");
+    if (body) body.style.overflowY = "auto";
+
+    // Hide menu
+    const menu = document.querySelector<HTMLElement>("#hamburg-options");
+    if (menu) menu.style.display = "none";
+  };
+
+  return (
+    <header className="z-50 relative">
+      <nav className="flex flex-row justify-between pt-2 px-4 bg-transparent sticky items-center">
+        <div className="flex items-center">
+          <a href="/" className="lg:mr-8">
+            <img
+              src={logoUrl}
+              alt={logoAlt}
+              className="h-12 md:h-16 lg:h-20 w-auto object-contain" // Adjusted height for different screen sizes
+            />
+          </a>
+        </div>
+        <div className="flex md:hidden" onClick={openMenu}>
+          <img width={40} src="/hamburg.svg" />
+        </div>
+        {/* Mobile Menu */}
+        <div
+          style={{
+            display: "none",
+          }}
+          className="top-0 left-0 z-[999] rounded-xl fixed w-screen h-screen p-4 bg-white/50 backdrop-blur-lg shadow-sm"
+          id="hamburg-options"
+        >
+          <div
+            className="flex flex-col justify-center items-center w-full h-full"
+            onClick={closeMenu}
+          >
+            <div className="p-8 flex flex-col justify-center items-center gap-8 text-3xl">
+              {navItemsCenter.concat(navItemsRight).map((item, index) => (
+                <a
+                  href={item.href}
+                  key={index}
+                  className={`${currentPath === item.href ? "text-primary highlight underline underline-offset-8 decoration-2" : ""} `}
+                >
+                  {item.value}
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
+        {/* Desktop Menu */}
+        <div className="hidden md:flex md:flex-row gap-4 lg:gap-8 mx-4 text-lg lg:text-xl font-semibold cursor-pointer">
+          {navItemsCenter.map((item, index) => (
+            <a
+              href={item.href}
+              key={index}
+              className={`${currentPath === item.href ? "text-primary highlight underline underline-offset-8 decoration-2" : ""} `}
+            >
+              {item.value}
+            </a>
+          ))}
+        </div>
+        <div className="hidden md:flex md:flex-row gap-4 lg:gap-8 text-center flex-shrink-0 text-lg lg:text-xl cursor-pointer">
+          {navItemsRight.map((item, index) =>
+            item.value === `Join for ${new Date().getFullYear()}` ? (
+              <a
+                href={item.href}
+                key={index}
+                className="inline-block bg-primary text-white rounded-lg hover:bg-blue-700 transition duration-300 py-1 lg:py-2, px-2 lg:px-4"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {item.value}
+              </a>
+            ) : (
+              <a
+                href={item.href}
+                key={index}
+                className="inline-block py-1 lg:py-2, px-2 lg:px-4"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {item.value}
+              </a>
+            ),
+          )}
+        </div>
+      </nav>
+    </header>
+  );
+};
+
+export default Header;

web/src/layouts/layout.astro

@@ -1,18 +1,28 @@
 ---
-import BaseHead from "../components/BaseHead.astro";
+import BaseHead from "@/components/BaseHead.astro";
+import Header from "@/components/navigation/Header";
+import fetchApi from "@/lib/strapi";
+import { getImage } from "astro:assets";
+import TopographicImageSrc from "../../public/Topographic 3.svg";
 import Footer from "../components/Footer.astro";
-import Header from "../components/Header.astro";
 
 interface Props {
   title: string;
   description: string;
 }
 
 const { title, description }: Props = Astro.props;
+const STRAPI_URL = import.meta.env.STRAPI_URL;
 
-import { getImage } from "astro:assets";
+const global = await fetchApi<any>({
+  endpoint: "global?populate[Navbar][populate]=*",
+  wrappedByKey: "data",
+});
+
+const logoUrl = STRAPI_URL + global.attributes.Navbar.logo.data.attributes.formats.large.url;
+const logoAlt = global.attributes.Navbar.logo.data.attributes.alternativeText;
+const navItems = global.attributes.Navbar.NavItems;
 
-import TopographicImageSrc from "../../public/Topographic 3.svg";
 const TopographicImage = await getImage({ src: TopographicImageSrc });
 ---
 
@@ -21,12 +31,17 @@ const TopographicImage = await getImage({ src: TopographicImageSrc });
   <head>
     <BaseHead title={title} description={description} />
   </head>
-
   <body class="max-h-screen relative bg-slate-100 max-w-[1125px] mx-auto">
-    <Header />
+    <Header
+      logoUrl={logoUrl}
+      logoAlt={logoAlt}
+      navItemsCenter={navItems.slice(0, -2)}
+      navItemsRight={navItems.slice(-2)}
+      client:only
+    />
     <main class="min-h-full static">
       <slot />
-      <!-- <Image alt="Topographic Wallpaper" width={100} height={200} quality="max" class="w-full absolute top-0 -z-10 opacity-70" src={TopographicImage.src}/>  -->
+      <!-- <Image alt="Topographic Wallpaper" width={100} height={200} quality="max" class="w-full absolute top-0 -z-10 opacity-70" src={TopographicImage.src}/> -->
     </main>
     <Footer />
   </body>

web/src/lib/strapi.ts

@@ -23,6 +23,7 @@ export default async function fetchApi<T>({
     endpoint = endpoint.slice(1);
   }
 
+
   const url = new URL(`${import.meta.env.STRAPI_URL}/api/${endpoint}`);
   if (query) {
     Object.entries(query).forEach(([key, value]) => {

web/src/pages/about/index.astro

@@ -0,0 +1,22 @@
+---
+import "@/global.css";
+import Layout from "../../layouts/layout.astro";
+import fetchApi from "../../lib/strapi";
+const index = await fetchApi<any>({
+  endpoint: "about?populate=*",
+  wrappedByKey: "data",
+});
+
+---
+<Layout
+  title="WDCC"
+  description="The Web Development & Consulting Club @ The University of Auckland"
+>
+  <div class="container">
+    <h1
+      class="text-center font-bold leading-[2.7625rem] md:leading-[4.2rem] lg:leading-[5.8rem] text-3xl md:text-4xl lg:text-5xl"
+    >
+      About Us
+    </h1>
+  </div>
+</Layout>

web/src/pages/blog/index.astro

@@ -0,0 +1,22 @@
+---
+import "@/global.css";
+import Layout from "@/layouts/layout.astro";
+import fetchApi from "../../lib/strapi";
+const index = await fetchApi<any>({
+  endpoint: "blog?populate=*",
+  wrappedByKey: "data",
+});
+
+---
+<Layout
+  title="WDCC"
+  description="The Web Development & Consulting Club @ The University of Auckland"
+>
+  <div class="container">
+    <h1
+      class="text-center font-bold leading-[2.7625rem] md:leading-[4.2rem] lg:leading-[5.8rem] text-3xl md:text-4xl lg:text-5xl"
+    >
+      Blog
+    </h1>
+  </div>
+</Layout>