{"id":26606997,"url":"https://github.com/grossacasac/create-dom99-app","last_synced_at":"2025-04-09T20:43:26.576Z","repository":{"id":78075584,"uuid":"116296022","full_name":"GrosSacASac/create-dom99-app","owner":"GrosSacASac","description":"An opinionated starter pack for front end web development","archived":false,"fork":false,"pushed_at":"2022-10-27T13:07:34.000Z","size":1132,"stargazers_count":4,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-23T22:38:48.920Z","etag":null,"topics":["frontend","hacktoberfest","javascript","multipage-application","starter","web"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GrosSacASac.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license.txt","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}},"created_at":"2018-01-04T18:53:59.000Z","updated_at":"2023-12-05T20:51:42.000Z","dependencies_parsed_at":"2023-03-07T07:45:15.958Z","dependency_job_id":null,"html_url":"https://github.com/GrosSacASac/create-dom99-app","commit_stats":null,"previous_names":[],"tags_count":4,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GrosSacASac%2Fcreate-dom99-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GrosSacASac%2Fcreate-dom99-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GrosSacASac%2Fcreate-dom99-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GrosSacASac%2Fcreate-dom99-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GrosSacASac","download_url":"https://codeload.github.com/GrosSacASac/create-dom99-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248110469,"owners_count":21049492,"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":["frontend","hacktoberfest","javascript","multipage-application","starter","web"],"created_at":"2025-03-23T22:35:30.236Z","updated_at":"2025-04-09T20:43:26.568Z","avatar_url":"https://github.com/GrosSacASac.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# create-dom99-app\n\n## An opinionated starter pack for front end web development\n\nMade for static Single page apps. Get started with files and structure ready.\n\n\n## What is included\n\n\n### Application architecture\n\n[core](https://github.com/mauriciosoares/core.js)\n\n### DOM manipulation\n\n[dom99](https://dom99.now.sh/)\n\n### Linting\n\n[eslint](https://eslint.org/)\n\n### Testing\n\n[AVA](https://github.com/avajs/ava)\n\n\n\n### Zero second compile time during development\n\nWhen developing, thanks to ES-modules there is no need to run a bundler, just refresh your browser to see changes.\n\n## How to\n\n### Requirements\n\nNode 14+\n\n### Download\n\nDownload on [github.com/GrosSacASac/create-dom99-app](https://github.com/GrosSacASac/create-dom99-app/archive/master.zip)\n\n\n### Install dependencies\n\n`npm ci`\n\n### Edit files\n\nEdit files in `source/`\n\n#### How to create a new html page\n\n * Create a new html file next to index.html, for example game.html\n * Create a new css file next to index.css, for example game.css\n\n#### How to create reusable components\n\n * Create a folder of the component name inside source/components\n * Create a html file with the template of the component for example  source/components/superParagrah.html\n * Optional, create a css and js file in the same folder\n\n#### How to use a reusable component\n\n * Inside your html import it with `\u003cscript type=\"text/html\" src=\"components/superParagraph/superParagraph.html\"\u003e\u003c/script\u003e`\n * _Optional_ inside your css of the page or pages that is using it import its stylesheet with `@import '../components/superParagraph/superParagraph.css';`\n * _Optional_ inside your js main of the page or pages that is using it import its js file with `import * as superParagraph from \"../components/superParagraph/superParagraph.js\";` and use it\n\n### Dev\n\n\nTo enable auto reload on file change use \n\n`npm run serve-dev`\n\nOpen http://localhost:8080/ (`source/index.html`)\n\n### How does it work without compilation step ?\n\nHtml includes are handled by `tools/inlineHTMLRuntime.js`. It inlines every imported html file.  It checks for `type=\"text/html\"` and `src`. Open [`source/index.html`](./source/index.html) for an example.\n\n```\n\u003cscript type=\"text/html\" src=\"html/superParagraph.html\"\u003e\u003c/script\u003e\n```\n\nJS and CSS modules are handled by the browser natively.\n\n## Build for production\n\n`npm run build-prod`\n\nThe results will be in `built/`\n\nThe results must be served as top level url.\n\n`npm run serve-prod`\n\nOr as individual commands\n\n`npm run inline-html`\n\nThis will run `tools/inlineHTML.js` which is almost like its runtime counterpart, except that it creates a new file with every import inlined to avoid network requests.\n\n`npm run static-copies`\n\nCopy static assets\n\n`npm run bundle-js`\n\nThis will run rollup, so that JS files also have their imports resolved to avoid network requests. It also minfies files.\n\n## Linting\n\n\n`npm run lint`\n\nand\n\n`npm run lint-fix` to automatically fix some issues\n\n## Testing\n\n`npm test`\n\n \n## License\n\n\n[CC0](./license.txt)\n\nDependencies may have other licenses. Feel free to change the license after you downloaded this starter pack  for a new project.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrossacasac%2Fcreate-dom99-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgrossacasac%2Fcreate-dom99-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrossacasac%2Fcreate-dom99-app/lists"}