From 05aa64a524ae99e9860193338c7224e6f18fe86c Mon Sep 17 00:00:00 2001 From: TheoryOfNekomata Date: Fri, 4 Aug 2023 16:04:19 +0800 Subject: [PATCH] Fix imports Update refresh command to correctly refer to files. --- .amanuensis/next/src/theme.ts | 25 ++++ .amanuensis/package.json | 9 ++ .amanuensis/postcss.config.js | 6 + .amanuensis/tailwind.config.js | 157 ++++++++++++++++++++ amanuensis.config.json | 7 + packages/amanuensis/next.config.js | 8 +- packages/amanuensis/src/commands/refresh.ts | 40 +++-- packages/amanuensis/src/next/next.config.js | 6 +- packages/amanuensis/src/next/pages/_app.tsx | 17 ++- 9 files changed, 254 insertions(+), 21 deletions(-) create mode 100644 .amanuensis/next/src/theme.ts create mode 100644 .amanuensis/package.json create mode 100644 .amanuensis/postcss.config.js create mode 100644 .amanuensis/tailwind.config.js diff --git a/.amanuensis/next/src/theme.ts b/.amanuensis/next/src/theme.ts new file mode 100644 index 0000000..f3ae7b4 --- /dev/null +++ b/.amanuensis/next/src/theme.ts @@ -0,0 +1,25 @@ +const theme = { + "color-shade": "0 0 0", + "color-negative": "34 34 34", + "color-positive": "238 238 238", + "color-primary": "199 138 179", + "color-secondary": "215 95 75", + "color-tertiary": "255 153 0", + "color-code-number": "116 249 94", + "color-code-keyword": "255 67 137", + "color-code-type": "80 151 210", + "color-code-instance-attribute": "118 167 210", + "color-code-function": "103 194 82", + "color-code-parameter": "145 94 194", + "color-code-property": "255 161 201", + "color-code-string": "238 211 113", + "color-code-variable": "139 194 117", + "color-code-regexp": "116 167 43", + "color-code-url": "0 153 204", + "color-code-global": "194 128 80", + "font-sans": '"Encode Sans"', + "font-headings": 'Glory, var(--font-sans)', + "font-mono": 'MonoLisa, mononoki', +} as const; + +export default theme; diff --git a/.amanuensis/package.json b/.amanuensis/package.json new file mode 100644 index 0000000..4d0cbd2 --- /dev/null +++ b/.amanuensis/package.json @@ -0,0 +1,9 @@ +{ + "devDependencies": { + "@tesseract-design/viewfinder-base": "link:../../../viewfinder/packages/base", + "@tesseract-design/viewfinder-react": "link:../../../viewfinder/packages/react", + "autoprefixer": "10.4.14", + "postcss": "8.4.24", + "tailwindcss": "0.0.0-insiders.7f31ac1" + } +} diff --git a/.amanuensis/postcss.config.js b/.amanuensis/postcss.config.js new file mode 100644 index 0000000..33ad091 --- /dev/null +++ b/.amanuensis/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/.amanuensis/tailwind.config.js b/.amanuensis/tailwind.config.js new file mode 100644 index 0000000..a1031b0 --- /dev/null +++ b/.amanuensis/tailwind.config.js @@ -0,0 +1,157 @@ +const defaultTheme = require('tailwindcss/defaultTheme') +const { + dropdownSelectPlugin, + menuSelectPlugin, + radioButtonPlugin, + radioTickBoxPlugin, +} = require('@tesseract-design/web-choice-react'); +const { + colorPickerPlugin, +} = require('@tesseract-design/web-color-react'); +const { + menuMultiSelectPlugin, + tagInputPlugin, + toggleButtonPlugin, + toggleSwitchPlugin, + toggleTickBoxPlugin, +} = require('@tesseract-design/web-multichoice-react'); +const { + numberSpinnerPlugin, + sliderPlugin, +} = require('@tesseract-design/web-number-react'); +const { + dateDropdownPlugin, + timeSpinnerPlugin, +} = require('@tesseract-design/web-temporal-react'); +const { + tailwind +} = require('@tesseract-design/viewfinder-base'); + +const plugin = require('tailwindcss/plugin') + +const tesseractPlugin = plugin( + ({ addUtilities }) => { + addUtilities({ + '.font-condensed': { + 'font-stretch': 'condensed', + }, + '.font-semi-condensed': { + 'font-stretch': 'semi-condensed', + }, + '.font-expanded': { + 'font-stretch': 'expanded', + }, + '.font-semi-expanded': { + 'font-stretch': 'semi-expanded', + }, + '.font-inherit': { + 'font-stretch': 'inherit', + }, + '.linejoin-round': { + 'stroke-linejoin': 'round', + }, + '.linecap-round': { + 'stroke-linecap': 'round', + }, + }); + }, + { + theme: { + fontFamily: { + sans: ['var(--font-sans)', ...defaultTheme.fontFamily.sans], + headings: ['var(--font-headings)', ...defaultTheme.fontFamily.sans], + mono: ['var(--font-mono)', ...defaultTheme.fontFamily.mono], + inherit: ['inherit'], + }, + colors: { + 'sidebar': 'rgb(var(--color-sidebar)', + 'topbar': 'rgb(var(--color-topbar)', + + 'shade': 'rgb(var(--color-shade))', + 'negative': 'rgb(var(--color-negative))', + 'positive': 'rgb(var(--color-positive))', + 'primary': 'rgb(var(--color-primary))', + 'secondary': 'rgb(var(--color-secondary))', + 'tertiary': 'rgb(var(--color-tertiary))', + 'code-number': 'rgb(var(--color-code-number))', + 'code-keyword': 'rgb(var(--color-code-keyword))', + 'code-type': 'rgb(var(--color-code-type))', + 'code-instance-attribute': 'rgb(var(--color-code-instance-attribute))', + 'code-function': 'rgb(var(--color-code-function))', + 'code-parameter': 'rgb(var(--color-code-parameter))', + 'code-property': 'rgb(var(--color-code-property))', + 'code-string': 'rgb(var(--color-code-string))', + 'code-variable': 'rgb(var(--color-code-variable))', + 'code-regexp': 'rgb(var(--color-code-regexp))', + 'code-url': 'rgb(var(--color-code-url))', + 'code-global': 'rgb(var(--color-code-global))', + 'current': 'currentcolor', + 'inherit': 'inherit', + 'transparent': 'transparent', + }, + extend: { + fontSize: { + 'lg': '1.125em', + 'xl': '1.25em', + '2xl': '1.5em', + '3xl': '1.75em', + '4xl': '2em', + '5xl': '3em', + '6xl': '4em', + 'xxs': '0.625rem', + }, + borderRadius: { + inherit: 'inherit', + }, + minWidth: { + 6: '1.5rem', + 10: '2.5rem', + 12: '3rem', + 16: '4rem', + 48: '12rem', + 64: '16rem', + }, + minHeight: { + 6: '1.5rem', + 10: '2.5rem', + 12: '3rem', + 16: '4rem', + 64: '16rem', + }, + strokeWidth: { + 3: '3', + }, + }, + }, + }, +); + + +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [ + './src/pages/**/*.{js,ts,jsx,tsx,mdx}', + './src/components/**/*.{js,ts,jsx,tsx,mdx}', + './src/content/**/*.{js,ts,jsx,tsx,mdx}', + './node_modules/@tesseract-design/viewfinder-react/dist/**/*.js', + './node_modules/@tesseract-design/web-*-react/dist/**/*.js', // catch-all, can use individual packages + ], + plugins: [ + tailwind.plugin(), + tesseractPlugin, + colorPickerPlugin, + dateDropdownPlugin, + dropdownSelectPlugin, + menuMultiSelectPlugin, + menuSelectPlugin, + numberSpinnerPlugin, + radioButtonPlugin, + radioTickBoxPlugin, + sliderPlugin, + tagInputPlugin, + timeSpinnerPlugin, + toggleButtonPlugin, + toggleSwitchPlugin, + toggleTickBoxPlugin, + ], +} diff --git a/amanuensis.config.json b/amanuensis.config.json index 2dfd735..2a347b3 100644 --- a/amanuensis.config.json +++ b/amanuensis.config.json @@ -9,5 +9,12 @@ "react": "@tesseract-design/*-react" } } + }, + "additionalPackages": { + "tailwindcss": "*", + "autoprefixer": "*", + "postcss": "*", + "@tesseract-design/viewfinder-base": "*", + "@tesseract-design/viewfinder-react": "*" } } diff --git a/packages/amanuensis/next.config.js b/packages/amanuensis/next.config.js index 4286cf2..92eb595 100644 --- a/packages/amanuensis/next.config.js +++ b/packages/amanuensis/next.config.js @@ -7,7 +7,7 @@ const withMDX = require('@next/mdx')({ remarkPlugins: [], rehypePlugins: [], // If you use `MDXProvider`, uncomment the following line. - // providerImportSource: "@mdx-js/react", + providerImportSource: "@mdx-js/react", }, }) @@ -17,6 +17,12 @@ const nextConfig = { pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'], // Optionally, add any other Next.js config below reactStrictMode: true, + webpack: (config, { isServer }) => { + if (!isServer) { + config.resolve.fallback.fs = false; + } + return config; + }, } // Merge MDX config with Next.js config diff --git a/packages/amanuensis/src/commands/refresh.ts b/packages/amanuensis/src/commands/refresh.ts index 16e80e8..8f7289d 100644 --- a/packages/amanuensis/src/commands/refresh.ts +++ b/packages/amanuensis/src/commands/refresh.ts @@ -1,8 +1,17 @@ import { - cp, readFile, rm, stat, writeFile, + cp, + readFile, + rm, + stat, + writeFile, + symlink, } from 'fs/promises'; import { - dirname, resolve, basename, extname, join, + dirname, + resolve, + basename, + extname, + join, } from 'path'; import { Argv } from 'yargs'; import { mkdirp } from 'mkdirp'; @@ -21,7 +30,7 @@ const linkComponents = async (cwd: string) => { const projectCwd = resolve(cwd, '.amanuensis'); const defaultCwd = await useInternalPath('src', 'next'); - const destCwd = await useInternalPath('.amanuensis', 'next'); + const destCwd = await useInternalPath('.amanuensis', 'next', 'src'); const componentsList = [ 'components/Wrapper.tsx', ]; @@ -54,20 +63,27 @@ const linkComponents = async (cwd: string) => { })); const packagesPath = await useInternalPath('.amanuensis', 'packages.json'); - const typedocDataJson = await readFile(packagesPath, 'utf-8'); - const typedocData = JSON.parse(typedocDataJson) as PackageData[]; + const packagesDataJson = await readFile(packagesPath, 'utf-8'); + const packagesData = JSON.parse(packagesDataJson) as PackageData[]; try { await Promise.all( - typedocData.map(async (pkg) => { + packagesData.map(async (pkg) => { + const packageDir = await useBasePath(pkg.basePath); + const packageLinkDir = await useInternalPath('.amanuensis', 'next', 'node_modules', pkg.name); + await mkdirp(dirname(packageLinkDir)); + console.log(packageDir, packageLinkDir); + await symlink(packageDir, packageLinkDir); + await mkdirp(resolve(destCwd, 'content', pkg.basePath)); await mkdirp(resolve(destCwd, 'pages', pkg.basePath)); await Promise.all( pkg.markdown.map(async (m) => { const srcPath = resolve(cwd, pkg.basePath, m.filePath); const destPath = resolve(destCwd, 'content', pkg.basePath, m.name); - const pageDestPath = resolve(destCwd, 'pages', pkg.basePath, `${basename(m.name, extname(m.name))}.tsx`); await cp(srcPath, destPath); + + const pageDestPath = resolve(destCwd, 'pages', pkg.basePath, `${basename(m.name, extname(m.name))}.tsx`); await writeFile( pageDestPath, `import {NextPage} from 'next'; @@ -86,14 +102,14 @@ export default IndexPage; `, // todo fix problem when building with import aliases // todo find a way to build with tailwind - // todo link components to next project + // todo link components to next project (done) + // todo merge contents of .amanuensis with next project ); }), ); }), ); } catch (errRaw) { - console.log(errRaw); throw new CommandError(GenerateReturnCode.COULD_NOT_GENERATE_PAGES, 'Could not write inner page file', errRaw as Error); } @@ -114,11 +130,7 @@ export interface RefreshArgs { subcommands?: string[]; } -export const builder = (yargs: Argv) => yargs - .option('typedocJsonPath', { - type: 'string', - alias: 't', - }); +export const builder = (yargs: Argv) => yargs; const refresh = async (args: RefreshArgs) => { try { diff --git a/packages/amanuensis/src/next/next.config.js b/packages/amanuensis/src/next/next.config.js index 9ddb223..f975085 100644 --- a/packages/amanuensis/src/next/next.config.js +++ b/packages/amanuensis/src/next/next.config.js @@ -1,6 +1,6 @@ -// next.config.js +const nextMDX = require('@next/mdx') -const withMDX = require('@next/mdx')({ +const withMDX = nextMDX({ extension: /\.mdx?$/, options: { // If you use remark-gfm, you'll need to use next.config.mjs @@ -9,7 +9,7 @@ const withMDX = require('@next/mdx')({ remarkPlugins: [], rehypePlugins: [], // If you use `MDXProvider`, uncomment the following line. - // providerImportSource: "@mdx-js/react", + providerImportSource: "@mdx-js/react", }, }) diff --git a/packages/amanuensis/src/next/pages/_app.tsx b/packages/amanuensis/src/next/pages/_app.tsx index 93928c3..16421d7 100644 --- a/packages/amanuensis/src/next/pages/_app.tsx +++ b/packages/amanuensis/src/next/pages/_app.tsx @@ -1,5 +1,16 @@ import type { AppProps } from 'next/app' +import { MDXProvider } from '@mdx-js/react' -export default function App({ Component, pageProps }: AppProps) { - return -} +const COMPONENTS = {}; + +const App = ({ Component, pageProps }: AppProps) => { + return ( + + + + ) +}; + +export default App;