Merge branch 'main' into feat-docs-g2

2025-12-09 12:57:48 +00:00 · 2023-09-27 16:47:22 -04:00
parent d5c47eb2af 6cbaee0e7b
commit 4ef6caa9de
38 changed files with 793 additions and 192 deletions
--- a/28
+++ b/28
@@ -1,28 +0,0 @@
-BSD 3-Clause License
-
-Copyright (c) 2023, Appwrite
-
-Redistribution and use in source and binary forms, with or without
-modification, are permitted provided that the following conditions are met:
-
-1. Redistributions of source code must retain the above copyright notice, this
-   list of conditions and the following disclaimer.
-
-2. Redistributions in binary form must reproduce the above copyright notice,
-   this list of conditions and the following disclaimer in the documentation
-   and/or other materials provided with the distribution.
-
-3. Neither the name of the copyright holder nor the names of its
-   contributors may be used to endorse or promote products derived from
-   this software without specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
-AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
-IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
-DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
-FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
-DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
-SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
-CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
-OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
--- a/README.md
+++ b/README.md
@@ -40,4 +40,4 @@ Join our growing community around the world! See our official [Blog](https://med

 ## License

-This repository is available under the [BSD 3-Clause License](./LICENSE).
+Appwrite website, docs and blog © 2023 by Appwrite is licensed under [CC BY-NC-ND 4.0](https://creativecommons.org/licenses/by-nc-nd/4.0/).
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,7 +13,7 @@ dependencies:
    version: 0.1.0-next.9
  '@appwrite.io/repo':
    specifier: github:appwrite/appwrite
-    version: github.com/appwrite/appwrite/c273e3d8e19ffbe4ebea2644e6318e01514c8217
+    version: github.com/appwrite/appwrite/59a850d8b8f2ff3a951b386f65e25a65efb7816a
  '@fontsource/inter':
    specifier: ^5.0.8
    version: 5.0.8
@@ -5067,8 +5067,8 @@ packages:
    engines: {node: '>=12.20'}
    dev: true

-  github.com/appwrite/appwrite/c273e3d8e19ffbe4ebea2644e6318e01514c8217:
-    resolution: {tarball: https://codeload.github.com/appwrite/appwrite/tar.gz/c273e3d8e19ffbe4ebea2644e6318e01514c8217}
+  github.com/appwrite/appwrite/59a850d8b8f2ff3a951b386f65e25a65efb7816a:
+    resolution: {tarball: https://codeload.github.com/appwrite/appwrite/tar.gz/59a850d8b8f2ff3a951b386f65e25a65efb7816a}
    name: appwrite
    version: 0.0.0
    dev: false
--- a/src/app.html
+++ b/src/app.html
@@ -5,7 +5,7 @@
 		<link rel="icon" type="image/svg+xml" href="/images/logos/logo.svg" />
 		<link rel="stylesheet" href="/icon-font/aw-icon.css" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Appwrite - Build like a team of hundreds</title>
+		<meta name="”twitter:site”" content="@appwrite" />
 		%sveltekit.head%
 	</head>
 	<body class="theme-dark" data-sveltekit-preload-data="hover">
--- a/src/lib/animations/Products/post/post.svelte
+++ b/src/lib/animations/Products/post/post.svelte
@@ -211,8 +211,11 @@
 			content: '';
 			inset: 0;
 			position: absolute;
-			background: #19191d;
-			filter: blur(125px);
+			//background: #19191d; // old bg
+			//filter: blur(125px); // break Safari
+			background: #19191dcc;
+			filter: blur(67px);
+
 		}

 		h3 {
--- a/src/lib/components/Search.svelte
+++ b/src/lib/components/Search.svelte
@@ -147,7 +147,7 @@
 		<div
 			class="aw-input-text-search-wrapper aw-u-max-width-680 aw-u-margin-inline-20 u-width-full-line"
 		>
-			<span class="icon-search u-z-index-5" aria-hidden="true" style="" />
+			<span class="aw-icon-search u-z-index-5" aria-hidden="true" style="inset-block-start:0.9rem" />
 			<div id="searchbox" />

 			<!-- svelte-ignore a11y-autofocus -->
@@ -157,7 +157,7 @@
 				type="text"
 				id="search"
 				bind:value
-				placeholder="Search"
+				placeholder="Search in docs"
 				style="border-end-start-radius:0; border-end-end-radius:0;"
 				use:arrowKeyFocus
 				data-hit="-1"
@@ -171,14 +171,14 @@
 						{#if results.length > 0}
 							<section>
 								<h6 class="aw-eyebrow">{results.length} results found</h6>
-								<ul class="u-margin-block-start-8">
+								<ul class="u-flex-vertical u-gap-4 u-margin-block-start-8">
 									{#each results as hit, i (hit.uid)}
 										<li>
 											<a
 												data-hit={i}
 												href={createHref(hit)}
 												use:arrowKeyFocus
-												class="aw-button aw-caption-400 is-text u-flex-vertical u-gap-8 u-min-width-100-percent aw-u-padding-block-4 aw-u-cross-start u-max-width-100-percent"
+												class="aw-button aw-caption-400 is-text u-flex-vertical u-gap-8 u-min-width-100-percent aw-u-padding-block-8 aw-padding-inline-12  aw-u-cross-start u-max-width-100-percent"
 											>
 												<div class="aw-u-trim-1">
 													<span class="aw-u-color-text-secondary">{hit.h1}</span>
@@ -203,7 +203,7 @@
 					{/if}
 					<section>
 						<h6 class="aw-eyebrow">Recommended</h6>
-						<ul class="u-margin-block-start-8">
+						<ul class="u-flex-vertical u-gap-4 u-margin-block-start-8">
 							{#each recommended as hit, i (hit.uid)}
 								{@const index = i + (results.length ? results.length : 0)}
 								<li>
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -2,7 +2,6 @@ export { default as FooterNav } from './FooterNav.svelte';
 export { default as MainFooter } from './MainFooter.svelte';
 export { default as PreFooter } from './PreFooter.svelte';
 export { default as MobileNav } from './MobileNav.svelte';
-
 export { default as Switch } from './Switch.svelte';
 export { default as Newsletter } from './Newsletter.svelte';
 export { default as Tooltip } from './Tooltip.svelte';
--- a/src/lib/layouts/Docs.svelte
+++ b/src/lib/layouts/Docs.svelte
@@ -135,7 +135,7 @@
 								class="aw-input-button aw-u-flex-basis-400"
 								on:click={() => ($layoutState.showSearch = true)}
 							>
-								<span class="icon-search" aria-hidden="true" />
+								<span class="aw-icon-search" aria-hidden="true" />
 								<span class="text">Search in docs</span>

 								<div class="u-flex u-gap-4 u-margin-inline-start-auto">
@@ -152,22 +152,7 @@
 								target="_blank"
 								class="aw-button is-text"
 							>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									width="18"
-									height="16"
-									viewBox="0 0 18 16"
-									fill="none"
-								>
-									<path
-										d="M8.55214 0.894436C8.73682 0.525615 9.26319 0.525617 9.44786 0.894438L11.3548 4.70276C11.4282 4.84944 11.5688 4.95086 11.7312 4.97425L15.9844 5.5871C16.3973 5.64659 16.5607 6.15521 16.2598 6.44413L13.1922 9.38955C13.0721 9.50495 13.0171 9.67255 13.0457 9.83669L13.7708 14.0043C13.8418 14.4126 13.4147 14.7256 13.0468 14.5349L9.23053 12.5564C9.08598 12.4815 8.91402 12.4815 8.76948 12.5564L4.95321 14.5349C4.58534 14.7256 4.1582 14.4126 4.22923 14.0044L4.95432 9.83669C4.98288 9.67255 4.92794 9.50495 4.80776 9.38955L1.74017 6.44413C1.43926 6.15521 1.60274 5.64659 2.01564 5.5871L6.26881 4.97425C6.43118 4.95086 6.5718 4.84944 6.64524 4.70276L8.55214 0.894436Z"
-										stroke="white"
-										stroke-opacity="0.48"
-										stroke-width="1.20208"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-									/>
-								</svg>
+								<span class="aw-icon-star" aria-hidden="true"></span>
 								<span class="text">Star on GitHub</span>
 								<span class="aw-inline-tag aw-sub-body-400">33.2K</span>
 							</a>
--- a/src/lib/layouts/Sidebar.svelte
+++ b/src/lib/layouts/Sidebar.svelte
@@ -39,7 +39,7 @@
 			class="aw-input-text aw-is-not-desktop"
 			on:click={() => ($layoutState.showSearch = true)}
 		>
-			<span class="icon-search" />
+			<span class="aw-icon-search" />
 			<span class="text">Search in docs</span>
 		</button>
 		<div class="aw-side-nav-scroll">
--- a/src/lib/utils/metadata.ts
+++ b/src/lib/utils/metadata.ts
@@ -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>'
+	);
+}
--- a/src/markdoc/layouts/Article.svelte
+++ b/src/markdoc/layouts/Article.svelte
@@ -19,6 +19,7 @@
 	import { MainFooter } from '$lib/components';
 	import type { TocItem } from '$lib/layouts/DocsArticle.svelte';
 	import { DOCS_TITLE_SUFFIX } from '$routes/titles';
+	import { buildOpenGraphImage, DEFAULT_HOST } from '$lib/utils/metadata';

 	export let title: string;
 	export let description: string;
@@ -54,11 +55,26 @@
 		});
 		return carry;
 	}, []);
+
+	const seoTitle = title + DOCS_TITLE_SUFFIX;
+	const ogImage = buildOpenGraphImage(title, description);
 </script>

 <svelte:head>
-	<title>{title}{DOCS_TITLE_SUFFIX}</title>
+	<!-- 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}>
--- a/src/markdoc/layouts/Author.svelte
+++ b/src/markdoc/layouts/Author.svelte
@@ -19,6 +19,7 @@
 	import { getContext } from 'svelte';
 	import type { PostsData } from './Post.svelte';
 	import { BLOG_TITLE_SUFFIX } from '$routes/titles';
