How to duplicate the "Posts" functionality

[AdrianSandu]

Hello,

I need a "cooking recipe" on how to duplicate the "Posts" functionality. Practically, I want to have multiple folders and their respective collections and their individual layouts. I want my blog articles to sit in the "./articles" folder with their custom layout, portfolio items to sit in "./portfolio", case studies in "./case-studies" and so on.

So far I couldn't find a clear tutorial on how to achieve this goal. Ideally, I would want something like this: " Step 1: You need to duplicate the posts folder Step 2: do this in this file ... Step X: Enjoy your new section of the site "

[jchck]

Hey @AdrianSandu I think collections are what you're looking for.

Check out the Eleventy One starter project, in it the posts are a collection since they've all been tagged with "tags": "post".

You could extrapolate collections for case-studies & portfolio following this pattern.

Hope this helps!

[Ryuno-Ki]

Or define a custom collection based on them.

[AdrianSandu]

For clarity, I am indeed using the Eleventy base blog starter project, on Windows 10. Here is what I've done so far.

I duplicated the posts folder, searched and replaced any instance of post with article. Here is the new articles.json content:

{
  "layout": "layouts/article.njk",
  "tags": [
    "articles"
  ]
}

I created a new template articleslist.njk with the following content:

{% for article in collection.articles %}
  <a href="{{ article.url | url }}">{% if article.data.title %}{{ article.data.title }}{% else %}<code>{{ article.url }}</code>{% endif %}</a>
{% endfor %}

I've tried to define the collection in eleventy.js:

eleventyConfig.addCollection("articles", function(collection) {
  // Also accepts an array of globs!
  return collection.getFilteredByGlob(["articles/*.md"]);
});

Finally, I try to display the new collection in index.njk:

<h1>Latest 3 Articles</h1>

{% for article in collection.articles %}
<a href="{{ article.url | url }}" class="postlist-link">{% if article.data.title %}{{ article.data.title }}{% else %}<code>{{ article.url }}</code>{% endif %}</a>
{% endfor %}

{% include "articleslist.njk" %}

Everything compiles properly, but nothing is rendered, except the H1 tag. I'm obviously missing something but what?

That's why I think there's a need for some tutorials in cook-book recipe style.

I can't find the place where the posts collection is defined. I think it's done somewhere in the core of the application. So how can I reverse engineer it if is practically a black box from my perspective?

[Ryuno-Ki]

"tags": [
  "articles"
]

This creates a collection.articles for eleventy.

eleventyConfig.addCollection("articles", function(collection) {
  // Also accepts an array of globs!
  return collection.getFilteredByGlob(["articles/*.md"]);
});

This creates a collection.articles for eleventy.

So you are creating some confusion … What happens, if you rename the first argument of eleventyConfig.addCollection to something else?

[AdrianSandu]

I tried it first just with the tags. Nothing happened. Then I added the collection definition, thinking that maybe that was the missing part.

I tried again, as you recommended, to change the collection name. Here is the updated code.

eleventyConfig.addCollection("smurfs", function(collection) {
    // Also accepts an array of globs!
    return collection.getFilteredByGlob(["articles/*.md"]);
});

Then I tried to list the collection inside index.njk:

<h1>Latest 3 Smurfs</h1>

{% for smurf in collection.smurfs %}
<a href="{{ smurf.url | url }}" class="postlist-link">{% if smurf.data.title %}{{ smurf.data.title }}{% else %}<code>{{ smurf.url }}</code>{% endif %}</a>
{% endfor %}

Again, only the H1 is displayed in the page. The for loop shows nothing.

[AdrianSandu]

Just in case I'm messing up the paths, here is the folder structure. As I said, I'm on Windows 10.

[gurmanbh]

I trying something similar and in my case it doesn't even serve. JS out of heap. As soon as I delete my equivalent of the articles folder, everything is fine.

[Ryuno-Ki]

Do you have a public repo we could check out to help investigating?

[paulshryock]

Add a Content Type

1. Create a folder with the plural content type name (i.e., /articles)

2. (optional -- this step is my personal preference) Create a front matter template with the singular content type name (i.e., /articles/article.front-matter.template), and include all front matter data fields for this content type that you plan to use

