Skip to content

CHANGELOG.md

Latest commit

 

History

History
804 lines (559 loc) · 34.9 KB

CHANGELOG.md

File metadata and controls

804 lines (559 loc) · 34.9 KB

apeu

2.1.1

Patch Changes

  • 1fb74d1: Fixes a regression where the build was failing because of environment variables.

    In some context such as Docker, the build was failing because environment variables were validated too early. The fix is to revert the changes related to CONTENT_PATH. If you need a different content path, you must pass it before the dev or build command:

    CONTENT_PATH="./custom-directory" pnpm dev

2.1.0

Minor Changes

  • b31f96a: Uses Satori to generate OpenGraph images.

    The astro-og-canvas package is great, but I'd like to be able to customize a bit more the OpenGraph image in the future. So, this replaces it with satori-astro and satori-html. For now, the generated images should remain essentially the same.

  • e87b10f: Switches to Astro built-in type-safe environment variables

    Previously, some environment variables such as the SMTP credentials were using process.env. This required to use tools like dotenvx to load them from a .env file. Using Astro built-in features, they are now directly loaded which should improve DX. This also means providing those environment variables is now required and a build will fail if they are not set.

  • 10e2011: Enables Astro's experimental queue rendering.

  • dca9396: Upgrades to Astro v6 and Vite v7.

  • 10e2011: Enables Astro's experimental Rust compiler.

Patch Changes

  • b31f96a: Uses Bunny as font provider instead of Fontsource.

    Satori doesn't support .woff2 fonts and Fontsource doesn't seem to support Inter in .woff format. To fix this issue, I swap the font provider to Bunny.

  • b31f96a: Uses .woff fonts instead of .woff2.

    Satori doesn't support .woff2 fonts. To avoid downloading the Inter font twice, I swapped the default font format (.woff2) with .woff. This is only effective for the regular font, not for the monospace font.

  • b31f96a: Uses the SEO description for OpenGraph images when available.

    The OG images used the regular description, the one that is generally used for display on the website. Those descriptions are not always suited to display on external websites. To fix that, the OG images now use the SEO description when available.

2.0.5

Patch Changes

  • 44b624e: Adds Bluesky, WhatsApp, and email as social media links allowed for authors

    Support for those social media was already configured but the authors collection was missing the matching properties in socialMedia. If you use any of those social media, you can now update your author file to include them:

    {
  "firstName": "John",
  "lastName": "Doe",
  "socialMedia": {
+    "bluesky": "https://bsky.app/profile/your.handle",
+    "email": "mailto:dontSpamMe@example.test",
    "github": "https://github.com/YourHandle",
+    "whatsapp": "whatever-the-format-is",
  },
  /* ... */
}

2.0.4

Patch Changes

  • cafc35f: Replaces outdated Open Graph images.

    The website background and logo have been updated, but not the files used to generate the Open Graph images.

2.0.3

Patch Changes

  • 91abbc9: Removes an unwanted spacing between grid items used in contents.

    A CSS rule wasn't smart enough to detect if a grid was being used. This resulted in extra spacing between grid elements used in a page's content.

2.0.2

Patch Changes

  • 87241c1: Refines layout by adjusting spacings and sizes.

  • 6f5c169: Prevents the search form button to be misaligned on larger viewports.

  • 87241c1: Improves the cover rendering on content pages.

  • 87241c1: Cleans up unused code that should have been removed in v2.

    In v2, the disconnected slot has been transferred from the page layout to the ContentPage component but this is no longer used and should have been removed.

  • e4ce9fe: Fixes cards ordering on listing pages.

2.0.1

Patch Changes

  • 54f960d: Fixes styles on the search page view.

    The search-view.astro view no longer uses CSS Cascade Layers because, with them, Pagefind overrides the custom styles.

  • b794178: Hides the search form when JavaScript is disabled.

    The search form requires JavaScript to work. To prevent any frustration and to be consistent with how themes and language controls are rendered, the search form is no longer visible in the navbar when JavaScript is disabled.

  • 0ab0667: Fixes inconsistent use of inline borders on small viewports.

    The Card can now adapt its styles based on the viewport or the container width preventing inline borders to be visible when edge-to-edge style is expected.

  • c393d58: Improves focus styles on various elements.

2.0.0

