@samuelgomez/astro 0.1.1 → 0.1.3

package/package.json

@@ -2,7 +2,7 @@
   "name": "@samuelgomez/astro",
   "author": "Samuel Gomez",
   "type": "module",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "exports": {
     "./*": "./src/*"
   },

package/src/components/Accordion/index.astro

@@ -1,29 +1,36 @@
 ---
 import type { HTMLAttributes } from 'astro/types';
 
-export type AccordionProps = HTMLAttributes<'details'>;
+export type AccordionProps = HTMLAttributes<'details'> & {
+  hasIcon?: boolean;
+};
 
-const props = Astro.props as AccordionProps;
+const { hasIcon = true, ...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 class="summary"
+    ><slot name="summary" />{
+      hasIcon && (
+        <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" />
+          </svg>
+        </slot>
+      )
+    }
   </summary>
   <div>
     <slot />

package/src/components/Box/index.astro

@@ -33,13 +33,22 @@ const ariaLabelledBy = title ? setSlug(title) : null;
 const BoxTag = tag ?? ('article' as HTMLTag);
 ---
 
-<BoxTag aria-labelledby={ariaLabelledBy} {...props}>
+<BoxTag
+  aria-labelledby={ariaLabelledBy}
+  itemscope
+  itemtype="http://schema.org/Article"
+  {...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} />}
+    {title && <Title level={titleLevel} label={title} noLink itemprop="name" />}
+    {
+      pubDate && (
+        <FormattedDate date={new Date(pubDate)} itemprop="datePublished" />
+      )
+    }
+    {Boolean(content) && <Fragment set:html={content} itemprop="text" />}
   </WrapperOrNot>
 </BoxTag>

package/src/components/DebugGrid/index.astro

