@samuelgomez/astro 0.1.0

package/src/components/ScrollWatcher/index.astro

@@ -0,0 +1,11 @@
+---
+import Link from '@samuelgomez/astro/components/Link/index.astro';
+import Arrow from '@samuelgomez/astro/icons/Arrow.astro';
+---
+
+<figure>
+  <div>
+    <Link href="#body"><Arrow slot="after-link" title="Allez en haut" /></Link>
+  </div>
+  <figcaption></figcaption>
+</figure>

package/src/components/Social/index.astro

@@ -0,0 +1,22 @@
+---
+import Linkedin from '@samuelgomez/astro/icons/Linkedin.astro';
+import Twitter from '@samuelgomez/astro/icons/Twitter.astro';
+import Github from '@samuelgomez/astro/icons/Github2.astro';
+import Instagram from '@samuelgomez/astro/icons/Instagram.astro';
+import Link from '@samuelgomez/astro/components/Link/index.astro';
+---
+
+<menu>
+  <Link href="https://github.com/samuel-gomez">
+    <Github slot="after-link" title="Github de Samuel Gomez" />
+  </Link>
+  <Link href="https://www.linkedin.com/in/samuel-gomez-developpeur-web/">
+    <Linkedin slot="after-link" title="Linkedin de Samuel Gomez" />
+  </Link>
+  <Link href="https://twitter.com/gamuez">
+    <Twitter slot="after-link" title="Twitter de Samuel Gomez" />
+  </Link>
+  <Link href="https://www.instagram.com/gamuez_art/">
+    <Instagram slot="after-link" title="Instagram de Samuel Gomez" />
+  </Link>
+</menu>

package/src/components/Support/index.astro

@@ -0,0 +1,24 @@
+---
+import AlertDanger from '@samuelgomez/astro/components/Alert/AlertDanger.astro';
+
+type Props = {
+  condition?: string;
+};
+
+const { condition } = Astro.props;
+---
+
+<AlertDanger title="Non supporté">
+  <slot>
+    Votre navigateur ne supporte pas cette fonctionnalité. Les démos ne seront
+    pas visibles.
+  </slot>
+</AlertDanger>
+
+<style define:vars={{ condition }}>
+  @supports (starting-style) {
+    .box-alert.box-error {
+      display: none;
+    }
+  }
+</style>

package/src/components/Svg/index.astro

@@ -0,0 +1,30 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+export type SvgProps = HTMLAttributes<'svg'> & {
+  size?: number;
+  title?: string;
+};
+
+const {
+  fill = 'currentColor',
+  size = 24,
+  title,
+  ...props
+} = Astro.props as SvgProps;
+
+const titleId = Boolean(title) ? `${crypto.randomUUID()}` : null;
+---
+
+<svg
+  viewBox={`0 0 ${size} ${size}`}
+  width={`${size}`}
+  height={`${size}`}
+  fill={fill}
+  role="img"
+  aria-labelledby={titleId}
+  {...props}
+>
+  {Boolean(title) && <title id={titleId}>{title}</title>}
+  <slot />
+</svg>

package/src/components/SwitchTheme.astro

@@ -0,0 +1,45 @@
+---
+import MoonSun from '@samuelgomez/astro/icons/MoonSun.astro';
+import Button from '@samuelgomez/astro/components/Button/index.astro';
+---
+
+<Button
+  variant="ghost small"
+  id="switch-theme"
+  title="Changer en mode clair ou sombre"
+  aria-live="polite"
+>
+  <MoonSun />
+</Button>
+
+<script is:inline>
+  const DARK = 'dark';
+  const LIGHT = 'light';
+  const themeToggle = document.querySelector('#switch-theme');
+  const matchMediaDark = window.matchMedia('(prefers-color-scheme: dark)');
+
+  // const getMatchMedia = () => (matchMediaDark.matches ? DARK : LIGHT);
+
+  let theme = localStorage.getItem('theme') || DARK;
+
+  themeToggle?.setAttribute('aria-label', theme);
+
+  const setTheme = (isSetToDark) => {
+    theme = isSetToDark ? DARK : LIGHT;
+    localStorage.setItem('theme', theme);
+    themeToggle?.setAttribute('aria-label', theme);
+  };
+
+  if (!Boolean(themeToggle?.getAttribute('aria-label'))) {
+    setTheme(getMatchMedia() === DARK);
+  }
+
+  window.addEventListener('load', () => {
+    themeToggle?.setAttribute('aria-label', theme);
+    themeToggle?.addEventListener('click', () => setTheme(theme === LIGHT));
+  });
+
+  matchMediaDark.addEventListener('change', ({ matches: isDark }) =>
+    setTheme(isDark)
+  );
+</script>

