@bivabdas/sharq 1.0.1 → 1.0.3

package/bin/sharq.js

@@ -29,13 +29,15 @@ Usage:
 
 Commands:
   start   Start the local sharq server
-  dev     Alias for start, intended for local development
+  dev     Start the local sharq server with Tailwind watching enabled
   build   Generate a deployable static site in ./sharq
   create  Scaffold a new sharq site
 `);
 }
 
-if (!command || command === "dev" || command === "start") {
+if (!command || command === "dev") {
+  await startServer({ watchStyles: true });
+} else if (command === "start") {
   await startServer();
 } else if (command === "build") {
   const config = await resolveConfig();

package/lib/config.js

@@ -13,6 +13,7 @@ export function createConfig(rootDir, overrides = {}) {
       overrides.siteDescription || "A tiny publishing surface that renders posts from Markdown and serves static HTML.",
     buildDirName,
     contentDir: path.join(rootDir, "content"),
+    stylesDir: path.join(rootDir, "styles"),
     templatesDir: path.join(rootDir, "templates"),
     publicDir: path.join(rootDir, "public"),
     blogOutputDir: path.join(rootDir, "public", "blog"),
@@ -20,6 +21,9 @@ export function createConfig(rootDir, overrides = {}) {
     homePagePath: path.join(rootDir, "public", "index.html"),
     archivePagePath: path.join(rootDir, "public", "archive.html"),
     staticAssetsDir: path.join(rootDir, "public", "assets"),
+    tailwindInputPath: path.join(rootDir, "styles", "site.css"),
+    tailwindOutputPath: path.join(rootDir, "public", "assets", "site.css"),
+    overridesCssPath: path.join(rootDir, "public", "assets", "overrides.css"),
     buildDir: path.join(rootDir, buildDirName)
   };
 }

package/lib/generator.js

@@ -2,10 +2,12 @@ import fs from "node:fs/promises";
 import path from "node:path";
 import { generateSitemap } from "./sitemap.js";
 import { readPostSource, renderArchivePage, renderIndexPage, renderPostPage } from "./renderer.js";
+import { compileTailwind } from "./styles.js";
 
 async function ensureDirectories(config) {
   await Promise.all([
     fs.mkdir(config.contentDir, { recursive: true }),
+    fs.mkdir(config.stylesDir, { recursive: true }),
     fs.mkdir(config.publicDir, { recursive: true }),
     fs.mkdir(config.blogOutputDir, { recursive: true }),
     fs.mkdir(config.templatesDir, { recursive: true }),
@@ -121,6 +123,7 @@ function createOutputConfig(config, outputDir) {
 }
 
 export async function buildStaticSite(config, outputDir = config.buildDir) {
+  await compileTailwind(config, { minify: true });
   const outputConfig = createOutputConfig(config, outputDir);
 
   await fs.rm(outputDir, { recursive: true, force: true });

package/lib/renderer.js

@@ -228,7 +228,7 @@ export async function renderPostPage(config, post) {
     .join("");
 
   return applyTemplate(template, {
-    title: escapeHtml(post.title),
+    title: escapeHtml(`${post.title} | ${config.siteTitle}`),
     description: escapeHtml(post.description),
     date: escapeHtml(post.date),
     author: escapeHtml(post.author || "sharq"),

package/lib/scaffold.js

@@ -77,6 +77,10 @@ async function writePackageJson(projectDir, projectName, frameworkPackageName, f
     },
     dependencies: {
       [frameworkPackageName]: frameworkDependency
+    },
+    devDependencies: {
+      tailwindcss: "^4.0.0",
+      "@tailwindcss/cli": "^4.0.0"
     }
   };
 
@@ -107,8 +111,9 @@ Generated with sharq.
 ## Structure
 
 - \`content/\` markdown posts
+- \`styles/site.css\` Tailwind entry file
 - \`templates/\` page templates
-- \`public/assets/\` static assets
+- \`public/assets/overrides.css\` optional vanilla CSS overrides
 - \`sharq/\` production build output
 - \`sharq.config.js\` project-level settings
 `;

package/lib/server.js

@@ -3,6 +3,7 @@ import http from "node:http";
 import path from "node:path";
 import { resolveConfig } from "./config.js";
 import { ensurePostGenerated, refreshSiteArtifacts } from "./generator.js";
