renames Foreground to ScrollyVideoForeground, adds to exports
This commit is contained in:
MinamiFunakoshiTR
parent
339d4cbba8
commit
a5e478575e
7 changed files with 202 additions and 202 deletions
|
|
@ -72,7 +72,7 @@ In your graphics kit project, import your ai2svelte graphics in `App.svelte` and
|
|||
</script>
|
||||
```
|
||||
|
||||
Then add the following structure to your ArchieML Doc, making sure that the names of your charts in the `aiCharts` object match the names of each step's `background` in the ArchieML doc:
|
||||
Then add the following structure to your ArchieML doc, making sure that the names of your charts in the `aiCharts` object match the names of each step's `background` in the ArchieML doc:
|
||||
|
||||
```yaml
|
||||
# ArchieML doc
|
||||
|
|
@ -217,7 +217,7 @@ In your graphics kit project's `App.svelte`, import your custom foregroud compon
|
|||
</script>
|
||||
```
|
||||
|
||||
Then add the following structure to your ArchieML Doc, making sure that the names of your charts in the `aiCharts` and `foregroundComponents` objects match the names of each step's `background` and `foreground` in the ArchieML doc:
|
||||
Then add the following structure to your ArchieML doc, making sure that the names of your charts in the `aiCharts` and `foregroundComponents` objects match the names of each step's `background` and `foreground` in the ArchieML doc:
|
||||
|
||||
```yaml
|
||||
# ArchieML doc
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { Meta } from '@storybook/blocks';
|
||||
|
||||
import * as ScrollyVideoStories from './ScrollyVideo.stories.svelte';
|
||||
|
||||
|
||||
<Meta of={ScrollyVideoStories} />
|
||||
|
||||
# ScrollyVideo
|
||||
|
|
@ -116,11 +116,184 @@ The `autoplay` option combines the autoplay and scrollytelling experience. If se
|
|||
/>
|
||||
```
|
||||
|
||||
## Using with ScrollerBase
|
||||
## Time-based foregrounds with ArchieML
|
||||
|
||||
The `ScrollyVideo` component can also be used inside the `ScrollerBase` component to create a scroller-based layout. This allows for more complex interactions and layouts, such as combining ai2svelte components with scrolly video content.
|
||||
The `ScrollyVideo` component can also be used to display foregrounds, such as headlines, blurbs, or ai2svelte components, at specific times in the video. To do so, use the `Foreground` component.
|
||||
|
||||
[Demo](?path=/story/components-graphics-scrollyvideo--inside-scroller-base)
|
||||
With the graphics kit, you'll likely get your text and prop values from an ArchieML doc...
|
||||
|
||||
|
||||
```yaml
|
||||
# ArchieML doc
|
||||
[blocks]
|
||||
type: scrolly-video
|
||||
src: videos/alps.mp4
|
||||
height: 800svh
|
||||
|
||||
# Array of foregrounds
|
||||
[.foregrounds]
|
||||
startTime: 3
|
||||
endTime: 7
|
||||
text: #### The Alps\n\nThe Alps stretch across eight countries: France, Switzerland, Italy, Monaco, Liechtenstein, Austria, Germany, and Slovenia, covering about 1,200 kilometers (750 miles).
|
||||
:end
|
||||
|
||||
startTime: 9
|
||||
endTime: 12
|
||||
text: Mont Blanc, standing at 4,809 meters (15,777 feet), is the highest peak in the Alps and Western Europe, though there's ongoing debate between France and Italy about exactly where the summit lies.
|
||||
:end
|
||||
|
||||
startTime: 16
|
||||
endTime: 20
|
||||
text: #### History\n\nThe Alps were formed around **65 million years** ago when the African and Eurasian tectonic plates collided, pushing the land upward.Over 14 million people live in the Alpine region, with tourism supporting approximately 120 million visitors annually.
|
||||
:end
|
||||
[]
|
||||
[]
|
||||
```
|
||||
|
||||
... which you'll parse out of a ArchieML block object before passing to the `ScrollyVideo` and `Foreground` components.
|
||||
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
import {
|
||||
ScrollyVideo,
|
||||
Foreground,
|
||||
} from '@reuters-graphics/graphics-components';
|
||||
import { assets } from '$app/paths';
|
||||
</script>
|
||||
|
||||
{#if block.type == 'scrolly-video'}
|
||||
<ScrollyVideo id={block.id} src={block.src} height={block.height}>
|
||||
<Foreground startTime={0} endTime={2}>
|
||||
<Headline
|
||||
class="custom-headline"
|
||||
hed={content.hed}
|
||||
dek={content.dek}
|
||||
section={content.section}
|
||||
sectionUrl={content.sectionUrl}
|
||||
authors={content.authors}
|
||||
publishTime={content.publishedDate}
|
||||
updateTime={content.updatedDate}
|
||||
/>
|
||||
</Foreground>
|
||||
{#each block.foregrounds as foreground}
|
||||
<Foreground
|
||||
startTime={parseFloat(foreground.startTime)}
|
||||
endTime={parseFloat(foreground.endTime)}
|
||||
text={foreground.text}
|
||||
backgroundColor="rgba(0, 0, 0, 0.8)"
|
||||
position="bottom center"
|
||||
/>
|
||||
{/each}
|
||||
</ScrollyVideo>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
:global {
|
||||
.custom-headline * {
|
||||
color: white;
|
||||
text-shadow: 0 0 10px black;
|
||||
}
|
||||
|
||||
#alps-scrolly .foreground-text {
|
||||
* {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
|
||||
## Time based Foregrounds
|
||||
|
||||
The `ScrollyVideo` component can also be used to display different foregrounds based on the current time in the video. This is useful for creating interactive experiences where the content changes as the video progresses. To throw off some ideas, one could add `Headline`, `GraphicBlock`, `FeaturePhoto` or any other component to the foreground based on the current time in the video. This can be achieved by adding `Foreground` components, along with their **startTime** and **endTime**, as a child to the main `ScrollyVideo` component.
|
||||
|
||||
[Demo](?path=/story/components-graphics-scrollyvideo--time-based-foregrounds)
|
||||
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
import { assets } from '$app/paths';
|
||||
|
||||
import {
|
||||
Headline,
|
||||
GraphicBlock,
|
||||
ScrollyVideo,
|
||||
Foreground,
|
||||
} from '@reuters-graphics/graphics-components';
|
||||
import Annotation1 from './ai2svelte/annotation1.svelte';
|
||||
import Annotation2 from './ai2svelte/annotation2.svelte';
|
||||
import Annotation3 from './ai2svelte/annotation3.svelte';
|
||||
import Annotation4 from './ai2svelte/annotation4.svelte';
|
||||
|
||||
let width = $state(1);
|
||||
</script>
|
||||
|
||||
<svelte:window bind:innerWidth={width} />
|
||||
|
||||
{#snippet ScrollForeground()}
|
||||
<Foreground startTime={0} endTime={0.3}>
|
||||
<Headline
|
||||
class="custom-headline"
|
||||
hed="ScrollyVideo inside ScrollerBase"
|
||||
dek="This is a demo of ScrollyVideo inside ScrollerBase component."
|
||||
section={'Reuters Graphics'}
|
||||
authors={['Jane Doe']}
|
||||
publishTime={new Date('2020-01-01').toISOString()}
|
||||
/>
|
||||
</Foreground>
|
||||
<Foreground startTime={0.3} endTime={2.2}>
|
||||
<GraphicBlock title="" description="" width="fluid">
|
||||
<Annotation1 />
|
||||
</GraphicBlock>
|
||||
</Foreground>
|
||||
<Foreground startTime={2.2} endTime={3.2}>
|
||||
<GraphicBlock title="" description="" width="fluid">
|
||||
<Annotation2 />
|
||||
</GraphicBlock>
|
||||
</Foreground>
|
||||
<Foreground startTime={3.2} endTime={4.5}>
|
||||
<GraphicBlock title="" description="" width="fluid">
|
||||
<Annotation3 />
|
||||
</GraphicBlock>
|
||||
</Foreground>
|
||||
<Foreground startTime={6.5} endTime={8}>
|
||||
<GraphicBlock title="" description="" width="fluid">
|
||||
<Annotation4 />
|
||||
</GraphicBlock>
|
||||
</Foreground>
|
||||
{/snippet}
|
||||
|
||||
{#snippet ScrollVideo(height: string, VideoSrc: string)}
|
||||
<ScrollyVideo {height} src={VideoSrc} useWebCodecs={true} showDebugInfo>
|
||||
{@render ScrollForeground()}
|
||||
</ScrollyVideo>
|
||||
{/snippet}
|
||||
|
||||
{#if width < 600}
|
||||
{@render ScrollVideo('800svh', `${assets}/videos/sm.mp4`)}
|
||||
{:else if width < 1200}
|
||||
{@render ScrollVideo('800svh', `${assets}/videos/md.mp4`)}
|
||||
{:else}
|
||||
{@render ScrollVideo('800svh', `${assets}/videos/lg.mp4`)}
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
:global(.custom-headline *) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
:global(.scrolly-video-foreground) {
|
||||
filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.85));
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
|
||||
## Using with `ScrollerBase`
|
||||
|
||||
The `ScrollyVideo` component can be used inside the [ScrollerBase](?path=/story/components-graphics-scrollerbase--docs) component to add foreground content. This allows for more complex interactions and layouts, such as adding ai2svelte components in the foreground.
|
||||
|
||||
[Demo](?path=/story/components-graphics-scrollyvideo--scroller-base)
|
||||
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
|
|
@ -293,180 +466,6 @@ The `ScrollyVideo` component can also be used inside the `ScrollerBase` componen
|
|||
</style>
|
||||
```
|
||||
|
||||
## Time based Foregrounds
|
||||
|
||||
The `ScrollyVideo` component can also be used to display different foregrounds based on the current time in the video. This is useful for creating interactive experiences where the content changes as the video progresses. To throw off some ideas, one could add `Headline`, `GraphicBlock`, `FeaturePhoto` or any other component to the foreground based on the current time in the video. This can be achieved by adding `Foreground` components, along with their **startTime** and **endTime**, as a child to the main `ScrollyVideo` component.
|
||||
|
||||
[Demo](?path=/story/components-graphics-scrollyvideo--time-based-foregrounds)
|
||||
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
import { assets } from '$app/paths';
|
||||
|
||||
import {
|
||||
Headline,
|
||||
GraphicBlock,
|
||||
ScrollyVideo,
|
||||
Foreground,
|
||||
} from '@reuters-graphics/graphics-components';
|
||||
import Annotation1 from './ai2svelte/annotation1.svelte';
|
||||
import Annotation2 from './ai2svelte/annotation2.svelte';
|
||||
import Annotation3 from './ai2svelte/annotation3.svelte';
|
||||
import Annotation4 from './ai2svelte/annotation4.svelte';
|
||||
|
||||
let width = $state(1);
|
||||
</script>
|
||||
|
||||
<svelte:window bind:innerWidth={width} />
|
||||
|
||||
{#snippet ScrollForeground()}
|
||||
<Foreground startTime={0} endTime={0.3}>
|
||||
<Headline
|
||||
class="custom-headline"
|
||||
hed="ScrollyVideo inside ScrollerBase"
|
||||
dek="This is a demo of ScrollyVideo inside ScrollerBase component."
|
||||
section={'Reuters Graphics'}
|
||||
authors={['Jane Doe']}
|
||||
publishTime={new Date('2020-01-01').toISOString()}
|
||||
/>
|
||||
</Foreground>
|
||||
<Foreground startTime={0.3} endTime={2.2}>
|
||||
<GraphicBlock title="" description="" width="fluid">
|
||||
<Annotation1 />
|
||||
</GraphicBlock>
|
||||
</Foreground>
|
||||
<Foreground startTime={2.2} endTime={3.2}>
|
||||
<GraphicBlock title="" description="" width="fluid">
|
||||
<Annotation2 />
|
||||
</GraphicBlock>
|
||||
</Foreground>
|
||||
<Foreground startTime={3.2} endTime={4.5}>
|
||||
<GraphicBlock title="" description="" width="fluid">
|
||||
<Annotation3 />
|
||||
</GraphicBlock>
|
||||
</Foreground>
|
||||
<Foreground startTime={6.5} endTime={8}>
|
||||
<GraphicBlock title="" description="" width="fluid">
|
||||
<Annotation4 />
|
||||
</GraphicBlock>
|
||||
</Foreground>
|
||||
{/snippet}
|
||||
|
||||
{#snippet ScrollVideo(height: string, VideoSrc: string)}
|
||||
<ScrollyVideo {height} src={VideoSrc} useWebCodecs={true} showDebugInfo>
|
||||
{@render ScrollForeground()}
|
||||
</ScrollyVideo>
|
||||
{/snippet}
|
||||
|
||||
{#if width < 600}
|
||||
{@render ScrollVideo('800svh', `${assets}/videos/sm.mp4`)}
|
||||
{:else if width < 1200}
|
||||
{@render ScrollVideo('800svh', `${assets}/videos/md.mp4`)}
|
||||
{:else}
|
||||
{@render ScrollVideo('800svh', `${assets}/videos/lg.mp4`)}
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
:global(.custom-headline *) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
:global(.scrolly-video-foreground) {
|
||||
filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.85));
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## With Captions
|
||||
|
||||
The `ScrollyVideo` component can also be used to display captions at specific times in the video. This is useful for providing additional context or information to the viewer. To add captions, you can use the `Foreground` component and pass on the caption as **text** prop.
|
||||
|
||||
To quickly set it up using ArchieML, you can use the following format on your RNGS doc or Google doc:
|
||||
|
||||
```yaml
|
||||
# ArchieML doc
|
||||
[blocks]
|
||||
|
||||
type: scrolly-video
|
||||
id: alps-scrolly
|
||||
src: videos/alps.mp4
|
||||
height: 800svh
|
||||
|
||||
# Array of foregrounds
|
||||
[.foregrounds]
|
||||
startTime: 3
|
||||
endTime: 7
|
||||
text: "#### The Alps\n\nThe Alps stretch across eight countries: France, Switzerland, Italy, Monaco, Liechtenstein, Austria, Germany, and Slovenia, covering about 1,200 kilometers (750 miles)."
|
||||
:end
|
||||
|
||||
startTime: 9
|
||||
endTime: 12
|
||||
text: "Mont Blanc, standing at 4,809 meters (15,777 feet), is the highest peak in the Alps and Western Europe, though there's ongoing debate between France and Italy about exactly where the summit lies."
|
||||
:end
|
||||
|
||||
startTime: 16
|
||||
endTime: 20
|
||||
text: "#### History\n\nThe Alps were formed around **65 million years** ago when the African and Eurasian tectonic plates collided, pushing the land upward.Over 14 million people live in the Alpine region, with tourism supporting approximately 120 million visitors annually."
|
||||
:end
|
||||
[]
|
||||
:end
|
||||
|
||||
[]
|
||||
```
|
||||
|
||||
Then add the following code to your App.svelte or the component where you want to display the scrolly video:
|
||||
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
import {
|
||||
ScrollyVideo,
|
||||
Foreground,
|
||||
} from '@reuters-graphics/graphics-components';
|
||||
import { assets } from '$app/paths';
|
||||
</script>
|
||||
|
||||
{#if block.type == 'scrolly-video'}
|
||||
<ScrollyVideo id={block.id} src={block.src} height={block.height}>
|
||||
<Foreground startTime={0} endTime={2}>
|
||||
<Headline
|
||||
class="custom-headline"
|
||||
hed={content.hed}
|
||||
dek={content.dek}
|
||||
section={content.section}
|
||||
sectionUrl={content.sectionUrl}
|
||||
authors={content.authors}
|
||||
publishTime={content.publishedDate}
|
||||
updateTime={content.updatedDate}
|
||||
/>
|
||||
</Foreground>
|
||||
{#each block.foregrounds as caption}
|
||||
<Foreground
|
||||
startTime={parseFloat(caption.startTime)}
|
||||
endTime={parseFloat(caption.endTime)}
|
||||
text={caption.text}
|
||||
backgroundColor="rgba(0, 0, 0, 0.8)"
|
||||
position="bottom center"
|
||||
/>
|
||||
{/each}
|
||||
</ScrollyVideo>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
:global {
|
||||
.custom-headline * {
|
||||
color: white;
|
||||
text-shadow: 0 0 10px black;
|
||||
}
|
||||
|
||||
#alps-scrolly .foreground-text {
|
||||
* {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## Advanced usecases
|
||||
|
||||
For advanced use cases such as looping a particular section of the video, or jumping to a specific time in the video, you can bind `scrollyVideo` prop and take benefits of methods such as `setVideoPercentage` or bindable methods such as `onReady` and `onChange`. This allows for fine-grained control over the video playback and interaction with the scroll position.
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
import ScrollyVideo from './ScrollyVideo.svelte';
|
||||
import WithScrollerBase from './demo/WithScrollerBase.svelte';
|
||||
import WithTimeline from './demo/WithTimeline.svelte';
|
||||
import BasicTextBoxes from './demo/BasicTextBoxes.svelte';
|
||||
import WithTextForegrounds from './demo/WithTextForegrounds.svelte';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Components/Graphics/ScrollyVideo',
|
||||
|
|
@ -194,5 +194,5 @@
|
|||
</Story>
|
||||
|
||||
<Story name="Basic text foreground" {args}>
|
||||
<BasicTextBoxes />
|
||||
<WithTextForegrounds />
|
||||
</Story>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script lang="ts">
|
||||
import ScrollyVideo from '../ScrollyVideo.svelte';
|
||||
import Foreground from '../Foreground.svelte';
|
||||
import ScrollyVideoForeground from '../ScrollyVideoForeground.svelte';
|
||||
import Drone from '../videos/drone.mp4';
|
||||
import Headline from '../../Headline/Headline.svelte';
|
||||
</script>
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
useWebCodecs={true}
|
||||
showDebugInfo
|
||||
>
|
||||
<Foreground startTime={0} endTime={2}>
|
||||
<ScrollyVideoForeground startTime={0} endTime={2}>
|
||||
<Headline
|
||||
class="custom-headline"
|
||||
hed="The Alps"
|
||||
|
|
@ -22,28 +22,28 @@
|
|||
publishTime={new Date('2020-01-01').toISOString()}
|
||||
hedSize="bigger"
|
||||
/>
|
||||
</Foreground>
|
||||
<Foreground
|
||||
</ScrollyVideoForeground>
|
||||
<ScrollyVideoForeground
|
||||
startTime={3}
|
||||
endTime={7}
|
||||
backgroundColor="rgba(0, 0, 0, 0.8)"
|
||||
text={'#### The Alps\n\nThe Alps stretch across eight countries: France, Switzerland, Italy, Monaco, Liechtenstein, Austria, Germany, and Slovenia, covering about 1,200 kilometers (750 miles).'}
|
||||
position="bottom center"
|
||||
></Foreground>
|
||||
<Foreground
|
||||
></ScrollyVideoForeground>
|
||||
<ScrollyVideoForeground
|
||||
startTime={9}
|
||||
endTime={12}
|
||||
backgroundColor="rgba(0, 0, 0, 0.8)"
|
||||
text={"Mont Blanc, standing at 4,809 meters (15,777 feet), is the highest peak in the Alps and Western Europe, though there's ongoing debate between France and Italy about exactly where the summit lies."}
|
||||
position="bottom center"
|
||||
></Foreground>
|
||||
<Foreground
|
||||
></ScrollyVideoForeground>
|
||||
<ScrollyVideoForeground
|
||||
startTime={16}
|
||||
endTime={20}
|
||||
backgroundColor="rgba(0, 0, 0, 0.8)"
|
||||
text={'#### History\n\nThe Alps were formed around **65 million years** ago when the African and Eurasian tectonic plates collided, pushing the land upward.Over 14 million people live in the Alpine region, with tourism supporting approximately 120 million visitors annually.'}
|
||||
position="bottom center"
|
||||
></Foreground>
|
||||
></ScrollyVideoForeground>
|
||||
</ScrollyVideo>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<script lang="ts">
|
||||
import ScrollyVideo from '../ScrollyVideo.svelte';
|
||||
import Foreground from '../Foreground.svelte';
|
||||
import ScrollyVideoForeground from '../ScrollyVideoForeground.svelte';
|
||||
import SM from '../videos/waves_sm.mp4';
|
||||
import MD from '../videos/waves_md.mp4';
|
||||
import LG from '../videos/waves_lg.mp4';
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
<svelte:window bind:innerWidth={width} />
|
||||
|
||||
{#snippet ScrollForeground()}
|
||||
<Foreground startTime={0} endTime={0.3}>
|
||||
<ScrollyVideoForeground startTime={0} endTime={0.3}>
|
||||
<Headline
|
||||
class="custom-headline"
|
||||
hed="ScrollyVideo inside ScrollerBase"
|
||||
|
|
@ -26,27 +26,27 @@
|
|||
authors={['Jane Doe']}
|
||||
publishTime={new Date('2020-01-01').toISOString()}
|
||||
/>
|
||||
</Foreground>
|
||||
<Foreground startTime={0.3} endTime={2.2}>
|
||||
</ScrollyVideoForeground>
|
||||
<ScrollyVideoForeground startTime={0.3} endTime={2.2}>
|
||||
<GraphicBlock title="" description="" width="fluid">
|
||||
<Annotation1 />
|
||||
</GraphicBlock>
|
||||
</Foreground>
|
||||
<Foreground startTime={2.2} endTime={3.2}>
|
||||
</ScrollyVideoForeground>
|
||||
<ScrollyVideoForeground startTime={2.2} endTime={3.2}>
|
||||
<GraphicBlock title="" description="" width="fluid">
|
||||
<Annotation2 />
|
||||
</GraphicBlock>
|
||||
</Foreground>
|
||||
<Foreground startTime={3.2} endTime={4.5}>
|
||||
</ScrollyVideoForeground>
|
||||
<ScrollyVideoForeground startTime={3.2} endTime={4.5}>
|
||||
<GraphicBlock title="" description="" width="fluid">
|
||||
<Annotation3 />
|
||||
</GraphicBlock>
|
||||
</Foreground>
|
||||
<Foreground startTime={6.5} endTime={8}>
|
||||
</ScrollyVideoForeground>
|
||||
<ScrollyVideoForeground startTime={6.5} endTime={8}>
|
||||
<GraphicBlock title="" description="" width="fluid">
|
||||
<Annotation4 />
|
||||
</GraphicBlock>
|
||||
</Foreground>
|
||||
</ScrollyVideoForeground>
|
||||
{/snippet}
|
||||
|
||||
{#snippet ScrollVideo(height: string, VideoSrc: string)}
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@ export { default as SiteHeadline } from './components/SiteHeadline/SiteHeadline.
|
|||
export { default as Spinner } from './components/Spinner/Spinner.svelte';
|
||||
export { default as ScrollerBase } from './components/ScrollerBase/ScrollerBase.svelte';
|
||||
export { default as ScrollyVideo } from './components/ScrollyVideo/ScrollyVideo.svelte';
|
||||
export { default as ScrollyVideoForeground } from './components/ScrollyVideo/ScrollyVideoForeground.svelte';
|
||||
export { default as SponsorshipAd } from './components/AdSlot/SponsorshipAd.svelte';
|
||||
export { default as Table } from './components/Table/Table.svelte';
|
||||
export { default as Theme, themes } from './components/Theme/Theme.svelte';
|
||||
|
|
|
|||
Loading…
Reference in a new issue