A Community-Driven Site with Eleventy: Building the Site

In the previous article, we explored the planning phase for a community-driven website. We discussed the numerous considerations involved in accepting user submissions, drawing from my experience building Style Stage.

Now, let's dive into the code! We'll build an Eleventy setup that serves as a foundation for your community (or personal) website.

Series:

1. Planning for Contributions
2. Building the Site (Current Article)

This article covers:

• Setting up Eleventy and creating development and build scripts.
• Recommended configuration customizations.
• Defining custom data and merging multiple data sources.
• Creating layouts with Nunjucks and Eleventy layout chaining.
• Deploying to Netlify.

Project Vision

Imagine a platform where users submit photos of their cats and dogs, competing in cuteness contests.

This article focuses solely on pet submissions; user voting (easily implemented with serverless functions) is left for future development. Users submit their pets' profiles, generating a weekly "battle" featuring a random cat versus a random dog on the homepage.

Eleventy Setup

Begin by initializing a new project using npm init, then install Eleventy:

npm install @11ty/eleventy

Optionally, modify the package.json scripts section:

"scripts": {
  "develop": "eleventy --serve",
  "build": "eleventy"
},

This enables development with Browsersync hot-reloading (npm run develop) and production builds (npm run build).

Install fast-glob for efficient data handling:

npm install --save-dev fast-glob

Directory Structure

Eleventy allows customization of input and output directories. Create eleventy.js at the project root:

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

Create a pets directory to store pet data, further subdivided into cats and dogs subdirectories:

<code>pets/
  cats/
  dogs/</code>

Each pet's data will be a JSON file with the following schema:

{
  "name": "",
  "petColor": "",
  "favoriteFood": "",
  "favoriteToy": "",
  "photoURL": "",
  "ownerName": "",
  "ownerTwitter": ""
}

Create a CONTRIBUTING.md file (or README.md) to guide users on submission guidelines and the data schema. Note that favoriteFood, favoriteToy, and ownerTwitter are optional. photoURL should be a URL, not a file upload, for security and hosting reasons.

Data Handling

Create cats.js and dogs.js in the _data directory to combine individual pet files into arrays:

// cats.js
const fastglob = require("fast-glob");
const fs = require("fs");

module.exports = async () => {
  const catFiles = await fastglob("./src/pets/cats/*.json", {
    caseSensitiveMatch: false,
  });

  let cats = new Set();
  for (let cat of catFiles) {
    const catData = JSON.parse(fs.readFileSync(cat));
    cats.add(catData);
  }

  return [...cats];
};

(dogs.js is similar, replacing "cat" with "dog"). This approach minimizes merge conflicts.

Data Output and Templating

Add some sample JSON files to pets/cats and pets/dogs. Create index.njk in the src directory:

<h1 id="Cats">Cats</h1>

{% for cat in cats %}
• {{ cat.name }}
{% endfor %}

Dogs

{% for dog in dogs %}
• {{ dog.name }}
{% endfor %}

Pet Profile Pages and Pagination

Create cats.njk and dogs.njk in the src directory with pagination front matter (example for cats.njk):

---
pagination:
  data: cats
  alias: cat
  size: 1
permalink: "https://www.php.cn/link/543817ed62fa34e371bb229d4f7b603f"
---

This generates individual pages for each pet.

Layout and Computed Data

Create base.njk and pets.njk in src/_includes. base.njk provides HTML boilerplate with {{ content | safe }}. Add layout: base.njk front matter to index.njk. Also add layout: base.njk to pets.njk for layout chaining.

Use eleventyComputed in cats.njk and dogs.njk to share template variables:

---
eleventyComputed:
  title: "{{ cat.name }}"
  petColor: "{{ cat.petColor }}"
  favoriteFood: "{{ cat.favoriteFood }}"
  favoriteToy: "{{ cat.favoriteToy }}"
  photoURL: "{{ cat.photoURL }}"
  ownerName: "{{ cat.ownerName }}"
  ownerTwitter: "{{ cat.ownerTwitter }}"
---

Add content to pets.njk to display pet data. Add layout: pets.njk to cats.njk and dogs.njk.

Deployment to Netlify

Deploy the site to Netlify. Configure Netlify to serve from the public directory and run npm run build on merges. A netlify.toml file can simplify this process. Enable deploy previews for pull requests.

Accepting Submissions

Review contribution guidelines and establish branch protection rules. The submission process involves forking, cloning, creating a JSON file, committing changes, opening a pull request, and merging.

Conclusion

This creates a functional site with automated deployment. Further enhancements include email newsletters, social media previews, commenting systems, and Netlify CMS. The complete example is available on GitHub.

The above is the detailed content of A Community-Driven Site with Eleventy: Building the Site. For more information, please follow other related articles on the PHP Chinese website!