Skip to content

Commit 5ca082b

Browse files
aadishvaadishv
committed
feat: lots of polish
i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css i hate css
1 parent 174273b commit 5ca082b

5 files changed

Lines changed: 143 additions & 271 deletions

File tree

‎src/layouts/Layout.astro‎

Lines changed: 4 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,7 @@ const { title, tool, hideName, description, image } = Astro.props;
3535

3636
<link rel="preconnect" href="https://fonts.googleapis.com">
3737
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
38-
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
39-
38+
<link href="https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
4039
<meta
4140
name="google-site-verification"
4241
content="-e3sQUiyjUpdegTe0TMDBOnz5Z34OHkikLI87igRFro"
@@ -60,106 +59,14 @@ const { title, tool, hideName, description, image } = Astro.props;
6059
}
6160
.anchor-link {
6261
float: right;
62+
margin-right: 0.75rem;
6363
font-weight: 300 !important;
6464
}
6565
</style>
6666
</head>
6767
<body>
68-
<div class={`sticky pt-4 -mb-14 mx-4 z-[1000] flex top-bar`}>
69-
{
70-
!tool && (
71-
<>
72-
{
73-
!hideName && (
74-
<a href="/" class="text-lg mr-auto font-serif aadish-none">
75-
Aadish Verma
76-
</a>
77-
)
78-
}
79-
<div class="mx-auto">{""}</div>
80-
<div class="ml-auto">
81-
<button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 gap-2 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-10 -mb-10 px-4 py-2" aria-label="Toggle theme" id="theme-button">Loading...</button>
82-
</div>
83-
</>
84-
)
85-
}
86-
</div>
8768
<script lang="ts">
88-
function run() {
89-
// t: light | dark
90-
const setHtmlTheme = (t) => {
91-
if (t == "light") {
92-
if (document.documentElement.classList.contains("dark")) {
93-
document.documentElement.classList.remove("dark");
94-
}
95-
} else {
96-
if (!document.documentElement.classList.contains("dark")) {
97-
document.documentElement.classList.add("dark");
98-
}
99-
}
100-
};
101-
let theme = (localStorage.getItem("theme") ?? "system");
102-
// theme: light/dark/system
103-
104-
// setup systemTheme
105-
const query = window.matchMedia("(prefers-color-scheme: dark)");
106-
let systemTheme = query.matches ? "dark" : "light";
107-
query.addEventListener(
108-
"change",
109-
(event) => {
110-
systemTheme = event.matches ? "dark" : "light";
111-
if (theme === "system") {
112-
setHtmlTheme(systemTheme);
113-
}
114-
},
115-
);
116-
// set theme
117-
const setTheme = (th) => {
118-
if (th === "dark") setHtmlTheme("dark");
119-
else if (th === "light") setHtmlTheme("light");
120-
else setHtmlTheme(systemTheme);
121-
theme = th;
122-
localStorage.setItem("theme", th);
123-
}
124-
setTheme(theme);
125-
// update button
126-
const button = document.getElementById("theme-button");
127-
const updateButton = () => {
128-
if (theme == "dark") {
129-
button.innerHTML = "🌙";
130-
button.title = "Dark";
131-
} else if (theme == "light") {
132-
button.innerHTML = "☀️";
133-
button.title = "Light";
134-
} else {
135-
button.innerHTML = "⚙️";
136-
button.title = "System";
137-
}
138-
}
139-
updateButton();
140-
button.addEventListener("click", () => {
141-
// system -> light -> dark -> system
142-
if (theme === "system") {
143-
setTheme("light")
144-
} else if (theme === "light") {
145-
setTheme("dark");
146-
} else if (theme === "dark") {
147-
setTheme("system");
148-
}
149-
updateButton();
150-
});
151-
}
152-
document.addEventListener('astro:page-load', run);
153-
run();
154-
</script>
155-
{
156-
(
157-
<div class={tool ? "" : "pt-8"}>
158-
<slot />
159-
</div>
160-
)
161-
}
162-
<script>
69+
// KaTeX
16370
document.addEventListener("DOMContentLoaded", () => {
16471
renderMathInElement(document.body, {
16572
delimiters: [
@@ -171,6 +78,7 @@ const { title, tool, hideName, description, image } = Astro.props;
17178
});
17279
});
17380
</script>
81+
<slot />
17482
{
17583
import.meta.env.PROD ? (
17684
<Analytics />

‎src/pages/[slug].astro‎

Lines changed: 89 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -53,123 +53,106 @@ const ogImage = new URL(`/open-graph/${slug}.png`, baseUrl).toString();
5353
---
5454

5555
<Layout title={post.data.title} description={desc} image={ogImage} hideName>
56-
<main class="mt-2">
57-
<article class="flex gap-1 px-3">
58-
<table>
59-
<tr>
60-
<th
61-
class="w-[300px] text-muted-foreground px-3 flex align-baseline"
62-
>
63-
<!-- <div class="flex-1 h-1 border" /> -->
64-
<h4 class="font-normal">
65-
<time datetime={date.toString()}>{formatted}</time>
56+
<table>
57+
<tr>
58+
<th class="w-[300px] hidden lg:flex text-muted-foreground px-3 align-baseline">
59+
<h4 class="font-normal">
60+
<time datetime={date.toString()}>{formatted}</time>
6661

67-
{
68-
post.body && (
69-
<span>{`• ${post.body.split(" ").length} words`}</span>
70-
)
71-
}
72-
</h4>
73-
</th>
74-
<th class="text-start align-baseline w-full">
75-
<a
76-
href={`/${getSlugFromPath(post.filePath ?? "")}`}
77-
target="_blank"
78-
rel="noopener noreferrer"
79-
class="text-aadish !font-normal tracking-tighter"
80-
transition:name={post.id}
81-
>
82-
<h1>{post.data.title}</h1>
83-
</a>
84-
</th>
85-
</tr>
86-
<tr>
87-
<td
88-
class="w-[300px] flex flex-col sticky top-3 [&_.toc-active]:!text-aadish pr-4 align-baseline"
89-
>
9062
{
91-
isProject && post.data.link && (
92-
<p>
93-
<a
94-
href={post.data.link}
95-
target="_blank"
96-
rel="noopener noreferrer"
97-
>
98-
live demo
99-
</a>
100-
</p>
63+
post.body && (
64+
<span>{`• ${post.body.split(" ").length} words`}</span>
10165
)
10266
}
103-
{
104-
headings.filter(heading => (heading.depth < 5)).map((heading) => (
67+
</h4>
68+
</th>
69+
<th class="w-screen lg:w-[calc(100vw-300px)] text-start align-baseline flex-1 px-3">
70+
<a
71+
href={`/${getSlugFromPath(post.filePath ?? "")}`}
72+
target="_blank"
73+
rel="noopener noreferrer"
74+
class="text-aadish !font-normal tracking-tighter"
75+
transition:name={post.id}
76+
>
77+
<h1>{post.data.title}</h1>
78+
</a>
79+
</th>
80+
</tr>
81+
<tr>
82+
<td
83+
class="w-[300px] hidden lg:flex flex-col sticky top-3 [&_.toc-active]:!text-aadish pr-4 align-baseline"
84+
>
85+
{
86+
isProject && post.data.link && (
87+
<p>
88+
<a
89+
href={post.data.link}
90+
target="_blank"
91+
rel="noopener noreferrer"
92+
>
93+
live demo
94+
</a>
95+
</p>
96+
)
97+
}
98+
{
99+
headings
100+
.filter((heading) => heading.depth < 5)
101+
.map((heading) => (
105102
<a
106103
class="toc pr-2 my-1 !text-muted-foreground/70 text-ellipsis text-nowrap overflow-hidden whitespace-nowrap"
107104
href={`#${heading.slug}`}
108105
>
109-
<span class="opacity-0">{'#'.repeat(heading.depth - 1)}</span>{heading.text.slice(0 , -1)}
106+
<span class="opacity-0">{"#".repeat(heading.depth - 1) + " "}</span>
107+
{heading.text.slice(0, -1)}
110108
</a>
111109
))
112-
}
113-
<script is:inline>
114-
console.log("hi");
115-
document.addEventListener("DOMContentLoaded", () => {
116-
// 1. Select all the sections we want to track
117-
const toc = Array.from(document.querySelectorAll(".toc"));
118-
const sections = document.querySelectorAll(
119-
"#content > h1, #content > h2, #content > h3, #content > h4, #content > h5, #content > h6",
120-
);
121-
122-
// 2. Options for the IntersectionObserver
123-
const observerOptions = {
124-
root: null, // use the viewport
125-
rootMargin: "0px",
126-
threshold: 0,
127-
};
128-
129-
console.log(toc, sections);
130-
131-
// 3. Create the observer
132-
const observer = new IntersectionObserver((entries) => {
133-
let thing = null;
134-
entries.toReversed().forEach((entry) => {
135-
if (entry.isIntersecting) {
136-
thing = entry.target.id;
137-
// // Remove 'active' class from ALL links
138-
// navLinks.forEach(link => {
139-
// link.classList.remove('active');
140-
141-
// // Add 'active' class ONLY to the matching link
142-
// if (link.getAttribute('href').includes(currentId)) {
143-
// link.classList.add('active');
144-
// }
145-
// });
146-
}
147-
});
148-
if (thing) {
149-
const nav = toc.filter((c) => c.href.includes(thing));
150-
if (nav.length > 0) {
151-
document
152-
.querySelector(".toc-active")
153-
?.classList.toggle("toc-active");
154-
nav[0].classList.add("toc-active");
155-
}
110+
}
111+
<script is:inline>
112+
document.addEventListener("DOMContentLoaded", () => {
113+
// 1. Select all the sections we want to track
114+
const toc = Array.from(document.querySelectorAll(".toc"));
115+
const sections = document.querySelectorAll(
116+
"#content > h1, #content > h2, #content > h3, #content > h4, #content > h5, #content > h6",
117+
);
118+
119+
const observerOptions = {
120+
root: null, // use the viewport
121+
rootMargin: "0px",
122+
threshold: 0,
123+
};
124+
125+
const observer = new IntersectionObserver((entries) => {
126+
let thing = null;
127+
entries.toReversed().forEach((entry) => {
128+
if (entry.isIntersecting) {
129+
thing = entry.target.id;
156130
}
157-
}, observerOptions);
158-
159-
// 4. Tell the observer to watch each section
160-
sections.forEach((section) => {
161-
observer.observe(section);
162131
});
132+
if (thing) {
133+
const nav = toc.filter((c) => c.href.includes(thing));
134+
if (nav.length > 0) {
135+
document
136+
.querySelector(".toc-active")
137+
?.classList.toggle("toc-active");
138+
nav[0].classList.add("toc-active");
139+
}
140+
}
141+
}, observerOptions);
142+
143+
sections.forEach((section) => {
144+
observer.observe(section);
163145
});
164-
</script>
165-
<div class="flex-1">&nbsp;</div>
166-
</td>
167-
<td class="leading-8 align-baseline" id="content">
168-
<Content />
169-
<ConvexComments slug={slug} client:only="react" />
170-
</td>
171-
</tr>
172-
</table>
173-
</article>
174-
</main>
146+
});
147+
</script>
148+
</td>
149+
<td
150+
class="w-screen lg:w-[calc(100vw-300px)] ![&>*]:text-wrap align-baseline px-3 flex-1"
151+
id="content"
152+
>
153+
<Content />
154+
<ConvexComments slug={slug} client:only="react" />
155+
</td>
156+
</tr>
157+
</table>
175158
</Layout>

‎src/pages/index.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const entries = allEntries
3636
hideName={true}
3737
description="A freshman and avid programmer"
3838
>
39-
<main class="lg:m-20 m-5">
39+
<main class="lg:m-10 m-5">
4040
<table class="w-full">
4141
<tr class="flex w-full mb-6">
4242
<th class="flex-0 w-[9ch]">&nbsp;</th>

0 commit comments

Comments
 (0)