@samuelgomez/astro 0.1.0

package/README.md

@@ -0,0 +1,54 @@
+# Astro Starter Kit: Basics
+
+```sh
+npm create astro@latest -- --template basics
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+/
+├── public/
+│   └── favicon.svg
+├── src/
+│   ├── components/
+│   │   └── Card.astro
+│   ├── layouts/
+│   │   └── Layout.astro
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@samuelgomez/astro",
+  "author": "Samuel Gomez",
+  "type": "module",
+  "version": "0.1.0",
+  "exports": {
+    "./*": "./src/*"
+  },
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "dev": "astro --config ./config/astro.config.mjs dev",
+    "live": "astro --config ./config/astro.config.mjs dev --host",
+    "build": "astro --config ./config/astro.config.mjs build",
+    "check": "astro --config ./config/astro.config.mjs check",
+    "preview": "astro --config ./config/astro.config.mjs preview",
+    "astro": "astro",
+    "prettier": "prettier ./src --plugin=prettier-plugin-astro --config ./config/.prettierrc.mjs",
+    "prettier:fix": "npm run prettier -- --write",
+    "stylelint": "stylelint --ignore-path .gitignore \"**/*.css\" --config ./config/.stylelintrc.json",
+    "stylelint:fix": "npm run stylelint -- --fix",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/mdx": "^4.3.1",
+    "astro": "^5.12.1"
+  },
+  "devDependencies": {
+    "html-format": "^1.1.7",
+    "prettier": "^3.6.2",
+    "prettier-plugin-astro": "^0.14.1",
+    "stylelint": "^16.22.0",
+    "stylelint-config-standard": "^37.0.0",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/Accordion/index.astro

@@ -0,0 +1,31 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+export type AccordionProps = HTMLAttributes<'details'>;
+
+const props = Astro.props as AccordionProps;
+---
+
+<details {...props}>
+  <summary
+    ><slot name="summary" /><slot name="icon"
+      ><svg
+        class="chevron"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="feather feather-chevron-down"
+        ><polyline points="6 9 12 15 18 9"></polyline></svg
+      ></slot
+    >
+  </summary>
+  <div>
+    <slot />
+  </div>
+</details>

package/src/components/Alert/AlertDanger.astro

@@ -0,0 +1,12 @@
+---
+import { type BoxProps } from '@samuelgomez/astro/components/Box/index.astro';
+import Cross from '@samuelgomez/astro/icons/Cross.astro';
+import Alert from './index.astro';
+
+const { title = 'Erreur', ...props } = Astro.props as BoxProps;
+---
+
+<Alert aria-roledescription="error" title={title} {...props}>
+  <Cross slot="before-icon" />
+  <slot />
+</Alert>

package/src/components/Alert/AlertInfo.astro

@@ -0,0 +1,12 @@
+---
+import { type BoxProps } from '@samuelgomez/astro/components/Box/index.astro';
+import Alert from './index.astro';
+import Info from '@samuelgomez/astro/icons/Info.astro';
+
+const { title = 'Remarque', ...props } = Astro.props as BoxProps;
+---
+
+<Alert aria-roledescription="info" title={title} {...props}>
+  <Info slot="before-icon" />
+  <slot />
+</Alert>

package/src/components/Alert/AlertSuccess.astro

@@ -0,0 +1,12 @@
+---
+import { type BoxProps } from '@samuelgomez/astro/components/Box/index.astro';
+import Alert from './index.astro';
+import Check from '@samuelgomez/astro/icons/Check.astro';
+
+const { title = 'Succès', ...props } = Astro.props as BoxProps;
+---
+
+<Alert aria-roledescription="success" title={title} {...props}>
+  <Check slot="before-icon" />
+  <slot />
+</Alert>

package/src/components/Alert/AlertWarning.astro

@@ -0,0 +1,12 @@
+---
+import { type BoxProps } from '@samuelgomez/astro/components/Box/index.astro';
+import Alert from './index.astro';
+import Info from '@samuelgomez/astro/icons/Info.astro';
+
+const { title = 'Attention', ...props } = Astro.props as BoxProps;
+---
+
+<Alert aria-roledescription="warning" title={title} {...props}>
+  <Info slot="before-icon" />
+  <slot />
+</Alert>

package/src/components/Alert/index.astro

@@ -0,0 +1,10 @@
+---
+import Box, { type BoxProps } from '@samuelgomez/astro/components/Box/index.astro';
+
+const props = Astro.props as BoxProps;
+---
+
+<Box role="alert" {...props}>
+  <slot name="before-icon" slot="before-icon" />
+  <slot />
+</Box>

package/src/components/Badge/BadgeDanger.astro

@@ -0,0 +1,15 @@
+---
+import { type BoxProps } from '@samuelgomez/astro/components/Box/index.astro';
+import Badge from './index.astro';
+import Cross from '@samuelgomez/astro/icons/Cross.astro';
+
+type BadgeProps = BoxProps & {
+  hasIcon?: boolean;
+};
+
+const { hasIcon = true, ...props } = Astro.props as BadgeProps;
+---
+
+<Badge aria-roledescription="error" {...props}>
+  {hasIcon && <Cross slot="before-icon" />}
+</Badge>

package/src/components/Badge/BadgeInfo.astro

@@ -0,0 +1,15 @@
+---
+import { type BoxProps } from '@samuelgomez/astro/components/Box/index.astro';
+import Badge from './index.astro';
+import Info from '@samuelgomez/astro/icons/Info.astro';
+
+type BadgeProps = BoxProps & {
+  hasIcon?: boolean;
+};
+
+const { hasIcon = true, ...props } = Astro.props as BadgeProps;
+---
+
+<Badge aria-roledescription="info" {...props}>
+  {hasIcon && <Info slot="before-icon" />}
+</Badge>

package/src/components/Badge/BadgeSuccess.astro

@@ -0,0 +1,15 @@
+---
+import { type BoxProps } from '@samuelgomez/astro/components/Box/index.astro';
+import Badge from './index.astro';
+import Check from '@samuelgomez/astro/icons/Check.astro';
+
+type BadgeProps = BoxProps & {
+  hasIcon?: boolean;
+};
+
+const { hasIcon = true, ...props } = Astro.props as BadgeProps;
+---
+
+<Badge aria-roledescription="success" {...props}>
+  {hasIcon && <Check slot="before-icon" />}
+</Badge>

package/src/components/Badge/BadgeWarning.astro

@@ -0,0 +1,15 @@
+---
+import { type BoxProps } from '@samuelgomez/astro/components/Box/index.astro';
+import Badge from './index.astro';
+import Info from '@samuelgomez/astro/icons/Info.astro';
+
+type BadgeProps = BoxProps & {
+  hasIcon?: boolean;
+};
+
+const { hasIcon = true, ...props } = Astro.props as BadgeProps;
+---
+
+<Badge aria-roledescription="warning" {...props}>
+  {hasIcon && <Info slot="before-icon" />}
+</Badge>

package/src/components/Badge/index.astro

@@ -0,0 +1,9 @@
+---
+import Box, { type BoxProps } from '@samuelgomez/astro/components/Box/index.astro';
+
+const props = Astro.props as BoxProps;
+---
+
+<Box role="status" {...props}>
+  <slot name="before-icon" slot="before-icon" />
+</Box>

package/src/components/Box/index.astro

@@ -0,0 +1,45 @@
+---
+import type { HTMLTag, HTMLAttributes } from 'astro/types';
+import Title from '@samuelgomez/astro/components/Title/index.astro';
+import FormattedDate from '@samuelgomez/astro/components/FormattedDate/index.astro';
+import WrapperOrNot from '@samuelgomez/astro/components/helpers/WrapperOrNot/index.astro';
+import { setSlug } from '@samuelgomez/astro/helpers/setSlug';
+
+type Ttag = 'article' | 'aside' | 'div' | 'section' | 'header' | 'footer';
+
+export type BoxProps = HTMLAttributes<Ttag> & {
+  title?: string;
+  description?: string;
+  tag?: Ttag;
+  class?: string;
+  titleLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+  pubDate?: string;
+};
+
+const {
+  title,
+  description,
+  class: className,
+  tag = 'article',
+  titleLevel = 4,
+  pubDate,
+  ...props
+} = Astro.props as BoxProps;
+
+const content = await Astro.slots.render('default');
+
+const ariaLabelledBy = title ? setSlug(title) : null;
+
+const BoxTag = tag ?? ('article' as HTMLTag);
+---
+
+<BoxTag aria-labelledby={ariaLabelledBy} {...props}>
+  <slot name="before-icon" />
+
+  <WrapperOrNot condition={Astro.slots.has('before-icon') && Boolean(content)}>
+    <slot name="image" />
+    {title && <Title level={titleLevel} label={title} noLink />}
+    {pubDate && <FormattedDate date={new Date(pubDate)} />}
+    {Boolean(content) && <Fragment set:html={content} />}
+  </WrapperOrNot>
+</BoxTag>

package/src/components/BoxPost/index.astro

@@ -0,0 +1,66 @@
+---
+import type { ImageMetadata } from 'astro';
+import { Image } from 'astro:assets';
+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 { isEmptyObject } from '@samuelgomez/astro/helpers/isEmptyOrNull';
+
+const {
+  title,
+  slug,
+  pubDate,
+  heroImage,
+  alt = '',
+  type = '',
+  category = '',
+} = Astro.props;
+
+let image = {} as ImageMetadata;
+
+if (Boolean(heroImage)) {
+  const baseImagePath = '/src/assets/images/';
+  const imagePath = `${baseImagePath}${heroImage}`;
+  const imageGlob = `${baseImagePath}*.{jpeg,jpg,png,gif,webp}`;
+
+  const images = import.meta.glob<{ default: ImageMetadata }>(
+    '/src/assets/images/*.{jpeg,jpg,png,gif,webp}'
+  );
+
+  if (!images[imagePath]) {
+    throw new Error(`"${imagePath}" does not exist in glob: "${imageGlob}"`);
+  }
+
+  const { default: imageSrc } = await images[imagePath]();
+  image = imageSrc;
+}
+
+const href = `${category ? `/${category}/${slug}` : `/${slug}`}`;
+
+---
+
+<Box title={title} titleLevel={3} pubDate={pubDate}>
+  {
+    !isEmptyObject(image) && (
+      <figure data-type={Boolean(type) ? type : null} slot="image">
+        <Image
+          src={image}
+          alt=""
+          width={image.width / 2}
+          quality="max"
+          aria-hidden="true"
+        />
+        {Boolean(alt) && <figcaption>{alt}</figcaption>}
+      </figure>
+    )
+  }
+  <slot />
+  {
+    Boolean(slug) && (
+      <Link href={href}>
+        Voir {title}
+        <ChevronRight slot="after-link" />
+      </Link>
+    )
+  }
+</Box>

package/src/components/Button/index.astro

@@ -0,0 +1,35 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Permutations } from 'types/Permutations';
+import { setClassVariant } from '@samuelgomez/astro/helpers/setVariants';
+
+type Tvariant = Permutations<
+  'ghost' | 'danger' | 'success' | 'warning' | 'reverse' | 'small'
+>;
+
+export type ButtonProps = HTMLAttributes<'button'> & {
+  variant?: Tvariant;
+};
+
+const {
+  type = 'button',
+  variant,
+  class: className,
+  disabled,
+  ...props
+} = Astro.props as ButtonProps;
+
+const newClass = setClassVariant({ className, variant });
+---
+
+<button
+  class={newClass ?? null}
+  type={type}
+  disabled={disabled}
+  aria-disabled={disabled ? 'true' : null}
+  {...props}
+>
+  <slot name="before-button" />
+  <slot />
+  <slot name="after-button" />
+</button>

package/src/components/Caniuse/index.astro

@@ -0,0 +1,24 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import Dialog from '@samuelgomez/astro/components/Dialog/index.astro';
+import Button from '@samuelgomez/astro/components/Button/index.astro';
+
+export type Props = HTMLAttributes<'dialog'> & {
+  property?: string;
+};
+
+const { id, property, ...props } = Astro.props;
+---
+
+<Dialog id={`caniuse-${id}`} openerVariant="small" {...props}>
+  <Fragment slot="opener">Voir les compatibilités</Fragment>
+  <Fragment slot="title">Compatibilités navigateur</Fragment>
+  <iframe
+    slot="content"
+    src={`https://caniuse.com/${property}`}
+    allowfullscreen="true"
+    loading="lazy"></iframe>
+  <Fragment slot="footer-content"
+    ><Button variant="small" data-action="close">Fermer</Button>
+  </Fragment>
+</Dialog>