Major Changes

  • 264c079: Divides the pages collection in two: pages and index.pages.

    The pages collection contained both regular pages and index pages. This was making index.md page identification harder. To work around that issue, the collection has been divided in two: pages and index.pages.

    If you were using the previous behavior to fetch all the pages at once, you'll need to update your queries:

    -await queryCollection("pages");
+await queryCollection(["index.pages", "pages"]);

    If you were requesting a single page while targeting an index page, you'll need to update the collection name:

    -await queryEntry("pages", "directory-name");
+await queryEntry("index.pages", "directory-name");

  • 5466b80: Drops support for Node v18.

    Node v18 reaches end of life on 2025-04-30 and some other packages, like nanostores, have already dropped its supports. A version greater or equal to v20 is now required.

  • e225f9d: Refactors CSS tokens.

    This is mostly an internal change but if you were extending this template using existing CSS tokens, you might need to update your project. All subtle and faded color variants have been replaced with low and high. In addition, some colors have been removed or replaced with new colors.

    Please check your styles and make the necessary changes. For example:

    - color: var(--color-black-subtle);
+ color: var(--color-slate-high);
- color: var(--color-black-faded);
+ color: var(--color-slate-low);

  • 264c079: Replaces the route helper from useI18n with useRouting.

    Routes are no longer handled statically in a translation file but dynamically in an index built from data provided in your content directory. Because of that, the route property has been removed from the object returned by useI18n().

    If you need to display a route in your templates, you'll need to import and use the useRouting() utility instead. This returns an object containing a routeById() helper that uses a similar API than route().

    ---
import { useI18n } from "../../../services/i18n";
+import { useRouting } from "../../../services/routing";

-const { locale, route, translate } = useI18n(Astro.currentLocale);
+const { locale, translate } = useI18n(Astro.currentLocale);
+const { routeById } = await useRouting(locale);
+const homeRoute = routeById("home");
+const blogRoute = routeById("blog");

const mainNav = [
  {
    icon: "home",
    iconSize: 28,
-    label: translate("page.home.title"),
+    label: homeRoute.label,
-    url: route("home"),
+    path: homeRoute.path,
  },
  {
    icon: "blog",
    iconSize: 28,
-    label: translate("page.blog.title"),
+    label: blogRoute.label,
-    url: route("blog"),
+    path: blogRoute.path,
  },
];
---

    The route label is based on the title you defined in your Markdown file. If this title is not suitable as a route label, you can continue to use your own label.

  • e225f9d: Adds support for CSS Cascade Layers.

    This projects now use Cascade Layers and provide the following layers:

    @layer reset, themes, tokens, base, atoms, molecules, organisms, layout, views, utils;

  • 264c079: Reverts ids generation of collection entries to Astro default behavior.

    The routing logic changes has introduced a breaking change regarding generated ids. Previously, some ids were rewritten to be able to use shorter references in the frontmatter. The references ids now use the default format generated by Astro.

    If you were relying on references (category, tags or i18n) in your content files, you'll need to update them to use the "full path" instead of the shorten one:

    ---
title: Post 1
description: "This is an excerpt of post 1."
publishedOn: "2024-11-10T17:32"
-category: "en/category1"
+category: "en/blog/categories/category1"
authors:
  - "armand-philippot"
tags:
-  - "en/tag1"
+  - "en/tags/tag1"
i18n:
-  fr: fr//post1
+  fr: fr/blog/posts/post1
seo:
  title: "Post 1"
  description: "This is a description used by search engines."
---

  • 7099af0: Replaces the component-stories integration with a new astro-stories integration.

    This is a breaking change related to stories writing. Instead of using .astro files, you should now write your stories using MDX. In addition, you no longer need to write the stories indexes yourself! This improves the authoring experience and offers more flexibility to store the stories.

    Your component/view stories can stay in the same place as before but you'll need to convert them to MDX. The following frontmatter properties are supported:

    • title: to define the title of your story
    • wrapInLayout: false: to prevent the story to be wrapped in a layout, useful for stories related to the global layout.
    • wrapInContentPage: false: to prevent the story to be wrapped in a ContentPage component, useful for stories related to page layouts.

    If you had stories in src/pages/_dev_design-system, you'll need to convert them to MDX and to move them to src/stories.

    When writing a story, you can use .stories.mdx as extension to keep the file alongside your components and views, or use .mdx in a stories directory in your source directory. Any stories directory will be automatically stripped, except if you have a component in a directory named stories.

  • 264c079: Adds a permaslug frontmatter property to localize the routes.

    This project no longer localize routes in French for you. A permaslug property has been introduced to let you define the translation by yourself in the frontmatter of your content files.

    If you were relying on automatic translation for your routes, you'll need to update your files. For example, given a route /en/blog/posts/post-1 previously localized in French as /blog/articles/post-1, you will need to update your content/fr/blog/posts/index.mdx file to include a permaslug:

    ---
