1073 lines
40 KiB
Python
Executable File
1073 lines
40 KiB
Python
Executable File
#!/usr/bin/env python3
|
|
"""Local authoring UI for the Org published website."""
|
|
|
|
from __future__ import annotations
|
|
|
|
import json
|
|
import mimetypes
|
|
import os
|
|
import posixpath
|
|
import re
|
|
import struct
|
|
import subprocess
|
|
import sys
|
|
import threading
|
|
import time
|
|
import cgi
|
|
from dataclasses import dataclass, field
|
|
from datetime import datetime
|
|
from email.utils import formatdate
|
|
from http import HTTPStatus
|
|
from http.server import BaseHTTPRequestHandler, ThreadingHTTPServer
|
|
from pathlib import Path
|
|
from typing import Any
|
|
from urllib.parse import parse_qs, urlparse
|
|
|
|
|
|
ROOT = Path(__file__).resolve().parent
|
|
BLOGS_DIR = ROOT / "blogs"
|
|
POSTS_DIR = ROOT / "posts"
|
|
LIMA_DIR = ROOT / "lima"
|
|
HZONE_ASSETS_DIR = ROOT / "assets" / "images" / "hzone"
|
|
GENERATED_ORG_NAMES = {
|
|
"blogs-list.org",
|
|
"posts-list.org",
|
|
"career-list.org",
|
|
"sitemap.org",
|
|
"recently-updated.org",
|
|
"wip.org",
|
|
}
|
|
GENERATED_CONTENT_NAMES = GENERATED_ORG_NAMES | {"lima-list.org"}
|
|
ALLOWED_UPLOAD_EXTENSIONS = {
|
|
".png",
|
|
".jpg",
|
|
".jpeg",
|
|
".gif",
|
|
".webp",
|
|
".svg",
|
|
".mp4",
|
|
".webm",
|
|
".mov",
|
|
}
|
|
MONTH_NAMES = [
|
|
"january",
|
|
"february",
|
|
"march",
|
|
"april",
|
|
"may",
|
|
"june",
|
|
"july",
|
|
"august",
|
|
"september",
|
|
"october",
|
|
"november",
|
|
"december",
|
|
]
|
|
|
|
|
|
def slugify(value: str) -> str:
|
|
slug = re.sub(r"[^a-z0-9]+", "-", value.lower()).strip("-")
|
|
return slug or "untitled"
|
|
|
|
|
|
def normalise_tags(value: Any) -> list[str]:
|
|
if isinstance(value, str):
|
|
raw = re.split(r"[,:\s]+", value)
|
|
elif isinstance(value, list):
|
|
raw = [str(item) for item in value]
|
|
else:
|
|
raw = []
|
|
tags = []
|
|
for tag in raw:
|
|
if not tag.strip():
|
|
continue
|
|
clean = slugify(tag)
|
|
if clean and clean not in tags:
|
|
tags.append(clean)
|
|
return tags
|
|
|
|
|
|
def org_date(dt: datetime) -> str:
|
|
return dt.strftime("<%Y-%m-%d %a %H:%M>")
|
|
|
|
|
|
def parse_org_datetime(value: str | None) -> datetime | None:
|
|
if not value:
|
|
return None
|
|
match = re.search(r"<(\d{4})-(\d{2})-(\d{2})(?:\s+\w+)?(?:\s+(\d{2}):(\d{2}))?>", value)
|
|
if not match:
|
|
return None
|
|
year, month, day, hour, minute = match.groups()
|
|
return datetime(
|
|
int(year),
|
|
int(month),
|
|
int(day),
|
|
int(hour or 12),
|
|
int(minute or 0),
|
|
)
|
|
|
|
|
|
def html_escape(value: str) -> str:
|
|
return (
|
|
value.replace("&", "&")
|
|
.replace("<", "<")
|
|
.replace(">", ">")
|
|
.replace('"', """)
|
|
)
|
|
|
|
|
|
@dataclass
|
|
class OrgPage:
|
|
path: str
|
|
page_type: str
|
|
title: str
|
|
slug: str
|
|
tags: list[str]
|
|
content: str
|
|
date: str
|
|
comments: bool
|
|
options: str
|
|
wip: str | None = None
|
|
|
|
|
|
@dataclass
|
|
class ContentPage:
|
|
path: str
|
|
page_type: str
|
|
title: str
|
|
slug: str
|
|
tags: list[str]
|
|
content: str
|
|
date: str
|
|
comments: bool
|
|
options: str
|
|
format: str
|
|
wip: str | None = None
|
|
|
|
|
|
@dataclass
|
|
class BuildJob:
|
|
id: int
|
|
path: str
|
|
title: str
|
|
queued_at: float = field(default_factory=time.time)
|
|
started_at: float | None = None
|
|
finished_at: float | None = None
|
|
ok: bool | None = None
|
|
message: str = "Queued"
|
|
log: str = ""
|
|
|
|
@property
|
|
def status(self) -> str:
|
|
if self.finished_at is not None:
|
|
return "done" if self.ok else "failed"
|
|
if self.started_at is not None:
|
|
return "running"
|
|
return "queued"
|
|
|
|
def to_dict(self, include_log: bool = False) -> dict[str, Any]:
|
|
data = {
|
|
"id": self.id,
|
|
"path": self.path,
|
|
"title": self.title,
|
|
"queuedAt": self.queued_at,
|
|
"startedAt": self.started_at,
|
|
"finishedAt": self.finished_at,
|
|
"ok": self.ok,
|
|
"status": self.status,
|
|
"message": self.message,
|
|
}
|
|
if include_log:
|
|
data["log"] = self.log[-12000:]
|
|
return data
|
|
|
|
|
|
class BuildQueue:
|
|
def __init__(self) -> None:
|
|
self._lock = threading.Lock()
|
|
self._next_id = 1
|
|
self._pending: list[BuildJob] = []
|
|
self._current: BuildJob | None = None
|
|
self._recent: list[BuildJob] = []
|
|
self._worker: threading.Thread | None = None
|
|
|
|
def snapshot(self) -> dict[str, Any]:
|
|
with self._lock:
|
|
current = self._current.to_dict(include_log=True) if self._current else None
|
|
recent = [job.to_dict(include_log=True) for job in self._recent[-10:]]
|
|
pending = [job.to_dict() for job in self._pending]
|
|
latest = current or (recent[-1] if recent else None)
|
|
message = latest["message"] if latest else "No builds have run yet."
|
|
return {
|
|
"running": current is not None,
|
|
"queued": len(pending),
|
|
"message": message,
|
|
"current": current,
|
|
"pending": pending,
|
|
"recent": recent,
|
|
"log": latest.get("log", "") if latest else "",
|
|
}
|
|
|
|
def enqueue(self, path: str, title: str) -> BuildJob:
|
|
with self._lock:
|
|
job = BuildJob(self._next_id, path, title)
|
|
self._next_id += 1
|
|
self._pending.append(job)
|
|
if self._worker is None or not self._worker.is_alive():
|
|
self._worker = threading.Thread(target=self._run_worker, daemon=True)
|
|
self._worker.start()
|
|
return job
|
|
|
|
def _run_worker(self) -> None:
|
|
while True:
|
|
with self._lock:
|
|
if not self._pending:
|
|
self._current = None
|
|
return
|
|
job = self._pending.pop(0)
|
|
job.started_at = time.time()
|
|
job.message = "Publishing site and search index."
|
|
self._current = job
|
|
ok, message, log = run_build_commands()
|
|
with self._lock:
|
|
job.finished_at = time.time()
|
|
job.ok = ok
|
|
job.message = message
|
|
job.log = log
|
|
self._recent.append(job)
|
|
self._recent = self._recent[-20:]
|
|
self._current = None
|
|
|
|
|
|
BUILD_QUEUE = BuildQueue()
|
|
|
|
|
|
def safe_relative_path(path: str) -> Path:
|
|
rel = Path(path)
|
|
if rel.is_absolute() or ".." in rel.parts:
|
|
raise ValueError("Path must stay inside this repository.")
|
|
full = (ROOT / rel).resolve()
|
|
if not full.is_relative_to(ROOT):
|
|
raise ValueError("Path must stay inside this repository.")
|
|
if full.suffix == ".org" and (full.is_relative_to(BLOGS_DIR) or full.is_relative_to(POSTS_DIR)):
|
|
return full
|
|
if full.suffix == ".md" and full.is_relative_to(LIMA_DIR):
|
|
return full
|
|
raise ValueError("Only .org files under blogs/posts and .md files under lima can be edited here.")
|
|
return full
|
|
|
|
|
|
def safe_target_path(path: str, slug: str, page_type: str) -> Path:
|
|
candidate = path.strip()
|
|
if not candidate:
|
|
raise ValueError("Path is required.")
|
|
default_ext = ".md" if page_type == "lima" else ".org"
|
|
if candidate.endswith("/"):
|
|
candidate = f"{candidate}{slug}{default_ext}"
|
|
elif not Path(candidate).suffix:
|
|
candidate = f"{candidate}{default_ext}"
|
|
return safe_relative_path(candidate)
|
|
|
|
|
|
def markdown_title(content: str, fallback: str) -> str:
|
|
for line in content.splitlines():
|
|
match = re.match(r"^#\s+(.+?)\s*$", line)
|
|
if match:
|
|
return match.group(1).strip()
|
|
return fallback.replace("-", " ").replace("_", " ").title()
|
|
|
|
|
|
def read_markdown_page(path: Path) -> ContentPage:
|
|
content = path.read_text(encoding="utf-8")
|
|
rel = path.relative_to(ROOT).as_posix()
|
|
title = markdown_title(content, path.stem)
|
|
return ContentPage(
|
|
path=rel,
|
|
page_type="lima",
|
|
title=title,
|
|
slug=path.stem,
|
|
tags=[],
|
|
content=content,
|
|
date="",
|
|
comments=True,
|
|
options="",
|
|
format="markdown",
|
|
)
|
|
|
|
|
|
def read_page(path: Path) -> ContentPage:
|
|
if path.suffix == ".md" and path.is_relative_to(LIMA_DIR):
|
|
return read_markdown_page(path)
|
|
text = path.read_text(encoding="utf-8")
|
|
meta: dict[str, str] = {}
|
|
body_lines: list[str] = []
|
|
in_header = True
|
|
for line in text.splitlines():
|
|
if in_header and line.startswith("#+"):
|
|
key, _, value = line[2:].partition(":")
|
|
meta[key.strip().upper()] = value.strip()
|
|
else:
|
|
in_header = False
|
|
body_lines.append(line)
|
|
rel = path.relative_to(ROOT).as_posix()
|
|
page_type = "blog" if path.is_relative_to(BLOGS_DIR) else "post"
|
|
slug = meta.get("SLUG") or path.stem
|
|
tags = normalise_tags(meta.get("FILETAGS", ""))
|
|
return ContentPage(
|
|
path=rel,
|
|
page_type=page_type,
|
|
title=meta.get("TITLE", path.stem),
|
|
slug=slug,
|
|
tags=tags,
|
|
content="\n".join(body_lines).lstrip("\n"),
|
|
date=meta.get("DATE", org_date(datetime.fromtimestamp(path.stat().st_mtime))),
|
|
comments=meta.get("COMMENTS", "t").lower() == "t",
|
|
options=meta.get("OPTIONS", "num:nil"),
|
|
format="org",
|
|
wip=meta.get("WIP"),
|
|
)
|
|
|
|
|
|
def page_to_dict(page: ContentPage) -> dict[str, Any]:
|
|
return {
|
|
"path": page.path,
|
|
"pageType": page.page_type,
|
|
"title": page.title,
|
|
"slug": page.slug,
|
|
"tags": page.tags,
|
|
"content": page.content,
|
|
"date": page.date,
|
|
"comments": page.comments,
|
|
"options": page.options,
|
|
"format": page.format,
|
|
"wip": page.wip or "",
|
|
}
|
|
|
|
|
|
def list_pages() -> list[dict[str, Any]]:
|
|
pages = []
|
|
for base, page_type, extension in (
|
|
(BLOGS_DIR, "blog", "*.org"),
|
|
(POSTS_DIR, "post", "*.org"),
|
|
(LIMA_DIR, "lima", "*.md"),
|
|
):
|
|
if not base.exists():
|
|
continue
|
|
for path in sorted(base.rglob(extension)):
|
|
if path.name in GENERATED_CONTENT_NAMES or "sync-conflict" in path.name:
|
|
continue
|
|
try:
|
|
page = read_page(path)
|
|
except UnicodeDecodeError:
|
|
continue
|
|
parsed = parse_org_datetime(page.date)
|
|
pages.append(
|
|
{
|
|
"path": page.path,
|
|
"pageType": page_type,
|
|
"title": page.title,
|
|
"slug": page.slug,
|
|
"tags": page.tags,
|
|
"date": page.date,
|
|
"format": page.format,
|
|
"timestamp": parsed.timestamp() if parsed else path.stat().st_mtime,
|
|
}
|
|
)
|
|
return sorted(pages, key=lambda item: item["timestamp"], reverse=True)
|
|
|
|
|
|
def target_path(data: dict[str, Any], existing_path: str | None) -> Path:
|
|
if existing_path:
|
|
return safe_relative_path(existing_path)
|
|
title = str(data.get("title") or "").strip()
|
|
slug = slugify(str(data.get("slug") or title))
|
|
page_type = str(data.get("pageType") or "blog")
|
|
explicit_path = str(data.get("targetPath") or "").strip()
|
|
if explicit_path:
|
|
return safe_target_path(explicit_path, slug, page_type)
|
|
if page_type == "blog":
|
|
dt = parse_org_datetime(str(data.get("date") or "")) or datetime.now()
|
|
folder = BLOGS_DIR / str(dt.year) / f"{dt.month:02d}-{MONTH_NAMES[dt.month - 1]}"
|
|
return folder / f"{slug}.org"
|
|
if page_type == "post":
|
|
raw_section = str(data.get("section") or "").strip()
|
|
section = slugify(raw_section) if raw_section else ""
|
|
folder = POSTS_DIR / section if section else POSTS_DIR
|
|
return folder / f"{slug}.org"
|
|
if page_type == "lima":
|
|
return LIMA_DIR / f"{slug}.md"
|
|
raise ValueError("pageType must be blog, post, or lima.")
|
|
|
|
|
|
def render_markdown(data: dict[str, Any]) -> str:
|
|
content = str(data.get("content") or "").replace("\r\n", "\n").strip()
|
|
title = str(data.get("title") or "").strip()
|
|
if not title:
|
|
raise ValueError("Title is required.")
|
|
if content:
|
|
return content + "\n"
|
|
return f"# {title}\n"
|
|
|
|
|
|
def render_org(data: dict[str, Any], previous: ContentPage | None) -> str:
|
|
title = str(data.get("title") or "").strip()
|
|
if not title:
|
|
raise ValueError("Title is required.")
|
|
slug = slugify(str(data.get("slug") or title))
|
|
tags = normalise_tags(data.get("tags", []))
|
|
content = str(data.get("content") or "").replace("\r\n", "\n").strip()
|
|
date = str(data.get("date") or "").strip()
|
|
if not parse_org_datetime(date):
|
|
date = previous.date if previous else org_date(datetime.now())
|
|
options = str(data.get("options") or (previous.options if previous else "num:nil")).strip()
|
|
comments = bool(data.get("comments", True))
|
|
lines = [
|
|
f"#+TITLE: {title}",
|
|
f"#+OPTIONS: {options}",
|
|
f"#+DATE: {date}",
|
|
f"#+filetags: {''.join(f':{tag}' for tag in tags)}:",
|
|
]
|
|
wip = str(data.get("wip") or (previous.wip if previous else "") or "").strip()
|
|
if wip:
|
|
lines.append(f"#+WIP: {wip}")
|
|
lines.extend(
|
|
[
|
|
f"#+COMMENTS: {'t' if comments else ''}",
|
|
f"#+SLUG: {slug}",
|
|
"",
|
|
content,
|
|
"",
|
|
]
|
|
)
|
|
return "\n".join(lines)
|
|
|
|
|
|
def save_page(data: dict[str, Any]) -> dict[str, Any]:
|
|
existing_path = data.get("path") or None
|
|
target = target_path(data, str(existing_path) if existing_path else None)
|
|
previous = read_page(target) if target.exists() else None
|
|
if not target.parent.exists():
|
|
target.parent.mkdir(parents=True)
|
|
if target.exists() and not existing_path:
|
|
raise ValueError(f"{target.relative_to(ROOT)} already exists.")
|
|
if target.suffix == ".md":
|
|
target.write_text(render_markdown(data), encoding="utf-8")
|
|
else:
|
|
target.write_text(render_org(data, previous), encoding="utf-8")
|
|
return page_to_dict(read_page(target))
|
|
|
|
|
|
def image_dimensions(payload: bytes, ext: str) -> tuple[int, int] | None:
|
|
if ext == ".png" and payload.startswith(b"\x89PNG\r\n\x1a\n") and len(payload) >= 24:
|
|
width, height = struct.unpack(">II", payload[16:24])
|
|
return width, height
|
|
if ext == ".gif" and payload[:6] in {b"GIF87a", b"GIF89a"} and len(payload) >= 10:
|
|
width, height = struct.unpack("<HH", payload[6:10])
|
|
return width, height
|
|
if ext in {".jpg", ".jpeg"} and payload.startswith(b"\xff\xd8"):
|
|
i = 2
|
|
while i + 9 < len(payload):
|
|
if payload[i] != 0xFF:
|
|
i += 1
|
|
continue
|
|
marker = payload[i + 1]
|
|
i += 2
|
|
if marker in {0xD8, 0xD9}:
|
|
continue
|
|
if i + 2 > len(payload):
|
|
break
|
|
size = int.from_bytes(payload[i:i + 2], "big")
|
|
if size < 2:
|
|
break
|
|
if marker in {0xC0, 0xC1, 0xC2, 0xC3, 0xC5, 0xC6, 0xC7, 0xC9, 0xCA, 0xCB, 0xCD, 0xCE, 0xCF}:
|
|
if i + 7 <= len(payload):
|
|
height = int.from_bytes(payload[i + 3:i + 5], "big")
|
|
width = int.from_bytes(payload[i + 5:i + 7], "big")
|
|
return width, height
|
|
break
|
|
i += size
|
|
return None
|
|
|
|
|
|
def relative_asset_path(page_path: str, asset_path: str) -> str:
|
|
page = safe_relative_path(page_path) if page_path else LIMA_DIR / "index.md"
|
|
if page.suffix != ".md" or not page.is_relative_to(LIMA_DIR):
|
|
page = LIMA_DIR / "index.md"
|
|
page_rel = page.relative_to(ROOT).as_posix()
|
|
page_output_dir = posixpath.dirname(page_rel)
|
|
return posixpath.relpath(asset_path, page_output_dir or ".")
|
|
|
|
|
|
def gallery_image_html(filename: str, asset_path: str, page_path: str, payload: bytes, ext: str) -> str:
|
|
absolute_url = f"https://zainezq.com/{asset_path}"
|
|
relative_url = relative_asset_path(page_path, asset_path)
|
|
dims = image_dimensions(payload, ext)
|
|
width, height = dims if dims else (1920, 1080)
|
|
alt = html_escape(filename)
|
|
return (
|
|
f'<a href="{absolute_url}" data-img="{absolute_url}" data-alt="{alt}" '
|
|
f'data-width="{width}" data-height="{height}">'
|
|
f'<img src="{relative_url}" alt="{alt}" style="cursor: zoom-in;"></a>'
|
|
)
|
|
|
|
|
|
def save_upload(filename: str, payload: bytes, page_path: str = "") -> dict[str, str]:
|
|
original = Path(filename or "attachment").name
|
|
ext = Path(original).suffix.lower()
|
|
if ext not in ALLOWED_UPLOAD_EXTENSIONS:
|
|
raise ValueError("Only common image and video files can be uploaded.")
|
|
now = datetime.now()
|
|
target_dir = HZONE_ASSETS_DIR / f"{now.year}" / f"{now.month:02d}"
|
|
target_dir.mkdir(parents=True, exist_ok=True)
|
|
stem = slugify(Path(original).stem)
|
|
target = target_dir / f"{now.strftime('%Y%m%d-%H%M%S')}-{stem}{ext}"
|
|
counter = 2
|
|
while target.exists():
|
|
target = target_dir / f"{now.strftime('%Y%m%d-%H%M%S')}-{stem}-{counter}{ext}"
|
|
counter += 1
|
|
target.write_bytes(payload)
|
|
rel = target.relative_to(ROOT).as_posix()
|
|
absolute_url = f"https://zainezq.com/{rel}"
|
|
relative_url = relative_asset_path(page_path, rel)
|
|
mime = mimetypes.guess_type(target.name)[0] or ""
|
|
if mime.startswith("video/") or ext in {".mp4", ".webm", ".mov"}:
|
|
markdown = f'<video controls src="{relative_url}"></video>'
|
|
else:
|
|
markdown = gallery_image_html(target.name, rel, page_path, payload, ext)
|
|
return {
|
|
"url": absolute_url,
|
|
"relativeUrl": relative_url,
|
|
"path": rel,
|
|
"markdown": markdown,
|
|
"filename": target.name,
|
|
}
|
|
|
|
|
|
def run_build_commands() -> tuple[bool, str, str]:
|
|
venv_python = ROOT / ".venv" / "bin" / "python"
|
|
venv_pip = ROOT / ".venv" / "bin" / "pip"
|
|
commands = [["emacs", "-Q", "--script", "build-site.el"]]
|
|
if not venv_python.exists():
|
|
commands.extend(
|
|
[
|
|
[sys.executable, "-m", "venv", ".venv"],
|
|
[str(venv_pip), "install", "-r", "requirements.txt"],
|
|
]
|
|
)
|
|
commands.append([str(venv_python), "search-index-json.py"])
|
|
combined = []
|
|
ok = True
|
|
for command in commands:
|
|
combined.append(f"$ {' '.join(command)}\n")
|
|
proc = subprocess.run(
|
|
command,
|
|
cwd=ROOT,
|
|
text=True,
|
|
stdout=subprocess.PIPE,
|
|
stderr=subprocess.STDOUT,
|
|
)
|
|
combined.append(proc.stdout)
|
|
if proc.returncode != 0:
|
|
ok = False
|
|
combined.append(f"\nCommand exited with {proc.returncode}.\n")
|
|
break
|
|
message = "Build complete. The site output and search index were regenerated." if ok else "Build failed. Check the log below."
|
|
return ok, message, "".join(combined)
|
|
|
|
|
|
def queue_build(page: dict[str, Any]) -> dict[str, Any]:
|
|
return BUILD_QUEUE.enqueue(page["path"], page["title"]).to_dict()
|
|
|
|
|
|
APP_HTML = r"""<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Org Site Authoring</title>
|
|
<style>
|
|
:root { color-scheme: light; --bg: #f6f3ed; --panel: #fffdf8; --ink: #222; --muted: #64615b; --line: #d8d1c3; --accent: #18615b; --accent-2: #8f3f2b; }
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--ink); }
|
|
button, input, textarea, select { font: inherit; }
|
|
button { border: 1px solid var(--line); background: #fff; color: var(--ink); min-height: 38px; padding: 0 12px; border-radius: 6px; cursor: pointer; }
|
|
button.primary { background: var(--accent); color: white; border-color: var(--accent); }
|
|
button.icon { min-width: 38px; padding: 0 10px; font-weight: 700; }
|
|
.app { min-height: 100vh; display: grid; grid-template-columns: minmax(260px, 360px) 1fr; }
|
|
aside { border-right: 1px solid var(--line); background: #eee8dc; padding: 18px; overflow: auto; max-height: 100vh; }
|
|
main { padding: 20px clamp(18px, 3vw, 42px); overflow: auto; max-height: 100vh; }
|
|
.topbar { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-bottom: 16px; }
|
|
h1 { font-size: 20px; margin: 0; font-weight: 700; }
|
|
h2 { font-size: 15px; margin: 18px 0 8px; color: var(--muted); font-weight: 700; }
|
|
.status { border: 1px solid var(--line); background: var(--panel); padding: 10px 12px; border-radius: 6px; font-size: 14px; margin-bottom: 14px; }
|
|
.status.running { border-color: var(--accent-2); }
|
|
.status.ok { border-color: var(--accent); }
|
|
.status.fail { border-color: #a12a2a; }
|
|
.quick-link { display: inline-block; color: var(--accent); font-size: 13px; margin: -6px 0 14px; }
|
|
.filters { display: grid; gap: 8px; margin-bottom: 14px; }
|
|
.page-list { display: grid; gap: 7px; }
|
|
.page-item { width: 100%; text-align: left; min-height: auto; padding: 9px 10px; background: var(--panel); }
|
|
.page-item strong { display: block; font-size: 14px; margin-bottom: 2px; overflow-wrap: anywhere; }
|
|
.page-item span { display: block; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
|
|
form { display: grid; gap: 14px; }
|
|
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
|
|
.toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 7px; }
|
|
.toolbar input[type="file"] { display: none; }
|
|
label { display: grid; gap: 5px; font-size: 13px; font-weight: 700; color: var(--muted); }
|
|
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); padding: 9px 10px; }
|
|
textarea { min-height: 48vh; resize: vertical; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; line-height: 1.45; font-size: 14px; }
|
|
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
|
|
.hint { color: var(--muted); font-size: 13px; }
|
|
.full { grid-column: 1 / -1; }
|
|
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
|
|
.tag { background: #e5eee9; color: #134d48; padding: 2px 7px; border-radius: 999px; font-size: 12px; }
|
|
.queue-list { display: grid; gap: 8px; margin-bottom: 12px; }
|
|
.queue-item { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); padding: 9px 10px; font-size: 13px; }
|
|
.queue-item strong { display: block; overflow-wrap: anywhere; }
|
|
.queue-item span { color: var(--muted); overflow-wrap: anywhere; }
|
|
pre { white-space: pre-wrap; overflow: auto; max-height: 280px; background: #201f1d; color: #f7f1e4; padding: 12px; border-radius: 6px; font-size: 12px; }
|
|
@media (max-width: 860px) { .app { grid-template-columns: 1fr; } aside, main { max-height: none; } aside { border-right: 0; border-bottom: 1px solid var(--line); } .grid { grid-template-columns: 1fr; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
<aside>
|
|
<div class="topbar">
|
|
<h1>Authoring</h1>
|
|
<button id="newBtn" type="button">New</button>
|
|
</div>
|
|
<a class="quick-link" href="https://author.zainezq.com">author.zainezq.com</a>
|
|
<div id="status" class="status"></div>
|
|
<div class="filters">
|
|
<input id="search" type="search" placeholder="Filter pages" />
|
|
<select id="typeFilter">
|
|
<option value="">Blogs and posts</option>
|
|
<option value="blog">Blogs</option>
|
|
<option value="post">Posts</option>
|
|
<option value="lima">Lima</option>
|
|
</select>
|
|
</div>
|
|
<div id="pages" class="page-list"></div>
|
|
</aside>
|
|
<main>
|
|
<form id="editor">
|
|
<div class="topbar">
|
|
<h1 id="formTitle">New page</h1>
|
|
<span id="pathLabel" class="hint"></span>
|
|
</div>
|
|
<div class="grid">
|
|
<label>Page
|
|
<select name="pageType">
|
|
<option value="blog">Blog</option>
|
|
<option value="post">Post</option>
|
|
<option value="lima">Lima</option>
|
|
</select>
|
|
</label>
|
|
<label>Post section
|
|
<input name="section" placeholder="Optional, for example career" />
|
|
</label>
|
|
<label>Title
|
|
<input name="title" required />
|
|
</label>
|
|
<label>Slug
|
|
<input name="slug" required />
|
|
</label>
|
|
<label>Tags
|
|
<input name="tags" placeholder="life, review" />
|
|
</label>
|
|
<label>Date
|
|
<input name="date" placeholder="<2026-05-07 Thu 12:00>" />
|
|
</label>
|
|
<label class="full">Org file path
|
|
<input name="targetPath" placeholder="blogs/2026/05-may/my-page.org" />
|
|
</label>
|
|
</div>
|
|
<div id="mdToolbar" class="toolbar" hidden>
|
|
<button class="icon" type="button" data-md="bold" title="Bold">B</button>
|
|
<button class="icon" type="button" data-md="italic" title="Italic"><i>I</i></button>
|
|
<button class="icon" type="button" data-md="underline" title="Underline"><u>U</u></button>
|
|
<button type="button" data-md="h1">H1</button>
|
|
<button type="button" data-md="h2">H2</button>
|
|
<button type="button" data-md="h3">H3</button>
|
|
<button type="button" data-md="bullet">List</button>
|
|
<button type="button" data-md="numbered">1. List</button>
|
|
<button type="button" data-md="quote">Quote</button>
|
|
<button type="button" data-md="link">Link</button>
|
|
<button type="button" id="attachBtn">Insert attachment</button>
|
|
<input id="attachInput" type="file" accept="image/*,video/*" />
|
|
</div>
|
|
<label>Content
|
|
<textarea name="content" spellcheck="true"></textarea>
|
|
</label>
|
|
<label><span><input name="comments" type="checkbox" checked style="width:auto" /> Comments enabled</span></label>
|
|
<div class="actions">
|
|
<button class="primary" id="saveBtn" type="submit">Save and build</button>
|
|
<button id="resetBtn" type="button">Reset</button>
|
|
<span id="saveMessage" class="hint"></span>
|
|
</div>
|
|
</form>
|
|
<h2>Build queue</h2>
|
|
<div id="queue" class="queue-list"></div>
|
|
<h2>Latest build log</h2>
|
|
<pre id="buildLog"></pre>
|
|
</main>
|
|
</div>
|
|
<script>
|
|
const state = { pages: [], currentPath: "", build: null, pathManual: false };
|
|
const $ = (selector) => document.querySelector(selector);
|
|
const editor = $("#editor");
|
|
const mdToolbar = $("#mdToolbar");
|
|
const attachInput = $("#attachInput");
|
|
const statusBox = $("#status");
|
|
const pagesBox = $("#pages");
|
|
const buildLog = $("#buildLog");
|
|
const saveMessage = $("#saveMessage");
|
|
|
|
function slugify(value) {
|
|
return value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "untitled";
|
|
}
|
|
|
|
function currentOrgDate() {
|
|
const d = new Date();
|
|
const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
|
const pad = (n) => String(n).padStart(2, "0");
|
|
return `<${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${days[d.getDay()]} ${pad(d.getHours())}:${pad(d.getMinutes())}>`;
|
|
}
|
|
|
|
async function api(path, options = {}) {
|
|
const res = await fetch(path, { headers: { "Content-Type": "application/json" }, ...options });
|
|
const data = await res.json();
|
|
if (!res.ok) throw new Error(data.error || "Request failed");
|
|
return data;
|
|
}
|
|
|
|
function renderStatus() {
|
|
const build = state.build || {};
|
|
const latest = build.current || (build.recent && build.recent[build.recent.length - 1]);
|
|
statusBox.className = "status" + (build.running ? " running" : latest && latest.ok === true ? " ok" : latest && latest.ok === false ? " fail" : "");
|
|
statusBox.textContent = build.message || "Checking build status.";
|
|
buildLog.textContent = build.log || "";
|
|
renderQueue();
|
|
}
|
|
|
|
function renderQueue() {
|
|
const box = $("#queue");
|
|
const build = state.build || {};
|
|
const items = [];
|
|
if (build.current) items.push(build.current);
|
|
(build.pending || []).forEach((job) => items.push(job));
|
|
(build.recent || []).slice().reverse().slice(0, 5).forEach((job) => items.push(job));
|
|
box.innerHTML = "";
|
|
if (!items.length) {
|
|
box.innerHTML = `<div class="queue-item"><span>No queued builds.</span></div>`;
|
|
return;
|
|
}
|
|
items.forEach((job) => {
|
|
const row = document.createElement("div");
|
|
row.className = "queue-item";
|
|
row.innerHTML = `<strong>#${job.id} ${html(job.status)} · ${html(job.title)}</strong><span>${html(job.path)} · ${html(job.message)}</span>`;
|
|
box.appendChild(row);
|
|
});
|
|
}
|
|
|
|
function renderPages() {
|
|
const query = $("#search").value.toLowerCase();
|
|
const type = $("#typeFilter").value;
|
|
pagesBox.innerHTML = "";
|
|
state.pages
|
|
.filter((page) => (!type || page.pageType === type))
|
|
.filter((page) => `${page.title} ${page.path} ${page.tags.join(" ")}`.toLowerCase().includes(query))
|
|
.slice(0, 120)
|
|
.forEach((page) => {
|
|
const btn = document.createElement("button");
|
|
btn.type = "button";
|
|
btn.className = "page-item";
|
|
btn.innerHTML = `<strong>${html(page.title)}</strong><span>${html(page.path)}</span><span class="tags">${page.tags.map((tag) => `<span class="tag">${html(tag)}</span>`).join("")}</span>`;
|
|
btn.onclick = () => loadPage(page.path);
|
|
pagesBox.appendChild(btn);
|
|
});
|
|
renderStatus();
|
|
}
|
|
|
|
function html(value) {
|
|
return String(value).replace(/[&<>"']/g, (char) => ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[char]));
|
|
}
|
|
|
|
function setForm(page) {
|
|
state.currentPath = page.path || "";
|
|
state.pathManual = Boolean(page.path);
|
|
editor.pageType.value = page.pageType || "blog";
|
|
editor.section.value = "";
|
|
editor.targetPath.value = page.path || "";
|
|
editor.title.value = page.title || "";
|
|
editor.slug.value = page.slug || slugify(page.title || "");
|
|
editor.tags.value = (page.tags || []).join(", ");
|
|
editor.date.value = page.date || currentOrgDate();
|
|
editor.content.value = page.content || "";
|
|
editor.comments.checked = page.comments !== false;
|
|
$("#formTitle").textContent = state.currentPath ? "Edit page" : "New page";
|
|
$("#pathLabel").textContent = state.currentPath;
|
|
editor.targetPath.disabled = Boolean(state.currentPath);
|
|
updateEditorMode();
|
|
updateSuggestedPath();
|
|
saveMessage.textContent = "";
|
|
}
|
|
|
|
async function loadPage(path) {
|
|
const page = await api(`/api/page?path=${encodeURIComponent(path)}`);
|
|
setForm(page);
|
|
}
|
|
|
|
async function refreshPages() {
|
|
state.pages = await api("/api/pages");
|
|
renderPages();
|
|
}
|
|
|
|
async function refreshBuild() {
|
|
state.build = await api("/api/build");
|
|
renderStatus();
|
|
await refreshPages();
|
|
}
|
|
|
|
editor.title.addEventListener("input", () => {
|
|
if (!state.currentPath) {
|
|
editor.slug.value = slugify(editor.title.value);
|
|
updateSuggestedPath();
|
|
}
|
|
});
|
|
editor.slug.addEventListener("input", updateSuggestedPath);
|
|
editor.pageType.addEventListener("change", () => {
|
|
if (!state.currentPath) {
|
|
state.pathManual = false;
|
|
editor.targetPath.value = "";
|
|
}
|
|
updateEditorMode();
|
|
updateSuggestedPath();
|
|
});
|
|
editor.section.addEventListener("input", updateSuggestedPath);
|
|
editor.date.addEventListener("input", updateSuggestedPath);
|
|
editor.targetPath.addEventListener("input", () => { state.pathManual = true; });
|
|
mdToolbar.querySelectorAll("[data-md]").forEach((button) => {
|
|
button.addEventListener("click", () => applyMarkdown(button.dataset.md));
|
|
});
|
|
$("#attachBtn").addEventListener("click", () => attachInput.click());
|
|
attachInput.addEventListener("change", uploadAttachment);
|
|
$("#search").addEventListener("input", renderPages);
|
|
$("#typeFilter").addEventListener("change", renderPages);
|
|
$("#newBtn").addEventListener("click", () => setForm({ pageType: "blog", date: currentOrgDate(), comments: true }));
|
|
$("#resetBtn").addEventListener("click", () => state.currentPath ? loadPage(state.currentPath) : setForm({ pageType: "blog", date: currentOrgDate(), comments: true }));
|
|
editor.addEventListener("submit", async (event) => {
|
|
event.preventDefault();
|
|
saveMessage.textContent = "Saving and queueing build.";
|
|
const payload = Object.fromEntries(new FormData(editor).entries());
|
|
payload.path = state.currentPath;
|
|
payload.comments = editor.comments.checked;
|
|
try {
|
|
const saved = await api("/api/page", { method: "POST", body: JSON.stringify(payload) });
|
|
setForm(saved);
|
|
saveMessage.textContent = "Saved. Build queued.";
|
|
await refreshBuild();
|
|
} catch (err) {
|
|
saveMessage.textContent = err.message;
|
|
}
|
|
});
|
|
|
|
function updateSuggestedPath() {
|
|
if (state.currentPath || state.pathManual) return;
|
|
const slug = slugify(editor.slug.value || editor.title.value);
|
|
if (editor.pageType.value === "lima") {
|
|
editor.targetPath.value = `lima/${slug}.md`;
|
|
return;
|
|
}
|
|
if (editor.pageType.value === "post") {
|
|
const section = slugify(editor.section.value || "");
|
|
editor.targetPath.value = section === "untitled" ? `posts/${slug}.org` : `posts/${section}/${slug}.org`;
|
|
return;
|
|
}
|
|
const match = editor.date.value.match(/<(\d{4})-(\d{2})-/);
|
|
const year = match ? match[1] : String(new Date().getFullYear());
|
|
const month = match ? Number(match[2]) : new Date().getMonth() + 1;
|
|
const months = ["january","february","march","april","may","june","july","august","september","october","november","december"];
|
|
editor.targetPath.value = `blogs/${year}/${String(month).padStart(2, "0")}-${months[month - 1]}/${slug}.org`;
|
|
}
|
|
|
|
function updateEditorMode() {
|
|
const isLima = editor.pageType.value === "lima";
|
|
mdToolbar.hidden = !isLima;
|
|
editor.tags.closest("label").hidden = isLima;
|
|
editor.date.closest("label").hidden = isLima;
|
|
editor.comments.closest("label").hidden = isLima;
|
|
editor.section.closest("label").hidden = editor.pageType.value !== "post";
|
|
const pathLabel = editor.targetPath.closest("label").firstChild;
|
|
if (pathLabel) pathLabel.textContent = isLima ? "Markdown file path" : "Org file path";
|
|
editor.targetPath.placeholder = isLima ? "lima/family-update.md" : "blogs/2026/05-may/my-page.org";
|
|
}
|
|
|
|
function selectedText() {
|
|
const area = editor.content;
|
|
return {
|
|
start: area.selectionStart,
|
|
end: area.selectionEnd,
|
|
text: area.value.slice(area.selectionStart, area.selectionEnd),
|
|
};
|
|
}
|
|
|
|
function replaceSelection(value, selectStart = null, selectEnd = null) {
|
|
const area = editor.content;
|
|
const { start, end } = selectedText();
|
|
area.setRangeText(value, start, end, "end");
|
|
area.focus();
|
|
if (selectStart !== null && selectEnd !== null) {
|
|
area.setSelectionRange(start + selectStart, start + selectEnd);
|
|
}
|
|
}
|
|
|
|
function linePrefix(prefix, fallback) {
|
|
const area = editor.content;
|
|
const { start, end, text } = selectedText();
|
|
const value = text || fallback;
|
|
const replacement = value.split("\n").map((line) => `${prefix}${line || fallback}`).join("\n");
|
|
area.setRangeText(replacement, start, end, "end");
|
|
area.focus();
|
|
}
|
|
|
|
function applyMarkdown(action) {
|
|
const { text } = selectedText();
|
|
const sample = text || "text";
|
|
if (action === "bold") replaceSelection(`**${sample}**`, 2, 2 + sample.length);
|
|
if (action === "italic") replaceSelection(`*${sample}*`, 1, 1 + sample.length);
|
|
if (action === "underline") replaceSelection(`<u>${sample}</u>`, 3, 3 + sample.length);
|
|
if (action === "h1") linePrefix("# ", "Heading");
|
|
if (action === "h2") linePrefix("## ", "Heading");
|
|
if (action === "h3") linePrefix("### ", "Heading");
|
|
if (action === "bullet") linePrefix("- ", "List item");
|
|
if (action === "numbered") linePrefix("1. ", "List item");
|
|
if (action === "quote") linePrefix("> ", "Quote");
|
|
if (action === "link") {
|
|
const label = sample === "text" ? "link text" : sample;
|
|
replaceSelection(`[${label}](https://)`, 1, 1 + label.length);
|
|
}
|
|
}
|
|
|
|
async function uploadAttachment() {
|
|
const file = attachInput.files[0];
|
|
if (!file) return;
|
|
saveMessage.textContent = "Uploading attachment.";
|
|
const body = new FormData();
|
|
body.append("attachment", file);
|
|
body.append("pagePath", state.currentPath || editor.targetPath.value || "lima/index.md");
|
|
try {
|
|
const res = await fetch("/api/upload", { method: "POST", body });
|
|
const data = await res.json();
|
|
if (!res.ok) throw new Error(data.error || "Upload failed");
|
|
replaceSelection(`\n${data.markdown}\n`);
|
|
saveMessage.textContent = "Attachment inserted.";
|
|
} catch (err) {
|
|
saveMessage.textContent = err.message;
|
|
} finally {
|
|
attachInput.value = "";
|
|
}
|
|
}
|
|
|
|
setForm({ pageType: "blog", date: currentOrgDate(), comments: true });
|
|
refreshPages();
|
|
refreshBuild();
|
|
setInterval(refreshBuild, 2500);
|
|
</script>
|
|
</body>
|
|
</html>
|
|
"""
|
|
|
|
|
|
class Handler(BaseHTTPRequestHandler):
|
|
server_version = "OrgAuthoring/1.0"
|
|
|
|
def log_message(self, fmt: str, *args: Any) -> None:
|
|
sys.stderr.write("%s - %s\n" % (formatdate(time.time()), fmt % args))
|
|
|
|
def send_json(self, data: Any, status: HTTPStatus = HTTPStatus.OK) -> None:
|
|
body = json.dumps(data).encode("utf-8")
|
|
self.send_response(status)
|
|
self.send_header("Content-Type", "application/json; charset=utf-8")
|
|
self.send_header("Content-Length", str(len(body)))
|
|
self.send_header("Cache-Control", "no-store")
|
|
self.end_headers()
|
|
self.wfile.write(body)
|
|
|
|
def do_GET(self) -> None:
|
|
parsed = urlparse(self.path)
|
|
if parsed.path == "/":
|
|
body = APP_HTML.encode("utf-8")
|
|
self.send_response(HTTPStatus.OK)
|
|
self.send_header("Content-Type", "text/html; charset=utf-8")
|
|
self.send_header("Content-Length", str(len(body)))
|
|
self.end_headers()
|
|
self.wfile.write(body)
|
|
return
|
|
if parsed.path == "/api/pages":
|
|
self.send_json(list_pages())
|
|
return
|
|
if parsed.path == "/api/page":
|
|
query = parse_qs(parsed.query)
|
|
try:
|
|
path = safe_relative_path(query.get("path", [""])[0])
|
|
self.send_json(page_to_dict(read_page(path)))
|
|
except Exception as exc:
|
|
self.send_json({"error": str(exc)}, HTTPStatus.BAD_REQUEST)
|
|
return
|
|
if parsed.path == "/api/build":
|
|
self.send_json(BUILD_QUEUE.snapshot())
|
|
return
|
|
self.send_error(HTTPStatus.NOT_FOUND)
|
|
|
|
def do_POST(self) -> None:
|
|
if self.path == "/api/upload":
|
|
try:
|
|
form = cgi.FieldStorage(
|
|
fp=self.rfile,
|
|
headers=self.headers,
|
|
environ={
|
|
"REQUEST_METHOD": "POST",
|
|
"CONTENT_TYPE": self.headers.get("Content-Type", ""),
|
|
},
|
|
)
|
|
field = form["attachment"] if "attachment" in form else None
|
|
if field is None or not getattr(field, "filename", ""):
|
|
raise ValueError("No attachment was uploaded.")
|
|
payload = field.file.read()
|
|
if not payload:
|
|
raise ValueError("Attachment is empty.")
|
|
page_path = ""
|
|
if "pagePath" in form:
|
|
page_path = str(form["pagePath"].value or "")
|
|
self.send_json(save_upload(field.filename, payload, page_path))
|
|
except Exception as exc:
|
|
self.send_json({"error": str(exc)}, HTTPStatus.BAD_REQUEST)
|
|
return
|
|
if self.path != "/api/page":
|
|
self.send_error(HTTPStatus.NOT_FOUND)
|
|
return
|
|
try:
|
|
length = int(self.headers.get("Content-Length", "0"))
|
|
data = json.loads(self.rfile.read(length).decode("utf-8"))
|
|
saved = save_page(data)
|
|
saved["queuedBuild"] = queue_build(saved)
|
|
self.send_json(saved)
|
|
except Exception as exc:
|
|
self.send_json({"error": str(exc)}, HTTPStatus.BAD_REQUEST)
|
|
|
|
|
|
def main() -> None:
|
|
port = int(os.environ.get("AUTHOR_PORT", "8765"))
|
|
server = ThreadingHTTPServer(("127.0.0.1", port), Handler)
|
|
print(f"Authoring UI running at http://127.0.0.1:{port}")
|
|
print("Press Ctrl-C to stop.")
|
|
try:
|
|
server.serve_forever()
|
|
except KeyboardInterrupt:
|
|
pass
|
|
|
|
|
|
if __name__ == "__main__":
|
|
main()
|