package/src/components/Codepen/index.astro

@@ -0,0 +1,25 @@
+---
+type Props = {
+  id: string;
+  title: string;
+  style?: string;
+  tabs?: string;
+  minHeight?: string;
+};
+
+const {
+  id,
+  title,
+  style = 'width: 100%;color: white; font-weight: bold; aspect-ratio:2;',
+  tabs = 'result',
+  minHeight = '45svh',
+} = Astro.props;
+---
+
+<iframe
+  style={`${style}min-height: ${minHeight};`}
+  title={title}
+  src={`https://codepen.io/gsam59/embed/${id}?default-tab=${tabs}`}
+  loading="lazy"
+  allowtransparency="true"
+  allowfullscreen="true"></iframe>

package/src/components/DebugGrid/index.astro

@@ -0,0 +1,100 @@
+---
+import Grid from '@samuelgomez/astro/icons/Grid.astro';
+---
+
+<div class="debug-grid">
+  <main>
+    {[...Array(12).keys()].map(() => <div class="cols" />)}
+  </main>
+</div>
+<label>
+  <span id="debuggrid-label">Afficher ou masquer les grilles</span>
+  <input type="checkbox" name="debuggrid" aria-labelledby="debuggrid-label" />
+  <Grid />
+</label>
+
+<style>
+  label:has([name='debuggrid']) {
+    position: fixed;
+    z-index: 2;
+    inset: auto auto 0.5rem 0.5rem;
+    z-index: 2;
+    background-color: var(--c);
+    border-radius: var(--rounded);
+    padding: var(--p-2);
+    color: var(--bgc);
+    &:hover,
+    &:has(> :checked) {
+      color: var(--bl6);
+    }
+
+    > span {
+      display: none;
+    }
+    input {
+      position: absolute;
+      opacity: 0;
+      width: 0;
+      height: 0;
+      pointer-events: none;
+    }
+  }
+
+  .debug-grid {
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: none;
+    width: 100%;
+    height: 100%;
+
+    main {
+      --name-xs: 'under SM 640px';
+      --color-bg-cols-xs: var(--pp2);
+      --name-sm: 'sm : 640px to 767px';
+      --color-bg-cols-sm: var(--bl2);
+      --name-md: 'md : 768px to 1023px';
+      --color-bg-cols-md: var(--og2);
+      --name-lg: 'lg : 1024px to 1279px';
+      --color-bg-cols-lg: var(--gn1);
+      --name-xl: 'xl : 1280px to 1535px';
+      --color-bg-cols-xl: var(--rd1);
+      --name-2xl: '2xl : over 1535px';
+      --color-bg-cols-2xl: var(--tk6);
+
+      position: relative;
+      height: 100%;
+      opacity: 0.5;
+
+      &::before {
+        position: absolute;
+        top: 50%;
+        left: 0.5vw;
+        width: 100%;
+        height: 100%;
+        font-size: clamp(0.5rem, 4vw, 2.5rem);
+        text-align: center;
+        text-orientation: mixed;
+        writing-mode: vertical-rl;
+        color: color-mix(in hsl, var(--color-bg-cols), rgb(0, 0, 0) 20%);
+        transform: translate(0, -50%);
+        transition: color 300ms linear 200ms;
+        content: var(--name);
+      }
+
+      .cols {
+        display: block;
+        height: 100%;
+        grid-column: span 1;
+        background-color: var(--color-bg-cols);
+        transition: background-color 300ms linear 200ms;
+      }
+    }
+  }
+
+  body:has([name='debuggrid']:checked) {
+    .debug-grid {
+      display: block;
+    }
+  }
+</style>

package/src/components/Demo/Demoui.astro

@@ -0,0 +1,13 @@
+---
+import Demo from './index.astro';
+import beautify from 'html-format';
+
+const htmlRaw = await Astro.slots.render('default');
+const html = beautify(htmlRaw);
+const { jsx, wrapperTag } = Astro.props;
+---
+
+<Demo wrapperTag={wrapperTag}>
+  <Fragment slot="html" set:html={html} />
+  <Fragment slot="code" set:html={jsx} />
+</Demo>