@samuelgomez/astro 0.1.0

package/src/components/Demo/index.astro

@@ -0,0 +1,105 @@
+---
+import TabContainer from '@samuelgomez/astro/components/Tabs/TabsContainer.astro';
+import TabPanel from '@samuelgomez/astro/components/Tabs/TabPanel.astro';
+import TabList from '@samuelgomez/astro/components/Tabs/TabList.astro';
+import TabListItem from '@samuelgomez/astro/components/Tabs/TabListItem.astro';
+import WrapperOrNot from '@samuelgomez/astro/components/helpers/WrapperOrNot/index.astro';
+import { Code } from 'astro/components';
+import { setSlug } from '@samuelgomez/astro/helpers/setSlug';
+/* import type { HTMLTag } from 'astro/types'; */
+
+const html = await Astro.slots.render('html');
+const css = await Astro.slots.render('css');
+const js = await Astro.slots.render('js');
+const jsx = await Astro.slots.render('code');
+
+const { title, showJs, wrapperTag = 'span' } = Astro.props;
+const idTab = title ? setSlug(title) : 'demo-code';
+
+let scopedStyle;
+let className = undefined;
+let WrapperDemo = wrapperTag;
+
+if (Boolean(css)) {
+  const style = css
+    ?.replace('<code>', '')
+    ?.replace('</code>', '')
+    ?.replace('{', '{\r')
+    ?.replace('}', '\r}')
+    ?.replace(';', ';\r')
+    ?.trim?.();
+
+  className = `demo-${Date.now() + '_' + Math.floor(Math.random() * 10000)}`;
+  scopedStyle = `.${className} { * > * { font-size: revert; }  ${style} }`;
+  WrapperDemo = 'div';
+}
+---
+
+<TabContainer
+  id={idTab}
+  idTitle={`title-${idTab}`}
+  title={title}
+>
+  <TabList idTitle={`title-${idTab}`}>
+    <TabListItem id={idTab} index={0}>Démo</TabListItem>
+    <TabListItem id={idTab} index={1}>HTML</TabListItem>
+    {
+      Boolean(css) && (
+        <TabListItem id={idTab} index={2}>
+          CSS
+        </TabListItem>
+      )
+    }
+    {
+      Boolean(js) && showJs && (
+        <TabListItem id={idTab} index={3}>
+          JS
+        </TabListItem>
+      )
+    }
+    {
+      Boolean(jsx) && (
+        <TabListItem id={idTab} index={4}>
+          JSX
+        </TabListItem>
+      )
+    }
+  </TabList>
+  <TabPanel id={idTab} index={0}>
+    <WrapperOrNot
+      class={className}
+      condition={Boolean(WrapperDemo)}
+      wrapper={WrapperDemo}
+    >
+      <Fragment set:html={html} />
+    </WrapperOrNot>
+  </TabPanel>
+  <TabPanel id={idTab} index={1}>
+    <Code code={html} lang="html" />
+  </TabPanel>
+  {
+    Boolean(css) && (
+      <TabPanel id={idTab} index={2}>
+        <Code code={css} lang="css" />
+      </TabPanel>
+    )
+  }
+  {
+    Boolean(js) && showJs && (
+      <TabPanel id={idTab} index={3}>
+        <Code code={js} lang="javascript" />
+      </TabPanel>
+    )
+  }
+  {
+    Boolean(jsx) && (
+      <TabPanel id={idTab} index={4}>
+        <Code code={jsx} lang="jsx" />
+      </TabPanel>
+    )
+  }
+</TabContainer>
+
+{Boolean(css) && <style set:html={scopedStyle} />}
+
+{Boolean(js) && <script is:inline set:html={js} />}

package/src/components/Dialog/index.astro

