Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: nuxt quickstart #73

Closed
wants to merge 13 commits into from
72 changes: 72 additions & 0 deletions src/lib/components/Metadata.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<script lang="ts" context="module">
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)}`;
}
</script>

<script lang="ts">
import type { AuthorData } from '$markdoc/layouts/Author.svelte';
import type { PostsData } from '$markdoc/layouts/Post.svelte';

export let title: string | undefined = undefined;
export let description: string | undefined = undefined;
export let ogImage: string | undefined = undefined;
export let ogTitle: string | undefined = title;
export let ogDescription: string | undefined = description;
export let author: AuthorData | undefined = undefined;
export let post: PostsData | undefined = undefined;

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 title}
<title>{title}</title>
<meta name="”twitter:site”" content="@appwrite" />
{/if}
{#if description}
<meta name="description" content={description} />
{/if}
{#if ogImage}
<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”" />
{/if}
{#if ogTitle}
<meta property="og:title" content={ogTitle} />
<meta name="”twitter:title”" content={ogTitle} />
{/if}
{#if ogDescription}
<meta property="og:description" content={ogDescription} />
<meta name="”twitter:description" content={ogTitle} />
{/if}
{#if author}
{@html `<script type="application/ld+json">${createSchemaAuthor(author)}</script>`}
{/if}
{#if post}
{@html `<script type="application/ld+json">${createSchemaPost(post)}</script>`}
{/if}
<slot />
1 change: 1 addition & 0 deletions src/lib/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,4 @@ export { default as Tooltip } from './Tooltip.svelte';
export { default as Spline } from './Spline.svelte';
export { default as Article } from './Article.svelte';
export { default as Carousel } from './Carousel.svelte';
export { default as Metadata } from './Metadata.svelte';
10 changes: 7 additions & 3 deletions src/markdoc/layouts/Article.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,10 @@
<script lang="ts">
import { DocsArticle } from '$lib/layouts';
import { getContext, setContext } from 'svelte';
import { MainFooter } from '$lib/components';
import { MainFooter, Metadata } from '$lib/components';
import type { TocItem } from '$lib/layouts/DocsArticle.svelte';
import { DOCS_TITLE_SUFFIX } from '$routes/titles';
import { buildOpenGraphImage } from '$lib/components/Metadata.svelte';

export let title: string;
export let description: string;
Expand Down Expand Up @@ -57,8 +58,11 @@
</script>

<svelte:head>
<title>{title}{DOCS_TITLE_SUFFIX}</title>
<meta name="description" content={description} />
<Metadata
title={title + DOCS_TITLE_SUFFIX}
{description}
ogImage={buildOpenGraphImage(title, description)}
/>
</svelte:head>

<DocsArticle {title} {back} {toc}>
Expand Down
7 changes: 5 additions & 2 deletions src/markdoc/layouts/Author.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
</script>

<script lang="ts">
import { Article, FooterNav, MainFooter } from '$lib/components';
import { Article, FooterNav, MainFooter, Metadata } from '$lib/components';
import { page } from '$app/stores';
import { Main } from '$lib/layouts';
import { getContext } from 'svelte';
Expand All @@ -36,7 +36,10 @@
</script>

<svelte:head>
<title>{name + BLOG_TITLE_SUFFIX}</title>
<Metadata
title={name + BLOG_TITLE_SUFFIX}
description={bio}
/>
</svelte:head>

<Main>
Expand Down
4 changes: 2 additions & 2 deletions src/markdoc/layouts/Category.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
</script>

<script lang="ts">
import { Article, FooterNav, MainFooter } from '$lib/components';
import { Article, FooterNav, MainFooter, Metadata } from '$lib/components';
import { Main } from '$lib/layouts';
import { getContext } from 'svelte';
import type { PostsData } from './Post.svelte';
Expand All @@ -23,7 +23,7 @@
</script>

<svelte:head>
<title>{name + BLOG_TITLE_SUFFIX}</title>
<Metadata title={name + BLOG_TITLE_SUFFIX} {description} />
</svelte:head>

<Main>
Expand Down
10 changes: 8 additions & 2 deletions src/markdoc/layouts/Post.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,13 @@
</script>

<script lang="ts">
import { Article, FooterNav, MainFooter, Newsletter } from '$lib/components';
import { Article, FooterNav, MainFooter, Metadata, Newsletter } from '$lib/components';
import { Main } from '$lib/layouts';
import { getContext } from 'svelte';
import type { AuthorData } from './Author.svelte';
import type { CategoryData } from './Category.svelte';
import { BLOG_TITLE_SUFFIX } from '$routes/titles';
import { DEFAULT_HOST } from '$lib/components/Metadata.svelte';

export let title: string;
export let description: string;
Expand All @@ -44,7 +45,12 @@
</script>

<svelte:head>
<title>{title + BLOG_TITLE_SUFFIX}</title>
<Metadata
title={title + BLOG_TITLE_SUFFIX}
{description}
ogTitle={title}
ogImage={DEFAULT_HOST + cover}
/>
</svelte:head>

<Main>
Expand Down
5 changes: 2 additions & 3 deletions src/markdoc/layouts/Tutorial.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<script lang="ts">
import { DocsTutorial } from '$lib/layouts';
import { getContext, setContext } from 'svelte';
import { MainFooter } from '$lib/components';
import { MainFooter, Metadata } from '$lib/components';
import type { TocItem } from '$lib/layouts/DocsArticle.svelte';
import { writable } from 'svelte/store';
import type { LayoutContext } from './Article.svelte';
Expand Down Expand Up @@ -52,8 +52,7 @@
</script>

<svelte:head>
<title>{title}{DOCS_TITLE_SUFFIX}</title>
<meta name="description" content={description} />
<Metadata title={title + DOCS_TITLE_SUFFIX} {description} />
</svelte:head>

<DocsTutorial {title} {toc} {tutorials} currentStep={step}>
Expand Down
6 changes: 6 additions & 0 deletions src/routes/+layout.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,18 @@
import '@fontsource/inter/900.css';
import '$scss/index.scss';
import { dev } from '$app/environment';
import { Metadata } from '$lib/components';
import { DEFAULT_HOST } from '$lib/components/Metadata.svelte';
</script>

<svelte:head>
{#if !dev}
<script defer data-domain="appwrite.io" src="https://plausible.io/js/script.js"></script>
{/if}
<Metadata
title="Appwrite - Build like a team of hundreds"
ogImage="{DEFAULT_HOST}/images/open-graph/website.png"
/>
</svelte:head>

<slot />
2 changes: 1 addition & 1 deletion src/routes/+page.svelte
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script lang="ts">
import { Main } from '$lib/layouts';
import { Spline } from '$lib/components';
import { Metadata, Spline } from '$lib/components';
import MainFooter from '../lib/components/MainFooter.svelte';
import FooterNav from '../lib/components/FooterNav.svelte';
import DeveloperCard from './DeveloperCard.svelte';
Expand Down
11 changes: 6 additions & 5 deletions src/routes/assets/+page.svelte
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
<script lang="ts">
import { Metadata } from '$lib/components';
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';
</script>

<svelte:head>
<title>Assets{TITLE_SUFFIX}</title>
<Metadata title={'Assets' + TITLE_SUFFIX} />
</svelte:head>

<div class="u-position-absolute" style="pointer-events:none;">
Expand Down Expand Up @@ -347,16 +348,16 @@
</p>
<div class="aw-grid-1-1-opt-2 u-gap-32 u-margin-block-start-12">
<div>
<img class="aw-u-border-radius-8 aw-u-media-ratio-16-9 u-width-full-line" src="/images/blog/placeholder.png" alt>
<img class="aw-u-border-radius-8 aw-u-media-ratio-16-9 u-width-full-line" src="/images/blog/placeholder.png" alt="placeholder">
</div>
<div>
<img class="aw-u-border-radius-8 aw-u-media-ratio-16-9 u-width-full-line" src="/images/blog/placeholder.png" alt>
<img class="aw-u-border-radius-8 aw-u-media-ratio-16-9 u-width-full-line" src="/images/blog/placeholder.png" alt="placeholder">
</div>
<div>
<img class="aw-u-border-radius-8 aw-u-media-ratio-16-9 u-width-full-line" src="/images/blog/placeholder.png" alt>
<img class="aw-u-border-radius-8 aw-u-media-ratio-16-9 u-width-full-line" src="/images/blog/placeholder.png" alt="placeholder">
</div>
<div>
<img class="aw-u-border-radius-8 aw-u-media-ratio-16-9 u-width-full-line" src="/images/blog/placeholder.png" alt>
<img class="aw-u-border-radius-8 aw-u-media-ratio-16-9 u-width-full-line" src="/images/blog/placeholder.png" alt="placeholder">
</div>

</div>
Expand Down
5 changes: 3 additions & 2 deletions src/routes/blog/+page.svelte
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
<script lang="ts">
import { Main } from '$lib/layouts';
import { MainFooter, FooterNav, Article } from '$lib/components';
import { MainFooter, FooterNav, Article, Metadata } from '$lib/components';
import { TITLE_SUFFIX } from '$routes/titles.js';
import { DEFAULT_HOST } from '$lib/components/Metadata.svelte';

export let data;

const featured = data.posts.find((post) => post.featured);
</script>

<svelte:head>
<title>Blog{TITLE_SUFFIX}</title>
<Metadata title={'Blog' + TITLE_SUFFIX} ogImage="{DEFAULT_HOST}/images/open-graph/blog.png" />
</svelte:head>

<Main>
Expand Down
4 changes: 2 additions & 2 deletions src/routes/community/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@
import MainFooter from '$lib/components/MainFooter.svelte';
import FooterNav from '$lib/components/FooterNav.svelte';
import PreFooter from '$lib/components/PreFooter.svelte';
import { Carousel } from '$lib/components';
import { Carousel, Metadata } from '$lib/components';
import { TITLE_SUFFIX } from '$routes/titles';
</script>

<svelte:head>
<title>Community{TITLE_SUFFIX}</title>
<Metadata title={'Community' + TITLE_SUFFIX} />
</svelte:head>

<Main>
Expand Down
3 changes: 2 additions & 1 deletion src/routes/company/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@
import MainFooter from '$lib/components/MainFooter.svelte';
import FooterNav from '$lib/components/FooterNav.svelte';
import { TITLE_SUFFIX } from '$routes/titles';
import { Metadata } from '$lib/components';
</script>

<svelte:head>
<title>Company{TITLE_SUFFIX}</title>
<Metadata title={'Company' + TITLE_SUFFIX} />
</svelte:head>

<Main>
Expand Down
3 changes: 2 additions & 1 deletion src/routes/contact-us/+page.svelte
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<script lang="ts">
import { Metadata } from '$lib/components';
import { Main } from '$lib/layouts';
import { TITLE_SUFFIX } from '$routes/titles';
import FooterNav from '../../lib/components/FooterNav.svelte';
Expand Down Expand Up @@ -35,7 +36,7 @@
</script>

<svelte:head>
<title>Contact us{TITLE_SUFFIX}</title>
<Metadata title={'Contact us' + TITLE_SUFFIX} />
</svelte:head>

<div class="u-position-absolute" style="pointer-events:none;">
Expand Down
3 changes: 2 additions & 1 deletion src/routes/cookies/+page.svelte
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
<script lang="ts">
import { Metadata } from '$lib/components';
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';
</script>

<svelte:head>
<title>Cookies{TITLE_SUFFIX}</title>
<Metadata title={'Cookies' + TITLE_SUFFIX} />
</svelte:head>

<div class="u-position-absolute" style="pointer-events:none;">
Expand Down
11 changes: 11 additions & 0 deletions src/routes/docs/+layout.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<script lang="ts">
import { Metadata } from '$lib/components';
import { DEFAULT_HOST } from '$lib/components/Metadata.svelte';
import { TITLE_SUFFIX } from '$routes/titles';
</script>

<svelte:head>
<Metadata title={'Docs' + TITLE_SUFFIX} ogImage={DEFAULT_HOST + '/images/open-graph/docs.png'} />
</svelte:head>

<slot />
Loading