Add /arubinosky
This commit is contained in:
144
apps/web/src/lib/components/seo/index.svelte
Normal file
144
apps/web/src/lib/components/seo/index.svelte
Normal file
@@ -0,0 +1,144 @@
|
||||
<!--
|
||||
Forked from artiebits/svelte-seo
|
||||
================================
|
||||
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2020 artiebits
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
import OpenGraphComponent from "./openGraph.svelte";
|
||||
import type { SeoProps } from "./types";
|
||||
|
||||
let {
|
||||
title,
|
||||
description,
|
||||
keywords,
|
||||
base,
|
||||
applicationName,
|
||||
themeColor,
|
||||
nofollow,
|
||||
noindex,
|
||||
nositelinkssearchbox,
|
||||
notranslate,
|
||||
canonical,
|
||||
amp,
|
||||
manifest,
|
||||
languageAlternates,
|
||||
twitter,
|
||||
openGraph,
|
||||
facebook,
|
||||
jsonLd,
|
||||
}: SeoProps = $props();
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
{#if title}
|
||||
<title>{title}</title>
|
||||
{/if}
|
||||
|
||||
{#if description}
|
||||
<meta name="description" content={description} />
|
||||
{/if}
|
||||
|
||||
{#if canonical}
|
||||
<link rel="canonical" href={canonical} />
|
||||
{/if}
|
||||
|
||||
{#if keywords}
|
||||
<meta name="keywords" content={keywords} />
|
||||
{/if}
|
||||
|
||||
{#if amp}
|
||||
<link rel="amphtml" href={amp} />
|
||||
{/if}
|
||||
|
||||
{#if manifest}
|
||||
<link rel="manifest" href={manifest} />
|
||||
{/if}
|
||||
|
||||
{#if applicationName}
|
||||
<meta name="application-name" content={applicationName} />
|
||||
{/if}
|
||||
|
||||
{#if languageAlternates}
|
||||
{#each languageAlternates as { href, hreflang }}
|
||||
<link rel="alternate" {href} {hreflang} />
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
{#if themeColor}
|
||||
<meta name="theme-color" content={themeColor} />
|
||||
{/if}
|
||||
|
||||
{#if base}
|
||||
<base href={base} />
|
||||
{/if}
|
||||
|
||||
{#if facebook?.appId}
|
||||
<meta property="fb:app_id" content={facebook.appId} />
|
||||
{/if}
|
||||
|
||||
<meta
|
||||
name="robots"
|
||||
content={`${noindex ? "noindex" : "index"},${
|
||||
nofollow ? "nofollow" : "follow"
|
||||
}`}
|
||||
/>
|
||||
<meta
|
||||
name="googlebot"
|
||||
content={`${noindex ? "noindex" : "index"},${
|
||||
nofollow ? "nofollow" : "follow"
|
||||
}`}
|
||||
/>
|
||||
|
||||
{#if nositelinkssearchbox}
|
||||
<meta name="google" content="nositelinkssearchbox" />
|
||||
{/if}
|
||||
|
||||
{#if notranslate}
|
||||
<meta name="google" content="notranslate" />
|
||||
{/if}
|
||||
|
||||
{#if twitter}
|
||||
{#each Object.entries(twitter) as [key, value]}
|
||||
{@const transformed = key
|
||||
.replace(/([a-z])([A-Z])/g, "$1:$2")
|
||||
.toLowerCase()}
|
||||
<!-- The `transformed` variable changes eg, twitter.title into twitter:title
|
||||
It loops over all the properties and changes the '.' into ':'
|
||||
-->
|
||||
<meta name="twitter:{transformed}" content={value} />
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
{#if openGraph}
|
||||
<OpenGraphComponent {openGraph} />
|
||||
{/if}
|
||||
|
||||
{#if jsonLd}
|
||||
{@const data = Object.assign({ "@context": "https://schema.org" }, jsonLd)}
|
||||
{@html `<script type="application/ld+json">${
|
||||
JSON.stringify(data) + "<"
|
||||
}/script>`}
|
||||
{/if}
|
||||
</svelte:head>
|
||||
@@ -1,11 +1,8 @@
|
||||
import type { ComponentProps } from "svelte";
|
||||
import type SvelteSeo from "svelte-seo";
|
||||
import type { SeoProps } from "./types";
|
||||
|
||||
import deepmerge from "deepmerge";
|
||||
|
||||
export type Seo = ComponentProps<SvelteSeo>;
|
||||
|
||||
export const defaultSeo: Seo = {
|
||||
export const defaultSeo: SeoProps = {
|
||||
title: "cannorin.net",
|
||||
description: "cannorin's website",
|
||||
themeColor: "#fafafa",
|
||||
@@ -26,13 +23,17 @@ export const defaultSeo: Seo = {
|
||||
};
|
||||
|
||||
export const mergeSeo = (
|
||||
target: Seo,
|
||||
...sources: (Seo | undefined | false)[]
|
||||
target: SeoProps,
|
||||
...sources: (SeoProps | undefined | false)[]
|
||||
) =>
|
||||
sources.reduce<Seo>(
|
||||
sources.reduce<SeoProps>(
|
||||
(acc, current) =>
|
||||
deepmerge(acc, current || {}, {
|
||||
arrayMerge: (_target, source) => source,
|
||||
}),
|
||||
target,
|
||||
);
|
||||
|
||||
import Component from "./index.svelte";
|
||||
|
||||
export default Component;
|
||||
120
apps/web/src/lib/components/seo/openGraph.svelte
Normal file
120
apps/web/src/lib/components/seo/openGraph.svelte
Normal file
@@ -0,0 +1,120 @@
|
||||
<!--
|
||||
Forked from artiebits/svelte-seo
|
||||
================================
|
||||
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2020 artiebits
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
import type { SeoProps } from "./types";
|
||||
let { openGraph }: { openGraph?: SeoProps["openGraph"] } = $props();
|
||||
</script>
|
||||
|
||||
{#if openGraph}
|
||||
{#each Object.entries(openGraph) as [key, value]}
|
||||
<!-- For openGraph, some of the keys have values as objects so we need to check
|
||||
before.
|
||||
-->
|
||||
{@const _type = typeof value}
|
||||
{#if _type !== "object"}
|
||||
{@const transform = key.replace(/([a-z])([A-Z])/g, "$1:$2").toLowerCase()}
|
||||
<meta property="og:{transform}" content={value} />
|
||||
{/if}
|
||||
{#if _type === "object"}
|
||||
{#if key === "images"}
|
||||
{#each openGraph.images ?? [] as image}
|
||||
{#each Object.entries(image) as [key, value]}
|
||||
<meta property="og:image:{key}" content={value.toString()} />
|
||||
{/each}
|
||||
{/each}
|
||||
{:else if key === "videos"}
|
||||
{#each openGraph.videos ?? [] as video}
|
||||
{#each Object.entries(video) as [key, value]}
|
||||
{#if key === "url"}
|
||||
<meta property="og:video" content={value.toString()} />
|
||||
{:else}
|
||||
<meta property="og:video:{key}" content={value.toString()} />
|
||||
{/if}
|
||||
{/each}
|
||||
{/each}
|
||||
{:else if key === "localeAlternate"}
|
||||
{#each openGraph.localeAlternate ?? [] as alternate}
|
||||
<meta property="og:locale:alternate" content={alternate} />
|
||||
{/each}
|
||||
{:else if key === "music"}
|
||||
{#each Object.entries(openGraph.music ?? {}) as [key, value]}
|
||||
{@const transform = key
|
||||
.replace(/([a-z])([A-Z])/g, "$1:$2")
|
||||
.toLowerCase()}
|
||||
<meta property="music:{transform}" content={value.toString()} />
|
||||
{/each}
|
||||
{:else if key === "movie"}
|
||||
{#each Object.entries(openGraph.movie ?? {}) as [key, value]}
|
||||
{#if typeof value === "object"}
|
||||
{#each value as propValue}
|
||||
<meta property="video:{key}" content={propValue} />
|
||||
{/each}
|
||||
{:else}
|
||||
{@const transform = key
|
||||
.replace(/([a-z])([A-Z])/g, "$1:$2")
|
||||
.toLowerCase()}
|
||||
<meta property="video:{transform}" content={value.toString()} />
|
||||
{/if}
|
||||
{/each}
|
||||
{:else if key === "article"}
|
||||
{#each Object.entries(openGraph.article ?? {}) as [key, value]}
|
||||
{#if typeof value === "object"}
|
||||
{#each value as propValue}
|
||||
<meta property="article:{key}" content={propValue} />
|
||||
{/each}
|
||||
{:else}
|
||||
{@const transform = key
|
||||
.replace(/([a-z])([A-Z])/g, "$1:$2")
|
||||
.toLowerCase()}
|
||||
<meta property="article:{transform}" content={value.toString()} />
|
||||
{/if}
|
||||
{/each}
|
||||
{:else if key === "book"}
|
||||
{#each Object.entries(openGraph.book ?? {}) as [key, value]}
|
||||
{#if typeof value === "object"}
|
||||
{#each value as propValue}
|
||||
<meta property="book:{key}" content={propValue} />
|
||||
{/each}
|
||||
{:else}
|
||||
{@const transform = key
|
||||
.replace(/([a-z])([A-Z])/g, "$1:$2")
|
||||
.toLowerCase()}
|
||||
<meta property="book:{transform}" content={value.toString()} />
|
||||
{/if}
|
||||
{/each}
|
||||
{:else if key === "profile"}
|
||||
{#each Object.entries(openGraph.profile ?? {}) as [key, value]}
|
||||
{@const transform = key
|
||||
.replace(/([a-z])([A-Z])/g, "$1:$2")
|
||||
.toLowerCase()}
|
||||
<meta property="profile:{transform}" content={value} />
|
||||
{/each}
|
||||
{/if}
|
||||
{/if}
|
||||
{/each}
|
||||
{/if}
|
||||
157
apps/web/src/lib/components/seo/types.ts
Normal file
157
apps/web/src/lib/components/seo/types.ts
Normal file
@@ -0,0 +1,157 @@
|
||||
/*
|
||||
Forked from artiebits/svelte-seo
|
||||
================================
|
||||
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2020 artiebits
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
*/
|
||||
|
||||
import type { Thing, WithContext } from "schema-dts";
|
||||
|
||||
export interface SeoProps {
|
||||
title?: string;
|
||||
description?: string;
|
||||
base?: string;
|
||||
keywords?: string;
|
||||
applicationName?: string;
|
||||
themeColor?: string;
|
||||
nofollow?: boolean;
|
||||
noindex?: boolean;
|
||||
nositelinkssearchbox?: boolean;
|
||||
notranslate?: boolean;
|
||||
canonical?: string;
|
||||
amp?: string;
|
||||
manifest?: string;
|
||||
languageAlternates?: Array<{ hreflang: string; href: string }>;
|
||||
twitter?: Twitter;
|
||||
facebook?: Facebook;
|
||||
openGraph?: OpenGraph;
|
||||
jsonLd?: Thing | WithContext<Thing>;
|
||||
}
|
||||
|
||||
export interface Facebook {
|
||||
appId: string;
|
||||
}
|
||||
|
||||
export interface Twitter {
|
||||
title?: string;
|
||||
description?: string;
|
||||
image?: string;
|
||||
imageAlt?: string;
|
||||
card?: "summary" | "summary_large_image" | "player" | "app";
|
||||
site?: string;
|
||||
creator?: string;
|
||||
player?: string;
|
||||
playerWidth?: string;
|
||||
playerHeight?: string;
|
||||
playerStream?: string;
|
||||
appNameIphone?: string;
|
||||
appIdIphone?: string;
|
||||
appUrlIphone?: string;
|
||||
appNameIpad?: string;
|
||||
appIdIpad?: string;
|
||||
appNameGoogleplay?: string;
|
||||
appIdGoogleplay?: string;
|
||||
appUrlGoogleplay?: string;
|
||||
}
|
||||
|
||||
export interface OpenGraph {
|
||||
title?: string;
|
||||
type?: string;
|
||||
url?: string;
|
||||
audio?: string;
|
||||
audioSecure_url?: string;
|
||||
audioType?: string;
|
||||
description?: string;
|
||||
determiner?: string;
|
||||
locale?: string;
|
||||
localeAlternate?: string[];
|
||||
site_name?: string;
|
||||
videos?: Array<{
|
||||
url: string;
|
||||
secure_url?: string;
|
||||
type?: string;
|
||||
alt?: string;
|
||||
width?: number | string;
|
||||
height?: number | string;
|
||||
}>;
|
||||
images?: Array<{
|
||||
url?: string;
|
||||
secure_url?: string;
|
||||
type?: string;
|
||||
alt?: string;
|
||||
width?: number | string;
|
||||
height?: number | string;
|
||||
}>;
|
||||
music?: OpenGraphMusic;
|
||||
movie?: OpenGraphVideo;
|
||||
article?: OpenGraphArticle;
|
||||
book?: OpenGraphBook;
|
||||
profile?: openGraphProfile;
|
||||
}
|
||||
|
||||
export interface OpenGraphMusic {
|
||||
duration?: number | string;
|
||||
album?: string;
|
||||
albumDisc?: number;
|
||||
albumTrack?: number;
|
||||
musician?: string;
|
||||
creator?: string;
|
||||
song?: string;
|
||||
songDisc?: number | string;
|
||||
songTrack?: number | string;
|
||||
release_date?: string;
|
||||
}
|
||||
|
||||
export interface OpenGraphVideo {
|
||||
actor?: string[];
|
||||
actorRole?: string;
|
||||
director?: string[];
|
||||
writer?: string[];
|
||||
duration?: number | string;
|
||||
release_date?: string;
|
||||
tag?: string[];
|
||||
series?: string;
|
||||
}
|
||||
|
||||
export interface OpenGraphArticle {
|
||||
published_time?: string;
|
||||
modified_time?: string;
|
||||
expiration_time?: string;
|
||||
author?: string[];
|
||||
section?: string;
|
||||
tag?: string[];
|
||||
}
|
||||
|
||||
export interface OpenGraphBook {
|
||||
author?: string[];
|
||||
isbn?: string | number;
|
||||
release_date?: string;
|
||||
tag?: string[];
|
||||
}
|
||||
|
||||
export interface openGraphProfile {
|
||||
first_name?: string;
|
||||
last_name?: string;
|
||||
username?: string;
|
||||
gender?: "male" | "female";
|
||||
}
|
||||
Reference in New Issue
Block a user