add component to use images from /static

Author: Solant

src/components/StaticImage.astro

@@ -0,0 +1,25 @@
+---
+import type { ImageMetadata } from 'astro';
+import { Image } from 'astro:assets';
+
+interface Props {
+  path?: string | string[];
+  alt: string;
+}
+
+const { path, alt, ...rest } = Astro.props;
+const actualPaths = Array.isArray(path) ? path.map(p => `../../static${p}`) : [`../../static${path}`];
+
+const images = import.meta.glob<{ default: ImageMetadata }>('../../static/**/*.{jpeg,jpg,png,gif,svg}');
+
+for (const path of actualPaths) {
+  if (!images[path]) throw new Error(`"${path}" does not exist in glob: "static/*.{jpeg,jpg,png,gif,svg}"`);
+}
+---
+{actualPaths.length === 1 ?
+  <Image src={images[actualPaths[0]]()} alt={alt} {...rest} /> :
+  (
+    <Image src={images[actualPaths[0]]()} alt={alt} {...rest} data-theme-only="light" />
+    <Image src={images[actualPaths[1]]()} alt={alt} {...rest} data-theme-only="dark" />
+  )
+}

src/content/docs/docs/reference/layers.mdx

@@ -5,13 +5,13 @@ sidebar:
 ---
 
 import { Aside } from '@astrojs/starlight/components';
+import StaticImage from '../../../../components/StaticImage.astro';
 
 Layers are the first level of organisational hierarchy in Feature-Sliced Design. Their purpose is to separate code based on how much responsibility it needs and how many other modules in the app it depends on. Every layer carries special semantic meaning to help you determine how much responsibility you should allocate to your code.
 
 There are **7 layers** in total, arranged from most responsibility and dependency to least:
 
-<img src="../../../../../static/img/layers/folders-graphic-light.svg" data-theme-only="light" width="180" style={{ float: "right", margin: "0 1em" }} alt="A file system tree, with a single root folder called src and then seven subfolders: app, processes, pages, widgets, features, entities, shared. The processes folder is slightly faded out." />
-<img src="../../../../../static/img/layers/folders-graphic-dark.svg" data-theme-only="dark" width="180" style={{ float: "right", margin: "0 1em" }} alt="A file system tree, with a single root folder called src and then seven subfolders: app, processes, pages, widgets, features, entities, shared. The processes folder is slightly faded out." />
+<StaticImage path={['/img/layers/folders-graphic-light.svg', '/img/layers/folders-graphic-dark.svg']} width="180" style={{ float: "right", margin: "0 1em" }} alt="A file system tree, with a single root folder called src and then seven subfolders: app, processes, pages, widgets, features, entities, shared. The processes folder is slightly faded out." />
 
 1. App
 2. Processes (deprecated)

src/content/docs/docs/reference/slices-segments.mdx

@@ -4,6 +4,8 @@ sidebar:
   order: 2
 ---
 
+import StaticImage from '../../../../components/StaticImage.astro';
+
 ## Slices
 
 Slices are the second level in the organizational hierarchy of Feature-Sliced Design. Their main purpose is to group code by its meaning for the product, business, or just the application.
@@ -17,8 +19,7 @@ The layers Shared and App don't contain slices. That is because Shared should co
 Slices are meant to be independent and highly cohesive groups of code files. The graphic below might help to visualize the tricky concepts of _cohesion_ and _coupling_:
 
 <figure>
-    <img src="../../../../../static/img/coupling-cohesion-light.svg" data-theme-only="light" alt="" />
-    <img src="../../../../../static/img/coupling-cohesion-dark.svg" data-theme-only="dark" alt="" />
+    <StaticImage path={['/img/coupling-cohesion-light.svg', '/img/coupling-cohesion-dark.svg']} alt="Coupling and cohesion" />
     <figcaption>
         Image inspired by https://enterprisecraftsmanship.com/posts/cohesion-coupling-difference/
     </figcaption>
@@ -44,7 +45,7 @@ Read more about the rationale of public APIs and the best practices on creating
 
 Closely related slices can be structurally grouped in a folder, but they should exercise the same isolation rules as other slices — there should be **no code sharing** in that folder.
 
-![Features "compose", "like" and "delete" grouped in a folder "post". In that folder there is also a file "some-shared-code.ts" that is crossed out to imply that it's not allowed.](../../../../../static/img/graphic-nested-slices.svg)
+<StaticImage path="/img/graphic-nested-slices.svg" alt="Features 'compose', 'like' and 'delete' grouped in a folder 'post'. In that folder there is also a file 'some-shared-code.ts' that is crossed out to imply that it's not allowed." />
 
 ## Segments