LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-09 04:22:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

feata: METADATA!

Browse Source
This commit is contained in:
Torsten Dittmann
2023-09-27 20:39:57 +02:00
parent e71888654d
commit b677efb4db
27 changed files with 471 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -36,6 +36,7 @@
"svelte": "^4.2.0", "svelte": "^4.2.0",
"svelte-check": "^3.5.1", "svelte-check": "^3.5.1",
"svelte-markdoc-preprocess": "^0.3.2", "svelte-markdoc-preprocess": "^0.3.2",
"svelte-seo": "^1.5.4",
"svelte-sequential-preprocessor": "^2.0.1", "svelte-sequential-preprocessor": "^2.0.1",
"svgo": "^3.0.2", "svgo": "^3.0.2",
"svgtofont": "^4.0.0", "svgtofont": "^4.0.0",

25
pnpm-lock.yaml generated
View File

@@ -13,7 +13,7 @@ dependencies:
version: 0.1.0-next.9 version: 0.1.0-next.9
'@appwrite.io/repo': '@appwrite.io/repo':
specifier: github:appwrite/appwrite specifier: github:appwrite/appwrite
version: github.com/appwrite/appwrite/c273e3d8e19ffbe4ebea2644e6318e01514c8217 version: github.com/appwrite/appwrite/59a850d8b8f2ff3a951b386f65e25a65efb7816a
'@fontsource/inter': '@fontsource/inter':
specifier: ^5.0.8 specifier: ^5.0.8
version: 5.0.8 version: 5.0.8
@@ -94,6 +94,9 @@ devDependencies:
svelte-markdoc-preprocess: svelte-markdoc-preprocess:
specifier: ^0.3.2 specifier: ^0.3.2
version: 0.3.2 version: 0.3.2
svelte-seo:
specifier: ^1.5.4
version: 1.5.4(typescript@5.2.2)
svelte-sequential-preprocessor: svelte-sequential-preprocessor:
specifier: ^2.0.1 specifier: ^2.0.1
version: 2.0.1 version: 2.0.1
@@ -3943,6 +3946,14 @@ packages:
resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==} resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}
dev: true dev: true
/schema-dts@1.1.2(typescript@5.2.2):
resolution: {integrity: sha512-MpNwH0dZJHinVxk9bT8XUdjKTxMYrA5bLtrrGmFA6PTLwlOKnhi67XoRd6/ty+Djt6ZC0slR57qFhZDNMI6DhQ==}
peerDependencies:
typescript: '>=4.1.0'
dependencies:
typescript: 5.2.2
dev: true
/semver@7.5.4: /semver@7.5.4:
resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==} resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
engines: {node: '>=10'} engines: {node: '>=10'}
@@ -4390,6 +4401,14 @@ packages:
typescript: 5.2.2 typescript: 5.2.2
dev: true dev: true
/svelte-seo@1.5.4(typescript@5.2.2):
resolution: {integrity: sha512-pevGUiWkqLrSWXVkxE0SbkBLNsz2dVaiK8/kBq2eUHYdyzuPEZGbqtUARyJZHouv28xre7IU9t0VnoYt8d4kzA==}
dependencies:
schema-dts: 1.1.2(typescript@5.2.2)
transitivePeerDependencies:
- typescript
dev: true
/svelte-sequential-preprocessor@2.0.1: /svelte-sequential-preprocessor@2.0.1:
resolution: {integrity: sha512-N5JqlBni6BzElxmuFrOPxOJnjsxh1cFDACLEVKs8OHBcx8ZNRO1p5SxuQex1m3qbLzAC8G99EHeWcxGkjyKjLQ==} resolution: {integrity: sha512-N5JqlBni6BzElxmuFrOPxOJnjsxh1cFDACLEVKs8OHBcx8ZNRO1p5SxuQex1m3qbLzAC8G99EHeWcxGkjyKjLQ==}
engines: {node: '>=16'} engines: {node: '>=16'}
@@ -5067,8 +5086,8 @@ packages:
engines: {node: '>=12.20'} engines: {node: '>=12.20'}
dev: true dev: true
github.com/appwrite/appwrite/c273e3d8e19ffbe4ebea2644e6318e01514c8217: github.com/appwrite/appwrite/59a850d8b8f2ff3a951b386f65e25a65efb7816a:
resolution: {tarball: https://codeload.github.com/appwrite/appwrite/tar.gz/c273e3d8e19ffbe4ebea2644e6318e01514c8217} resolution: {tarball: https://codeload.github.com/appwrite/appwrite/tar.gz/59a850d8b8f2ff3a951b386f65e25a65efb7816a}
name: appwrite name: appwrite
version: 0.0.0 version: 0.0.0
dev: false dev: false

1
src/app.html
View File

@@ -5,6 +5,7 @@
<link rel="icon" type="image/svg+xml" href="/images/logos/logo.svg" /> <link rel="icon" type="image/svg+xml" href="/images/logos/logo.svg" />
<link rel="stylesheet" href="/icon-font/aw-icon.css" /> <link rel="stylesheet" href="/icon-font/aw-icon.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="”twitter:site”" content="@appwrite" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body class="theme-dark" data-sveltekit-preload-data="hover"> <body class="theme-dark" data-sveltekit-preload-data="hover">

86
src/lib/components/Metadata.svelte
View File

@@ -1,86 +0,0 @@
<script lang="ts" context="module">
type MetaDataType = {
title: string;
description: string;
ogImage: string;
ogTitle: string;
ogDescription: string;
author: AuthorData;
post: PostsData;
};
const metadata = writable<Partial<MetaDataType>>();
export const DEFAULT_HOST = 'https://website-appwrite.vercel.app';
export function buildOpenGraphImage(title: string, description: string): string {
return `https://og.appwrite.global/image.png?title=${encodeURIComponent(
title
)}&subtitle=${encodeURIComponent(description)}`;
}
export function setMetadata(data: Partial<MetaDataType>) {
metadata.set(data);
}
</script>
<script lang="ts">
import type { AuthorData } from '$markdoc/layouts/Author.svelte';
import type { PostsData } from '$markdoc/layouts/Post.svelte';
import { writable } from 'svelte/store';
function createSchemaAuthor(author: AuthorData): string {
return JSON.stringify({
'@context': 'https://schema.org',
'@type': 'Person',
name: author.name,
url: author.href,
image: author.avatar
});
}
function createSchemaPost(post: PostsData): string {
return JSON.stringify({
'@context': 'https://schema.org',
'@type': 'BlogPosting',
headline: post.title,
image: post.cover,
datePublished: post.date,
dateModified: post.date
});
}
</script>
{#if $metadata?.title}
<title>{$metadata.title}</title>
<meta name="”twitter:site”" content="@appwrite" />
{#if !$metadata?.ogTitle}
<meta property="og:title" content={$metadata.title} />
<meta name="”twitter:title”" content={$metadata.title} />
{/if}
{/if}
{#if $metadata?.description}
<meta name="description" content={$metadata.description} />
{#if !$metadata?.ogDescription}
<meta property="og:description" content={$metadata.description} />
<meta name="”twitter:description" content={$metadata.description} />
{/if}
{/if}
{#if $metadata?.ogImage}
<meta property="og:image" content={$metadata.ogImage} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:image" content={$metadata.ogImage} />
<meta name="twitter:card" content="summary_large_image" />
{/if}
{#if $metadata?.ogTitle}
<meta property="og:title" content={$metadata.ogTitle} />
<meta name="”twitter:title”" content={$metadata.ogTitle} />
{/if}
{#if $metadata?.ogDescription}
<meta property="og:description" content={$metadata.ogDescription} />
<meta name="”twitter:description" content={$metadata.ogDescription} />
{/if}
{#if $metadata?.author}
{@html `<script type="application/ld+json">${createSchemaAuthor($metadata.author)}</script>`}
{/if}
{#if $metadata?.post}
{@html `<script type="application/ld+json">${createSchemaPost($metadata.post)}</script>`}
{/if}

2
src/lib/components/index.ts
View File

@@ -2,11 +2,9 @@ export { default as FooterNav } from './FooterNav.svelte';
export { default as MainFooter } from './MainFooter.svelte'; export { default as MainFooter } from './MainFooter.svelte';
export { default as PreFooter } from './PreFooter.svelte'; export { default as PreFooter } from './PreFooter.svelte';
export { default as MobileNav } from './MobileNav.svelte'; export { default as MobileNav } from './MobileNav.svelte';
export { default as Switch } from './Switch.svelte'; export { default as Switch } from './Switch.svelte';
export { default as Newsletter } from './Newsletter.svelte'; export { default as Newsletter } from './Newsletter.svelte';
export { default as Tooltip } from './Tooltip.svelte'; export { default as Tooltip } from './Tooltip.svelte';
export { default as Spline } from './Spline.svelte'; export { default as Spline } from './Spline.svelte';
export { default as Article } from './Article.svelte'; export { default as Article } from './Article.svelte';
export { default as Carousel } from './Carousel.svelte'; export { default as Carousel } from './Carousel.svelte';
export { default as Metadata } from './Metadata.svelte';

34
src/lib/utils/metadata.ts Normal file
View File

@@ -0,0 +1,34 @@
import type { AuthorData } from '$markdoc/layouts/Author.svelte';
import type { PostsData } from '$markdoc/layouts/Post.svelte';
export const DEFAULT_HOST = 'https://website-appwrite.vercel.app';
export function buildOpenGraphImage(title: string, description: string): string {
return `https://og.appwrite.global/image.png?title=${encodeURIComponent(
title
)}&subtitle=${encodeURIComponent(description)}`;
}
export function createSchemaAuthor(author: AuthorData): string {
return (
`< script type="application/ld+json">${JSON.stringify({
'@context': 'https://schema.org',
'@type': 'Person',
name: author.name,
url: author.href,
image: author.avatar
})}</` + 'script>'
);
}
export function createSchemaPost(post: PostsData): string {
return (
`< script type="application/ld+json">${JSON.stringify({
'@context': 'https://schema.org',
'@type': 'BlogPosting',
headline: post.title,
image: post.cover,
datePublished: post.date,
dateModified: post.date
})}</` + 'script>'
);
}

28
src/markdoc/layouts/Article.svelte
View File

@@ -16,10 +16,10 @@
<script lang="ts"> <script lang="ts">
import { DocsArticle } from '$lib/layouts'; import { DocsArticle } from '$lib/layouts';
import { getContext, setContext } from 'svelte'; import { getContext, setContext } from 'svelte';
import { MainFooter, Metadata } from '$lib/components'; import { MainFooter } from '$lib/components';
import type { TocItem } from '$lib/layouts/DocsArticle.svelte'; import type { TocItem } from '$lib/layouts/DocsArticle.svelte';
import { DOCS_TITLE_SUFFIX } from '$routes/titles'; import { DOCS_TITLE_SUFFIX } from '$routes/titles';
import { buildOpenGraphImage, setMetadata } from '$lib/components/Metadata.svelte'; import { buildOpenGraphImage, DEFAULT_HOST } from '$lib/utils/metadata';
export let title: string; export let title: string;
export let description: string; export let description: string;
@@ -56,13 +56,27 @@
return carry; return carry;
}, []); }, []);
setMetadata({ const seoTitle = title + DOCS_TITLE_SUFFIX;
title: title + DOCS_TITLE_SUFFIX, const ogImage = buildOpenGraphImage(title, description);
description,
ogImage: buildOpenGraphImage(title, description)
});
</script> </script>
<svelte:head>
<!-- Titles -->
<title>{seoTitle}</title>
<meta property="og:title" content={seoTitle} />
<meta name="”twitter:title”" content={seoTitle} />
<!-- Desscription -->
<meta name="description" content={description} />
<meta property="og:description" content={description} />
<meta name="”twitter:description" content={description} />
<!-- Image -->
<meta property="og:image" content={ogImage} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:image" content={ogImage} />
<meta name="twitter:card" content="summary_large_image" />
</svelte:head>
<DocsArticle {title} {back} {toc}> <DocsArticle {title} {back} {toc}>
<svelte:fragment slot="metadata"> <svelte:fragment slot="metadata">
{#if difficulty} {#if difficulty}

29
src/markdoc/layouts/Author.svelte
View File

@@ -13,13 +13,13 @@
</script> </script>
<script lang="ts"> <script lang="ts">
import { Article, FooterNav, MainFooter, Metadata } from '$lib/components'; import { Article, FooterNav, MainFooter } from '$lib/components';
import { page } from '$app/stores'; import { page } from '$app/stores';
import { Main } from '$lib/layouts'; import { Main } from '$lib/layouts';
import { getContext } from 'svelte'; import { getContext } from 'svelte';
import type { PostsData } from './Post.svelte'; import type { PostsData } from './Post.svelte';
import { BLOG_TITLE_SUFFIX } from '$routes/titles'; import { BLOG_TITLE_SUFFIX } from '$routes/titles';
import { DEFAULT_HOST, setMetadata } from '$lib/components/Metadata.svelte'; import { DEFAULT_HOST } from '$lib/utils/metadata';
export let name: string; export let name: string;
export let role: string; export let role: string;
@@ -35,13 +35,28 @@
(p) => $page.url.pathname.substring($page.url.pathname.lastIndexOf('/') + 1) === p.slug (p) => $page.url.pathname.substring($page.url.pathname.lastIndexOf('/') + 1) === p.slug
); );
setMetadata({ const seoTitle = name + BLOG_TITLE_SUFFIX;
title: name + BLOG_TITLE_SUFFIX, const description = bio;
description: bio, const ogImage = DEFAULT_HOST + '/images/open-graph/blog.png';
ogImage: DEFAULT_HOST + '/images/open-graph/blog.png'
});
</script> </script>
<svelte:head>
<!-- Titles -->
<title>{seoTitle}</title>
<meta property="og:title" content={seoTitle} />
<meta name="”twitter:title”" content={seoTitle} />
<!-- Desscription -->
<meta name="description" content={description} />
<meta property="og:description" content={description} />
<meta name="”twitter:description" content={description} />
<!-- Image -->
<meta property="og:image" content={ogImage} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:image" content={ogImage} />
<meta name="twitter:card" content="summary_large_image" />
</svelte:head>
<Main> <Main>
<div class="aw-big-padding-section-level-1 u-position-relative u-overflow-hidden"> <div class="aw-big-padding-section-level-1 u-position-relative u-overflow-hidden">
<div <div

28
src/markdoc/layouts/Category.svelte
View File

@@ -7,13 +7,13 @@
</script> </script>
<script lang="ts"> <script lang="ts">
import { Article, FooterNav, MainFooter, Metadata } from '$lib/components'; import { Article, FooterNav, MainFooter } from '$lib/components';
import { Main } from '$lib/layouts'; import { Main } from '$lib/layouts';
import { getContext } from 'svelte'; import { getContext } from 'svelte';
import type { PostsData } from './Post.svelte'; import type { PostsData } from './Post.svelte';
import type { AuthorData } from './Author.svelte'; import type { AuthorData } from './Author.svelte';
import { BLOG_TITLE_SUFFIX } from '$routes/titles'; import { BLOG_TITLE_SUFFIX } from '$routes/titles';
import { DEFAULT_HOST, setMetadata } from '$lib/components/Metadata.svelte'; import { DEFAULT_HOST } from '$lib/utils/metadata';
export let name: string; export let name: string;
export let description: string; export let description: string;
@@ -22,13 +22,27 @@
const postsList = getContext<PostsData[]>('posts'); const postsList = getContext<PostsData[]>('posts');
const posts = postsList.filter((post) => post.category.includes(name.toLowerCase())); const posts = postsList.filter((post) => post.category.includes(name.toLowerCase()));
setMetadata({ const seoTitle = name + BLOG_TITLE_SUFFIX;
title: name + BLOG_TITLE_SUFFIX, const ogImage = DEFAULT_HOST + '/images/open-graph/blog.png';
description,
ogImage: DEFAULT_HOST + '/images/open-graph/docs.png'
});
</script> </script>
<svelte:head>
<!-- Titles -->
<title>{seoTitle}</title>
<meta property="og:title" content={seoTitle} />
<meta name="”twitter:title”" content={seoTitle} />
<!-- Desscription -->
<meta name="description" content={description} />
<meta property="og:description" content={description} />
<meta name="”twitter:description" content={description} />
<!-- Image -->
<meta property="og:image" content={ogImage} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:image" content={ogImage} />
<meta name="twitter:card" content="summary_large_image" />
</svelte:head>
<Main> <Main>
<div class="aw-big-padding-section-level-1"> <div class="aw-big-padding-section-level-1">
<div class="aw-big-padding-section-level-2"> <div class="aw-big-padding-section-level-2">

28
src/markdoc/layouts/Post.svelte
View File

@@ -13,13 +13,13 @@
</script> </script>
<script lang="ts"> <script lang="ts">
import { Article, FooterNav, MainFooter, Metadata, Newsletter } from '$lib/components'; import { Article, FooterNav, MainFooter, Newsletter } from '$lib/components';
import { Main } from '$lib/layouts'; import { Main } from '$lib/layouts';
import { getContext } from 'svelte'; import { getContext } from 'svelte';
import type { AuthorData } from './Author.svelte'; import type { AuthorData } from './Author.svelte';
import type { CategoryData } from './Category.svelte'; import type { CategoryData } from './Category.svelte';
import { BLOG_TITLE_SUFFIX } from '$routes/titles'; import { BLOG_TITLE_SUFFIX } from '$routes/titles';
import { DEFAULT_HOST, setMetadata } from '$lib/components/Metadata.svelte'; import { DEFAULT_HOST } from '$lib/utils/metadata';
export let title: string; export let title: string;
export let description: string; export let description: string;
@@ -42,15 +42,25 @@
cats.some((cat) => cat.toLocaleLowerCase() === c.name.toLocaleLowerCase()) cats.some((cat) => cat.toLocaleLowerCase() === c.name.toLocaleLowerCase())
); );
} }
setMetadata({
title: title + BLOG_TITLE_SUFFIX,
description,
ogTitle: title,
ogImage: DEFAULT_HOST + cover
});
</script> </script>
<svelte:head>
<!-- Titles -->
<title>{title + BLOG_TITLE_SUFFIX}</title>
<meta property="og:title" content={title} />
<meta name="”twitter:title”" content={title} />
<!-- Desscription -->
<meta name="description" content={description} />
<meta property="og:description" content={description} />
<meta name="”twitter:description" content={description} />
<!-- Image -->
<meta property="og:image" content={DEFAULT_HOST + cover} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:image" content={DEFAULT_HOST + cover} />
<meta name="twitter:card" content="summary_large_image" />
</svelte:head>
<Main> <Main>
<div class="aw-big-padding-section"> <div class="aw-big-padding-section">
<div class="aw-big-padding-section"> <div class="aw-big-padding-section">

26
src/markdoc/layouts/Tutorial.svelte
View File

@@ -9,12 +9,12 @@
<script lang="ts"> <script lang="ts">
import { DocsTutorial } from '$lib/layouts'; import { DocsTutorial } from '$lib/layouts';
import { getContext, setContext } from 'svelte'; import { getContext, setContext } from 'svelte';
import { MainFooter, Metadata } from '$lib/components'; import { MainFooter } from '$lib/components';
import type { TocItem } from '$lib/layouts/DocsArticle.svelte'; import type { TocItem } from '$lib/layouts/DocsArticle.svelte';
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
import type { LayoutContext } from './Article.svelte'; import type { LayoutContext } from './Article.svelte';
import { DOCS_TITLE_SUFFIX } from '$routes/titles'; import { DOCS_TITLE_SUFFIX } from '$routes/titles';
import { setMetadata } from '$lib/components/Metadata.svelte'; import { DEFAULT_HOST } from '$lib/utils/metadata';
export let title: string; export let title: string;
export let description: string; export let description: string;
@@ -51,12 +51,26 @@
return carry; return carry;
}, []); }, []);
setMetadata({ const seoTitle = title + DOCS_TITLE_SUFFIX;
title: title + DOCS_TITLE_SUFFIX, const ogImage = DEFAULT_HOST + '/images/open-graph/docs.png';
description
});
</script> </script>
<svelte:head>
<!-- Titles -->
<title>{seoTitle}</title>
<meta property="og:title" content={seoTitle} />
<meta name="”twitter:title”" content={seoTitle} />
<!-- Desscription -->
<meta name="description" content={description} />
<meta property="og:description" content={description} />
<meta name="”twitter:description" content={description} />
<!-- Image -->
<meta property="og:image" content={ogImage} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:image" content={ogImage} />
<meta name="twitter:card" content="summary_large_image" />
</svelte:head>
<DocsTutorial {title} {toc} {tutorials} currentStep={step}> <DocsTutorial {title} {toc} {tutorials} currentStep={step}>
<svelte:fragment slot="metadata"> <svelte:fragment slot="metadata">
{#if difficulty} {#if difficulty}

2
src/routes/+layout.svelte
View File

@@ -10,14 +10,12 @@
import '@fontsource/inter/900.css'; import '@fontsource/inter/900.css';
import '$scss/index.scss'; import '$scss/index.scss';
import { dev } from '$app/environment'; import { dev } from '$app/environment';
import { Metadata } from '$lib/components';
</script> </script>
<svelte:head> <svelte:head>
{#if !dev} {#if !dev}
<script defer data-domain="appwrite.io" src="https://plausible.io/js/script.js"></script> <script defer data-domain="appwrite.io" src="https://plausible.io/js/script.js"></script>
{/if} {/if}
<Metadata />
</svelte:head> </svelte:head>
<slot /> <slot />

28
src/routes/+page.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Main } from '$lib/layouts'; import { Main } from '$lib/layouts';
import { Metadata, Spline } from '$lib/components'; import { Spline } from '$lib/components';
import MainFooter from '../lib/components/MainFooter.svelte'; import MainFooter from '../lib/components/MainFooter.svelte';
import FooterNav from '../lib/components/FooterNav.svelte'; import FooterNav from '../lib/components/FooterNav.svelte';
import DeveloperCard from './DeveloperCard.svelte'; import DeveloperCard from './DeveloperCard.svelte';
@@ -9,7 +9,7 @@
import Products from '$lib/animations/Products/Products.svelte'; import Products from '$lib/animations/Products/Products.svelte';
import ProductsMobile from '$lib/animations/Products/ProductsMobile.svelte'; import ProductsMobile from '$lib/animations/Products/ProductsMobile.svelte';
import Tooltip from '$lib/components/Tooltip.svelte'; import Tooltip from '$lib/components/Tooltip.svelte';
import { DEFAULT_HOST, setMetadata } from '$lib/components/Metadata.svelte'; import { DEFAULT_HOST } from '$lib/utils/metadata';
const platforms: Array<{ const platforms: Array<{
name: string; name: string;
@@ -63,12 +63,28 @@
} }
]; ];
setMetadata({ const title = 'Appwrite - Build like a team of hundreds';
title: 'Appwrite - Build like a team of hundreds', const description = '';
ogImage: `${DEFAULT_HOST}/images/open-graph/website.png` const ogImage = `${DEFAULT_HOST}/images/open-graph/website.png`;
})
</script> </script>
<svelte:head>
<!-- Titles -->
<title>{title}</title>
<meta property="og:title" content={title} />
<meta name="”twitter:title”" content={title} />
<!-- Desscription -->
<meta name="description" content={description} />
<meta property="og:description" content={description} />
<meta name="”twitter:description" content={description} />
<!-- Image -->
<meta property="og:image" content={ogImage} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:image" content={ogImage} />
<meta name="twitter:card" content="summary_large_image" />
</svelte:head>
<div <div
style:position="absolute" style:position="absolute"
style:top="0" style:top="0"

