feishu-docx: Improve Grid class use Tailwind CSS style.

longbridgeapp · Sep 19, 2023 · c8ebcd1 · c8ebcd1
1 parent 075474b
commit c8ebcd1
Show file tree

Hide file tree

Showing 11 changed files with 489 additions and 52 deletions.
diff --git a/example-website/.vitepress/theme/index.js b/example-website/.vitepress/theme/index.js
@@ -1,4 +1,4 @@
 import DefaultTheme from 'vitepress/theme';
-import '../../style.css';
+import '../../style.scss';
 
 export default DefaultTheme;
diff --git a/example-website/package.json b/example-website/package.json
@@ -10,6 +10,12 @@
     "preview": "vitepress preview"
   },
   "devDependencies": {
+    "autoprefixer": "^10.4.15",
+    "postcss": "^8.4.30",
+    "sass": "^1.67.0",
     "vitepress": "^1.0.0-rc.10"
+  },
+  "dependencies": {
+    "tailwindcss": "^3.3.3"
   }
-}
+}
diff --git a/example-website/postcss.config.js b/example-website/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/example-website/style.css b/example-website/style.css
diff --git a/example-website/style.scss b/example-website/style.scss
@@ -0,0 +1,61 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.callout {
+  padding: 0.5em 1em;
+  margin: 1.5em 0;
+  border: 2px solid #ccc;
+  border-radius: 5px;
+  font-size: 1em;
+
+  &-bg-1 {
+    @apply bg-red-50 dark:bg-red-950;
+  }
+  &-bg-2 {
+    @apply bg-orange-50 dark:bg-orange-950;
+  }
+  &-bg-3 {
+    @apply bg-yellow-50 dark:bg-yellow-950;
+  }
+  &-bg-4 {
+    @apply bg-green-50 dark:bg-green-950;
+  }
+  &-bg-5 {
+    @apply bg-blue-50 dark:bg-blue-950;
+  }
+  &-bg-6 {
+    @apply bg-purple-50 dark:bg-purple-950;
+  }
+  &-bg-7 {
+    @apply bg-gray-50 dark:bg-gray-950;
+  }
+
+  &-border-1 {
+    @apply border-red-200 dark:border-red-800;
+  }
+  &-border-2 {
+    @apply border-orange-200 dark:border-orange-800;
+  }
+  &-border-3 {
+    @apply border-yellow-200 dark:border-yellow-800;
+  }
+  &-border-4 {
+    @apply border-green-200 dark:border-green-800;
+  }
+  &-border-5 {
+    @apply border-blue-200 dark:border-blue-800;
+  }
+  &-border-6 {
+    @apply border-purple-200 dark:border-purple-800;
+  }
+  &-border-7 {
+    @apply border-gray-200 dark:border-gray-800;
+  }
+
+  @apply text-gray-800 dark:text-gray-200;
+}
+
+.grid {
+  margin: 1.5em 0;
+}
diff --git a/example-website/tailwind.config.js b/example-website/tailwind.config.js
@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['**/*.md'],
+  theme: {
+    extend: {},
+  },
+  darkMode: 'class',
+  plugins: [],
+};
diff --git a/feishu-docx/package.json b/feishu-docx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "feishu-docx",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Convert Feishu Docx into other format (Markdown, HTML ...)",
   "module": "src/index.ts",
   "main": "dist/index.js",

diff --git a/feishu-docx/src/markdown_renderer.ts b/feishu-docx/src/markdown_renderer.ts
@@ -425,7 +425,7 @@ export class MarkdownRenderer extends Renderer {
   parseGrid(block: Block) {
     const buf = new Buffer();
 
-    buf.write(`<div class="grid grid-col-${block.grid.column_size}">\n`);
+    buf.write(`<div class="grid gap-3 grid-cols-${block.grid.column_size}">\n`);
     block.children?.forEach((childId) => {
       const child = this.blockMap[childId];
       buf.write(this.parseGridColumn(child));
@@ -438,7 +438,7 @@ export class MarkdownRenderer extends Renderer {
   parseGridColumn(block: Block) {
     const buf = new Buffer();
 
-    buf.write(`<div class="col">\n`);
+    buf.write(`<div>\n`);
     block.children?.forEach((childId) => {
       const child = this.blockMap[childId];
       buf.write(this.parseBlock(child, 0));

diff --git a/feishu-docx/tests/fixtures/case3.expect.md b/feishu-docx/tests/fixtures/case3.expect.md
@@ -1,17 +1,17 @@
 # Feishu Pages
 
-<div class="callout callout-bg-3 callout-border-2" style="background: #fefce8; border: 1px solid #fed7aa">
+<div class="callout callout-bg-3 callout-border-2">
 🎉 This site build by GitHub Actions with feishu-pages.
 </div>
 
-<div class="grid grid-col-3">
-<div class="col">
+<div class="grid gap-3 grid-cols-3">
+<div>
 <img src="Bwk8bcQH6oLQn1xjzdacPBckn8d" src-width="1000" src-height="500" align="center"/>
 </div>
-<div class="col">
+<div>
 <img src="DkwibdF3ooVi0KxttdocdoQ5nPh" src-width="400" src-height="354" align="center"/>
 </div>
-<div class="col">
+<div>
 <img src="M9hDb8WXzo7TU5xg4xtcvArPnxe" src-width="410" src-height="404" align="center"/>
 </div>
 </div>

diff --git a/feishu-pages/package.json b/feishu-pages/package.json
@@ -1,6 +1,6 @@
 {
   "name": "feishu-pages",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "Generate Feishu Wiki into a Markdown for work with Static Page Generators.",
   "repository": {
     "url": "https://github.com/longbridgeapp/feishu-pages"
@@ -24,7 +24,7 @@
     "@types/node": "^20.5.7",
     "axios": "^1.5.0",
     "dotenv": "^16.3.1",
-    "feishu-docx": "^0.3.2",
+    "feishu-docx": "^0.3.3",
     "mime-types": "^2.1.35",
     "typescript": "^5.2.2"
   },