+	import { DEFAULT_HOST } from '$lib/utils/metadata';

 	export let name: string;
 	export let role: string;
@@ -33,10 +34,27 @@
 	const author = authors.find(
 		(p) => $page.url.pathname.substring($page.url.pathname.lastIndexOf('/') + 1) === p.slug
 	);
+
+	const seoTitle = name + BLOG_TITLE_SUFFIX;
+	const description = bio;
+	const ogImage = DEFAULT_HOST + '/images/open-graph/blog.png';
 </script>

 <svelte:head>
-	<title>{name + BLOG_TITLE_SUFFIX}</title>
+	<!-- 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>
--- a/src/markdoc/layouts/Category.svelte
+++ b/src/markdoc/layouts/Category.svelte
@@ -13,6 +13,7 @@
 	import type { PostsData } from './Post.svelte';
 	import type { AuthorData } from './Author.svelte';
 	import { BLOG_TITLE_SUFFIX } from '$routes/titles';
+	import { DEFAULT_HOST } from '$lib/utils/metadata';

 	export let name: string;
 	export let description: string;
@@ -20,10 +21,26 @@
 	const authors = getContext<AuthorData[]>('authors');
 	const postsList = getContext<PostsData[]>('posts');
 	const posts = postsList.filter((post) => post.category.includes(name.toLowerCase()));
