Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ideasonpurpose/asana

Asana CSV to PDF export tool
https://github.com/ideasonpurpose/asana

asana csv pdf

Last synced: 26 days ago
JSON representation

Asana CSV to PDF export tool

Awesome Lists containing this project

README 

        
# 11ty-Site-Boilerplate



Common boilerplate for creating [11ty](https://www.11ty.dev/docs/) static sites at [Ideas On Purpose](https://www.ideasonpurpose.com/).



## Getting Started

- `git clone https://github.com/ideasonpurpose/11ty-site-boilerplate.git .` - downloads a copy of this repository into the current terminal location. 

- `npm install` - install project dependencies, then

- `npm run start` - start the development environment at [//localhost:8080](http://localhost:8080)

- `npm run build` - build the site for production delivery.



Edit the `src` directory.



After `npm run build`, the `dist` directory is ready to be published.



## Structure

- `11ty` - SSG configuration, plugins, shortcodes etc.

- `src` - source folder, edit files here.

  - `data` - variables store, preferably JSON.

  - `includes` - reusable Nunjucks templates.

  - `layouts` - base layout templates.

  - `pages` - site content storage.

  - `assets` - store website assets here:

    - `favicon` - all files generated by [Real Favicon Generator](https://realfavicongenerator.net/) go in here

    - `fonts`

    - `img`

    - `js`

    - `pdf`

    - `sass`

    - `svg`

    - `video`

- `dist` - distribution, ready for production.



## Tooling

- [11ty](https://www.11ty.dev/docs/) - a simpler SSG

- Dart [Sass](https://www.npmjs.com/package/sass) - hot recompiled CSS

- `require('modules')` via [Browserify](http://browserify.org/)

- JS hot recompile via [Watchify](https://github.com/browserify/watchify)

- [Uglify](https://github.com/mishoo/UglifyJS) and [Babel](https://babeljs.io/) for ES6 builds

- on the fly browser reload via built-in 11ty support for [Browsersync](https://browsersync.io/)

- image optimization, transformation and rescale via [Sharp](https://github.com/lovell/sharp)



## Plugins

[github](https://github.com/ideasonpurpose/11ty-site-boilerplate/tree/main/11ty/plugins)

- [@11ty/eleventy-img](https://github.com/11ty/eleventy-img) - Provides image transformations and the `{% img %}` shortcode for ``

- eleventy-svg - local plugin. Provides the `{% svg %}` shortcode for inline ``'s



## Tests

[github](https://github.com/ideasonpurpose/11ty-site-boilerplate/tree/main/11ty/tests)

- Lighthouse: `npm run lighthouse` runs a live URL check (extranet or client production URL) on all pages crawled from sitemap.xml. Outputs results to `/reports/lighthouse`

  - tests configuration such as the url to check and optional login credentials are pulled from [config.js](https://github.com/ideasonpurpose/11ty-site-boilerplate/blob/main/11ty/config.js)



## Shortcodes

[github](https://github.com/ideasonpurpose/11ty-site-boilerplate/tree/main/11ty/shortcodes)

- Image: `{% img 'folder/test.jpg', 'alt text' %}` (file, alt text)

- SVG `{% svg 'folder/test.svg', 'custom-class' %}` (file, css class)

- Link `{% link "/test/", "Relative link text Here" %}` (url, link text)

- YouTube embed `{% youtube "UsFCsRbYDyA", 40 %}` (id, aspect ratio)

- Vimeo embed `{% vimeo "336812660", 40 %}` (id, aspect ratio)



## Formatting Links

- External with **Shortcode** (preferred): `{% link "http://example.com", "External link text Here" %}`

- Relative with **Shortcode** (preferred): `{% link "/test/", "Relative link text Here" %}`

- Relative with Nunjucks Filter: `Test` - with / in front and after the path

- Absolute with Nunjucks Filter: `Test` - with / in front and after the path (used for favicons, canonical links etc.)



## Using Images

- Image with **Shortcode** (recommended): `{% img 'folder/test.jpg', 'alt text' %}`

- SVG with **Shortcode** (recommended): `{% svg 'folder/test.svg', 'custom-class' %}`

- Simple image embed: ``

- Simple SVG embed: ``



## Favicons & Meta Information

- Generate favicons using [Real Favicon Generator](https://realfavicongenerator.net/) and drop all the files into `src/assets/favicon/`

- Global meta variables can be set in [src/data/global.js](https://github.com/ideasonpurpose/11ty-site-boilerplate/blob/main/src/data/global.js)

- Page specific meta variables can be set in the `frontmatter` section of each page

 - site_name: "Company Name"

 - meta_title: "Lorem ipsum"

 - meta_description: "Dolor sit"

 - meta_image: "amet.jpg"



## Quirks

- While changing node versions (by `nvm use` for example), Sharp may fail te re-register. Fix with: `npm rebuild`