27
src/routes/assets/+page.svelte
View File

@@ -1,17 +1,32 @@
<script lang="ts"> <script lang="ts">
import { Metadata } from '$lib/components'; import { DEFAULT_HOST } from '$lib/utils/metadata';
import { DEFAULT_HOST, setMetadata } from '$lib/components/Metadata.svelte';
import { Main } from '$lib/layouts'; import { Main } from '$lib/layouts';
import { TITLE_SUFFIX } from '$routes/titles'; import { TITLE_SUFFIX } from '$routes/titles';
import FooterNav from '../../lib/components/FooterNav.svelte'; import FooterNav from '../../lib/components/FooterNav.svelte';
import MainFooter from '../../lib/components/MainFooter.svelte'; import MainFooter from '../../lib/components/MainFooter.svelte';
setMetadata({ const title = 'Assets' + TITLE_SUFFIX;
title: 'Assets' + TITLE_SUFFIX, const description = '';
ogImage: DEFAULT_HOST + '/images/open-graph/website.png' const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
});
</script> </script>
<svelte:head>
<!-- Titles -->
<title>{title}</title>
<meta property="og:title" content={title} />
<meta name="”twitter:title”" content={title} />
<!-- Desscription -->
<meta name="description" content={description} />
<meta property="og:description" content={description} />
<meta name="”twitter:description" content={description} />
<!-- Image -->
<meta property="og:image" content={ogImage} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:image" content={ogImage} />
<meta name="twitter:card" content="summary_large_image" />
</svelte:head>
<div class="u-position-absolute" style="pointer-events:none;"> <div class="u-position-absolute" style="pointer-events:none;">
<svg <svg
class="aw-is-not-mobile" class="aw-is-not-mobile"

