josephdyer / skeleventy Goto Github PK

When running a local server with npx eleventy --serve I was getting the error:

Problem writing Eleventy templates: (more in DEBUG output)
> TemplateLayoutPathResolver directory does not exist for default: _includes

Error was thrown:
    Error: TemplateLayoutPathResolver directory does not exist for default: _includes

By running as npx eleventy --serve --config=eleventy.config.js the problem went away and the site was hosted on my local machine without a problem.

(reporting this as I love how quickly you can get a nice example to start working from with this project, so I hope others don't give up at the first hurdle).

So far I'm blown away by how helpful this template is. I've run into a couple compile errors while getting my base SCSS and tailwind.config set up. For SCSS errors it cleanly prints the filename:line:col and then gives a nice printout of the exact error. However for .js the error message is only the issue (e.g. Error: Unexpected identifier). It would be so much more helpful if the file and line number were included as well.

Alright @josephdyer

First off, thanks for Skeleventy, its a pleasure to use.

Now, I'm not sure how I go about this so thought I'd ask first.

I've updated the boilerplate to use Tailwind 1.0b and made all the upgrade changes so it works.

I have forked your repo so could add the changes to there and open a pull request but I can see that goes to your master, as TW is still in beta I wasn't sure if thats the right way to go.

From what I can tell, there will be a final release any day now and shouldn't be any breaking changes.

As you can tell I'm new to pull requests!

How's best to proceed? Thanks.

I'm trying to add in new pages, I'm confused. I created a .njx file with the template code and then created the .md file for it. How do I make it autogenerate the html code in the public folder?

👋 This is more of a question than an issue.

How do I update TailwindCSS? I'm currently on "tailwindcss": "^1.0.5"1 in my package.json. I see this repo is on 1.2.0, which I'd love to be on (if nothing else to get my hands on CSS Grid classes). How can I update my project to use 1.2.0?

This is my first time working with 11ty, Skeleventy, and TailwindCSS. Sorry for the noob question!

The local development version + Netlify production builds look different.

When I build on Netlify I get this error message:

The build completed successfully, but the following processes were still running:
5:29:57 PM: ​
5:29:57 PM:    - node /opt/build/repo/node_modules/.bin/mix --production
5:29:57 PM:    - /bin/sh -c npx webpack --config="node_modules/laravel-mix/setup/webpack.config.js"
5:29:57 PM:    - webpack
5:29:57 PM: ​
5:29:57 PM: These processes have been terminated. In case this creates a problem for your build, refer to this article for details about why this process termination happens and how to fix it.

Is the difference in dev and prod because laravel-mix isn't allowed to complete? Netlify's docs suggest:

To fix this, you should make sure the build command waits for its background processes before completing. In JavaScript, this often means properly following and calling promises, async/await, and callbacks.

I'm unsure what to do here. Thank you!

Builds fine locally, in dev, debug and production. However when I deploy to git, fails on Netlify build.

TemplateLayoutPathResolver directory does not exist for default: _includes

eleventy.config.js dir config:

return {
       templateFormats: ["md", "njk"],
       markdownTemplateEngine: 'njk',
       htmlTemplateEngine: 'njk',
       passthroughFileCopy: true,

       dir: {
           input: 'site',
           output: 'dist',
           includes: 'includes',
           data: 'globals'
       }
   }

Keeps opening and closing on page load - will look into

I'am getting errors in M1 Mac without Rosetta2, and apparently is related to Laravel Mix.

Is anyone is having the same issue?

This particular method of passing environment variables doesn't work in Windows.
https://stackoverflow.com/questions/25112510/how-to-set-environment-variables-from-within-package-json-node-js

The date formatting filter uses a mixture of UTC and local date functions. This could cause some weirdness in the date formatting. For example if the post date is 2020-12-31T23:00:00.000+00:00 but the timezone on the local system is Australian Eastern Standard Time (UTC+10) then the formatted date would be 1st January 2020 when it should be 1st January 2021.

Great template!

I'm trying to make a small css change which is working in dev environment but not in production when deployed to netlify. Where do I start with this?!

Thanks!

Please add a license file, so that people feel free to use this. It would be great. Thanks!

Hey There, loved this boilerplate and building my 1st blog using jamstack with this.

I wanted to put the latest 3 posts on index page, but can´t find it on any documentations in nunjucks
When you iterate this: {% for post in collections.blog %} you get all posts.
Is there any way I can modify this to just get the last 3?

Thanks

Hello, I'm having a problem, when the changes I made in my computer with main.css, are not showing on the website. I have a slightly different configuration, because I'm using gitlab and not netlify, but the process on the gitlab's job don't show errors. main.css is updated on gitlab, but main.min.css don't show the changes.

What can be the problem?

I ran into this issue:

_Error: TemplateLayoutPathResolver directory does not exist for default: includes

Not sure what this means? I looked through 11ty website and it wasn't helpful at this point.

Thanks

Hi there, just playing around. But I have over 100 blog entries, and I can't find the css that automatically "page brake" the blog entries on the overview.

Lets say; max 4 blog entries in a row - or something else.

Is there an easy way to fix this?
Cheers Gerhard

PS: By the way; do you know an easy way to make a second language work within your starter or globally in eleventy? This would be a very interesting feature for me.

Love the theme!

I'm trying to implement CSS variables within the _config.scss by following the Gorko documentation and am not having any luck.

I know there's a separate _variables.scss file, but I would rather have the variables defined in Gorko and have them used in the utility classes.

I've cloned the Gorko custom props demo project, and can successfully generate custom props there and drop them into the utility classes... That proejct uses the basic sass processor, as opposed to mix, so I'm wondering if it's something with how that is processing (or failing to process) the SASS?

I sometimes get an error message reading:

ERROR in ./resources/scss/main.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $map: "color" is not a map.
   ╷
12 │   $item-value: map-get($items, $value-key);
   │                ^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/gorko/src/mixins/_apply-utility.scss 12:16  apply-utility()

Here's my config config code:

'css-vars': (
    'color': $gorko-colors
  ),
  'bg': (
    'items': 'color',
    'css-vars': true,
    'output': 'standard',
    'property': 'background'
  ),
  'color': (
    'items': 'color',
    'css-vars': true,
    'output': 'standard',
    'property': 'color'
  ),
etc.

I've updated sass-loader and other node modules to the latest versions.

Hello @josephdyer

thanks for skeleventy, really nice blog template. I was wondering what you think about a tag page for all posts of particular tag?

Peter

When using npm run dev, it fires up the Eleventy serve and gulp tasks fine, but when using ctrl+c, it only seems to stop gulp, not the eleventy server.

Unless you close your terminal and re-open it, Eleventy will build twice next time, and incrementally from there if you continue to stop gulp and then re-run npm run dev. This only seems to be an issue when pairing it with gulp.

great work on this.

i have a suggestion & question for sitemap.

Njk template there uses "collections.all" to generate sitemap for all possible pages, like so

---
permalink: sitemap.xml
hidden: true
---
<?xml version="1.0" encoding="utf-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
{%- for page in collections.all %}
{%- if not page.data.hidden %}
    <url>
        <loc>{{ site.url }}{{ page.url | url }}</loc>
        <lastmod>{{ page.date | htmlDateDisplay }}</lastmod>
    </url>
{%- endif %}
{%- endfor %}

One of the outputs in a resulting sitemap is
https://skeleventy.netlify.app/category/all/
which is a collection of all possible pages - a bit of a mess for indexing.

Instead of "category all", it would be better that google indexes each category, for example

<url>
<loc>https://skeleventy.netlify.app/category/software/</loc>
<lastmod>2020-7-20</lastmod>
</url>
<url>
<loc>https://skeleventy.netlify.app/category/writing/</loc>
<lastmod>2020-7-20</lastmod>
</url>

But how can i edit that njk template so that it
-captures and outputs different categories in the sitemap?
-excludes category/all
-leaves other important pages like homepage, each blog post etc

thanks again,

Outdated Gulp version

Noticed that:

• npm audit warns about Gulp related security issues.

Suggested fix is to upgrade to more recent version of the tool

Tried to "upgrade" by updating Gulp package versions to latest v4.x related versions, but ended up with error messages.
Most likely the Gulp configuration syntax has changed a bit, and some of the Gulp plugins that this Eleventy "starter kit" project requires are probably not compatible with the latest Gulp version.

Performance issues

Since the Gulp version is already outdated, was wondering if it would make sense to move forward either to the latest Gulp v4.x version, or alternatively to some other build tool. The biggest issue with Gulp have been the slow build times.

Part of the performance issues are caused by the combination of multiple different types of build pipelines:

• Eleventy builds for various template languages.
• Tailwind for building CSS output from the partly Tailwind-specfic "custom" CSS syntax.
• gulp.js for the build pipeline that combines various other tools together, including Tailwind.

I do have my own package.json scripts that I had to adjust because of the Windows compatiblity related issues (shared earlier on another issue), but those don't change the core Guilp build pipeline.

PurgeCSS Gulp integration

Had various issues with the lack of optimized builds, where Tailwind ends up generating a huge 350-400+ kilobyte CSS files, since the post-processing of the generated CSS is not done properly. Tried to solve the issue by running gulp tasks two times, to make sure that Gulp's PostCSS plugin for PurgeCSS @fullhuman/postcss-purgecss would reduce the size of the CSS file.

Snippet from package.json file's scripts section:

    "build-serial": "npm-run-all --serial build:gulp build:eleventy build:gulp",
    "build:gulp": "gulp build",
    "build:eleventy": "eleventy --config=eleventy.config.js",

Originally the build script was parallel, but had to modify it to the --serial mode so that build steps would not get mixed with each other. Reason for the serial build pipeline was mostly the issues caused by the misbehaving PurgeCSS part of the Gulp pipeline.

    // Original version of the build task
    "build": "npm-run-all --parallel build:gulp build:eleventy",

Tailwind customization

For various reason, need to be able to customize the CSS styles.
Had some odd problems on getting the changes to build, and was wondering about how the build pipeline really works.

Sidenotes

While I understand that part of the issue might be caused by my customized package.json scripts, I feel that there is room for improvement on the Tailwind integration part.

Mainly wondering whether I should spend time trying to debug Gulp related issues, or just throw Tailwind and Gulp away and rewrite major part of the template from scratch. That would be a wasted amount of effort, most likely, since there probably is a faster way to fix the problems.

This could just be my ignorance (new with 11ty), but when I run npx @ty/eleventy --serve --port=8080 I get the following error:

TemplateLayoutPathResolver directory does not exist for default: _includes

My 11ty config file seems to point to the right directory. Any tips?

After cloning the project, I'm getting the following build error.

(29:3) `@apply` cannot be used with .transition because .transition is included in multiple rulesets.

I think it's because the transition class name overlaps with the css property of the same name. When I change the class name and all of its references, it builds correctly.

I am maintaining a projects based off of this and I was wondering about the reason for this huge whitelist in the purgeCSS config. Why don't you just use purgeCSS without any config options at all?

Hi,

I have a problem with the tailwind.config.js file which ignores my changes. I have just cloned skeleventy and add to tailwind.config.js a specific height.

module.exports = { future: { removeDeprecatedGapUtilities: true, purgeLayersByDefault: true }, prefix: '', important: false, separator: ':', theme: { spacing: { (...) '84': '21rem', } }

After saving the file, stopping the server and npm run dev again, the utility class created won't be applied : h-84. I also tried to add the change to theme.extend but still doesn't work.

Is there something in particular to do in order to customize this file ?
Thanks a lot for your help !

Sorry, probably a newbie question, but when I view dist > index.html and then click on blog (for example) the browser throws an error message: Cannot GET /blog/

I've attempted to add a .htaccess file to dist folder with the following code (to address the issue):

`Options +ExecCGI +FollowSymLinks -MultiViews

RewriteEngine on
RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule ^(.*)$ /$1.html [L]`

Again, I'm unsure if this is the issue and whether it is the correct way to address it. I look forward to any guidance you may be able to provide. Thank you.

After downloading and installing the code I got the following warning:

npm WARN deprecated [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

Not sure if this needs addressing?

Currently you need to manually change the build folder and command when adding to Netlify. Not hard to do but tripped me up for a few minutes when my build failed.

Easily fixed with a Netlify config file, which would set those automatically.

Something like: netlify.toml

[build]
  command = "npm run production"
  publish = "dist"