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

Merge branch 'main' into feat-docs-g2

Browse Source
This commit is contained in:
Vincent (Wen Yu) Ge
2023-09-27 16:47:22 -04:00
committed by GitHub
parent d5c47eb2af 6cbaee0e7b
commit 4ef6caa9de
38 changed files with 793 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
LICENSE
View File

@@ -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.

2
README.md
View File

@@ -40,4 +40,4 @@ Join our growing community around the world! See our official [Blog](https://med
## License ## 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/).

6
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
@@ -5067,8 +5067,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

2
src/app.html
View File

@@ -5,7 +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" />
<title>Appwrite - Build like a team of hundreds</title> <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">

7
src/lib/animations/Products/post/post.svelte
View File

@@ -211,8 +211,11 @@
content: ''; content: '';
inset: 0; inset: 0;
position: absolute; position: absolute;
background: #19191d; //background: #19191d; // old bg
filter: blur(125px); //filter: blur(125px); // break Safari
background: #19191dcc;
filter: blur(67px);
} }
h3 { h3 {

10
src/lib/components/Search.svelte
View File

@@ -147,7 +147,7 @@
<div <div
class="aw-input-text-search-wrapper aw-u-max-width-680 aw-u-margin-inline-20 u-width-full-line" 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" /> <div id="searchbox" />
<!-- svelte-ignore a11y-autofocus --> <!-- svelte-ignore a11y-autofocus -->
@@ -157,7 +157,7 @@
type="text" type="text"
id="search" id="search"
bind:value bind:value
placeholder="Search" placeholder="Search in docs"
style="border-end-start-radius:0; border-end-end-radius:0;" style="border-end-start-radius:0; border-end-end-radius:0;"
use:arrowKeyFocus use:arrowKeyFocus
data-hit="-1" data-hit="-1"
@@ -171,14 +171,14 @@
{#if results.length > 0} {#if results.length > 0}
<section> <section>
<h6 class="aw-eyebrow">{results.length} results found</h6> <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)} {#each results as hit, i (hit.uid)}
<li> <li>
<a <a
data-hit={i} data-hit={i}
href={createHref(hit)} href={createHref(hit)}
use:arrowKeyFocus 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"> <div class="aw-u-trim-1">
<span class="aw-u-color-text-secondary">{hit.h1}</span> <span class="aw-u-color-text-secondary">{hit.h1}</span>
@@ -203,7 +203,7 @@
{/if} {/if}
<section> <section>
<h6 class="aw-eyebrow">Recommended</h6> <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)} {#each recommended as hit, i (hit.uid)}
{@const index = i + (results.length ? results.length : 0)} {@const index = i + (results.length ? results.length : 0)}
<li> <li>

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

@@ -2,7 +2,6 @@ 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';

19
src/lib/layouts/Docs.svelte
View File

@@ -135,7 +135,7 @@
class="aw-input-button aw-u-flex-basis-400" class="aw-input-button aw-u-flex-basis-400"
on:click={() => ($layoutState.showSearch = true)} 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> <span class="text">Search in docs</span>
<div class="u-flex u-gap-4 u-margin-inline-start-auto"> <div class="u-flex u-gap-4 u-margin-inline-start-auto">
@@ -152,22 +152,7 @@
target="_blank" target="_blank"
class="aw-button is-text" class="aw-button is-text"
> >
<svg <span class="aw-icon-star" aria-hidden="true"></span>
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="text">Star on GitHub</span> <span class="text">Star on GitHub</span>
<span class="aw-inline-tag aw-sub-body-400">33.2K</span> <span class="aw-inline-tag aw-sub-body-400">33.2K</span>
</a> </a>

2
src/lib/layouts/Sidebar.svelte
View File

@@ -39,7 +39,7 @@
class="aw-input-text aw-is-not-desktop" class="aw-input-text aw-is-not-desktop"
on:click={() => ($layoutState.showSearch = true)} on:click={() => ($layoutState.showSearch = true)}
> >
<span class="icon-search" /> <span class="aw-icon-search" />
<span class="text">Search in docs</span> <span class="text">Search in docs</span>
</button> </button>
<div class="aw-side-nav-scroll"> <div class="aw-side-nav-scroll">

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>'
);
}

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