3. Create a default data file for this content type with the plural content type name (make sure this matches the folder name, i.e., /articles/articles.json), and remember to include a layout and content_type

   i.e.:

   {
     "layout": "article",
     "content_type": "article"
   }

4. If this content type will use a new layout, create that template file (i.e., /_includes/_layouts/article.html)

5. If you created a new layout, add a layout alias using eleventyConfig.addLayoutAlias():

   eleventyConfig.addLayoutAlias('article', '_layouts/article');

6. In .eleventy.js, use eleventyConfig.addCollection() to add a custom collection to return content from the new content type:

   // Return articles
   eleventyConfig.addCollection("articles", function(collection) {
    return collection.getAll().filter(function(item) {
        return item.data.content_type == "article";
    });
   });

https://docs.newprojectstarterkit.com/develop/content#add-a-content-type

[AdrianSandu]

Thank you, Paul! That's exactly the step-by-step kind of instructions I was looking for. I am going to give you a try and see how this works for me.

[AdrianSandu]

@paulshryock Your repo has a merge conflict inside package.json. I'm trying to solve it myself on my end, but you should get it done on your side too.

[AdrianSandu]

@paulshryock

I tried your code repo on a clean fresh install.

I manually edited the merge conflict mentioned above. I ran npm install successfully. Then I ran npm audit fix. So far so good. When I ran npm start, everything crashed again.

Here is the output from the PowerShell window:

PS C:\work\eleventy\adriansandu> npm install

> node-sass@4.12.0 install C:\work\eleventy\adriansandu\node_modules\node-sass
> node scripts/install.js

Cached binary found at C:\Users\Adrian\AppData\Roaming\npm-cache\node-sass\4.12.0\win32-x64-72_binding.node

> core-js@3.1.3 postinstall C:\work\eleventy\adriansandu\node_modules\@babel\register\node_modules\core-js
> node scripts/postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> core-js@2.6.9 postinstall C:\work\eleventy\adriansandu\node_modules\core-js
> node scripts/postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> core-js-pure@3.1.3 postinstall C:\work\eleventy\adriansandu\node_modules\core-js-pure
> node scripts/postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> node-sass@4.12.0 postinstall C:\work\eleventy\adriansandu\node_modules\node-sass
> node scripts/build.js

Binary found at C:\work\eleventy\adriansandu\node_modules\node-sass\vendor\win32-x64-72\binding.node
Testing binary
Binary is fine

> cwebp-bin@5.1.0 postinstall C:\work\eleventy\adriansandu\node_modules\cwebp-bin
> node lib/install.js

  √ cwebp pre-build test passed successfully

> gifsicle@4.0.1 postinstall C:\work\eleventy\adriansandu\node_modules\gifsicle
> node lib/install.js

  √ gifsicle pre-build test passed successfully

> mozjpeg@6.0.1 postinstall C:\work\eleventy\adriansandu\node_modules\mozjpeg
> node lib/install.js

  √ mozjpeg pre-build test passed successfully

> optipng-bin@5.1.0 postinstall C:\work\eleventy\adriansandu\node_modules\optipng-bin
> node lib/install.js

  √ optipng pre-build test passed successfully

> pngquant-bin@5.0.2 postinstall C:\work\eleventy\adriansandu\node_modules\pngquant-bin
> node lib/install.js

(node:42096) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGINT listeners added. Use emitter.setMaxListeners() to increase limit
  √ pngquant pre-build test passed successfully

> webpack-cli@3.3.2 postinstall C:\work\eleventy\adriansandu\node_modules\webpack-cli
> node ./bin/opencollective.js

                            Thanks for using Webpack!
                 Please consider donating to our Open Collective
                        to help us maintain this package.

                 Donate: https://opencollective.com/webpack/donate

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1567 packages from 793 contributors and audited 22848 packages in 39.78s
found 369 vulnerabilities (1 moderate, 368 high)
  run `npm audit fix` to fix them, or `npm audit` for details
PS C:\work\eleventy\adriansandu> npm audit fix
npm WARN acorn-dynamic-import@4.0.0 requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN acorn-jsx@5.0.1 requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 2 packages from 1 contributor, removed 4 packages and updated 12 packages in 12.311s
fixed 369 of 369 vulnerabilities in 22848 scanned packages
PS C:\work\eleventy\adriansandu> npm audit

                       === npm audit security report ===

