srizan/mainwebsite
1
0
Fork 0
mirror of https://github.com/SrIzan10/mainwebsite.git synced 2026-06-06 00:56:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: seo and image stuff ig

Browse Source
This commit is contained in:
Izan Gil
2024-05-30 21:35:07 +02:00
parent 9978be7288
commit 707f55989a
4 changed files with 37 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/backgrounds.json → public/backgrounds.json
View File

6
src/components/BaseHead.astro
View File

@@ -11,7 +11,7 @@ interface Props {
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props;
const { title, description, image } = Astro.props;
---
<!-- Global Metadata -->
@@ -37,11 +37,11 @@ const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props;
<meta property="og:url" content={Astro.url} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={new URL(image, Astro.url)} />
<meta property="og:image" content={image || ''} />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content={Astro.url} />
<meta property="twitter:title" content={title} />
<meta property="twitter:description" content={description} />
<meta property="twitter:image" content={new URL(image, Astro.url)} />
<meta property="twitter:image" content={image || ''} />

2
src/layouts/BlogPost.astro
View File

@@ -12,7 +12,7 @@ const { title, excerpt: description, published_at, updated_at, feature_image, fe
<html lang="en">
<head>
<BaseHead title={title!} description={description || '(no description)'} />
<BaseHead title={title!} description={description || '(no description)'} image={feature_image || 'https://images.unsplash.com/photo-1519681393784-d120267933ba'} />
</head>
<body>

65
src/pages/index.astro
View File

@@ -1,39 +1,40 @@
---
import BaseHead from '../components/BaseHead.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
import Backgrounds from '../backgrounds.json';
import { Image } from 'astro:assets';
import ImageAuthor from '@/components/ImageAuthor.astro';
import { FaGithub, FaBlog, FaDiscord, FaMastodon, FaTwitter } from 'react-icons/fa';
import { SiOsu } from 'react-icons/si';
import BaseHead from '../components/BaseHead.astro'
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts'
import { Image } from 'astro:assets'
import ImageAuthor from '@/components/ImageAuthor.astro'
import { FaGithub, FaBlog, FaDiscord, FaMastodon, FaTwitter } from 'react-icons/fa'
import { SiOsu } from 'react-icons/si'
const randomBackground = Backgrounds[Math.floor(Math.random() * Backgrounds.length)];
const fetchBackgrond = await fetch(`${Astro.url}/backgrounds.json`).then(async res => await res.json())
const randomBackground = fetchBackgrond[Math.floor(Math.random() * fetchBackgrond.length)]
---
<!doctype html>
<html lang="en">
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
<style>
svg {
@apply w-6 h-6;
}
</style>
</head>
<body class="relative">
<div class={`w-screen h-screen z-[-1] bg-fixed bg-center bg-no-repeat bg-cover rounded-none object-cover brightness-[30%]`} style={`background-image: url('${randomBackground.url}')`}/>
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
<style>
svg {
@apply w-6 h-6;
}
</style>
</head>
<body class="relative">
<div class={`w-screen h-screen z-[-1] bg-fixed bg-center bg-no-repeat bg-cover rounded-none object-cover brightness-[30%]`} style={`background-image: url('${randomBackground.url}')`}></div>
<ImageAuthor {...randomBackground} />
<div class="w-full h-full sm:w-[480px] sm:h-[360px] absolute -translate-x-2/4 -translate-y-2/4 text-center overflow-visible left-2/4 top-2/4 text-white flex justify-center items-center flex-col gap-5">
<Image src='/pfp.webp' alt={'pfp'} width='200' height='200' class='rounded-full' loading="eager" />
<p>Hobbyist developer & <a href={'https://sern.dev'}>sern</a> lead developer team member</p>
<div class='flex gap-5 justify-center'>
<a href='https://github.com/SrIzan10' aria-label="github"><FaGithub /></a>
<a href='/blog' aria-label="blog"><FaBlog /></a>
<a href='https://discord.com/users/703974042700611634' aria-label="discord"><FaDiscord /></a>
<a href='https://social.kalico.moe/@srizan' aria-label="mastodon"><FaMastodon /></a>
<a href='https://twitter.com/itssrizan' aria-label="twitter"><FaTwitter /></a>
<a href='https://osu.ppy.sh/users/25350735' aria-label="osu!"><SiOsu /></a>
</div>
</div>
</body>
</html>
<div class="w-full h-full sm:w-[480px] sm:h-[360px] absolute -translate-x-2/4 -translate-y-2/4 text-center overflow-visible left-2/4 top-2/4 text-white flex justify-center items-center flex-col gap-5">
<Image src="/pfp.webp" alt={'pfp'} width="200" height="200" class="rounded-full" loading="eager" />
<p>Hobbyist developer & <a href={'https://sern.dev'}>sern</a> lead developer team member</p>
<div class="flex gap-5 justify-center">
<a href="https://github.com/SrIzan10" aria-label="github"><FaGithub /></a>
<a href="/blog" aria-label="blog"><FaBlog /></a>
<a href="https://discord.com/users/703974042700611634" aria-label="discord"><FaDiscord /></a>
<a href="https://social.kalico.moe/@srizan" aria-label="mastodon"><FaMastodon /></a>
<a href="https://twitter.com/itssrizan" aria-label="twitter"><FaTwitter /></a>
<a href="https://osu.ppy.sh/users/25350735" aria-label="osu!"><SiOsu /></a>
</div>
</div>
</body>
</html>