add server tests, improve readme and types

local/config/src/jest.fileMock.js

@@ -0,0 +1 @@
+module.exports = {};

local/config/src/jest.js

@@ -4,9 +4,16 @@ const resolve = require('./resolve');
 // For a detailed explanation regarding each configuration property, visit:
 // https://jestjs.io/docs/en/configuration.html
 
+const assetFilesModuleNameMapper = {
+  '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+    path.resolve(__dirname, 'jest.fileMock.js'),
+  '.*\\.(css|less|scss|sass)$': path.resolve(__dirname, 'jest.fileMock.js'),
+};
+
 /** @type {import('jest').Config} */
 module.exports = {
   coverageDirectory: './.coverage/jest',
+  moduleNameMapper: assetFilesModuleNameMapper,
   projects: [
     {
       displayName: 'node',
@@ -15,9 +22,12 @@ module.exports = {
       clearMocks: true,
       moduleDirectories: resolve.directories,
       moduleFileExtensions: resolve.extensions.map((ext) => ext.replace(/\./, '')),
+      moduleNameMapper: {
+        ...assetFilesModuleNameMapper,
+        ...resolve.paths.jest.moduleNameMapper,
+      },
       testPathIgnorePatterns: ['\\\\node_modules\\\\'],
       setupFilesAfterEnv: [path.resolve(__dirname, './jest.setup.js')],
-      ...resolve.paths.jest,
     },
     {
       displayName: 'jsdom',
@@ -26,6 +36,10 @@ module.exports = {
       clearMocks: true,
       moduleDirectories: resolve.directories,
       moduleFileExtensions: resolve.extensions.map((ext) => ext.replace(/\./, '')),
+      moduleNameMapper: {
+        ...assetFilesModuleNameMapper,
+        ...resolve.paths.jest.moduleNameMapper,
+      },
       testPathIgnorePatterns: ['\\\\node_modules\\\\'],
       setupFilesAfterEnv: [path.resolve(__dirname, './jest.setup.js')],
       ...resolve.paths.jest,

local/esbuild/src/plugins/tailwind.js

@@ -16,32 +16,34 @@ export const esbuildPluginTailwind = ({
     build.onEnd(async (result) => {
       if (result) {
         const { metafile, outputFiles } = result;
-        const { inputs } = metafile;
-        const tailwindFile = outputFiles.find(({ path: outputFilePath }) =>
-          tailwindCssFileRegex.test(outputFilePath)
-        );
-
-        if (tailwindFile) {
-          const { path: tailwindFilePath, text: tailwindFileCss } = tailwindFile;
-          const tailwindContentGlobs = (resolvedTailwindConfig?.content || []).filter(
-            (entry) => typeof entry === 'string'
-          );
-          const inputFilePaths = Object.keys(inputs).map((input) => path.resolve(input));
-          const includedFiles = Array.from(
-            new Set(
-              tailwindContentGlobs
-                .map((glob) => minimatch.match(inputFilePaths, glob, { dot: true }))
-                .flat()
-            )
+        if (metafile && outputFiles) {
+          const { inputs } = metafile;
+          const tailwindFile = outputFiles.find(({ path: outputFilePath }) =>
+            tailwindCssFileRegex.test(outputFilePath)
           );
 
-          const postcssResult = await postcss([
-            tailwindcss({ ...(resolvedTailwindConfig || {}), content: includedFiles }),
-          ]).process(tailwindFileCss, {
-            from: tailwindFilePath,
-          });
+          if (tailwindFile) {
+            const { path: tailwindFilePath, text: tailwindFileCss } = tailwindFile;
+            const tailwindContentGlobs = (resolvedTailwindConfig?.content || []).filter(
+              (entry) => typeof entry === 'string'
+            );
+            const inputFilePaths = Object.keys(inputs).map((input) => path.resolve(input));
+            const includedFiles = Array.from(
+              new Set(
+                tailwindContentGlobs
+                  .map((glob) => minimatch.match(inputFilePaths, glob, { dot: true }))
+                  .flat()
+              )
+            );
 
-          tailwindFile.contents = Buffer.from(postcssResult.css);
+            const postcssResult = await postcss([
+              tailwindcss({ ...(resolvedTailwindConfig || {}), content: includedFiles }),
+            ]).process(tailwindFileCss, {
+              from: tailwindFilePath,
+            });
+
+            tailwindFile.contents = Buffer.from(postcssResult.css);
+          }
         }
       }
     });

local/tailwind/package.json

@@ -1,4 +1,7 @@
 {
   "private": true,
-  "main": "tailwind.config.js"
+  "main": "tailwind.config.js",
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.7"
+  }
 }

local/tailwind/tailwind.config.js

@@ -3,13 +3,100 @@ const defaultTheme = require('tailwindcss/defaultTheme');
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        transparent: 'transparent',
+        current: 'currentColor',
+        'primary-cyan1': '#33FFFF',
+        'primary-cyan2': '#87FED1',
+        'primary-green': '#C0FEB1',
+        'primary-blue1': '#338EFF',
+        'primary-blue2': '#4276FF',
+        'primary-violet': '#5D55FF',
+        'primary-dark': '#0A376B',
+        'primary-gray1': '#475774',
+        'primary-gray2': '#697996',
+      },
+      transitionProperty: {
+        transformColor: 'transform, color',
+      },
+      fontFamily: {
+        sans: ['Noto Sans', ...defaultTheme.fontFamily.sans],
+      },
+      typography: ({ theme }) => ({
+        DEFAULT: {
+          css: {
+            b: {
+              fontWeight: theme('fontWeight.medium'),
+            },
+            strong: {
+              fontWeight: theme('fontWeight.medium'),
+            },
+            h5: {
+              color: theme('colors.primary-dark'),
+              fontWeight: theme('fontWeight.medium'),
+              fontSize: theme('fontSize.sm'),
+            },
+            h6: {
+              color: theme('colors.primary-dark'),
+              fontWeight: theme('fontWeight.medium'),
+              fontSize: theme('fontSize.sm'),
+            },
+            'blockquote > p > strong:first-child': {
+              color: theme('colors.primary-blue2'),
+            },
+            'blockquote p:first-of-type::before': {
+              content: '',
+            },
+            'blockquote p:last-of-type::after': {
+              content: '',
+            },
+            code: {
+              background: 'var(--tw-prose-pre-bg)',
+              fontWeight: theme('fontWeight.medium'),
+              padding: theme('padding[1]'),
+              borderRadius: theme('borderRadius.md'),
+            },
+            'code::before': {
+              content: '',
+            },
+            'code::after': {
+              content: '',
+            },
+            'summary > *:only-child,': {
+              display: 'inline-block',
+            },
+            summary: {
+              display: 'inline list-item',
+              cursor: 'pointer',
+            },
+          },
+        },
+        primary: {
+          css: {
+            '--tw-prose-body': theme('colors.primary-gray1'),
+            '--tw-prose-headings': theme('colors.primary-dark'),
+            '--tw-prose-lead': theme('colors.primary-gray1'),
+            '--tw-prose-links': theme('colors.primary-blue2'),
+            '--tw-prose-bold': theme('colors.primary-dark'),
+            '--tw-prose-counters': theme('colors.primary-gray1'),
+            '--tw-prose-bullets': theme('colors.primary-blue2'),
+            '--tw-prose-hr': theme('colors.slate[200]'),
+            '--tw-prose-quotes': theme('colors.primary-dark'),
+            '--tw-prose-quote-borders': theme('colors.slate[200]'),
+            '--tw-prose-captions': theme('colors.primary-gray1'),
+            '--tw-prose-code': theme('colors.primary-dark'),
+            '--tw-prose-pre-code': theme('colors.pink[100]'),
+            '--tw-prose-pre-bg': theme('colors.slate[100]'),
+            '--tw-prose-th-borders': theme('colors.slate[200]'),
+            '--tw-prose-td-borders': theme('colors.slate[200]'),
+          },
+        },
+      }),
+    },
     container: {
       center: true,
     },
-    fontFamily: {
-      sans: ['Noto Sans', ...defaultTheme.fontFamily.sans],
-    },
     fontWeight: {
       normal: 400,
       medium: 600,
@@ -25,5 +112,8 @@ module.exports = {
       xxl: '1536px',
     },
   },
-  plugins: [],
+  plugins: [
+    // eslint-disable-next-line global-require
+    require('@tailwindcss/typography'),
+  ],
 };