found 0 vulnerabilities
 in 23040 scanned packages
PS C:\work\eleventy\adriansandu> npm start

> New-Project-Starter-Kit@0.24.0 start C:\work\eleventy\adriansandu
> npm run build

> New-Project-Starter-Kit@0.24.0 prebuild C:\work\eleventy\adriansandu
> npm test && npm run clean && npm run webpack

> New-Project-Starter-Kit@0.24.0 pretest C:\work\eleventy\adriansandu
> npm run standard:fix

> New-Project-Starter-Kit@0.24.0 standard:fix C:\work\eleventy\adriansandu
> npx standard --fix

> New-Project-Starter-Kit@0.24.0 test C:\work\eleventy\adriansandu
> echo 'Error: no test specified'

'Error: no test specified'

> New-Project-Starter-Kit@0.24.0 clean C:\work\eleventy\adriansandu
> npm run clean:dist & npm run clean:js & npm run clean:css & npm run clean:fonts & npm run clean:img

> New-Project-Starter-Kit@0.24.0 clean:dist C:\work\eleventy\adriansandu
> if [ -e dist ]; then rm -R dist; fi

-e was unexpected at this time.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! New-Project-Starter-Kit@0.24.0 clean:dist: `if [ -e dist ]; then rm -R dist; fi`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the New-Project-Starter-Kit@0.24.0 clean:dist script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Adrian\AppData\Roaming\npm-cache\_logs\2019-07-31T12_32_46_624Z-debug.log

> New-Project-Starter-Kit@0.24.0 clean:js C:\work\eleventy\adriansandu
> if [ -e src/js ]; then rm -R src/js; fi

-e was unexpected at this time.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! New-Project-Starter-Kit@0.24.0 clean:js: `if [ -e src/js ]; then rm -R src/js; fi`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the New-Project-Starter-Kit@0.24.0 clean:js script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Adrian\AppData\Roaming\npm-cache\_logs\2019-07-31T12_32_47_498Z-debug.log

> New-Project-Starter-Kit@0.24.0 clean:css C:\work\eleventy\adriansandu
> if [ -e src/css ]; then rm -R src/css; fi

-e was unexpected at this time.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! New-Project-Starter-Kit@0.24.0 clean:css: `if [ -e src/css ]; then rm -R src/css; fi`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the New-Project-Starter-Kit@0.24.0 clean:css script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Adrian\AppData\Roaming\npm-cache\_logs\2019-07-31T12_32_48_363Z-debug.log

> New-Project-Starter-Kit@0.24.0 clean:fonts C:\work\eleventy\adriansandu
> if [ -e src/fonts ]; then rm -R src/fonts; fi

-e was unexpected at this time.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! New-Project-Starter-Kit@0.24.0 clean:fonts: `if [ -e src/fonts ]; then rm -R src/fonts; fi`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the New-Project-Starter-Kit@0.24.0 clean:fonts script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Adrian\AppData\Roaming\npm-cache\_logs\2019-07-31T12_32_49_246Z-debug.log

> New-Project-Starter-Kit@0.24.0 clean:img C:\work\eleventy\adriansandu
> if [ -e src/img ]; then rm -R src/img; fi

-e was unexpected at this time.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! New-Project-Starter-Kit@0.24.0 clean:img: `if [ -e src/img ]; then rm -R src/img; fi`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the New-Project-Starter-Kit@0.24.0 clean:img script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Adrian\AppData\Roaming\npm-cache\_logs\2019-07-31T12_32_50_119Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! New-Project-Starter-Kit@0.24.0 clean: `npm run clean:dist & npm run clean:js & npm run clean:css & npm run clean:fonts & npm run clean:img`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the New-Project-Starter-Kit@0.24.0 clean script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Adrian\AppData\Roaming\npm-cache\_logs\2019-07-31T12_32_50_149Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! New-Project-Starter-Kit@0.24.0 prebuild: `npm test && npm run clean && npm run webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the New-Project-Starter-Kit@0.24.0 prebuild script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Adrian\AppData\Roaming\npm-cache\_logs\2019-07-31T12_32_50_179Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! New-Project-Starter-Kit@0.24.0 start: `npm run build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the New-Project-Starter-Kit@0.24.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Adrian\AppData\Roaming\npm-cache\_logs\2019-07-31T12_32_50_210Z-debug.log