package/src/components/Table/Table.astro

@@ -0,0 +1,15 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+export type TableProps = HTMLAttributes<'table'> & {
+  caption: string;
+  idCaption: string;
+};
+
+const { caption, idCaption, ...tableProps } = Astro.props as TableProps;
+---
+
+<table {...tableProps}>
+  {Boolean(caption) && <caption id={idCaption}>{caption}</caption>}
+  <slot />
+</table>

package/src/components/Table/TableBody.astro

@@ -0,0 +1,21 @@
+---
+export type TableBodyProps = {
+  items: string[][];
+};
+
+const { items } = Astro.props as TableBodyProps;
+---
+
+{
+  items.length > 0 && (
+    <tbody>
+      {items.map((line) => (
+        <tr>
+          {line.map((cell) => (
+            <td>{cell}</td>
+          ))}
+        </tr>
+      ))}
+    </tbody>
+  )
+}

package/src/components/Table/TableHeader.astro

@@ -0,0 +1,19 @@
+---
+export type TableHeaderProps = {
+  headers: string[];
+};
+
+const { headers } = Astro.props as TableHeaderProps;
+---
+
+{
+  headers.length > 0 && (
+    <thead>
+      <tr>
+        {headers.map((header) => (
+          <th>{header}</th>
+        ))}
+      </tr>
+    </thead>
+  )
+}

package/src/components/Table/index.astro

@@ -0,0 +1,21 @@
+---
+import Table, { type TableProps } from './Table.astro';
+import TableHeader, { type TableHeaderProps } from './TableHeader.astro';
+import TableBody, { type TableBodyProps } from './TableBody.astro';
+
+type Props = TableProps & TableHeaderProps & TableBodyProps;
+
+const {
+  items = [],
+  headers = [],
+  caption,
+  id,
+  idCaption = `table-title-${id}`,
+  ...tablesProps
+} = Astro.props;
+---
+
+<Table id={id} caption={caption} idCaption={idCaption} {...tablesProps}>
+  <TableHeader headers={headers} />
+  <TableBody items={items} />
+</Table>

package/src/components/TableOfContent/index.astro

