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

makes byline mdx, deletes old md

Browse source
This commit is contained in:
MinamiFunakoshiTR 2025-03-05 14:05:34 -08:00
parent c545d2bc2f
commit 9b555434b4
Failed to extract signature
30 changed files with 187 additions and 198 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.vscode/settings.json vendored
View file

@ -12,7 +12,7 @@
"editor.wordWrap": "on"
},
"[svelte]": {
"editor.defaultFormatter": "svelte.svelte-vscode"
},
"editor.defaultFormatter": "svelte.svelte-vscode"
},
"typescript.tsdk": "node_modules/typescript/lib"
}

20
src/app.html
View file

@ -1,11 +1,11 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
%sveltekit.head%
</head>
<body>
%sveltekit.body%
</body>
</html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
%sveltekit.head%
</head>
<body>
%sveltekit.body%
</body>
</html>

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

@ -55,7 +55,7 @@
});
</script>
<div data-freestar-ad={dataFreestarAd || null} id={adId}></div>
<div data-freestar-ad="{dataFreestarAd || null}" id="{adId}"></div>
<style>
:global(div.freestar-adslot:has(.unfulfilled-ad)) {

6
src/components/AdSlot/InlineAd.mdx
View file

@ -46,11 +46,11 @@ You may add **up to three** inline ads per page, but must set the `n` prop on mu
```svelte
<!-- First inline ad on the page -->
<InlineAd n={1} />
<InlineAd n="{1}" />
<!-- ... second ... -->
<InlineAd n={2} />
<InlineAd n="{2}" />
<!-- ... third and final. -->
<InlineAd n={3} />
<InlineAd n="{3}" />
```
<Canvas of={InlineAdStories.Demo} />

2
src/components/AdSlot/LeaderboardAd.svelte
View file

@ -46,7 +46,7 @@
});
</script>
<svelte:window bind:innerWidth={windowWidth} />
<svelte:window bind:innerWidth="{windowWidth}" />
<div
class="freestar-adslot leaderboard__sticky {cls}"

2
src/components/AdSlot/ResponsiveAd.svelte
View file

@ -69,7 +69,7 @@
let adType = $derived(getAdType(placementName));
</script>
<svelte:window bind:innerWidth={windowWidth} />
<svelte:window bind:innerWidth="{windowWidth}" />
{#if windowWidth}
{#key placementName}

4
src/components/Article/Article.mdx
View file

@ -40,13 +40,13 @@ When combined with the `Block` component, you can set custom column widths by pa
```svelte
<Article
columnWidths={{
columnWidths="{{
narrower: 310,
narrow: 450,
normal: 550,
wide: 675,
wider: 1400,
}}
}}"
>
<Block width="narrower" />
<Block width="narrow" />

15
src/components/Byline/stories/docs/component.md → src/components/Byline/Byline.mdx
View file

@ -1,4 +1,12 @@
Byline and dateline.
import { Meta } from '@storybook/blocks';
import * as BylineStories from './Byline.stories.svelte';
<Meta of={BylineStories} />
# Byline
Easily add a byline and dateline.
```svelte
<script>
@ -6,13 +14,12 @@ Byline and dateline.
</script>
<Byline
authors="{[
authors={[
'Dea Bankova',
'Aditi Bhandari',
'Prasanta Kumar Dutta',
'Anurag Rao',
'Mariano Zafra',
]}"
]}
publishTime="2021-09-12T00:00:00.000Z"
updateTime="2021-09-12T12:57:00.000Z"
/>

10
src/components/DatawrapperChart/DatawrapperChart.stories.svelte
View file

@ -17,18 +17,18 @@
<Story
name="Demo"
args={{
args="{{
src: 'https://reuters.com/graphics/USA-ABORTION/lgpdwggnwvo/media-embed.html',
id: 'abortion-rights-map',
ariaLabel: 'map',
frameTitle: 'Global abortion access',
}}
}}"
/>
<Story
name="With chatter"
tags={['!autodocs']}
args={{
tags="{['!autodocs']}"
args="{{
frameTitle: 'Global abortion access',
ariaLabel: 'map',
id: 'abortion-rights-map',
@ -37,5 +37,5 @@
description: 'A map of worldwide access to abortion.',
notes:
'Note: Different indicators and additional restrictions, including different gestational limits, apply in some countries. Refer to source for full classification. Current as of May 4, 2022.\n\nSource: Center for Reproductive Rights',
}}
}}"
/>

