Repository: callmecavs/outset
Branch: master
Commit: 8737d12f8ae8
Files: 25
Total size: 4.6 KB

Directory structure:
gitextract_4_hgu1qj/

├── .gitignore
├── README.md
├── index.mjs
├── package.json
└── template/
    ├── .gitignore
    ├── .htmlnanorc
    ├── .parcelrc
    ├── .posthtmlrc
    ├── package.json
    ├── sharp.config.json
    └── src/
        ├── assets/
        │   ├── fonts/
        │   │   └── .gitkeep
        │   ├── images/
        │   │   └── .gitkeep
        │   └── videos/
        │       └── .gitkeep
        ├── html/
        │   ├── includes/
        │   │   └── meta.html
        │   └── index.html
        ├── js/
        │   ├── index.js
        │   └── utils/
        │       ├── cache.js
        │       └── detect-webp.js
        └── sass/
            ├── _base.scss
            ├── _fonts.scss
            ├── _mixins.scss
            ├── _reset.scss
            ├── _vars.scss
            ├── _z-index.scss
            └── style.scss

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
*.log
*.map

.DS_Store

dist
node_modules


================================================
FILE: README.md
================================================
# outset

[![Outset on NPM](https://img.shields.io/npm/v/outset.svg?style=flat-square)](https://www.npmjs.com/package/outset)

A minimal frontend boilerplate, emphasizing workflow.

## Getting Started

In your terminal:

```shell
# install outset globally
$ npm i outset -g

# use the `outset` command to create a project
# unless a path is specified, the template is copied to the CWD
$ outset [path]

# enter the new project directory
$ cd [path]

# install dependencies
$ npm i

# start building
$ npm start
```

In your browser: [http://localhost:1234/](http://localhost:1234/)

## License

[MIT](https://opensource.org/licenses/MIT). © 2022 Michael Cavalea


================================================
FILE: index.mjs
================================================
#!/usr/bin/env node

import fs from 'fs-extra'
import { URL } from 'url'

const dest = `${ process.cwd() }/${ process.argv[2] || '.' }`
const dirname = new URL('.', import.meta.url).pathname

try {
  await fs.copy(`${ dirname }template`, dest)
} catch (error) {
  console.log(error.message)
}


================================================
FILE: package.json
================================================
{
  "name": "outset",
  "version": "5.0.1",
  "description": "A minimal frontend boilerplate, emphasizing workflow.",
  "license": "MIT",
  "repository": "callmecavs/outset",
  "author": {
    "name": "Michael Cavalea",
    "email": "callmecavs@gmail.com",
    "url": "http://callmecavs.com/"
  },
  "engines": {
    "node": ">= 16"
  },
  "bin": {
    "outset": "index.mjs"
  },
  "keywords": [
    "boilerplate",
    "frontend",
    "minimal"
  ],
  "devDependencies": {
    "fs-extra": "^10.1.0"
  }
}


================================================
FILE: template/.gitignore
================================================
*.log
*.map

.DS_Store
.parcel-cache

dist
node_modules


================================================
FILE: template/.htmlnanorc
================================================
{
  "minifySvg": false
}


================================================
FILE: template/.parcelrc
================================================
{
  "extends": "@parcel/config-default",
  "resolvers": [
    "@parcel/resolver-glob",
    "..."
  ]
}


================================================
FILE: template/.posthtmlrc
================================================
{
  "plugins": {
    "posthtml-include": {
      "root": "./src/html"
    }
  }
}


================================================
FILE: template/package.json
================================================
{
  "name": "",
  "version": "0.0.1",
  "description": "",
  "license": "",
  "repository": "",
  "author": {
    "name": "",
    "email": "",
    "url": ""
  },
  "engines": {
    "node": ">= 16"
  },
  "browserslist": "defaults",
  "source": "src/html/index.html",
  "scripts": {
    "clean": "rm -rf .parcel-cache dist",
    "prod": "npm run clean && parcel build",
    "start": "npm run clean && parcel"
  },
  "devDependencies": {
    "@parcel/resolver-glob": "^2.6.0",
    "@parcel/transformer-sass": "^2.6.0",
    "autoprefixer": "^10.4.7",
    "parcel": "^2.6.0",
    "posthtml-include": "^1.7.4",
    "sharp": "^0.30.6"
  }
}


================================================
FILE: template/sharp.config.json
================================================
{
  "jpeg": {
    "quality": 80,
    "progressive": true
  },
  "png": {
    "quality": 80,
    "progressive": true
  },
  "webp": {
    "quality": 80
  }
}


================================================
FILE: template/src/assets/fonts/.gitkeep
================================================


================================================
FILE: template/src/assets/images/.gitkeep
================================================


================================================
FILE: template/src/assets/videos/.gitkeep
================================================


================================================
FILE: template/src/html/includes/meta.html
================================================
<title></title>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="">


================================================
FILE: template/src/html/index.html
================================================
<!DOCTYPE html>

<html lang="en-US">
  <head>
    <include src="./includes/meta.html"></include>

    <link rel="stylesheet" href="../sass/style.scss">
  </head>
  <body>

    <script type="module" src="../js/index.js"></script>
  </body>
</html>


================================================
FILE: template/src/js/index.js
================================================
import detectWebP from './utils/detect-webp.js'

if (module.hot) {
  module.hot.accept()
}

const boot = event => {
  detectWebP()
}

document.addEventListener('DOMContentLoaded', boot)


================================================
FILE: template/src/js/utils/cache.js
================================================
const cache = Object.create(null)

if (process.env.NODE_ENV !== 'production') {
  window.cache = cache
}

export default cache


================================================
FILE: template/src/js/utils/detect-webp.js
================================================
const src = 'data:image/webp;base64,UklGRhIAAABXRUJQVlA4TAYAAAAvQWxvAGs='

const detect = () => {
  const { body } = document
  const image = document.createElement('img')
  image.addEventListener('load', () => body.classList.add('webp'))
  image.addEventListener('error', () => body.classList.add('no-webp'))
  image.setAttribute('src', src)
}

export default detect


================================================
FILE: template/src/sass/_base.scss
================================================
html {
  font-size: 10px;      // 1rem = 10px
}

body {
  -webkit-font-smoothing: antialiased;
}


================================================
FILE: template/src/sass/_fonts.scss
================================================


================================================
FILE: template/src/sass/_mixins.scss
================================================
@use "sass:math";

@mixin font-face($font-name, $file-name, $font-weight) {
  @font-face {
    font-family: $font-name;
    font-weight: $font-weight;
    // src: url("../assets/fonts/#{ $file-name }.") format("");
  }
}

@mixin image-replace {
  overflow: hidden;
  text-indent: 101%;
  white-space: nowrap;
}

@mixin letter-spacing($number) {
  letter-spacing: math.div($number, 1000) * 1em;
}

@mixin max($width) {
  @media screen and (max-width: $width - 1) {
    @content;
  }
}

@mixin min($width) {
  @media screen and (min-width: $width) {
    @content;
  }
}

@mixin x2() {
  @media (min-resolution: 2dppx) {
    @content;
  }
}


================================================
FILE: template/src/sass/_reset.scss
================================================
*:where(:not(svg, svg *)) {
  all: unset;
  display: revert;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img {
  max-width: 100%;
}


================================================
FILE: template/src/sass/_vars.scss
================================================
$tablet:  768px;
$desktop: 1024px;


================================================
FILE: template/src/sass/_z-index.scss
================================================


================================================
FILE: template/src/sass/style.scss
================================================
@import "vars";
@import "mixins";

@import "reset";
@import "fonts";
@import "base";
@import "z-index";