feat(document): Upgrade design of preset preview server

package.json

@@ -9,10 +9,10 @@
     "postbuild": "lerna link",
     "clean": "rimraf \"packages/**/tsconfig.tsbuildinfo\" \"packages/**/lib\" \"**/.acot\"",
     "docgen": "lerna run docgen",
-    "format": "npm-run-all format:prettier format:script",
+    "format": "npm-s format:prettier format:script",
     "format:prettier": "prettier --write .",
     "format:script": "yarn lint:script --fix",
-    "lint": "npm-run-all -p lint:*",
+    "lint": "run-p lint:*",
     "lint:prettier": "prettier --check .",
     "lint:script": "eslint . --ext \".js,.jsx,.ts,.tsx\"",
     "release": "lerna publish from-package",
@@ -44,6 +44,7 @@
     "@types/node": "^14.14.9",
     "@typescript-eslint/eslint-plugin": "^4.8.2",
     "@typescript-eslint/parser": "^4.8.2",
+    "cross-env": "^7.0.3",
     "eslint": "^7.14.0",
     "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-import": "^2.20.2",

packages/acot-preset-axe/package.json

@@ -22,8 +22,8 @@
   ],
   "scripts": {
     "build": "tsc",
-    "docgen": "acot preset docgen README.md -vvv",
-    "serve": "acot preset serve --watch -vvv",
+    "docgen": "acot preset docgen README.md",
+    "serve": "acot preset serve --watch",
     "test": "acot preset test --port 1235"
   },
   "dependencies": {

packages/acot-preset-wcag/package.json

@@ -22,9 +22,9 @@
   ],
   "scripts": {
     "build": "tsc",
-    "docgen": "acot preset docgen README.md -vvv",
+    "docgen": "acot preset docgen README.md",
     "scaffold": "scaffdog generate",
-    "serve": "acot preset serve --watch -vvv",
+    "serve": "acot preset serve --watch",
     "test": "acot preset test --port 1234"
   },
   "dependencies": {

packages/document/.gitignore

@@ -1 +1,2 @@
 /lib
+/templates/assets/styles.css

packages/document/package.json

@@ -22,8 +22,14 @@
     "!__tests__"
   ],
   "scripts": {
-    "build": "tsc",
-    "test": "jest"
+    "build": "run-p build:*",
+    "build:script": "tsc",
+    "build:style": "cross-env NODE_ENV=production yarn postcss",
+    "postcss": "postcss styles/styles.css -o templates/assets/styles.css",
+    "test": "jest",
+    "watch": "run-p watch:*",
+    "watch:script": "yarn build:script -w",
+    "watch:style": "yarn postcss -w"
   },
   "jest": {
     "preset": "ts-jest",
@@ -60,7 +66,13 @@
   "devDependencies": {
     "@types/mustache": "^4.0.1",
     "@types/puppeteer-core": "^2.0.0",
-    "@types/unist": "^2.0.3"
+    "@types/unist": "^2.0.3",
+    "fastify-static": "^3.3.0",
+    "postcss": "^8.2.1",
+    "postcss-cli": "^8.3.1",
+    "postcss-import": "^14.0.0",
+    "postcss-nested": "^5.0.3",
+    "tailwindcss": "^2.0.2"
   },
   "publishConfig": {
     "access": "public"

packages/document/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('tailwindcss'),
+    require('postcss-nested'),
+  ],
+};

packages/document/src/doc-server.ts

@@ -6,8 +6,10 @@ import type {
   FastifyRequest,
   FastifyReply,
   FastifyError,
+  FastifyLoggerInstance,
 } from 'fastify';
 import fastify from 'fastify';
+import fastifyStatic from 'fastify-static';
 import mustache from 'mustache';
 import type { DocCode } from './doc-code';
 import { generateDocUrl } from './doc-code';
@@ -16,12 +18,25 @@ import type { DocProject } from './doc-project';
 import { debug } from './logging';
 
 const TEMPLATES_DIR = path.resolve(__dirname, '..', 'templates');