+
+	const seoTitle = name + BLOG_TITLE_SUFFIX;
+	const ogImage = DEFAULT_HOST + '/images/open-graph/blog.png';
 </script>

 <svelte:head>
-	<title>{name + BLOG_TITLE_SUFFIX}</title>
+	<!-- 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>
--- a/src/markdoc/layouts/Post.svelte
+++ b/src/markdoc/layouts/Post.svelte
@@ -19,6 +19,7 @@
 	import type { AuthorData } from './Author.svelte';
 	import type { CategoryData } from './Category.svelte';
 	import { BLOG_TITLE_SUFFIX } from '$routes/titles';
+	import { DEFAULT_HOST } from '$lib/utils/metadata';

 	export let title: string;
 	export let description: string;
@@ -44,7 +45,20 @@
 </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>
--- a/src/markdoc/layouts/Tutorial.svelte
+++ b/src/markdoc/layouts/Tutorial.svelte
@@ -14,6 +14,7 @@
 	import { writable } from 'svelte/store';
 	import type { LayoutContext } from './Article.svelte';
 	import { DOCS_TITLE_SUFFIX } from '$routes/titles';
+	import { DEFAULT_HOST } from '$lib/utils/metadata';

 	export let title: string;
 	export let description: string;
@@ -49,13 +50,27 @@
 		});
 		return carry;
 	}, []);
+
+	const seoTitle = title + DOCS_TITLE_SUFFIX;
+	const ogImage = DEFAULT_HOST + '/images/open-graph/docs.png';
 </script>

 <svelte:head>
