Auto-generate .htaccess files for specific folders?

[maschinenzeitmaschine]

I have a portfolio website with several projects (each a page) and two global data files listing these projects:

• The first, 'projects.json' lists all pages which are linked and part of the website.
• The second, 'projects_unlisted.json', lists pages, I temporarily do not want to show and which are created, but not linked (so one can only view these with the direct url). I set this up in a way, so I can just move an entry from one into the other json, thereby in- or exluding the project from the main page.

Question: Is there any easy way to make eleventy copy a .htaccess file into the folders listed in the projects_unlisted.json, so these (and only these) can only be accessed when having a log-in and password?

The .htaccess file can be the same for all unlisted projects, something like this:

AuthName "open sesame"
AuthType Basic
AuthUserFile /path/.htpasswd
require valid-user

My projects.json and projects_unlisted.json look both the same, like this:

[
  {
    "shorttitle": "projectB",
    "thumb": "img/projectB.jpg",
    "url": "p_projectB/"
  },
  {
    "shorttitle": "projectE",
    "thumb": "img/projectE.jpg",
    "url": "p_projectE/"
  },
]

[pdehaan]

Easiest ways to add an .htaccess file are probably just using passthrough file copy or you could create an .htaccess.njk file and set a permalink: unlisted/.htaccess front matter key for that template.

[pdehaan]

OK, I couldn't get the passthrough copy version to work since I guess it doesn't like me calling this multiple times w/ the same key:

eleventyConfig.addPassthroughCopy({ ".htaccess": "p_projectA" });
eleventyConfig.addPassthroughCopy({ ".htaccess": "p_projectC" });

(it seems like it only gets copied into p_projectC/.htaccess since that was declared last)

But the pagination idea worked.

.eleventy.js

module.exports = function (eleventyConfig) {
  return {
    dir: {
      input: "src",
      output: "www",
    }
  };
};

src/_data/projects_unlisted.json

[
  {
    "shorttitle": "projectA",
    "thumb": "img/projectA.jpg",
    "url": "p_projectA/"
  },
  {
    "shorttitle": "projectC",
    "thumb": "img/projectC.jpg",
    "url": "p_projectC/"
  }
]

src/projects/unlisted.njk

---
pagination:
  data: projects_unlisted
  size: 1
  alias: project
permalink: "{{ project.url }}"
---

<h1 data-unlisted>{{ project.shorttitle }}</h1>

src/projects/unlisted_htaccess.njk

---
pagination:
  data: projects_unlisted
  size: 1
  alias: project
permalink: "{{ project.url }}.htaccess"
---

AuthName "open sesame"
AuthType Basic
AuthUserFile /.htpasswd
require valid-user

OUTPUT

tree -aI node_modules
.
├── .eleventy.js
├── package-lock.json
├── package.json
├── src
│   ├── _data
│   │   ├── projects.json
│   │   └── projects_unlisted.json
│   └── projects
│       ├── listed.njk
│       ├── unlisted.njk
│       └── unlisted_htaccess.njk
└── www
    ├── p_projectA
    │   ├── .htaccess
    │   └── index.html
    ├── p_projectB
    │   └── index.html
    ├── p_projectC
    │   ├── .htaccess
    │   └── index.html
    └── p_projectE
        └── index.html

8 directories, 14 files

---

Another option might just be to have a single list/array of src/_data/projects.json and add an optional Boolean unlisted field:

[
  {
    "shorttitle": "projectA",
    "thumb": "img/projectA.jpg",
    "url": "p_projectA/",
    "unlisted": true
  },
  {
    "shorttitle": "projectB",
    "thumb": "img/projectB.jpg",
    "url": "p_projectB/"
  },
  {
    "shorttitle": "projectC",
    "thumb": "img/projectC.jpg",
    "url": "p_projectC/",
    "unlisted": true
  },
  {
    "shorttitle": "projectE",
    "thumb": "img/projectE.jpg",
    "url": "p_projectE/"
  }
]

Although now you'd need a slight bit of extra work to filter the collection in order to dynamically write those .htaccess files in only the projects with an unlisted: true property (using 11ty pagination's before() callback.

