wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

remove and replace markdown component

Browse source
This commit is contained in:
hobbes7878 2025-04-18 18:36:48 +01:00
parent 929ecbe1f4
commit 14732007b6
Failed to extract signature
16 changed files with 47 additions and 150 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -105,6 +105,7 @@
"dependencies": {
"@fortawesome/free-regular-svg-icons": "^6.7.2",
"@fortawesome/free-solid-svg-icons": "^6.7.2",
"@reuters-graphics/svelte-markdown": "^0.0.3",
"@sveltejs/kit": "^2.20.7",
"dayjs": "^1.11.13",
"es-toolkit": "^1.35.0",

35
pnpm-lock.yaml
View file

@ -14,6 +14,9 @@ importers:
'@fortawesome/free-solid-svg-icons':
specifier: ^6.7.2
version: 6.7.2
'@reuters-graphics/svelte-markdown':
specifier: ^0.0.3
version: 0.0.3(svelte@5.28.0)
'@sveltejs/kit':
specifier: ^2.20.7
version: 2.20.7(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.28.0)(vite@6.3.2(@types/node@22.10.7)(jiti@2.4.2)(sass@1.86.3)(yaml@2.7.0)))(svelte@5.28.0)(vite@6.3.2(@types/node@22.10.7)(jiti@2.4.2)(sass@1.86.3)(yaml@2.7.0))
@ -738,6 +741,11 @@ packages:
resolution: {integrity: sha512-S+9ANAvUmjutrshV4jZjaiG8XQyuJIZ8a4utWmN/vW1sgQ9IfBnPndwkmQYw53QmouOIytT874u65HEmu6H5jw==}
engines: {node: '>=18'}
'@reuters-graphics/svelte-markdown@0.0.3':
resolution: {integrity: sha512-K3DWKjm1XZxnwua+Vz9c7BRFrkFVWpVU+DnMKBPu3eadhCpT09Z0y+1MhJgs/573h4BpraZFuUVCl1h4XUxd1Q==}
peerDependencies:
svelte: ^5.0.0
'@reuters-graphics/yaks-eslint@0.1.1':
resolution: {integrity: sha512-cECaoVOAR/nMZPfT7lLY/WvcBjY7rlvSKD59QhpV3Yq2mSmoBwMDHAugjp1ndcQBRt9r/pM7aGL1iZouz4CxVQ==}
engines: {node: '>=18'}
@ -1903,6 +1911,10 @@ packages:
entities@2.2.0:
resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
entities@4.5.0:
resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
engines: {node: '>=0.12'}
err-code@2.0.3:
resolution: {integrity: sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==}
@ -3237,6 +3249,9 @@ packages:
resolution: {integrity: sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==}
engines: {node: '>=18'}
parse5@7.2.1:
resolution: {integrity: sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==}
pascal-case@3.1.2:
resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==}
@ -3729,6 +3744,9 @@ packages:
space-separated-tokens@1.1.5:
resolution: {integrity: sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==}
spark-md5@3.0.2:
resolution: {integrity: sha512-wcFzz9cDfbuqe0FZzfi2or1sgyIrsDwmPwfZC4hiNidPdPINjeUwNfv5kldczoEAcjl9Y1L3SM7Uz2PUEQzxQw==}
spawndamnit@3.0.1:
resolution: {integrity: sha512-MmnduQUuHCoFckZoWnXsTg7JaiLBJrKFj9UI2MbRPGaJeVpsLcVBu6P/IGZovziM/YBsellCmsprgNA+w0CzVg==}
@ -4837,6 +4855,15 @@ snapshots:
'@publint/pack@0.1.2': {}
'@reuters-graphics/svelte-markdown@0.0.3(svelte@5.28.0)':
dependencies:
es-toolkit: 1.35.0
marked: 15.0.7
marked-smartypants: 1.1.9(marked@15.0.7)
parse5: 7.2.1
spark-md5: 3.0.2
svelte: 5.28.0
'@reuters-graphics/yaks-eslint@0.1.1(@types/eslint@9.6.1)(eslint@9.24.0(jiti@2.4.2))(prettier@3.5.3)(svelte@5.28.0)(typescript@5.8.3)':
dependencies:
'@eslint/js': 9.22.0
@ -6134,6 +6161,8 @@ snapshots:
entities@2.2.0: {}
entities@4.5.0: {}
err-code@2.0.3: {}
error-ex@1.3.2:
@ -8061,6 +8090,10 @@ snapshots:
parse-ms@4.0.0: {}
parse5@7.2.1:
dependencies:
entities: 4.5.0
pascal-case@3.1.2:
dependencies:
no-case: 3.0.4
@ -8578,6 +8611,8 @@ snapshots:
space-separated-tokens@1.1.5: {}
spark-md5@3.0.2: {}
spawndamnit@3.0.1:
dependencies:
cross-spawn: 7.0.6