title: Articles
description: "C'est un extrait de la page d'index des articles du blog."
publishedOn: "2024-12-19T14:51"
seo:
  title: "Articles"
  description: "Il s'agit d'une description utilisée par les moteurs de recherche."
i18n:
  en: "en/blog/posts"
+permaslug: "articles"
---

    Then, if you want to also localize post-1, you can either translate the filename or use a permaslug in your content/fr/blog/posts/post-1.mdx file (e.g. permaslug: article-1).

Minor Changes

  • 80ad823: Prefixes local storage variables to avoid conflicts in dev mode.

    If users have already set a theme for the website or code blocks, they will need to configure it again due to the prefix change.

  • 7a5cba1: Moves some helpers from utils to services and renames some of them.

    Those changes are mostly internals and shouldn't break anything, but if you were using this project as a template you might be interested in the following changes because of the paths update.

    Some helpers were defined in src/utils and have been moved to src/services to make the distinction between generic and feature-specific helpers clearer. This will also make splitting the files easier if needed in the future when a feature grows.

    If you had templates relying on those helpers, you need to update your code.

    For example, feeds and i18n helpers were previously located respectively in src/utils/feeds and src/utils/i18n.ts. They have been moved to src/services/feeds and src/services/i18n:

    ---
-import { getFeedLanguageFromLocale, getRSSItemsFromEntries } from "../utils/feeds";
-import { isAvailableLanguage, useI18n, type AvailableLanguage } from "../utils/i18n";
-import { getWebsiteUrl } from "../utils/url";
+import { getFeedLanguageFromLocale, getRSSItemsFromEntries } from "../services/feeds";
+import { useI18n } from "../services/i18n";
+import type { AvailableLocale } from "../types/tokens";
+import { WEBSITE_URL } from "../utils/constants";
+import { isAvailableLocale } from "../utils/type-guards";
---

  • 7099af0: Adds new components: SelectField, Section, and CodePreview.

  • e225f9d: Replaces some components.

    This is mostly an internal change but if you were extending this template you might need to update your code. This replaces:

    • LanguagePicker with LanguageSelect
    • SkipTo with SkipLink
    • Switch with ThemeSwitch
    • ThemeSetting with ThemeSelect
    • CollectionCard with a more generic named component PreviewCard
    • CollectionMeta with a more generic component named Meta
    • Page with ContentPage and ListingPage

  • 264c079: Renames blogPosts and blogCategories collections respectively to blog.posts and blog.categories.

    This project already uses a dot separated format for tokens (i18n, icons). Collections names are also tokens and should follow the same pattern. This change will also help simplify some development logic.

  • e225f9d: Replaces themes colors.

    The colors of both themes have been updated. The most noticeable changes are related to the Dark theme which is darker than before. This should also improve the rendering when using desktop programs such as Redshift.

  • e225f9d: Removes some components: Box, Item, Fieldset, Legend, Heading, License, BackTo, NavItem, NavList, Popover, RadioItem, RadioGroup, Toggle, SvgFiltersProvider, PageLayout.

    This changes is mostly internal, but if you were using this project as template you might need to add back those components or update your code.

  • ad1cd30: Enables Astro experimental fonts API to manage fonts.

    This change relies on an experimental API and because of that, a minor seems more appropriate.

    Note that the fallback solution used when fonts cannot be loaded might be different from the one used previously.

  • a180ed8: Adds View Transitions to avoid full-page navigation refresh.

    When navigating through the website, the default full-page navigation refresh was used. Because some people doesn't like that behavior, view transitions have been enabled. This uses Astro's ClientRouter because it offers an easy way to provide a fallback for browser that doesn't support well the view transitions.

