saibotk-de/saiblog
1
0
Fork 0
Code Packages 1 Activity

💅 painting the nails

Browse source
This commit is contained in:
Saibotk 2023-09-21 00:38:16 +02:00
parent 608f2e7da9
commit 33383965eb
Signed by: saibotk
GPG key ID: 67585F0065E261D5
10 changed files with 45 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/Footer.astro
View file

@ -4,24 +4,24 @@ import Rss from './icons/Rss.astro'
const today = new Date()
---
<footer class="mt-24 mb-24 w-full flex flex-col items-center text-zinc-400">
<div class="">
<footer class="mt-24 mb-12 w-full flex flex-col gap-2 items-center text-zinc-400">
<div class="flex items-center gap-4">
<span>&copy; {today.getFullYear()} saibotk</span>
<span> &#183; </span>
<a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank" rel="noopener">
<a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank" rel="noopener" class="inline-block hover:scale-105 transition duration-150 active:scale-95 active:text-pink-300">
CC BY-NC 4.0
</a>
</div>
<div>
<div class="flex items-center gap-4">
<div class="inline-block">
Made with <a href="https://astro.build/" target="_blank" rel="noopener">Astro</a>
Made with <a href="https://astro.build/" target="_blank" rel="noopener" class="inline-block hover:scale-105 transition duration-150 active:scale-95 active:text-pink-300">Astro</a>
</div>
<span> &#183; </span>
<a href="https://git.saibotk.de/saibotk.de/saiblog" target="_blank" rel="noopener">
<a href="https://git.saibotk.de/saibotk.de/saiblog" target="_blank" rel="noopener" class="inline-block hover:scale-105 transition duration-150 active:scale-95 active:text-pink-300">
Source Code
</a>
<span> &#183; </span>
<a href="/rss.xml" target="_blank" rel="noopener"><Rss class="w-4 inline-block" /></a>
<a href="/rss.xml" target="_blank" rel="noopener" class="inline-block"><Rss class="w-5 h-5 hover:scale-105 transition duration-150 active:scale-95 active:text-pink-300" /></a>
</div>
</footer>

12
src/components/Header.astro
View file

@ -7,16 +7,18 @@ import { SITE_TITLE } from '../config'
---
<header class="mt-8">
<h2 class="text-3xl font-semibold mb-2">
<nav class="gap-2 flex items-center">
<h2 class="text-3xl text-white font-semibold mr-4">
{SITE_TITLE}
</h2>
<nav class="gap-2 flex items-center">
<HeaderLink href="/">Home</HeaderLink>
<HeaderLink href="/posts">Posts</HeaderLink>
<div class="ml-auto space-x-2">
<a
class="inline-block hover:text-purple-600"
class="inline-block hover:scale-105 transition duration-150 active:scale-95 active:text-pink-300"
href="https://flausch.social/@saibotk"
target="_blank"
aria-label="Link to my Mastodon account"
@ -24,7 +26,7 @@ import { SITE_TITLE } from '../config'
<Mastodon class="w-6" />
</a>
<a
class="inline-block hover:text-purple-600"
class="inline-block hover:scale-105 transition duration-150 active:scale-95 active:text-pink-300"
href="https://git.saibotk.de/saibotk"
target="_blank"
aria-label="Link to my Gitlab account"
@ -32,7 +34,7 @@ import { SITE_TITLE } from '../config'
<GitLab class="w-6" />
</a>
<a
class="inline-block hover:text-purple-600"
class="inline-block hover:scale-105 transition duration-150 active:scale-95 active:text-pink-300"
href="https://github.com/saibotk"
target="_blank"
aria-label="Link to my GitHub account"

10
src/components/HeaderLink.astro
View file

@ -10,19 +10,13 @@ const isActive =
<a
href={href}
class:list={[
'group inline-block relative text-zinc-50 px-4 rounded',
'inline-block text-zinc-50 px-4 font-bold text-xl hover:scale-105 transition duration-150 active:scale-95 active:text-pink-300',
className,
{
'font-semibold bg-gradient-to-r from-purple-600 to-pink-400': isActive,
'decoration-pink-400 underline': isActive,
},
]}
{...props}
>
<div
class="absolute rounded inset-0 block opacity-0 group-hover:opacity-100 bg-gradient-to-r from-purple-900 to-purple-500 transition duration-200"
>
</div>
<div class="relative z-10">
<slot />
</div>
</a>