2
src/components/BodyText/BodyText.svelte
View file

@ -1,6 +1,6 @@
<!-- @component `BodyText` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-bodytext--docs) -->
<script lang="ts">
import Markdown from '../Markdown/Markdown.svelte';
import { Markdown } from '@reuters-graphics/svelte-markdown';
import Block from '../Block/Block.svelte';
interface Props {
/** A markdown text string. */

2
src/components/EndNotes/EndNotes.svelte
View file

@ -12,7 +12,7 @@
}
import Block from '../Block/Block.svelte';
import Markdown from '../Markdown/Markdown.svelte';
import { Markdown } from '@reuters-graphics/svelte-markdown';
interface Props {
/**
* An array of endnote items.

2
src/components/GraphicBlock/GraphicBlock.svelte
View file

@ -9,7 +9,7 @@
import TextBlock from './components/TextBlock.svelte';
import Block from '../Block/Block.svelte';
import PaddingReset from '../PaddingReset/PaddingReset.svelte';
import Markdown from '../Markdown/Markdown.svelte';
import { Markdown } from '@reuters-graphics/svelte-markdown';
interface Props {
/** Content to place inside `GraphicBlock` */

2
src/components/Headline/Headline.svelte
View file

@ -7,7 +7,7 @@
// Components
import Block from '../Block/Block.svelte';
import Byline from '../Byline/Byline.svelte';
import Markdown from '../Markdown/Markdown.svelte';
import { Markdown } from '@reuters-graphics/svelte-markdown';
interface Props {
/** Headline, parsed as an _inline_ markdown string in an `h1` element OR as a custom snippet. */

2
src/components/InfoBox/InfoBox.svelte
View file

@ -56,7 +56,7 @@
}: Props = $props();
import Block from '../Block/Block.svelte';
import Markdown from '../Markdown/Markdown.svelte';
import { Markdown } from '@reuters-graphics/svelte-markdown';
</script>
<aside class="infobox {theme}">

46
src/components/Markdown/Markdown.mdx
View file

@ -1,46 +0,0 @@
import { Meta, Canvas } from '@storybook/blocks';
import * as MarkdownStories from './Markdown.stories.svelte';
<Meta of={MarkdownStories} />
# Markdown
The `Markdown` component renders a markdown string into HTML.
```svelte
<script>
import { Markdown } from '@reuters-graphics/graphics-components';
</script>
<Markdown source={'My *awesome* text in **markdown** with "smart quotes".'} />
```
<Canvas of={MarkdownStories.Demo} />
... well, almost.
Owing to a weird quirk of Svelte's [`@html`](https://svelte.dev/docs/special-tags#html) directive (see [this issue](https://github.com/reuters-graphics/graphics-components/issues/148)), if you want your resulting HTML to be dynamic — e.g., update after a SvelteKit app [hydrates](https://kit.svelte.dev/docs/glossary#hydration) — then you may need to set the included `staticMarkdown` rune to `{ static: false }` in the browser.
For example, if you're refreshing some data with markdown strings in a SvelteKit project using a [load function](https://kit.svelte.dev/docs/load), set the rune to reflect the [`building`](https://kit.svelte.dev/docs/modules#$app-environment-building) variable, which will correctly [prerender](https://kit.svelte.dev/docs/glossary#prerendering) your markdown content AND update it after fresh data is fetched in the browser.
```javascript
// +layout.js
import { staticMarkdown } from '@reuters-graphics/graphics-components';
import { building } from '$app/environment';
/** @type {import('./$types').LayoutLoad} */
export const load = async () => {
// Set the staticMarkdown rune with the value of building.
staticMarkdown.static = building;
// Now this content will correctly refresh when a reader loads your page.
const resp = await fetch(
'https://graphics.thomsonreuters.com/data/my-page-content.json'
);
const content = await resp.json();
return { content };
};
```
If you're not updating your markdown content as above, you can safely leave the `staticMarkdown` rune alone and your page will do the right thing.

16
src/components/Markdown/Markdown.stories.svelte
View file

@ -1,16 +0,0 @@
<script module lang="ts">
import { defineMeta } from '@storybook/addon-svelte-csf';
import Markdown from './Markdown.svelte';
const { Story } = defineMeta({
title: 'Components/Text elements/Markdown',
component: Markdown,
});
</script>
<Story
name="Demo"
args={{
source: 'My *awesome* text in **markdown** with "smart quotes".',
}}
/>

54
src/components/Markdown/Markdown.svelte
View file

@ -1,54 +0,0 @@
<!-- @component `Markdown` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-markdown--docs) -->
<script lang="ts">
import type { Action } from 'svelte/action';
import { marked } from 'marked';
import { markedSmartypants } from 'marked-smartypants';
import { staticMarkdown } from './state.svelte';
marked.use(markedSmartypants());
interface Props {
/** A Markdown formatted string */
source: string;
/** Parse markdown inline, i.e., without wrapping it in paragraph tags */
parseInline?: boolean;
}
let { source, parseInline = false }: Props = $props();
let markdown = $derived(
parseInline ?
(marked.parseInline(source) as string)
: (marked.parse(source) as string)
);
const setInnerHTML: Action<HTMLElement, string> = (node, html) => {
node.innerHTML = html;
return {
update(html) {
node.innerHTML = html;
},
destroy() {
node.innerHTML = '';
},
};
};
</script>
{#if source}
{#key source}
{#if staticMarkdown.static}
<div>
{@html markdown}
</div>
{:else}
<div use:setInnerHTML={markdown}></div>
{/if}
{/key}
{/if}
<style>
div {
display: contents;
}
</style>

23
src/components/Markdown/state.svelte.ts
View file

@ -1,23 +0,0 @@
/**
* Set to `false` in the browser to ensure Markdown content correctly updates
* when a SvelteKit app hyrates.
*
* @example
* ```javascript
* // +layout.js
* import { staticMarkdown } from '@reuters-graphics/graphics-components';
* import { building } from '$app/environment';
*
* export const load = async() => {
* // Set the store with the value of building.
* staticMarkdown.static = building;
*
* // Markdown using this content will correctly refresh when
* // a reader loads your page.
* const content = await fetchPageContent();
*
* return { content };
* }
* ```
*/
export const staticMarkdown = $state({ static: true });

2
src/components/PhotoPack/PhotoPack.svelte
View file

@ -2,7 +2,7 @@
<script lang="ts">
import Block from '../Block/Block.svelte';
import PaddingReset from '../PaddingReset/PaddingReset.svelte';
import Markdown from '../Markdown/Markdown.svelte';
import { Markdown } from '@reuters-graphics/svelte-markdown';
// Utils
import { random4 } from '../../utils';

3
src/components/Scroller/Embedded/Foreground.svelte
View file

@ -2,7 +2,8 @@
import type { ScrollerStep } from '../../@types/global';
import Block from '../../Block/Block.svelte';
import Markdown from '../../Markdown/Markdown.svelte';
import { Markdown } from '@reuters-graphics/svelte-markdown';
interface Props {
step: ScrollerStep;
index: number;

3
src/components/Scroller/Foreground.svelte
View file

@ -1,7 +1,8 @@
<script lang="ts">
import type { ScrollerStep } from '../@types/global';
import Markdown from '../Markdown/Markdown.svelte';
import { Markdown } from '@reuters-graphics/svelte-markdown';
interface Props {
steps: ScrollerStep[];
}

2
src/components/SimpleTimeline/SimpleTimeline.svelte
View file

@ -3,7 +3,7 @@
import Fa from 'svelte-fa';
import { faLink } from '@fortawesome/free-solid-svg-icons';
import Block from '../Block/Block.svelte';
import Markdown from '../Markdown/Markdown.svelte';
import { Markdown } from '@reuters-graphics/svelte-markdown';
interface Event {
title: string;

2
src/index.js
View file

@ -25,12 +25,10 @@ export { default as EndNotes } from './components/EndNotes/EndNotes.svelte';
export { default as InfoBox } from './components/InfoBox/InfoBox.svelte';
export { default as InlineAd } from './components/AdSlot/InlineAd.svelte';
export { default as LeaderboardAd } from './components/AdSlot/LeaderboardAd.svelte';
export { default as Markdown } from './components/Markdown/Markdown.svelte';
export { default as PaddingReset } from './components/PaddingReset/PaddingReset.svelte';
export { default as PhotoPack } from './components/PhotoPack/PhotoPack.svelte';
export { default as PymChild } from './components/PymChild/PymChild.svelte';
export { pym } from './components/PymChild/state.svelte.js';
export { staticMarkdown } from './components/Markdown/state.svelte.js';
export { default as ReferralBlock } from './components/ReferralBlock/ReferralBlock.svelte';
export { default as ReutersGraphicsLogo } from './components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte';
export { default as ReutersLogo } from './components/ReutersLogo/ReutersLogo.svelte';