Patch Changes

  • 63bedbb: Fixes a performance issue on mobile devices caused by SVG filters.

    The SVG filters inlined in the HTML was causing different performance issue on mobile devices. With this fix:

    • Firefox should no longer struggle to display the text while scrolling
    • Chrome should no longer

  • e225f9d: Prevents slot from being rendered as an HTML attribute.

    When using the spread syntax, sometimes the Astro's slot attribute were being rendered as an HTML attribute. This fixes this behavior and cleans the HTML output.

  • e7e3eb1: Fixes the favicon rendering in Firefox quick links and, hopefully, in Google search results by increasing the size of the rounded corners of the logo.

1.0.5

Patch Changes

  • 4b1ea0d: Fixes the BreadcrumbList format used in Schema.org structured data.

1.0.4

Patch Changes

  • 1099999: Enables the customization of the cover position for content collections that supports a cover.

    A new position property is available in the cover object for content collections accepting a cover. The value should match the tokens supported by the CSS object-position property (only strings like top, left, etc. are supported).

  • 1099999: Removes alt text for decorative images.

    The collections entries using a cover no longer accepts an alt property to define the alternative text of the images. Those are purely decorative so they shouldn't be announced to screen readers.

  • a49c607: Fixes an issue where pagination styles was overridden by other styles in production.

    The CSS order seems a bit inconsistent between development and production modes. The style for pagination links was not correctly applied to the built website.

  • 1099999: Readjusts the cover dimensions.

  • 6165c62: Removes links pointing to the current page.

    Some pages (tags, categories) was linking to themselves. This removes those useless links.

1.0.3

Patch Changes

  • 076b0ad: Fixes an issue where OG images could be malformed because of a trailing slash in the path.

1.0.2

Patch Changes

  • 9f87ca4: Fixes an issue where CONTENT_PATH was no longer defined when using this project as a Git submodule.

1.0.1

Patch Changes

  • f048cca: Removes the notes from the global feed.

    I'm using them as "personal" notes so I think they shouldn't be in the feed. If someone wants to subscribe to my notes, it's still possible using the individual feed.

  • 20e4205: Fixes a style issue in code blocks preventing the line numbers and prompts to stay sticky while scrolling horizontally.

  • 7720df5: Adds missing cover on individual pages (posts, guides and projects).

  • 20e4205: Fixes a style issue when using diff notation inside code blocks.

    This fixes an issue where the lines marked as diff were not taking the full width of their parent, so the background was not displayed correctly.

  • 0da391f: Improves the differentiation of RSS items by prefixing their title with the content type.

    Since I have some collections that target external resources (e.g. "John Doe" being in the blog roll), it might be confusing for someone subscribed to the RSS feed to see only "John Doe". By prefixing the title with the content type (e.g. "[Blogroll] John Doe"), it should prevent any confusion.

  • 20e4205: Fixes the text alignment inside code blocks' caption.

  • 993be5e: Fixes a style issue in callouts where the last child could add an extra margin.

  • 7720df5: Fixes images performance by using picture and srcset.

    This enables the experimental responsiveImages feature of Astro in addition to wrapping all images in a picture element to provide multiple sources. This also adds a srcset attribute to images to try to please a bit more Lighthouse.

  • 993be5e: Fixes a style issue in callouts where a long heading was not correctly aligned with the icon.

1.0.0

Major Changes

  • 3967fcc: Sets French version as the default language.

Minor Changes

  • 1d920ee: Adds all (global + per collection) RSS feeds.

  • 1349da2: Adds support for custom components in MDX without the need of imports.

    Here a list of the syntax automatically mapped to a custom component:

    Markdown/HTML Component
    a Link
    blockquote Blockquote
    callout Callout
    div Placeholder
    figure Figure
    h2 H2
    h3 H3
    h4 H4
    h5 H5
    h6 H6
    img Img
    li ListItem
    ol Ol
    ul List

    The use of div is a bit special: according to its class, it could be a custom component or a div. For example, when using gallery as class, the div will be replace with a Grid component.

  • e9314a4: Upgrades to Astro v5.

  • 3967fcc: Adds French version.

  • 4af7172: Replaces static rendering with hybrid rendering to support API endpoints.

    This project now uses Node.js adapter to handle on-demand pages like API endpoints.

  • e1efe03: Adds a Search page.

  • f700427: Adds queryCollection and queryEntry helpers to reduce boilerplate code when querying collections entries.

    Instead of using directly the getCollection helper from Astro, you should use the queryCollection helper declared in this project. This function helps you query a collection with filters, offset and ordering. queryCollection will also resolves every references!

    You can also use it if you need to resolve multiple collections at once or you can use queryEntry to resolve a single entry.

    You can now reduce the amount of code in your templates:

    ---
