don't exclude docs

.gitignore

@@ -190,6 +190,3 @@ dist
 .svelte-kit
 
 # End of https://www.toptal.com/developers/gitignore/api/node,macos,linux
-
-dist/
-docs/

src/components/FeaturePhoto/stories/docs/archieML.md

@@ -0,0 +1,37 @@
+```yaml
+[blocks]
+
+type: photo
+width: normal
+src: images/shark.jpg
+altText: The king of the sea
+caption: Carcharodon carcharias - REUTERS
+
+[]
+```
+
+```svelte
+<!-- App.svelte -->
+<script>
+  import { FeaturePhoto } from '@reuters-graphics/graphics-components';
+
+  import content from '$locales/en/content.json';
+  import { assets } from '$app/paths';
+</script>
+
+{#each content.blocks as block}
+  {#if block.Type === 'text'}
+  <!-- ... -->
+
+  {:else if block.type === 'photo'}
+    <FeaturePhoto
+      width="{block.width}"
+      src="{`${assets}/${block.src}`}"
+      altText="{block.altText}"
+      caption="{block.caption}"
+    />
+
+  <!-- ... -->
+  {/if}
+{/each}
+```

src/components/GraphicBlock/stories/docs/archieML.md

@@ -0,0 +1,40 @@
+For Graphics Kit users, the `GraphicBlock` component is built-in to handle [ai2svelte](https://github.com/reuters-graphics/ai2svelte) graphics.
+
+First, import your ai2svelte graphic in `App.svelte` and add it to the `aiCharts` object;
+
+```svelte
+<!-- App.svelte -->
+<script>
+  // Other stuff...
+
+  import AiMap from './ai2svelte/my-map.svelte';
+
+  const aiCharts = {
+    // Other charts...
+    AiMap,
+  };
+</script>
+```
+
+Then add the following structure to your ArchieML doc, taking care that the name of your chart in the `aiCharts` object matches the name of your `chart`:
+
+```yaml
+[blocks]
+# ...
+
+type: ai-graphic
+chart: AiMap
+width: normal
+textWidth: normal
+title: Earthquake in Haiti
+description: The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021.
+notes: \Note: A shakemap represents the ground shaking produced by an earthquake.
+
+\Source: USGIS
+:end
+altText: A map that shows the shake intensity of the earthquake, which was worst in central Haiti.
+:end
+
+# ...
+[]
+```

src/components/PhotoPack/stories/docs/archieML.md

@@ -0,0 +1,63 @@
+```yaml
+[blocks]
+# ...
+
+type: photo-pack
+id: my-photo-pack
+class: mb-2
+width: wide
+textWidth: normal
+gap: 10
+[.images]
+  src: images/my-img-1.jpg
+  altText: Alt text
+  caption: Lorem ipsum. REUTERS/Photog
+
+  src: images/my-img-2.jpg
+  altText: Alt text
+  caption: Lorem ipsum. REUTERS/Photog
+
+  src: images/my-img-3.jpg
+  altText: Alt text
+  caption: Lorem ipsum. REUTERS/Photog
+
+  src: images/my-img-4.jpg
+  altText: Alt text
+  caption: Lorem ipsum. REUTERS/Photog
+
+  src: images/my-img-5.jpg
+  altText: Alt text
+  caption: Lorem ipsum. REUTERS/Photog
+[]
+
+# ...
+[]
+```
+
+```svelte
+<!-- App.svelte -->
+{#each content.blocks as block}
+  {#if block.type === 'text'}
+  <!-- ... -->
+
+  {:else if block.type === 'photo-pack'}
+    <PhotoPack
+      id={block.id}
+      class={block.class}
+      width={block.width}
+      textWidth={block.textWidth}
+      images={block.images.map((img) => ({
+        src: `${assets}/${img.src}`,
+        altText: img.altText,
+        caption: img.caption,
+      }))}
+      layouts={[
+        { breakpoint: 750, rows: [2, 3] },
+        { breakpoint: 450, rows: [1, 2, 2] },
+      ]}
+    />
+    
+  <!-- ... -->
+  {/if}
+{/each}
+```

src/components/SEO/stories/docs/archieML.md

@@ -0,0 +1,36 @@
+```yaml
+slug:  ROOT-SLUG/WILD
+seoTitle: Page title for search
+seoDescription: Page description for search
+shareTitle: Page title for social media
+shareDescription: Page description for social media
+shareImgPath: images/reuters-graphics.jpg
+shareImgAlt: Alt text for share image.
+```
+
+```svelte
+<script>
+  import { SEO } from '@reuters-graphics/graphics-components';
+  import pkg from '$pkg';
+  import content from '$locales/en/content.json';
+  import { assets } from '$app/paths';
+  import { page } from '$app/stores';
+</script>
+
+<SEO
+  baseUrl="{VITE_BASE_URL}"
+  pageUrl="{$page.url}"
+  seoTitle="{content.seoTitle}"
+  seoDescription="{content.seoDescription}"
+  shareTitle="{content.shareTitle}"
+  shareDescription="{content.shareDescription}"
+  shareImgPath="{`${assets}/${content.shareImgPath}`}"
+  shareImgAlt="{content.shareImgAlt}"
+  publishTime="{pkg?.reuters?.graphic?.published}"
+  updateTime="{pkg?.reuters?.graphic?.updated}"
+  authors="{pkg?.reuters?.graphic?.authors}"
+/>
+```
+
+> **Note:** For _reasons_, we can't document the value of `VITE_BASE_URL` below. It's `import` + `.meta.env.BASE_URL` (concatenate all that) in the Graphics Kit and other Vite-based rigs.
+

src/components/Scroller/stories/docs/archieML.md

@@ -0,0 +1,87 @@
+First, import your ai2svelte graphics in `App.svelte` and add them to the `aiCharts` object;
+
+```svelte
+<!-- App.svelte -->
+<script>
+  // Other stuff...
+
+  import AiMap1 from './ai2svelte/my-map-1.svelte';
+  import AiMap2 from './ai2svelte/my-map-2.svelte';
+  import AiMap3 from './ai2svelte/my-map-3.svelte';
+
+  const aiCharts = {
+    // Other charts...
+    AiMap1,
+    AiMap2,
+    AiMap3,
+  };
+</script>
+```
+
+Then add the following structure to your ArchieML Doc, taking care that the names of your charts in the `aiCharts` object match the names of your step backgrounds:
+
+```yaml
+[blocks]
+# ...
+
+type: ai-scroller
+id: my-map-scroller
+width: normal
+foregroundPosition: middle
+stackBackground: true
+[.steps]
+  background: AiMap1
+  text: #### Step 1
+
+  Lorem ipsum
+  :end
+  altText: A map showing the Upper West side in New York City.
+
+  Can add paragraphs of alt text if you want to break up sentences.
+  :end
+
+  background: AiMap2
+  text: #### Step 2
+
+  Lorem ipsum
+  :end
+  altText: The same map now highlights 98th Street.
+  :end
+
+  background: AiMap3
+  text: #### Step 3
+
+  Lorem ipsum
+  :end
+  altText: The same map now highlights three locations near 98th Street where something particulary important happened.
+  :end
+[]
+
+# ...
+[]
+```
+
+```svelte
+<!-- App.svelte -->
+{#each content.blocks as block}
+  {#if block.type === 'text'}
+  <!-- ... -->
+  
+  {:else if block.type === 'ai-scroller'}
+      <Scroller
+        id="{block.id}"
+        backgroundWidth="{block.width}"
+        foregroundPosition="{block.foregroundPosition}"
+        stackBackground="{block.stackBackground === 'true'}"
+        steps="{block.steps.map((step) => ({
+          background: aiCharts[step.background],
+          backgroundProps: assets || '/',
+          foreground: step.text,
+          altText: step.altText,
+        }))}"
+      />
+  
+  <!-- ... -->
+  {/if}
+{/each}
+```

src/components/SiteHeadline/stories/docs/archieML.md

@@ -0,0 +1,26 @@
+```yaml
+section: Graphics
+sectionUrl: https://www.reuters.com/graphics/
+hed: A beautiful page
+authors: Samuel Granados,Dea Bankova
+published: 2022-09-12T08:30:00.000Z
+updated:
+```
+
+```svelte
+<!-- App.svelte -->
+<script>
+  import { SiteHeadline } from '@reuters-graphics/graphics-components';
+
+  import content from '$locales/en/content.json';
+</script>
+
+<SiteHeadline
+  section="{content.section}"
+  sectionUrl="{content.sectionUrl}"
+  hed="{content.hed}"
+  authors="{content.authors.split(',')}"
+  publishTime="{content.published}"
+  updateTime="{content.updated}"
+/>
+```

src/docs/docs-components/Herbie/Herbie.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+interface InlineNumberProps {
+  number: number;
+  children: React.ReactNode; // Allow children to be passed
+}
+
+const InlineNumber: React.FC<InlineNumberProps> = ({ number, children }) => {
+  const containerStyle: React.CSSProperties = {
+    display: 'flex',
+    alignItems: 'flex-start', // Align items at the top
+    gap: '0.5em',
+    marginTop: '1.5em',
+  };
+
+  const numberStyle: React.CSSProperties = {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgb(0 156 253)',
+    color: 'white',
+    borderRadius: '50%',
+    width: '1.8em',
+    height: '1.8em',
+    fontSize: '1em',
+    fontWeight: 'bold',
+    lineHeight: '1',
+    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
+    flexShrink: 0, // Prevent shrinking
+  };
+
+  const textStyle: React.CSSProperties = {
+    paddingTop: '0.25em',
+    fontSize: '1em',
+    lineHeight: '1.4em', // Adjust line height for readability
+    wordBreak: 'break-word', // Handle long words gracefully
+  };
+
+  return (
+    <div style={containerStyle}>
+      <div style={numberStyle}>{number}</div>
+      <div style={textStyle}>{children}</div>
+    </div>
+  );
+};
+
+export default InlineNumber;

src/docs/docs-components/Highlight/Highlight.tsx

@@ -0,0 +1,19 @@
+import React, { ReactNode } from 'react';
+
+interface HighlightProps {
+  children: ReactNode;
+}
+
+const Highlight: React.FC<HighlightProps> = ({ children }) => {
+  const style: React.CSSProperties = {
+    backgroundColor: '#FFF8DC', // Light yellow (Cornsilk)
+    padding: '0.15em 0.25em',
+    border: '1px solid rgb(255 239 177)',
+    boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)', // Subtle shadow for depth
+    fontWeight: 'bold',
+  };
+
+  return <span style={style}>{children}</span>;
+};
+
+export default Highlight;

src/docs/docs-components/SubtleHighlight/SubtleHighlight.tsx

@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react';
+
+interface HighlightProps {
+  children: ReactNode;
+}
+
+const Highlight: React.FC<HighlightProps> = ({ children }) => {
+  const style: React.CSSProperties = {
+    backgroundColor: '#fff5cd',
+    padding: '0.15em 0.3em',
+  };
+
+  return <span style={style}>{children}</span>;
+};
+
+export default Highlight;