[pdehaan]

Actually, this was a bit easier than I expected (re: merging listed and unlisted projects into a single array):

src/_data/projects.json

[
  {
    "shorttitle": "projectA",
    "thumb": "img/projectA.jpg",
    "url": "p_projectA/",
    "unlisted": true
  },
  {
    "shorttitle": "projectB",
    "thumb": "img/projectB.jpg",
    "url": "p_projectB/"
  },
  {
    "shorttitle": "projectC",
    "thumb": "img/projectC.jpg",
    "url": "p_projectC/",
    "unlisted": true
  },
  {
    "shorttitle": "projectE",
    "thumb": "img/projectE.jpg",
    "url": "p_projectE/"
  }
]

src/projects/pagination.njk

Write out BOTH listed and unlisted projects using the same template.

---
pagination:
  data: projects
  size: 1
  alias: project
permalink: "{{ project.url }}"
---

<h1>{{ project.shorttitle }}</h1>

src/projects/htaccess.njk

Personally i generally prefer to move the JavaScript front matter into an *.11tydata.js file versus using ---js front matter, but 🤷 .

---
# see htaccess.11tydata.js
---

AuthName "open sesame"
AuthType Basic
AuthUserFile /.htpasswd
require valid-user

src/projects/htaccess.11tydata.js

And the front matter for the htaccess.njk file uses the before() callback to filter out ONLY the unlisted projects, so we can write the .htaccess files in those directories.

module.exports = {
  pagination: {
    data: "projects",
    size: 1,
    alias: "project",
    before(data, cfg) {
      return data.filter(p => p.unlisted === true);
    }
  },
  permalink: "{{ project.url }}.htaccess"
};

OUTPUT

> eleventy

[11ty] Writing www/p_projectA/index.html from ./src/projects/pagination.njk
[11ty] Writing www/p_projectB/index.html from ./src/projects/pagination.njk
[11ty] Writing www/p_projectC/index.html from ./src/projects/pagination.njk
[11ty] Writing www/p_projectE/index.html from ./src/projects/pagination.njk
[11ty] Writing www/p_projectA/.htaccess from ./src/projects/htaccess.njk
[11ty] Writing www/p_projectC/.htaccess from ./src/projects/htaccess.njk

[11ty] Wrote 6 files in 0.04 seconds (v1.0.2)

[maschinenzeitmaschine]

oh, wow! thank you so much for this custom-tailored, in-depth answer!!!
as i'd rather not change the setup with the two jsons (because that would cause other problems down the line), i went with your first route, but unfortunately i get an error:

[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] > Output conflict: multiple input files are writing to `dist/p_projectA/index.html`. Use distinct `permalink` values to resolve this conflict.
  1. ./src/p_projectA.html
  2. ./src/unlisted.njk

i only see two things, which are different in your setup from mine, but i do not think either one is the problem... that said, they are:

• my project templates are not in src/projects/ but directly in src/
• as vscode does not format things nicely with .njk, but does so with .html, my project templates are named .html (but i did specify njk as sole template engine, so it should be all the same).

[pdehaan]

Ah, the old dreaded conflicting permalink issue.
Not sure I understand what is going wrong. Is ./src/p_projectA.html your input file?
I think I was dynamically generating the projects based on my mock JSON data from "src/_data/projects.json" and "src/_data/projects_unlisted.json". If you're manually creating those input files though, then you might not need my solution of the ./src/unlisted.njk file, and can just do the approach which copies just the .htaccess file into the unlisted folders:

---
pagination:
  data: projects_unlisted
  size: 1
  alias: project
permalink: "{{ project.url }}.htaccess"
---

AuthName "open sesame"
AuthType Basic
AuthUserFile /.htpasswd
require valid-user

Or this might be easier to debug if you have a public repo or simplified test case somewhere.

[maschinenzeitmaschine]

omg.
i have no idea how you manage to infer from my sparse error message, how i put this together, but you're right. i do have a separate template for each project and only use these datafiles for things like navigation. simply removing src/unlisted.njk did the trick. this works perfectly. again, thank you so very much!!!