import { queryCollection } from "src/lib/astro/collections/query-collection";
const { entries, total } = await queryCollection("blogPosts", {
  first: 10,
  orderBy: { key: "publishedOn", order: "DESC" },
});
---

// Your template here

    Instead of:

    ---
import { getCollection, getEntries, getEntry } from "astro:content";
const rawBlogPosts = await getCollection("blogPosts");
const blogPosts = await Promise.all(
  rawBlogPosts.map(async (blogPost) => {
    const category = blogPost.data.category
      ? await getEntry(blogPost.data.category)
      : null;
    const tags = blogPost.data.tags
      ? await getEntries(blogPost.data.tags)
      : null;
    return {
      ...blogPost,
      data: {
        ...blogPost.data,
        category,
        tags,
      },
    };
  })
);
const orderedBlogPosts = blogPosts.sort(/* some method to sort posts */);
const firstTenBlogPosts = orderedBlogPosts.slice(0, 10);
---

// Your template here

  • 5a080c0: Adds support for dev-only pages.

    To use this feature, you need to add a new integration in your configuration file:

    import { defineConfig } from "astro/config";
+import { devOnlyPages } from "./src/lib/astro/integrations/dev-only-pages";

export default defineConfig({
+  integrations: [
+    devOnlyPages({
+      prefix: "_dev_",
+    }),
+  ],
});

    You can now create pages without adding them to the final build by using the _dev_ prefix. To access those pages in your browser, just use the filename without the prefix (e.g. /src/pages/_dev_design-system can be accessed using /design-system as slug).

  • 5a080c0: Adds CSS tokens for colors, borders, fonts, spacings and shadows.

    Instead of using fixed values in your components and layouts styles, you should use tokens. This ensures harmonization within the site for colors, spaces, fonts, etc. Also, this is easier to update if needed.

    ---
---

<button class="btn"><slot /></button>

<style>
    .btn {
-        padding: 1rem;
-        background: #fff;
-        border: 1px solid #ccc;
-        font-size: 16px;
+        padding: var(--spacing-md);
+        background: var(--color-regular);
+        border: var(--border-size-sm) solid var(--color-border);
+        font-size: var(--font-size-md);
    }
</style>

  • d8654ed: Adds a PageLayout component to define global structure and styles for pages.

  • 508521e: Adds Schema.org structured data.

  • 5dd33bf: Adds support for switching theme between light and dark.

    ou can choose to use either a light, a dark theme or to let the theme being updated according to your OS preferences. This feature is especially useful when you want to change the theme depending on the time of day.

  • 2000005: Adds support to redirect to a translated page using the language picker.

    Previously, when using the language picker, the user was redirected to the homepage of the selected locale. Now, it is possible to redirect to the matching translated page.

    For example, if an user lands on /en/blog/posts, he can switch to /fr/blog/articles instead! If a translated route is not provided, the user will be redirected to the homepage of the selected locale.

  • 3a62260: Adds a Remark plugin to retrieve the words count from Markdown files.

    This plugin allows the calculation of a new reading time meta using the number of words in a Markdown file.

  • 1d5eea9: Adds the website navbar.

    A stub was previously here. This adds the popover functionality and the different behavior depending on the viewport size.

  • 6556bab: Adds independent theme mode support for code blocks.

    A new setting is available in the website header and in each code block to update the theme used for code blocks. This allows users to use a light theme for the website and a dark theme for the code blocks, and conversely. It is also possible to infer the code block theme from the website theme when set to Auto.

  • 6bd1f12: Defines content collections schemas.

    The following collections are now available: authors, blogroll, bookmarks, blogCategories, blogPosts, guides, notes, projects and tags. To define contents for these collections, your content directory should use the following structure:

    content/