@@ -49,17 +49,17 @@ import Grid from '@samuelgomez/astro/icons/Grid.astro';
     height: 100%;
 
     main {
-      --name-xs: 'under SM 640px';
+      --name-xs: 'xs : < 40rem (640px)';
       --color-bg-cols-xs: var(--pp2);
-      --name-sm: 'sm : 640px to 767px';
+      --name-sm: 'sm : >=40rem (640px)';
       --color-bg-cols-sm: var(--bl2);
-      --name-md: 'md : 768px to 1023px';
+      --name-md: 'md : >= 48rem (768px)';
       --color-bg-cols-md: var(--og2);
-      --name-lg: 'lg : 1024px to 1279px';
+      --name-lg: 'lg : >= 64rem (1024px)';
       --color-bg-cols-lg: var(--gn1);
-      --name-xl: 'xl : 1280px to 1535px';
+      --name-xl: 'xl : >= 80rem (1280px)';
       --color-bg-cols-xl: var(--rd1);
-      --name-2xl: '2xl : over 1535px';
+      --name-2xl: '2xl : >= 96rem (1536px)';
       --color-bg-cols-2xl: var(--tk6);
 
       position: relative;

package/src/components/FormattedDate/index.astro

@@ -1,12 +1,13 @@
 ---
 type Props = {
   date: Date;
+  itemprop?: string;
 };
 
-const { date } = Astro.props;
+const { date, itemprop } = Astro.props;
 ---
 
-<time datetime={date.toISOString()}>
+<time datetime={date.toISOString()} itemprop={itemprop}>
   {
     date.toLocaleDateString('fr-fr', {
       year: 'numeric',

package/src/components/Home/CardsBlog.astro

@@ -1,38 +1,55 @@
 ---
 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 { getCollection, type CollectionEntry } from 'astro:content';
+import GithubContributions from '@samuelgomez/astro/components/GithubContributions/index.astro';
+import LastPostAccordion from '@samuelgomez/astro/components/Home/LastPostAccordion.astro';
 import { projectAuth } from '@firebase/config';
+
 const { currentUser } = projectAuth;
 
-let posts = await getCollection('blog');
+let posts = (await getCollection('blog')) as CollectionEntry<'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);
+let postsLight = posts.map((post) => ({
+  title: post.data.title,
+  slug: post.slug,
+  pubDate: post.data.pubDate,
+  type: post.data.type,
+  image: post.data.heroImage,
+  description: post.data.description,
+  heroImage: post.data.heroImage,
+  alt: post.data.alt,
+}));
+
+// Grouper les posts par catégorie et récupérer le dernier de chaque
+const postsByCategory = Object.groupBy(
+  postsLight,
+  ({ type }) => type || 'uncategorized',
+);
+
+const latestPostsByCategory = Object.values(postsByCategory)
+  .filter((latestsposts) => latestsposts !== undefined)
+  .map(
+    (latestsposts) =>
+      latestsposts.sort((a, b) => b.pubDate.valueOf() - a.pubDate.valueOf())[0],
+  );
 ---
 
 <section>
   <header>
-    <LogoSG size="100" />
     <h2>Derniers articles</h2>
+    <GithubContributions />
     <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>
+  <LastPostAccordion
+    items={latestPostsByCategory}
+    name="lastposts"
+    category="blog"
+  />
   <footer>
     <Link href="/blog">
       Voir mes articles Front-end<ChevronRight slot="after-link" />

package/src/components/Home/LastPostAccordion.astro

@@ -0,0 +1,54 @@
+---
+import Accordion from '@samuelgomez/astro/components/Accordion/index.astro';
+import Title from '@samuelgomez/astro/components/Title/index.astro';
+import Link from '@samuelgomez/astro/components/Link/index.astro';
+import ChevronRight from '@samuelgomez/astro/icons/ChevronRight.astro';
+import FormattedDate from '@samuelgomez/astro/components/FormattedDate/index.astro';
+
+type AccordionVerticalProps = {
+  items: {
+    slug: string;
+    title: string;
+    description?: string;
+    pubDate: Date;
+    type?: string;
+    category?: string;
+  }[];
+  name: string;
+  category: string;
+};
+
+const { items, name, category } = Astro.props as AccordionVerticalProps;
+---
+
+<section>
+  <div>
+    {
+      items.map(({ slug, title, description, pubDate, type }) => (
+        <Accordion
+          name={name}
+          open
+          hasIcon={false}
+          style={`--type-color: var(--${type}-color);`}
+          itemscope
+          itemtype="http://schema.org/Article"
+        >
+          <strong slot="summary" itemprop="genre">
+            {type}
+          </strong>
+          {title && <Title level={3} label={title} noLink itemprop="name" />}
+          {pubDate && (
+            <FormattedDate date={new Date(pubDate)} itemprop="datePublished" />
+          )}
+          <p itemprop="description">{description}</p>
+          {Boolean(slug) && (
+            <Link href={`${category ? `/${category}/${slug}` : `/${slug}`}`}>
+              Voir {title}
+              <ChevronRight slot="after-link" />
+            </Link>
+          )}
+        </Accordion>
+      ))
+    }
+  </div>
+</section>

package/src/components/Link/index.astro

@@ -18,7 +18,8 @@ const content = await Astro.slots.render('default');
 <a
   href={href}
   aria-current={isCurrent ? 'page' : null}
-  rel={isExternal ? 'noopener' : null}
+  rel={isExternal ? 'nofollow noopener' : null}
+  itemprop="url"
   {...props}
 >
   <slot name="before-link" />

package/src/components/Nav/NavToggle.astro

@@ -5,7 +5,6 @@ const { 'aria-controls': ariaControls } = Astro.props;
 ---
 
 <Button
-  class="burger"
   variant="ghost"
   aria-label="Toggle Navigation"
   aria-expanded="false"
@@ -17,9 +16,12 @@ const { 'aria-controls': ariaControls } = Astro.props;
 </Button>
 
 <script>
-  const main = document.querySelector('main');
-  const footer = document.querySelector('footer');
-  document?.querySelector('.burger')?.addEventListener('click', (e) => {
+  const main = document.querySelector('body > main');
+  const footer = document.querySelector('body > footer');
+  const burger = document.querySelector(
+    'body > header > button[aria-expanded]'
+  );
+  burger?.addEventListener('click', (e) => {
     const button = e?.currentTarget as HTMLButtonElement;
     button.setAttribute(
       'aria-expanded',
@@ -28,7 +30,7 @@ const { 'aria-controls': ariaControls } = Astro.props;
     main?.toggleAttribute('inert');
     footer?.toggleAttribute('inert');
   });
-  document?.querySelector('.burger')?.addEventListener('keydown', (e) => {
+  burger?.addEventListener('keydown', (e) => {
     const keyboardEvent = e as KeyboardEvent;
     const button = e?.currentTarget as HTMLButtonElement;
     if (keyboardEvent.key === 'Escape') {

package/src/components/Social/index.astro

@@ -4,19 +4,38 @@ 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';
+
+const {
+  github = false,
+  linkedin = false,
+  twitter = false,
+  instagram = false,
+} = Astro.props;
 ---
 
-<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>
+{
+  (github || linkedin || twitter || instagram) && (
+    <menu>
+      {github && (
+        <Link href="https://github.com/samuel-gomez">
+          <Github slot="after-link" title="Github de Samuel Gomez" />
+        </Link>
+      )}
+      {linkedin && (
+        <Link href="https://www.linkedin.com/in/samuel-gomez-developpeur-web/">
+          <Linkedin slot="after-link" title="Linkedin de Samuel Gomez" />
+        </Link>
+      )}
+      {twitter && (
+        <Link href="https://twitter.com/gamuez">
+          <Twitter slot="after-link" title="Twitter de Samuel Gomez" />
+        </Link>
+      )}
+      {instagram && (
+        <Link href="https://www.instagram.com/gamuez_art/">
+          <Instagram slot="after-link" title="Instagram de Samuel Gomez" />
+        </Link>
+      )}
+    </menu>
+  )
+}

package/src/components/Title/index.astro

@@ -11,9 +11,17 @@ type Props = {
   level?: titleLevel;
   noLink?: boolean;
   id?: string;
+  itemprop?: string;
 };
 
-const { label, level = 1, noLink, id, ...props } = Astro.props;
+const {
+  label,
+  level = 1,
+  noLink,
+  id,
+  itemprop = 'headline',
+  ...props
+} = Astro.props;
 
 const htmlLabel = await Astro.slots.render('default');
 
@@ -24,7 +32,7 @@ const title = label || htmlLabel.toString();
 const Heading = `h${level}` as HTMLTag;
 ---
 
-<Heading {...props} id={idHeading}>
+<Heading {...props} id={idHeading} itemprop={itemprop}>
   {
     !noLink && idHeading && (
       <Link href={`#${idHeading}`}>

package/src/components/layout/Footer.astro

@@ -1,3 +1,13 @@
+---
+const datetime = new Date();
+const formattedDate = datetime.toISOString().split('T')[0];
+const year = datetime.getFullYear();
+---
+
 <footer>
-  <p>&copy; Samuel Gomez 2024</p>
+  <p>
+    &copy; Samuel Gomez <time datetime={formattedDate} itemprop="copyrightYear"
+      >{year}</time
+    >
+  </p>
 </footer>

package/src/components/layout/Header.astro

@@ -8,10 +8,11 @@ import { getEntry } from 'astro:content';
 import { setSlug } from '@samuelgomez/astro/helpers/setSlug';
 
 const mainMenu = await getEntry('menu', 'main');
-const { userEmail } = Astro.locals;
 
 const LABEL = 'Menu de navigation principal';
 const ID = `id-${setSlug(LABEL)}`;
+
+const { userEmail } = Astro.props;
 ---
 
 <header>

package/src/icons/LogoSG.astro

@@ -4,9 +4,20 @@ type Props = {
   size?: string;
   fill?: string;
   opacity?: string;
+  startColor?: string;
+  endColor?: string;
 };
+
 const FILL = "url('#logoSG-gradient')";
-const { title, size = '40', fill = FILL, opacity = '1' } = Astro.props;
+const {
+  title,
+  size = '32',
+  fill = FILL,
+  opacity = '1',
+  startColor = '#7A5FFF',
+  endColor = '#01FF89',
+} = Astro.props;
+
 const titleId = Boolean(title) ? `${crypto.randomUUID()}` : null;
 ---
 
@@ -42,19 +53,19 @@ const titleId = Boolean(title) ? `${crypto.randomUUID()}` : null;
           x2="50%"
           y2="100%"
         >
-          <stop offset="0%" stop-color="#7A5FFF">
+          <stop offset="0%" stop-color={startColor}>
             <animate
               attributeName="stop-color"
-              values="#7A5FFF; #01FF89; #7A5FFF"
+              values={`${startColor}; ${endColor}; ${startColor}`}
               dur="4s"
               repeatCount="indefinite"
             />
           </stop>
 
-          <stop offset="100%" stop-color="#01FF89">
+          <stop offset="100%" stop-color={endColor}>
             <animate
               attributeName="stop-color"
-              values="#01FF89; #7A5FFF; #01FF89"
+              values={`${endColor}; ${startColor}; ${endColor}`}
               dur="4s"
               repeatCount="indefinite"
             />