支持 grid 扩展

Author: qianmoQ

docs/content/usage/grid.md

@@ -0,0 +1,173 @@
+---
+title: Grid
+icon: grid
+---
+
+PageForge 支持网格布局语法。
+
+!!! danger "注意"
+
+    该功能需要在配置文件中启用，可以在 `pageforge.yaml` 中配置 `feature.grid.enable: true`
+
+!!!
+
+## 基本语法
+
+---
+
+- 源代码
+
+```markdown
+::: grid
+- 第一个网格项
+- 第二个网格项
+- 第三个网格项
+- 第四个网格项
+:::
+```
+
+- 显示效果
+
+::: grid
+- 第一个网格项
+- 第二个网格项
+- 第三个网格项
+- 第四个网格项
+:::
+
+## 设置列数
+
+---
+
+- 源代码
+
+```markdown
+::: grid cols-3
+- 第一列内容
+- 第二列内容
+- 第三列内容
+- 第四列内容（自动换行）
+- 第五列内容
+- 第六列内容
+:::
+```
+
+- 显示效果
+
+::: grid cols-3
+- 第一列内容
+- 第二列内容
+- 第三列内容
+- 第四列内容（自动换行）
+- 第五列内容
+- 第六列内容
+:::
+
+## 设置间距
+
+---
+
+- 源代码
+
+```markdown
+::: grid cols-2 gap-8
+- 这是第一个网格项
+  可以包含多行内容
+- 这是第二个网格项
+  间距设置为 8 (2rem)
+- 这是第三个网格项
+- 这是第四个网格项
+:::
+```
+
+- 显示效果
+
+::: grid cols-2 gap-8
+- 这是第一个网格项
+  可以包含多行内容
+- 这是第二个网格项
+  间距设置为 8 (2rem)
+- 这是第三个网格项
+- 这是第四个网格项
+:::
+
+## 禁用响应式
+
+---
+
+默认情况下，网格布局是响应式的：
+- 移动设备：1列
+- 平板设备：最多2列
+- 桌面设备：完整列数
+
+使用 `no-responsive` 可以禁用响应式布局：
+
+```markdown
+::: grid cols-4 no-responsive
+- 第一列
+- 第二列
+- 第三列
+- 第四列
+:::
+```
+
+## 完整选项
+
+---
+
+网格布局支持以下选项：
+
+1. `cols-{number}`: 设置列数（默认：2）
+    - 例如：`cols-3`、`cols-4`、`cols-6`
+
+2. `gap-{number}`: 设置网格间距（默认：4）
+    - 例如：`gap-4`、`gap-6`、`gap-8`
+
+3. `no-responsive`: 禁用响应式布局
+    - 默认启用响应式
+
+可以组合使用这些选项：
+
+```markdown
+::: grid cols-3 gap-6 no-responsive
+- 内容1
+- 内容2
+- 内容3
+:::
+```
+
+## 实际应用示例
+
+---
+
+创建特色卡片布局：
+
+```markdown
+::: grid cols-3 gap-6
+- ### 🚀 快速上手
+  零配置，开箱即用，
+  支持 Markdown 所有基础语法。
+
+- ### 📦 功能丰富
+  内置大量扩展组件，
+  支持自定义扩展。
+
+- ### 🎨 主题系统
+  提供多套主题，
+  支持自定义主题。
+:::
+```
+
+::: grid cols-3 gap-6
+- __🚀 快速上手__
+  零配置，开箱即用，
+  支持 Markdown 所有基础语法。
+
+- ### 📦 功能丰富
+  内置大量扩展组件，
+  支持自定义扩展。
+
+- ### 🎨 主题系统
+  提供多套主题，
+  支持自定义主题。
+:::

docs/pageforge.yaml

@@ -93,6 +93,8 @@ feature:
     enable: true
   tabs:
     enable: true
+  grid:
+    enable: true
 
 i18n:
   default: zh-CN
@@ -191,6 +193,7 @@ nav:
       - /usage/diff
       - /usage/button
       - /usage/icon
+      - /usage/grid
   - Template:
       - /template/home
       - /template/team

lib/extension/marked/pageforge-grid.js

