cleaned up docs

This commit is contained in:
MinamiFunakoshiTR 2025-03-11 12:34:27 -07:00
parent 2e37d39fda
commit b6f585f7c0
Failed to extract signature
3 changed files with 20 additions and 31 deletions

View file

@ -1,4 +1,4 @@
import { Meta } from '@storybook/blocks';
import { Meta, Canvas } from '@storybook/blocks';
import * as SEOStories from './SEO.stories.svelte';
@ -21,7 +21,7 @@ The `SEO` component adds essential metadata to pages.
seoTitle="A title for Google"
seoDescription="A description for Google"
shareTitle="A title for Twitter/Facebook"
shareDecription="A description for Twitter/Facebook"
shareDescription="A description for Twitter/Facebook"
shareImgPath="https://graphics.reuters.com/world-coronavirus-tracker-and-maps/assets/images/share.jpg"
shareImgAlt="An image showing global COVID infection rates"
publishTime="2020-09-15T00:00:00.000Z"
@ -75,3 +75,6 @@ shareImgAlt: Alt text for share image.
```
> **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.
<Canvas of={SEOStories.Demo} />
```

View file

@ -8,14 +8,19 @@
});
</script>
<div>View page source to see the SEO metadata.</div>
<Story
name="Demo"
args={{
seoTitle: 'blah',
baseUrl: 'https://graphics.reuters.com',
pageUrl: new URL('https://graphics.reuters.com/hello-world/'),
publishTime: new Date('2020-09-15').toISOString(),
// pageUrl:{new URL(
// 'https://graphics.reuters.com/world-coronavirus-tracker-and-maps/'
// )}
seoTitle: 'A title for Google',
seoDescription: 'A description for Google',
shareTitle: 'A title for Twitter/Facebook',
shareDescription: 'A description for Twitter/Facebook',
shareImgPath:
'https://graphics.reuters.com/world-coronavirus-tracker-and-maps/assets/images/share.jpg',
}}
>
View page source to see the SEO metadata.
</Story>
/>

View file

@ -7,61 +7,43 @@
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`.
*/
baseUrl?: string;
baseUrl: string;
/**
* [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object for the page.
* @required
* @type {URL}
*/
pageUrl?: URL | null;
pageUrl: URL | null;
/**
* SEO title
* @required
* @type {string}
*/
seoTitle: string;
/**
* SEO description
* @required
* @type {string}
*/
seoDescription: string;
/**
* Share title
* @required
* @type {string}
*/
shareTitle: string;
/**
* Share description
* @required
* @type {string}
*/
shareDescription: string;
/**
* Share image path. **Must be an absolute path.**
* @required
* @type {string}
*/
shareImgPath: 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}
*/
publishTime?: 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;
/**
@ -71,7 +53,7 @@
}
let {
baseUrl = '',
baseUrl,
pageUrl = null,
seoTitle,
seoDescription,
@ -83,7 +65,6 @@
updateTime = '',
authors = [],
}: Props = $props();
const getOrigin = (baseUrl: string) => {
try {
return new URL(baseUrl).origin;