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": "DEV.to", "url": "https://dev.to/ligmatv", "icon": "devdotto" }
    ],
    "menuItems": [
        { "title": "Home", "url": "/", "icon": "home" },
        { "title": "Posts", "url": "javascript:ui('#dialog-posts');", "icon": "pages" },
        { "title": "Tags", "url": "javascript:ui('#dialog-tags');", "icon": "sell" },
        { "title": "Theme", "url": "javascript:ui('#dialog-themes');", "icon": "palette" }
    ]
}

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.

    "socialItems": [
        { "title": "Feed", "url": "/feed.xml", "icon": "rss" },
        { "title": "GitHub", "url": "https://github.com/LIGMATV/11ty-beer", "icon": "github" },
        { "title": "DEV.to", "url": "https://dev.to/ligmatv", "icon": "devdotto" }
    ],

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 Google Fonts.

    "menuItems": [
        { "title": "Home", "url": "/", "icon": "home" },
        { "title": "Posts", "url": "javascript:ui('#dialog-posts');", "icon": "pages" },
        { "title": "Tags", "url": "javascript:ui('#dialog-tags');", "icon": "sell" },
        { "title": "Theme", "url": "javascript:ui('#dialog-themes');", "icon": "palette" }
    ]