feat: update projects page

eleventy.config.js

@@ -28,6 +28,10 @@ export default function eleventy(eleventyConfig) {
         eleventyConfig.addCollection(`pages_${lang}`, (collection) => {
             return collection.getFilteredByGlob(`src/collections/pages/${lang}/*.md`);
         });
+
+        eleventyConfig.addCollection(`projects_${lang}`, (collection) => {
+            return collection.getFilteredByGlob(`src/collections/projects/${lang}/*.md`);
+        });
     });
 
     eleventyConfig.addTransform("parse", parse);

src/_includes/layouts/about.njk

@@ -5,13 +5,11 @@
 {{ content | safe }}
 {% if collections['projects_' + lang] %}
     <section class="display">
-      <div class="display__title">
-        <h2>Projects</h2>
-      </div>
+      <h2 class="display__title">Projects</h2>
       <div class="display__items">
         {% set cardType = "project" %}
         {% for item in collections['projects_' + lang] %}
-          {{ card({image: item.data.image, title: item.data.title, body: item.data.body }) }}
+          {{ card({image: item.data.image, title: item.data.title, body: item.data.desc }) }}
         {% endfor %}
       </div>
       <div class="display__link">

src/_includes/layouts/home.njk

@@ -4,13 +4,11 @@
 {% block content %}
 {% if collections['projects_' + lang] %}
     <section class="display">
-      <div class="display__title">
-        <h2>Projects</h2>
-      </div>
+      <h2 class="display__title">Projects</h2>
       <div class="display__items">
         {% set cardType = "project" %}
         {% for item in collections['projects_' + lang] %}
-          {{ card({image: item.data.image, title: item.data.title, body: item.data.body }) }}
+          {{ card({image: item.data.image, title: item.data.title, body: item.data.desc }) }}
         {% endfor %}
       </div>
       <div class="display__link">
@@ -19,13 +17,11 @@
     {% endif %}
     {% if collections.events %}
     <section class="display">
-      <div class="display__title">
-        <h2>Events</h2>
-      </div>
+      <h2 class="display__title>Events</h2>
       <div class="display__items">
         {% set cardType = "event" %}
         {% for item in collections.events %}
-          {{ card({image: item.data.image, title: item.data.title, body: item.data.body }) }}
+          {{ card({image: item.data.image, title: item.data.title, body: item.data.desc }) }}
         {% endfor %}
       </div>
       <div class="display__link">
@@ -34,13 +30,11 @@
     {% endif %}
     {% if collections.resources %}
     <section class="display">
-      <div class="display__title">
-        <h2>Resources</h2>
-      </div>
+      <h2 class="display__title>Resources</h2>
       <div class="display__items">
         {% set cardType = "resource" %}
         {% for item in collections.resources %}
-          {{ card({image: item.data.image, title: item.data.title, body: item.data.body }) }}
+          {{ card({image: item.data.image, title: item.data.title, body: item.data.desc }) }}
         {% endfor %}
       </div>
       <div class="display__link">
@@ -49,13 +43,11 @@
     {% endif %}
     {% if collections.news %}
     <section class="display">
-      <div class="display__title">
-        <h2>Announcements</h2>
-      </div>
+      <h2 class="display__title>Announcements</h2>
       <div class="display__items">
         {% set cardType = "news" %}
         {% for item in collections.news %}
-          {{ card({image: item.data.image, title: item.data.title, body: item.data.body }) }}
+          {{ card({image: item.data.image, title: item.data.title, body: item.data.desc }) }}
         {% endfor %}
       </div>
       <div class="display__link">

src/_includes/layouts/projects.njk

@@ -1,20 +1,12 @@
 {% extends "layouts/base.njk" %}
+{% from "partials/components/projectPanel.macro.njk" import projectPanel %}
 
 {% block content %}
 <div>
-    <div class="card">
-        <h2 class="card__heading">All Standards With Us</h2>
-        <p>
-            Lorem ipsum dolor sit amet. Ea galisum quisquam aut galisum aperiam eum dolores consequuntur et fugit rerum ut necessitatibus eligendi aut corrupti nisi quo voluptatum impedit. Nam dolor delectus non sapiente vero sit sint esse cum libero provident est Quis voluptatem non ipsa ullam vel iure autem.
-    Quo facilis reprehenderit in atque deleniti qui facilis vitae sit officia galisum. Quo laboriosam consequatur sed fugit voluptas id quibusdam galisum sit explicabo modi sit mollitia placeat hic laboriosam omnis.
-        </p>
-    </div>
-    <div class="card">
-        <h2 class="card__heading">Review of the Review</h2>
-        <p>
-            Lorem ipsum dolor sit amet. Ea galisum quisquam aut galisum aperiam eum dolores consequuntur et fugit rerum ut necessitatibus eligendi aut corrupti nisi quo voluptatum impedit. Nam dolor delectus non sapiente vero sit sint esse cum libero provident est Quis voluptatem non ipsa ullam vel iure autem.
-            Quo facilis reprehenderit in atque deleniti qui facilis vitae sit officia galisum. Quo laboriosam consequatur sed fugit voluptas id quibusdam galisum sit explicabo modi sit mollitia placeat hic laboriosam omnis.
-        </p>
-    </div>
+    {% if collections['projects_' + lang] %}
+        {% for item in collections['projects_' + lang] %}
+            {{ projectPanel({image: item.data.image, title: item.data.title, body: item.data.desc }) }}
+        {% endfor %}
+    {% endif %}
 </div>
 {% endblock %}

