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: make landing responsive

Browse Source
This commit is contained in:
Izan Gil
2024-05-26 14:26:43 +02:00
parent 2097e1435b
commit 9978be7288
2 changed files with 25 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/pages/blog/[...slug].astro
View File

@@ -1,40 +1,39 @@
---
import BlogPost from '../../layouts/BlogPost.astro'
import { ghostClient } from '../../lib/ghost';
import type { PostOrPage } from '@tryghost/content-api';
import { ghostClient } from '../../lib/ghost'
import type { PostOrPage } from '@tryghost/content-api'
import * as shiki from 'shiki'
import { JSDOM } from 'jsdom'
export async function getStaticPaths() {
const posts = await ghostClient.posts
.browse({
limit: 'all',
});
return posts.map((post) => {
return {
params: {
slug: post.slug,
},
props: {
post: post,
},
};
});
const posts = await ghostClient.posts.browse({
limit: 'all',
})
return posts.map((post) => {
return {
params: {
slug: post.slug,
},
props: {
post: post,
},
}
})
}
const { post } = Astro.props as { post: PostOrPage };
const { post } = Astro.props as { post: PostOrPage }
// parse the post.html content, get the code blocks and highlight them
const doc = new JSDOM(post.html!)
const codeBlocks = doc.window.document.querySelectorAll('code')
for (const codeBlock of codeBlocks) {
if (!codeBlock.className) continue
const language = codeBlock.className.replace('language-', '')
const code = codeBlock.textContent
const rendered = await shiki.codeToHtml(code!, {
lang: language,
theme: 'tokyo-night',
})
codeBlock.innerHTML = rendered
const language = codeBlock.className.replace('language-', '')
const code = codeBlock.textContent
const rendered = await shiki.codeToHtml(code!, {
lang: language,
theme: 'tokyo-night',
})
codeBlock.innerHTML = rendered
}
---

4
src/pages/index.astro
View File

@@ -23,8 +23,8 @@ const randomBackground = Backgrounds[Math.floor(Math.random() * Backgrounds.leng
<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}')`}/>
<ImageAuthor {...randomBackground} />
<div class="w-[480px] 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="lazy" />
<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>