meta component
This commit is contained in:
parent
02be446c33
commit
f41bbf3684
7 changed files with 42 additions and 26 deletions
24
src/lib/components/Meta.svelte
Normal file
24
src/lib/components/Meta.svelte
Normal file
|
@ -0,0 +1,24 @@
|
|||
<script>
|
||||
import { page } from '$app/stores';
|
||||
|
||||
export let title = '',
|
||||
image = '',
|
||||
descripton = '',
|
||||
bigImage = '';
|
||||
|
||||
// hate
|
||||
page.subscribe((_) => {
|
||||
if (!image.length) image = _.url.origin + '/api/avatar';
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{title}</title>
|
||||
<meta property="og:title" content={title} />
|
||||
{#if bigImage.length}
|
||||
<meta property="og:thumbnail" content={bigImage} />
|
||||
{:else}
|
||||
<meta property="og:image" content={image} />
|
||||
{/if}
|
||||
<meta property="og:description" content={descripton} />
|
||||
</svelte:head>
|
|
@ -4,25 +4,16 @@
|
|||
import { page } from '$app/stores';
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
import config from '$lib/config';
|
||||
|
||||
import Header from '$lib/components/Header.svelte';
|
||||
import Footer from '$lib/components/Footer.svelte';
|
||||
|
||||
let avatarApi = '';
|
||||
|
||||
page.subscribe((pg) => {
|
||||
const url = new URL(pg.url);
|
||||
url.pathname = '/api/avatar';
|
||||
avatarApi = url.toString();
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<link href="https://chadthundercock.com/@cirroskais" rel="me" />
|
||||
<link rel="icon" type="image/png" href={avatarApi} />
|
||||
<meta property="og:title" content={$page.data.discord.username} />
|
||||
<link href={config.FEDIVERSE} rel="me" />
|
||||
<link rel="icon" type="image/png" href={$page.url.origin + '/api/avatar'} />
|
||||
<meta property="og:url" content={$page.url.toString()} />
|
||||
<meta property="og:image" content={avatarApi} />
|
||||
<meta property="og:description" content="snow leopard that likes computers." />
|
||||
<meta property="og:site_name" content={$page.url.hostname} />
|
||||
<meta name="theme-color" content="#c4bef3" />
|
||||
</svelte:head>
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
import { page } from '$app/stores';
|
||||
import config from '$lib/config';
|
||||
|
||||
import Meta from '$lib/components/Meta.svelte';
|
||||
import SocialIcon from '$lib/components/Home/SocialIcon.svelte';
|
||||
import HeroContainer from '$lib/components/Home/HeroContainer.svelte';
|
||||
import ImgButton from '$lib/components/Home/Button.svelte';
|
||||
|
@ -15,9 +16,7 @@
|
|||
import Bluesky from '$lib/components/Icons/Bluesky.svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>/{$page.data.discord?.username}/home</title>
|
||||
</svelte:head>
|
||||
<Meta title="{$page.data.discord?.username}/home" descripton="snow leopard that likes computers" />
|
||||
|
||||
<div class="hero w-full h-[calc(100vh-5.125rem)] rounded-lg mx-auto my-auto">
|
||||
<div class="flex p-4 h-full rounded-lg">
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
import { page } from '$app/stores';
|
||||
import blog from '$lib/blog';
|
||||
|
||||
import Meta from '$lib/components/Meta.svelte';
|
||||
import ListedPost from '$lib/components/Blog/ListedPost.svelte';
|
||||
import Back from '$lib/components/Icons/Back.svelte';
|
||||
import Next from '$lib/components/Icons/Next.svelte';
|
||||
|
@ -35,9 +36,7 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>/{$page.data.discord?.username}/blog</title>
|
||||
</svelte:head>
|
||||
<Meta title="{$page.data.discord?.username}/home" descripton="snow leopard that likes computers" />
|
||||
|
||||
<div class="flex flex-col w-full">
|
||||
<div class="flex flex-col my-auto space-y-2">
|
||||
|
|
|
@ -11,6 +11,8 @@
|
|||
|
||||
export let data;
|
||||
|
||||
import Meta from '$lib/components/Meta.svelte';
|
||||
|
||||
let markdown = '';
|
||||
let thisPost = blog.find((post) => post.slug === data.slug);
|
||||
|
||||
|
@ -30,9 +32,7 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>/{$page.data.discord?.username}/blog/{thisPost?.slug}</title>
|
||||
</svelte:head>
|
||||
<Meta title="{$page.data.discord?.username}/blog/{thisPost?.slug}" bigImage={thisPost?.image} />
|
||||
|
||||
<div class="flex flex-col mx-auto space-y-2 max-w-[65ch]">
|
||||
<div class="mx-auto w-full">
|
||||
|
|
|
@ -1,10 +1,13 @@
|
|||
<script>
|
||||
import { page } from '$app/stores';
|
||||
|
||||
import Meta from '$lib/components/Meta.svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>/{$page.data.discord?.username}/projects</title>
|
||||
</svelte:head>
|
||||
<Meta
|
||||
title="{$page.data.discord?.username}/projects"
|
||||
descripton="snow leopard that likes computers"
|
||||
/>
|
||||
|
||||
<div class="flex w-full h-[calc(100vh-5.125rem)]">
|
||||
<p class="m-auto text-2xl italic text-neutral-700">
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
## My Devices
|
||||
|
||||
I currently own/administrate 3 devices. Here's there specs.
|
||||
I currently own/administrate 3 devices. Here's the specs.
|
||||
|
||||
### :archlinux: :windows10: Desktop (cirro-desktop)
|
||||
|
||||
|
|
Loading…
Reference in a new issue