1
src/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte
View file

@ -1,5 +1,4 @@
<script lang="ts">
import Fa from 'svelte-fa/src/fa.svelte';
import { faWindowRestore } from '@fortawesome/free-regular-svg-icons';
interface Props {

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

@ -12,15 +12,13 @@
text: string;
}
import Block from '../Block/Block.svelte';
import Markdown from '../Markdown/Markdown.svelte';
interface Props {
/**
* An array of endnote items.
* @required
*/
* An array of endnote items.
* @required
*/
notes?: EndNote[];
}

34
src/components/Framer/Resizer/index.svelte
View file

@ -11,7 +11,11 @@
minFrameWidth?: number;
}
let { breakpoints = [330, 510, 660, 930, 1200], maxFrameWidth = 1200, minFrameWidth = 320 }: Props = $props();
let {
breakpoints = [330, 510, 660, 930, 1200],
maxFrameWidth = 1200,
minFrameWidth = 320,
}: Props = $props();
let container = $state();
@ -91,9 +95,9 @@
</script>
<svelte:window
onmousemove={move}
onmouseup={end}
onkeydown={handleKeyDown}
onmousemove="{move}"
onmouseup="{end}"
onkeydown="{handleKeyDown}"
bind:innerWidth="{windowInnerWidth}"
/>
@ -105,10 +109,10 @@
<button
class="icon left"
disabled="{$width === minWidth}"
onclick={decrement}
onfocus={onFocus}
onmouseover={onFocus}
onmouseleave={onBlur}
onclick="{decrement}"
onfocus="{onFocus}"
onmouseover="{onFocus}"
onmouseleave="{onBlur}"
>
<Fa icon="{faMobileAlt}" fw />
</button>
@ -119,18 +123,18 @@
tabindex="0"
role="button"
style="left: calc({offset * 100}% - 5px);"
onmousedown={start}
onfocus={onFocus}
onblur={onBlur}
onmousedown="{start}"
onfocus="{onFocus}"
onblur="{onBlur}"
></div>
</div>
<button
class="icon right"
disabled="{$width === maxWidth}"
onclick={increment}
onfocus={onFocus}
onmouseover={onFocus}
onmouseleave={onBlur}
onclick="{increment}"
onfocus="{onFocus}"
onmouseover="{onFocus}"
onmouseleave="{onBlur}"
>
<Fa icon="{faDesktop}" fw />
</button>

1
src/components/GraphicBlock/stories/ai2svelte/ai-chart.svelte
View file

@ -1,5 +1,4 @@
<script lang="ts">
// For demo purposes only, hard-wiring img paths from Vite
// @ts-ignore img
import chartXs from '../imgs/ai-chart-xs.png';

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

@ -4,9 +4,6 @@
import { marked } from 'marked';
import { staticMarkdown } from './stores';
interface Props {
/** A Markdown formatted string */
source?: string;
@ -16,7 +13,9 @@
let { source = '', parseInline = false }: Props = $props();
let markdown = $derived(parseInline ? marked.parseInline(source) : marked.parse(source));
let markdown = $derived(
parseInline ? marked.parseInline(source) : marked.parse(source)
);
const setInnerHTML: Action<HTMLElement, string> = (node, html) => {
node.innerHTML = html;

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

@ -1,7 +1,5 @@
<!-- @component `PymChild` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-utilities-pymchild--docs) -->
<script lang="ts">
import { onMount } from 'svelte';
import pym from 'pym.js';
import { pymChildStore } from './stores.js';

9
src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte
View file

@ -1,8 +1,5 @@
<!-- @component `ReutersGraphicsLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-logos-reutersgraphicslogo--docs) -->
<script lang="ts">
interface Props {
/** "Kinesis" colour */
logoColour?: string;
@ -12,7 +9,11 @@
width?: string;
}
let { logoColour = '#D64000', textColour = '#212223', width = '100%' }: Props = $props();
let {
logoColour = '#D64000',
textColour = '#212223',
width = '100%',
}: Props = $props();
</script>
<svg

9
src/components/ReutersLogo/ReutersLogo.svelte
View file

@ -1,8 +1,5 @@
<!-- @component `ReutersLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-logos-reuterslogo--docs) -->
<script lang="ts">
interface Props {
/** "Kinesis" colour */
logoColour?: string;
@ -12,7 +9,11 @@
width?: string;
}
let { logoColour = '#D64000', textColour = '#212223', width = '100%' }: Props = $props();
let {
logoColour = '#D64000',
textColour = '#212223',
width = '100%',
}: Props = $props();
</script>
<svg