@@ -19,6 +19,7 @@
import { MainFooter } 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, DEFAULT_HOST } from '$lib/utils/metadata';
export let title: string; export let title: string;
export let description: string; export let description: string;
@@ -54,11 +55,26 @@
}); });
return carry; return carry;
}, []); }, []);
const seoTitle = title + DOCS_TITLE_SUFFIX;
const ogImage = buildOpenGraphImage(title, description);
</script> </script>
<svelte:head> <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 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> </svelte:head>
<DocsArticle {title} {back} {toc}> <DocsArticle {title} {back} {toc}>

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

@@ -19,6 +19,7 @@
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 } from '$lib/utils/metadata';
export let name: string; export let name: string;
export let role: string; export let role: string;
@@ -33,10 +34,27 @@
const author = authors.find( const author = authors.find(
(p) => $page.url.pathname.substring($page.url.pathname.lastIndexOf('/') + 1) === p.slug (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> </script>
<svelte:head> <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> </svelte:head>
<Main> <Main>

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

@@ -13,6 +13,7 @@
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 } from '$lib/utils/metadata';
export let name: string; export let name: string;
export let description: string; export let description: string;
@@ -20,10 +21,26 @@
const authors = getContext<AuthorData[]>('authors'); const authors = getContext<AuthorData[]>('authors');
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()));
const seoTitle = name + BLOG_TITLE_SUFFIX;
const ogImage = DEFAULT_HOST + '/images/open-graph/blog.png';
</script> </script>
<svelte:head> <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> </svelte:head>
<Main> <Main>

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

@@ -19,6 +19,7 @@
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 } from '$lib/utils/metadata';
export let title: string; export let title: string;
export let description: string; export let description: string;
@@ -44,7 +45,20 @@
</script> </script>
<svelte:head> <svelte:head>
<!-- Titles -->
<title>{title + BLOG_TITLE_SUFFIX}</title> <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> </svelte:head>
<Main> <Main>

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

@@ -14,6 +14,7 @@
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 { DEFAULT_HOST } from '$lib/utils/metadata';
export let title: string; export let title: string;
export let description: string; export let description: string;
@@ -49,13 +50,27 @@
}); });
return carry; return carry;
}, []); }, []);
const seoTitle = title + DOCS_TITLE_SUFFIX;
const ogImage = DEFAULT_HOST + '/images/open-graph/docs.png';
</script> </script>
<svelte:head> <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 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> </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}

22
src/routes/+page.svelte
View File

@@ -9,6 +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 } from '$lib/utils/metadata';
const platforms: Array<{ const platforms: Array<{
name: string; name: string;
@@ -61,8 +62,29 @@
image: '/images/platforms/dark/android.svg' 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> </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"

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

File diff suppressed because one or more lines are too long

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

@@ -2,14 +2,32 @@
import { Main } from '$lib/layouts'; import { Main } from '$lib/layouts';
import { MainFooter, FooterNav, Article } 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 } 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);
const title = 'Blog' + TITLE_SUFFIX;
const description = '';
const ogImage = DEFAULT_HOST + '/images/open-graph/blog.png';
</script> </script>
<svelte:head> <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> </svelte:head>
<Main> <Main>

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

@@ -5,10 +5,28 @@
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 } from '$lib/utils/metadata';
const title = 'Community' + TITLE_SUFFIX;
const description = '';
const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
</script> </script>
<svelte:head> <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> </svelte:head>
<Main> <Main>

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

@@ -3,10 +3,28 @@
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 { DEFAULT_HOST } from '$lib/utils/metadata';
const title = 'Company' + TITLE_SUFFIX;
const description = '';
const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
</script> </script>
<svelte:head> <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> </svelte:head>
<Main> <Main>

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

@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
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 FooterNav from '../../lib/components/FooterNav.svelte'; import FooterNav from '../../lib/components/FooterNav.svelte';
@@ -32,10 +33,27 @@
submitted = true; submitted = true;
} }
const title = 'Contact us' + TITLE_SUFFIX;
const description = '';
const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
</script> </script>
<svelte:head> <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> </svelte:head>
<div class="u-position-absolute" style="pointer-events:none;"> <div class="u-position-absolute" style="pointer-events:none;">

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