@@ -0,0 +1,74 @@
+---
+import Button, {
+  type ButtonProps,
+} from '@samuelgomez/astro/components/Button/index.astro';
+import Title, { type titleLevel } from '@samuelgomez/astro/components/Title/index.astro';
+import Cross from '@samuelgomez/astro/icons/Cross.astro';
+
+type Tvariant = 'error' | 'info' | 'success' | 'warning';
+
+type Props = {
+  variant?: Tvariant;
+  id: string;
+  titleLevel?: titleLevel;
+  openerVariant?: ButtonProps['variant'];
+};
+
+const {
+  variant = '',
+  id,
+  titleLevel = 4,
+  openerVariant,
+} = Astro.props as Props;
+
+const className = Boolean(variant) ? `dialog-${variant}` : null;
+
+const footerContent = await Astro.slots.render('footer-content');
+---
+
+<Button variant={openerVariant} id={`open-dialog-${id}`}
+  ><slot name="opener" /></Button
+>
+
+<dialog
+  id={id}
+  class={className}
+  onclick="document.querySelector(`#${id}`).close()"
+>
+  <div class="dialog-inner">
+    <header>
+      <Title level={titleLevel}><slot name="title" /></Title>
+      <form>
+        <Button
+          variant="small"
+          autofocus
+          formmethod="dialog"
+          type="submit"
+          aria-label="Fermer la boîte de dialogue"><Cross /></Button
+        >
+      </form>
+    </header>
+    <slot name="content" />
+    {
+      Boolean(footerContent) && (
+        <footer>
+          <slot name="footer-content" />
+        </footer>
+      )
+    }
+  </div>
+</dialog>
+
+<script is:inline define:vars={{ id }}>
+  const dialog = document.querySelector(`#${id}`);
+  const openBtn = document.querySelector(`#open-dialog-${id}`);
+  const closeBtn = dialog.querySelector("button[data-action='close']");
+  const validateBtn = dialog.querySelector("button[data-action='validate']");
+
+  const innerDialog = dialog.querySelector('.dialog-inner');
+  innerDialog?.addEventListener('click', (event) => event.stopPropagation());
+
+  openBtn?.addEventListener('click', () => dialog.showModal());
+  closeBtn?.addEventListener('click', () => dialog.close());
+  validateBtn?.addEventListener('click', () => dialog.close());
+</script>

package/src/components/FormattedDate/index.astro

@@ -0,0 +1,17 @@
+---
+type Props = {
+  date: Date;
+};
+
+const { date } = Astro.props;
+---
+
+<time datetime={date.toISOString()}>
+  {
+    date.toLocaleDateString('fr-fr', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    })
+  }
+</time>

package/src/components/GithubContributions/index.astro

@@ -0,0 +1,88 @@
+<div class="contribs-wrapper" aria-hidden="true">
+  <div class="contribs">
+    {[...Array(364)].map(() => <div class="contrib" />)}
+  </div>
+</div>
+
+<style>
+  :root {
+    --gh-c: hsl(var(--g5) / 20%);
+    --gh-size: 15px;
+  }
+
+  .contribs-wrapper {
+    overflow: hidden;
+    padding: 1rem;
+    border: 1px solid hsl(var(--g-h5) / 50%);
+    border-radius: 3px;
+    background-color: var(--bk);
+    width: max-content;
+    margin: 0 auto;
+  }
+  .contribs {
+    display: grid;
+    grid-template-columns: repeat(var(--gh-cols), var(--gh-size));
+    gap: 2px;
+  }
+  .contrib {
+    transition: background-color 0.5s ease-in-out;
+    height: var(--gh-size);
+    width: var(--gh-size);
+    background-color: var(--gh-c);
+    border-radius: 3px;
+    display: var(--gh-show, none);
+  }
+</style>
+
+<script>
+  function randomIntFromInterval(min: number, max: number) {
+    return Math.floor(Math.random() * (max - min + 1) + min);
+  }
+
+  const grey = 'hsl(var(--g-h5) / 20%)';
+  const colors = [
+    grey,
+    'var(--tk8)',
+    grey,
+    'var(--tk7)',
+    'var(--tk6)',
+    grey,
+    'var(--tk3)',
+  ];
+
+  function setColor(elt: HTMLElement) {
+    const randomIndex = randomIntFromInterval(0, colors.length - 1);
+    elt.style.setProperty('--gh-c', colors[randomIndex]);
+  }
+
+  const elts = document.querySelectorAll<HTMLElement>('.contrib');
+  const wrapper = document.querySelector('.contribs-wrapper');
+
+  window.addEventListener('load', () => {
+    [...elts].forEach(elt => {
+      setColor(elt);
+    });
+  });
+
+  wrapper?.addEventListener('mouseover', startAnimation);
+  wrapper?.addEventListener('mouseout', stopAnimation);
+
+  let intervals = [] as NodeJS.Timeout[];
+
+  function startAnimation() {
+    [...elts].forEach(elt => {
+      const randomInterval = randomIntFromInterval(300, 2000);
+      const interval = setInterval(() => {
+        setColor(elt);
+      }, randomInterval);
+      intervals.push(interval);
+    });
+  }
+
+  function stopAnimation() {
+    intervals.forEach(interval => {
+      clearInterval(interval);
+    });
+    intervals = [];
+  }
+</script>