28
src/routes/blog/+page.svelte
View File

@@ -1,19 +1,35 @@
<script lang="ts"> <script lang="ts">
import { Main } from '$lib/layouts'; import { Main } from '$lib/layouts';
import { MainFooter, FooterNav, Article, Metadata } from '$lib/components'; import { MainFooter, FooterNav, Article } from '$lib/components';
import { TITLE_SUFFIX } from '$routes/titles.js'; import { TITLE_SUFFIX } from '$routes/titles.js';
import { DEFAULT_HOST, setMetadata } from '$lib/components/Metadata.svelte'; import { DEFAULT_HOST } from '$lib/utils/metadata';
export let data; export let data;
const featured = data.posts.find((post) => post.featured); const featured = data.posts.find((post) => post.featured);
setMetadata({ const title = 'Blog' + TITLE_SUFFIX;
title: 'Blog' + TITLE_SUFFIX, const description = '';
ogImage: DEFAULT_HOST + '/images/open-graph/blog.png' const ogImage = DEFAULT_HOST + '/images/open-graph/blog.png';
});
</script> </script>
<svelte:head>
<!-- Titles -->
<title>{title}</title>
<meta property="og:title" content={title} />
<meta name="”twitter:title”" content={title} />
<!-- Desscription -->
<meta name="description" content={description} />
<meta property="og:description" content={description} />
<meta name="”twitter:description" content={description} />
<!-- Image -->
<meta property="og:image" content={ogImage} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:image" content={ogImage} />
<meta name="twitter:card" content="summary_large_image" />
</svelte:head>
<Main> <Main>
<div class="aw-big-padding-section-level-1 u-position-relative"> <div class="aw-big-padding-section-level-1 u-position-relative">
<div <div

