diff --git a/.editorconfig b/.editorconfig index 20f0fc0..686d925 100644 --- a/.editorconfig +++ b/.editorconfig @@ -1,10 +1,9 @@ - # Editor configuration, see https://editorconfig.org root = true [*] charset = utf-8 -end_of_line = auto +end_of_line = lf indent_style = space insert_final_newline = true trim_trailing_whitespace = true @@ -12,4 +11,4 @@ indent_size = 2 [*.md] max_line_length = off -trim_trailing_whitespace = false \ No newline at end of file +trim_trailing_whitespace = false diff --git a/.eslintrc.cjs b/.eslintrc.cjs deleted file mode 100644 index 55cb675..0000000 --- a/.eslintrc.cjs +++ /dev/null @@ -1,15 +0,0 @@ -// @ts-check -const { defineConfig } = require("eslint-define-config") - -module.exports = defineConfig({ - root: true, - extends: ["@lehoczky/eslint-config-vue"], - overrides: [ - { - files: ["playground/**"], - rules: { - "no-console": "off", - }, - }, - ], -}) diff --git a/.gitattributes b/.gitattributes index 0fbe3dc..68df1c8 100644 --- a/.gitattributes +++ b/.gitattributes @@ -1,2 +1,5 @@ # Enforce Unix newlines -* text=auto eol=lf \ No newline at end of file +* text=auto eol=lf + +# Fix syntax highlighting on GitHub to allow comments +.vscode/*.json linguist-language=JSON-with-Comments diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 26fc019..736ad7f 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -2,96 +2,67 @@ name: CI on: push: - paths-ignore: - - "docs/**" branches: - master - pull_request: - paths-ignore: - - "docs/**" branches: - master + workflow_dispatch: + +concurrency: + group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }} + cancel-in-progress: true jobs: - lint: + ci: + name: ci runs-on: ubuntu-latest steps: - - name: Check out Git repository - uses: actions/checkout@v3 - - - name: Enable Corepack - run: corepack enable - - - name: Set up Node.js - uses: actions/setup-node@v3 + - name: Check out Git repository ⏬ + uses: actions/checkout@v4 with: - node-version: 20 - cache: pnpm - - - name: Install dependencies - run: pnpm install - - - name: Check lint errors - run: pnpm lint - - build: - runs-on: ubuntu-latest - steps: - - name: Check out Git repository - uses: actions/checkout@v3 + fetch-depth: 0 - - name: Enable Corepack - run: corepack enable + - uses: pnpm/action-setup@v4 + name: Install pnpm + with: + run_install: false - - name: Set up Node.js - uses: actions/setup-node@v3 + - name: Set up Node.js 💿 + uses: actions/setup-node@v4 with: - node-version: 20 + node-version-file: ".node-version" cache: pnpm - - name: Install dependencies + - name: Install dependencies 💤 run: pnpm install - - name: Build - run: pnpm build - - - name: Cache dist - uses: actions/upload-artifact@v3 + - name: Derive appropriate SHAs for base and head for `nx affected` commands + uses: nrwl/nx-set-shas@v4 + id: nx-sha with: - retention-days: 3 - name: dist - path: dist - - publish: - runs-on: ubuntu-latest - if: github.ref == 'refs/heads/master' - needs: - - lint - - build - steps: - - name: Check out Git repository - uses: actions/checkout@v3 - - - name: Enable Corepack - run: corepack enable + main-branch-name: master - - name: Set up Node.js - uses: actions/setup-node@v3 + - name: "Get affected projects" + uses: actions/github-script@v7 + id: affected-packages with: - node-version: 20 - cache: pnpm + script: | + const { spawnSync } = require("node:child_process") + const command = spawnSync("npx nx show projects --affected", { shell: true }) + return command.stdout.toString().replaceAll("\n", " ") - - name: Install dependencies - run: pnpm install + - run: echo ${{contains(steps.affected-packages.outputs.result, 'docs')}} - - name: Restore dist cache - uses: actions/download-artifact@v3 - with: - name: dist + # - name: Check formatting 🎨 + # run: npx nx format:check - - name: Publish to npm - uses: JS-DevTools/npm-publish@v2 - with: - access: public - token: ${{ secrets.NPM_TOKEN }} + # - name: Lint and build projects 👷‍♀️ + # run: npx nx affected -t lint build publint + + # - name: Deploy demo page 🚀 + # if: github.ref == 'refs/heads/master' && contains(steps.affected-packages.outputs.affected, 'demo') + # uses: peaceiris/actions-gh-pages@v4 + # with: + # github_token: ${{ secrets.GITHUB_TOKEN }} + # publish_dir: ./packages/demo/dist diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml deleted file mode 100644 index d099a12..0000000 --- a/.github/workflows/docs.yml +++ /dev/null @@ -1,40 +0,0 @@ -name: Docs - -on: - push: - paths: - - "docs/**" - - .github/workflows/docs.yml - branches: - - master - -jobs: - docs: - runs-on: ubuntu-latest - steps: - - name: Check out Git repository - uses: actions/checkout@v3 - - - name: Enable Corepack - run: corepack enable - - - name: Set up Node.js - uses: actions/setup-node@v3 - with: - node-version: 20 - cache: pnpm - - - name: Install dependencies - run: pnpm install - - - name: Build VitePress site - run: pnpm docs:build - - # @see https://github.com/crazy-max/ghaction-github-pages - - name: Deploy to GitHub Pages - uses: crazy-max/ghaction-github-pages@v3 - with: - target_branch: gh-pages - build_dir: docs/.vitepress/dist - env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.gitignore b/.gitignore index de01af1..902ba9c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ node_modules +.pnpm-store .DS_Store dist dist-ssr @@ -8,3 +9,6 @@ dist-ssr .cache **/.vitepress/dist **/.vitepress/cache + +.nx/cache +.nx/workspace-data diff --git a/.node-version b/.node-version new file mode 100644 index 0000000..10fef25 --- /dev/null +++ b/.node-version @@ -0,0 +1 @@ +20.18 diff --git a/.npmrc b/.npmrc deleted file mode 100644 index fa4e095..0000000 --- a/.npmrc +++ /dev/null @@ -1 +0,0 @@ -strict-peer-dependencies=false \ No newline at end of file diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..bd5535a --- /dev/null +++ b/.prettierignore @@ -0,0 +1 @@ +pnpm-lock.yaml diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index d743cc1..0000000 --- a/.prettierrc +++ /dev/null @@ -1,15 +0,0 @@ -{ - "printWidth": 80, - "arrowParens": "avoid", - "endOfLine": "auto", - "semi": false, - "singleQuote": false, - "overrides": [ - { - "files": ["docs/**/*md"], - "options": { - "printWidth": 85 - } - } - ] -} diff --git a/.prettierrc.mjs b/.prettierrc.mjs new file mode 100644 index 0000000..3ac81d6 --- /dev/null +++ b/.prettierrc.mjs @@ -0,0 +1,6 @@ +import config from "@lehoczky/prettier-config" + +/** @type {import("prettier").Options} */ +export default { + ...config, +} diff --git a/.stylelintrc.json b/.stylelintrc.json deleted file mode 100644 index b9fd5f2..0000000 --- a/.stylelintrc.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "extends": ["stylelint-config-standard"], - "rules": { - "selector-class-pattern": null - }, - "overrides": [ - { - "files": ["playground/**/*.css"], - "rules": { - "at-rule-no-unknown": [ - true, - { - "ignoreAtRules": ["tailwind", "apply", "layer"] - } - ] - } - } - ] -} diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 410c1c9..6a9c640 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -3,7 +3,7 @@ "editorconfig.editorconfig", "dbaeumer.vscode-eslint", "esbenp.prettier-vscode", - "stylelint.vscode-stylelint", - "octref.vetur" + "github.vscode-github-actions", + "vue.volar" ] } diff --git a/.vscode/settings.json b/.vscode/settings.json index 754a42f..9573383 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,17 +1,13 @@ { "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.codeActionsOnSave": { - "source.fixAll.eslint": true, - "source.fixAll.stylelint": true + "source.fixAll.eslint": "explicit" }, - "[vue]": { - "editor.defaultFormatter": "esbenp.prettier-vscode" - }, - "[javascript]": { - "editor.defaultFormatter": "esbenp.prettier-vscode" - }, - "eslint.validate": ["javascript", "typescript", "yaml", "vue"], - "css.validate": false, - "stylelint.validate": ["css", "postcss"], - "cSpell.words": ["Termynal", "vuepress"] + "css.customData": [".vscode/tailwind.json"], + "cSpell.words": ["Termynal", "vuepress"], + "editor.wordWrapColumn": 80, + "[markdown]": { + "editor.wordWrap": "wordWrapColumn" + } } diff --git a/.vscode/tailwind.json b/.vscode/tailwind.json new file mode 100644 index 0000000..96a1f57 --- /dev/null +++ b/.vscode/tailwind.json @@ -0,0 +1,55 @@ +{ + "version": 1.1, + "atDirectives": [ + { + "name": "@tailwind", + "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind" + } + ] + }, + { + "name": "@apply", + "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#apply" + } + ] + }, + { + "name": "@responsive", + "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n .alert {\n background-color: #E53E3E;\n }\n}\n```\n", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#responsive" + } + ] + }, + { + "name": "@screen", + "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n /* ... */\n}\n```\n", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#screen" + } + ] + }, + { + "name": "@variants", + "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n .btn-brand {\n background-color: #3182CE;\n }\n}\n```\n", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#variants" + } + ] + } + ] +} diff --git a/docs/.vitepress/theme/index.css b/docs/.vitepress/theme/index.css deleted file mode 100644 index d43e061..0000000 --- a/docs/.vitepress/theme/index.css +++ /dev/null @@ -1,3 +0,0 @@ -.v-termynal { - overflow: auto; -} diff --git a/eslint.config.mjs b/eslint.config.mjs new file mode 100644 index 0000000..820a494 --- /dev/null +++ b/eslint.config.mjs @@ -0,0 +1,11 @@ +// @ts-check +import { configLehoczkyVue } from "@lehoczky/eslint-config-vue" + +/** @type {import("eslint").Linter.Config[]} */ +export default [ + ...configLehoczkyVue(), + { + files: ["packages/playground/**"], + rules: { "no-console": "off" }, + }, +] diff --git a/nx.json b/nx.json new file mode 100644 index 0000000..8d80dd6 --- /dev/null +++ b/nx.json @@ -0,0 +1,22 @@ +{ + "$schema": "./node_modules/nx/schemas/nx-schema.json", + "targetDefaults": { + "dev": { + "dependsOn": ["^build"] + }, + "build": { + "dependsOn": ["^build"], + "outputs": ["{projectRoot}/dist"], + "cache": true + }, + "lint": { + "cache": true + }, + "publint": { + "dependsOn": ["^build"], + "cache": true + } + }, + "defaultBase": "master", + "nxCloudId": "67531f7052596d33778e5bad" +} diff --git a/package.json b/package.json index 2e99813..756803e 100644 --- a/package.json +++ b/package.json @@ -1,69 +1,18 @@ { - "name": "@lehoczky/vue-termynal", - "description": "Vue.js implementation of the termynal library.", - "version": "1.3.0", - "private": false, - "license": "MIT", - "scripts": { - "build": "vite build", - "lint": "npm run eslint:check && npm run styles:check && npm run format:check", - "eslint:check": "eslint . --ext .js,.ts,.vue,.yml,.yaml --max-warnings 0", - "styles:check": "stylelint \"src/**/*.css\"", - "format:check": "prettier src/** --check", - "docs:dev": "vitepress dev docs", - "docs:build": "vitepress build docs" - }, - "files": [ - "dist", - "README.md" - ], - "main": "./dist/vue-termynal.js", - "module": "./dist/vue-termynal.mjs", - "types": "./dist/index.d.ts", - "exports": { - ".": { - "types": "./dist/index.d.ts", - "import": "./dist/vue-termynal.mjs", - "require": "./dist/vue-termynal.js" - } - }, - "dependencies": { - "style-inject": "^0.3.0" - }, + "name": "@lehoczky/vue-termynal-monorepo", + "scripts": {}, "devDependencies": { - "@lehoczky/eslint-config-vue": "^0.0.17", - "@vitejs/plugin-vue": "^4.2.3", - "eslint": "^8.42.0", - "eslint-define-config": "^1.20.0", - "prettier": "^2.8.8", - "stylelint": "^15.6.3", - "stylelint-config-standard": "^33.0.0", - "typescript": "~5.0.4", - "vite": "^4.3.9", - "vite-plugin-dts": "^2.3.0", - "vitepress": "1.0.0-beta.1", - "vue": "^3.2.45" + "@lehoczky/prettier-config": "^2.0.1", + "prettier": "^3.4.2", + "nx": "20.2.0" }, - "peerDependencies": { - "vue": "^3.0.0" - }, - "author": { - "name": "Zoltan Lehoczky", - "email": "ifjlehoczkyzoltan@gmail.com", - "url": "https://github.com/Lehoczky" - }, - "homepage": "https://lehoczky.github.io/vue-termynal", - "keywords": [ - "vue", - "vue3", - "terminal", - "termynal", - "vuepress", - "documentation" - ], - "repository": { - "url": "https://github.com/Lehoczky/vue-termynal.git", - "type": "git" - }, - "packageManager": "pnpm@8.6.0" + "packageManager": "pnpm@9.15.0", + "pnpm": { + "peerDependencyRules": { + "ignoreMissing": [ + "@algolia/client-search", + "search-insights" + ] + } + } } diff --git a/docs/.vitepress/config.ts b/packages/docs/.vitepress/config.ts similarity index 67% rename from docs/.vitepress/config.ts rename to packages/docs/.vitepress/config.ts index d8ffdf7..bc2a701 100644 --- a/docs/.vitepress/config.ts +++ b/packages/docs/.vitepress/config.ts @@ -1,26 +1,29 @@ +import packageJson from "@lehoczky/vue-termynal/package.json" with { type: "json" } import { defineConfig } from "vitepress" - -import { version } from "../../package.json" +import { + groupIconMdPlugin, + groupIconVitePlugin, +} from "vitepress-plugin-group-icons" // https://vitepress.dev/reference/site-config export default defineConfig({ base: "/vue-termynal/", title: "Vue-Termynal", description: "Documentation site for the Vue-Termynal library", + srcDir: "./src", themeConfig: { // https://vitepress.dev/reference/default-theme-config nav: [ { - text: version, + text: packageJson.version, items: [ { text: "Changelog", - link: "https://github.com/Lehoczky/vue-termynal/blob/master/CHANGELOG.md", + link: "https://github.com/Lehoczky/vue-termynal/blob/master/packages/vue-termynal/CHANGELOG.md", }, ], }, ], - sidebar: [ { text: "Getting Started", link: "/" }, { text: "Components", link: "/components" }, @@ -29,18 +32,23 @@ export default defineConfig({ { text: "Examples", link: "/examples" }, { text: "Contributing", link: "/contributing" }, ], - socialLinks: [ { icon: "github", link: "https://github.com/Lehoczky/vue-termynal" }, ], - search: { provider: "local", }, - editLink: { pattern: - "https://github.com/Lehoczky/vue-termynal/edit/master/docs/:path", + "https://github.com/Lehoczky/vue-termynal/edit/master/packages/docs/:path", + }, + }, + markdown: { + config(md) { + md.use(groupIconMdPlugin) }, }, + vite: { + plugins: [groupIconVitePlugin()], + }, }) diff --git a/packages/docs/.vitepress/theme/index.css b/packages/docs/.vitepress/theme/index.css new file mode 100644 index 0000000..8511e4f --- /dev/null +++ b/packages/docs/.vitepress/theme/index.css @@ -0,0 +1,9 @@ +:root { + --vp-c-brand-1: var(--vp-c-green-1) !important; + --vp-c-brand-2: var(--vp-c-green-2) !important; + --vp-c-brand-3: var(--vp-c-green-3) !important; +} + +.v-termynal { + overflow: auto; +} diff --git a/docs/.vitepress/theme/index.ts b/packages/docs/.vitepress/theme/index.ts similarity index 56% rename from docs/.vitepress/theme/index.ts rename to packages/docs/.vitepress/theme/index.ts index e560bda..79eb6be 100644 --- a/docs/.vitepress/theme/index.ts +++ b/packages/docs/.vitepress/theme/index.ts @@ -1,13 +1,13 @@ import "./index.css" +import "virtual:group-icons.css" +import VueTermynalPlugin from "@lehoczky/vue-termynal" import type { Theme } from "vitepress" import DefaultTheme from "vitepress/theme" -import VueTermynalPlugin from "../../../src" - export default { extends: DefaultTheme, enhanceApp({ app }) { - app.use(VueTermynalPlugin as any) + app.use(VueTermynalPlugin) }, -} satisfies Partial +} satisfies Theme diff --git a/packages/docs/eslint.config.mjs b/packages/docs/eslint.config.mjs new file mode 100644 index 0000000..820a494 --- /dev/null +++ b/packages/docs/eslint.config.mjs @@ -0,0 +1,11 @@ +// @ts-check +import { configLehoczkyVue } from "@lehoczky/eslint-config-vue" + +/** @type {import("eslint").Linter.Config[]} */ +export default [ + ...configLehoczkyVue(), + { + files: ["packages/playground/**"], + rules: { "no-console": "off" }, + }, +] diff --git a/packages/docs/package.json b/packages/docs/package.json new file mode 100644 index 0000000..df6b58b --- /dev/null +++ b/packages/docs/package.json @@ -0,0 +1,22 @@ +{ + "name": "docs", + "type": "module", + "scripts": { + "dev": "vitepress dev", + "build": "vitepress build", + "preview": "vitepress preview", + "lint": "eslint --max-warnings=0", + "lint:fix": "eslint --max-warnings=0 --fix" + }, + "dependencies": { + "@lehoczky/eslint-config-vue": "^2.0.4", + "@lehoczky/vue-termynal": "workspace:*", + "eslint": "^9.16.0", + "vue": "3.5.13" + }, + "devDependencies": { + "typescript": "^5.7.2", + "vitepress": "1.5.0", + "vitepress-plugin-group-icons": "^1.3.1" + } +} diff --git a/docs/assets/simple-example.gif b/packages/docs/public/simple-example.gif similarity index 100% rename from docs/assets/simple-example.gif rename to packages/docs/public/simple-example.gif diff --git a/docs/components.md b/packages/docs/src/components.md similarity index 99% rename from docs/components.md rename to packages/docs/src/components.md index ba4f2b4..2383534 100644 --- a/docs/components.md +++ b/packages/docs/src/components.md @@ -41,7 +41,7 @@ Props: `lineDelay` Example: -```html +```vue-html Hello there! @@ -61,7 +61,7 @@ The prompt specifies the characters that are displayed before each line, for exa Example: -```html +```vue-html the default input python prompt @@ -83,7 +83,7 @@ Props: `lineDelay`, `progressLength`, `progressChar`, `progressPercent`, `progre Example: -```html +```vue-html @@ -109,7 +109,7 @@ props: `type`, `frameDelay`, `duration`, `prefix` Example: -```html +```vue-html diff --git a/docs/contributing.md b/packages/docs/src/contributing.md similarity index 96% rename from docs/contributing.md rename to packages/docs/src/contributing.md index f8abf1b..5da45d3 100644 --- a/docs/contributing.md +++ b/packages/docs/src/contributing.md @@ -16,7 +16,7 @@ pnpm install During development you can test your work in the `playground` folder. You can start the app inside it by running: ```sh -pnpm dev +pnpm -F playground dev ``` ### Lint errors @@ -36,5 +36,5 @@ I highly recommend installing the IDE extensions for these tools to see any erro Please check the docs (and if needed), document your changes and add new examples. The following command starts to the documentation site locally: ```sh -pnpm docs:dev +pnpm -F docs dev ``` diff --git a/docs/examples.md b/packages/docs/src/examples.md similarity index 97% rename from docs/examples.md rename to packages/docs/src/examples.md index 4db164d..9579390 100644 --- a/docs/examples.md +++ b/packages/docs/src/examples.md @@ -21,7 +21,7 @@ ::: code-group -```html [template] +```vue-html [template] pip install spacy @@ -62,7 +62,7 @@ ::: code-group -```html [template] +```vue-html [template] 💬 Go to the home directory cd - 💬 Create a directory for all your code projects + 💬 Create a directory for all your code projects mkdir code 💬 Enter into that code directory cd code diff --git a/docs/index.md b/packages/docs/src/index.md similarity index 85% rename from docs/index.md rename to packages/docs/src/index.md index e21a6fc..09c8082 100644 --- a/docs/index.md +++ b/packages/docs/src/index.md @@ -18,7 +18,7 @@ npm i @lehoczky/vue-termynal First, import and register the plugin in your `main.ts` file: -```ts +```ts [main.ts] import App from "./App.vue" import VueTermynalPlugin from "@lehoczky/vue-termynal" @@ -27,7 +27,7 @@ createApp(App).use(VueTermynalPlugin).mount("#app") Alternatively you can import the components directly: -```vue +```vue [App.vue]