avinal/avinal.github.io
1
0
Fork 0
mirror of https://github.com/avinal/avinal.github.io.git synced 2026-07-04 07:40:09 +05:30
Code Packages Releases Activity

update license and qol improvements

Browse Source 
Signed-off-by: Avinal Kumar <avinal.xlvii@gmail.com>
This commit is contained in:
Morumotto
2026-03-05 19:49:40 +05:30
committed by Morumotto
parent 5420886a23
commit 19784d18ee
13 changed files with 205 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Footer.astro
+14 -1
View File
@@ -5,7 +5,9 @@ const year = new Date().getFullYear();
<footer class="footer">
<div class="footer-inner">
<p class="footer-copy">
&copy; {year} Avinal Kumar
&copy; {year} Avinal Kumar &middot;
Code <a href="https://opensource.org/licenses/MIT">MIT</a> &middot;
Content <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>
</p>
<a href="https://github.com/avinal/avinal.github.io/issues/new" class="footer-report" target="_blank" rel="noopener noreferrer">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
@@ -36,6 +38,17 @@ const year = new Date().getFullYear();
color: var(--text-muted);
}
.footer-copy a {
color: var(--text-muted);
text-decoration: underline;
text-underline-offset: 2px;
transition: color var(--duration-fast) var(--ease-out);
}
.footer-copy a:hover {
color: var(--text);
}
.footer-report {
display: inline-flex;
align-items: center;
src/components/RecentPosts.astro
+1 -1
View File
@@ -31,7 +31,7 @@ const fmtDate = (d: Date) =>
<a href={`/posts/${post.id}/`} class="post-link">
<div class="post-thumb">
{post.data.image ? (
<img src={post.data.image} alt="" class="thumb-img" loading="lazy" />
<img src={post.data.image} alt={post.data.title} class="thumb-img" loading="lazy" decoding="async" />
) : (
<span class="thumb-placeholder">{post.data.title.charAt(0)}</span>
)}
src/layouts/BaseLayout.astro
+23 -3
View File
@@ -8,17 +8,20 @@ interface Props {
title: string;
description?: string;
ogImage?: string;
jsonLd?: Record<string, unknown>;
}
const {
title,
description = theme.site.description,
ogImage,
jsonLd,
} = Astro.props;
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
const siteName = theme.site.title;
const themeCSS = generateThemeCSS(theme);
const resolvedOgImage = ogImage || new URL("/og-default.svg", Astro.site).href;
---
<!doctype html>
@@ -38,16 +41,32 @@ const themeCSS = generateThemeCSS(theme);
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:site_name" content={siteName} />
{ogImage && <meta property="og:image" content={ogImage} />}
<meta property="og:image" content={resolvedOgImage} />
<!-- Favicon -->
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={resolvedOgImage} />
<meta name="twitter:site" content="@Avinal_" />
<!-- Favicon & Manifest -->
<link rel="icon" type="image/svg+xml" href="/logo-static.svg" />
<link rel="manifest" href="/site.webmanifest" />
<link rel="sitemap" href="/sitemap-index.xml" />
<link rel="alternate" type="application/rss+xml" title="Avinal Kumar" href="/rss.xml" />
<!-- Font preloads -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
<!-- Design tokens generated from theme config -->
<style set:html={themeCSS} />
<!-- JSON-LD structured data -->
{jsonLd && <script type="application/ld+json" set:html={JSON.stringify(jsonLd)} />}
<!-- Theme: prevent flash by reading preference before paint -->
<script is:inline>
(function () {
@@ -61,9 +80,10 @@ const themeCSS = generateThemeCSS(theme);
</script>
</head>
<body>
<a href="#main-content" class="skip-link">Skip to content</a>
<div class="page-wrapper">
<Nav />
<main class="main-content">
<main id="main-content" class="main-content">
<slot />
</main>
<Footer />
src/layouts/PostLayout.astro
+19 -2
View File
@@ -29,13 +29,30 @@ const fmtDate = (d: Date) =>
month: "long",
day: "numeric",
});
const canonicalURL = new URL(Astro.url.pathname, Astro.site).href;
const blogPostingLd = {
"@context": "https://schema.org",
"@type": "BlogPosting",
headline: title,
description: description ?? "",
datePublished: date.toISOString(),
...(modified && { dateModified: modified.toISOString() }),
...(image && { image }),
url: canonicalURL,
author: {
"@type": "Person",
name: "Avinal Kumar",
url: "https://avinal.space",
},
};
---
<BaseLayout title={title} description={description} ogImage={image || undefined}>
<BaseLayout title={title} description={description} ogImage={image || undefined} jsonLd={blogPostingLd}>
<article class="post-page">
{image && (
<div class="post-hero-img">
<img src={image} alt={title} />
<img src={image} alt={title} decoding="async" />
</div>
)}
src/pages/404.astro
+45
View File
@@ -0,0 +1,45 @@
---
import BaseLayout from "@/layouts/BaseLayout.astro";
---
<BaseLayout title="404 — Page Not Found" description="The page you're looking for doesn't exist.">
<div class="not-found">
<span class="nf-code">404</span>
<h1>Page not found</h1>
<p>The page you're looking for doesn't exist or has been moved.</p>
<a href="/" class="btn btn-accent">Back to home</a>
</div>
</BaseLayout>
<style>
.not-found {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
min-height: 50vh;
gap: var(--space-4);
}
.nf-code {
font-size: clamp(5rem, 15vw, 10rem);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
color: var(--border);
}
.not-found h1 {
font-size: var(--text-2xl);
}
.not-found p {
color: var(--text-muted);
max-width: 40ch;
}
.not-found .btn {
margin-top: var(--space-4);
}
</style>
src/pages/index.astro
+16 -1
View File
@@ -26,9 +26,24 @@ const activity = mergeActivity(contributions, wakatime);
const recentPosts = allPosts
.sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
.slice(0, 5);
const personLd = {
"@context": "https://schema.org",
"@type": "Person",
name: "Avinal Kumar",
url: "https://avinal.space",
image: user?.avatar_url,
jobTitle: "Software Engineer II (Team Lead)",
worksFor: { "@type": "Organization", name: "Red Hat", url: "https://www.redhat.com" },
sameAs: [
"https://github.com/avinal",
"https://linkedin.com/in/avinal",
"https://twitter.com/Avinal_",
],
};
---
<BaseLayout title="Home">
<BaseLayout title="Home" jsonLd={personLd}>
<div class="bento">
<!-- Row 1: Hero (profile+about+skills+links) | Now Playing widget -->
<div class="bento-8">
src/pages/posts/[category].astro
+1 -1
View File
@@ -75,7 +75,7 @@ const excerpt = (body?: string, len = 140) => {
<a href={`/posts/${post.id}/`} class="post-row">
<div class="post-thumb">
{post.data.image ? (
<img src={post.data.image} alt="" class="thumb-img" loading="lazy" />
<img src={post.data.image} alt={post.data.title} class="thumb-img" loading="lazy" decoding="async" />
) : (
<span class="thumb-placeholder">{post.data.title.charAt(0)}</span>
)}
src/pages/posts/index.astro
+1 -1
View File
@@ -52,7 +52,7 @@ const excerpt = (body?: string, len = 140) => {
<a href={`/posts/${post.id}/`} class="post-row">
<div class="post-thumb">
{post.data.image ? (
<img src={post.data.image} alt="" class="thumb-img" loading="lazy" />
<img src={post.data.image} alt={post.data.title} class="thumb-img" loading="lazy" decoding="async" />
) : (
<span class="thumb-placeholder">{post.data.title.charAt(0)}</span>
)}
src/styles/global.css
+19
View File
@@ -404,4 +404,23 @@
white-space: nowrap;
border-width: 0;
}
.skip-link {
position: absolute;
top: -100%;
left: var(--space-4);
z-index: 9999;
padding: var(--space-2) var(--space-4);
font-size: var(--text-sm);
font-weight: 600;
color: white;
background: var(--accent);
border-radius: 0 0 var(--radius-md) var(--radius-md);
text-decoration: none;
transition: top var(--duration-fast) var(--ease-out);
}
.skip-link:focus {
top: 0;
}
}