26
src/routes/community/+page.svelte
View File

@@ -5,14 +5,30 @@
import PreFooter from '$lib/components/PreFooter.svelte'; import PreFooter from '$lib/components/PreFooter.svelte';
import { Carousel } from '$lib/components'; import { Carousel } from '$lib/components';
import { TITLE_SUFFIX } from '$routes/titles'; import { TITLE_SUFFIX } from '$routes/titles';
import { DEFAULT_HOST, setMetadata } from '$lib/components/Metadata.svelte'; import { DEFAULT_HOST } from '$lib/utils/metadata';
setMetadata({ const title = 'Community' + TITLE_SUFFIX;
title: 'Community' + TITLE_SUFFIX, const description = '';
ogImage: DEFAULT_HOST + '/images/open-graph/website.png' const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
});
</script> </script>
<svelte:head>
<!-- Titles -->
<title>{title}</title>
<meta property="og:title" content={title} />
<meta name="”twitter:title”" content={title} />
<!-- Desscription -->
<meta name="description" content={description} />
<meta property="og:description" content={description} />
<meta name="”twitter:description" content={description} />
<!-- Image -->
<meta property="og:image" content={ogImage} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:image" content={ogImage} />
<meta name="twitter:card" content="summary_large_image" />
</svelte:head>
<Main> <Main>
<div class="aw-big-padding-section"> <div class="aw-big-padding-section">
<div class="aw-big-padding-section-level-1"> <div class="aw-big-padding-section-level-1">