@@ -0,0 +1,82 @@
+const {loadComponent} = require("../../component-loader");
+const ConfigManager = require("../../config-manager");
+const config = new ConfigManager(process.cwd()).getConfig();
+
+const PageForgeGridExtension = {
+    name: 'pageforgeGrid',
+    level: 'block',
+
+    start(src) {
+        if (!config.feature?.grid?.enable) {
+            return -1;
+        }
+        const index = src.match(/^:::\s*grid(?:\s+[\w-]+)*\s*\n/m)?.index ?? -1;
+        return index;
+    },
+
+    tokenizer(src, tokens) {
+        if (!config.feature?.grid?.enable) {
+            return false;
+        }
+
+        const headerMatch = /^:::\s*grid((?:\s+[\w-]+)*)\s*\n/.exec(src);
+        if (!headerMatch) {
+            return false;
+        }
+
+        const endIndex = src.indexOf('\n:::');
+        if (endIndex === -1) {
+            return false;
+        }
+
+        const gridOptions = {
+            cols: 2,
+            gap: 4,
+            responsive: true
+        };
+
+        const options = headerMatch[1];
+        if (options) {
+            options.trim().split(/\s+/).forEach(opt => {
+                if (opt.startsWith('cols-')) {
+                    gridOptions.cols = parseInt(opt.slice(5));
+                }
+                else if (opt.startsWith('gap-')) {
+                    gridOptions.gap = parseInt(opt.slice(4));
+                }
+                else if (opt === 'no-responsive') {
+                    gridOptions.responsive = false;
+                }
+            });
+        }
+
+        const headerLength = headerMatch[0].length;
+        const content = src.slice(headerLength, endIndex);
+        const raw = src.slice(0, endIndex + 4);
+
+        const items = content.split(/\n(?=\s*[-*+]|\s*\d+\.)/g)
+            .map(item => item.trim())
+            .filter(item => item)
+            .map(item => {
+                return item.replace(/^[-*+]\s+|^\d+\.\s+/, '');
+            });
+
+        return {
+            type: 'pageforgeGrid',
+            raw,
+            content: items,
+            options: gridOptions,
+            tokens: []
+        };
+    },
+
+    renderer(token) {
+        return loadComponent('grid', {
+            content: token.content,
+            options: token.options,
+            config: config.feature?.grid?.options || {}
+        });
+    }
+};
+
+module.exports = PageForgeGridExtension;

lib/extension/marked/pageforge-marked.js

@@ -15,6 +15,8 @@ const PageForgeMermaidExtension = require("./pageforge-mermaid");
 const PageForgeDiffExtension = require("./pageforge-diff");
 const PageForgeButtonExtension = require("./pageforge-button");
 const PageForgeIconExtension = require("./pageforge-icon");