-	<title>{title}{DOCS_TITLE_SUFFIX}</title>
+	<!-- 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}>
 	<svelte:fragment slot="metadata">
 		{#if difficulty}
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -9,6 +9,7 @@
 	import Products from '$lib/animations/Products/Products.svelte';
 	import ProductsMobile from '$lib/animations/Products/ProductsMobile.svelte';
 	import Tooltip from '$lib/components/Tooltip.svelte';
+	import { DEFAULT_HOST } from '$lib/utils/metadata';

 	const platforms: Array<{
 		name: string;
@@ -61,8 +62,29 @@
 			image: '/images/platforms/dark/android.svg'
 		}
 	];
+
+	const title = 'Appwrite - Build like a team of hundreds';
+	const description = '';
+	const ogImage = `${DEFAULT_HOST}/images/open-graph/website.png`;
 </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
 	style:position="absolute"
 	style:top="0"
--- a/src/routes/assets/+page.svelte
+++ b/src/routes/assets/+page.svelte
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -2,14 +2,32 @@
 	import { Main } from '$lib/layouts';
 	import { MainFooter, FooterNav, Article } from '$lib/components';
 	import { TITLE_SUFFIX } from '$routes/titles.js';
+	import { DEFAULT_HOST } from '$lib/utils/metadata';

 	export let data;

 	const featured = data.posts.find((post) => post.featured);
+
+	const title = 'Blog' + TITLE_SUFFIX;
+	const description = '';
+	const ogImage = DEFAULT_HOST + '/images/open-graph/blog.png';
 </script>

 <svelte:head>
-	<title>Blog{TITLE_SUFFIX}</title>
+	<!-- 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>
--- a/src/routes/community/+page.svelte
+++ b/src/routes/community/+page.svelte
@@ -5,10 +5,28 @@
 	import PreFooter from '$lib/components/PreFooter.svelte';
 	import { Carousel } from '$lib/components';
 	import { TITLE_SUFFIX } from '$routes/titles';
+	import { DEFAULT_HOST } from '$lib/utils/metadata';
+
+	const title = 'Community' + TITLE_SUFFIX;
+	const description = '';
+	const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
 </script>

 <svelte:head>
-	<title>Community{TITLE_SUFFIX}</title>
+	<!-- 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>
--- a/src/routes/company/+page.svelte
+++ b/src/routes/company/+page.svelte
@@ -3,10 +3,28 @@
 	import MainFooter from '$lib/components/MainFooter.svelte';
 	import FooterNav from '$lib/components/FooterNav.svelte';
 	import { TITLE_SUFFIX } from '$routes/titles';
+	import { DEFAULT_HOST } from '$lib/utils/metadata';
+
+	const title = 'Company' + TITLE_SUFFIX;
+	const description = '';
+	const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
 </script>

 <svelte:head>
-	<title>Company{TITLE_SUFFIX}</title>
+	<!-- 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>
--- a/src/routes/contact-us/+page.svelte
+++ b/src/routes/contact-us/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { DEFAULT_HOST } from '$lib/utils/metadata';
 	import { Main } from '$lib/layouts';
 	import { TITLE_SUFFIX } from '$routes/titles';
 	import FooterNav from '../../lib/components/FooterNav.svelte';
@@ -32,10 +33,27 @@

 		submitted = true;
 	}
+
+	const title = 'Contact us' + TITLE_SUFFIX;
+	const description = '';
+	const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
 </script>

 <svelte:head>
-	<title>Contact us{TITLE_SUFFIX}</title>
+	<!-- 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;">
--- a/src/routes/cookies/+page.svelte
+++ b/src/routes/cookies/+page.svelte
@@ -1,12 +1,30 @@
 <script lang="ts">
+	import { DEFAULT_HOST } from '$lib/utils/metadata';
 	import { Main } from '$lib/layouts';
 	import { TITLE_SUFFIX } from '$routes/titles';
 	import FooterNav from '../../lib/components/FooterNav.svelte';
 	import MainFooter from '../../lib/components/MainFooter.svelte';
+
+	const title = 'Cookies' + TITLE_SUFFIX;
+	const description = '';
+	const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
 </script>

 <svelte:head>
-	<title>Cookies{TITLE_SUFFIX}</title>
+	<!-- 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;">
--- a/src/routes/docs/+page.svelte
+++ b/src/routes/docs/+page.svelte
@@ -5,8 +5,31 @@
 	import Docs from '$lib/layouts/Docs.svelte';
 	import MainFooter from '../../lib/components/MainFooter.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>