99
src/components/SEO/SEO.svelte
View file

@ -1,85 +1,72 @@
<!-- @component `SEO` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytic-seo--docs) -->
<script lang="ts">
interface GraphicAuthor {
name: string;
url: string;
}
interface Props {
/**
* Base url for the page, which in [Vite-based projects](https://vitejs.dev/guide/build.html#public-base-path)
* is globally available as `import.meta.env.BASE_URL`.
* @requiredx
* @type {string}
*/
* Base url for the page, which in [Vite-based projects](https://vitejs.dev/guide/build.html#public-base-path)
* is globally available as `import.meta.env.BASE_URL`.
* @requiredx
* @type {string}
*/
baseUrl?: string;
/**
* [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object for the page.
* @required
* @type {URL}
*/
* [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object for the page.
* @required
* @type {URL}
*/
pageUrl?: URL | null;
/**
* SEO title
* @required
* @type {string}
*/
* SEO title
* @required
* @type {string}
*/
seoTitle: string;
/**
* SEO description
* @required
* @type {string}
*/
* SEO description
* @required
* @type {string}
*/
seoDescription: string;
/**
* Share title
* @required
* @type {string}
*/
* Share title
* @required
* @type {string}
*/
shareTitle: string;
/**
* Share description
* @required
* @type {string}
*/
* Share description
* @required
* @type {string}
*/
shareDescription: string;
/**
* Share image path. **Must be an absolute path.**
* @required
* @type {string}
*/
* Share image path. **Must be an absolute path.**
* @required
* @type {string}
*/
shareImgPath: string;
/**
* Share image alt text, up to 420 characters.
* @type {string}
*/
* Share image alt text, up to 420 characters.
* @type {string}
*/
shareImgAlt?: string;
/**
* Publish time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
* @type {string}
*/
* Publish time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
* @type {string}
*/
publishTime?: string;
/**
* Updated time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
* @type {string}
*/
* Updated time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
* @type {string}
*/
updateTime?: string;
/**
* Array of authors for the piece. Each author object must have `name` and `url` attributes.
*/
* Array of authors for the piece. Each author object must have `name` and `url` attributes.
*/
authors?: GraphicAuthor[];
}
@ -94,7 +81,7 @@
shareImgAlt = '',
publishTime = '',
updateTime = '',
authors = []
authors = [],
}: Props = $props();
const getOrigin = (baseUrl: string) => {
@ -109,7 +96,9 @@
};
let origin = $derived(getOrigin(baseUrl));
let canonicalUrl = $derived((origin + pageUrl?.pathname).replace(/index\.html\/$/, ''));
let canonicalUrl = $derived(
(origin + pageUrl?.pathname).replace(/index\.html\/$/, '')
);
const orgLdJson = {
'@context': 'http://schema.org',

8
src/components/Scroller/Embedded/index.svelte
View file

@ -1,10 +1,8 @@
<script lang="ts">
import type { ContainerWidth, ScrollerStep } from '../../@types/global';
type EmbeddedLayout = 'fb' | 'bf';
import Background from './Background.svelte';
import Foreground from './Foreground.svelte';
interface Props {
@ -13,7 +11,11 @@
backgroundWidth?: ContainerWidth;
}
let { steps = [], embeddedLayout = 'fb', backgroundWidth = 'fluid' }: Props = $props();
let {
steps = [],
embeddedLayout = 'fb',
backgroundWidth = 'fluid',
}: Props = $props();
</script>
{#each steps as step, index}

4
src/components/Scroller/stories/components/basic/InteractiveForeground.svelte
View file

@ -11,7 +11,7 @@
<p>The count is {count}</p>
<button
onclick={() => {
onclick="{() => {
count += 1;
}}>Click Me</button
}}">Click Me</button
>

13
src/components/SearchInput/SearchInput.svelte
View file

@ -4,12 +4,11 @@
import MagnifyingGlass from './MagnifyingGlass.svelte';
import X from './X.svelte';
interface Props {
/**
* The placeholder text that appears in the search box.
* @type {string}
*/
* The placeholder text that appears in the search box.
* @type {string}
*/
searchPlaceholder?: string;
}
@ -40,7 +39,7 @@
class="search--input body-caption pl-8"
type="text"
placeholder="{searchPlaceholder}"
oninput={input}
oninput="{input}"
bind:value
/>
<div
@ -48,8 +47,8 @@
role="button"
tabindex="0"
class:invisible="{!active}"
onclick={clear}
onkeyup={clear}
onclick="{clear}"
onkeyup="{clear}"
>
<X />
</div>

5
src/components/SiteFooter/SiteFooter.svelte
View file

@ -9,11 +9,10 @@
import starterData from './data.json';
import { onMount } from 'svelte';
interface Props {
/**
* Set to `false` to remove graphics referrals
*/
* Set to `false` to remove graphics referrals
*/
includeReferrals?: boolean;
}

8
src/components/SiteHeader/MobileMenu/index.svelte
View file

@ -9,7 +9,11 @@
releaseMobileMenu?: any;
}
let { data = [], isMobileMenuOpen = false, releaseMobileMenu = () => {} }: Props = $props();
let {
data = [],
isMobileMenuOpen = false,
releaseMobileMenu = () => {},
}: Props = $props();
</script>
{#if isMobileMenuOpen}
@ -31,7 +35,7 @@
textColour="var(--nav-primary)"
/>
</div>
<button class="button close-button" onclick={releaseMobileMenu}>
<button class="button close-button" onclick="{releaseMobileMenu}">
<div class="button-container">
<CloseIcon />
</div>

7
src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte
View file

@ -5,10 +5,11 @@
let { section = {}, headingText } = $props();
let splitCount =
$derived(section.children && section.children.length > 7 ?
let splitCount = $derived(
section.children && section.children.length > 7 ?
Math.ceil(section.children.length / 2)
: 0);
: 0
);
</script>
<NavDropdown {headingText}>

36
src/components/SiteHeader/NavBar/index.svelte
View file

@ -35,27 +35,27 @@
<!-- svelte-ignore a11y_click_events_have_key_events -->
<li
class="nav-item category link"
onmouseenter={() => {
onmouseenter="{() => {
navTimeout = setTimeout(
() => activeSection.set(section.id),
timeout
);
}}
onfocus={() => activeSection.set(section.id)}
onmouseleave={() => {
}}"
onfocus="{() => activeSection.set(section.id)}"
onmouseleave="{() => {
clearTimeout(navTimeout);
activeSection.set(null);
}}
onblur={() => {
}}"
onblur="{() => {
clearTimeout(navTimeout);
activeSection.set(null);
}}
onclick={() => {
}}"
onclick="{() => {
if ($activeSection === section.id) {
clearTimeout(navTimeout);
activeSection.set(null);
}
}}
}}"
>
<div
class="nav-button link"
@ -88,24 +88,24 @@
<!-- svelte-ignore a11y_click_events_have_key_events -->
<li
class="nav-item"
onmouseenter={() => {
onmouseenter="{() => {
navTimeout = setTimeout(() => activeSection.set('more'), timeout);
}}
onfocus={() => activeSection.set('more')}
onmouseleave={() => {
}}"
onfocus="{() => activeSection.set('more')}"
onmouseleave="{() => {
clearTimeout(navTimeout);
activeSection.set(null);
}}
onblur={() => {
}}"
onblur="{() => {
clearTimeout(navTimeout);
activeSection.set(null);
}}
onclick={() => {
}}"
onclick="{() => {
if ($activeSection === 'more') {
clearTimeout(navTimeout);
activeSection.set(null);
}
}}
}}"
>
<div
class="nav-button more link"

