[
{
"path": ".gitignore",
"content": "*.log\n*.map\n\n.DS_Store\n\ndist\nnode_modules\n"
},
{
"path": "README.md",
"content": "# outset\n\n[](https://www.npmjs.com/package/outset)\n\nA minimal frontend boilerplate, emphasizing workflow.\n\n## Getting Started\n\nIn your terminal:\n\n```shell\n# install outset globally\n$ npm i outset -g\n\n# use the `outset` command to create a project\n# unless a path is specified, the template is copied to the CWD\n$ outset [path]\n\n# enter the new project directory\n$ cd [path]\n\n# install dependencies\n$ npm i\n\n# start building\n$ npm start\n```\n\nIn your browser: [http://localhost:1234/](http://localhost:1234/)\n\n## License\n\n[MIT](https://opensource.org/licenses/MIT). © 2022 Michael Cavalea\n"
},
{
"path": "index.mjs",
"content": "#!/usr/bin/env node\n\nimport fs from 'fs-extra'\nimport { URL } from 'url'\n\nconst dest = `${ process.cwd() }/${ process.argv[2] || '.' }`\nconst dirname = new URL('.', import.meta.url).pathname\n\ntry {\n await fs.copy(`${ dirname }template`, dest)\n} catch (error) {\n console.log(error.message)\n}\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"outset\",\n \"version\": \"5.0.1\",\n \"description\": \"A minimal frontend boilerplate, emphasizing workflow.\",\n \"license\": \"MIT\",\n \"repository\": \"callmecavs/outset\",\n \"author\": {\n \"name\": \"Michael Cavalea\",\n \"email\": \"callmecavs@gmail.com\",\n \"url\": \"http://callmecavs.com/\"\n },\n \"engines\": {\n \"node\": \">= 16\"\n },\n \"bin\": {\n \"outset\": \"index.mjs\"\n },\n \"keywords\": [\n \"boilerplate\",\n \"frontend\",\n \"minimal\"\n ],\n \"devDependencies\": {\n \"fs-extra\": \"^10.1.0\"\n }\n}\n"
},
{
"path": "template/.gitignore",
"content": "*.log\n*.map\n\n.DS_Store\n.parcel-cache\n\ndist\nnode_modules\n"
},
{
"path": "template/.htmlnanorc",
"content": "{\n \"minifySvg\": false\n}\n"
},
{
"path": "template/.parcelrc",
"content": "{\n \"extends\": \"@parcel/config-default\",\n \"resolvers\": [\n \"@parcel/resolver-glob\",\n \"...\"\n ]\n}\n"
},
{
"path": "template/.posthtmlrc",
"content": "{\n \"plugins\": {\n \"posthtml-include\": {\n \"root\": \"./src/html\"\n }\n }\n}\n"
},
{
"path": "template/package.json",
"content": "{\n \"name\": \"\",\n \"version\": \"0.0.1\",\n \"description\": \"\",\n \"license\": \"\",\n \"repository\": \"\",\n \"author\": {\n \"name\": \"\",\n \"email\": \"\",\n \"url\": \"\"\n },\n \"engines\": {\n \"node\": \">= 16\"\n },\n \"browserslist\": \"defaults\",\n \"source\": \"src/html/index.html\",\n \"scripts\": {\n \"clean\": \"rm -rf .parcel-cache dist\",\n \"prod\": \"npm run clean && parcel build\",\n \"start\": \"npm run clean && parcel\"\n },\n \"devDependencies\": {\n \"@parcel/resolver-glob\": \"^2.6.0\",\n \"@parcel/transformer-sass\": \"^2.6.0\",\n \"autoprefixer\": \"^10.4.7\",\n \"parcel\": \"^2.6.0\",\n \"posthtml-include\": \"^1.7.4\",\n \"sharp\": \"^0.30.6\"\n }\n}\n"
},
{
"path": "template/sharp.config.json",
"content": "{\n \"jpeg\": {\n \"quality\": 80,\n \"progressive\": true\n },\n \"png\": {\n \"quality\": 80,\n \"progressive\": true\n },\n \"webp\": {\n \"quality\": 80\n }\n}\n"
},
{
"path": "template/src/assets/fonts/.gitkeep",
"content": ""
},
{
"path": "template/src/assets/images/.gitkeep",
"content": ""
},
{
"path": "template/src/assets/videos/.gitkeep",
"content": ""
},
{
"path": "template/src/html/includes/meta.html",
"content": "\n\n\n\n\n"
},
{
"path": "template/src/html/index.html",
"content": "\n\n\n \n \n\n \n \n \n\n \n \n\n"
},
{
"path": "template/src/js/index.js",
"content": "import detectWebP from './utils/detect-webp.js'\n\nif (module.hot) {\n module.hot.accept()\n}\n\nconst boot = event => {\n detectWebP()\n}\n\ndocument.addEventListener('DOMContentLoaded', boot)\n"
},
{
"path": "template/src/js/utils/cache.js",
"content": "const cache = Object.create(null)\n\nif (process.env.NODE_ENV !== 'production') {\n window.cache = cache\n}\n\nexport default cache\n"
},
{
"path": "template/src/js/utils/detect-webp.js",
"content": "const src = 'data:image/webp;base64,UklGRhIAAABXRUJQVlA4TAYAAAAvQWxvAGs='\n\nconst detect = () => {\n const { body } = document\n const image = document.createElement('img')\n image.addEventListener('load', () => body.classList.add('webp'))\n image.addEventListener('error', () => body.classList.add('no-webp'))\n image.setAttribute('src', src)\n}\n\nexport default detect\n"
},
{
"path": "template/src/sass/_base.scss",
"content": "html {\n font-size: 10px; // 1rem = 10px\n}\n\nbody {\n -webkit-font-smoothing: antialiased;\n}\n"
},
{
"path": "template/src/sass/_fonts.scss",
"content": ""
},
{
"path": "template/src/sass/_mixins.scss",
"content": "@use \"sass:math\";\n\n@mixin font-face($font-name, $file-name, $font-weight) {\n @font-face {\n font-family: $font-name;\n font-weight: $font-weight;\n // src: url(\"../assets/fonts/#{ $file-name }.\") format(\"\");\n }\n}\n\n@mixin image-replace {\n overflow: hidden;\n text-indent: 101%;\n white-space: nowrap;\n}\n\n@mixin letter-spacing($number) {\n letter-spacing: math.div($number, 1000) * 1em;\n}\n\n@mixin max($width) {\n @media screen and (max-width: $width - 1) {\n @content;\n }\n}\n\n@mixin min($width) {\n @media screen and (min-width: $width) {\n @content;\n }\n}\n\n@mixin x2() {\n @media (min-resolution: 2dppx) {\n @content;\n }\n}\n"
},
{
"path": "template/src/sass/_reset.scss",
"content": "*:where(:not(svg, svg *)) {\n all: unset;\n display: revert;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nimg {\n max-width: 100%;\n}\n"
},
{
"path": "template/src/sass/_vars.scss",
"content": "$tablet: 768px;\n$desktop: 1024px;\n"
},
{
"path": "template/src/sass/_z-index.scss",
"content": ""
},
{
"path": "template/src/sass/style.scss",
"content": "@import \"vars\";\n@import \"mixins\";\n\n@import \"reset\";\n@import \"fonts\";\n@import \"base\";\n@import \"z-index\";\n"
}
]