27
src/routes/company/+page.svelte
View File

@@ -3,15 +3,30 @@
import MainFooter from '$lib/components/MainFooter.svelte'; import MainFooter from '$lib/components/MainFooter.svelte';
import FooterNav from '$lib/components/FooterNav.svelte'; import FooterNav from '$lib/components/FooterNav.svelte';
import { TITLE_SUFFIX } from '$routes/titles'; import { TITLE_SUFFIX } from '$routes/titles';
import { Metadata } from '$lib/components'; import { DEFAULT_HOST } from '$lib/utils/metadata';
import { DEFAULT_HOST, setMetadata } from '$lib/components/Metadata.svelte';
setMetadata({ const title = 'Company' + TITLE_SUFFIX;
title: 'Company' + TITLE_SUFFIX, const description = '';
ogImage: DEFAULT_HOST + '/images/open-graph/website.png' const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
});
</script> </script>
<svelte:head>
<!-- Titles -->
<title>{title}</title>
<meta property="og:title" content={title} />
<meta name="”twitter:title”" content={title} />
<!-- Desscription -->
<meta name="description" content={description} />
<meta property="og:description" content={description} />
<meta name="”twitter:description" content={description} />
<!-- Image -->
<meta property="og:image" content={ogImage} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:image" content={ogImage} />
<meta name="twitter:card" content="summary_large_image" />
</svelte:head>
<Main> <Main>
<svg <svg
style="position:absolute; inset-inline-start:0; inset-block-start:0" style="position:absolute; inset-inline-start:0; inset-block-start:0"

