https://www.npmjs.com/package/rollup-plugin-node-builtins
Is the real issue. It's not been updated since 2017.

It's actually mentioned in the repo. The issue got closed when I fixed all the other vulnerabilities but it's still an issue. #70

Is there another package that can be used to replace the outdated one?

I'm not familiar with the square-bracketed classes. It looks to be something to do with config-set styles but it would be great to have explicit documentation (or a link to some) that explains how it works in this context.

Hi Andy, you said you wanted help with webmentions - did you mean sending or receiving?

If you're going to send them, adding microformats-2 to the templates will make them work better - indiewebify.me will walk you through that.
Then you can use a tool to send webmentions after the site updates - eg https://telegraph.p3k.io/ or https://webmention.app/ or https://mention.tech/

To receive them, if you don't want to run your own code you can use a tool like http://webmention.io, http://webmention.herokuapp.com or https://mention.tech/

Come chat about it at https://chat.indieweb.org/dev/

This may well be my problem rather than hylia's but maybe you can at least tell me which? I'm not very experienced.

Here's the page with images.

https://kowloonplanet.netlify.com/posts/mouse-guard-esque-hex-crawl-with-a-3-year-old/

And here's my repo:
https://github.com/valzi/hylia

Hello, thank you for your hard work on this! My question has to do with how to use multiple tags in the netlify cms side of using hylia for blog post creation w/ 11ty.

The image below on line 33-37 shows that you intended for it to be able to be used with multiple tags:

However this is what happens when I try to do that in the cms (all are put into one tag):

I have tried varying versions of tags separated by , and - but either way it just merges into one big tag.

The only way around this I found was to go into the code here and use this format:

Which creates the two separate tags as seen here:

But I believe that defeats the whole purpose of using Hylia with the netlify cms. Is this something that I am doing wrong or is it something that is current limitation?

Solution :
Kindly upgrade lodash to version 4.17.13 or later.
Upgrade bl to version 0.9.5 or later.

Also, I am seeing a bunch of vulnerabilities while doing npm install.
found 238 vulnerabilities (2 moderate, 236 high)
How to tackle this in the long run?
I am new to eleventy and static site generators.
However, I am open to helping with PRs if you can guide me.

Currently, it does a full page reload when we navigate I think its quite bad user experience to wait for the full reload so navigation without full page would be best if provided.

I'd like to recreate the full 'author bio' from my existing blog so we can support multiple authors (and choose one from a dropdown to pre-fill their bio). May be out of scope for a basic template, wdyt?

I'm new to Eleventy and trying Hylia for the first time. I am wondering how to best do relative image links with image subdirectories per post?

I have imported from Wordpress similar to this post.

I have the following structure with blog posts organized by year/month/post and images in a subfolder of each post.

I copied the images over with this in eleventy.js:

// for now - this is mostly to keep images nested with their posts
config.addPassthroughCopy('src/posts/**/images/*');

The post collections in the same file:

  // Custom collections
  const livePosts = post => post.date <= now && !post.data.draft;
  config.addCollection('posts', collection => {
    return [
      ...collection.getFilteredByGlob('./src/posts/**/*.md').filter(livePosts)
    ].reverse();
  });

  config.addCollection('postFeed', collection => {
    return [...collection.getFilteredByGlob('./src/posts/**/*.md').filter(livePosts)]
      .reverse()
      .slice(0, site.maxPostsPerPage);
  });

The markdown posts have relative image links like:

![Open PowerShell here](images/OpenPowerShellHere.png)

When running the generation I see errors like:

`TemplateWriterWriteError` was thrown
> ENOENT: no such file or directory,
open '/Users/hudgeo/Projects/blog/03-hylia/srcimages/OpenPowerShellHere.png'

Related issue with posts being in their own folder and url expecting prefixed file:

My repo is here

I'm just trying to figure out what configuration or layout changes to make for this structure or whether its easier to go with a different structure?

Thanks in advance

I installed Hylia, choosing it as one of Forestry's 11ty starter templates. I then set up an admin, setting the path to /portal instead of the default, /admin, because admin in this theme refers to Netlify CMS.

I see a portal directory set up in the root of my project, and admin_path: "/portal" specified under .forestry > settings.yaml.

I'm using Netlify for deployment only, and my url is https://hylia-forest.netlify.com. So, by visiting https://hylia-forest.netlify.com/portal, I expected to see a Forestry remote login for my site as picture here: https://forestry.io/docs/editing/remote-admin/, but instead receive a 404.

