Eleventy Card

Thu, 02 May 2024 Private

TWCARTY is a minimal, responsive starter template for photographers and artists to showcase their work and blog posts.

Features

Clean and modern design
Automatic minification of HTML, CSS, and JS
Lazy loading for images to improve performance
Built-in DaisyUI integration
Carousel for photo galleries
Simple comment system included

Getting Started

Requirements

Basic knowledge of:

Git
NPM
HTML & CSS (JavaScript is optional)

Installation Steps

Clone the repository

git clone https://github.com/sira313/twcarty

Install PNPM globally
```
npm install -g pnpm
```
Install dependencies
```
pnpm install
```
Run the project
```
pnpm run dev
```

Project Structure

scripts/
src/
├── asset/
│   ├── blog/
│   ├── index/
│   └── photos/
│       └── thumbnail/
├── blog/
├── photos/
├── _data/
├── _includes/
│   ├── footer/
│   ├── index/
│   ├── js/
│   ├── main/
│   ├── nav/
│   ├── post/
│   └── search/
└── _pages/
    ├── data/
    ├── js/
    ├── main/
    └── tags/

Configuration

Global Data

In eleventy.config.mjs, you can set global site data:

eleventyConfig.addGlobalData("lang", "en");
eleventyConfig.addGlobalData("rootTitle", "Apoxicam");
eleventyConfig.addGlobalData("rootURL", "https://twcarty.netlify.app");
eleventyConfig.addGlobalData(
  "quotes",
  "<i>No one comes to your website to be entertained...</i><br /><b>― Jay Baer</b>"
);

Social Media Links

Edit src/_data/sosmed.json to include your social media.
Use Feather Icons or custom SVGs made in Inkscape.

Menus

Default menus:

Photos
Blog

To add more menus, follow this tutorial
Update your collections in .eleventy.js:

const collectionConfigs = [
  { name: "posts", glob: "src/blog/**/*.md" },
  { name: "photos", glob: "src/photos/**/*.md" },
  { name: "recentPosts", glob: "src/blog/*.md", limit: 3 },
  { name: "recentPhotos", glob: "src/photos/*.md", limit: 6 },
];

Also update:

src/_data/nav.json for desktop view
src/_data/nav-mobile.json for screens < 300px

Layouts

Defined in src/_includes/:

base.html – main layout
post-blog.html – for blog posts
post-photos.html – for photo posts

Index Pages

Located in src/_pages/:

index.md – homepage
photos.html – photo gallery
blog.html – blog listing

Creating Posts

Use the helper script to automate post creation:

For blog posts:
```
pnpm mkpost -b "Your post title"
```
For photo posts:
```
pnpm mkpost -p "Your post title"
```

These will generate Markdown files in their respective folders.

Assets

Images and other assets are stored in /src/asset/
You can link them from the front matter in your posts.

Image Optimization

Use Squoosh to convert images to .webp for better performance.
While eleventy-img is available, it didn’t match this project’s needs. Feel free to explore it here.

Support

If you find this project helpful, you can support me here:

🔒 Private Post