27
src/routes/contact-us/+page.svelte
View File

@@ -1,6 +1,5 @@
<script lang="ts"> <script lang="ts">
import { Metadata } from '$lib/components'; import { DEFAULT_HOST } from '$lib/utils/metadata';
import { DEFAULT_HOST, setMetadata } from '$lib/components/Metadata.svelte';
import { Main } from '$lib/layouts'; import { Main } from '$lib/layouts';
import { TITLE_SUFFIX } from '$routes/titles'; import { TITLE_SUFFIX } from '$routes/titles';
import FooterNav from '../../lib/components/FooterNav.svelte'; import FooterNav from '../../lib/components/FooterNav.svelte';
@@ -35,12 +34,28 @@
submitted = true; submitted = true;
} }
setMetadata({ const title = 'Contact us' + TITLE_SUFFIX;
title: 'Contact us' + TITLE_SUFFIX, const description = '';
ogImage: DEFAULT_HOST + '/images/open-graph/website.png' const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
});
</script> </script>
<svelte:head>
<!-- Titles -->
<title>{title}</title>
<meta property="og:title" content={title} />
<meta name="”twitter:title”" content={title} />
<!-- Desscription -->
<meta name="description" content={description} />
<meta property="og:description" content={description} />
<meta name="”twitter:description" content={description} />
<!-- Image -->
<meta property="og:image" content={ogImage} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:image" content={ogImage} />
<meta name="twitter:card" content="summary_large_image" />
</svelte:head>
<div class="u-position-absolute" style="pointer-events:none;"> <div class="u-position-absolute" style="pointer-events:none;">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"

27
src/routes/cookies/+page.svelte
View File

@@ -1,17 +1,32 @@
<script lang="ts"> <script lang="ts">
import { Metadata } from '$lib/components'; import { DEFAULT_HOST } from '$lib/utils/metadata';
import { DEFAULT_HOST, setMetadata } from '$lib/components/Metadata.svelte';
import { Main } from '$lib/layouts'; import { Main } from '$lib/layouts';
import { TITLE_SUFFIX } from '$routes/titles'; import { TITLE_SUFFIX } from '$routes/titles';
import FooterNav from '../../lib/components/FooterNav.svelte'; import FooterNav from '../../lib/components/FooterNav.svelte';
import MainFooter from '../../lib/components/MainFooter.svelte'; import MainFooter from '../../lib/components/MainFooter.svelte';
setMetadata({ const title = 'Cookies' + TITLE_SUFFIX;
title: 'Cookies' + TITLE_SUFFIX, const description = '';
ogImage: DEFAULT_HOST + '/images/open-graph/website.png' const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
});
</script> </script>
<svelte:head>
<!-- Titles -->
<title>{title}</title>
<meta property="og:title" content={title} />
<meta name="”twitter:title”" content={title} />
<!-- Desscription -->
<meta name="description" content={description} />
<meta property="og:description" content={description} />
<meta name="”twitter:description" content={description} />
<!-- Image -->
<meta property="og:image" content={ogImage} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:image" content={ogImage} />
<meta name="twitter:card" content="summary_large_image" />
</svelte:head>
<div class="u-position-absolute" style="pointer-events:none;"> <div class="u-position-absolute" style="pointer-events:none;">
<svg <svg
class="aw-is-not-mobile" class="aw-is-not-mobile"

11
src/routes/docs/+layout.svelte
View File

@@ -1,11 +0,0 @@
<script lang="ts">
import { DEFAULT_HOST, setMetadata } from '$lib/components/Metadata.svelte';
import { TITLE_SUFFIX } from '$routes/titles';
setMetadata({
title: 'Docs' + TITLE_SUFFIX,
ogImage: DEFAULT_HOST + '/images/open-graph/docs.png'
});
</script>
<slot />

23
src/routes/docs/+page.svelte
View File