2
src/config.ts
View file

@ -1,5 +1,5 @@
// Place any global data in this file.
// You can import this data from anywhere in your site by using the `import` keyword.
export const SITE_TITLE = "Saibotk's blog";
export const SITE_TITLE = "Sai-🤖-k";
export const SITE_DESCRIPTION = "Welcome to my personal blog!";

2
src/layouts/Base.astro
View file

@ -24,7 +24,7 @@ const { pageTitle, description } = Astro.props
/>
</head>
<body
class="font-sans bg-zinc-900 text-zinc-300 w-full max-w-3xl px-4 mx-auto min-h-screen flex flex-col"
class="font-sans text-zinc-300 w-full max-w-4xl px-4 mx-auto min-h-screen flex flex-col"
>
<Header title={SITE_TITLE} />
<main class="grow flex flex-col my-4 mx-4">

4
src/layouts/BlogPost.astro
View file

@ -19,8 +19,8 @@ const {
<Base pageTitle={title} description={description}>
<article>
<div class="text-center">
<h1 class="mt-20 mb-2 text-5xl font-bold text-purple-400">{title}</h1>
{pubDate && <time class="text-base text-zinc-400">{pubDate}</time>}
<h1 class="mt-20 mb-2 text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-tr from-pink-500 to-indigo-200">{title}</h1>
{pubDate && <time class="text-base tracking-wider text-zinc-400">{pubDate}</time>}
{
updatedDate && (
<div class="text-sm italic font-thin text-zinc-400">

8
src/pages/index.astro
View file

@ -6,10 +6,10 @@ import Base from '../layouts/Base.astro'
<div class="flex flex-col justify-center items-center grow">
<div class="prose-custom">
<h1 class="text-center">⛵️ Welcome on board!</h1>
<p>
We will cross the ocean of my written posts. Join me on my journey and learn about various
things I encountered during my daily adventures. Mostly related to the far lands of
containerization & Ansible, Laravel, PHP and Vue.
<p class="text-center">
We will cross the ocean of my written posts.<br>
Join me on my journey and learn about various things I encountered during my daily adventures.<br>
Mostly related to the far lands of containerization & Ansible, Laravel, PHP and Vue.
</p>
</div>
</div>

12
src/pages/posts.astro
View file

@ -1,7 +1,7 @@
---
import Base from '../layouts/Base.astro'
const rawPosts = await Astro.glob('./posts/*.{md,mdx}')
const rawPosts = await Astro.glob('./posts/**/*.{md,mdx}')
const posts = rawPosts
.filter((post) => !post.frontmatter.draft)
.sort(
@ -10,14 +10,14 @@ const posts = rawPosts
---
<Base>
<section class="my-12">
<ul class="space-y-2">
<section class="my-20">
<ul class="space-y-6">
{
posts.map((post) => (
<li class="flex">
<li class="flex items-baseline gap-8">
<time
datetime={post.frontmatter.pubDate}
class="w-32 italic text-zinc-400 underline underline-offset-3"
class="w-32 italic text-zinc-200 underline underline-offset-3"
>
{new Date(post.frontmatter.pubDate).toLocaleDateString('en-us', {
year: 'numeric',
@ -25,7 +25,7 @@ const posts = rawPosts
day: 'numeric',
})}
</time>
<a class="visited:text-purple-600 hover:text-purple-800" href={post.url}>
<a class="hover:scale-[1.02] transition duration-150 active:scale-[0.98] active:text-pink-300 text-2xl" href={post.url}>
{post.frontmatter.title}
</a>
</li>

2
src/styles/global.css
View file

@ -1,5 +1,5 @@
html {
@apply font-sans bg-zinc-900 text-zinc-300 w-full max-w-3xl mx-auto;
@apply font-sans bg-zinc-950 text-zinc-300 w-full mx-auto;
}
.prose-custom {

10
tsconfig.json
View file

@ -1,3 +1,11 @@
{
"extends": "astro/tsconfigs/strictest"
"extends": "astro/tsconfigs/strictest",
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@layouts/*": ["src/layouts/*"],
"@components/*": ["src/components/*"],
"@images/*": ["src/images/*"]
}
}
}