4
src/components/SiteHeader/SiteHeader.svelte
View file

@ -77,9 +77,9 @@
aria-label="Menu"
aria-haspopup="true"
aria-expanded="{isMobileMenuOpen}"
onclick={() => {
onclick="{() => {
isMobileMenuOpen = !isMobileMenuOpen;
}}
}}"
>
<div class="button-container">
<MenuIcon />

37
src/components/Table/Pagination.svelte
View file

@ -3,33 +3,26 @@
import LeftArrow from './LeftArrow.svelte';
import RightArrow from './RightArrow.svelte';
interface Props {
/**
* The current page number.
* @type {number}
*/
* The current page number.
* @type {number}
*/
pageNumber?: number;
/**
* The default page size.
* @type {number}
*/
* The default page size.
* @type {number}
*/
pageSize?: number;
/**
* The number of records in the current page.
* @type {number}
*/
* The number of records in the current page.
* @type {number}
*/
pageLength?: number;
/**
* The total number of records in the data set.
* @type {number}
*/
* The total number of records in the data set.
* @type {number}
*/
n?: number;
}
@ -37,7 +30,7 @@
pageNumber = $bindable(1),
pageSize = 25,
pageLength = null,
n = null
n = null,
}: Props = $props();
let minRow = $derived(pageNumber * pageSize - pageSize + 1);
@ -58,7 +51,7 @@
</script>
<nav aria-label="pagination" class="pagination fmt-4">
<button onclick={goToPreviousPage} disabled="{pageNumber === 1}"
<button onclick="{goToPreviousPage}" disabled="{pageNumber === 1}"
><div class="icon-wrapper">
<LeftArrow />
<span class="visually-hidden">Previous page</span>
@ -70,7 +63,7 @@
</div>
</div>
<button
onclick={goToNextPage}
onclick="{goToNextPage}"
disabled="{pageNumber === Math.ceil(n / pageSize)}"
><div class="icon-wrapper">
<RightArrow />