So, what is the best way to integrate this?

First of all, Andy, thank you. Hylia is a wonderful resource.

I dipped a toe into its waters yesterday and have noticed that, when in Netlify CMS, the top right link goes to example.com. This is my first time exposure to Netlify CMS. I presume that the top right link is meant to be to the site being edited.

I don't think I've overlooked something in Netlify settings.

Hi Andy, how do I go about completely disabling the light mode layout?

https://www.w3.org/TR/wai-aria-practices/examples/landmarks/navigation.html

The template's default is 2 <nav> elements, one in the header and another in the footer. They have identical content. But, this pattern violates the SC.

Suggestions:

• remove the footer nav. (label becomes optional).
• clone the template and add labels to each. header_nav and footer_nav (although naming them becomes somewhat troublesome, at least for me). I didn't see a way to pass data to the templates so this might need to be a short_code instead (seems hard).
• remove the <nav> element from the partial and only wrap the header version with it. The footer will just have a list of links. Still helpful, but not a (duplicate) landmark.

Hi there,

First of all thank you so much for this great starter kit, beautifully integrated !
I'm a big fan of Andy Bell's work ;)

I get this error after remove all example posts and building (through netlify or locally even with npm start) :
Problem writing Eleventy templates: (more in DEBUG output)

> Having trouble rendering njk template ./src/feed.njk
> `TemplateContentRenderError` was thrown
> (./src/feed.njk)
   Error: Collection is empty in rssLastUpdatedDate filter.

It looks like an easy issue to fix, I'll do a Pull Request in 5 mn :)

New posts are not visible to user without clearing cache.

The transformation of article images to figures replaces the image with a figure and figcaption. Now figures are not allowed in p tags, which by default is the parent of the image. Some browsers will render empty p tags above and below the figure, which leads to additional unwanted space.

I fixed this locally by changing the transformation to this:

image.parentElement.replaceWith(figure)

Is the assumption ok that every image (from markdown content) will have a surrounding p tag? Or would it be better to test for the parent and its content?

I've noticed that the Slate color definition is missing from config.yml so it can be used in the admin panel. This results in Slate not being adopted as a token and not being available for Sass / CSS Variables to use. I can provide a PR with a fix is this is OK.

PS. Thanks for the great starter! I started using it yesterday and I'm loving it so far.

Hi Andy,

I've found a small bug in the NetlifyCMS configuration file.
According to NetlifyCMS documentation: "'create': for folder collections only;".

The "create" option on the "Pages" collection (which is a 'file' collection') is unused and can be removed.

Hey, just spotted a little overflow issue on Firefox on Android - haven't tested on other browsers.

Just occurs on this link in particular
https://hylia.website/posts/a-post-with-code-samples/

Hope that's ok? Don't know if you need more info? :)

Thaaaaaanks!

What I did:

1. Create a new Hylia site
2. Enabled the Git identity to be able to login to the CMS
3. Made a new Generic Page
4. Published it

And it renders the source code which you can see here:

Hello Andy, thank you for releasing Hylia and to everyone who has contributed to the project. You are all awesome and I appreciate it in a deep and personal way.

I'm also keen on IndieWeb related efforts. 🌈

I haven't found an h-card on Hylia so far, so I added the bare minimum info in order to validate an h-card on my website via https://indiewebify.com/validate-h-card.

All it took were some minor edits to the site-head.njk (there may be a better place for this)

Still to do: Add photo (I really do need a headshot), add email, note/bio stuff.

I really love this project, Andy.
A small change in this repo's settings would help keep git history linear, clean and easy to navigate.
Please avoid merge commits while merging PRs.

Squash and merge option would be easier I think.

https://help.github.com/en/articles/about-pull-request-merges#squash-and-merge-your-pull-request-commits

Reasoning :
https://blog.carbonfive.com/2017/08/28/always-squash-and-rebase-your-git-commits/

I have close to 50 blog posts in my Hylia site currently. When I write a new blog post, I first launch the development server with npm start, which takes some time to build the whole site... that is ok. However, it also builds the whole site whenever I edit the blog post, making the experience a bit slow.

I understand that different pages may be affected (such as if I add a new tag) and they need be rebuilt, but I really don't care about those other pages, only about the blog post being edited.

So, is it possible to tell Hylia to only regenerate the page that has changed? (Even if the state of the site will be inconsistent... I don't care about that, it's my local setup, and I can always run npm start again)