@@ -1,12 +1,30 @@
<script lang="ts"> <script lang="ts">
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 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';
const title = 'Cookies' + TITLE_SUFFIX;
const description = '';
const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
</script> </script>
<svelte:head> <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> </svelte:head>
<div class="u-position-absolute" style="pointer-events:none;"> <div class="u-position-absolute" style="pointer-events:none;">

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="">

27
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;
@@ -40,7 +42,7 @@
icon: 'icon-svelte', icon: 'icon-svelte',
image: '/images/blog/placeholder.png', image: '/images/blog/placeholder.png',
href: 'sveltekit' href: 'sveltekit'
}, }
] ]
}, },
{ {
@@ -63,7 +65,7 @@
icon: 'icon-android', icon: 'icon-android',
image: '/images/blog/placeholder.png', image: '/images/blog/placeholder.png',
href: 'android' 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> </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">

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

@@ -2,6 +2,7 @@
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { page } from '$app/stores'; import { page } from '$app/stores';
import { MainFooter } from '$lib/components'; import { MainFooter } from '$lib/components';
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 {
@@ -64,11 +65,27 @@
$: 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];
$: title = serviceName + DOCS_TITLE_SUFFIX;
$: description = data.service?.description;
$: ogImage = DEFAULT_HOST + '/images/open-graph/docs.png';
</script> </script>
<svelte:head> <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> </svelte:head>
<main class="u-contents"> <main class="u-contents">
@@ -237,7 +254,7 @@
<span class="icon-menu-alt-4" aria-hidden="true" /> <span class="icon-menu-alt-4" aria-hidden="true" />
</button> </button>
<div class="aw-references-menu-content"> <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> <h5 class="aw-references-menu-title aw-eyebrow">On This Page</h5>
<button class="aw-icon-button" id="refClose" on:click={toggleReferences}> <button class="aw-icon-button" id="refClose" on:click={toggleReferences}>
<span class="icon-x" aria-hidden="true" /> <span class="icon-x" aria-hidden="true" />

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">

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

@@ -1,11 +1,29 @@
<script lang="ts"> <script lang="ts">
import { FooterNav, MainFooter } from '$lib/components'; import { FooterNav, MainFooter } from '$lib/components';
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';
const title = 'Heroes' + TITLE_SUFFIX;
const description = '';
const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
</script> </script>
<svelte:head> <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> </svelte:head>
<div <div

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

@@ -1,14 +1,32 @@
<script lang="ts"> <script lang="ts">
import { FooterNav, MainFooter, PreFooter } from '$lib/components'; import { FooterNav, MainFooter, PreFooter } from '$lib/components';
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';
const title = 'Pricing' + TITLE_SUFFIX;
const description = '';
const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
</script> </script>
<svelte:head> <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> </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%;">

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

@@ -1,13 +1,31 @@
<script lang="ts"> <script lang="ts">
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 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';
const title = 'Privacy' + TITLE_SUFFIX;
const description = '';
const ogImage = DEFAULT_HOST + '/images/open-graph/website.png';
</script> </script>
<svelte:head> <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> </svelte:head>
<div class="u-position-absolute" style="pointer-events:none;"> <div class="u-position-absolute" style="pointer-events:none;">

1
src/scss/6-elements/_container.scss
View File

@@ -19,6 +19,7 @@
display:grid; display:grid;
&-level-1 { &-level-1 {
overflow:hidden;
@media #{$break1} { @media #{$break1} {
padding-block:pxToRem(0); padding-block:pxToRem(0);
&:first-child { padding-block-start:pxToRem(0); } &:first-child { padding-block-start:pxToRem(0); }

3
src/scss/6-elements/_input-text.scss
View File

@@ -115,7 +115,8 @@
&-search-wrapper { &-search-wrapper {
position:relative; min-inline-size:pxToRem(350); position:relative; min-inline-size:pxToRem(350);
input { block-size:pxToRem(48); padding-inline-start:pxToRem(40); } 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); position:absolute; inset-block-start:pxToRem(16); inset-inline-start:pxToRem(16);
line-height:1; line-height:1;
} }

5
src/scss/7-components/_article.scss
View File

@@ -28,7 +28,10 @@
&-pink-dots { margin-block-end:pxToRem(24); } &-pink-dots { margin-block-end:pxToRem(24); }
&-blockquote { margin-block:pxToRem(16); } &-blockquote { margin-block:pxToRem(16); }
&-table-wrapper { margin-block-end:pxToRem(32); } &-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); } &-inline-info { margin-block-end:pxToRem(24); }
&-code-snippet { margin-block-end:pxToRem(32); } &-code-snippet { margin-block-end:pxToRem(32); }
} }