17
src/components/Table/Select.svelte
View file

@ -2,19 +2,16 @@
import { createEventDispatcher } from 'svelte';
import type { Option } from '../@types/global';
interface Props {
/**
* The label that appears above the select input.
* @type {string}
*/
* The label that appears above the select input.
* @type {string}
*/
label?: string;
/**
* The label that appears above the select input.
* @type {Array}
*/
* The label that appears above the select input.
* @type {Array}
*/
options?: Option[];
}
@ -36,7 +33,7 @@
class="select--input body-caption fpx-2"
name="select--input"
id="select--input"
oninput={input}
oninput="{input}"
>
{#each options as obj}
<option value="{obj.value}">{obj.text}</option>

7
src/components/Table/SortArrow.svelte
View file

@ -5,13 +5,12 @@
*/
type SortDirection = 'ascending' | 'descending';
interface Props {
sortDirection?: SortDirection;
/**
* Whether or not this arrow is currently sorting. It is false by default.
* @type {boolean}
*/
* Whether or not this arrow is currently sorting. It is false by default.
* @type {boolean}
*/
active?: boolean;
}

4
src/components/Video/Controls.svelte
View file

@ -15,7 +15,7 @@
controlsBorderOffset,
resetCondition,
separateReplayIcon,
controlsColour
controlsColour,
} = $props();
function forwardBtnClick() {
@ -29,7 +29,7 @@
</script>
<button
onclick={forwardBtnClick}
onclick="{forwardBtnClick}"
style="
opacity: {controlsOpacity};
top: {controlsPosition === 'top left' || controlsPosition === 'top right' ?