{"id":18534778,"url":"https://github.com/atomicojs/site","last_synced_at":"2025-05-14T23:35:05.829Z","repository":{"id":56187594,"uuid":"502523217","full_name":"atomicojs/site","owner":"atomicojs","description":null,"archived":false,"fork":false,"pushed_at":"2024-03-13T03:42:01.000Z","size":202,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-30T01:06:59.868Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/atomicojs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2022-06-12T05:02:23.000Z","updated_at":"2022-12-14T03:53:45.000Z","dependencies_parsed_at":"2023-12-15T22:01:44.361Z","dependency_job_id":"b15871cc-4feb-4d06-a989-715ebbdab9b6","html_url":"https://github.com/atomicojs/site","commit_stats":{"total_commits":93,"total_committers":3,"mean_commits":31.0,"dds":0.3655913978494624,"last_synced_commit":"f410b3163f1a1563282b197a69b9a019576b495c"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomicojs%2Fsite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomicojs%2Fsite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomicojs%2Fsite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomicojs%2Fsite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atomicojs","download_url":"https://codeload.github.com/atomicojs/site/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253215713,"owners_count":21872737,"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":[],"created_at":"2024-11-06T19:16:55.776Z","updated_at":"2025-05-14T23:35:05.771Z","avatar_url":"https://github.com/atomicojs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Atomico](https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/h4.svg)![Atomico](https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/h3.svg)\r\n\r\n### Hi, I'm [@uppercod](https://twitter.com/uppercod), creator of Atomico and I want to thank you for starting with Atomico.\r\n\r\nIf you need help you can find it at:\r\n\r\n[![twitter](https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/twitter.svg)](https://twitter.com/atomicojs)\r\n[![discord](https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/discord.svg)](https://discord.gg/7z3rNhmkNE)\r\n[![documentation](https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/doc-1.svg)](https://atomico.gitbook.io/doc/)\r\n[![discord](https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/doc.svg)](https://webcomponents.dev/edit/collection/F7dm6YnMEDRtAl57RTXU/d6E4w07fsQbb0CelYQac)\r\n\r\nNow what you have installed is a quick start kit based on Vite, which you can scale for your project, now to continue you must execute the following commands:\r\n\r\n1. `npm install`\r\n2. `npm start` : Initialize the development server\r\n3. `npm build` : Optional, Generate a build of your project from the html file [index.html](index.html).\r\n\r\n## Workspace\r\n\r\n### Recommended structure\r\n\r\n```bash\r\nsrc\r\n  |- my-component\r\n  |  |- my-component.{js,jsx,ts,tsx}\r\n  |  |- my-component.test.js\r\n  |  |- README.md\r\n  |- components.js # import all components\r\n```\r\n\r\n\u003e The `npm run create` command, will create a webcomponent with the recommended structure, the template of this webcomponent can be edited in `templates/component.md`.\r\n\r\n## Scripts\r\n\r\n### npm run create\r\n\r\nCreate a new webcomponent inside src, according to the recommended structure, the template of this webcomponent can be edited in `templates/component.md`.\r\n\r\n### npm run start\r\n\r\ninitialize Vite server\r\n\r\n### npm run build\r\n\r\npackage the app using de Vite\r\n\r\n### npm run test\r\n\r\nRun a test environment in watch mode, as configured in `vite.config.js`.\r\n\r\n### npm run coverage\r\n\r\nRun a test environment with coverage, as configured in `vite.config.js`.\r\n\r\n### npm run exports\r\n\r\nAllows you to export your project to npm, this command executes changes in package.json before exporting and the changes will be reverted once exported.\r\n\r\ntemporary changes are:\r\n\r\n1. generation of the packages.json#exports\r\n2. generation of the pages.json#typesVersions\r\n3. Compilation of the files and generation of the types if the --types flag is used.\r\n\r\n## frequent questions\r\n\r\n### How to add postcss?\r\n\r\n`@atomico/vite`, allows to preprocess the css template string through postcss, to use this feature add in vite.config.js the following options:\r\n\r\n```js\r\nimport atomico from \"@atomico/vite\";\r\nimport { defineConfig } from \"vite\";\r\n\r\nexport default defineConfig({\r\n  ...\r\n  plugins: [\r\n    atomico({\r\n      cssLiterals: { postcss: true }, // 👈 CONFIGURATION TO ADD\r\n    }),\r\n  ],\r\n});\r\n```\r\n\r\nTo use postcss at least 1 plugin is required.\r\n\r\n```json\r\n\"postcss\": {\r\n  \"plugins\": {\r\n    \"postcss-import\": {}\r\n  }\r\n}\r\n```\r\n\r\n### How to publish on github page?\r\n\r\nAdd to `package.json#scripts.build`:\r\n\r\n```bash\r\n--outDir docs # modify the destination directory\r\n--base my-repo # github page folder\r\n```\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatomicojs%2Fsite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatomicojs%2Fsite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatomicojs%2Fsite/lists"}