566 lines
12 KiB
HTML
566 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
<title>{{ title }} — Xcode</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
|
|
<style>
|
|
html { background: #1e1e1e; }
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
:root {
|
|
--bg: #1e1e1e;
|
|
--sidebar-bg: #252526;
|
|
--toolbar-bg: #3c3c3c;
|
|
--tab-bg: #2d2d2d;
|
|
--tab-active: #1e1e1e;
|
|
--text: #d4d4d4;
|
|
--muted: #808080;
|
|
--border: #3e3e42;
|
|
--purple: #c586c0;
|
|
--blue: #569cd6;
|
|
--cyan: #4ec9b0;
|
|
--green: #6a9955;
|
|
--red: #f44747;
|
|
--orange: #ce9178;
|
|
--yellow: #dcdcaa;
|
|
--pink: #c586c0;
|
|
}
|
|
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: "JetBrains Mono", "SF Mono", "Menlo", "Monaco", monospace;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* App chrome */
|
|
.xcode-app {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* Title bar */
|
|
.titlebar {
|
|
height: 38px;
|
|
background: var(--toolbar-bg);
|
|
border-bottom: 1px solid #1a1a1a;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 0 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.traffic-lights {
|
|
display: flex;
|
|
gap: 7px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tl {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.tl-red { background: #ff5f57; }
|
|
.tl-yellow { background: #febc2e; }
|
|
.tl-green { background: #28c840; }
|
|
|
|
.titlebar-title {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.titlebar-run {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.run-btn {
|
|
width: 26px;
|
|
height: 18px;
|
|
background: rgba(255,255,255,0.08);
|
|
border-radius: 3px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 10px;
|
|
color: var(--muted);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
}
|
|
|
|
/* Main layout */
|
|
.layout {
|
|
flex: 1;
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Sidebar */
|
|
.sidebar {
|
|
width: 220px;
|
|
background: var(--sidebar-bg);
|
|
border-right: 1px solid var(--border);
|
|
flex-shrink: 0;
|
|
overflow-y: auto;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.sidebar-section {
|
|
padding: 6px 0;
|
|
}
|
|
|
|
.sidebar-section-header {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--muted);
|
|
padding: 4px 12px 4px;
|
|
}
|
|
|
|
.sidebar-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 3px 12px;
|
|
font-size: 12px;
|
|
color: var(--text);
|
|
cursor: default;
|
|
}
|
|
|
|
.sidebar-item.active {
|
|
background: #094771;
|
|
color: #fff;
|
|
}
|
|
|
|
.sidebar-item-icon {
|
|
font-size: 10px;
|
|
width: 14px;
|
|
text-align: center;
|
|
color: var(--blue);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sidebar-item-icon.swift { color: var(--orange); }
|
|
.sidebar-item-icon.md { color: var(--cyan); }
|
|
.sidebar-item-icon.folder { color: var(--yellow); }
|
|
|
|
/* Editor area */
|
|
.editor-area {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Tab bar */
|
|
.tab-bar {
|
|
height: 34px;
|
|
background: var(--tab-bg);
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex;
|
|
align-items: stretch;
|
|
overflow-x: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tab {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 0 14px;
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
border-right: 1px solid var(--border);
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tab.active {
|
|
background: var(--tab-active);
|
|
color: var(--text);
|
|
position: relative;
|
|
}
|
|
|
|
.tab.active::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: var(--blue);
|
|
}
|
|
|
|
.tab-dot {
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: #febc2e;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Gutter + content */
|
|
.editor-body {
|
|
flex: 1;
|
|
display: flex;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Line numbers */
|
|
.line-gutter {
|
|
background: var(--sidebar-bg);
|
|
border-right: 1px solid var(--border);
|
|
padding: 16px 12px 16px 8px;
|
|
text-align: right;
|
|
color: #4a4a4a;
|
|
font-size: 11px;
|
|
line-height: 1.8;
|
|
user-select: none;
|
|
flex-shrink: 0;
|
|
min-width: 44px;
|
|
}
|
|
|
|
/* Actual content */
|
|
.editor-content {
|
|
flex: 1;
|
|
padding: 16px 28px 60px 20px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
/* Post meta as a comment block */
|
|
.meta-comment {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.comment-line {
|
|
color: var(--green);
|
|
line-height: 1.8;
|
|
}
|
|
|
|
/* Post title as a string literal */
|
|
.code-title {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.keyword { color: var(--purple); }
|
|
.type { color: var(--cyan); }
|
|
.string { color: var(--orange); }
|
|
.number { color: #b5cea8; }
|
|
.func { color: var(--yellow); }
|
|
|
|
/* Content area — rendered markdown as if it's code documentation */
|
|
.content-area {
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.content-area h1 {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: var(--blue);
|
|
margin-top: 28px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.content-area h1::before {
|
|
content: "// MARK: - ";
|
|
color: var(--green);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.content-area h2 {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: var(--cyan);
|
|
margin-top: 22px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.content-area h2::before {
|
|
content: "/// ";
|
|
color: var(--green);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.content-area h3 {
|
|
font-size: 13px;
|
|
color: var(--yellow);
|
|
margin-top: 18px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.content-area h4, .content-area h5, .content-area h6 {
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
margin-top: 14px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.content-area p {
|
|
color: var(--text);
|
|
margin-bottom: 12px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.content-area a {
|
|
color: var(--blue);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.content-area code {
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 12px;
|
|
background: rgba(255,255,255,0.06);
|
|
color: var(--orange);
|
|
padding: 1px 5px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.content-area pre {
|
|
background: #141414;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
padding: 14px 16px;
|
|
margin: 14px 0;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.content-area pre code {
|
|
background: none;
|
|
color: var(--text);
|
|
padding: 0;
|
|
}
|
|
|
|
.content-area blockquote {
|
|
border-left: 3px solid var(--purple);
|
|
padding: 10px 16px;
|
|
margin: 14px 0;
|
|
background: rgba(197,134,192,0.06);
|
|
}
|
|
|
|
.content-area blockquote p {
|
|
color: var(--purple);
|
|
}
|
|
|
|
.content-area ul {
|
|
margin: 8px 0 14px 0;
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.content-area ul li {
|
|
padding-left: 18px;
|
|
margin-bottom: 4px;
|
|
color: var(--text);
|
|
position: relative;
|
|
}
|
|
|
|
.content-area ul li::before {
|
|
content: "-";
|
|
position: absolute;
|
|
left: 4px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.content-area ol {
|
|
margin: 8px 0 14px 22px;
|
|
color: var(--text);
|
|
}
|
|
|
|
.content-area li {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.content-area table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 14px 0;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.content-area th {
|
|
background: rgba(255,255,255,0.05);
|
|
padding: 7px 12px;
|
|
text-align: left;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
color: var(--cyan);
|
|
border-bottom: 1px solid var(--border);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.content-area td {
|
|
padding: 7px 12px;
|
|
border-bottom: 1px solid rgba(62,62,66,0.5);
|
|
}
|
|
|
|
.content-area img {
|
|
max-width: 100%;
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.content-area hr {
|
|
border: none;
|
|
border-top: 1px solid var(--border);
|
|
margin: 20px 0;
|
|
}
|
|
|
|
/* Status bar */
|
|
.status-bar {
|
|
height: 22px;
|
|
background: #007acc;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 12px;
|
|
gap: 16px;
|
|
font-size: 11px;
|
|
color: rgba(255,255,255,0.9);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.sidebar { display: none; }
|
|
.line-gutter { display: none; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a href="/{{ preview_query }}" style="position:fixed;top:calc(1rem + env(safe-area-inset-top, 0px));left:calc(1rem + env(safe-area-inset-left, 0px));z-index:9999;font-family:system-ui,-apple-system,sans-serif;font-size:0.8rem;padding:0.5rem 0.9rem;background:rgba(255,255,255,0.95);color:#000;text-decoration:none;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,0.15);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(0,0,0,0.1);transition:transform 0.2s">← back</a>
|
|
|
|
<div class="xcode-app">
|
|
|
|
<div class="titlebar">
|
|
<div class="traffic-lights">
|
|
<div class="tl tl-red"></div>
|
|
<div class="tl tl-yellow"></div>
|
|
<div class="tl tl-green"></div>
|
|
</div>
|
|
<div class="titlebar-title">{{ config.site.name }} — {{ title }}</div>
|
|
<div class="titlebar-run">
|
|
<div class="run-btn">▶</div>
|
|
<div class="run-btn">■</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layout">
|
|
|
|
<nav class="sidebar">
|
|
<div class="sidebar-section">
|
|
<div class="sidebar-section-header">Project</div>
|
|
<div class="sidebar-item">
|
|
<span class="sidebar-item-icon folder">▶</span>
|
|
<span>{{ config.site.name }}</span>
|
|
</div>
|
|
<div class="sidebar-item" style="padding-left: 28px;">
|
|
<span class="sidebar-item-icon folder">▶</span>
|
|
<span>Posts</span>
|
|
</div>
|
|
<div class="sidebar-item active" style="padding-left: 44px;">
|
|
<span class="sidebar-item-icon md">M</span>
|
|
<span>{{ title | truncate(18) }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="sidebar-section">
|
|
<div class="sidebar-section-header">Meta</div>
|
|
<div class="sidebar-item">
|
|
<span class="sidebar-item-icon">A</span>
|
|
<span>{{ config.site.author }}</span>
|
|
</div>
|
|
<div class="sidebar-item">
|
|
<span class="sidebar-item-icon">D</span>
|
|
<span>{{ published_date }}</span>
|
|
</div>
|
|
<div class="sidebar-item">
|
|
<span class="sidebar-item-icon">T</span>
|
|
<span>{{ reading_time }}</span>
|
|
</div>
|
|
{% if taxonomy.tags %}
|
|
{% for tag in taxonomy.tags %}
|
|
<div class="sidebar-item" style="padding-left: 24px;">
|
|
<span class="sidebar-item-icon" style="color: var(--pink);">#</span>
|
|
<span>{{ tag }}</span>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="editor-area">
|
|
|
|
<div class="tab-bar">
|
|
<div class="tab active">
|
|
<div class="tab-dot"></div>
|
|
<span>{{ title | truncate(24) }}.md</span>
|
|
</div>
|
|
<div class="tab">README.md</div>
|
|
<div class="tab">Package.swift</div>
|
|
</div>
|
|
|
|
<div class="editor-body">
|
|
|
|
<div class="line-gutter">
|
|
{% for i in range(1, 80) %}{{ i }}<br>{% endfor %}
|
|
</div>
|
|
|
|
<div class="editor-content">
|
|
|
|
<div class="meta-comment">
|
|
<div class="comment-line">// ============================================================</div>
|
|
<div class="comment-line">// {{ title }}</div>
|
|
<div class="comment-line">// Author: {{ config.site.author }}</div>
|
|
<div class="comment-line">// Date: {{ published_date }}</div>
|
|
{% if updated_date %}<div class="comment-line">// Updated: {{ updated_date }}</div>{% endif %}
|
|
<div class="comment-line">// Read: {{ reading_time }}</div>
|
|
{% if taxonomy.tags %}<div class="comment-line">// Tags: {% for tag in taxonomy.tags %}{{ tag }}{% if not loop.last %}, {% endif %}{% endfor %}</div>{% endif %}
|
|
<div class="comment-line">// ============================================================</div>
|
|
</div>
|
|
|
|
<div class="code-title">
|
|
<span class="keyword">let</span> title: <span class="type">String</span> = <span class="string">"{{ title }}"</span>
|
|
</div>
|
|
|
|
<div class="content-area">
|
|
{{ content | safe }}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="status-bar">
|
|
<span>{{ config.site.name }}</span>
|
|
<span>Ln 1, Col 1</span>
|
|
<span>UTF-8</span>
|
|
<span>Markdown</span>
|
|
<span>{{ published_date }}</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|