feat: add base formation section

Author: Leonardo-Olivo

src/components/Timeline.astro

@@ -0,0 +1,88 @@
+---
+type Props = {
+  elements: {
+    text: string;
+    title: string;
+  }[];
+};
+
+const { elements } = Astro.props;
+---
+
+<div class="timeline">
+  <ol>
+    {
+      elements.map((element) => (
+        <li>
+          <h6>{element.title}</h6>
+          <p>{element.text}</p>
+        </li>
+      ))
+    }
+  </ol>
+</div>
+
+<style>
+  .timeline {
+    position: relative;
+  }
+
+  h6 {
+    margin-top: 0;
+  }
+
+  p {
+    font-size: 15px;
+  }
+
+  ol {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--timeline-gap);
+  }
+
+  /* spine of the timeline */
+  .timeline::before {
+    content: "";
+    width: 4px;
+    height: 200%; /* TODO: find better solution to span spine over the sections */
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: var(--color-primary);
+    z-index: 3; /* above potential dividers */
+  }
+
+  li {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    padding: 1rem;
+    background: #fcfaf3;
+    width: 45%;
+    box-shadow: 0px 15px 30px -25px rgba(0, 0, 0, 0.5);
+  }
+
+  li::after {
+    content: "";
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    border-width: 4px;
+    border-style: solid;
+    border-color: var(--color-primary);
+    background: var(--color-white);
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 5; /* above spine */
+  }
+
+  ol li:nth-child(even) {
+    align-self: flex-end;
+  }
+</style>

src/content.config.ts

@@ -138,6 +138,22 @@ const galleriesCollection = defineCollection({
     ),
 });
 
+const formationCollection = defineCollection({
+  loader: i18nContentLoader({ pattern: "**/[^_]*.yaml", base: "./src/content/formation" }),
+  schema: extendI18nLoaderSchema(
+    z.object({
+      items: localized(
+        z.array(
+          z.object({
+            title: z.string(),
+            text: z.string(),
+          }),
+        ),
+      ),
+    }),
+  ),
+});
+
 export const collections = {
   navigation: navigationCollection,
   pages: pagesCollection,
@@ -148,4 +164,5 @@ export const collections = {
   technologies: technologiesCollection,
   team: teamCollection,
   galleries: galleriesCollection,
+  formation: formationCollection,
 };

src/content/formation/founding.yaml

@@ -0,0 +1,11 @@
+items:
+  de:
+   - title: Lorem
+     text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+   - title: Lorem
+     text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+  en:
+   - title: Lorem
+     text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+   - title: Lorem
+     text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

src/content/formation/office.yaml

@@ -0,0 +1,11 @@
+items:
+  de:
+   - title: Lorem
+     text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+   - title: Lorem
+     text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+  en:
+   - title: Lorem
+     text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+   - title: Lorem
+     text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

src/content/pages/de/past/formation.mdx

@@ -2,3 +2,22 @@
 path: entstehung
 title: Entstehung
 ---
+
+import FormationSection from "../../../../layouts/sections/FormationSection.astro";
+import Divider from "../../../../components/Divider.astro";
+
+<FormationSection class="spotlight" key="founding">
+  <h2 name="title">Gründung</h2>
+  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.
+  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+</FormationSection>
+
+<Divider firstSegmentColor="var(--color-white)" fixAntialiasingBottom />
+
+<FormationSection class="white-background" key="office">
+  <h2 name="title">Erstes Büro</h2>
+  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.
+  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+</FormationSection>

src/layouts/sections/FormationSection.astro

@@ -0,0 +1,41 @@
+---
+import { currentLocale } from "astro-nanostores-i18n:runtime";
+import Timeline from "../../components/Timeline.astro";
+import { getCollection } from "astro:content";
+
+type Props = {
+  key: string;
+  class?: string;
+};
+
+const { key, class: className } = Astro.props;
+
+const locale = currentLocale.get();
+
+const timelineCollection = await getCollection("formation", (entry) => entry.data.locale === locale);
+
+const formationData = timelineCollection
+  .filter((t) => t.id.includes(key))
+  .flatMap((t) => {
+    if (Array.isArray(t.data.items)) {
+      return t.data.items.map((item) => ({ ...item }));
+    }
+    return [];
+  });
+---
+
+<section class:list={[className]}>
+  <div>
+    <slot name="title" />
+    <slot />
+  </div>
+  <Timeline elements={formationData} />
+</section>
+
+<style>
+  section {
+    display: grid;
+    column-gap: 1.5rem;
+    grid-template-columns: 60% 40%;
+  }
+</style>