Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/upstatement/puppy
Starter kit and delivery system for building static prototypes with Twig
https://github.com/upstatement/puppy
gulp prototyping puppy starter-kit template twig webpack
Last synced: 3 months ago
JSON representation
Starter kit and delivery system for building static prototypes with Twig
- Host: GitHub
- URL: https://github.com/upstatement/puppy
- Owner: Upstatement
- License: mit
- Created: 2019-08-16T12:30:53.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-05-26T17:22:06.000Z (over 1 year ago)
- Last Synced: 2023-05-26T18:25:59.962Z (over 1 year ago)
- Topics: gulp, prototyping, puppy, starter-kit, template, twig, webpack
- Language: HTML
- Homepage: https://puppy-template.upstatement.com/
- Size: 1.57 MB
- Stars: 41
- Watchers: 13
- Forks: 4
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# {{ Your Next Great Prototype }}  
> {{ Your next great prototype description }}
## 📜 About
- Pages are authored in HTML or, optionally, [Twig](https://github.com/twigjs/twig.js/wiki) and live in the [`src/pages`](src/pages) directory.
- Twig templates and partials live in [`src/templates`](src/templates).
- Site data files live in [`src/data`](src/data). Drop any `.json`, `.yml`, or `.js` file exporting a function into this directory and access the resulting data in Twig templates using `{{ site.data['path/to/file.ext'] }}`. Powered by [Puppy](https://www.npmjs.com/package/@upstatement/puppy).
- Styles are authored with [Sass](https://sass-lang.com/) and live in [`src/scss`](src/scss).
- Javascripts live in [`src/js`](src/js). They are transipiled at build time with [Babel](https://babeljs.io/) so that they can take advantage of [modern JS syntax](https://babeljs.io/docs/en/learn)
- Any files in the [`public`](public) directory are copied to the web root recursively at build time.
- Static assets are bundled at build time using [Webpack](https://webpack.js.org/).
- All source assets are pulled together with [Gulp](https://gulpjs.com/) and used to generate a static site in the `dist` directory.
## ✨ Install
```sh
# Install Node & NPM with [NVM](https://github.com/nvm-sh/nvm)
nvm install
# Install project dependencies
npm install
```
## 👩💻 Usage
### Development
```sh
# Start a local dev server
npm start
# Check for JS/SCSS style violations prior to commit
npm run lint
# Fix the fixable linter violations
npm run lint:fix
# Format code with Prettier
npm run format
```
### Production
```sh
# Build for production
npm run build
# Serve locally using `serve`
npx serve dist
```
### Removing Tests
This repository includes some automated [tests](https://github.com/Upstatement/puppy/tree/main/tests) that are not necessary when using Puppy as a starting template. To remove them, follow these steps:
1. Remove ava from project dependencies `npm uninstall --save-dev ava`
2. Remove the [`test` npm script](https://github.com/Upstatement/puppy/blob/main/package.json#L25)
3. Remove [`ava` config from package.json](https://github.com/Upstatement/puppy/blob/main/package.json#L36-L38)
4. Remove the [test step in the GitHub workflow](https://github.com/Upstatement/puppy/blob/main/.github/workflows/main.yml#L33)
### Thumbnail Previews
You can capture screenshots of your pages by setting the `thumbnail` attribute to `auto` in your page's front matter header:
```yml
thumbnail: auto
```
The next time you run `npm run build` a screenshot will be generated for that page and displayed in the prototype index.
If the automated screenshots aren't cutting it, you can provide your own by dropping an image into the `public/thumbnails` directory and referencing its name in your page's front matter header:
**Page**: `src/pages/example.html`
**Thumbnail**: `public/screenshots/example.png`
**Front Matter**:
```yml
thumbnail: example.png
```
## Deployment
The output of `npm run build` is a static site. You can drop the resulting `dist` directory on any web server.
An excellent choice is [Netlify](https://www.netlify.com/). You can deploy your work to Netlify with their [CLI tool](https://github.com/netlify/cli).
```sh
npm install netlify-cli -g
netlify init
netlify deploy
```
## Examples & Links
- **Blog Post:** Read about [the project](https://medium.com/stories-from-upstatement/hello-puppy-a-speedy-web-development-starter-kit-from-upstatement-92b94d1f1147?source=collection_home---4------0-----------------------), its philosophy and goals
- **Demo:** View the [Puppy Demo](https://github.com/Upstatement/puppy-demo) to see a sample project
- **Tutorial:** Follow the [tutorial](https://puppy-template.upstatement.com/tutorial.html) to get up and running
- View the [default template](https://puppy-template.upstatement.com/): this is the starting place once you clone and run Puppy for the first time
## 📝 License
Copyright © 2020 Upstatement, LLC
---
A [Puppy](https://github.com/Upstatement/puppy) 🐶 powered project