+<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">
 	<Sidebar />
 	<div class="u-position-absolute u-inset-inline-end-0 aw-u-opacity-40-mobile" style="">
--- a/src/routes/docs/quick-starts/+page.svelte
+++ b/src/routes/docs/quick-starts/+page.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { MainFooter } from '$lib/components';
+	import { DEFAULT_HOST } from '$lib/utils/metadata';
+	import { DOCS_TITLE_SUFFIX } from '$routes/titles';

 	type QuickStart = {
 		title: string;
@@ -40,7 +42,7 @@
 					icon: 'icon-svelte',
 					image: '/images/blog/placeholder.png',
 					href: 'sveltekit'
-				},
+				}
 			]
 		},
 		{
@@ -63,7 +65,7 @@
 					icon: 'icon-android',
 					image: '/images/blog/placeholder.png',
 					href: 'android'
-				},
+				}
 			]
 		},
 		{
@@ -96,8 +98,29 @@
 			]
 		}
 	];
+
+	const title = 'Quick starts' + DOCS_TITLE_SUFFIX;
+	const description = '';
+	const ogImage = DEFAULT_HOST + '/images/open-graph/docs.png';
 </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">
 	<article class="aw-article">
 		<header class="aw-article-header">
--- a/src/routes/docs/references/[version]/[platform]/[service]/+page.svelte
+++ b/src/routes/docs/references/[version]/[platform]/[service]/+page.svelte
@@ -2,6 +2,7 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 	import { MainFooter } from '$lib/components';
+	import { DEFAULT_HOST } from '$lib/utils/metadata';
 	import { layoutState, toggleReferences } from '$lib/layouts/Docs.svelte';
 	import { parse } from '$lib/utils/markdown';
 	import {
@@ -64,11 +65,27 @@

 	$: platform = $page.params.platform as Platform;
 	$: platformType = platform.startsWith('client-') ? 'CLIENT' : 'SERVER';
-	$: serviceName = serviceMap[data.service?.name]
+	$: serviceName = serviceMap[data.service?.name];
+	$: title = serviceName + DOCS_TITLE_SUFFIX;
+	$: description = data.service?.description;
+	$: ogImage = DEFAULT_HOST + '/images/open-graph/docs.png';
 </script>

 <svelte:head>
-	<title>{serviceName}{DOCS_TITLE_SUFFIX}</title>
+	<!-- 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">
@@ -237,7 +254,7 @@
 				<span class="icon-menu-alt-4" aria-hidden="true" />
 			</button>
 			<div class="aw-references-menu-content">
-				<div class="u-flex u-main-space-between u-cross-center u-gap-16 u-margin-block-start-24">
+				<div class="aw-references-menu-header u-flex u-main-space-between u-cross-center u-gap-16 u-margin-block-start-24">
 					<h5 class="aw-references-menu-title aw-eyebrow">On This Page</h5>
 					<button class="aw-icon-button" id="refClose" on:click={toggleReferences}>
 						<span class="icon-x" aria-hidden="true" />
--- a/src/routes/docs/tutorials/+page.svelte
+++ b/src/routes/docs/tutorials/+page.svelte
@@ -1,7 +1,30 @@
 <script lang="ts">
 	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>

+<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">
 	<article class="aw-article">
 		<header class="aw-article-header">
--- a/src/routes/heroes/+page.svelte
+++ b/src/routes/heroes/+page.svelte
@@ -1,11 +1,29 @@
 <script lang="ts">
 	import { FooterNav, MainFooter } from '$lib/components';
+	import { DEFAULT_HOST } from '$lib/utils/metadata';
 	import { Main } from '$lib/layouts';
 	import { TITLE_SUFFIX } from '$routes/titles';
+
+	const title = 'Heroes' + TITLE_SUFFIX;
+	const description = '';
+	const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
 </script>

 <svelte:head>
-	<title>Heroes{TITLE_SUFFIX}</title>
+	<!-- 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
--- a/src/routes/pricing/+page.svelte
+++ b/src/routes/pricing/+page.svelte
@@ -1,14 +1,32 @@
 <script lang="ts">
 	import { FooterNav, MainFooter, PreFooter } from '$lib/components';
+	import { DEFAULT_HOST } from '$lib/utils/metadata';

 	import { Main } from '$lib/layouts';
 	import { TITLE_SUFFIX } from '$routes/titles';
 	import ComparePlans from './compare-plans.svelte';
 	import Faq from './faq.svelte';
+
+	const title = 'Pricing' + TITLE_SUFFIX;
+	const description = '';
+	const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
 </script>

 <svelte:head>
-	<title>Pricing{TITLE_SUFFIX}</title>
+	<!-- 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%;">
--- a/src/routes/privacy/+page.svelte
+++ b/src/routes/privacy/+page.svelte
@@ -1,13 +1,31 @@
 <script lang="ts">
+	import { DEFAULT_HOST } from '$lib/utils/metadata';
 	import { Main } from '$lib/layouts';
 	import { TITLE_SUFFIX } from '$routes/titles';

-	import FooterNav from '../../lib/components/FooterNav.svelte';
-	import MainFooter from '../../lib/components/MainFooter.svelte';
+	import FooterNav from '$lib/components/FooterNav.svelte';
+	import MainFooter from '$lib/components/MainFooter.svelte';
+
+	const title = 'Privacy' + TITLE_SUFFIX;
+	const description = '';
+	const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
 </script>

 <svelte:head>
-	<title>Privacy{TITLE_SUFFIX}</title>
+	<!-- 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;">
--- a/src/scss/6-elements/_container.scss
+++ b/src/scss/6-elements/_container.scss
@@ -19,6 +19,7 @@
  display:grid;

  &-level-1 {
+    overflow:hidden;
    @media #{$break1} {
      padding-block:pxToRem(0);
      &:first-child { padding-block-start:pxToRem(0); }
--- a/src/scss/6-elements/_input-text.scss
+++ b/src/scss/6-elements/_input-text.scss
@@ -115,7 +115,8 @@
  &-search-wrapper {
    position:relative; min-inline-size:pxToRem(350);
    input { block-size:pxToRem(48); padding-inline-start:pxToRem(40);  }
-    .icon-search {
+    .icon-search,
+    .#{$p}-icon-search {
      position:absolute; inset-block-start:pxToRem(16);  inset-inline-start:pxToRem(16);
      line-height:1;
    }
--- a/src/scss/7-components/_article.scss
+++ b/src/scss/7-components/_article.scss
@@ -28,7 +28,10 @@
      &-pink-dots    { margin-block-end:pxToRem(24); }
      &-blockquote    { margin-block:pxToRem(16); }
      &-table-wrapper { margin-block-end:pxToRem(32); }
-      &-media         { margin-block-end:pxToRem(32); }
+      &-media         {
+        margin-block-end:pxToRem(32);
+        &:not(:first-child) { margin-block-start:pxToRem(16); }
+      }
      &-inline-info   { margin-block-end:pxToRem(24); }
      &-code-snippet  { margin-block-end:pxToRem(32); }
    }
--- a/src/scss/7-components/_side-nav.scss
+++ b/src/scss/7-components/_side-nav.scss
@@ -18,14 +18,14 @@


  position:sticky; z-index:35; inset-block-start:pxToRem(74); inset-block-end:0;
-  block-size:calc(100vh - pxToRem(75));
+  block-size:calc(100vh - pxToRem(81));
  .#{$p}-icon-button { transition:var(--transition); margin-block-end:pxToRem(-4); margin-inline-end:pxToRem(6); }



  &-wrapper {
    display:flex; flex-direction:column; block-size:100%; gap:pxToRem(16);
-    padding-inline:pxToRem(16);
+    padding:pxToRem(16); padding-block-end:pxToRem(32);
    background-color:hsl(var(--p-side-nav-bg-color)); transition:var(--transition);

    &-parent {
@@ -39,7 +39,7 @@
    @include scroll(); overflow-y:auto; overflow-x:hidden;
    flex:1;
    display:flex; flex-direction:column; gap:pxToRem(24);
-    padding:pxToRem(16); margin-inline:pxToRem(-16); 
+    padding-inline:pxToRem(16); margin-inline:pxToRem(-16);

    .#{$p}-is-only-mobile  & {
      border-block-start: 1px solid hsl(var(--aw-color-smooth));
@@ -52,7 +52,7 @@
    padding-inline:pxToRem(12); padding-block:pxToRem(8); white-space:nowrap;
    color:hsl(var(--p-side-nav-item-text-color)); background-color:hsl(var(--p-side-nav-item-bg-color));
    border-radius:pxToRem(8);
-    [class*="icon"]:first-child { color:hsl(var(--p-side-nav-item-icon-color)); }
+    [class*="icon"]:first-child { color:hsl(var(--p-side-nav-item-icon-color)); font-size:pxToRem(16); }
    [class*="icon"]:last-child { transition:var(--transiton); }
    &:hover {
      --p-side-nav-item-bg-color: var(--p-side-nav-item-bg-color-hover);
--- a/src/scss/9-grids/_grid-huge-navs.scss
+++ b/src/scss/9-grids/_grid-huge-navs.scss
@@ -2,9 +2,9 @@

 .#{$p}-grid-huge-navs {
  --p-grid-huge-navs-padding-inline: #{pxToRem(32)};
-  --p-grid-huge-navs-main-header-height: #{pxToRem(80)};
+  --p-grid-huge-navs-main-header-height: #{pxToRem(73)};
  --p-grid-huge-navs-secondary-header-height: #{pxToRem(116)};
-  --p-grid-huge-navs-secondary-sticky-position: #{pxToRem(80 + 116)}; /* 80 + 116 + 24 (margin) */
+  --p-grid-huge-navs-secondary-sticky-position: #{pxToRem(189)}; /* 80 + 116 + 24 (margin) */

  --p-grid-huge-navs-side-nav-width-closed: #{pxToRem(73)};
  --p-grid-huge-navs-side-nav-width-opened: #{pxToRem(280)};
@@ -57,13 +57,15 @@

  @media #{$break2}, #{$break3}, #{$break4} {
    .#{$p}-references-menu {
-      #refOpen { position:sticky; inset-block-start:calc(var(--p-grid-huge-navs-secondary-sticky-position) + 24px); }
+      #refOpen { position:sticky; inset-block-start:pxToRem(213); }
      &-content {
        display:none; /* hide */
+        gap:0;
        padding-inline-start:pxToRem(24);  padding-inline-end:var(--p-grid-huge-navs-padding-inline);
        border-inline-start:solid pxToRem(1) hsl(var(--aw-color-border));
        background-color:hsl(var(--p-body-bg-color)); inline-size:var(--p-grid-huge-navs-side-nav-width-opened);
      }
+      &-list { margin-block-start:pxToRem(8); }
      &.is-open {
        .#{$p}-references-menu-content {
          display:flex; /* show */
@@ -136,7 +138,7 @@
  @media #{$break5open} {
    .#{$p}-references-menu {
      #refOpen, #refClose { display:none; }
-      &-content { position:sticky; inset-block-start:var(--p-grid-huge-navs-secondary-sticky-position); }
+      &-content { position:sticky; inset-block-start:pxToRem(213); }
    }
  }
  @media #{$break6open} {
--- a/src/scss/_10-utilities.scss
+++ b/src/scss/_10-utilities.scss
@@ -68,6 +68,7 @@
 .#{$p}-u-max-height-300             { max-block-size:pxToRem(300); }

 .#{$p}-u-trim-1           { @include trim(1); }
+.#{$p}-u-line-height-1-2         { line-height:1.2!important; }
 .#{$p}-u-line-height-2           { line-height:2!important; }

 .#{$p}-u-size-40                  { inline-size:pxToRem(40); block-size:pxToRem(40); }
@@ -143,8 +144,11 @@
 .#{$p}-u-text-align-start { text-align:start!important; }
 .#{$p}-u-text-align-center { text-align:center!important; }
 .#{$p}-u-mobile-align-text-center { @media #{$break1} { text-align:center!important;} }
-.#{$p}-u-padding-inline-0 {padding-inline:0!important;}
-.#{$p}-u-padding-inline-64 {padding-inline:pxToRem(64)!important;}
+.#{$p}-u-padding-inline-0  { padding-inline:0!important; }
+.#{$p}-u-padding-inline-12 { padding-inline:pxToRem(12)!important; }
+.#{$p}-u-padding-inline-64 { padding-inline:pxToRem(64)!important; }
+
+.#{$p}-u-padding-block-8   { padding-block:pxToRem(8)!important; }

 .#{$p}-u-inset-block-start-100 { inset-block-start:pxToRem(160); }

--- a/static/images/open-graph/blog.png
+++ b/static/images/open-graph/blog.png
--- a/static/images/open-graph/docs.png
+++ b/static/images/open-graph/docs.png
--- a/static/images/open-graph/website.png
+++ b/static/images/open-graph/website.png