+import { compileTailwind } from "./styles.js";
 
 const contentTypes = {
   ".html": "text/html; charset=utf-8",
@@ -186,13 +187,23 @@ export async function startServer(options = {}) {
   const config = await resolveConfig(rootDir);
   const requestedPort = Number(options.port || process.env.PORT || 3000);
   const maxPortAttempts = Number(options.maxPortAttempts || 20);
+  const watchStyles = Boolean(options.watchStyles);
   const app = createApp(config);
+
+  await compileTailwind(config);
+  const styleWatcher = watchStyles ? await compileTailwind(config, { watch: true }) : null;
   const { server, port } = await listenOnAvailablePort(() => app.createServer(), requestedPort, maxPortAttempts);
 
   if (!process.env.SITE_URL) {
     config.siteUrl = `http://localhost:${port}`;
   }
 
+  if (styleWatcher) {
+    server.on("close", () => {
+      styleWatcher.kill();
+    });
+  }
+
   await app.prepare();
   console.log(`sharq running at http://localhost:${port}`);
   return { server, port, config };

package/lib/styles.js

@@ -0,0 +1,75 @@
+import fs from "node:fs/promises";
+import { spawn } from "node:child_process";
+
+function getNpxCommand() {
+  return process.platform === "win32" ? "npx.cmd" : "npx";
+}
+
+export async function hasTailwindInput(config) {
+  try {
+    await fs.access(config.tailwindInputPath);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function runTailwind(config, { watch = false, minify = false } = {}) {
+  const args = [
+    "@tailwindcss/cli",
+    "-i",
+    config.tailwindInputPath,
+    "-o",
+    config.tailwindOutputPath
+  ];
+
+  if (watch) {
+    args.push("--watch");
+  }
+
+  if (minify) {
+    args.push("--minify");
+  }
+
+  return spawn(getNpxCommand(), args, {
+    cwd: config.rootDir,
+    stdio: watch ? "inherit" : "pipe"
+  });
+}
+
+export async function compileTailwind(config, options = {}) {
+  if (!(await hasTailwindInput(config))) {
+    return false;
+  }
+
+  await fs.mkdir(config.staticAssetsDir, { recursive: true });
+
+  const child = runTailwind(config, options);
+
+  if (options.watch) {
+    return child;
+  }
+
+  let stderr = "";
+
+  if (child.stderr) {
+    child.stderr.on("data", (chunk) => {
+      stderr += chunk.toString();
+    });
+  }
+
+  return new Promise((resolve, reject) => {
+    child.on("exit", (code) => {
+      if (code === 0) {
+        resolve(true);
+        return;
+      }
+
+      reject(new Error(stderr.trim() || `Tailwind build failed with exit code ${code}.`));
+    });
+
+    child.on("error", (error) => {
+      reject(error);
+    });
+  });
+}

package/package.json

@@ -1,36 +1,42 @@
 {
   "name": "@bivabdas/sharq",
-  "version": "1.0.1",
-  "description": "Minimal on-demand static rendering framework and scaffolder",
-  "license": "MIT",
-  "keywords": [
-    "static-site-generator",
-    "blog",
-    "markdown",
-    "landing-pages",
-    "publishing"
-  ],
-  "engines": {
-    "node": ">=20.0.0"
-  },
+  "version": "1.0.3",
+  "description": "A tiny static publishing framework for landing pages and markdown-driven sites.",
   "type": "module",
-  "exports": {
-    ".": "./index.js"
-  },
+  "main": "index.js",
   "bin": {
     "sharq": "./bin/sharq.js",
     "create-sharq": "./bin/create-sharq.js"
   },
-  "scripts": {
-    "start": "node ./bin/sharq.js start",
-    "dev": "node --watch ./bin/sharq.js dev",
-    "build": "node ./bin/sharq.js build",
-    "test": "node --input-type=module -e \"import('./index.js').then((m) => console.log('exports:', Object.keys(m).sort().join(', ')))\""
-  },
   "files": [
     "bin",
+    "index.js",
     "lib",
     "scaffold",
-    "index.js"
-  ]
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "test": "node --input-type=module -e \"import('./index.js').then((m) => console.log('exports:', Object.keys(m).sort().join(', ')))\""
+  },
+  "keywords": [
+    "static-site-generator",
+    "markdown",
+    "landing-pages",
+    "blog",
+    "tailwindcss"
+  ],
+  "author": "Bivab Das",
+  "license": "MIT",
+  "homepage": "https://www.sharq.site",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Bivab0/sharq.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Bivab0/sharq/issues"
+  },
+  "engines": {
+    "node": ">=18"
+  }
 }

package/scaffold/template/public/assets/overrides.css

@@ -0,0 +1,38 @@
+body {
+  background-color: #f6f4ee;
+  background-image:
+    linear-gradient(rgba(16, 16, 16, 0.08) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(16, 16, 16, 0.08) 1px, transparent 1px),
+    radial-gradient(circle at top center, rgba(16, 16, 16, 0.045), transparent 36%);
+  background-size: 126px 126px, 126px 126px, auto;
+}
+
+.article-content h2,
+.article-content h3 {
+  margin-top: 2.2rem;
+}
+
+.article-content pre {
+  overflow-x: auto;
+  border-radius: 1rem;
+  background: #121212;
+  color: #f6f6f3;
+  padding: 1rem 1.125rem;
+}
+
+.article-content blockquote {
+  margin: 1.5rem 0;
+  padding-left: 1rem;
+  border-left: 3px solid rgba(16, 16, 16, 0.16);
+}
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid rgba(16, 16, 16, 0.1);
+  border-radius: 999px;
+  background: rgba(16, 16, 16, 0.04);
+  padding: 0.42rem 0.9rem;
+  font-size: 0.86rem;
+  color: #66645d;
+}

package/scaffold/template/public/assets/site.css

@@ -1,224 +1,38 @@
-:root {
-  color-scheme: light;
-  --bg: #efe6d6;
-  --bg-deep: #ddd3c4;
-  --panel: rgba(255, 251, 245, 0.9);
-  --panel-strong: #fff8ef;
-  --text: #221d18;
-  --muted: #6d645b;
-  --accent: #0f766e;
-  --accent-strong: #9a3412;
-  --border: rgba(108, 92, 76, 0.16);
-  --shadow: 0 18px 45px rgba(64, 40, 20, 0.08);
-}
-
-* {
-  box-sizing: border-box;
-}
-
-html {
-  font-size: 16px;
-}
-
 body {
-  margin: 0;
-  min-height: 100vh;
-  color: var(--text);
-  font-family: Georgia, "Times New Roman", serif;
-  background:
-    radial-gradient(circle at top left, rgba(15, 118, 110, 0.18), transparent 28%),
-    radial-gradient(circle at 80% 20%, rgba(154, 52, 18, 0.14), transparent 22%),
-    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 100%);
-}
-
-a {
-  color: var(--accent);
-}
-
-.button-link {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.7rem 1rem;
-  border-radius: 999px;
-  background: var(--accent);
-  color: #f8fbfb;
-  text-decoration: none;
-}
-
-.shell {
-  max-width: 920px;
-  margin: 0 auto;
-  padding: 56px 20px 80px;
-}
-
-.eyebrow {
-  margin: 0 0 12px;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--accent-strong);
-  font-size: 0.8rem;
-}
-
-.hero {
-  margin-bottom: 28px;
-}
-
-.hero h1 {
-  margin: 0;
-  font-size: clamp(3rem, 9vw, 5.5rem);
-  line-height: 0.95;
-}
-
-.hero p:last-child {
-  max-width: 58ch;
-  color: var(--muted);
-  line-height: 1.8;
-  font-size: 1.04rem;
-}
-
-.panel,
-.article-card {
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: 24px;
-  box-shadow: var(--shadow);
-  backdrop-filter: blur(10px);
-}
-
-.panel {
-  padding: 24px;
-}
-
-.article-card {
-  padding: 32px;
-  background: var(--panel-strong);
-}
-
-.post-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.post-list li {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  gap: 20px;
-  padding: 18px 0;
-  border-bottom: 1px solid var(--border);
-}
-
-.post-list li:last-child {
-  border-bottom: 0;
-}
-
-.post-list a {
-  text-decoration: none;
-  font-size: 1.15rem;
-}
-
-.post-list p {
-  margin: 0.45rem 0 0;
-  color: var(--muted);
-  line-height: 1.7;
-  max-width: 52ch;
-}
-
-.post-list span,
-.meta {
-  color: var(--muted);
-}
-
-.tag-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  list-style: none;
-  padding: 0;
-  margin: 0 0 1.25rem;
-}
-
-.tag {
-  padding: 0.35rem 0.7rem;
-  border-radius: 999px;
-  background: rgba(15, 118, 110, 0.1);
-  color: var(--accent);
-  font-size: 0.85rem;
-}
-
-.article-content p,
-.article-content li {
-  line-height: 1.8;
+  background-color: #f6f4ee;
+  background-image:
+    linear-gradient(rgba(16, 16, 16, 0.08) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(16, 16, 16, 0.08) 1px, transparent 1px),
+    radial-gradient(circle at top center, rgba(16, 16, 16, 0.045), transparent 36%);
+  background-size: 126px 126px, 126px 126px, auto;
 }
 
 .article-content h2,
 .article-content h3 {
-  margin-top: 2rem;
-}
-
-.article-content ul,
-.article-content ol {
-  padding-left: 1.2rem;
+  margin-top: 2.2rem;
 }
 
 .article-content pre {
   overflow-x: auto;
-  padding: 16px;
-  background: #241d18;
-  color: #f7efe7;
-  border-radius: 14px;
-}
-
-.article-content code {
-  font-family: "SFMono-Regular", Consolas, monospace;
+  border-radius: 1rem;
+  background: #121212;
+  color: #f6f6f3;
+  padding: 1rem 1.125rem;
 }
 
 .article-content blockquote {
   margin: 1.5rem 0;
-  padding: 0.1rem 0 0.1rem 1rem;
-  border-left: 4px solid rgba(15, 118, 110, 0.35);
-  color: var(--muted);
+  padding-left: 1rem;
+  border-left: 3px solid rgba(16, 16, 16, 0.16);
 }
 