├── authors/
│   └── john-doe.json
├── blogroll/
│   ├── index.md
│   └── blog1.json
├── bookmarks/
│   ├── index.md
│   └── bookmark1.json
└── en/
    ├── blog/
    │   ├── categories/
    │   │   ├── index.md
    │   │   └── category1.md
    │   ├── posts/
    │   │   ├── index.md
    │   │   └── post1.md
    │   └── posts/
    ├── guides/
    │   ├── index.md
    │   └── guide1.md
    ├── notes/
    │   ├── index.md
    │   └── note1.md
    ├── pages/
    │   ├── home.md
    │   └── search.md
    ├── projects/
    │   ├── index.md
    │   └── project1.md
    └── tags/
        ├── index.md
        └── tag1.md

    There are two types of pages available:

    • the pages co-located with your collection (to provide meta and optional content for the index page) named index.md
    • the ones located in the pages directory and that can use any filename

  • 15a3611: Adds support for i18n.

    This project now exports a useI18n() function to help you translating all the UI strings and routes. It accepts a locale as argument and returns a validated locale (which fallback to default locale) and three methods:

    • translate(): to help you translate UI strings
    • translatePlural(): to help you translate UI strings while dealing with pluralization
    • route(): to help you localize the routes.

    Both translate() and translatePlural() support interpolations by providing an object as second argument. For example:

    import { useI18n } from "src/utils/helpers/i18n";

const { locale, route, translate, translatePlural } = useI18n("en");
console.log(locale); // "en"

const contactPage = route("contact");
console.log(contactPage); // "/contact"

const contactPageFr = route("contact");
console.log(contactPageFr); // If "fr" is defined and default locale is "en", "/fr/contact". Else "/contact";

const greeting = translate("greeting", { name: "John" });
console.log(greeting); // "Hello, John!";

const threePeopleLike = translatePlural("people.likes", { count: 3 });
console.log(threePeopleLike); // "3 people like this post"

const noLikes = translatePlural("people.likes", { count: 0 });
console.log(noLikes); // "No one like this post yet"

  • b63d9f9: Adds a Layout component to define global structure and styles.

  • 6556bab: Adds a custom CodeBlock component.

    The CodeBlock component should be used instead of the Astro default one. It provides the following features:

    • snippet file path
    • prompt for shell and sql sessions with custom user/host
    • line numbers with custom line start if needed
    • diff notation
    • light/dark theme switch
    • copy to clipboard button

  • 85b350c: Adds support for callouts/asides in MDX.

    When using MDX format, you can use a directive for your callouts (or admonitions, asides) for example:

    :::warning
The contents of the warning.
:::

    Both custom titles and attributes are supported:

    :::idea[My custom tip]{ariaLabel: "An accessible label for my tip"}
The contents of the tip.
:::

    Here are the supported callouts type: "critical", "discovery", "idea", "info", "success" and "warning".

  • 4af7172: Adds an API route to handle sending emails.

  • 9d143b2: Adds support for MDX files in content directory.

    With Astro, it is not possible to use custom components while using .md extension. So this adds support for .mdx files in content collections. However, I don't want to rely on imports inside the content directory so a few customizations have been added:

    • both Markdown syntax and HTML tags are supported with custom components,
    • images using relative paths will automatically be imported,
    • images wrapped in a link pointing to the image source will automatically be updated with the built image path.

  • 26eb807: Adds a new page to display available feeds on the website.

  • e1efe03: Adds an Astro integration to generate the search index on build.

    Using the Pagefind integration, the search index can be automatically built while building the website. On dev mode, you'll need to build your website a first time. Otherwise, the integration will warn you that the search index cannot be used.

  • 6556bab: Adds a Rehype plugin to convert fenced code blocks to a CodeBlock component in MDX files.

    When using MDX, you can pass props to the CodeBlock component after the opening code fence. For example:

    ```js showLineNumbers filePath=./hello-world.js
console.log("Hello, world!");
```

    This fenced code block will output console.log("Hello, world!"); using Javascript syntax highlighting, numbered lines and will indicate that the code is a snippet from the ./hello-world.js file.

  • 811b93a: Creates the pages for each existing collection.

    The website now has pages for each collection, including index pages (paginated or not) and dynamic routes.

  • cd73d5d: Adds a custom 404 page.

  • 5a080c0: Adds support for components stories.

    To enable this feature, you need to import and add the integration in your configuration file:

    import { defineConfig } from "astro/config";