+const PageForgeGridExtension = require('./pageforge-grid')
+const {unescape} = require('./utils')
 
 const renderer = {
     paragraph({tokens}) {
@@ -96,7 +98,8 @@ marked.use({
         PageForgeTooltipsExtension,
         PageForgeDiffExtension,
         PageForgeButtonExtension,
-        PageForgeIconExtension
+        PageForgeIconExtension,
+        PageForgeGridExtension
     ],
     renderer,
     breaks: false

lib/extension/marked/utils.js

@@ -1,76 +1,7 @@
-const other = {
-    codeRemoveIndent: /^(?: {1,4}| {0,3}\t)/gm,
-    outputLinkReplace: /\\([\[\]])/g,
-    indentCodeCompensation: /^(\s+)(?:```)/,
-    beginningSpace: /^\s+/,
-    endingHash: /#$/,
-    startingSpaceChar: /^ /,
-    endingSpaceChar: / $/,
-    nonSpaceChar: /[^ ]/,
-    newLineCharGlobal: /\n/g,
-    tabCharGlobal: /\t/g,
-    multipleSpaceGlobal: /\s+/g,
-    blankLine: /^[ \t]*$/,
-    doubleBlankLine: /\n[ \t]*\n[ \t]*$/,
-    blockquoteStart: /^ {0,3}>/,
-    blockquoteSetextReplace: /\n {0,3}((?:=+|-+) *)(?=\n|$)/g,
-    blockquoteSetextReplace2: /^ {0,3}>[ \t]?/gm,
-    listReplaceTabs: /^\t+/,
-    listReplaceNesting: /^ {1,4}(?=( {4})*[^ ])/g,
-    listIsTask: /^\[[ xX]\] /,
-    listReplaceTask: /^\[[ xX]\] +/,
-    anyLine: /\n.*\n/,
-    hrefBrackets: /^<(.*)>$/,
-    tableDelimiter: /[:|]/,
-    tableAlignChars: /^\||\| *$/g,
-    tableRowBlankLine: /\n[ \t]*$/,
-    tableAlignRight: /^ *-+: *$/,
-    tableAlignCenter: /^ *:-+: *$/,
-    tableAlignLeft: /^ *:-+ *$/,
-    startATag: /^<a /i,
-    endATag: /^<\/a>/i,
-    startPreScriptTag: /^<(pre|code|kbd|script)(\s|>)/i,
-    endPreScriptTag: /^<\/(pre|code|kbd|script)(\s|>)/i,
-    startAngleBracket: /^</,
-    endAngleBracket: />$/,
-    pedanticHrefTitle: /^([^'"]*[^\s])\s+(['"])(.*)\2/,
-    unicodeAlphaNumeric: /[\p{L}\p{N}]/u,
-    escapeTest: /[&<>"']/,
-    escapeReplace: /[&<>"']/g,
-    escapeTestNoEncode: /[<>"']|&(?!(#\d{1,7}|#[Xx][a-fA-F0-9]{1,6}|\w+);)/,
-    escapeReplaceNoEncode: /[<>"']|&(?!(#\d{1,7}|#[Xx][a-fA-F0-9]{1,6}|\w+);)/g,
-    unescapeTest: /&(#(?:\d+)|(?:#x[0-9A-Fa-f]+)|(?:\w+));?/ig,
-    caret: /(^|[^\[])\^/g,
-    percentDecode: /%25/g,
-    findPipe: /\|/g,
-    splitPipe: / \|/,
-    slashPipe: /\\\|/g,
-    carriageReturn: /\r\n|\r/g,
-    spaceLine: /^ +$/gm,
-    notSpaceStart: /^\S*/,
-    endingNewline: /\n$/,
-    listItemRegex: (bull: string) => new RegExp(`^( {0,3}${bull})((?:[\t ][^\\n]*)?(?:\\n|$))`),
-    nextBulletRegex: (indent: number) => new RegExp(`^ {0,${Math.min(3, indent - 1)}}(?:[*+-]|\\d{1,9}[.)])((?:[ \t][^\\n]*)?(?:\\n|$))`),
-    hrRegex: (indent: number) => new RegExp(`^ {0,${Math.min(3, indent - 1)}}((?:- *){3,}|(?:_ *){3,}|(?:\\* *){3,})(?:\\n+|$)`),
-    fencesBeginRegex: (indent: number) => new RegExp(`^ {0,${Math.min(3, indent - 1)}}(?:\`\`\`|~~~)`),
-    headingBeginRegex: (indent: number) => new RegExp(`^ {0,${Math.min(3, indent - 1)}}#`),
-    htmlBeginRegex: (indent: number) => new RegExp(`^ {0,${Math.min(3, indent - 1)}}<(?:[a-z].*>|!--)`, 'i'),
+const unescape = (text) => {
+    return text.replace(/\\([\\`*{}[\]()#+\-.!_>])/g, '$1');
 };
 
-function edit(regex: string | RegExp, opt = '') {
-    let source = typeof regex === 'string' ? regex : regex.source
-    const obj = {
-        replace: (name: string | RegExp, val: string | RegExp) => {
-            let valSource = typeof val === 'string' ? val : val.source
-            valSource = valSource.replace(other.caret, '$1')
-            source = source.replace(name, valSource)
-            return obj
-        },
-        getRegex: () => {
-            return new RegExp(source, opt)
-        }
-    }
-    return obj
-}
-
-module.exports = edit
+module.exports = {
+    unescape
+};