Configuration

Already getting started your post? It's time to learn more to makes your website yours with the customizable configuration.

Here's some customization to make your site more yours.
Firstly, you can open the _data/site.json file, you will find some configuration here.

{
    "locale": "en_US",
    "lang": "en",
    "title": "11ty Beer Web",
    "shortTitle": "11ty Beer",
    "author": "LIGMATV",
    "url": "https://11ty-beer.vercel.app",
    "description": "Welcome to my blog, powered by 11ty & BeerCSS.",
    "ghRepo": "LIGMATV/11ty-beer",
    "keywords": ["eleventy", "material", "pwa"],
    "socialItems": [
        { "title": "Feed", "url": "/feed.xml", "icon": "rss" },
        { "title": "GitHub", "url": "https://github.com/LIGMATV/11ty-beer", "icon": "github" },
        { "title": "Mastodon", "url": "https://techhub.social/@ligmatv", "icon": "mastodon", "rel": "me" }
    ],
    "menuItems": [
        { "title": "Home", "url": "/", "icon": "home-variant-outline" },
        { "title": "Posts", "url": "javascript:ui('#dialog-posts');", "icon": "star-box-outline" },
        { "title": "Tags", "url": "javascript:ui('#dialog-tags');", "icon": "tag-multiple-outline" },
        { "title": "Theme", "url": "javascript:ui('#dialog-themes');", "icon": "palette-outline" }
    ]
}

Locale & Language

Permanent link

The locale and language of your website. Native locale is optional.

    "locale": "en_US",
    "lang": "en",

Title & Short title

Permanent link

The title or name for your website. Short title is used for your PWA's app name.

    "title": "11ty GMX Web",
    "shortTitle": "11ty GMX",

Bio

Permanent link

Author

Permanent link

Who's the author? Ghost? You can change it by changes the author string.
Example of the usage: <meta name="author" content="LIGMATV">

    "author": "LIGMATV",

Url

Permanent link

Url to your (this) website. Used in sitemap.xml and robots.txt for search engine optimization.

    "url": "https://11ty-beer.vercel.app",

Description

Permanent link

The default description if the description string in the frontmatter is not filled.
Example of the usage: <meta name="description" content="Welcome to my blog, powered by 11ty & GMX.css.">

    "description": "Welcome to my blog, powered by 11ty & GMX.css.",

GitHub Repository

Permanent link

The github repository which used for hosting the website code.
Example of the usage: The "View source of this page" and "Edit this page" button in posts.

    "ghRepo": "LIGMATV/11ty-beer",

Keywords

Permanent link

The default keywords if the tags array in the frontmatter is not filled.
Example of the usage: <meta name="keywords" content="eleventy, material, pwa">

    "keywords": ["eleventy", "material", "pwa"],

Social items

Permanent link

Used in the footer. There's a 3 strings for every arrays you need to fill.

1. title: The title/name of the social media.
2. url: The social media URL.
3. icon: The logo for the website. You can find the logo names in Simple Icons.
4. rel: (Optional) The relationship between the website and social media. Useful for Fediverse verification.

    "socialItems": [
        { "title": "Feed", "url": "/feed.xml", "icon": "rss" },
        { "title": "GitHub", "url": "https://github.com/LIGMATV/11ty-beer", "icon": "github" },
        { "title": "Mastodon", "url": "https://techhub.social/@ligmatv", "icon": "mastodon", "rel": "me" }
    ],

Menu items

Permanent link

Used as lists in sidebar menu. There are 3 strings for every arrays you need to fill.

1. title: The title of the page.
2. url: The link to the page. For triggering with data-ui, use javascript:ui('...').
3. icon: The icon that is presenting the page. You can find the icon names in Pictogrammer's Material Design Icons.

    "menuItems": [
        { "title": "Home", "url": "/", "icon": "home-variant-outline" },
        { "title": "Posts", "url": "javascript:ui('#dialog-posts');", "icon": "star-box-outline" },
        { "title": "Tags", "url": "javascript:ui('#dialog-tags');", "icon": "tag-multiple-outline" },
        { "title": "Theme", "url": "javascript:ui('#dialog-themes');", "icon": "palette-outline" }
    ]

Favicons

Permanent link

To create a complete favicon for PWA and various platforms in the right size and format, we rely on the image generator from PWA Builder ↗. Once the zip is created, you can extract it to src/public/favicon, which includes the android, ios, and windows11 folders.

You can see the demonstration of the generated favicons by PWA Builder