@@ -0,0 +1,117 @@
+---
+import Nav, { type NavProps } from '@samuelgomez/astro/components/Nav/index.astro';
+import { setSlug } from '@samuelgomez/astro/helpers/setSlug';
+
+type TocProps = NavProps & {
+  links?: string[];
+};
+
+const { links = [], ...props } = Astro.props as TocProps;
+const LABEL = 'Table des matières';
+---
+
+{
+  Boolean(links.length) && (
+    <Nav
+      mode="vertical"
+      ordered
+      title={LABEL}
+      items={links.map((item) => ({
+        label: item,
+        href: `#${setSlug(item)}`,
+      }))}
+      {...props}
+    />
+  )
+}
+
+<script>
+  if (window.location.hash) {
+    const activeAnchor = document.querySelector(
+      `a[href="${window.location.hash}"]`
+    );
+    if (activeAnchor) {
+      activeAnchor.setAttribute('aria-current', 'true');
+    }
+  }
+
+  function setCurrentAnchor(e: Event) {
+    {
+      const anchor = e.currentTarget as HTMLAnchorElement;
+      const oldCurrent = document.querySelector(
+        'nav[aria-labelledby="table-des-matières"] a[aria-current]'
+      );
+      oldCurrent?.removeAttribute('aria-current');
+      anchor?.setAttribute('aria-current', 'true');
+    }
+  }
+
+  const anchors = document.querySelectorAll(
+    'nav[aria-labelledby="table-des-matières"] a'
+  );
+
+  [...anchors].forEach((anchor) => {
+    anchor.addEventListener('click', setCurrentAnchor);
+  });
+  // other medthod :  https://css-tricks.com/table-of-contents-with-intersectionobserver/
+  // other method :  https://benfrain.com/building-a-table-of-contents-with-active-indicator-using-javascript-intersection-observers/
+  function updateActive(id: string, prev?: boolean) {
+    const tableOfContent = document.querySelector(
+      '[aria-labelledby="table-des-matières"]'
+    );
+
+    tableOfContent
+      ?.querySelector('[aria-current="true"]')
+      ?.removeAttribute('aria-current');
+
+    if (prev) {
+      tableOfContent
+        ?.querySelector(`nav li:has(+ li a[href="#${id}"]) a`)
+        ?.setAttribute('aria-current', 'true');
+    } else {
+      tableOfContent
+        ?.querySelector(`nav li a[href="#${id}"]`)
+        ?.setAttribute('aria-current', 'true');
+    }
+  }
+
+  window.addEventListener('DOMContentLoaded', () => {
+    let previousYList: Record<string, number> = {};
+    let previousRatioList: Record<string, number> = {};
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        const {
+          isIntersecting,
+          boundingClientRect,
+          intersectionRatio,
+          target,
+        } = entry;
+
+        const id = target?.getAttribute?.('id') ?? '';
+
+        if (boundingClientRect.y < previousYList[id]) {
+          // Scrolling down enter
+          if (intersectionRatio > previousRatioList[id] && isIntersecting) {
+            updateActive(id);
+          }
+        } else if (boundingClientRect.y > previousYList[id]) {
+          // Scrolling up leave
+          if (intersectionRatio < previousRatioList[id]) {
+            updateActive(id, true);
+            // Scrolling up enter
+          } else {
+            updateActive(id);
+          }
+        }
+        previousYList = { ...previousYList, [id]: boundingClientRect.y };
+        previousRatioList = { ...previousRatioList, [id]: intersectionRatio };
+      });
+    });
+
+    // Track all sections that have an `id` applied
+    document
+      .querySelectorAll('h2[id]')
+      .forEach((section) => observer.observe(section));
+  });
+</script>

package/src/components/Tabs/TabList.astro

@@ -0,0 +1,23 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+export type TabListProps = HTMLAttributes<'div'> & {
+  idTitle: string;
+  direction?: 'horizontal' | 'vertical';
+};
+
+const {
+  direction = 'horizontal',
+  idTitle,
+  ...props
+} = Astro.props as TabListProps;
+---
+
+<div
+  role="tablist"
+  aria-labelledby={idTitle}
+  aria-orientation={direction}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/Tabs/TabListItem.astro

@@ -0,0 +1,22 @@
+---
+import Button, { type ButtonProps } from '@samuelgomez/astro/components/Button/index.astro';
+
+export type TabListItemProps = ButtonProps & {
+  index: number;
+};
+
+const { id, index, ...props } = Astro.props as TabListItemProps;
+---
+
+<Button
+  id={`tab-${id}-${index}`}
+  type="button"
+  role="tab"
+  aria-selected={`${index === 0}`}
+  aria-controls={`panel-${id}-${index}`}
+  tabindex={`${index && -1}`}
+  variant="ghost"
+  {...props}
+>
+  <slot />
+</Button>

package/src/components/Tabs/TabPanel.astro

@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+export type TabPanelProps = HTMLAttributes<'div'> & {
+  index: number;
+};
+
+const { id, index } = Astro.props as TabPanelProps;
+---
+
+<div
+  id={`panel-${id}-${index}`}
+  role="tabpanel"
+  tabindex="0"
+  aria-labelledby={`tab-${id}-${index}`}
+  hidden={index !== 0 ? 'true' : null}
+>
+  <slot />
+</div>

package/src/components/Tabs/TabsContainer.astro

