{"id":29196721,"url":"https://github.com/posetmage/wc","last_synced_at":"2025-07-02T06:09:18.730Z","repository":{"id":300017331,"uuid":"1004926216","full_name":"PosetMage/wc","owner":"PosetMage","description":"svelte 5 web-components template that compile with vite 6","archived":false,"fork":false,"pushed_at":"2025-06-29T07:43:41.000Z","size":100,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-29T08:30:55.450Z","etag":null,"topics":["svelte","vite","web-components"],"latest_commit_sha":null,"homepage":"","language":"Svelte","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PosetMage.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-19T11:50:15.000Z","updated_at":"2025-06-29T07:43:43.000Z","dependencies_parsed_at":"2025-06-19T13:25:23.787Z","dependency_job_id":"3c24a615-c637-488b-8f66-594c74e3d50e","html_url":"https://github.com/PosetMage/wc","commit_stats":null,"previous_names":["posetmage/wc"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/PosetMage/wc","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PosetMage%2Fwc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PosetMage%2Fwc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PosetMage%2Fwc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PosetMage%2Fwc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PosetMage","download_url":"https://codeload.github.com/PosetMage/wc/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PosetMage%2Fwc/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263083734,"owners_count":23411166,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["svelte","vite","web-components"],"created_at":"2025-07-02T06:09:18.204Z","updated_at":"2025-07-02T06:09:18.718Z","avatar_url":"https://github.com/PosetMage.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Svetle 5 Web Component Template\n\nA starter repository for building Sevlte 5 as web components with Vite 6 and deploying. This template supports multiple modules via configurable in `vite.config.ts`, and is automatically built and deployed via GitHub Actions.\n\n## Getting Started\n\n### Configuration\n\nOpen `vite.config.ts` and locate the `build.rollupOptions.input` section. Add, remove, or rename modules as needed:\n\n```ts\nexport default defineConfig({\n\tbuild: {\n\t\trollupOptions: {\n\t\t\tinput: {\n\t\t\t\tslides: resolve(__dirname, 'src/slides/main.ts'),\n\t\t\t\tdoc_ui: resolve(__dirname, 'src/doc_ui/main.ts'),\n\t\t\t\twc: resolve(__dirname, 'src/wc/main.ts')\n\t\t\t\t// Add your own modules here\n\t\t\t}\n\t\t}\n\t}\n});\n```\n\nAfter running `npm run build`, each module will be output as an ES module. ex:\n\n- `dist/slides.es.js`\n- `dist/doc_ui.es.js`\n- `dist/wc.es.js`\n\nThese are served from your deployment domain (e.g., `https://posetmage.com/wc/\u003cmodule\u003e.es.js`).\n\n---\n\n### Usage Examples\n\n#### 1. Document UI (Auto TOC Sidebar)\n\nEmbed the documentation UI component to automatically generate a table of contents sidebar:\n\n```html\n\u003cscript type=\"module\" src=\"https://posetmage.com/wc/doc_ui.es.js\"\u003e\u003c/script\u003e\n\n\u003csidebar-component\u003e\n\t\u003ctable-of-contents\u003e\u003c/table-of-contents\u003e\n\u003c/sidebar-component\u003e\n\n\u003cheading-id-injector\u003e {{ content }} \u003c/heading-id-injector\u003e\n```\n\nsee `demo/1/index.html`\n\n#### 2. Slides Mode\n\nTransform your Markdown content into a slide deck, with sidebar navigation:\n\nbut this need slide syntax, please see **[Example Slides Content](https://raw.githubusercontent.com/HomunMage/Content/main/Slides/2025/JSDC/index.md)** or **[Example Slides Page](https://homun.posetmage.com/Content/Slides/2025/JSDC/)**\n\n```html\n\u003cscript type=\"module\" src=\"https://posetmage.com/wc/slides.es.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"module\" src=\"https://posetmage.com/wc/doc_ui.es.js\"\u003e\u003c/script\u003e\n\n\u003cslides-component\u003e\u003c/slides-component\u003e\n\n\u003csidebar-component\u003e\n\t\u003ctable-of-slides\u003e\u003c/table-of-slides\u003e\n\u003c/sidebar-component\u003e\n\n\u003cheading-id-injector\u003e {{ content }} \u003c/heading-id-injector\u003e\n```\n\nsee `demo/2/index.html`\n\n---\n\n## Deployment and Development\n\nThis repo auto trigger GitHub Actions workflow (`.github/workflows/deploy.yml`) to build and deploy with github-page.\n\n### Self-Hosting Deployment (Kubernetes)\n\nThis template includes a `k8s/` directory with sample manifests for running your web components by a Kubernetes.\n(need modify `wc-deployment.yaml`)\n\n## Dev with Docker Compose\n\nIf you dont want to dev with node env, I'll recommand you docker,\n\n1. Start the dev container, Enter the container shell\n   From the project root:\n\n   ```bash\n   docker-compose up dev -d\n   docker-compose exec dev bash\n   ```\n\n2. Build your modules\n   in the termianl\n\n   ```bash\n   npm run build\n   ```\n\n   This outputs your ES modules into `dist/` folder\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposetmage%2Fwc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fposetmage%2Fwc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposetmage%2Fwc/lists"}