-.archive-list {
-  display: grid;
-  gap: 1rem;
-}
-
-.archive-item {
-  padding: 1.1rem 0;
-  border-bottom: 1px solid var(--border);
-}
-
-.archive-item:last-child {
-  border-bottom: 0;
-}
-
-.archive-item h2 {
-  margin: 0;
-}
-
-.archive-item p {
-  margin: 0.5rem 0 0;
-}
-
-.archive-meta {
-  color: var(--muted);
-}
-
-@media (max-width: 640px) {
-  .shell {
-    padding-top: 40px;
-  }
-
-  .article-card,
-  .panel {
-    padding: 22px;
-  }
-
-  .post-list li {
-    flex-direction: column;
-    align-items: flex-start;
-  }
+.tag {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid rgba(16, 16, 16, 0.1);
+  border-radius: 999px;
+  background: rgba(16, 16, 16, 0.04);
+  padding: 0.42rem 0.9rem;
+  font-size: 0.86rem;
+  color: #66645d;
 }

package/scaffold/template/styles/site.css

@@ -0,0 +1,5 @@
+@import "tailwindcss";
+
+@source "../templates";
+@source "../content";
+@source "../public";

package/scaffold/template/templates/archive.html

@@ -6,17 +6,13 @@
     <title>{{title}}</title>
     <meta name="description" content="{{description}}">
     <link rel="stylesheet" href="/assets/site.css">
+    <link rel="stylesheet" href="/assets/overrides.css">
   </head>
-  <body class="archive-page">
-    <main class="shell">
-      <section class="hero">
-        <p class="eyebrow">Archive</p>
-        <h1>All posts</h1>
-        <p>Everything currently discoverable in the content folder, sorted newest first.</p>
-      </section>
-      <section class="panel archive-list">
-        {{content}}
-      </section>
+  <body class="bg-[#f6f4ee] px-4 py-4 text-[#101010] antialiased sm:px-6 lg:px-8">
+    <main class="mx-auto w-full max-w-6xl rounded-[2rem] border border-black/10 bg-white/70 px-6 py-8 shadow-[0_24px_70px_rgba(17,17,17,0.06)] backdrop-blur-xl sm:px-10">
+      <p class="mb-3 text-[0.72rem] uppercase tracking-[0.22em] text-[#66645d]">Archive</p>
+      <h1 class="max-w-[12ch] text-balance text-[clamp(2.2rem,4vw,3.6rem)] font-semibold leading-[0.98] tracking-[-0.08em] text-[#101010]">Everything currently published.</h1>
+      <div class="mt-8 space-y-4">{{content}}</div>
     </main>
   </body>
 </html>

package/scaffold/template/templates/index.html

@@ -6,20 +6,17 @@
     <title>{{title}}</title>
     <meta name="description" content="{{description}}">
     <link rel="stylesheet" href="/assets/site.css">
+    <link rel="stylesheet" href="/assets/overrides.css">
   </head>
-  <body class="index-page">
-    <main class="shell">
-      <section class="hero">
-        <p class="eyebrow">Minimal static blog engine</p>
-        <h1>{{title}}</h1>
-        <p>{{description}}</p>
-        <p><a class="button-link" href="/archive">Browse the archive</a></p>
-      </section>
-
-      <section class="panel">
-        <ul class="post-list">
-          {{content}}
-        </ul>
+  <body class="bg-[#f6f4ee] text-[#101010] antialiased">
+    <main class="mx-auto flex min-h-screen w-full max-w-6xl items-center px-4 py-4 sm:px-6 lg:px-8">
+      <section class="w-full rounded-[2rem] border border-black/10 bg-white/70 px-6 py-10 text-center shadow-[0_24px_70px_rgba(17,17,17,0.06)] backdrop-blur-xl sm:px-10 lg:px-16">
+        <p class="mb-4 text-[0.72rem] uppercase tracking-[0.22em] text-[#66645d]">Tailwind first</p>
+        <h1 class="mx-auto max-w-[80%] text-balance text-[clamp(2.35rem,5vw,4.2rem)] font-semibold leading-[0.98] tracking-[-0.08em] text-[#101010]">{{title}}</h1>
+        <p class="mx-auto mt-5 max-w-[70%] text-balance text-[clamp(0.98rem,1.25vw,1.05rem)] leading-7 text-[#66645d]">{{description}}</p>
+        <div class="mt-8 rounded-full border border-black/10 px-4 py-2 text-sm text-[#66645d]">
+          Edit Tailwind utilities in the templates and use <code class="font-mono text-[#101010]">public/assets/overrides.css</code> for custom CSS.
+        </div>
       </section>
     </main>
   </body>

package/scaffold/template/templates/post.html

@@ -6,18 +6,17 @@
     <title>{{title}}</title>
     <meta name="description" content="{{description}}">
     <link rel="stylesheet" href="/assets/site.css">
+    <link rel="stylesheet" href="/assets/overrides.css">
   </head>
-  <body class="post-page">
-    <main class="shell">
-      <article class="article-card">
-        <p class="eyebrow"><a href="/">Back to home</a></p>
-        <h1>{{title}}</h1>
-        <p class="meta">{{date}} · {{author}}</p>
-        <ul class="tag-list">{{tags}}</ul>
-        <div class="article-content">
-          {{content}}
-        </div>
-      </article>
+  <body class="bg-[#f6f4ee] px-4 py-4 text-[#101010] antialiased sm:px-6 lg:px-8">
+    <main class="mx-auto w-full max-w-5xl rounded-[2rem] border border-black/10 bg-white/85 px-6 py-8 shadow-[0_24px_70px_rgba(17,17,17,0.06)] backdrop-blur-xl sm:px-10">
+      <p class="mb-4 text-[0.72rem] uppercase tracking-[0.22em] text-[#66645d]"><a class="transition hover:text-[#101010]" href="/">Back to home</a></p>
+      <h1 class="max-w-[12ch] text-balance text-[clamp(2.2rem,4vw,3.8rem)] font-semibold leading-[0.98] tracking-[-0.08em] text-[#101010]">{{title}}</h1>
+      <p class="mt-4 text-sm text-[#66645d]">{{date}} · {{author}}</p>
+      <ul class="mb-7 mt-4 flex flex-wrap gap-2">{{tags}}</ul>
+      <div class="article-content max-w-none">
+        {{content}}
+      </div>
     </main>
   </body>
 </html>