@@ -5,8 +5,31 @@
import Docs from '$lib/layouts/Docs.svelte'; import Docs from '$lib/layouts/Docs.svelte';
import MainFooter from '../../lib/components/MainFooter.svelte'; import MainFooter from '../../lib/components/MainFooter.svelte';
import Sidebar from './Sidebar.svelte'; import Sidebar from './Sidebar.svelte';
import { DEFAULT_HOST } from '$lib/utils/metadata';
import { TITLE_SUFFIX } from '$routes/titles';
const title = 'Docs' + TITLE_SUFFIX;
const description = '';
const ogImage = DEFAULT_HOST + '/images/open-graph/docs.png';
</script> </script>
<svelte:head>
<!-- Titles -->
<title>{title}</title>
<meta property="og:title" content={title} />
<meta name="”twitter:title”" content={title} />
<!-- Desscription -->
<meta name="description" content={description} />
<meta property="og:description" content={description} />
<meta name="”twitter:description" content={description} />
<!-- Image -->
<meta property="og:image" content={ogImage} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:image" content={ogImage} />
<meta name="twitter:card" content="summary_large_image" />
</svelte:head>
<Docs variant="default"> <Docs variant="default">
<Sidebar /> <Sidebar />
<div class="u-position-absolute u-inset-inline-end-0 aw-u-opacity-40-mobile" style=""> <div class="u-position-absolute u-inset-inline-end-0 aw-u-opacity-40-mobile" style="">

29
src/routes/docs/quick-starts/+page.svelte
View File

@@ -1,5 +1,7 @@
<script lang="ts"> <script lang="ts">
import { MainFooter } from '$lib/components'; import { MainFooter } from '$lib/components';
import { DEFAULT_HOST } from '$lib/utils/metadata';
import { DOCS_TITLE_SUFFIX } from '$routes/titles';
type QuickStart = { type QuickStart = {
title: string; title: string;
@@ -34,7 +36,7 @@
icon: 'icon-svelte', icon: 'icon-svelte',
image: '/images/blog/placeholder.png', image: '/images/blog/placeholder.png',
href: 'sveltekit' href: 'sveltekit'
}, }
] ]
}, },
{ {
@@ -57,7 +59,7 @@
icon: 'icon-android', icon: 'icon-android',
image: '/images/blog/placeholder.png', image: '/images/blog/placeholder.png',
href: 'android' href: 'android'
}, }
] ]
}, },
{ {
@@ -68,7 +70,7 @@
icon: 'icon-node', icon: 'icon-node',
image: '/images/blog/placeholder.png', image: '/images/blog/placeholder.png',
href: 'node' href: 'node'
}, }
// { // {
// title: 'Python', // title: 'Python',
// icon: 'icon-python', // icon: 'icon-python',
@@ -90,8 +92,29 @@
] ]
} }
]; ];
const title = 'Quick starts' + DOCS_TITLE_SUFFIX;
const description = '';
const ogImage = DEFAULT_HOST + '/images/open-graph/docs.png';
</script> </script>
<svelte:head>
<!-- Titles -->
<title>{title}</title>
<meta property="og:title" content={title} />
<meta name="”twitter:title”" content={title} />
<!-- Desscription -->
<meta name="description" content={description} />
<meta property="og:description" content={description} />
<meta name="”twitter:description" content={description} />
<!-- Image -->
<meta property="og:image" content={ogImage} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:image" content={ogImage} />
<meta name="twitter:card" content="summary_large_image" />
</svelte:head>
<main class="aw-main-section"> <main class="aw-main-section">
<article class="aw-article"> <article class="aw-article">
<header class="aw-article-header"> <header class="aw-article-header">

29
src/routes/docs/references/[version]/[platform]/[service]/+page.svelte
View File

