add:pages and components

OpenAMP · Oct 5, 2023 · b78b9a1 · b78b9a1
1 parent 73c0adf
commit b78b9a1
Show file tree

Hide file tree

Showing 72 changed files with 966 additions and 241 deletions.
diff --git a/src/components/About/AboutHero.astro b/src/components/About/AboutHero.astro
@@ -5,5 +5,5 @@ const { data } = Astro.props;
 
 <Header>
   <h1>{data.main_title}</h1>
-  <p class="text-xl">{data.main_body}</p>
+  <p class="text-xl w-[90%]">{data.main_body}</p>
 </Header>
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
@@ -3,7 +3,7 @@
 ---
 
 <head>
-  <title>Linaro Forge</title>
+  <title>Open AMP</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta charset="utf-8" />
 </head>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -21,7 +21,7 @@ const { data, render }: any = footer;
         data.links_1.map((item: any) => (
           <div class="pt-4">
             <a
-              class="text-white no-underline p-4 hover:underline hover:text-black"
+              class="text-white no-underline p-4 hover:underline hover:text-black transition ease-in-out delay-500"
               href={item.url}
             >
               {item.label}
@@ -36,7 +36,7 @@ const { data, render }: any = footer;
         data.links_2.map((item: any) => (
           <div class="pt-4">
             <a
-              class="text-white no-underline p-4 hover:underline hover:text-black"
+              class="text-white no-underline p-4 hover:underline hover:text-black transition ease-in-out delay-500"
               href={item.url}
             >
               {item.label}
@@ -80,28 +80,30 @@ const { data, render }: any = footer;
         class="mr-2 cursor-pointer no-underline text-white hover:text-openampred hover:underline mb-[1rem]"
         ><span class="font-black text-3xl">.</span>Contact</a
       >
-      <!-- <Icon name="devicon:linkedin" size="48" /> -->
-      <a href="https://www.linkedin.com/company/openamp"
-        ><Image
-          class="w-[14px] mr-4 hover:text-openampred"
-          src={linkedin_icon}
-          alt="linkedIn logo"
-        /></a
-      >
-      <a href="https://github.com/OpenAMP/website"
-        ><Image
-          class="w-[14px] mr-4 hover:text-openampred"
-          src={github_icon}
-          alt="Github logo"
-        /></a
-      >
-      <a href="https://www.youtube.com/@openamp"
-        ><Image
-          class="w-[14px] mr-4 hover:text-openampred"
-          src={youtube_icon}
-          alt="Youtube logo"
-        /></a
-      >
+      <div class="flex flex-row mb-4">
+        <!-- <Icon name="devicon:linkedin" size="48" /> -->
+        <a href="https://www.linkedin.com/company/openamp"
+          ><Image
+            class="w-[14px] mr-4 hover:text-openampred"
+            src={linkedin_icon}
+            alt="linkedIn logo"
+          /></a
+        >
+        <a href="https://github.com/OpenAMP/website"
+          ><Image
+            class="w-[14px] mr-4 hover:text-openampred"
+            src={github_icon}
+            alt="Github logo"
+          /></a
+        >
+        <a href="https://www.youtube.com/@openamp"
+          ><Image
+            class="w-[14px] mr-4 hover:text-openampred"
+            src={youtube_icon}
+            alt="Youtube logo"
+          /></a
+        >
+      </div>
     </div>
     <div class="flex flex-row justify-center">
       <a href="/">

diff --git a/src/components/Governance/Hero.astro b/src/components/Governance/Hero.astro
@@ -2,7 +2,6 @@
 import Header from "../Header.astro";
 
 const { data } = Astro.props;
-console.log(data);
 ---
 
 <Header>

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -5,8 +5,8 @@ const { data } = Astro.props;
 ---
 
 <header
-  class=`text-center relative text-white flex flex-col items-center justify-center p-4 md:p-12`
-  style=`background-image: url(${heroImage.src}); background-size: cover`
+  class=`text-center relative text-white flex flex-col items-center justify-center p-4 md:p-12 h-full w-full`
+  style=`background-image: url(${heroImage.src}); background-size: cover ;filter: brightness(1.5)`
 >
   <slot />
 </header>
diff --git a/src/components/Home/Hero.astro b/src/components/Home/Hero.astro
@@ -1,20 +1,21 @@
 ---
+import heroImage from "../../assets/triangle_background.png";
 import Header from "../Header.astro";
 import { Image } from "astro:assets";
 import logoImage from "../../assets/openAMP_combox_dark.svg";
 
 const { data } = Astro.props;
-console.log(data);
 ---
 
 <Header>
-  <Image class="w-full h-[200px]" src={logoImage} alt="openAMP Logo" />
+  <Image class="w-full h-[400px] p-4 mt-4" src={logoImage} alt="openAMP Logo" />
 
   <p class="leading-normal text-center max-w-lg text-lg">{data.main_body}</p>
   <button
     onclick="
     window.open('https://github.com/OpenAMP', '_blank')
     "
-    class="bg-[#dc4a4a] p-2 rounded text-xs text-center">View on Github</button
+    class="bg-openampred p-4 rounded text-xs text-center transition ease-in-out delay-500 hover:bg-red-600 border-transparent border-2"
+    >View on Github</button
   >
 </Header>
diff --git a/src/components/Home/HomeContent.astro b/src/components/Home/HomeContent.astro
@@ -1,6 +1,5 @@
 ---
 const { data } = Astro.props;
-console.log(data);
 ---
 
 <div class="mt-6">

diff --git a/src/components/Nav/Nav.astro b/src/components/Nav/Nav.astro
@@ -9,10 +9,14 @@ const {
 ---
 
 <nav
-  class="bg-white text-black flex flex-row items-center px-6 justify-around align-top fixed top-0 left-0 right-0 z-10 h-16 w-full"
+  class="bg-white px-10 py-4 align-top fixed top-0 left-0 right-0 z-10 h-16 w-full"
 >
-  <a href="/" class="text-xl md:text-2xl">
-    <Image class="w-14" src={logo} alt="logo" />
-  </a>
-  <NavLinks pages={links} client:load />
+  <div
+    class="max-w-[1200px] mx-auto justify-between flex flex-row items-center"
+  >
+    <a href="/" class="text-xl md:text-2xl">
+      <Image class="w-10" src={logo} alt="logo" />
+    </a>
+    <NavLinks pages={links} client:load />
+  </div>
 </nav>
diff --git a/src/components/Nav/NavLinks.tsx b/src/components/Nav/NavLinks.tsx
@@ -1,14 +1,24 @@
 import "solid-js";
+import { createEffect } from "solid-js";
 import { Show, createSignal } from "solid-js";
 import { AiOutlineClose, AiOutlineMenu } from "solid-icons/ai";
 import { createMediaQuery } from "@solid-primitives/media";
 
 export default function NavLinks({ pages }: { pages: any }) {
   const isMobile = createMediaQuery("(max-width: 1024px)");
   const [isOpen, setIsOpen] = createSignal(false);
+  const [selectedPage, setSelectedPage] = createSignal("");
   const toggle = () => setIsOpen(!isOpen());
+
+  createEffect(() => {
+    if (isOpen()) {
+      setSelectedPage("");
+    }
+  });
+  console.log(selectedPage());
+
   return (
-    <div class="relative">
+    <div class="relative ">
       <Show
         when={isOpen()}
         fallback={
@@ -26,21 +36,29 @@ export default function NavLinks({ pages }: { pages: any }) {
             ${
               isMobile()
                 ? isOpen()
-                  ? "bg-white text-black absolute p-6 right-0"
+                  ? "bg-white text-[#575757] absolute p-6 right-0"
                   : "hidden"
                 : ""
             }
             font-bold basis-full lg:basis-auto flex flex-col lg:flex-row items-start ml-auto gap-5
         `}
       >
-        {pages.map((page: any) => (
-          <a
-            href={page.url}
-            class="uppercase text-xs text-black no-underline p-5 hover:border-b-2 hover:border-[#dc4a4a]"
-          >
-            {page.label[0].toUpperCase() + page.label.slice(1)}
-          </a>
-        ))}
+        <Show when={!isOpen()}>
+          {pages.map((page: any) => (
+            <div onClick={() => setSelectedPage(page.label.toLowerCase())}>
+              <a
+                href={page.url}
+                class={`uppercase text-xs text-[#575757] no-underline p-5 ${
+                  selectedPage() === page.label.toLowerCase()
+                    ? "border-b-2 border-[#dc4a4a]"
+                    : "hover:border-b-2 hover:border-[#dc4a4a]"
+                }`}
+              >
+                {page.label[0].toUpperCase() + page.label.slice(1)}
+              </a>
+            </div>
+          ))}
+        </Show>
       </ul>
     </div>
   );

diff --git a/src/components/News/BlogsContainer.astro b/src/components/News/BlogsContainer.astro
@@ -2,11 +2,14 @@
 import { getCollection, getEntry } from "astro:content";
 
 const blogs = await getCollection("blogs");
-console.log("here", blogs);
 ---
 
 <div class="h-full w-full p-8 relative">
-  <button class="text-white cursor-pointer bg-[#575757] p-2 rounded ml-8"
+  <button
+    onclick="
+    window.open('/news/tags')
+    "
+    class="text-white cursor-pointer bg-[#575757] p-2 rounded ml-8"
     >View all tags</button
   >
 </div>
diff --git a/src/components/News/BlogsHero.astro b/src/components/News/BlogsHero.astro
@@ -3,7 +3,12 @@ const { data } = Astro.props;
 ---
 
 <header
-  class=`relative text-left  bg-[#d3d3d3] flex flex-col p-8 md:p-12 h-[350px] justify-center`
+  class=`relative text-left  bg-[#d3d3d3] flex flex-col p-8 md:p-12 h-[350px] justify-center `
 >
-  <slot />
+  <div class="px-[10px]">
+    <div class="max-w-[1100px] justify-center align-center mx-auto">
+      <h1 class="text-[3em]">Tagged News Posts</h1>
+      <h2 class="text-left text-[1.25rem]">Find tagged news posts here.</h2>
+    </div>
+  </div>
 </header>
diff --git a/src/components/News/FirstItem.astro b/src/components/News/FirstItem.astro
@@ -1,24 +1,41 @@
 ---
 import { Image } from "astro:assets";
+import { getCollection, getEntry } from "astro:content";
 const { data, body } = Astro.props;
 import OpenAMPLogo from "../../assets/images/content/openAMP_LOGOMARKX.png";
 import dayjs from "dayjs";
 
 const dateObj = dayjs(data.date);
 const dateString = dateObj.format("dddd, MMMM D, YYYY");
-console.log(typeof body);
 
-const readTime = `${Math.ceil(body.split(" ").length / 183)} min read`; // Split by words
+const readTime = `${Math.ceil(body.split(" ").length / 183)} min read`;
+
+const projects = await getCollection("projects");
+
+function findUrl(inputPr: any) {
+  const trimmedInput = inputPr.trim().toLowerCase();
+  const selectedPr = projects.find(
+    (project) => project.data.title.trim().toLowerCase() === trimmedInput
+  );
+
+  if (selectedPr) {
+    return selectedPr.slug;
+  }
+
+  return "/";
+}
+const convertedTitle = findUrl(data.title);
 ---
 
 <a
+  data-projects={projects}
   class="h-full w-full text-inherit no-underline cursor-pointer col-span-full"
   href={data.url}
 >
-  <article
-    class="flex opacity-100 items-center justify-start shadow-lg rounded-3xl m-4 p-12 h-full"
+  <div
+    class="flex flex-col rounded-lg mx-auto bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 md:max-w-[1200px] md:flex-row"
   >
-    <div class="w-1/2">
+    <div class="flex flex-col justify-start p-6 md:w-[40%] w-full">
       <div class="flex w-full justify-between items-center my-4">
         <i class="text-xl">OpenAMP</i><Image
           class="w-12"
@@ -28,26 +45,34 @@ const readTime = `${Math.ceil(body.split(" ").length / 183)} min read`; // Split
       </div>
       <h2 class="text-xl text-left">{data.title}</h2>
       <p class="text-slate-500 w-full">{dateString}</p>
-      <div class="bg-gray-100 text-gray-700 font-bold text-sm my-4 p-1 inline">
-        {readTime}
-      </div>
-      <p>{data.description}</p>
+
       <ul class="flex flex-wrap gap-2 w-full">
         {
-          data.tags.map((tag: string) => (
-            <li class="bg-gray-100 p-2 text-sm text-gray-600 hover:bg-[#DBE0E5]">
-              {tag}
+          data.tags.map((tag: any) => (
+            <li
+              onclick={`window.location.href='/news/tags/${tag.slug}/';`}
+              class="bg-gray-100 p-2 text-sm text-gray-600 hover:bg-[#DBE0E5] transition ease-in-out delay-150 rounded-md"
+            >
+              {tag.slug.toUpperCase()}
             </li>
           ))
         }
       </ul>
+      <p class="mb-4 text-xl text-left">
+        {data.description}
+      </p>
+
       <button
-        onclick="
-        window.open('/news/LHR23-BOF-available/')
-        "
-        class="bg-openampred text-white px-4 py-2 rounded-md mt-6">Read</button
+        onclick=`window.location.href='/news/${convertedTitle}/';`
+        id="readme"
+        class="bg-openampred w-[20%] transition ease-in-out delay-500 hover:bg-red-600 text-white px-4 py-2 rounded-md mt-6"
+        >Read</button
       >
     </div>
-    <Image class="w-1/2" src={data.image} alt={data.title} />
-  </article>
+    <Image
+      class="h-96 md:w-[60%] w-full rounded-t-lg object-cover md:h-auto md:!rounded-none md:!rounded-r-lg"
+      src={data.image}
+      alt={data.title}
+    />
+  </div>
 </a>