+const ASSETS_DIR = path.resolve(TEMPLATES_DIR, 'assets');
 
 const readFile = promisify(fs.readFile);
 
 const readTemplate = (name: string) =>
   readFile(path.resolve(TEMPLATES_DIR, name), 'utf8');
 
+const createLogger = (): FastifyLoggerInstance => ({
+  info: debug.extend('info'),
+  warn: debug.extend('warn'),
+  error: debug.extend('error'),
+  fatal: debug.extend('fatal'),
+  trace: debug.extend('trace'),
+  debug: debug.extend('debug'),
+  child: () => createLogger(),
+});
+
+const logger = createLogger();
+
 type Template = {
   default: string;
   index: string;
@@ -51,7 +66,7 @@ export class DocServer {
 
   public constructor(config: DocServerConfig) {
     this._config = config;
-    this._server = fastify();
+    this._server = fastify({ logger: logger });
     this._loader = new DocTemplateLoader();
     this._template = {
       default: '',
@@ -68,6 +83,11 @@ export class DocServer {
 
     this.update(project);
 
+    this._server.register(fastifyStatic, {
+      root: ASSETS_DIR,
+      prefix: '/assets/',
+    });
+
     this._server
       .get('/', this._handleIndex)
       .get('/:rule/:id', this._handleRule);
@@ -115,8 +135,6 @@ export class DocServer {
     const { port } = this._config;
 
     const rules: DocRule[] = [];
-    const presetId = path.parse(path.normalize(project.main)).name;
-
     const groups = project.codes.reduce<DocRuleGroup[]>((acc, cur) => {
       const rule = {
         ...cur,
@@ -130,11 +148,9 @@ export class DocServer {
       if (group != null) {
         group.rules.push(rule);
       } else {
-        const meta = project.preset.rules.get(`${presetId}/${cur.rule}`)?.meta;
-
         acc.push({
           rule: cur.rule,
-          summary: meta?.description ?? '(empty)',
+          summary: cur.summary.text || '(empty)',
           rules: [rule],
         });
       }
@@ -187,8 +203,7 @@ export class DocServer {
           path.resolve(path.dirname(code.path), code.meta['acot-template']),
         );
       } catch (e) {
-        // TODO logging
-        debug('not found template: %O', e);
+        debug('Not found template: %O', e);
       }
     }
 
@@ -223,7 +238,9 @@ export class DocServer {
   };
 
   private _handleNotFound = (request: FastifyRequest, reply: FastifyReply) => {
-    debug('handleNotFound: %s', request.raw.url);
+    if (request.url !== '/favicon.ico') {
+      debug('handleNotFound: %s', request.url);
+    }
     reply.status(404).send('404 Not found');
   };
 }

packages/document/styles/styles.css

@@ -0,0 +1,25 @@
+@tailwind base;
+
+@layer base {
+  h2 {
+    scroll-margin-top: 3rem;
+  }
+
+  a {
+    @apply text-indigo-600;
+  }
+}
+
+@tailwind components;
+
+@tailwind utilities;
+
+@tailwind screens;
+
+.type-correct {
+  @apply bg-green-700 text-white;
+}
+
+.type-incorrect {
+  @apply bg-yellow-400 text-black;
+}

packages/document/tailwind.config.js

@@ -0,0 +1,27 @@
+const createShadow = (...px) =>
+  [
+    `${px[0]}px ${px[1]}px ${px[2]}px ${px[3]}px rgba(0,0,0,0.2)`,
+    `${px[4]}px ${px[5]}px ${px[6]}px ${px[7]}px rgba(0,0,0,0.14)`,
+    `${px[8]}px ${px[9]}px ${px[10]}px ${px[11]}px rgba(0,0,0,0.12)`,
+  ].join(',');
+
+module.exports = {
+  purge: ['./templates/**/*.html'],
+  theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+    },
+    boxShadow: {
+      sm: createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0),
+      DEFAULT: createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0),
+      md: createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2),
+      lg: createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3),
+      xl: createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4),
+      '2xl': createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5),
+      '3xl': createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7),
+      inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
+      none: 'none',
+    },
+  },
+};