Thanks

Currently the one script included is the theme switcher, linked to individually in the base layout. Many users will want to include additional scripts for things like modals for example.

It would be handy to have some kind of compile going on, so additional scripts could be dropped into the scripts folder, or have their npm modules referenced somehow, and then include them all like the scss setup.

I'm not sure what the best approach here is :)

External link is required, it shouldn't be! required: false looks to be the solution

Is your feature request related to a problem? Please describe.
I'm migrating a blog from Hugo to 11ty. The date: front-matter fields include timestamp in the format "2019-07-02 22:39:39 +0200" (Hugo accepts it), while 11ty expects iso8601 ("2019-07-02T22:39:39+02:00") in Template.js.

While deploying to netlify this is the error message:

2:58:11 PM: Problem writing Eleventy templates: (more in DEBUG output)
2:58:11 PM: > date front matter value (2019-07-02 22:39:39 +0200) is invalid for ./src/<...>.md (Error):
2:58:11 PM:     Error: date front matter value (2019-07-02 22:39:39 +0200) is invalid for ./src/<...>.md
2:58:11 PM:         at Template.getMappedDate (/opt/build/repo/node_modules/@11ty/eleventy/src/Template.js:611:19)

Note: There's no difference in the date syntax, therefore this does not affect dates without a timestamp.

Describe the solution you'd like
For easier readability and migration is it possible to accept the following date: front-matter format: "2019-07-02 22:39:39 +0200"?

Describe alternatives you've considered

• An automatic migration script to convert all date: front-matter in a site to iso8601. If there is such a script, please inform.
• Modifying Template.js only for this deployment. Is this possible with netlify, eg. in the .node-modules folder in the git repo?

Additional context

Hello!
Should the full global.css be included in the <head> of each page? This was making my pages pretty large, so for a personal project I broke the CSS out using the example of the service-worker js file.

I'd be happy to submit this as a PR if you think it would be useful. Caching css is always a nice thing to be able to do.

Hi there,

I realized that Hylia was back a few versions, on 11ty 0.8.3, when I went to use a new feature, changing the output directory of a pass-through https://www.11ty.dev/docs/copy/#change-the-output-directory

There's a bunch of new functions and performance improvements across the last two versions of 11ty:

• 0.10.0 https://github.com/11ty/eleventy/releases/tag/v0.10.0
• 0.9.0 https://github.com/11ty/eleventy/releases/tag/v0.9.0

It would be great if we could upgrade.

Take care and thanks for all your fantastic work 💞

Hey Andy I've just started learning Eleventy
You've mentioned some areas you need help with in the ReadMe.
If you have something specific in mind, I would love to give a hand.

When visiting a tag archive page it shows scheduled posts in the future. I expect these posts not to display.

