Merge pull request #93 from mtmacdonald/icons

Modernise icons

package.json

@@ -1,6 +1,6 @@
 {
   "name": "docgen-tool",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "description": "A tool for creating HTML and PDF documentation",
   "main": "dist/docgen.ts",
   "bin": {
@@ -17,6 +17,7 @@
     "build:docs": "ts-node src/docgen.ts run -m -n -r -p -d 40000 -i src/docs -o ./docs",
     "build:docs:nopdf": "ts-node src/docgen.ts run -m -n -r -i src/docs -o ./docs",
     "build:styles": "sass --no-source-map src/styles/main.scss src/include/require/styles/framework.css",
+    "build:icons": "ts-node src/build-scripts/build-scripts.ts build-icons",
     "test": "npm run prettier:check",
     "test:run": "rimraf src/__test__/test-run-output && ts-node src/docgen.ts run -i src/__test__/test-run -o src/__test__/test-run-output -p -m -n -d 40000",
     "test:scaffold": "rimraf src/__test__/test-run-output && ts-node src/docgen.ts scaffold -o src/__test__/test-run-output",
@@ -49,6 +50,7 @@
     "z-schema": "^6.0.1"
   },
   "devDependencies": {
+    "@tabler/icons": "^2.47.0",
     "@types/node": "^20.3.1",
     "@types/react": "^18.2.37",
     "eslint": "^8.43.0",

src/build-scripts/build-icons.ts

@@ -0,0 +1,31 @@
+import { promises as fsp } from 'fs';
+import path from 'path';
+
+const iconSourcePath = 'node_modules/@tabler/icons/icons';
+const iconsOutputPath = 'src/include/require/styles/icons.js';
+
+const output = (icons) => `var w_icons = ${JSON.stringify(icons, null, 2)};`;
+
+export const buildIcons = async () => {
+  console.log('Build icons');
+  try {
+    const files = await fsp.readdir(iconSourcePath);
+    const svgFiles = files.filter(file => path.extname(file).toLowerCase() === '.svg');
+    const svgContents = {};
+    await Promise.all(
+      svgFiles.map(async file => {
+        const filePath = path.join(iconSourcePath, file);
+        const content = await fsp.readFile(filePath, 'utf8');
+        const key = path.basename(file, '.svg'); // Remove .svg extension from filename
+        svgContents[key] = content;
+      })
+    );
+    await fsp.writeFile(
+      iconsOutputPath,
+      output(svgContents),
+      { encoding: 'utf8' },
+    );
+  } catch (error) {
+    console.log(error);
+  }
+}

src/build-scripts/build-scripts.ts

@@ -0,0 +1,18 @@
+#!/usr/bin/env node
+
+import { program } from 'commander';
+import { buildIcons } from './build-icons';
+
+program
+  .command('build-icons')
+  .description('build the SVG icons')
+  .action(() => {
+    buildIcons();
+  });
+
+program.parse(process.argv);
+
+//if no arguments were provided, show help and then exit
+if (!process.argv.slice(2).length) {
+  program.help();
+}

src/docgen/views/components/web-table-of-contents/web-table-of-contents.tsx

@@ -41,14 +41,14 @@ export const TableOfContents = ({
         {Object.values(sortedPages).map((section, i) => (
           <Section key={i} section={section?.[0]} />
         ))}
-        <td className="dg-tocGroup" id="dg-tocFixedColumn">
+        <td className="dg-tocGroup dgWebTocAttribution" id="dg-tocFixedColumn">
           <ul>
             <li>
-              <span className="w-icon dg-tocIcon" data-name="person_group" title="archive"></span>
+              <span className="dgIcon" data-name="users" title="ownership"></span>
               <a href="ownership.html">Ownership</a>
             </li>
             <li>
-              <span className="w-icon dg-tocIcon" data-name="refresh" title="archive"></span>
+              <span className="dgIcon" data-name="refresh" title="release notes"></span>
               <a href="release-notes.html">Release Notes</a>
             </li>
           </ul>

src/docs/advanced-content.md

@@ -93,12 +93,12 @@ Regular HTML can also be used for tables, allowing full custom styling (includin
  <tr>
   <td><strong>Example</strong></td>
   <td class="w-success-text">Example</td>
-  <td><span class="w-icon" data-name="checkmark"></span></td>
+  <td><span class="dgIcon" data-name="check"></span></td>
  </tr>
  <tr>
   <td><strong>Example</strong></td>
   <td class="w-error-text">Example</td>
-  <td><span class="w-icon" data-name="close"></td>
+  <td><span class="dgIcon" data-name="x"></td>
  </tr>
 &lt;/table&gt;</code></pre>
 </div>
@@ -117,12 +117,12 @@ Regular HTML can also be used for tables, allowing full custom styling (includin
  <tr>
   <td><strong>Example</strong></td>
   <td class="w-success-text">Example</td>
-  <td><span class="w-icon" data-name="checkmark"></span></td>
+  <td><span class="dgIcon" data-name="check"></span></td>
  </tr>
  <tr>
   <td><strong>Example</strong></td>
   <td class="w-error-text">Example</td>
-  <td><span class="w-icon" data-name="close"></td>
+  <td><span class="dgIcon" data-name="x"></span></td>
  </tr>
 </table>
 </div><br class="w-clear"/>

src/docs/parameters.json

@@ -1,8 +1,8 @@
 {
   "title": "DocGen - a documentation tool",
   "name": "DocGen",
-  "version": "3.6.0",
-  "date": "14/12/2023",
+  "version": "3.7.0",
+  "date": "28/02/2024",
   "organization": {
     "name": "Inkit Inc. and contributors",
     "url": "https://www.inkit.com"

src/docs/release-notes.md

@@ -1,4 +1,8 @@
-## DocGen 3.6.0 14/12/2023
+## DocGen 3.7.0 28/02/2024
+
+- modernize icons (ship with [Tabler Icons](https://tablericons.com) built-in)
+
+## DocGen 3.6.0 14/12/2023
 
 - simplify and improve styles layer
 

src/docs/writing-content.md

@@ -190,6 +190,39 @@ links.
 <img src="files/images/logo.svg" />
 </div><br class="w-clear"/>
 
+## Icons
+
+DocGen ships with [Tabler Icons](https://tablericons.com/) built-in (a modern, open-source SVG icons library). You can
+insert icons in content pages by adding an HTML span tag with the dgIcon class, and the name of the icon in data-name
+attribute. You can also add optional classes to customize the icon styles.
+
+**Example:**
+
+<pre><code>&lt;span class=&quot;dgIcon&quot; data-name=&quot;graph-filled&quot;&gt;&lt;/span&gt;</code></pre>
+
+<span class="dgIcon" data-name="graph-filled"></span>
+
+You can use built-in classes to customize icon styles (small, large, info, warning, success, error).
+
+**Size:**
+
+<span class="dgIcon small" data-name="file-description"></span>
+<span class="dgIcon" data-name="file-database"></span>
+<span class="dgIcon large" data-name="file-diff"></span>
+
+**Color:**
+
+<span class="dgIcon large info" data-name="info-circle"></span>
+<span class="dgIcon large warning" data-name="alert-triangle"></span>
+<span class="dgIcon large success" data-name="circle-check"></span>
+<span class="dgIcon large error" data-name="circle-x"></span>
+
+**Custom colors:**
+
+You can apply custom colors with a style attribute.
+
+<span class="dgIcon" data-name="headphones-filled" style="color: purple"></span>
+
 ## Attaching files
 
 Other files you want to attach should go into *files* directory.

src/include/require/styles/framework.css

@@ -972,72 +972,33 @@ button .icon svg,
 /*
  icons
 */
-.w-icon {
-  width: 25px;
-  height: 25px;
-  display: inline-block;
-  margin: 0;
-  overflow: hidden;
-}
-
-.w-icon svg {
-  margin: 0;
-  fill: rgb(1, 3, 4);
-}
-
-/*table icons*/
-.w-table td > .w-icon {
-  vertical-align: middle;
+.dgIcon.small svg {
+  width: 20px;
+  height: 20px;
 }
-
-/*button icons*/
-.w-icon-button {
-  padding-left: 2px;
+.dgIcon.large svg {
+  width: 36px;
+  height: 36px;
 }
-.w-icon-button .w-icon {
-  display: inline-block;
-  float: left;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  margin: 0;
+.dgIcon.success svg {
+  color: #3c8039;
 }
-.w-icon-button .w-icon > svg {
-  fill: #444;
+.dgIcon.warning svg {
+  color: #987924;
 }
-.w-icon-button span:nth-child(2) {
-  display: inline-block;
-  padding: 4px 0 0 2px;
+.dgIcon.error svg {
+  color: #922429;
 }
-.w-icon-button.w-large {
-  padding-left: 8px;
+.dgIcon.info svg {
+  color: #296995;
 }
 
-/*message icons*/
-.w-message > .w-icon {
-  width: 21px;
-  height: 21px;
-  float: left;
-  margin-right: 5px;
-}
-
-.w-success > .w-icon svg {
-  fill: #218900;
-}
-
-.w-warning > .w-icon svg {
-  fill: #8a6b00;
-}
-
-.w-error > .w-icon svg {
-  fill: #b30000;
-}
-
-.w-information > .w-icon svg {
-  fill: #0e3d9a;
+/*table icons*/
+.w-table td > .dgIcon {
+  vertical-align: middle;
 }
 
-td.center {
+.w-table td.center {
   display: table-cell;
 }
 
@@ -1208,14 +1169,17 @@ section li p {
   font-size: 16px;
 }
 
-.dg-tocIcon {
+.dgWebTocAttribution li {
+  display: flex;
+  align-items: center;
+}
+.dgWebTocAttribution .dgIcon {
   width: 18px;
   height: 18px;
-  float: left;
 }
-
-.dg-tocIcon svg {
-  fill: white;
+.dgWebTocAttribution .dgIcon svg {
+  width: 18px;
+  height: 18px;
 }
 
 /*