+import { componentsStories } from "./src/lib/astro/integrations/components-stories";

export default defineConfig({
+  integrations: [
+    componentsStories({
+      components: "./path/to/components/directory",
+    }),
+  ],
});

    You can now define stories for your components using the .stories.astro extension. Your story file should look like any Astro page. The only differences are:

    • they can be injected under a parent slug (e.g. /design-system),
    • their purpose is to show your component variants and to give advices about their use.

    You can also divide your stories in multiple files. Here are the supported structures:

    /src/components
├── button/
│   ├── stories/
│   │   ├── primary-button.stories.astro
│   │   └── secondary-button.stories.astro
│   ├── button.astro
│   └── button.stories.astro
├── field/
│   ├── stories/
│   │   ├── numeric-field.stories.astro
│   │   ├── text-field.stories.astro
│   │   └── index.stories.astro
│   └── field.astro
└── link/
    ├── link.astro
    └── link.stories.astro

    Those structures will be available with the following slugs:

    • /button
    • /button/primary-button
    • /button/secondary-button
    • /field
    • /field/numeric-field
    • /field/text-field
    • /link

    You can use the baseSlug option to injects those route under another route. For example, using baseSlug: '/design-system', the previous slugs would be updated to:

    • /design-system/button
    • /design-system/button/primary-button
    • /design-system/button/secondary-button
    • /design-system/field
    • /design-system/field/numeric-field
    • /design-system/field/text-field
    • /design-system/link

  • 2000005: Adds an i18n frontmatter property to define the translations.

    This property accepts a partial object with the available locales as key and a reference to a translated entry as value. This is used both to define the alternate languages in the <head> tag and to redirect to the right page using the LanguagePicker.

  • 156da90: Adds a favicon and handle sitemap, robots.txt and manifest.json files generation on build.

  • 6bd1f12: Adds an environment variable to configure the content directory path.

    By default, this project will look for contents in ./content. If you want to define another base path, you can use an environment variable named CONTENT_PATH (see .env.example).

    This can be useful to define different data between development and production for example.

  • 9a73c5a: Adds open graph and twitter meta.

  • 6b1ae83: Adds an helper to build a table of contents from Markdown headings.

Patch Changes

  • 5ed5609: Adds a missing MDX renderer to generate feed entries content.

  • 095b57a: Fixes code blocks overflow in Chromium.

  • 5c7eed5: Hides JS-only features when Javascript is disabled.

    When Javascript is disabled the contact form is unusable, so I added a noscript text to inform the user. I also choose to hide the search and settings form since they can't be use without JS.

  • 2000005: Adds support for filtering tags that does not match the current locale.

    The queryCollection utility was returning the entries without checking the data inside. For bookmarks, the tags property can contain tags in different locales. So using where: {locale: "fr"}, we now filter the tags to return only the ones matching the given locale.

  • ed8bdea: Fixes the formatting of RSS items content.

    RSS readers are not smart enough to replace the relative URLs with an absolute one, so links and images are now using a full URL. I also removed unwanted elements (e.g. code blocks) and data attributes.

  • 38087f2: Fixes an issue where content:encoded was included in RSS feed items while the content was empty.

    When content is passed to @astrojs/rss while being empty, it results to a self-closed <content:encoded /> without the proper xmlns definition. So we need to make sure content exist before passing it.

  • b56c083: Fixes a contact form issue where environment variables was not available in a Docker container.

  • 2000005: Adds support for filtering blogroll by locale.

    Currently, when a blog have a description only in one locale, it is displayed in the blogroll for all locales. The locale filter is never applied for the blogs.

    With this fix, we can now filter the blogs by locale with queryCollection. If a blog does not have a description in the current locale, it will not be returned.

  • 80dc4c1: Fixes dates formatting coming from content collections.

    When using dates like "2025-01-07T13:40" in a collection entry, they were converted to a Date object with GMT timezone. With this fix, it is now possible to apply a timezone! Instead of Tue, 07 Jan 2025 13:40:00 GMT, you can get Tue, 07 Jan 2025 13:40:00 GMT+1 if the timezone is configured to Europe/Paris while in winter. It should also handle daylight saving time, so "2025-08-07T13:40" should be converted to Tue, 07 Aug 2025 13:40:00 GMT+2 if the timezone is configured to Europe/Paris.