10
src/scss/7-components/_side-nav.scss
View File

@@ -18,16 +18,16 @@
position:sticky; z-index:35; inset-block-start:pxToRem(74); inset-block-end:0; 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); } .#{$p}-icon-button { transition:var(--transition); margin-block-end:pxToRem(-4); margin-inline-end:pxToRem(6); }
&-wrapper { &-wrapper {
display:flex; flex-direction:column; block-size:100%; gap:pxToRem(16); 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); background-color:hsl(var(--p-side-nav-bg-color)); transition:var(--transition);
&-parent { &-parent {
display:flex; align-items:center; display:flex; align-items:center;
padding-block-end:pxToRem(16); border-block-end:pxToRem(1) solid hsl(var(--aw-color-smooth)); padding-block-end:pxToRem(16); border-block-end:pxToRem(1) solid hsl(var(--aw-color-smooth));
@@ -39,7 +39,7 @@
@include scroll(); overflow-y:auto; overflow-x:hidden; @include scroll(); overflow-y:auto; overflow-x:hidden;
flex:1; flex:1;
display:flex; flex-direction:column; gap:pxToRem(24); 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 & { .#{$p}-is-only-mobile & {
border-block-start: 1px solid hsl(var(--aw-color-smooth)); 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; 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)); color:hsl(var(--p-side-nav-item-text-color)); background-color:hsl(var(--p-side-nav-item-bg-color));
border-radius:pxToRem(8); 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); } [class*="icon"]:last-child { transition:var(--transiton); }
&:hover { &:hover {
--p-side-nav-item-bg-color: var(--p-side-nav-item-bg-color-hover); --p-side-nav-item-bg-color: var(--p-side-nav-item-bg-color-hover);

10
src/scss/9-grids/_grid-huge-navs.scss
View File

@@ -2,9 +2,9 @@
.#{$p}-grid-huge-navs { .#{$p}-grid-huge-navs {
--p-grid-huge-navs-padding-inline: #{pxToRem(32)}; --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-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-closed: #{pxToRem(73)};
--p-grid-huge-navs-side-nav-width-opened: #{pxToRem(280)}; --p-grid-huge-navs-side-nav-width-opened: #{pxToRem(280)};
@@ -57,13 +57,15 @@
@media #{$break2}, #{$break3}, #{$break4} { @media #{$break2}, #{$break3}, #{$break4} {
.#{$p}-references-menu { .#{$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 { &-content {
display:none; /* hide */ display:none; /* hide */
gap:0;
padding-inline-start:pxToRem(24); padding-inline-end:var(--p-grid-huge-navs-padding-inline); 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)); 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); 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 { &.is-open {
.#{$p}-references-menu-content { .#{$p}-references-menu-content {
display:flex; /* show */ display:flex; /* show */
@@ -136,7 +138,7 @@
@media #{$break5open} { @media #{$break5open} {
.#{$p}-references-menu { .#{$p}-references-menu {
#refOpen, #refClose { display:none; } #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} { @media #{$break6open} {

8
src/scss/_10-utilities.scss
View File

@@ -68,6 +68,7 @@
.#{$p}-u-max-height-300 { max-block-size:pxToRem(300); } .#{$p}-u-max-height-300 { max-block-size:pxToRem(300); }
.#{$p}-u-trim-1 { @include trim(1); } .#{$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-line-height-2 { line-height:2!important; }
.#{$p}-u-size-40 { inline-size:pxToRem(40); block-size:pxToRem(40); } .#{$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-start { text-align:start!important; }
.#{$p}-u-text-align-center { text-align:center!important; } .#{$p}-u-text-align-center { text-align:center!important; }
.#{$p}-u-mobile-align-text-center { @media #{$break1} { 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-0 { padding-inline:0!important; }
.#{$p}-u-padding-inline-64 {padding-inline:pxToRem(64)!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); } .#{$p}-u-inset-block-start-100 { inset-block-start:pxToRem(160); }

BIN
static/images/open-graph/blog.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
static/images/open-graph/docs.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
static/images/open-graph/website.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB