Flightdeck 🚀

An opinionaated starter project for Eleventy 🎈

📔 Table of Contents

1. About The Project
   • Inspiration
   • Dependencies
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact
8. Acknowledgments

🌟 About The Project

The Flightdeck objective is to provide a unified starting point for all your Jamstack websites, by leveraging popular static-site-generators (SSG).

This flavor of Flightdeck uses Eleventy with an opinionated workflow, keeping Eleventy in control of the entire development and build processes.

💡 Inspiration

Like other versions of Flightdeck, this is just an adaptation of the original Flightdeck project that uses Jekyll for its static site generation and Gulp for all assets bundling. (The Hugo version, takes full advantage of Hugo's asset pipeline.)

Jérôme Coupé's post Structuring Eleventy Projects served as inspiration for how this project is structured and over-time, things will shift as ideas change, but in 2022, we are shamelessly adopting the concept Jérôme Coupé outlines.

(back to top)

👾 Tech Stack

• Eleventy
• Parcel
• Sass
• Nunjucks

see all dependencies

    ❯ npm list
    flightdeck-for-eleventy-and-parcel@0.1.0
    ├── @11ty/eleventy-plugin-syntaxhighlight@4.1.0
    ├── @11ty/eleventy@1.0.2
    ├── @parcel/config-default@2.7.0
    ├── @parcel/core@2.7.0
    ├── @parcel/transformer-sass@2.7.0
    ├── browserlist@1.0.1
    ├── cross-env@7.0.3
    ├── eleventy-plugin-embed-everything@1.14.1
    ├── html-minifier@4.0.0
    ├── npm-run-all@4.1.5
    ├── parcel@2.7.0
    ├── sass@1.55.0
    └── sharp@0.29.3
  

(back to top)

🧰 Getting Started

All version of Flightdeck use NodeJS. So a very minimal and basic knowledge of Node and Git should be had when using Flightdeck as your launchpad.

In the future, we plan to include Docker and make all Flightdeck starters available as a Yeoman and/or NPM package.

🧯 Prerequisites

We are assuming that you already have Node with NPM and Git installed on your system – it is also ideal that you have the latest LTS release of Node. As of this writing the current LTS release is 16.16.0

🤖 Dependencies

pnpm is our package manager of choice – we highly recommend you enable Node's corepack, this way all the pnpm commands work out-of-the-box, without having to install yarn or pnpm separately.

Note: Currently Parcel has an issue performing auto install when using pnpm, even through the docs state otherwise. So if you'd like for Parcel to handle installation of dependencies, we'd recommend that you stick with NPM. If you'd rather handle the install of dependencies manually, then PNPM is a great option.

Please be aware that pnpm will not be the most recent version and as of this writing, Pnpm is at version 8.5.1.

Also, You can swap yarn in favor of npm or pnpm without any friction.

• pnpm

  corepack enable
  
  corepack prepare pnpm@latest --activate

⚙️ Installation

git clone https://github.com/flight-deck/flightdeck-for-eleventy.git

cd flightdeck-for-eleventy
pnpm install

See all NPM packages

devDependencies:
@11ty/eleventy 2.0.1
@11ty/eleventy-plugin-syntaxhighlight 5.0.0
@parcel/config-default 2.8.3
@parcel/core 2.8.3
@parcel/transformer-sass 2.8.3
browserlist 1.0.1
cross-env 7.0.3
eleventy-plugin-embed-everything 1.16.0
html-minifier 4.0.0
luxon 3.3.0
markdown-it 13.0.1
markdown-it-attrs 4.1.6
npm-run-all 4.1.5
parcel 2.8.3
sass 1.62.1
sharp 0.31.3
  

(back to top)

🏃‍♂️ Run Locally

There are just a few npm scripts available, but the start command is where all the magic 🪄✨ happens – it will spin up the development server from Eleventy.

The focus here is to keep Eleventy in control of the entire development and build processes, to keep things simple.

pnpm start

• build command - executes the production build of your site with Eleventy, includes HTML minification, compressed Sass, optimized images, and bundled javascript.
• clean command - scrubs/removes the dist/ and .cache directories
• purge command - scrubs/removes the dist/, .cache, node_modules, and any lock files from npm, yarn, or pnpm.

Both clean and purge are executed from a bash script to keep the package.json as clean as possible.

All Available Run Commands

Lifecycle scripts:
  start
    run-p dev:11ty dev:parcel
  Commands available via "pnpm run":
    dev:11ty
      eleventy --serve --config=_flightdeck/flightdeck.config.js
    dev:parcel
      run-p watch:assets
    watch:assets
      parcel watch './src/assets/images/**/*.*' ./src/assets/js/app.js ./src/assets/styles/style.scss --dist-dir ./dist/assets
    build
      run-s clean build:11ty build:parcel
    build:11ty
      cross-env ENV=production eleventy --config=_flightdeck/flightdeck.config.js --incremental
    build:parcel
      parcel build './src/assets/images/**/*.*' ./src/assets/js/app.js ./src/assets/styles/style.scss --dist-dir ./dist/assets
    clean
      ./.scrub.sh site
    purge
      ./.scrub.sh purge
  

(back to top)

‍🚀 Deployments

Deployments for this project are completely up you and your needs.

We really like Netlify but we also manage servers and enjoy using our Liftoff Deployment Script.

If you use Netlify, you can use the netlify.toml file to configure your build and deployment settings.

(back to top)

📁 File Structure

Flightdeck is a very opinionated starter kit, so the file structure is very specific to our needs. The Eleventy configuration file is located under _flightdeck and is called .flightdeck.config.js.

All the Eleventy configuration is done in this file, and it is broken down into sections for easier navigation and maintainability. The .flightdeck.config.js file is where you will find the addPassthroughCopy and addWatchTarget methods along with custom filters, shortcodes, and Eleventy Plugins. All Eleventy configuration options are available, see the Eleventy Docs for more information.

👀 Usage

Flightdeck makes a lot of assumptions and is very opinionated - but having a good idea of how Eleventy's data cascade works is always nice, as well as having some understanding on template inherence when working with Nunjucks will go a long way. But is not needed

WIP The Autopilot CSS System uses a modified version of the 7-1 pattern, but we combined a couple of concepts regarding naming conventions that fit our workflow. Autopilot is a classless CSS system that plays well with semantic markup. Documentation coming soon

If you're looking to extend your project with other NPM modules, Eleventy plugins, or Parcel Plugins, just reference the appropriate documentation.

• Eleventy Docs
• Parcel Plugins
  • Parcel Sass Docs
  • Parcel Javascript Docs
• Nunjucks Docs
• NPM Package Docs

If you're a VSCode user then I highly suggest using Better Nunjucks for VSCode, enable it for at the workspace level.

(back to top)

🧭 Roadmap

• Expand on using Eleventy Plugins
• Create a theme using Autopilot - Flightdeck's classless CSS system
• Improve documentation
• Add more examples
• Expand on using Parcel Plugins
• Add more filters and shortcodes
• Add Dockerfile
• Include in NPM package

See the open issues for a full list of proposed features (and known bugs/issues).

(back to top)

👋 Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

⚠️ License

Distributed under the WTFPL License. See LICENSE for more information.

(back to top)