@@ -0,0 +1,174 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+export type TabsContainerProps = HTMLAttributes<'div'> & {
+  title: string;
+  idTitle: string;
+};
+
+const {
+  title,
+  id,
+  idTitle,
+  ...tabsProps
+} = Astro.props as TabsContainerProps;
+---
+
+<div id={id} {...tabsProps}>
+  {Boolean(title) && <h3 id={idTitle}>{title}</h3>}
+  <slot />
+</div>
+
+<script>
+  class Tabs {
+    tabsElements?: HTMLElement[];
+
+    init() {
+      this.tabsElements = this.getAllTabs();
+      if (!this.tabsElements.length) {
+        return;
+      }
+      this.initAllTabs();
+    }
+
+    getAllTabs() {
+      const tabsNodeList = document.querySelectorAll<HTMLElement>(":has(> [role='tablist'])");
+      return [...tabsNodeList];
+    }
+
+    initAllTabs() {
+      this.tabsElements?.forEach((tabElement) => {
+        const allTab =
+          tabElement?.querySelectorAll<HTMLElement>('[role="tab"]');
+        if (allTab) {
+          this.initFirstTab(tabElement);
+          this.addEventTab(tabElement, allTab);
+        }
+      });
+    }
+
+    initFirstTab(tabElement: HTMLElement) {
+      const firstTab = tabElement?.querySelector<HTMLElement>(
+        '[aria-selected="true"]'
+      );
+      const isVertical = Boolean(
+        tabElement.querySelector('[aria-orientation="vertical"]')
+      );
+      const tablist =
+        tabElement?.querySelector<HTMLElement>('[role="tablist"]');
+      const size = isVertical
+        ? `${(firstTab?.offsetHeight ?? 0) / (tablist?.offsetHeight ?? 1)}`
+        : `${(firstTab?.offsetWidth ?? 0) / (tablist?.offsetWidth ?? 1)}`;
+      tabElement?.style?.setProperty('--size', size);
+    }
+
+    addEventTab(tabElement: HTMLElement, allTab: NodeListOf<HTMLElement>) {
+      [...allTab].forEach((tab) => {
+        tab.addEventListener('click', (e: Event) =>
+          this.switchTab(tabElement, e.target as HTMLElement)
+        );
+      });
+
+      tabElement?.addEventListener('keydown', (e) => {
+        const currentTab = tabElement?.querySelector<HTMLElement>(
+          '[aria-selected="true"]'
+        );
+        switch (e.key) {
+          case 'ArrowLeft':
+          case 'ArrowUp':
+            this.switchTab(
+              tabElement,
+              (currentTab?.previousElementSibling as HTMLElement) ||
+                allTab[allTab.length - 1]
+            );
+            break;
+          case 'ArrowRight':
+          case 'ArrowDown':
+            this.switchTab(
+              tabElement,
+              (currentTab?.nextElementSibling as HTMLElement) || allTab[0]
+            );
+            break;
+          case 'Home':
+            this.switchTab(tabElement, allTab[0]);
+            break;
+          case 'End':
+            this.switchTab(tabElement, allTab[allTab.length - 1]);
+            break;
+        }
+      });
+    }
+
+    switchTab(tabElement: HTMLElement, target: HTMLElement) {
+      const activeTab = tabElement?.querySelector('[aria-selected="true"]');
+      activeTab?.setAttribute('aria-selected', 'false');
+      activeTab?.setAttribute('tabindex', '-1');
+
+      tabElement
+        ?.querySelector('[role="tabpanel"]:not([hidden])')
+        ?.setAttribute('hidden', '');
+
+      target?.setAttribute('aria-selected', 'true');
+      target?.setAttribute('tabindex', '0');
+      target.focus();
+
+      tabElement
+        ?.querySelector(`#${target.getAttribute('aria-controls')}`)
+        ?.removeAttribute('hidden');
+
+      this.moveIndicator(tabElement, activeTab as HTMLElement, target);
+    }
+
+    moveIndicator(
+      tabElement: HTMLElement,
+      oldTab: HTMLElement,
+      newTab: HTMLElement
+    ) {
+      const tablist =
+        tabElement?.querySelector<HTMLElement>('[role="tablist"]');
+      const isVertical = Boolean(
+        tabElement.querySelector('[aria-orientation="vertical"]')
+      );
+      const newTabPosition = oldTab.compareDocumentPosition(newTab);
+      const { offsetWidth, offsetLeft, offsetHeight, offsetTop } = newTab;
+
+      const size = isVertical
+        ? `${(offsetHeight ?? 0) / (tablist?.offsetHeight ?? 1)}`
+        : `${(offsetWidth ?? 0) / (tablist?.offsetWidth ?? 1)}`;
+
+      let transition;
+
+      if (newTabPosition === 4) {
+        transition = isVertical
+          ? offsetTop + offsetHeight - oldTab.offsetTop
+          : offsetLeft + offsetWidth - oldTab.offsetLeft;
+      } else {
+        transition = isVertical
+          ? oldTab.offsetTop + oldTab.offsetHeight - offsetTop
+          : oldTab.offsetLeft + oldTab.offsetWidth - offsetLeft;
+        const offset = `${isVertical ? offsetTop : offsetLeft}px`;
+        tabElement?.style.setProperty('--offset', offset);
+      }
+
+      const transitionSize = isVertical
+        ? `${transition / (tabElement?.offsetHeight ?? 1)}`
+        : `${transition / (tabElement?.offsetWidth ?? 1)}`;
+
+      tabElement?.style.setProperty('--size', transitionSize);
+
+      setTimeout(() => {
+        tabElement?.style.setProperty(
+          '--offset',
+          `${isVertical ? offsetTop : offsetLeft}px`
+        );
+        tabElement?.style.setProperty('--size', size);
+      }, 200);
+    }
+  }
+
+  const tabs = new Tabs();
+
+  window.addEventListener('load', () => {
+    tabs.init();
+  });
+</script>

