关于 vibecoding
一个用来存档「网页实验」的博客。每个想法做成一个自包含的 HTML 页面，扔进来，就是一篇。
这是什么
平时用 AI 一起 vibe coding，会敲出很多一次性、实验性的小页面：一个动效、一个小工具、一个可视化。它们值得被留下来——所以有了这个站。没有后端、没有数据库、没有构建步骤，整个站就是一堆静态文件加一个发布脚本。
- 首页是所有页面的卡片墙，带实时缩略图（iframe 缩放渲染，不是截图）
- 每个页面有独立详情页
post.html?p=<slug>，嵌入式打开，也可以新窗口全屏玩 - 支持标签筛选和全文搜索（标题 / 摘要 / 标签）
怎么发布
在服务器站点目录（/var/www/vibecoding）里，用自带的 publish.py：
# 发布一个新页面
python3 publish.py new ~/my-page.html \
--title "会呼吸的渐变球" \
--tags 动效,Canvas \
--summary "一个跟着鼠标跑的流体渐变动画"
# 重建索引（手动往 posts/ 里放过页面后用）
python3 publish.py scan
# 看看都发了什么
python3 publish.py list发布后文件落在 posts/<slug>/index.html，元信息在旁边的 meta.json，访问地址是 https://datastock.work/post.html?p=<slug>。 slugs 默认从标题生成（中文标题会用日期兜底），也可以用 --slug 指定。
meta.json 字段
| 字段 | 必填 | 说明 |
|---|---|---|
title | 是 | 页面标题 |
slug | 是 | 目录名 / URL 标识，需唯一 |
date | 是 | 发布日期 YYYY-MM-DD |
tags | 否 | 标签数组，如 ["动效","Canvas"] |
summary | 否 | 一句话介绍，显示在卡片和详情页 |
技术说明
- 纯静态：HTML + CSS + 原生 JS，零依赖、零 CDN、零框架，双击 index.html 也能跑（搜索/筛选需要 HTTP 环境）
- 暗色主题，毛玻璃顶栏，卡片缩略图懒加载（IntersectionObserver）
- iframe 沙箱化缩略图（
sandbox="allow-scripts"），不影响本站安全 - 由 Caddy 直接发静态文件，发布即生效，无需重启任何服务
- 源码在服务器
/var/www/vibecoding，本地工作副本在~/WorkBuddy/.../vibecoding/blog
FAQ
页面互相引用怎么办？每个页面是独立的，相对路径以 /posts/<slug>/ 为根；要引用别的页面请用绝对路径。
可以发非 HTML 吗？目前只收自包含 HTML（可内联 CSS/JS，可引 CDN）。图片等素材放页面自己的目录里即可。