From cfa0576f5d12c462272589cde77e644d18b3b3d9 Mon Sep 17 00:00:00 2001 From: Dev By Ray <6241164+devbyray@users.noreply.github.com> Date: Tue, 1 Apr 2025 16:12:35 +0200 Subject: [PATCH 01/13] docs: update README to clarify library usage and framework compatibility --- README.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/README.md b/README.md index 208808d..775d1cf 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,22 @@ A Vue-based accessible design system with headless web components. This library provides accessible, customizable components that can be imported individually to optimize bundle size. +> This library is WIP (Work-In-Progress) + +## Is This Library Right For You? + +This library is framework agnostic at the component level, but requires Vue.js as a dependency to function. Consider this library if: + +- Your application doesn't have a framework yet and you're looking for a solid foundation to build on +- Your application is already built with Vue.js and you need consistent, accessible components +- You want to use the same components across multiple projects with different technologies + +Note that if your main application uses React, Angular, or another non-Vue framework, you might want to consider a framework-specific component library instead for better integration: + +- For **React** applications: [shadcn/ui](https://ui.shadcn.com/) offers beautifully designed components that you can copy and paste into your apps +- For **Angular** applications: [Angular Material](https://material.angular.io/) provides a comprehensive suite of UI components following Material Design principles + + ## Features - 🧩 **Web Components**: Use anywhere, framework-agnostic From 19b3390c58c1be6d3b6dbf5fb76046835fbd6ab4 Mon Sep 17 00:00:00 2001 From: Dev By Ray <6241164+devbyray@users.noreply.github.com> Date: Tue, 1 Apr 2025 16:12:48 +0200 Subject: [PATCH 02/13] docs: update README to indicate the library is a Work-In-Progress (WIP) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 775d1cf..76f14a5 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Vue Web Component Library +# Vue Web Component Library (WIP) A Vue-based accessible design system with headless web components. This library provides accessible, customizable components that can be imported individually to optimize bundle size. From 4a964d3ed034391bb314e2d89dbc6c4dffe932a6 Mon Sep 17 00:00:00 2001 From: Dev By Ray <6241164+devbyray@users.noreply.github.com> Date: Tue, 1 Apr 2025 16:20:38 +0200 Subject: [PATCH 03/13] docs: update component details for clarity and accessibility --- apps/documentation/index.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/apps/documentation/index.md b/apps/documentation/index.md index aca4404..b78739c 100644 --- a/apps/documentation/index.md +++ b/apps/documentation/index.md @@ -13,11 +13,13 @@ hero: features: - title: Button component link: /docs/components/button - details: Lorem ipsum dolor sit amet, consectetur adipiscing elit + details: A versatile button component with support for different styles, sizes, and states to enhance user interactions. + - title: Input component link: /docs/components/input - details: Lorem ipsum dolor sit amet, consectetur adipiscing elit + details: A customizable input field component designed for accessibility and seamless data entry. + - title: Icon component link: /docs/components/icon - details: Lorem ipsum dolor sit amet, consectetur adipiscing elit + details: A library of scalable and accessible icons to complement your design system. --- From 14ea73b24187bfbbacfa80b993ea6a1fb24ed1d8 Mon Sep 17 00:00:00 2001 From: Dev By Ray <6241164+devbyray@users.noreply.github.com> Date: Tue, 1 Apr 2025 16:46:00 +0200 Subject: [PATCH 04/13] feat(docs): add ComponentExample for interactive component demos --- apps/documentation/.vitepress/theme/index.js | 4 + apps/documentation/.vitepress/theme/style.css | 2 +- .../components/ComponentExample.vue | 226 ++++++++++++++++++ apps/documentation/docs/components/button.md | 7 + apps/documentation/docs/components/icon.md | 7 + apps/documentation/docs/components/index.md | 2 + apps/documentation/docs/components/input.md | 7 + apps/documentation/index.md | 19 ++ apps/documentation/package.json | 1 + pnpm-lock.yaml | 3 + 10 files changed, 277 insertions(+), 1 deletion(-) create mode 100644 apps/documentation/components/ComponentExample.vue diff --git a/apps/documentation/.vitepress/theme/index.js b/apps/documentation/.vitepress/theme/index.js index 1d35d0f..91c52f8 100644 --- a/apps/documentation/.vitepress/theme/index.js +++ b/apps/documentation/.vitepress/theme/index.js @@ -2,7 +2,9 @@ import { h } from 'vue' import DefaultTheme from 'vitepress/theme' import MarkdownImporter from '../../components/MarkdownImporter.vue' +import ComponentExample from '../../components/ComponentExample.vue' import './style.css' +import '@devbyray/vue-wc-components' /** @type {import('vitepress').Theme} */ export default { @@ -15,5 +17,7 @@ export default { enhanceApp({ app, router, siteData }) { // ... app.component('MarkdownImporter', MarkdownImporter) + app.component('ComponentExample', ComponentExample) + } } diff --git a/apps/documentation/.vitepress/theme/style.css b/apps/documentation/.vitepress/theme/style.css index 1a61cb1..a608733 100644 --- a/apps/documentation/.vitepress/theme/style.css +++ b/apps/documentation/.vitepress/theme/style.css @@ -42,7 +42,7 @@ * - `danger`: Used to show error, or dangerous message to the users. Used * in custom container, badges, etc. * -------------------------------------------------------------------------- */ - + @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded'); :root { --vp-c-default-1: var(--vp-c-gray-1); --vp-c-default-2: var(--vp-c-gray-2); diff --git a/apps/documentation/components/ComponentExample.vue b/apps/documentation/components/ComponentExample.vue new file mode 100644 index 0000000..b24dd04 --- /dev/null +++ b/apps/documentation/components/ComponentExample.vue @@ -0,0 +1,226 @@ + + + \ No newline at end of file diff --git a/apps/documentation/docs/components/button.md b/apps/documentation/docs/components/button.md index 6832e04..832a11c 100644 --- a/apps/documentation/docs/components/button.md +++ b/apps/documentation/docs/components/button.md @@ -1 +1,8 @@ + + Primary Button + + \ No newline at end of file diff --git a/apps/documentation/docs/components/icon.md b/apps/documentation/docs/components/icon.md index 52a7a79..9a3e420 100644 --- a/apps/documentation/docs/components/icon.md +++ b/apps/documentation/docs/components/icon.md @@ -1 +1,8 @@ + + + + \ No newline at end of file diff --git a/apps/documentation/docs/components/index.md b/apps/documentation/docs/components/index.md index d796870..c369c02 100644 --- a/apps/documentation/docs/components/index.md +++ b/apps/documentation/docs/components/index.md @@ -1 +1,3 @@ +# Components + \ No newline at end of file diff --git a/apps/documentation/docs/components/input.md b/apps/documentation/docs/components/input.md index 3c9cfee..710f803 100644 --- a/apps/documentation/docs/components/input.md +++ b/apps/documentation/docs/components/input.md @@ -1 +1,8 @@ + + + + \ No newline at end of file diff --git a/apps/documentation/index.md b/apps/documentation/index.md index b78739c..2e1982c 100644 --- a/apps/documentation/index.md +++ b/apps/documentation/index.md @@ -23,3 +23,22 @@ features: link: /docs/components/icon details: A library of scalable and accessible icons to complement your design system. --- + + +
+

