feat: change links and nuke blog

This commit is contained in:
2024-11-16 10:49:44 +01:00
parent 2ef305ba85
commit 614c087aa8
7 changed files with 8 additions and 156 deletions

View File

@@ -28,7 +28,7 @@
"lucide-react": "^0.379.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.2.1",
"react-icons": "^5.3.0",
"tailwind-merge": "^2.3.0",
"tailwindcss": "^3.4.3",
"tailwindcss-animate": "^1.0.7",

View File

@@ -1,52 +0,0 @@
---
import BaseHead from '../components/BaseHead.astro'
import Header from '../components/Header.astro'
import FormattedDate from '../components/FormattedDate.astro'
import type { PostOrPage } from '@tryghost/content-api'
import { Image } from 'astro:assets'
type Props = PostOrPage
const { title, excerpt: description, published_at, updated_at, feature_image, feature_image_caption, feature_image_alt } = Astro.props
---
<html lang="en">
<head>
<BaseHead title={title!} description={description || '(no description)'} image={feature_image || 'https://images.unsplash.com/photo-1519681393784-d120267933ba'} />
</head>
<body>
<Header />
<main class="w-full max-w-full mx-0">
<article class="my-16 sm:my-0">
<div class="mb-4 pt-4 text-sm leading-none">
<h1 class="m-0 mb-2 text-center text-4xl font-bold">{title}</h1>
<hr />
</div>
<div class="flex flex-col items-center">
<div class="mb-4">
{feature_image && <Image class="shadow" width={720} height={200} src={feature_image} alt={feature_image_alt || ''} />}
</div>
{feature_image_caption && <span class="text-left text-sm italic ml-4" set:html={feature_image_caption} />}
</div>
<div class="prose dark:prose-invert prose-inline-code:dark:text-black w-prose max-w-[calc(100%-2em)] mx-auto p-2">
<div class="mb-2 text-gray-500">
<FormattedDate date={new Date(published_at!)} />
{
updated_at && (
<div class="italic">
Last updated on <FormattedDate date={new Date(updated_at)} />
</div>
)
}
</div>
<slot />
</div>
</article>
</main>
</body>
</html>

View File

@@ -1,8 +0,0 @@
import GhostContentAPI from '@tryghost/content-api';
// Create API instance with site credentials
export const ghostClient = new GhostContentAPI({
url: import.meta.env.BLOG_URL, // This is the default URL if your site is running on a local environment
key: import.meta.env.BLOG_CONTENT_KEY,
version: 'v5.82',
});

View File

@@ -1,42 +0,0 @@
---
import BlogPost from '../../layouts/BlogPost.astro'
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 { 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
}
---
<BlogPost {...post}>
<Fragment set:html={doc.serialize()} />
</BlogPost>

View File

@@ -1,46 +0,0 @@
---
import BaseHead from '../../components/BaseHead.astro'
import Header from '../../components/Header.astro'
import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts'
import FormattedDate from '../../components/FormattedDate.astro'
import { Image } from 'astro:assets'
import { ghostClient } from '@/lib/ghost'
const posts = await ghostClient.posts.browse({
limit: 'all',
})
---
<!doctype html>
<html lang="en">
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
<style is:inline>
[data-astro-code-mark] {
display: none;
}
</style>
</head>
<body>
<Header />
<main>
<section class="p-12">
<ul class="grid grid-cols-1 sm:grid-cols-2 gap-6">
{
posts.map((post) => (
<li class="flex flex-col items-center sm:items-start">
<a href={`/blog/${post.slug}/`} class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors duration-200">
<Image class="rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200" width={720} height={360} src={post.feature_image || 'https://images.unsplash.com/photo-1519681393784-d120267933ba'} alt="" loading="lazy" />
<h4 class="text-xl font-bold mt-2">{post.title}</h4>
<p class="mt-1">
<FormattedDate date={new Date(post.published_at!)} />
</p>
</a>
</li>
))
}
</ul>
</section>
</main>
</body>
</html>

View File

@@ -3,7 +3,7 @@ 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 { FaGithub, FaBlog, FaDiscord, FaMastodon, FaBluesky } from 'react-icons/fa6'
import { SiOsu } from 'react-icons/si'
import Background from '../backgrounds.json'
@@ -28,10 +28,10 @@ const randomBackground = Background[Math.floor(Math.random() * Background.length
<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://blog.srizan.dev" 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://bsky.app/profile/srizan.dev" aria-label="twitter"><FaBluesky /></a>
<a href="https://osu.ppy.sh/users/25350735" aria-label="osu!"><SiOsu /></a>
</div>
</div>

View File

@@ -4096,10 +4096,10 @@ react-dom@^18.3.1:
loose-envify "^1.1.0"
scheduler "^0.23.2"
react-icons@^5.2.1:
version "5.2.1"
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.2.1.tgz#28c2040917b2a2eda639b0f797bff1888e018e4a"
integrity sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==
react-icons@^5.3.0:
version "5.3.0"
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.3.0.tgz#ccad07a30aebd40a89f8cfa7d82e466019203f1c"
integrity sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==
react-refresh@^0.14.0:
version "0.14.2"