package/src/components/Home/CardsBlog.astro

@@ -0,0 +1,41 @@
+---
+import Link from '@samuelgomez/astro/components/Link/index.astro';
+import BoxPost from '@samuelgomez/astro/components/BoxPost/index.astro';
+import ChevronRight from '@samuelgomez/astro/icons/ChevronRight.astro';
+import { getCollection } from 'astro:content';
+import LogoSG from '@samuelgomez/astro/icons/LogoSG.astro';
+import { projectAuth } from '@firebase/config';
+const { currentUser } = projectAuth;
+
+let posts = await getCollection('blog');
+
+if (!currentUser) {
+  posts = posts.filter(({ data }) => data.published);
+}
+
+posts = posts
+  .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf())
+  .slice(0, 6);
+---
+
+<section>
+  <header>
+    <LogoSG size="100" />
+    <h2>Derniers articles</h2>
+    <p>Voici les derniers articles de blog sur le développements Front-end.</p>
+  </header>
+  <section>
+    {
+      posts.map(({ slug, data }) => (
+        <BoxPost slug={slug} {...data} heroImage={undefined} category="blog">
+          {data?.description && <p>{data?.description}</p>}
+        </BoxPost>
+      ))
+    }
+  </section>
+  <footer>
+    <Link href="/blog">
+      Voir mes articles Front-end<ChevronRight slot="after-link" />
+    </Link>
+  </footer>
+</section>

package/src/components/Home/CardsCodepen.astro

@@ -0,0 +1,53 @@
+---
+import Codepen from '@samuelgomez/astro/icons/Codepen.astro';
+import Link from '@samuelgomez/astro/components/Link/index.astro';
+import Box from '@samuelgomez/astro/components/Box/index.astro';
+import ChevronRight from '@samuelgomez/astro/icons/ChevronRight.astro';
+import myImage from '@images/codepen-multiple-gradients.webp';
+import myImage2 from '@images/codepen-button-border-gradient.webp';
+
+const cards = [
+  {
+    src: myImage,
+    title: 'Multiple gradients',
+    description: 'Utilisation des radial-gradient CSS',
+    link: 'https://codepen.io/gsam59/full/vYbbXoa',
+  },
+  {
+    src: myImage2,
+    title: 'Button border gradient',
+    description: "Création d'un bordure animée avec un dégradé",
+    link: 'https://codepen.io/gsam59/full/ExpzOqG',
+  },
+  {
+    src: myImage,
+    title: 'Multiple gradients',
+    description: 'Utilisation des radial-gradient CSS',
+    link: 'https://codepen.io/gsam59/full/vYbbXoa',
+  },
+];
+---
+
+<section>
+  <header>
+    <Codepen />
+    <h2>Derniers Codepen</h2>
+    <p>Voici les dernières démos Codepen pour ma veille CSS et HTML</p>
+  </header>
+  <section>
+    {
+      cards.map(({ link, ...card }) => (
+        <Box {...card} titleLevel={3} variant="center">
+          <Link href={link}>
+            Voir la démo <ChevronRight slot="after-link" />
+          </Link>
+        </Box>
+      ))
+    }
+  </section>
+  <footer>
+    <Link href="/about">
+      Voir mes Codepens<ChevronRight slot="after-link" />
+    </Link>
+  </footer>
+</section>

package/src/components/Home/CardsGithub.astro