And this is the content of the log file mentioned at the end of the dump above.

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'start'
1 verbose cli ]
2 info using npm@6.9.0
3 info using node@v12.2.0
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle New-Project-Starter-Kit@0.24.0~prestart: New-Project-Starter-Kit@0.24.0
6 info lifecycle New-Project-Starter-Kit@0.24.0~start: New-Project-Starter-Kit@0.24.0
7 verbose lifecycle New-Project-Starter-Kit@0.24.0~start: unsafe-perm in lifecycle true
8 verbose lifecycle New-Project-Starter-Kit@0.24.0~start: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\work\eleventy\adriansandu\node_modules\.bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\Python27\;C:\Python27\Scripts;C:\ProgramData\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Users\Adrian\AppData\Roaming\nvm;C:\Program Files\nodejs;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\NVIDIA Corporation\NVIDIA NvDLISR;C:\ProgramData\chocolatey\bin;C:\Program Files\Git\cmd;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\nodejs\;C:\Users\Adrian\AppData\Local\Microsoft\WindowsApps;;C:\Users\Adrian\AppData\Local\GitHubDesktop\bin;C:\Users\Adrian\AppData\Local\atom\bin;C:\Users\Adrian\AppData\Local\Microsoft\WindowsApps;C:\work\apache-maven-3.6.0\bin;C:\Users\Adrian\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\Adrian\AppData\Roaming\npm
9 verbose lifecycle New-Project-Starter-Kit@0.24.0~start: CWD: C:\work\eleventy\adriansandu
10 silly lifecycle New-Project-Starter-Kit@0.24.0~start: Args: [ '/d /s /c', 'npm run build' ]
11 silly lifecycle New-Project-Starter-Kit@0.24.0~start: Returned: code: 1  signal: null
12 info lifecycle New-Project-Starter-Kit@0.24.0~start: Failed to exec start script
13 verbose stack Error: New-Project-Starter-Kit@0.24.0 start: `npm run build`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:301:16)
13 verbose stack     at EventEmitter.emit (events.js:196:13)
13 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:196:13)
13 verbose stack     at maybeClose (internal/child_process.js:1011:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:268:5)
14 verbose pkgid New-Project-Starter-Kit@0.24.0
15 verbose cwd C:\work\eleventy\adriansandu
16 verbose Windows_NT 10.0.17763
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
18 verbose node v12.2.0
19 verbose npm  v6.9.0
20 error code ELIFECYCLE
21 error errno 1
22 error New-Project-Starter-Kit@0.24.0 start: `npm run build`
22 error Exit status 1
23 error Failed at the New-Project-Starter-Kit@0.24.0 start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

At this rate, I think I'm simply going to give up on 11ty and move back to Hugo.

[paulshryock]

I tried your code repo on a clean fresh install.

You don't need to use my repo--that's a work-in-progress, and it uses Eleventy plus a bunch of other stuff. It's not really important for this issue.

In your existing project, or a fresh Eleventy install, you can create new content types easily by following the instructions above.

[paulshryock]

Your repo has a merge conflict inside package.json. I'm trying to solve it myself on my end, but you should get it done on your side too.

@AdrianSandu I removed the merge conflict, updated dependencies, and cleaned up a few things in that starter kit repo. It builds properly again, if you do want to try it out. (latest pre-release: https://github.com/paulshryock/New-Project-Starter-Kit/releases/tag/0.26.0)

[paulshryock]

@AdrianSandu, Here is a repo showing (only) how to create many content types in Eleventy, without any other tools or unnecessary code (aside from a few lines of basic CSS): https://github.com/paulshryock/Eleventy-Content-Types-Example

Clone the repo, run npm i && npm run serve to see it in a browser at http://localhost:8080/.

[binyamin]

@AdrianSandu Do you still need help here?

[AdrianSandu]

Sorry, I've been busy with other things and I stopped checking this.

I've managed to do the thing I wanted, using the beginner tutorials with the current basic installation of Eleventy (using none of the starter packages). A big "Thank you!" to all that offered their help.

[Ryuno-Ki]

That's great, @AdrianSandu! Would be even better if you could share some snippets, so the next person running into this issue might find some guidance :-)

[binyamin]

For all who need help, I wrote an article about the solution.