eastslopestudio / eleventy-starter

An 11ty starter project.

Eleventy Starter

A starter setup for front-end development using Eleventy and Webpack.

Installation

npm install
npm start # alias for `npm run watch`
npm run dev
npm run prod
npm run clean
npm run lint

Netlify

Run the entire Netlify platform locally. Preview it all – site generation, functions, and edge logic.

netlify dev

eleventy-starter's Issues

Suggestion: Include a link to a demo showing this template

@grantholle @ryanscherler probably in the "About" section of the repo?

Remove npx from parcel and 11ty scripts

Since parcel and 11ty are declared as local dependency, no needs to use npx to run them. Using just the cli commands will run the local dependency version.

-"build:html": "cross-env ELEVENTY_ENV=production npx @11ty/eleventy",
-"build:assets": "cross-env NODE_ENV=production npx parcel build ./src/assets/css/app.css ./src/assets/js/app.js --out-dir ./dist/assets --no-source-maps",
-"watch:html": "cross-env ELEVENTY_ENV=development npx @11ty/eleventy --serve --port=8080",
-"watch:assets": "cross-env NODE_ENV=development npx parcel watch ./src/assets/css/app.css ./src/assets/js/app.js --out-dir ./dist/assets --no-source-maps --no-hmr",
+"build:html": "cross-env ELEVENTY_ENV=production eleventy",
+"build:assets": "cross-env NODE_ENV=production parcel build ./src/assets/css/app.css ./src/assets/js/app.js --out-dir ./dist/assets --no-source-maps",
+"watch:html": "cross-env ELEVENTY_ENV=development eleventy --serve --port=8080",
+"watch:assets": "cross-env NODE_ENV=development parcel watch ./src/assets/css/app.css ./src/assets/js/app.js --out-dir ./dist/assets --no-source-maps --no-hmr",

Configuring SCSS

For those of us who wouldn't be using Tailwind, but still want to take advantage of PurgeCSS, what's the best way to configure Sass with this? Sass is still useful for some variables that can't be used as custom properties, and source mapping.

After installing Node Sass, how would we configure it within styles.11ty.js?

Image rendering via picture.js doesn't work

Hello Ryan! Thanks for all the work you (and the rest of the contributors) put into this starter, it certainly has a lot of potential.

Whenever I try to render images in Markdown (using the ![Alt-tag](image.jpg) syntax I get the following error:

`Uncaught exception: (more in DEBUG output)

Input file is missing

Error was thrown:
Error: Input file is missing
at Function.module.exports.loopWhile (C:\Playground\StaticSites\eleventy-starter\node_modules\deasync\index.js:71:23)
at deasyncSharp (C:\Playground\StaticSites\eleventy-starter\utils\picture.js:36:11)
at module.exports (C:\Playground\StaticSites\eleventy-starter\utils\picture.js:104:33)
at Object.md.renderer.rules.image (C:\Playground\StaticSites\eleventy-starter\utils\markdown.js:42:14)
at Renderer.renderInline (C:\Playground\StaticSites\eleventy-starter\node_modules\markdown-it\lib\renderer.js:271:28)
at Renderer.render (C:\Playground\StaticSites\eleventy-starter\node_modules\markdown-it\lib\renderer.js:324:22)
at MarkdownIt.render (C:\Playground\StaticSites\eleventy-starter\node_modules\markdown-it\lib\index.js:543:24)
at C:\Playground\StaticSites\eleventy-starter\node_modules@11ty\eleventy\src\Engines\Markdown.js:72:38
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at async Template.render (C:\Playground\StaticSites\eleventy-starter\node_modules@11ty\eleventy\src\TemplateContent.js:199:22)`

What am I doing wrong?

Add script to clean build before start and build

Right now the dist folder is not cleaned before build and watch scripts. The clean scripts are not called automatically before such scripts and rimraf is not declared as local dev dependency.

Missing 404.md causes Browsersync error

Hi,
thank you for creating this starter pack. I really like it :)
One thing it would be nice to add is simple 404.md in site folder, so we won't have this ugly error.

[Suggestion] Updating PostCSS config

I would suggest to update the postcss config by removing autoprefixer and postcss-nest and adding postcs-preset-env which include autoprefixer, spec-like nesting and browsers list support. It's like babel-env for postcss

Fix dependencies definitions

Dependencies in package.json are misplaced, most of them are dev dependencies and not public.

  "devDependencies": {
    "@11ty/eleventy": "^0.10.0",
    "@babel/core": "^7.8.3",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/preset-env": "^7.8.3",
    "@fullhuman/postcss-purgecss": "^1.3.0",
    "cross-env": "^6.0.3",
    "html-minifier": "^4.0.0",
    "npm-run-all": "^4.1.5",
    "parcel-bundler": "^1.12.4",
    "prettier": "^1.19.1"
  }

  "dependencies": {
    "stimulus": "^1.1.1",
    "turbolinks": "^5.2.0"
  },

PS: rimirar is used as global dependency which may be not installed. I suggest to add is as local devDep