@@ -0,0 +1,44 @@
+---
+import Github from '@samuelgomez/astro/icons/Github.astro';
+import Link from '@samuelgomez/astro/components/Link/index.astro';
+import BoxPost from '@samuelgomez/astro/components/BoxPost/index.astro';
+import ChevronRight from '@samuelgomez/astro/icons/ChevronRight.astro';
+import GithubContributions from '@samuelgomez/astro/components/GithubContributions/index.astro';
+import { getCollection } from 'astro:content';
+import { projectAuth } from '@firebase/config';
+const { currentUser } = projectAuth;
+
+let posts = await getCollection('work');
+
+if (!currentUser) {
+  posts = posts.filter(({ data }) => data.published);
+}
+
+posts = posts
+  .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf())
+  .slice(0, 6);
+---
+
+<section>
+  <header>
+    <Github />
+    <h2>Derniers projets Open Source</h2>
+    <p>Voici les derniers projets Open Source sur lequels j'ai travaillé.</p>
+    <GithubContributions />
+  </header>
+
+  <section>
+    {
+      posts.map(({ slug, data }) => (
+        <BoxPost slug={slug} {...data} category="work">
+          {data?.description && <p>{data?.description}</p>}
+        </BoxPost>
+      ))
+    }
+  </section>
+  <footer>
+    <Link href="/work">
+      Voir mes projets Open Source<ChevronRight slot="after-link" />
+    </Link>
+  </footer>
+</section>

package/src/components/Img/index.astro

@@ -0,0 +1,28 @@
+---
+import type { ImageMetadata } from 'astro';
+import { Image } from 'astro:assets';
+import { isEmptyObject } from '@samuelgomez/astro/helpers/isEmptyOrNull';
+
+const { src, alt = '' } = Astro.props;
+
+let image = {} as ImageMetadata;
+
+if (Boolean(src)) {
+  const baseImagePath = '/src/assets/images/';
+  const imagePath = `${baseImagePath}${src}`;
+  const imageGlob = `${baseImagePath}*.{jpeg,jpg,png,gif,webp,svg}`;
+
+  const images = import.meta.glob<{ default: ImageMetadata }>(
+    '/src/assets/images/*.{jpeg,jpg,png,gif,webp,svg}'
+  );
+
+  if (!images[imagePath]) {
+    throw new Error(`"${imagePath}" does not exist in glob: "${imageGlob}"`);
+  }
+
+  const { default: imageSrc } = await images[imagePath]();
+  image = imageSrc;
+}
+---
+
+{!isEmptyObject(image) && <Image src={image} alt={alt} quality="max" />}

package/src/components/Link/index.astro

@@ -0,0 +1,33 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+export type Props = HTMLAttributes<'a'>;
+
+const { href = '', ...props } = Astro.props;
+
+const url = new URL(href ?? '', Astro.url);
+const isExternal = url.host !== Astro.url.host;
+const pathname = new URL(Astro.request.url).pathname;
+const isCurrent =
+  (pathname?.startsWith(href?.toString() ?? '') && href?.toString() !== '/') ||
+  (href?.toString() === '/' && pathname === '/');
+
+const content = await Astro.slots.render('default');
+---
+
+<a
+  href={href}
+  aria-current={isCurrent ? 'page' : null}
+  rel={isExternal ? 'noopener' : null}
+  {...props}
+>
+  <slot name="before-link" />
+  {
+    Boolean(content) && (
+      <span>
+        <slot />
+      </span>
+    )
+  }
+  <slot name="after-link" /></a
+>

package/src/components/Nav/NavToggle.astro

@@ -0,0 +1,40 @@
+---
+import Button from '@samuelgomez/astro/components/Button/index.astro';
+
+const { 'aria-controls': ariaControls } = Astro.props;
+---
+
+<Button
+  class="burger"
+  variant="ghost"
+  aria-label="Toggle Navigation"
+  aria-expanded="false"
+  aria-controls={ariaControls}
+>
+  <div aria-hidden="true"></div>
+  <div aria-hidden="true"></div>
+  <div aria-hidden="true"></div>
+</Button>
+
+<script>
+  const main = document.querySelector('main');
+  const footer = document.querySelector('footer');
+  document?.querySelector('.burger')?.addEventListener('click', (e) => {
+    const button = e?.currentTarget as HTMLButtonElement;
+    button.setAttribute(
+      'aria-expanded',
+      `${button?.getAttribute('aria-expanded') === 'false'}`
+    );
+    main?.toggleAttribute('inert');
+    footer?.toggleAttribute('inert');
+  });
+  document?.querySelector('.burger')?.addEventListener('keydown', (e) => {
+    const keyboardEvent = e as KeyboardEvent;
+    const button = e?.currentTarget as HTMLButtonElement;
+    if (keyboardEvent.key === 'Escape') {
+      button.setAttribute('aria-expanded', 'false');
+      main?.removeAttribute('inert');
+      footer?.removeAttribute('inert');
+    }
+  });
+</script>

