njk-tool 0.0.1

package/dist/bundle/src/base.style

@@ -0,0 +1,347 @@
+/* Components.css */
+
+/* END-Components.css */
+
+/* TOC.css */
+/* 基础样式 */
+.article-toc {
+  position: fixed;
+  top: 50px;
+  right: 2rem;
+  max-height: calc(100vh - 4rem);
+  margin-left: 2rem;
+  font-size: 0.95rem;
+}
+
+/* 隐藏 checkbox */
+.toc-toggle-checkbox {
+  position: absolute;
+  opacity: 0;
+  height: 0;
+  width: 0;
+}
+
+/* 切换按钮样式 */
+.toc-toggle-label {
+  display: flex;
+  align-items: center;
+  background: #f8f9fa;
+  padding: 0.3rem 0.6rem;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-bottom: 0.5rem;
+}
+
+.toc-icon {
+  font-size: 1.2rem;
+  margin-right: 0.3rem;
+}
+
+/* 目录导航 */
+.toc-nav {
+  padding: 0.5rem;
+  background: white;
+  border-radius: 6px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.toc-section {
+  margin-bottom: 0.8rem;
+}
+
+.toc-heading {
+  font-size: 1rem;
+  margin: 0 0 0.4rem 0;
+  padding-bottom: 0.2rem;
+  border-bottom: 1px solid #eee;
+}
+
+.toc-list {
+  list-style: none;
+  padding-left: 0.4rem;
+  margin: 0;
+}
+
+.toc-item {
+  margin: 0.2rem 0;
+}
+
+.toc-link {
+  display: block;
+  padding: 0.2rem 0.4rem;
+  color: #495057;
+  text-decoration: none;
+  border-radius: 3px;
+  transition: all 0.2s;
+}
+
+.toc-link:hover {
+  background: #f0f0f0;
+  color: #007bff;
+}
+
+/* 层级缩进 */
+.toc-link[data-level="2"] {
+  padding-left: 0.8rem;
+}
+
+.toc-link[data-level="3"] {
+  padding-left: 1.6rem;
+}
+
+/* 激活状态 */
+.toc-link.active {
+  background: #e7f5ff;
+  color: #0066cc;
+  font-weight: 500;
+}
+
+/* 折叠功能实现 */
+.toc-toggle-checkbox:not(:checked) ~ .toc-nav {
+  display: none;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .article-toc {
+    margin-left: 1rem;
+    font-size: 0.9rem;
+  }
+}
+/* END-TOC.css */
+
+/* Text.css */
+
+/* END-Text.css */
+
+/* Title.css */
+.title-base {
+  --align: left;
+  --text-color: black;
+  --font-weight: 800;
+  --font-size: 18px;
+  color: var(--text-color);
+  text-align: var(--align);
+  font-weight: var(--font-weight);
+  font-size: var(--font-size);
+  padding: 8px 30px;
+}
+
+h1 {
+  --align: left;
+  --text-color: #606266;
+  --margin: 36px 0 20px;
+  position: relative;
+  font-size: 35.2px;
+  padding: 0 0 4.8px;
+  margin: var(--margin);
+  color: var(--text-color);
+  text-align: var(--align);
+}
+
+h2 {
+  --align: left;
+  --text-color: #606266;
+  --margin: 36px 0 20px;
+  position: relative;
+  font-size: 26.4px;
+  padding: 0 0 4.8px;
+  margin: var(--margin);
+  color: var(--text-color);
+  text-align: var(--align);
+}
+
+h2::before,
+h1::before {
+  display: none;
+  position: absolute;
+  content: "#";
+  color: #007bff;
+}
+
+h1::before {
+  left: -26px;
+}
+
+h2::before {
+  left: -18px;
+}
+
+h1:hover::before,
+h2:hover::before {
+  display: inline-block;
+}
+
+.title-main {
+  --align: left;
+  --text-color: black;
+  --font-weight: 800;
+  --font-size: 28px;
+  color: var(--text-color);
+  text-align: var(--align);
+  font-weight: var(--font-weight);
+  font-size: var(--font-size);
+  padding: 8px 30px;
+  margin-bottom: 20px;
+}
+
+/* END-Title.css */
+
+/* Notice.css */
+/* Notice */
+.notice {
+  margin: 16px 0;
+  padding: 12px 16px;
+  margin-bottom: 1rem;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.notice-title {
+  font-weight: bold;
+  margin-bottom: 4px;
+}
+
+/* 不同类型的通知样式 */
+.notice-info {
+  background-color: #e8f4ff;
+  border-left: 4px solid #1890ff;
+}
+
+.notice-warning {
+  background-color: #fff7e6;
+  border-left: 4px solid #faad14;
+}
+
+.notice-success {
+  background-color: #f6ffed;
+  border-left: 4px solid #52c41a;
+}
+
+.notice-error {
+  background-color: #fff2f0;
+  border-left: 4px solid #f5222d;
+}
+/* END-Notice.css */
+
+/* Block.css */
+/* Block.njk */
+.code-block {
+  margin: 16px 0;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.code-block pre {
+  margin: 0;
+  padding: 1rem;
+  background-color: #f5f5f5;
+  font-family: 'Courier New', monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+}
+
+.code-block code {
+  display: block;
+  overflow-x: auto;
+  
+}
+/* END-Block.css */
+
+/* Table.css */
+.default-table {
+  margin: 0;
+  width: 80%;
+  border-collapse: collapse;
+  /* 合并边框 */
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 14px;
+  color: #444444;
+}
+
+.thead-light th {
+  background-color: #f5f7fa;
+  color: #333333;
+  font-weight: 600;
+  padding: 12px 16px;
+  text-align: left;
+  border: 1px solid #e1e4e8;
+  font-size: 16px;
+}
+
+.default-row {
+  border: 1px solid #eee;
+  background-color: #fff;
+
+}
+
+.default-row:hover {
+  background-color: #f0f4f8;
+  color: rebeccapurple;
+}
+
+.default-cell {
+  padding: 10px 16px;
+  border: 1px solid #e1e4e8;
+  font-weight: 400;
+  font-size: 14px;
+  color: #444;
+  background-color: transparent;
+}
+/* END-Table.css */
+
+/* Tab.css */
+/* Tab 容器 */
+.tab-container {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+/* 隐藏 Radio 按钮 */
+.tab-radio {
+  display: none;
+}
+
+/* Tab 按钮样式 */
+.tab-labels {
+  display: flex;
+  border-bottom: 1px solid #ccc;
+}
+
+.tab-label {
+  padding: 5px 10px;
+  cursor: pointer;
+  background-color: #f1f1f1;
+  border: 1px solid #ccc;
+  border-bottom: none;
+  margin-right: 2px;
+  border-radius: 5px 5px 0 0;
+}
+
+.tab-label:hover {
+  background-color: #ddd;
+}
+
+.tab-radio:checked+.tab-label {
+  background-color: #fff;
+  border-bottom: 1px solid #fff;
+  margin-bottom: -1px;
+}
+
+/* Tab 内容区域 */
+.tab-content {
+  display: none;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-top: none;
+}
+/* END-Tab.css */
+
+/* Base.css */
+body {
+    margin: 0;
+    padding: 50px;
+}
+/* END-Base.css */

package/dist/bundle/src/index.html

@@ -0,0 +1,262 @@
+<!-- Head.njk -->
+{% macro use_head(ctx) %}
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>{{ ctx.title }}</title>
+  {% if ctx.jsFiles%}
+  {% for css in ctx.cssFiles %}
+    <link rel="stylesheet" href="{{ css }}" />
+  {% endfor %}
+  {% endif %}
+</head>
+  {% if ctx.jsFiles%}
+  {% for js in ctx.jsFiles %}
+    <script src="{{ js }}"></script>
+  {% endfor %}
+  {% endif %}
+{% endmacro %}
+<!-- /Head.njk -->
+
+<!-- TOC.njk -->
+{% macro use_toc(ctx) %}
+<div class="article-toc">
+  <input type="checkbox" id="toc-toggle" class="toc-toggle-checkbox">
+  <label for="toc-toggle" class="toc-toggle-label">
+    <span class="toc-icon">≡</span>
+    <span class="toc-text">目录</span>
+  </label>
+  
+  <nav class="toc-nav">
+    {% for section in ctx.data %}
+    <section class="toc-section">
+      {% if section.link %}
+      <h3 class="toc-heading">
+        <a href="{{ section.link }}" class="toc-link">{{ section.text }}</a>
+      </h3>
+      {% else%}
+      <h3 class="toc-heading">{{ section.text }}</h3>
+      {% endif %}
+      <ul class="toc-list">
+        {% for item in section.items %}
+        <li class="toc-item">
+          <a href="{{ item.link }}" class="toc-link" data-level="{{ loop.depth }}">
+            {% if loop.depth > 1 %}•{% endif %}
+            {{ item.text }}
+          </a>
+        </li>
+        {% endfor %}
+      </ul>
+    </section>
+    {% endfor %}
+  </nav>
+</div>
+{% endmacro %}
+<!-- /TOC.njk -->
+
+<!-- Title.njk -->
+{% macro title_default(ctx) %}
+    <h1 style="text-align: center">{{ ctx.text }}</h1>
+{% endmacro %}
+{% macro title_h1(ctx) %}
+    <h1 id="{{ ctx.text }}" class="title-color" style="{{ ctx.style }}">
+        {{ ctx.text }}
+    </h1>
+{% endmacro %}
+{% macro title_h2(ctx) %}
+    <h2 id="{{ ctx.text }}" class="title-color" style="{{ ctx.style }}">
+        {{ ctx.text }}
+    </h2>
+{% endmacro %}
+{% macro title_h3(ctx) %}
+    <h3 id="{{ ctx.text }}" class="title-color" style="{{ ctx.style }}">
+        {{ ctx.text }}
+    </h3>
+{% endmacro %}
+{% macro title_table_default(ctx) %}
+    <h3 id="{{ ctx.text }}" class="title_table_default" style="{{ ctx.style }}">
+        {{ ctx.text }}
+    </h3>
+{% endmacro %}
+{% macro use_title(ctx) %}
+    {% if ctx.type == "h1" %}
+        {{ title_h1(ctx) }}
+    {% elif ctx.type == "h2" %}
+        {{ title_h2(ctx) }}
+    {% elif ctx.type == "h3" %}
+        {{ title_h3(ctx) }}
+    {% else %}
+        {{ title_default(ctx) }}
+    {% endif %}
+{% endmacro %}
+<!-- /Title.njk -->
+
+<!-- Notice.njk -->
+{% macro use_notice(ctx) %}
+    {% if ctx.type %}
+        {% set type = ctx.type %}
+    {% else %}
+        {% set type = "info" %}
+    {% endif %}
+  <div class="notice notice-{{ type }}">
+    <div class="notice-title">{{ type|capitalize }}:</div>
+    <pre class="notice-content">{{ ctx.text }}</pre>
+  </div>
+{% endmacro %}
+<!-- /Notice.njk -->
+
+<!-- Block.njk -->
+{% macro use_block(ctx) %}
+  <div class="code-block">
+   <pre><code>{{ ctx.text }}</code></pre>
+  </div>
+{% endmacro %}
+<!-- /Block.njk -->
+
+<!-- Date.njk -->
+{% macro use_date(ctx) %}
+<div>Date：{{ ctx.text}}</div>
+{% endmacro %}
+{% macro use_checker(ctx) %}
+<div>Checker：{{ ctx.text}}</div>
+{% endmacro %}
+<!-- /Date.njk -->
+
+<!-- Table.njk -->
+{% macro table_default(ctx) %}
+    {% if ctx.columns %}
+        {% set columns = ctx.columns %}
+    {% elif ctx.th %}
+        {% set columns = ctx.th %}
+    {% else %}
+        {% set columns = [] %}
+    {% endif %}
+    {% if ctx.data %}
+        {% set data = ctx.data %}
+    {% elif ctx.tbody %}
+        {% set data = ctx.tbody %}
+    {% endif %}
+    {% if ctx.title %}
+        {% set title = {text:ctx.title} %}
+        {{ title_h2(title) }}
+    {% endif %}
+    <table class="default-table">
+        <thead class="thead-light">
+            <tr>
+                {% for column in columns %}
+                    <th>{{ column }}</th>
+                {% endfor %}
+            </tr>
+        </thead>
+        <tbody>
+            {% for row in data %}
+                <tr class="default-row">
+                    {% if ctx.data %}
+                        {% for column in columns %}
+                            <td class="default-cell">{{ row[column] | replace("false", "❌") | replace("true", "✔️") }}</td>
+                        {% endfor %}
+                    {% else %}
+                        {% for value in row %}
+                            <td class="default-cell">{{ value | replace("false", "❌") | replace("true", "✔️") }}</td>
+                        {% endfor %}
+                    {% endif %}
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+{% endmacro %}
+{% macro use_table(ctx) %}
+    {% if ctx.type == "h1" %}
+        {{ title_h1(ctx) }}
+    {% else %}
+        {{ table_default(ctx) }}
+    {% endif %}
+{% endmacro %}
+<!-- /Table.njk -->
+
+<!-- Tab.njk -->
+{% macro useTab(tabs) %}
+    <style>
+    /* 显示选中的 Tab 内容 */
+    {% for tab in tabs %}
+    #{{tab.id}}:checked~#{{tab.content_id}} {
+        display: block;
+    }
+    {% endfor %}
+    </style>
+    <div class="tab-container">
+        {% for tab in tabs %}
+            <!-- Radio 按钮（隐藏） -->
+            <input {% if loop.first %} checked {% endif %} type="radio" name="tabs" id="{{ tab.id }}" class="tab-radio">
+            {% endfor %}
+            <!-- Tab 按钮（用 label 包裹） -->
+            <div class="tab-labels">
+                {% for tab in tabs %}
+                    <label for="{{ tab.id }}" class="tab-label">{{ tab.title }}
+                    </label>
+                {% endfor %}
+            </div>
+            <!-- Tab 内容 -->
+            {% for tab in tabs %}
+                <div id="{{ tab.content_id }}" class="tab-content">
+                    {{ tab.content }}
+                </div>
+            {% endfor %}
+        </div>
+    {% endmacro %}
+<!-- /Tab.njk -->
+
+<!-- Component.njk -->
+{% macro pick_component(ctx) %}
+    {% if ctx.tag == "head" %}
+        {{ use_head(ctx) }}
+    {% elif ctx.tag == "text" %}
+        {{ use_text(ctx) }}
+    {% elif ctx.tag == "title" %}
+        {{ use_title(ctx) }}
+    {% elif ctx.tag == "table" %}
+        {{ use_table(ctx) }}
+    {% elif ctx.tag == "toc" %}
+        {{ use_toc(ctx) }}
+    {% elif ctx.tag == "notice" %}
+        {{ use_notice(ctx) }}
+    {% elif ctx.tag == "block" %}
+        {{ use_block(ctx) }}
+    {% elif ctx.tag == "date" %}
+        {{ use_date(ctx) }}
+    {% elif ctx.tag == "checker" %}
+        {{ use_checker(ctx) }}
+    {% else %}
+        {{ title_default(ctx) }}
+    {% endif %}
+{% endmacro %}
+{% macro use_component(ctx) %}
+    {% if ctx.tag %}
+        {{ pick_component(ctx) }}
+    {% else %}
+        {% for i in ctx %}
+            {{ pick_component(i) }}
+        {% endfor %}
+    {% endif %}
+{% endmacro %}
+
+{{ use_component(ctx) }}
+<!-- /Component.njk -->
+
+<!-- Text.njk -->
+{% macro text_default(ctx) %}
+    {{ ctx.text | replace("false", "❌") | replace("true", "✔️") }}
+{% endmacro %}
+
+{% macro bool_text(ctx) %}
+    {{ ctx.text | replace("false", "❌") | replace("true", "✔️") }}
+{% endmacro %}
+
+{% macro use_text(ctx) %}
+{% if ctx.type == "h1" %}
+{{ title_h1(ctx) }}
+{% else %}
+{{ text_default(ctx) }}
+{% endif %}
+{% endmacro %}
+<!-- /Text.njk -->

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "njk-tool",
+  "version": "0.0.1",
+  "description": "nunjucks no JavaScript 模板工具，兼容jinja",
+  "main": "dist/bundle/app.min.cjs",
+  "module": "dist/bundle/app.min.js",
+  "exports": {
+    ".": {
+      "require": "./dist/bundle/app.min.cjs",
+      "import": "./dist/bundle/app.min.js"
+    }
+  },
+  "author": "zggong",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SHgzg/njk-tool.git"
+  },
+  "type": "module",
+  "peerDependencies": {
+    "nunjucks": "^3.2.4"
+  },
+  "files": [
+    "dist/bundle",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "prestart": "node ./build.js",
+    "dev": "npx tsc && node ./dist/dev/main.js"
+  },
+  "keywords": [
+    "nunjucks",
+    "template"
+  ],
+  "packageManager": "pnpm@10.9.0",
+  "dependencies": {
+    "chokidar": "3.6.0",
+    "dotenv": "^16.5.0",
+    "express": "^5.1.0",
+    "nunjucks": "^3.2.4"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-typescript": "^12.1.4",
+    "@types/express": "^5.0.2",
+    "@types/node": "^22.15.30",
+    "@types/nunjucks": "^3.2.6",
+    "rollup": "^4.45.1",
+    "rollup-plugin-copy": "^3.5.0",
+    "tslib": "^2.8.1",
+    "typescript": "^5.8.3"
+  }
+}