package/src/components/Tabs/index.astro

@@ -0,0 +1,46 @@
+---
+import TabsContainer, { type TabsContainerProps } from './TabsContainer.astro';
+import TabList, { type TabListProps } from './TabList.astro';
+import TabListItem from './TabListItem.astro';
+import TabPanel from './TabPanel.astro';
+
+type Item = {
+  tab: string;
+  panel: string;
+};
+
+type TabsProps = TabsContainerProps & {
+  items: Item[];
+} & Pick<TabListProps, 'direction'>;
+
+const {
+  items = [],
+  direction = 'horizontal',
+  title,
+  id,
+  idTitle = `tablist-title-${id}`,
+  ...tabsProps
+} = Astro.props as TabsProps;
+---
+
+<TabsContainer id={id} title={title} idTitle={idTitle} {...tabsProps}>
+  {
+    items.length > 0 && (
+      <>
+        <TabList idTitle={idTitle} direction={direction}>
+          {items.map(({ tab }, index) => (
+            <TabListItem id={id} index={index}>
+              <Fragment set:html={tab} />
+            </TabListItem>
+          ))}
+        </TabList>
+
+        {items.map(({ panel }, index) => (
+          <TabPanel id={id} index={index}>
+            <Fragment set:html={panel} />
+          </TabPanel>
+        ))}
+      </>
+    )
+  }
+</TabsContainer>

package/src/components/Title/h1.astro

@@ -0,0 +1,12 @@
+---
+import Title from './index.astro';
+
+type Props = {
+  label: string;
+  noLink?: boolean;
+};
+
+const props = Astro.props;
+---
+
+<Title {...props}><slot /></Title>

package/src/components/Title/h2.astro

@@ -0,0 +1,12 @@
+---
+import Title from './index.astro';
+
+type Props = {
+  label: string;
+  noLink?: boolean;
+};
+
+const props = Astro.props;
+---
+
+<Title level={2} {...props}><slot /></Title>

package/src/components/Title/h3.astro

@@ -0,0 +1,12 @@
+---
+import Title from './index.astro';
+
+type Props = {
+  label: string;
+  noLink?: boolean;
+};
+
+const props = Astro.props;
+---
+
+<Title level={3} {...props}><slot /></Title>

package/src/components/Title/h4.astro

@@ -0,0 +1,12 @@
+---
+import Title from './index.astro';
+
+type Props = {
+  label: string;
+  noLink?: boolean;
+};
+
+const props = Astro.props;
+---
+
+<Title level={4} {...props}><slot /></Title>

package/src/components/Title/h5.astro

@@ -0,0 +1,12 @@
+---
+import Title from './index.astro';
+
+type Props = {
+  label: string;
+  noLink?: boolean;
+};
+
+const props = Astro.props;
+---
+
+<Title level={5} {...props}><slot /></Title>