package/src/components/Nav/index.astro

@@ -0,0 +1,71 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import Link from '@samuelgomez/astro/components/Link/index.astro';
+import { setSlug } from '@samuelgomez/astro/helpers/setSlug';
+import H3 from '@samuelgomez/astro/components/Title/h3.astro';
+
+type Item = {
+  label: string;
+  href: string;
+  admin?: boolean;
+};
+
+export type NavProps = HTMLAttributes<'nav'> & {
+  items?: Item[];
+  label?: string;
+  class?: string;
+  id?: string;
+  mode?: 'horizontal' | 'vertical';
+  ordered?: boolean;
+  title?: string;
+};
+
+const {
+  items = [],
+  label,
+  class: className,
+  id,
+  mode = 'horizontal',
+  ordered = false,
+  title = false,
+  ...navProps
+} = Astro.props as NavProps;
+
+const List = ordered ? 'ol' : 'ul';
+
+const labelId = label ? setSlug(label) : title ? setSlug(title) : null;
+
+const isDev = import.meta.env.DEV;
+---
+
+{
+  Boolean(items.length) && (
+    <>
+      {title && <H3 label={title} noLink />}
+      <nav
+        data-mode={mode}
+        id={id}
+        class={className}
+        aria-labelledby={labelId}
+        {...navProps}
+      >
+        {label && (
+          <span id={labelId} class="sr-only">
+            {label}
+          </span>
+        )}
+
+        <List>
+          {items.map(
+            ({ label, href, admin }) =>
+              (!admin || (admin && isDev)) && (
+                <li>
+                  <Link href={href}>{label}</Link>
+                </li>
+              )
+          )}
+        </List>
+      </nav>
+    </>
+  )
+}

package/src/components/Pagination/PaginationItem.astro

@@ -0,0 +1,51 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import Link from '@samuelgomez/astro/components/Link/index.astro';
+import Button from '@samuelgomez/astro/components/Button/index.astro';
+
+export const ELLIPSIS = '...';
+
+export const itemVariants = {
+  link: 'link',
+  button: 'button',
+};
+
+export type PaginationItemAs = keyof typeof itemVariants;
+
+type Props = HTMLAttributes<'li'> & {
+  page: number | typeof ELLIPSIS;
+  isCurrentPage: boolean;
+  asItem?: PaginationItemAs;
+  href?: string;
+};
+
+const {
+  page,
+  isCurrentPage,
+  'aria-label': ariaLabel,
+  asItem = 'link',
+  class: className,
+  ...restProps
+} = Astro.props;
+---
+
+<li>
+  {
+    page === ELLIPSIS ? (
+      <span aria-label={ariaLabel}>{page}</span>
+    ) : asItem === 'link' ? (
+      <Link aria-label={ariaLabel} {...restProps}>
+        {page}
+      </Link>
+    ) : (
+      <Button
+        variant="reverse"
+        disabled={isCurrentPage || null}
+        aria-label={ariaLabel}
+        {...restProps}
+      >
+        {page}
+      </Button>
+    )
+  }
+</li>

package/src/components/Pagination/index.astro

@@ -0,0 +1,39 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import PaginationItem, { type PaginationItemAs } from './PaginationItem.astro';
+
+type Props = HTMLAttributes<'nav'> & {
+  numberPages: number;
+  currentPage: number;
+  asItem?: PaginationItemAs;
+};
+
+const { numberPages, currentPage, asItem = 'link', ...navProps } = Astro.props;
+
+const items = Array.from({ length: numberPages }, (_, index) => ({
+  page: index + 1,
+  isCurrentPage: index + 1 === currentPage,
+}));
+---
+
+{
+  Boolean(items.length) && (
+    <nav {...navProps} class="rounded-list">
+      <ol>
+        {items.map(({ page }) => (
+          <PaginationItem
+            page={page}
+            isCurrentPage={currentPage === page}
+            href={asItem === 'link' ? `?page=${page}` : undefined}
+            aria-label={
+              currentPage === page
+                ? `Page ${page}, current page`
+                : `Go to page ${page}`
+            }
+            asItem={asItem}
+          />
+        ))}
+      </ol>
+    </nav>
+  )
+}