src/_includes/partials/components/projectPanel.macro.njk

@@ -0,0 +1,19 @@
+{%- macro projectPanel(params) -%}
+<div class="projectPanel">
+    <div class="projectPanel__color">
+    </div>
+    {% if params.image %}
+        <div class="projectPanel__image">
+            {{ params.image }}
+        </div>
+    {% endif %}
+    <div class="projectPanel__content">
+        <a class="projectPanel__title" href="#">
+            {{ params.title | safe }}
+        </a>
+        <div class="projectPanel__body">
+            <p>{{ params.body | safe }}</p>
+        </div>
+    </div>
+</div>
+{% endmacro %}

src/_transforms/parse.js

@@ -9,7 +9,7 @@ export default (value, outputPath) => {
             for (const heading of sectionHeadings) {
                 const getContent = (elem) => {
                     let elems = [];
-                    while (elem.nextElementSibling && elem.nextElementSibling.tagName !== "H2") {
+                    while (elem.nextElementSibling && elem.nextElementSibling.tagName !== "H2" && elem.nextElementSibling.tagName !== "SECTION") {
                         elems.push(elem.nextElementSibling);
                         elem = elem.nextElementSibling;
                     }

src/assets/styles/app.css

@@ -15,3 +15,4 @@
 /* Components */
 @import "./components/card.css";
 @import "./components/navigation.css";
+@import "./components/projectPanel.css";

src/assets/styles/base/_base.css

@@ -33,7 +33,8 @@ section {
 }
 
 .banner__text > * + *,
-section > * + * {
+section > * + *,
+.projectPanel__content > * + * {
     margin-block-start: 1em;
 }
 

src/assets/styles/components/projectPanel.css

@@ -0,0 +1,85 @@
+div:has(.projectPanel) {
+    background-color: var(--color-indigo-100);
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    padding-block: var(--common-block-padding);
+    padding-inline: var(--common-inline-padding);
+}
+
+.projectPanel {
+    background-color: var(--fl-fgColor, var(--color-yellow));
+    box-shadow: 0 0.625rem 1.25rem 0 #0B046C26;
+    border: 0.1875rem solid var(--fl-bgColor, var(--color-indigo-100));
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+.projectPanel:has(a:focus) {
+    border: 0.1875rem solid transparent;
+    outline: 0.1875rem solid var(--fl-fgColor, transparent);
+    outline-offset: 0.1875rem;
+}
+
+.projectPanel:hover {
+    box-shadow: 0 0.625rem 1.25rem 0 var(--fl-fgColor, #0B046C73);
+}
+
+.projectPanel__color {
+    min-height: 2.5rem;
+    border-bottom: 0.125rem solid var(--fl-fgColor, var(--color-yellow));
+}
+
+.projectPanel__image {
+    min-width: 16.25rem;
+    min-height: 12.1875rem;
+    max-width: 31.0625rem;
+    max-height: 23.125rem;
+}
+
+.projectPanel__title {
+    font-weight: var(--font-weight-semibold);
+    font-family: var(--family-sans-serif);
+    font-size: var(--step-4);
+    text-decoration: none;
+    color: black;
+}
+
+.projectPanel__title:focus {
+    background: none;
+    box-shadow: none;
+    color: var(--fl-linkColor, var(--black));
+    outline: none;
+}
+
+.projectPanel__title::after {
+    bottom: 0;
+    content: "";
+    display: block;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.projectPanel__content {
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+    margin: auto;
+    padding: 1.875rem;
+    width: 100%;
+}
+
+@media (width >= 70.875rem) {
+    .projectPanel {
+        flex-direction: row;
+    }
+
+    .projectPanel__color {
+        border-right: 0.125rem solid var(--fl-fgColor, var(--color-yellow));
+        min-width: 4.625rem;
+        min-height: 23.125rem;
+    }
+}

src/collections/projects/en/project.md

@@ -0,0 +1,4 @@
+---
+title: Project
+desc: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+---

src/collections/projects/fr/project.md

@@ -0,0 +1,4 @@
+---
+title: Project
+desc: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
+---