Since Netlify is part of the setup I figured that it would use $netlify dev as well to give myself a break (designer who can code) as npm and node are my least favorite tools to use (love Poi, Compass, Netlify as a designer who codes and dislikes CLI's & greedcorps).

To reproduce simply one-click-deploy a hylia, clone the repo locally, and run $netlify dev “error” (it's not) displayed the following;

Having trouble rendering njk template ./src/admin.njk (TemplateContentRenderError)

(unknown path)
Error: template not found: assets/css/global.css (Template render error):
Template render error: (unknown path)
Error: template not found: assets/css/global.css
at Object._prettifyError (/Users/ghoeve/Documents/blog/blog-hylia/node_modules/nunjucks/src/lib.js:36:11)
at /Users/ghoeve/Documents/blog/blog-hylia/node_modules/nunjucks/src/environment.js:567:19
at eval (eval at _compile (/Users/ghoeve/Documents/blog/blog-hylia/node_modules/nunjucks/src/environment.js:637:18), :14:11)
at createTemplate (/Users/ghoeve/Documents/blog/blog-hylia/node_modules/nunjucks/src/environment.js:295:11)
at next (/Users/ghoeve/Documents/blog/blog-hylia/node_modules/nunjucks/src/lib.js:282:7)
at handle (/Users/ghoeve/Documents/blog/blog-hylia/node_modules/nunjucks/src/environment.js:329:11)
at /Users/ghoeve/Documents/blog/blog-hylia/node_modules/nunjucks/src/environment.js:339:9
at next (/Users/ghoeve/Documents/blog/blog-hylia/node_modules/nunjucks/src/lib.js:280:7)
at Object.asyncIter (/Users/ghoeve/Documents/blog/blog-hylia/node_modules/nunjucks/src/lib.js:286:3)
at Environment.getTemplate (/Users/ghoeve/Documents/blog/blog-hylia/node_modules/nunjucks/src/environment.js:321:9)

Is there anyway to see the sass sourcemap while in development via dev tools?

When creating a new page in NetlifyCMS, is there anyway to have it added automagically added to navigation.json?

Not sure if/how this is possible but as Netlify-deployed versions aren't formal forks I'm not sure how to pull improvements in.

Set up on netlify/forestry via the following methods:

1. Press button 'netlify' button on this repo to copy repo to my github and build on netlify. Add site on forestry.io.
2. Start new repo/site on forestry.io using eleventy/forestry starter.

In both cases, no option to create new > page in forestry.io.

Error after clean install:

[3] Eleventy fatal error: (more in DEBUG output)
[3] > Error in your Eleventy config file '/Users/remy/Sites/scratch/hylia/.eleventy.js'. You may need to run `npm install`. (EleventyConfigError)
[3] > Cannot find module '../build/default/canvas' (Error):
[3]     Error: Cannot find module '../build/default/canvas'
[3]         at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)
[3]         at Function.Module._load (internal/modules/cjs/loader.js:506:25)
[3]         at Module.require (internal/modules/cjs/loader.js:636:17)
[3]         at require (internal/modules/cjs/helpers.js:20:18)
[3]         at Object.<anonymous> (/Users/remy/Sites/scratch/node_modules/canvas/lib/bindings.js:7:20)
[3]         at Module._compile (internal/modules/cjs/loader.js:688:30)
[3]         at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
[3]         at Module.load (internal/modules/cjs/loader.js:598:32)
[3]         at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
[3]         at Function.Module._load (internal/modules/cjs/loader.js:529:3)

I'm vaguely aware that you don't want your favicon to be loaded in the same way as other images but it would be nice to be able to upload one without digging in the code.

MIT is referenced in package.json (https://github.com/andybelldesign/hylia/blob/545a697bab0efa2cbd9726cc6a3914d4f9ecd943/package.json#L46) but any reason there's no explicit LICENSE file in the repo. Happy to PR one

Or do we have to use Netlify?

Hi there! Really excited to get a site spun up, it seems you've made it pretty easy :) That said, still having a problem after following your video walkthrough ++ scrounging through github issues.

The 400 error is {"code":400,"msg":"Operator microservice headers missing"}

I've tried disabling/enabling Git Gateway, Regenerating API token, Redeploying the site... I even tore everything down and started from scratch again from you video. No dice -- Any idea what might be up?

Under Git Bash terminal on Windows, the npm start task fails due to Windows not understanding the tasks described in package.json. This is due to two reasons:

• Windows environment variables are declared differently than *nix OSs
• Windows does not understand single apostrophes when used in task parameters in package.json.

This can be fixed by doing the following:

• Use the core-env module to handle correct setup of environment variables across multiple platforms: (https://www.npmjs.com/package/cross-env)
• Replace single quotes with escaped double quotes, so ' becomes \"

I've tested this on my own installation Windows 7, Git for Windows 2.12.2, Node 10.16.0, Npm 6.9.0 and it seems fine, but would need to be tested by others before merging (in particular, for users with Windows 10).

I'm happy to raise a PR, but I don't have write permissions.

Is there something we need to add to make NetlifyCMS work with Hylia on Bitbucket? As of July 26, 2019, NetlifyCMS should be compatible. Netlify CMS 2.0 launches with Bitbucket support and a new monorepo architecture Yet, I can't seem to enable the Git Gateway options if the repo is hosted via Bitbucket.

Hi Andy, thanks for the excellent hylia.

in package.json there are four references to andybelldesign. Need to replace those with hankchizljaw.

There are other references in README.md too.

Thanks. Andrew

Likely not something for you to fix, but figured you might want to know about the issue:

https://community.netlify.com/t/github-error-on-save-in-netlify-cms/7112

I will update here if/when I get follow-up from Netlify community.

Where Jina is thanked for her work on design token, there is a link to a course, but it takes you to twitter - should it be link to this: https://aycl.uie.com/virtual_seminars/design_tokens_scaling_design_with_a_single_source_of_truth

Or should the text be changed to say 'follow Jina on twitter' or something along those lines?

On auditing hylia over Lighthouse, I found out that the SEO score is 91.

One thing that's causing this is:

No <meta name="Description" content="This is hylia description!">

Please add the same or I can open a PR!

Ohhh and adding this makes the SEO -> 100!!! 😎

I have added a test page via Netlify CMS during my first try out of Hylia.
The result creates a page which is rendered as visible html markup.

Below is the markdown created by Netlify CMS. Not sure if it is related, but it is created in /page not /pages

---
layout: layouts/page.njk
title: Test Page
permalink: test-page
metaTitle: Test Page
metaDesc: Test Page
socialImage: /images/demo-image-1.jpg
---
This is a Test





Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sodales arcu at lacinia sollicitudin. Sed varius laoreet sapien quis vestibulum. Sed pretium hendrerit enim sit amet ultrices. Donec lobortis est ac quam sagittis congue. Vivamus tempus eget erat ut placerat. Morbi consequat quam eu dui euismod feugiat. Praesent vel sapien orci. Suspendisse ante massa, pretium nec leo at, auctor consectetur sem. Nulla nec fermentum diam.



Maecenas rhoncus ultrices viverra. Sed sed tortor convallis, vestibulum metus nec, dapibus est. Fusce venenatis euismod turpis, a venenatis justo euismod vitae. Vivamus ornare eros ac purus elementum, et elementum turpis scelerisque. Vivamus quis purus eros. Vivamus consequat diam ut auctor pulvinar. Pellentesque lorem purus, rutrum vel est ut, convallis aliquam ligula.



Curabitur facilisis non ligula sed maximus. Etiam scelerisque pretium ligula, quis viverra magna gravida et. Nunc vehicula lobortis lectus vel ultrices. Praesent blandit commodo bibendum. Mauris tristique mauris quis ultricies facilisis. Nullam et mauris nec neque euismod gravida id eu enim. Nulla facilisi. Vestibulum facilisis est nec nulla aliquam sagittis. Sed in mi quis metus convallis facilisis. Phasellus molestie tempor dignissim. Aenean faucibus, massa a consectetur commodo, purus enim euismod nibh, vel iaculis dui justo tincidunt est. Morbi non vestibulum odio. Nulla sagittis mauris ac ipsum feugiat pulvinar. Curabitur eu metus quam. Donec suscipit urna ac enim condimentum pretium. Etiam id imperdiet sem, vel semper ligula.



Integer pharetra viverra turpis in tempor. Mauris nec egestas justo. Donec suscipit feugiat tincidunt. Curabitur ac magna quam. Pellentesque molestie, magna ut ultricies posuere, felis tellus condimentum eros, auctor tempor nibh tortor sagittis magna. Etiam pharetra felis turpis, sit amet scelerisque dolor dignissim eu. In et ante rutrum, imperdiet libero vel, interdum libero. Praesent nec felis in massa lobortis tempus eleifend ut purus. Nam vestibulum libero eget quam finibus, quis imperdiet leo efficitur. Sed ornare, turpis sagittis facilisis egestas, sem massa tempus urna, dignissim ultrices neque massa eu erat. Mauris eu tellus eu nibh fermentum interdum.



Suspendisse semper, felis vitae pharetra lacinia, turpis tortor ullamcorper quam, ac malesuada enim neque sed nulla. Aliquam eu gravida libero, eu lacinia dolor. Nulla vel urna lacinia, accumsan erat venenatis, ultricies leo. Vestibulum et nulla vel mi efficitur viverra. Mauris a quam quis magna lobortis venenatis at sed nisi. Praesent et tortor quam. Sed fermentum ipsum ut est suscipit semper. Aliquam ut eleifend risus. Ut tempus velit id mauris rutrum viverra et quis enim. In tristique interdum bibendum. Maecenas sed blandit sem. Duis in metus malesuada, vestibulum nunc vel, cursus felis.

I'm migrating my current Jekyll blog to 11ty with this nice template.

I noticed that this starter project is using @tbranyen/jsdom package to assist with HTML transforms. However, it seems that this package is just a re-up of the well-known jsdom package from Jest team.

Is there any reason why we're not using the official package instead of this one. I cannot find any derivation notice on the npmjs package page and even the home page link of @tbranyen/jsdom pointing to https://github.com/jsdom/jsdom.

Might be a nice improvement to stick the footer:

body {
  scroll-behavior: smooth;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

(or equivalent)