cleaned up docs
This commit is contained in:
parent
2e37d39fda
commit
b6f585f7c0
3 changed files with 20 additions and 31 deletions
|
|
@ -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} />
|
||||
```
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue