470 lines
14 KiB
JavaScript
470 lines
14 KiB
JavaScript
import { copyFile, mkdir, writeFile } from "node:fs/promises";
|
|
|
|
const blogs = [
|
|
{
|
|
slug: "research",
|
|
label: "Research",
|
|
summary: "Notes from papers, algorithms, computational social choice, and mini-surveys of themes I am learning about.",
|
|
},
|
|
{
|
|
slug: "vibes",
|
|
label: "Vibes",
|
|
summary: "Loose experiments, AI conversations, and work-in-progress thoughts that do not need a formal frame.",
|
|
},
|
|
{
|
|
slug: "puzzles",
|
|
label: "Puzzles",
|
|
summary: "Problems, teaching prompts, contest-style curiosities, and small mathematical rabbit holes.",
|
|
},
|
|
{
|
|
slug: "reflections",
|
|
label: "Reflections",
|
|
summary: "Personal notes on teaching, academia, writing, attention, and the rhythms of intellectual work.",
|
|
},
|
|
{
|
|
slug: "poetry",
|
|
label: "Poetry",
|
|
summary: "Poems, tiny forms, and playful writing around mathematics, code, and ordinary life.",
|
|
},
|
|
{
|
|
slug: "reviews",
|
|
label: "Reviews",
|
|
summary: "Notes on tools, workflows, books, hardware, and objects that shape everyday work.",
|
|
},
|
|
{
|
|
slug: "art",
|
|
label: "Art",
|
|
summary: "Algorithmic sketches, generative art, visual experiments, and mathematical images.",
|
|
},
|
|
];
|
|
|
|
const socialLinks = [
|
|
{
|
|
href: "https://x.com/home",
|
|
label: "X",
|
|
color: "#525252",
|
|
svg: `<path d="M5 5l14 14"></path><path d="M19 5L5 19"></path>`,
|
|
},
|
|
{
|
|
href: "https://bsky.app/profile/neeldhara.bsky.social",
|
|
label: "Bluesky",
|
|
color: "#4f83b8",
|
|
svg: `<path d="M12 13c-2.9-5.2-6-7.2-8.1-6.4-1.6.7-1 4.4 2.3 7.1"></path><path d="M12 13c2.9-5.2 6-7.2 8.1-6.4 1.6.7 1 4.4-2.3 7.1"></path><path d="M12 13c-2.3 1.6-3.6 3.1-3.3 4.6.3 1.4 2.1 1.8 3.3.2"></path><path d="M12 13c2.3 1.6 3.6 3.1 3.3 4.6-.3 1.4-2.1 1.8-3.3.2"></path>`,
|
|
},
|
|
{
|
|
href: "https://www.linkedin.com/in/neeldhara-misra-a54b6920/",
|
|
label: "LinkedIn",
|
|
color: "#496f9e",
|
|
svg: `<rect x="4.5" y="4.5" width="15" height="15" rx="2.5"></rect><path d="M8 10.5v5.5"></path><path d="M11.5 16v-5.5"></path><path d="M11.5 13.1c0-1.7 1-2.7 2.3-2.7 1.5 0 2.2 1 2.2 2.7V16"></path><path d="M8 8h.01"></path>`,
|
|
},
|
|
{
|
|
href: "https://mathstodon.xyz/@neeldhara",
|
|
label: "Mastodon",
|
|
color: "#7464a8",
|
|
svg: `<path d="M7 16.5c1.4.8 3.1 1.1 5.2 1 3.7-.1 5.8-1.7 6.1-4.8l.2-3.6c.2-3.1-1.4-4.7-4.5-4.7h-4c-3.1 0-4.7 1.6-4.5 4.7l.3 5.1c.2 3.4 2.2 5.2 5.9 5.3"></path><path d="M8.5 13V9.6c0-1.1.7-1.8 1.7-1.8.8 0 1.4.4 1.8 1.1.4-.7 1-1.1 1.8-1.1 1 0 1.7.7 1.7 1.8V13"></path><path d="M12 9.4V13"></path>`,
|
|
},
|
|
{
|
|
href: "https://www.youtube.com/@neeldhara",
|
|
label: "YouTube",
|
|
color: "#b55252",
|
|
svg: `<path d="M4.8 8.5c.2-1.2 1.1-2.1 2.3-2.2 1.6-.2 3.2-.3 4.9-.3s3.3.1 4.9.3c1.2.1 2.1 1 2.3 2.2.2 1.1.3 2.2.3 3.5s-.1 2.4-.3 3.5c-.2 1.2-1.1 2.1-2.3 2.2-1.6.2-3.2.3-4.9.3s-3.3-.1-4.9-.3c-1.2-.1-2.1-1-2.3-2.2-.2-1.1-.3-2.2-.3-3.5s.1-2.4.3-3.5Z"></path><path d="M10.5 9.5l4 2.5-4 2.5v-5Z"></path>`,
|
|
},
|
|
{
|
|
href: "https://www.instagram.com/neeldharamisra",
|
|
label: "Instagram",
|
|
color: "#9a6b8c",
|
|
svg: `<rect x="5" y="5" width="14" height="14" rx="4"></rect><circle cx="12" cy="12" r="3.2"></circle><path d="M16.3 7.8h.01"></path>`,
|
|
},
|
|
];
|
|
|
|
const rssHostSuffix = process.env.RSS_HOST_SUFFIX ?? "neeldhara.email";
|
|
const publicHostSuffix = process.env.PUBLIC_HOST_SUFFIX ?? "neeldhara.blog";
|
|
const outDir = new URL("../dist/", import.meta.url);
|
|
const fontDir = new URL("../webfonts/", import.meta.url);
|
|
const fontFiles = [
|
|
"heliotrope_3_regular.woff2",
|
|
"heliotrope_3_italic.woff2",
|
|
"heliotrope_3_bold.woff2",
|
|
"heliotrope_3_bold_italic.woff2",
|
|
];
|
|
|
|
function decodeXml(value) {
|
|
return value
|
|
.replace(/'/g, "'")
|
|
.replace(/"/g, '"')
|
|
.replace(/>/g, ">")
|
|
.replace(/</g, "<")
|
|
.replace(/&/g, "&");
|
|
}
|
|
|
|
function escapeHtml(value) {
|
|
return value
|
|
.replace(/&/g, "&")
|
|
.replace(/</g, "<")
|
|
.replace(/>/g, ">")
|
|
.replace(/"/g, """);
|
|
}
|
|
|
|
function textFrom(block, tag) {
|
|
const match = block.match(new RegExp(`<${tag}[^>]*>([\\s\\S]*?)</${tag}>`, "i"));
|
|
return match ? decodeXml(match[1].trim()) : "";
|
|
}
|
|
|
|
function parseItems(xml) {
|
|
return [...xml.matchAll(/<item>([\s\S]*?)<\/item>/gi)].slice(0, 2).map((match) => {
|
|
const block = match[1];
|
|
const pubDate = new Date(textFrom(block, "pubDate"));
|
|
|
|
return {
|
|
title: textFrom(block, "title"),
|
|
link: textFrom(block, "link"),
|
|
date: Number.isNaN(pubDate.valueOf()) ? "" : pubDate.toISOString().slice(0, 10),
|
|
};
|
|
});
|
|
}
|
|
|
|
async function getPosts(slug) {
|
|
const url = `https://${slug}.${rssHostSuffix}/rss.xml`;
|
|
const response = await fetch(url);
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`${url} returned ${response.status}`);
|
|
}
|
|
|
|
return parseItems(await response.text());
|
|
}
|
|
|
|
function renderPost(post) {
|
|
const date = post.date ? new Date(`${post.date}T00:00:00Z`) : null;
|
|
const dateLabel = date
|
|
? date.toLocaleDateString("en", { month: "short", day: "numeric", timeZone: "UTC" })
|
|
: "";
|
|
|
|
return `<li class="post"><span class="date">${escapeHtml(dateLabel)}</span><a href="${escapeHtml(post.link)}">${escapeHtml(post.title)}</a></li>`;
|
|
}
|
|
|
|
function renderRssIcon(blog) {
|
|
const href = `https://${blog.slug}.${publicHostSuffix}/rss.xml`;
|
|
|
|
return `<a class="icon-link" href="${escapeHtml(href)}" aria-label="${escapeHtml(blog.label)} RSS">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<circle cx="6.25" cy="17.75" r="1.8"></circle>
|
|
<path d="M4.5 5.5c7.7 0 14 6.3 14 14"></path>
|
|
<path d="M4.5 10.2a9.3 9.3 0 0 1 9.3 9.3"></path>
|
|
</svg>
|
|
</a>`;
|
|
}
|
|
|
|
function renderSiteIcon(blog) {
|
|
const href = `https://${blog.slug}.${publicHostSuffix}/`;
|
|
|
|
return `<a class="icon-link" href="${escapeHtml(href)}" aria-label="${escapeHtml(blog.label)} site">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<circle cx="12" cy="12" r="8.25"></circle>
|
|
<path d="M3.75 12h16.5"></path>
|
|
<path d="M12 3.75c2.2 2.25 3.3 5 3.3 8.25s-1.1 6-3.3 8.25"></path>
|
|
<path d="M12 3.75c-2.2 2.25-3.3 5-3.3 8.25s1.1 6 3.3 8.25"></path>
|
|
</svg>
|
|
</a>`;
|
|
}
|
|
|
|
function renderSocialLinks() {
|
|
return `<nav class="social-links" aria-label="Social links">
|
|
${socialLinks.map((link) => `<a class="social-link" href="${escapeHtml(link.href)}" aria-label="${escapeHtml(link.label)}" style="--social-color:${escapeHtml(link.color)}" target="_blank" rel="me noopener noreferrer">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">${link.svg}</svg>
|
|
</a>`).join("\n ")}
|
|
</nav>`;
|
|
}
|
|
|
|
function renderBlog(blog, posts) {
|
|
return `<details class="blog">
|
|
<summary>
|
|
<span>${escapeHtml(blog.label)}</span>
|
|
<span class="blog-actions">
|
|
${renderSiteIcon(blog)}
|
|
${renderRssIcon(blog)}
|
|
</span>
|
|
</summary>
|
|
<p>${escapeHtml(blog.summary)}</p>
|
|
<ul>
|
|
${posts.map(renderPost).join("\n ")}
|
|
</ul>
|
|
</details>`;
|
|
}
|
|
|
|
const entries = await Promise.all(
|
|
blogs.map(async (blog) => [blog, await getPosts(blog.slug)]),
|
|
);
|
|
|
|
const html = `<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>neeldhara.blog</title>
|
|
<style>
|
|
@font-face {
|
|
font-family: "Heliotrope";
|
|
src: url("/webfonts/heliotrope_3_regular.woff2") format("woff2");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: "Heliotrope";
|
|
src: url("/webfonts/heliotrope_3_italic.woff2") format("woff2");
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: "Heliotrope";
|
|
src: url("/webfonts/heliotrope_3_bold.woff2") format("woff2");
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: "Heliotrope";
|
|
src: url("/webfonts/heliotrope_3_bold_italic.woff2") format("woff2");
|
|
font-weight: 700;
|
|
font-style: italic;
|
|
font-display: swap;
|
|
}
|
|
html { color-scheme: light; }
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
background: #f0f0f0;
|
|
color: #111;
|
|
font-family: "Heliotrope", ui-serif, Georgia, serif;
|
|
font-size: 15px;
|
|
line-height: 1.45;
|
|
}
|
|
a {
|
|
color: inherit;
|
|
text-decoration-color: #c6c6c6;
|
|
text-underline-offset: 3px;
|
|
}
|
|
a:hover { text-decoration-color: #111; }
|
|
main {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.75fr) minmax(320px, 1fr);
|
|
width: min(1220px, calc(100% - 72px));
|
|
min-height: min(860px, calc(100vh - 144px));
|
|
margin: 72px auto;
|
|
background: #d9d9d9;
|
|
}
|
|
.left,
|
|
.right {
|
|
min-height: inherit;
|
|
padding: 34px 32px;
|
|
}
|
|
.left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
gap: 56px;
|
|
}
|
|
.right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
background: #fff;
|
|
}
|
|
.mark {
|
|
display: block;
|
|
width: 13px;
|
|
height: 13px;
|
|
border: 2px solid #111;
|
|
border-radius: 50%;
|
|
}
|
|
h1,
|
|
h2,
|
|
p {
|
|
margin: 0;
|
|
}
|
|
h1,
|
|
h2 {
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
}
|
|
.role {
|
|
color: #666;
|
|
font-weight: 500;
|
|
}
|
|
.identity {
|
|
display: grid;
|
|
gap: 7px;
|
|
}
|
|
.social-links {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 13px;
|
|
margin-top: 7px;
|
|
}
|
|
.social-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 22px;
|
|
height: 22px;
|
|
color: #222;
|
|
opacity: 0.72;
|
|
transition: color 180ms ease, opacity 180ms ease, transform 180ms ease;
|
|
}
|
|
.social-link:hover {
|
|
color: var(--social-color);
|
|
opacity: 1;
|
|
transform: translateY(-1px);
|
|
}
|
|
.social-link svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.7;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
.blog-list {
|
|
display: grid;
|
|
gap: 28px;
|
|
}
|
|
.blog {
|
|
max-width: 650px;
|
|
}
|
|
summary {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
width: 100%;
|
|
cursor: pointer;
|
|
font-weight: 700;
|
|
list-style: none;
|
|
}
|
|
summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
summary::before {
|
|
content: "+";
|
|
width: 18px;
|
|
flex: 0 0 18px;
|
|
color: #666;
|
|
font-weight: 500;
|
|
}
|
|
details[open] summary::before {
|
|
content: "-";
|
|
}
|
|
summary > span {
|
|
flex: 0 1 auto;
|
|
}
|
|
.blog-actions {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
.icon-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 22px;
|
|
height: 22px;
|
|
color: #111;
|
|
}
|
|
.icon-link svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.9;
|
|
stroke-linecap: round;
|
|
}
|
|
.icon-link circle {
|
|
fill: none;
|
|
}
|
|
.icon-link[aria-label$="RSS"] circle {
|
|
fill: currentColor;
|
|
stroke: none;
|
|
}
|
|
.blog p {
|
|
max-width: 540px;
|
|
margin-top: 9px;
|
|
color: #555;
|
|
}
|
|
ul {
|
|
display: grid;
|
|
gap: 7px;
|
|
margin: 14px 0 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
.post {
|
|
display: grid;
|
|
grid-template-columns: 64px minmax(0, 1fr);
|
|
gap: 0;
|
|
}
|
|
.date {
|
|
color: #666;
|
|
}
|
|
.post a {
|
|
font-weight: 700;
|
|
}
|
|
.bio {
|
|
display: grid;
|
|
gap: 24px;
|
|
max-width: 390px;
|
|
font-weight: 400;
|
|
}
|
|
@media (max-width: 860px) {
|
|
main {
|
|
grid-template-columns: 1fr;
|
|
width: min(100%, calc(100% - 28px));
|
|
margin: 14px auto;
|
|
}
|
|
.left,
|
|
.right {
|
|
min-height: auto;
|
|
padding: 28px 26px;
|
|
}
|
|
.left {
|
|
gap: 40px;
|
|
}
|
|
.right {
|
|
gap: 72px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<section class="left" aria-label="Blog index">
|
|
<span class="mark" aria-hidden="true"></span>
|
|
<div class="blog-list">
|
|
${entries.map(([blog, posts]) => renderBlog(blog, posts)).join("\n ")}
|
|
</div>
|
|
</section>
|
|
<aside class="right" aria-label="About">
|
|
<div class="identity">
|
|
<h2>Neeldhara Misra</h2>
|
|
<p class="role">Computer Science and Engineering, IIT Gandhinagar</p>
|
|
${renderSocialLinks()}
|
|
</div>
|
|
<div class="bio">
|
|
<p>I am a computer science faculty member at IIT Gandhinagar. My academic work is broadly around algorithms, structural graph theory, parameterized complexity, computational social choice, combinatorial games, and fair allocation.</p>
|
|
<p>These blogs separate different kinds of notes: paper-reading and mini-surveys, puzzle-like teaching prompts, reflective essays, poems, reviews of tools and workflows, experiments with AI, and visual or generative art.</p>
|
|
<p>The homepage is deliberately small: each section shows the two newest posts and links to that blog's RSS feed.</p>
|
|
</div>
|
|
</aside>
|
|
</main>
|
|
</body>
|
|
</html>
|
|
`;
|
|
|
|
await mkdir(outDir, { recursive: true });
|
|
await writeFile(new URL("index.html", outDir), html);
|
|
await mkdir(new URL("webfonts/", outDir), { recursive: true });
|
|
await Promise.all(
|
|
fontFiles.map((file) => copyFile(new URL(file, fontDir), new URL(`webfonts/${file}`, outDir))),
|
|
);
|