综合项目文件清单

# 项目协作规则

- 默认使用简体中文和 UTF-8。
- 这是静态 Nginx 教学项目，不新增 Node.js、Python、数据库或前端构建依赖。
- 默认只修改 `site/index.html`、`site/styles.css`、`Dockerfile`、`compose.yaml`、`.dockerignore`、`verify.sh` 和本 README。
- 保持 Compose 服务名 `web`、容器名 `linux-learning-notes-web`、主机端口 `8080` 和容器端口 `80`。
- 不写入密码、令牌、Cookie、真实邮箱或其他个人信息。
- 修改前先读取相关文件；修改后至少运行 `./verify.sh` 和 `docker compose config`。
- `docker compose build/up/down` 会改变工作区外的 Docker 状态，执行前明确说明影响并取得用户授权。
- 不运行 `docker system prune`、`docker volume prune` 或删除其他项目的镜像、容器、网络、卷。
- 分别报告静态检查、容器运行、HTTP 访问和浏览器可见结果；前一步成功不能代替后一步。

FROM nginx:alpine

COPY site/ /usr/share/nginx/html/

HEALTHCHECK --interval=10s --timeout=3s --start-period=5s --retries=3 \
  CMD wget -qO- http://127.0.0.1/ >/dev/null || exit 1

name: linux-learning-notes

services:
  web:
    build:
      context: .
    container_name: linux-learning-notes-web
    ports:
      - "8080:80"
    restart: "no"
    security_opt:
      - no-new-privileges:true

.git
.gitignore
*.log
.env
.env.*
README.md
AGENTS.md
verify.sh

#!/usr/bin/env bash
set -euo pipefail

project_dir="$(cd "$(dirname "$0")" && pwd)"
cd "$project_dir"

for file in Dockerfile compose.yaml site/index.html site/styles.css; do
  if [ ! -s "$file" ]; then
    printf 'missing_or_empty=%s\n' "$file" >&2
    exit 1
  fi
done

grep -q 'Linux 学习笔记' site/index.html
grep -q '8080:80' compose.yaml
grep -q 'HEALTHCHECK' Dockerfile

printf 'static_status=ok\n'

if [ "$#" -gt 0 ] && [ "$1" = "--running" ]; then
  body="$(curl --fail --silent --show-error http://localhost:8080/)"
  printf '%s' "$body" | grep -q 'Linux 学习笔记'
  printf 'http_status=ok\n'
fi

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Linux 学习笔记</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main class="shell">
      <p class="eyebrow">LEARNING LINUX · WSL 2 · DOCKER · CODEX</p>
      <h1>Linux 学习笔记</h1>
      <p class="lead">
        这是我的第一个容器化学习项目。页面由 Nginx 提供，通过 Docker
        Compose 映射到本机 8080 端口。
      </p>

      <section class="grid" aria-label="学习成果">
        <article>
          <span>01</span>
          <h2>看懂环境</h2>
          <p>能区分 Windows、WSL 2、Ubuntu、容器和 Codex 的职责。</p>
        </article>
        <article>
          <span>02</span>
          <h2>验证结果</h2>
          <p>会检查退出码、日志、健康状态和真实 HTTP 响应。</p>
        </article>
        <article>
          <span>03</span>
          <h2>安全协作</h2>
          <p>先限定范围，再让 Codex 修改；最后审阅差异并亲自验收。</p>
        </article>
      </section>

      <footer>
        <code>docker compose up -d</code>
        <span>→</span>
        <code>http://localhost:8080</code>
      </footer>
    </main>
  </body>
</html>

:root {
  color-scheme: dark;
  font-family: Inter, "Noto Sans SC", "PingFang SC", system-ui, sans-serif;
  background: #07111f;
  color: #e9f2ff;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 10% 10%, #153860 0, transparent 32rem),
    radial-gradient(circle at 90% 90%, #124e46 0, transparent 30rem),
    #07111f;
}

.shell {
  width: min(1080px, calc(100% - 32px));
  padding: clamp(32px, 7vw, 80px);
  border: 1px solid #ffffff24;
  border-radius: 28px;
  background: #0c1928d9;
  box-shadow: 0 28px 90px #0008;
}

.eyebrow {
  color: #72e1ca;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
}

h1 {
  margin: 12px 0;
  font-size: clamp(2.5rem, 8vw, 5.6rem);
  line-height: 1;
}

.lead {
  max-width: 700px;
  color: #b8c9db;
  font-size: 1.1rem;
  line-height: 1.8;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
}

article {
  padding: 24px;
  border: 1px solid #ffffff1f;
  border-radius: 18px;
  background: #ffffff09;
}

article span {
  color: #72e1ca;
  font-family: ui-monospace, monospace;
}

article h2 {
  margin: 20px 0 8px;
}

article p {
  margin: 0;
  color: #b8c9db;
  line-height: 1.65;
}

footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 42px;
  color: #8da4ba;
}

code {
  padding: 7px 10px;
  border-radius: 8px;
  background: #02070d;
  color: #a8f3e2;
}

@media (max-width: 760px) {
  .grid {
    grid-template-columns: 1fr;
  }
}