Try our Button component

+ + Click Me + +
+ + diff --git a/apps/documentation/package.json b/apps/documentation/package.json index 2e22c7b..7790d83 100644 --- a/apps/documentation/package.json +++ b/apps/documentation/package.json @@ -14,6 +14,7 @@ "vitepress": "^1.6.3" }, "dependencies": { + "@devbyray/vue-wc-components": "workspace:^", "highlight.js": "^11.11.1" } } \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0131e18..17984c4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -57,6 +57,9 @@ importers: apps/documentation: dependencies: + '@devbyray/vue-wc-components': + specifier: workspace:^ + version: link:../../packages/components highlight.js: specifier: ^11.11.1 version: 11.11.1 From bf7d0e9040d74647e299ead0774c20225b64cfd3 Mon Sep 17 00:00:00 2001 From: Dev By Ray <6241164+devbyray@users.noreply.github.com> Date: Tue, 1 Apr 2025 17:42:15 +0200 Subject: [PATCH 05/13] feat(docs): update examples and enhance MarkdownImporter for better syntax highlighting --- .../components/ComponentExample.vue | 230 ++++++++++++++++-- .../components/MarkdownImporter.vue | 96 +++++--- apps/documentation/docs/components/button.md | 7 +- apps/documentation/docs/components/index.md | 35 +++ 4 files changed, 314 insertions(+), 54 deletions(-) diff --git a/apps/documentation/components/ComponentExample.vue b/apps/documentation/components/ComponentExample.vue index b24dd04..c1f1a7b 100644 --- a/apps/documentation/components/ComponentExample.vue +++ b/apps/documentation/components/ComponentExample.vue @@ -1,5 +1,5 @@ @@ -112,28 +210,63 @@ watch(previewContainer, (el) => {
+ + + +
+ + +
+ +
+
-
+ +
- - -
-
{{ currentCode }}
+ + +
+ +
+ + +
{{ currentCode }}

@@ -142,30 +275,80 @@ watch(previewContainer, (el) => { .component-example { margin: 20px 0; } + +.example-tabs { + display: flex; + border-start-end-radius: 5px; + border-start-start-radius: 5px; + overflow: hidden; + border: 1px solid #ccc; + border-bottom: none; +} + +.tab-button { + flex: 1; + padding: 0.5rem 1rem; + background-color: #3d3d3d; + color: #e6e6e6; + border: none; + cursor: pointer; + font-size: 0.875rem; + transition: background-color 0.2s; +} + +.tab-button:hover { + background-color: #4a4a4a; +} + +.tab-button.active { + background-color: #5f5f5f; + font-weight: bold; +} + .example-code { padding: 10px; - border-end-end-radius: 5px; - border-end-start-radius: 5px; + border-bottom-right-radius: 5px; + border-bottom-left-radius: 5px; margin-bottom: 20px; background-color: #5f5f5f; border: 1px solid #ccc; + border-top: none; +} + +.example-tabs + .example-code { + border-top-left-radius: 0; + border-top-right-radius: 0; } + .example-code pre { margin: 0; font-size: 14px; line-height: 1.5; } + +.render-button-preview { + position: absolute; + bottom: 10px; + right: 10px; + margin-top: 0; + background-color: rgba(137, 255, 18, 0.9); + backdrop-filter: blur(4px); + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); +} + .example-preview { + position: relative; padding: 10px; border: 1px solid #ccc; - border-start-end-radius: 5px; - border-start-start-radius: 5px; + border-radius: 5px; + margin-bottom: 10px; aspect-ratio: 16/9; display: flex; flex-direction: column; justify-content: center; align-items: center; } + .example-preview > * { margin: 0; } @@ -207,7 +390,7 @@ watch(previewContainer, (el) => { .render-button { margin-top: 10px; padding: 8px 16px; - background-color: #4a8bfc; + background-color: rgba(137, 255, 18, 0.9); color: white; border: none; border-radius: 4px; @@ -217,10 +400,11 @@ watch(previewContainer, (el) => { } .render-button:hover { - background-color: #3a7bec; + background-color: rgba(102, 203, 1, 0.9); } .render-button:active { - background-color: #2a6bdc; + background-color: rgba(137, 255, 18, 0.9); + transform: scale(0.98); } \ No newline at end of file diff --git a/apps/documentation/components/MarkdownImporter.vue b/apps/documentation/components/MarkdownImporter.vue index 84ab663..aaad8d6 100644 --- a/apps/documentation/components/MarkdownImporter.vue +++ b/apps/documentation/components/MarkdownImporter.vue @@ -57,53 +57,74 @@ const fetchMarkdown = async (path) => { } } -// Function to apply syntax highlighting after the content is rendered +// Function to safely apply syntax highlighting const applySyntaxHighlighting = () => { // Select all code blocks const codeBlocks = document.querySelectorAll('.markdown-content pre code') // Apply highlighting to each code block codeBlocks?.forEach((block) => { - // Make sure block has a className property - if (!block || typeof block.className !== 'string') { + // Make sure block exists and has content + if (!block || !block.textContent) { return } - // Check if a language class is present - const classList = block.className.split(' ') - const langClass = classList.find(cls => typeof cls === 'string' && cls.startsWith('language-')) - - if (langClass) { - // Extract the language name - const lang = typeof langClass === 'string' ? langClass.replace('language-', '') : '' + try { + // Check if a language class is present + const classList = block.className ? block.className.split(' ') : [] + const langClass = classList.find(cls => typeof cls === 'string' && cls.startsWith('language-')) - // Apply highlighting if the language is supported - if (lang && hljs.getLanguage(lang)) { - hljs.highlightElement(block) + if (langClass) { + // Extract the language name + const lang = langClass.replace('language-', '') + + // Apply highlighting if the language is supported + if (lang && hljs.getLanguage(lang)) { + hljs.highlightElement(block) + } else { + // Only apply auto-detection if we have content + if (block.textContent.trim()) { + hljs.highlightElement(block) + } + } } else { - // Try auto-detection for unknown languages - hljs.highlightAuto(block) + // Only apply auto-detection if we have content + if (block.textContent.trim()) { + hljs.highlightElement(block) + } } - } else { - // No language specified, use auto-detection - hljs.highlightAuto(block) + } catch (error) { + // Log the error but don't break the rendering + console.warn('Error highlighting code block:', error) + + // Apply basic styling if highlighting fails + block.classList.add('plain-code') } }) } onMounted(async () => { - // Get the base URL - const baseUrl = import.meta.env.BASE_URL || '/' - // Create a path that's relative to the public directory - const fullPath = `${baseUrl}${props.path}` - - // Fetch and process the markdown - const markdownContent = await fetchMarkdown(fullPath) - htmlContent.value = marked.parse(markdownContent) - - // Use nextTick to ensure the content is in the DOM before highlighting - await nextTick() - applySyntaxHighlighting() + try { + // Get the base URL + const baseUrl = import.meta.env.BASE_URL || '/' + // Create a path that's relative to the public directory + const fullPath = `${baseUrl}${props.path}` + + // Fetch and process the markdown + const markdownContent = await fetchMarkdown(fullPath) + + // Only parse if we have content + if (markdownContent && typeof markdownContent === 'string') { + htmlContent.value = marked.parse(markdownContent) + + // Use nextTick to ensure the content is in the DOM before highlighting + await nextTick() + applySyntaxHighlighting() + } + } catch (error) { + console.error('Error rendering markdown:', error) + htmlContent.value = '
Error loading content
' + } }) @@ -175,4 +196,19 @@ onMounted(async () => { color: #ddd; } } + +/* Style for error messages */ +.error-message { + color: #e74c3c; + padding: 1rem; + border: 1px solid #e74c3c; + border-radius: 4px; + background-color: rgba(231, 76, 60, 0.1); + margin: 1rem 0; +} + +/* Style for plain code when highlighting fails */ +.plain-code { + color: #e6e6e6; +} \ No newline at end of file diff --git a/apps/documentation/docs/components/button.md b/apps/documentation/docs/components/button.md index 832a11c..d6b3037 100644 --- a/apps/documentation/docs/components/button.md +++ b/apps/documentation/docs/components/button.md @@ -1,6 +1,11 @@ Primary Button diff --git a/apps/documentation/docs/components/index.md b/apps/documentation/docs/components/index.md index c369c02..28aef24 100644 --- a/apps/documentation/docs/components/index.md +++ b/apps/documentation/docs/components/index.md @@ -1,3 +1,38 @@ # Components + + Primary Button + + + + + + + + + + \ No newline at end of file From 88181b1be6c912d096ad05d88be311399733eafe Mon Sep 17 00:00:00 2001 From: Dev By Ray <6241164+devbyray@users.noreply.github.com> Date: Wed, 2 Apr 2025 08:01:02 +0200 Subject: [PATCH 06/13] feat(component): enhance ComponentExample with style handling and unique ID generation --- .../components/ComponentExample.vue | 139 ++++++++++++------ apps/documentation/docs/components/button.md | 5 - packages/components/button/README.md | 2 +- 3 files changed, 92 insertions(+), 54 deletions(-) diff --git a/apps/documentation/components/ComponentExample.vue b/apps/documentation/components/ComponentExample.vue index c1f1a7b..dd443f7 100644 --- a/apps/documentation/components/ComponentExample.vue +++ b/apps/documentation/components/ComponentExample.vue @@ -1,5 +1,5 @@ diff --git a/apps/documentation/docs/components/button.md b/apps/documentation/docs/components/button.md index d6b3037..d305d4c 100644 --- a/apps/documentation/docs/components/button.md +++ b/apps/documentation/docs/components/button.md @@ -1,11 +1,6 @@ Primary Button diff --git a/packages/components/button/README.md b/packages/components/button/README.md index 74a324e..48b5977 100644 --- a/packages/components/button/README.md +++ b/packages/components/button/README.md @@ -20,7 +20,7 @@ import '@devbyray/vue-wc-button'; -Click me +Click me Primary Button From edf8a7902a0d9b273aa330c06e4f6713d93d9023 Mon Sep 17 00:00:00 2001 From: Dev By Ray <6241164+devbyray@users.noreply.github.com> Date: Wed, 2 Apr 2025 08:03:52 +0200 Subject: [PATCH 07/13] feat(package): add exports field for module resolution --- packages/components/package.json | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/components/package.json b/packages/components/package.json index cb89d30..2d3fada 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -5,6 +5,13 @@ "main": "dist/index.js", "module": "dist/index.mjs", "types": "dist/index.d.ts", + "exports": { + ".": { + "types": "./dist/index.d.ts", + "import": "./dist/index.mjs", + "require": "./dist/index.js" + } + }, "files": [ "dist" ], From d16d5d2f972914ce7e04ce71927a5dec765aa3d9 Mon Sep 17 00:00:00 2001 From: Dev By Ray <6241164+devbyray@users.noreply.github.com> Date: Wed, 2 Apr 2025 10:16:06 +0200 Subject: [PATCH 08/13] fix(package): correct paths in package.json for consistency --- packages/components/package.json | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/components/package.json b/packages/components/package.json index 2d3fada..3102395 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -2,14 +2,15 @@ "name": "@devbyray/vue-wc-components", "version": "0.0.12", "description": "All accessible Vue web components in one package", - "main": "dist/index.js", - "module": "dist/index.mjs", - "types": "dist/index.d.ts", + "main": "./dist/index.js", + "module": "./dist/index.mjs", + "types": "./dist/index.d.ts", "exports": { ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", - "require": "./dist/index.js" + "require": "./dist/index.js", + "default": "./dist/index.js" } }, "files": [ From 3620ed608ff7fdee1db0d596d079b9f1bdbe9222 Mon Sep 17 00:00:00 2001 From: Dev By Ray <6241164+devbyray@users.noreply.github.com> Date: Wed, 2 Apr 2025 21:21:23 +0200 Subject: [PATCH 09/13] feat(docs): add resolve alias for component path in VitePress config --- apps/documentation/.vitepress/config.mjs | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/apps/documentation/.vitepress/config.mjs b/apps/documentation/.vitepress/config.mjs index c393ff8..6d11d97 100644 --- a/apps/documentation/.vitepress/config.mjs +++ b/apps/documentation/.vitepress/config.mjs @@ -1,4 +1,5 @@ import { defineConfig } from 'vitepress' +import { resolve } from 'path' // https://vitepress.dev/reference/site-config export default defineConfig({ @@ -36,6 +37,16 @@ export default defineConfig({ vite: { optimizeDeps: { include: ['marked'] + }, + resolve: { + alias: { + '@devbyray/vue-wc-components': resolve(__dirname, '../../../packages/components') + } + }, + build: { + commonjsOptions: { + strictRequires: true + } } } }) From 18407d9898420c7bc4025846043bfeea5cfa8601 Mon Sep 17 00:00:00 2001 From: Dev By Ray <6241164+devbyray@users.noreply.github.com> Date: Wed, 2 Apr 2025 21:26:42 +0200 Subject: [PATCH 10/13] fix(docs): update VitePress config to point to specific dist file for component imports --- apps/documentation/.vitepress/config.mjs | 4 +++- apps/documentation/.vitepress/theme/index.js | 3 ++- apps/documentation/package.json | 3 ++- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/apps/documentation/.vitepress/config.mjs b/apps/documentation/.vitepress/config.mjs index 6d11d97..3e7f399 100644 --- a/apps/documentation/.vitepress/config.mjs +++ b/apps/documentation/.vitepress/config.mjs @@ -40,7 +40,9 @@ export default defineConfig({ }, resolve: { alias: { - '@devbyray/vue-wc-components': resolve(__dirname, '../../../packages/components') + // Point to the specific dist file rather than the directory + '@devbyray/vue-wc-components': resolve(__dirname, '../../../packages/components/dist/index.js'), + '@devbyray/vue-wc-components/dist/index.js': resolve(__dirname, '../../../packages/components/dist/index.js') } }, build: { diff --git a/apps/documentation/.vitepress/theme/index.js b/apps/documentation/.vitepress/theme/index.js index 91c52f8..15620b1 100644 --- a/apps/documentation/.vitepress/theme/index.js +++ b/apps/documentation/.vitepress/theme/index.js @@ -4,7 +4,8 @@ import DefaultTheme from 'vitepress/theme' import MarkdownImporter from '../../components/MarkdownImporter.vue' import ComponentExample from '../../components/ComponentExample.vue' import './style.css' -import '@devbyray/vue-wc-components' +// Import the package via its entry point +import '@devbyray/vue-wc-components/dist/index.js' /** @type {import('vitepress').Theme} */ export default { diff --git a/apps/documentation/package.json b/apps/documentation/package.json index 7790d83..77cb8c6 100644 --- a/apps/documentation/package.json +++ b/apps/documentation/package.json @@ -4,8 +4,9 @@ "description": "A Vue-based accessible design system with headless web components", "private": false, "scripts": { + "build:deps": "pnpm --filter @devbyray/vue-wc-components run build", "dev": "npm run copy-readme && vitepress dev", - "build": "npm run copy-readme && vitepress build", + "build": "npm run build:deps && npm run copy-readme && vitepress build", "preview": "vitepress preview", "copy-readme": "node scripts/copy-readme.js" }, From dcf58838ba08fb1f85dd4e5ee6b137c7e00f5e13 Mon Sep 17 00:00:00 2001 From: Dev By Ray <6241164+devbyray@users.noreply.github.com> Date: Wed, 2 Apr 2025 21:31:45 +0200 Subject: [PATCH 11/13] fix(docs): update VitePress config to use specific entry point for component imports --- apps/documentation/.vitepress/config.mjs | 22 +++++++++----------- apps/documentation/.vitepress/theme/index.js | 3 +-- 2 files changed, 11 insertions(+), 14 deletions(-) diff --git a/apps/documentation/.vitepress/config.mjs b/apps/documentation/.vitepress/config.mjs index 3e7f399..47ce6bb 100644 --- a/apps/documentation/.vitepress/config.mjs +++ b/apps/documentation/.vitepress/config.mjs @@ -38,17 +38,15 @@ export default defineConfig({ optimizeDeps: { include: ['marked'] }, - resolve: { - alias: { - // Point to the specific dist file rather than the directory - '@devbyray/vue-wc-components': resolve(__dirname, '../../../packages/components/dist/index.js'), - '@devbyray/vue-wc-components/dist/index.js': resolve(__dirname, '../../../packages/components/dist/index.js') - } - }, - build: { - commonjsOptions: { - strictRequires: true - } - } + // resolve: { + // alias: { + // '@devbyray/vue-wc-components': resolve(__dirname, '../../../packages/components') + // } + // }, + // build: { + // commonjsOptions: { + // strictRequires: true + // } + // } } }) diff --git a/apps/documentation/.vitepress/theme/index.js b/apps/documentation/.vitepress/theme/index.js index 15620b1..91c52f8 100644 --- a/apps/documentation/.vitepress/theme/index.js +++ b/apps/documentation/.vitepress/theme/index.js @@ -4,8 +4,7 @@ import DefaultTheme from 'vitepress/theme' import MarkdownImporter from '../../components/MarkdownImporter.vue' import ComponentExample from '../../components/ComponentExample.vue' import './style.css' -// Import the package via its entry point -import '@devbyray/vue-wc-components/dist/index.js' +import '@devbyray/vue-wc-components' /** @type {import('vitepress').Theme} */ export default { From d2782c87a50e34815e77f27efa8f0ed83ee0ec9f Mon Sep 17 00:00:00 2001 From: Dev By Ray <6241164+devbyray@users.noreply.github.com> Date: Wed, 2 Apr 2025 21:36:12 +0200 Subject: [PATCH 12/13] feat(build): add Vercel configuration for deployment --- package.json | 4 +++- vercel.json | 13 +++++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 vercel.json diff --git a/package.json b/package.json index a0f60b2..baf75f9 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,9 @@ "lint": "pnpm -r lint", "test": "pnpm -r test", "docs:dev": "pnpm --filter @devbyray/vue-wc-documentation dev", - "docs:build": "pnpm --filter @devbyray/vue-wc-documentation build" + "docs:build": "pnpm --filter @devbyray/vue-wc-documentation build", + "vercel-build": "pnpm build:deps && pnpm docs:build", + "build:deps": "pnpm --filter @devbyray/vue-wc-core build && pnpm --filter ./packages/components/button build && pnpm --filter ./packages/components/input build && pnpm --filter ./packages/components/icon build && pnpm --filter @devbyray/vue-wc-components build" }, "keywords": [ "vue", diff --git a/vercel.json b/vercel.json new file mode 100644 index 0000000..aec5570 --- /dev/null +++ b/vercel.json @@ -0,0 +1,13 @@ +{ + "version": 2, + "builds": [ + { + "src": "package.json", + "use": "@vercel/node", + "config": { + "buildCommand": "pnpm vercel-build" + } + } + ], + "installCommand": "pnpm install" +} \ No newline at end of file From 9070369b2e2c532315642a6b8955bb300f05c471 Mon Sep 17 00:00:00 2001 From: Dev By Ray <6241164+devbyray@users.noreply.github.com> Date: Wed, 2 Apr 2025 21:48:27 +0200 Subject: [PATCH 13/13] fix(build): correct build command in Vercel configuration --- vercel.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vercel.json b/vercel.json index aec5570..b5d649f 100644 --- a/vercel.json +++ b/vercel.json @@ -5,7 +5,7 @@ "src": "package.json", "use": "@vercel/node", "config": { - "buildCommand": "pnpm vercel-build" + "buildCommand": "pnpm run vercel-build" } } ],