Feat/references page

.changeset/brown-foxes-join.md

@@ -0,0 +1,5 @@
+---
+'openscript-ch-website': patch
+---
+
+Add references page

astro.config.ts

@@ -62,4 +62,7 @@ export default defineConfig({
     mdx(),
     sitemap({ i18n: { defaultLocale: C.DEFAULT_LOCALE, locales: C.LOCALES } }),
   ],
+  image: {
+    responsiveStyles: true,
+  },
 });

src/components/Button.astro

@@ -1,15 +1,26 @@
 ---
+import { resolveSimplePath } from '../utils/paths';
 import Sprite from './Sprite.astro';
+import { currentLocale } from 'astro-nanostores-i18n:runtime';
 
 type Props = {
   href: string;
   withArrow?: boolean;
+  resolvePath?: boolean;
+  navigationSpace?: 'main' | 'footer';
 };
 
-const { href, withArrow } = Astro.props;
+const { href, resolvePath = false, navigationSpace = 'main', withArrow } = Astro.props;
+
+let path;
+
+if (resolvePath) {
+  const locale = currentLocale.get();
+  path = await resolveSimplePath(navigationSpace, href, locale);
+}
 ---
 
-<a href={href} class="button">
+<a href={path ?? href} class="button">
   <slot />
   {withArrow && <Sprite name="arrow" />}
 </a>

src/components/Tile.astro

@@ -0,0 +1,123 @@
+---
+type Props = {
+  id: string;
+  variant: 'default' | 'turnable';
+  crease?: boolean;
+  color?: 'white' | 'beige';
+};
+
+const { id, variant, color = 'white', crease = false }: Props = Astro.props;
+---
+
+<turnable-tile
+  {id}
+  class:list={['tile', color]}
+  data-crease={crease}
+  data-id={id}
+  data-variant={variant}
+>
+  <div class="tile-front">
+    <slot name="front" />
+  </div>
+  {variant === 'turnable' && (
+    <div class="tile-back">
+      <slot name="back" />
+    </div>
+  )}
+</turnable-tile>
+
+<style>
+  .tile {
+    color: inherit;
+    font-weight: 600;
+    display: grid;
+    grid-template-areas: 'stack';
+    position: relative;
+    perspective: 1000px;
+    transform-style: preserve-3d;
+    transition: rotate 500ms linear;
+  }
+
+  .tile[data-variant='turnable'] {
+    cursor: pointer;
+  }
+
+  .tile.show {
+    rotate: y 180deg;
+  }
+
+  .tile-front,
+  .tile-back {
+    grid-area: stack;
+    padding: var(--size-gutter);
+    display: grid;
+    place-content: center;
+    backface-visibility: hidden;
+    text-align: center;
+    height: 100%;
+    box-sizing: border-box;
+  }
+
+  .white .tile-front,
+  .white .tile-back {
+    background-color: var(--color-white);
+  }
+
+  .beige .tile-front,
+  .beige .tile-back {
+    background-color: var(--color-background);
+  }
+
+  .tile-back {
+    rotate: y 180deg;
+  }
+
+  .tile-front {
+    grid-area: stack;
+    padding: var(--size-gutter-medium);
+    display: grid;
+    place-content: center;
+    backface-visibility: hidden;
+    text-align: center;
+    height: 100%;
+    box-sizing: border-box;
+  }
+
+  .tile[data-crease='true'] .tile-front {
+    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%);
+  }
+
+  .tile[data-crease='true'] .tile-front::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 0;
+    height: 0;
+
+    border-style: solid;
+    border-width: 13px 13px 0 0;
+    border-color: #d0d0d0 transparent transparent transparent;
+  }
+</style>
+
+<script>
+  class Tile extends HTMLElement {
+    connectedCallback() {
+      const id = this.dataset.id;
+      if (!id) return;
+
+      const tile = document.getElementById(id);
+
+      tile?.addEventListener('click', function () {
+        if (tile?.dataset.variant === 'turnable') {
+          tile?.classList.toggle('show');
+        }
+      });
+    }
+  }
+
+  if (!customElements.get('turnable-tile')) {
+    customElements.define('turnable-tile', Tile);
+  }
+</script>

src/components/accordion/Accordion.astro

@@ -0,0 +1,44 @@
+---
+import type { AccordionItem } from '../../types/AccordionItem';
+
+/**
+ * Accordion Component
+ *
+ * @description A fully accessible accordion component that follows WAI-ARIA guidelines
+ */
+
+interface Props {
+  /**
+   * Additional classes to apply to the accordion container
+   */
+  class?: string;
+  /**
+   * Accordion items to render
+   */
+  children: AccordionItem | AccordionItem[];
+  /**
+   * HTML attributes to spread on the accordion
+   */
+  [key: string]: string | number | boolean | undefined | AccordionItem | AccordionItem[];
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<ul class:list={['accordion', className]} {...rest}>
+  <slot />
+</ul>
+
+<style>
+  :where(.accordion) {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  :global(:where(.accordion > .item:first-child .wrapper)) {
+    border-block-start: none !important;
+  }
+</style>