@@ -1,8 +1,8 @@
<script lang="ts"> <script lang="ts">
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { page } from '$app/stores'; import { page } from '$app/stores';
import { MainFooter, Metadata } from '$lib/components'; import { MainFooter } from '$lib/components';
import { DEFAULT_HOST, setMetadata } from '$lib/components/Metadata.svelte'; import { DEFAULT_HOST } from '$lib/utils/metadata';
import { layoutState, toggleReferences } from '$lib/layouts/Docs.svelte'; import { layoutState, toggleReferences } from '$lib/layouts/Docs.svelte';
import { parse } from '$lib/utils/markdown'; import { parse } from '$lib/utils/markdown';
import { import {
@@ -66,13 +66,28 @@
$: platform = $page.params.platform as Platform; $: platform = $page.params.platform as Platform;
$: platformType = platform.startsWith('client-') ? 'CLIENT' : 'SERVER'; $: platformType = platform.startsWith('client-') ? 'CLIENT' : 'SERVER';
$: serviceName = serviceMap[data.service?.name]; $: serviceName = serviceMap[data.service?.name];
$: setMetadata({ $: title = serviceName + DOCS_TITLE_SUFFIX;
title: serviceName + DOCS_TITLE_SUFFIX, $: description = data.service?.description;
description: data.service?.description, $: ogImage = DEFAULT_HOST + '/images/open-graph/docs.png';
ogImage: DEFAULT_HOST + '/images/open-graph/docs.png'
});
</script> </script>
<svelte:head>
<!-- Titles -->
<title>{title}</title>
<meta property="og:title" content={title} />
<meta name="”twitter:title”" content={title} />
<!-- Desscription -->
<meta name="description" content={description} />
<meta property="og:description" content={description} />
<meta name="”twitter:description" content={description} />
<!-- Image -->
<meta property="og:image" content={ogImage} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:image" content={ogImage} />
<meta name="twitter:card" content="summary_large_image" />
</svelte:head>
<main class="u-contents"> <main class="u-contents">
<article class="aw-article u-contents"> <article class="aw-article u-contents">
<header class="aw-article-header"> <header class="aw-article-header">

23
src/routes/docs/tutorials/+page.svelte
View File

@@ -1,7 +1,30 @@
<script lang="ts"> <script lang="ts">
import { MainFooter } from '$lib/components'; import { MainFooter } from '$lib/components';
import { DEFAULT_HOST } from '$lib/utils/metadata';
import { DOCS_TITLE_SUFFIX } from '$routes/titles';
const title = 'Tutorials' + DOCS_TITLE_SUFFIX;
const description = '';
const ogImage = DEFAULT_HOST + '/images/open-graph/docs.png';
</script> </script>
<svelte:head>
<!-- Titles -->
<title>{title}</title>
<meta property="og:title" content={title} />
<meta name="”twitter:title”" content={title} />
<!-- Desscription -->
<meta name="description" content={description} />
<meta property="og:description" content={description} />
<meta name="”twitter:description" content={description} />
<!-- Image -->
<meta property="og:image" content={ogImage} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:image" content={ogImage} />
<meta name="twitter:card" content="summary_large_image" />
</svelte:head>
<main class="aw-main-section"> <main class="aw-main-section">
<article class="aw-article"> <article class="aw-article">
<header class="aw-article-header"> <header class="aw-article-header">

28
src/routes/heroes/+page.svelte
View File

@@ -1,15 +1,31 @@
<script lang="ts"> <script lang="ts">
import { FooterNav, MainFooter, Metadata } from '$lib/components'; import { FooterNav, MainFooter } from '$lib/components';
import { DEFAULT_HOST, setMetadata } from '$lib/components/Metadata.svelte'; import { DEFAULT_HOST } from '$lib/utils/metadata';
import { Main } from '$lib/layouts'; import { Main } from '$lib/layouts';
import { TITLE_SUFFIX } from '$routes/titles'; import { TITLE_SUFFIX } from '$routes/titles';
setMetadata({ const title = 'Heroes' + TITLE_SUFFIX;
title: 'Heroes' + TITLE_SUFFIX, const description = '';
ogImage: DEFAULT_HOST + '/images/open-graph/website.png' const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
});
</script> </script>
<svelte:head>
<!-- Titles -->
<title>{title}</title>
<meta property="og:title" content={title} />
<meta name="”twitter:title”" content={title} />
<!-- Desscription -->
<meta name="description" content={description} />
<meta property="og:description" content={description} />
<meta name="”twitter:description" content={description} />
<!-- Image -->
<meta property="og:image" content={ogImage} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:image" content={ogImage} />
<meta name="twitter:card" content="summary_large_image" />
</svelte:head>
<div <div
class="u-position-absolute aw-is-not-mobile" class="u-position-absolute aw-is-not-mobile"
style="pointer-events:none; inset-inline-start:822px;" style="pointer-events:none; inset-inline-start:822px;"

28
src/routes/pricing/+page.svelte
View File

@@ -1,18 +1,34 @@
<script lang="ts"> <script lang="ts">
import { FooterNav, MainFooter, Metadata, PreFooter } from '$lib/components'; import { FooterNav, MainFooter, PreFooter } from '$lib/components';
import { DEFAULT_HOST, setMetadata } from '$lib/components/Metadata.svelte'; import { DEFAULT_HOST } from '$lib/utils/metadata';
import { Main } from '$lib/layouts'; import { Main } from '$lib/layouts';
import { TITLE_SUFFIX } from '$routes/titles'; import { TITLE_SUFFIX } from '$routes/titles';
import ComparePlans from './compare-plans.svelte'; import ComparePlans from './compare-plans.svelte';
import Faq from './faq.svelte'; import Faq from './faq.svelte';
setMetadata({ const title = 'Pricing' + TITLE_SUFFIX;
title: 'Pricing' + TITLE_SUFFIX, const description = '';
ogImage: DEFAULT_HOST + '/images/open-graph/website.png' const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
});
</script> </script>
<svelte:head>
<!-- Titles -->
<title>{title}</title>
<meta property="og:title" content={title} />
<meta name="”twitter:title”" content={title} />
<!-- Desscription -->
<meta name="description" content={description} />
<meta property="og:description" content={description} />
<meta name="”twitter:description" content={description} />
<!-- Image -->
<meta property="og:image" content={ogImage} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:image" content={ogImage} />
<meta name="twitter:card" content="summary_large_image" />
</svelte:head>
<div class="u-position-absolute u-overflow-hidden" style="pointer-events:none; inline-size:100%;"> <div class="u-position-absolute u-overflow-hidden" style="pointer-events:none; inline-size:100%;">
<img src="/images/bgs/pricing-hero.svg" alt="" style="margin-inline:auto; display:block;" /> <img src="/images/bgs/pricing-hero.svg" alt="" style="margin-inline:auto; display:block;" />
</div> </div>

31
src/routes/privacy/+page.svelte
View File

@@ -1,18 +1,33 @@
<script lang="ts"> <script lang="ts">
import { Metadata } from '$lib/components'; import { DEFAULT_HOST } from '$lib/utils/metadata';
import { DEFAULT_HOST, setMetadata } from '$lib/components/Metadata.svelte';
import { Main } from '$lib/layouts'; import { Main } from '$lib/layouts';
import { TITLE_SUFFIX } from '$routes/titles'; import { TITLE_SUFFIX } from '$routes/titles';
import FooterNav from '../../lib/components/FooterNav.svelte'; import FooterNav from '$lib/components/FooterNav.svelte';
import MainFooter from '../../lib/components/MainFooter.svelte'; import MainFooter from '$lib/components/MainFooter.svelte';
setMetadata({ const title = 'Privacy' + TITLE_SUFFIX;
title: 'Privacy' + TITLE_SUFFIX, const description = '';
ogImage: DEFAULT_HOST + '/images/open-graph/website.png' const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
});
</script> </script>
<svelte:head>
<!-- Titles -->
<title>{title}</title>
<meta property="og:title" content={title} />
<meta name="”twitter:title”" content={title} />
<!-- Desscription -->
<meta name="description" content={description} />
<meta property="og:description" content={description} />
<meta name="”twitter:description" content={description} />
<!-- Image -->
<meta property="og:image" content={ogImage} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:image" content={ogImage} />
<meta name="twitter:card" content="summary_large_image" />
</svelte:head>
<div class="u-position-absolute" style="pointer-events:none;"> <div class="u-position-absolute" style="pointer-events:none;">
<svg <svg
class="aw-is-not-mobile" class="aw-is-not-mobile"