Upload 42 files

content/en/_index.md

@@ -0,0 +1,14 @@
+---
+cover: 'https://raw.githubusercontent.com/foxihd/hugo-et-hd/master/static/svg/flowlines/22.svg'
+keepAspectRatio: true
+---
+
+## Hero Section / Greeter
+
+**This exampleSite is deployed on Github Pages within it's theme repository.**
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+Integer nec posuere quam. Mauris et rhoncus lacus. Pellentesque non sem cursus, interdum nunc ut, efficitur magna. Maecenas consectetur ornare enim, nec tempus tellus vestibulum in. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum venenatis ex non auctor malesuada. Curabitur semper elit sit amet orci facilisis fermentum. Nullam consectetur risus eget leo rhoncus egestas. Suspendisse at diam congue, venenatis augue et, ornare lectus. Curabitur ac lorem ullamcorper, consequat justo at, scelerisque lacus. Vivamus ac erat mauris. Nullam ut nibh tincidunt, placerat magna nec, fermentum tortor. Fusce ut orci sed neque sagittis rhoncus. Morbi eleifend, mauris sit amet dignissim dignissim, mauris nisi tempus orci, a congue elit ex quis ex.
+
+--- Lorem Ipsum

content/en/author/A.N. Other/_index.md

@@ -0,0 +1,8 @@
+---
+title: 'A.N. Other'
+---
+
+## A.N. Other
+
+This author information is written in `content/en/author/A.N. Other/_index.md`.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

content/en/author/author-name/_index.md

@@ -0,0 +1,19 @@
+---
+title: 'Author Name'
+cover: 'https://upload.wikimedia.org/wikipedia/commons/4/4d/Cat_and_styrofoam_%E2%80%93_electrostatic_charge_%28235112299%29.jpg'
+alt: 'Cat named Cooper with styrofoam on his fur due to electrostatic charge'
+flair: 'Available for hire (example flair)'
+---
+
+## Author Name
+
+This author information is written in `content/en/author/author-name/_index.md`.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+[Original image](https://commons.wikimedia.org/wiki/File:Cat_demonstrating_static_cling_with_styrofoam_peanuts.jpg#/media/File:Cat_and_styrofoam_%E2%80%93_electrostatic_charge_(235112299).jpg) by <a rel="nofollow" class="external text" href="https://www.flickr.com/people/52798669@N00">Sean McGrath</a> from Saint John, NB, Canada - <a rel="nofollow" class="external text" href="https://www.flickr.com/photos/mcgraths/235112299/">Cooper and Styrofoam</a>, <a href="https://creativecommons.org/licenses/by/2.0" title="Creative Commons Attribution 2.0">CC BY 2.0</a>, <a href="https://commons.wikimedia.org/w/index.php?curid=37622131">Link</a>
+
+---
+
+The social icon below is configured in `menus.[lang].toml`.

content/en/footer link.md

@@ -0,0 +1,13 @@
+---
+type: 'footer'
+coffee: 2
+params:
+    headless: true
+---
+
+**Example Links**
+
+- [Example Link 1](#)
+- [Example Link 2](#)
+- [Example Link 3](#)
+- [Example Link 4](#)

content/en/footer link2.md

@@ -0,0 +1,12 @@
+---
+type: 'footer'
+coffee: 2
+params:
+    headless: true
+---
+
+**More Links**
+
+- [More Link 1](#)
+- [More Link 2](#)
+- [More Link 3](#)

content/en/footer.md

@@ -0,0 +1,17 @@
+---
+type: 'footer'
+weight: 1
+coffee: 2
+params:
+    headless: true
+    target: 'https://github.com/foxihd/hugo-brewm'
+---
+
+**Impressum**
+
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+<br>
+
+Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

content/en/pin.md

@@ -0,0 +1,37 @@
+---
+type: 'slide'
+title: 'Pin'
+params:
+    headless: true
+    target: 'https://github.com/foxihd/hugo-brewm'
+---
+
+This is a slide with `{{</* pin */>}}` shortcode.
+
+## Pin it as Showcase (Example)
+
+Section with `{{</* pin */>}}` shortcode.
+The item order is column-based.
+If images are not square, the layout will displayed as masonry style.
+
+{{< pin "begin" >}}
+{{< pin img="https://raw.githubusercontent.com/foxihd/hugo-et-hd/master/static/svg/flowlines/1.svg" label="Item 1">}}
+{{< pin img="https://raw.githubusercontent.com/foxihd/hugo-et-hd/master/static/svg/flowlines/2.svg" label="Item 2">}}
+{{< pin img="https://raw.githubusercontent.com/foxihd/hugo-et-hd/master/static/svg/flowlines/3.svg" label="Item 3">}}
+{{< pin img="https://raw.githubusercontent.com/foxihd/hugo-et-hd/master/static/svg/flowlines/4.svg" label="Item 4">}}
+{{< pin img="https://raw.githubusercontent.com/foxihd/hugo-et-hd/master/static/svg/flowlines/5.svg" label="Item 5">}}
+{{< pin img="https://raw.githubusercontent.com/foxihd/hugo-et-hd/master/static/svg/flowlines/6.svg" label="Item 6">}}
+{{< pin "end" >}}
+
+## Pin it as Catalogue (Example)
+
+`{{</* pin */>}}` shortcode with `quote` parameter.
+
+{{< pin "begin" >}}
+{{< pin img="https://raw.githubusercontent.com/foxihd/hugo-et-hd/master/static/svg/flowlines/7.svg" label="Item 1" url="#my-ecommerce" quote="<s>$299</s> $199" >}}
+{{< pin img="https://raw.githubusercontent.com/foxihd/hugo-et-hd/master/static/svg/flowlines/8.svg" label="Item 2" url="#my-ecommerce" quote="<s>$399</s> $299" >}}
+{{< pin img="https://raw.githubusercontent.com/foxihd/hugo-et-hd/master/static/svg/flowlines/9.svg" label="Item 3" url="#my-ecommerce" quote="Get Quote" >}}
+{{< pin img="https://raw.githubusercontent.com/foxihd/hugo-et-hd/master/static/svg/flowlines/10.svg" label="Item 4" url="#my-ecommerce" quote="<s>$299</s> $199" >}}
+{{< pin img="https://raw.githubusercontent.com/foxihd/hugo-et-hd/master/static/svg/flowlines/11.svg" label="Item 5" url="#my-ecommerce" quote="<s>$399</s> $299" >}}
+{{< pin img="https://raw.githubusercontent.com/foxihd/hugo-et-hd/master/static/svg/flowlines/12.svg" label="Item 6" url="#my-ecommerce" quote="Out of stock" >}}
+{{< pin "end" >}}

content/en/post/_index.md

@@ -0,0 +1,17 @@
+---
+title: "Post"
+translationKey: post
+sitemap:
+    changeFreq: "always"
+---
+
+This section demonstrates a list view layout.
+The post listing style can be modified by adjusting the sitemap changeFreq parameter to values like "always", "hourly", "daily", or "weekly".
+This section has been set up with the following configuration:
+
+    ---
+    title: "Post"
+    translationKey: post
+    sitemap:
+        changeFreq: "always"
+    ---

content/en/post/authoring-cover-images-and-audio-article.md

@@ -0,0 +1,84 @@
+---
+title: "Authoring Cover Images and Audio Articles"
+date: 2025-02-22
+description: "A guide on adding cover images and audio articles"
+draft: false
+author: "Author Name"
+type: "post"
+tags: ["authoring", "content", "media", "audio", "cover", "images", "alt"]
+categories: ["authoring"]
+cover: 'https://upload.wikimedia.org/wikipedia/commons/4/4d/Cat_and_styrofoam_%E2%80%93_electrostatic_charge_%28235112299%29.jpg'
+alt: 'Cat named Cooper with styrofoam on his fur due to electrostatic charge.'
+translationKey: 'media'
+stage: 'budding'
+---
+
+## Adding Cover Images
+
+### Assign The Cover Images
+
+To add a cover image to your article, you have two options:
+
+1. Front Matter Method
+
+You can use either `cover` or `images` parameter for the images source.
+And `alt`, `coverAlt` or `imagesAlt` parameter for alt text.
+
+```yaml
+---
+title: "My Article"
+images: "images/my-cover.jpg"
+alt: "Description of the images"
+---
+```
+
+2. Page Bundle Method
+
+- Create a folder for your post
+- Name your image `cover.*`
+- Place it in the same folder as your content
+- Set the alt text in your post frontmatter
+
+### Place The Cover
+
+You can place your featured images in various layout, anywhere on article content with `{{</* figure */>}}` shortcode:
+
+```toml
+{{</* figure src="cover" caption="alt" */>}}
+```
+
+This is freedom of authoring!
+
+{{< figure src="cover" caption="alt" >}}
+
+
+## Adding Audio Articles
+
+1. Front Matter Method
+
+```yaml
+---
+title: "My Article"
+audio: "audio/my-audio.ogg"
+---
+```
+
+2. Page Bundle Method
+
+You can upload multiple audio format with this method:
+
+- Create a folder for your post
+- Name your audio `audio.*`
+- Place it in the same folder as your content
+
+## Page Bundle Method Examples
+
+Here's how your folder structure should look:
+
+    content/
+    └── posts/
+        └── my-article/
+            ├── index.md
+            ├── cover.jpg
+            ├── audio.mp3
+            └── audio.ogg

content/en/post/authoring-custom-taxonomy.md

@@ -0,0 +1,67 @@
++++
+author = ["Author Name"]
+title = "Authoring Stage Taxonomy for Digital Garden"
+date = "2025-07-28"
+type = "post"
+draft = false
+coffee = 1
+tags = ["authoring", "taxonomy"]
+categories = ["authoring"]
+stage = "evergreen"
+history = [
+  {date = "2025-07-26", stage="seedling"},
+  {date = "2025-07-27", stage="budding"},
+  {date = "2025-07-28", stage="evergreen"},
+]
++++
+
+This theme supports custom taxonomy and growth stage indicators.
+By default `seedling`, `budding` and `evergreen` will have predefined indicator.
+<!--more-->
+But fist, it must be manually set up as follows:
+
+1. Register the taxonomy in your `config.toml`:
+
+```toml
+[taxonomies]
+    stage = "stage"
+```
+
+2. Create taxonomy folder and it's terms `_index.md`:
+
+```
+mysite/
+    ├── ...
+    ├── content/
+    │   └── stage/
+    │       ├─ seedling/
+    │       │   └─ _index.md
+    │       ├─ budding/
+    │       │   └─ _index.md
+    │       └─ evergreen/
+    │           └─ _index.md
+    └── ...
+```
+
+3. Within  `_index.md`, Set the stage `title` and `translationKey` if site is multilingual,
+ you can also override custom `indicator` or `emoji`:
+
+```yaml
+---
+title: 'Stage of me being Godzilla'
+translationKey: godzilla
+emoji: '🦖'
+# indicator: 'https://example.com/indicator.svg'
+---
+
+You can write the introduction or blah blah blah here
+```
+
+4. Add the stage parameter into your post `index.md`:
+
+```yaml
+---
+title: 'My Post'
+stage: 'seedling'
+---
+```

content/en/post/authoring-redaction-history.md

@@ -0,0 +1,36 @@
++++
+author = ["Author Name"]
+title = "Authoring The Redaction History"
+description = "How to set up the redaction history in Hugo Brewm theme"
+date = "2025-02-03"
+type = "post"
+draft = false
+translationKey = "history"
+coffee = 1
+tags = ["authoring", "redaction", "history"]
+categories = ["authoring"]
+stage = "evergreen"
+history = [
+  {date = "2025-02-01", stage="seedling", author = "Author Name", reviewer = "Reviewer Name", note = "Example"},
+  {date = "2025-02-02", stage="budding", author = "Author Name", editor = "Editor Name", note = "Addendum (example)"},
+  {date = "2025-02-03", stage="evergreen", note = "Errata (example)"},
+]
+toot = "https://infosec.exchange/@foxx/113979609651534969"
++++
+
+The redaction history functionality enables you to track and communicate content modifications to readers.
+Within the post's front matter, you can specify details such as `editor`, `reviewer`, and include explanatory notes (`note`) about the changes made.
+This feature requires manual configuration in the post's front matter section.
+
+```toml
++++
+title = "Authoring The Redaction History"
+history = [
+    {date = "2025-02-01", author = "Author Name", reviewer = "Reviewer Name", note = "Example"},
+    {date = "2025-02-02", author = "Author Name", editor = "Editor Name", note = "Addendum (example)"},
+    {date = "2025-02-03", note = "Errata (example)"},
+    ]
++++
+```
+
+A chronological timeline displaying these information will appear under the article's information section, as demonstrated in this example post.

content/en/post/authoring-terms-entry.md

@@ -0,0 +1,45 @@
+---
+author : ['Author Name', 'A.N. Other']
+title: "Authoring Terms Entry"
+description: "How to set the cover and linking of terms entry in Hugo Brewm theme"
+date: 2025-02-03
+type: post
+draft: false
+translationKey: terms
+coffee: 1
+tags: ['authoring', 'cover', 'taxonomy', 'terms']
+categories: ['authoring']
+stage: [seedling]
+---
+
+You can change the cover of each terms entry by adding the `cover` parameter in `_index.md` under `[lang]\[taxonomies]\[terms]\`.
+For example, to set the cover of the term `configuration` in categories, add the parameter in `content\en\categories\configuration\_index.md`.
+
+```yaml
+---
+title: "Configuration"
+description: "Configuration description, this might be useful for HTML metadata"
+cover: "https://example.com/cover.png"
+translationKey: configuration
+---
+
+If something is written here, the text will be displayed as hero section.
+```
+
+To link the terms entry in another language, you can add the `translationKey` parameter.
+For example, if you want to link the terms entry in Indonesian, add the parameter in `content\id\categories\konfigurasi\_index.md`.
+
+```yaml
+---
+title: "Konfigurasi"
+description: "Deskripsi konfigurasi, ini bisa berguna untuk metadata HTML"
+cover: "https://example.com/cover.png"
+translationKey: configuration
+---
+
+Jika ada teks yang ditulis di sini, teks akan ditampilkan sebagai bagian hero.
+```
+
+The same way, you can set the cover of each terms entry for `series` and `author` taxonomies.
+After making these changes, rebuild your site to see the updated cover and translations in breadcrumbs.
+The cover will replace the flowlines images on taxonomies listing.

content/en/post/configure-discussion.md

@@ -0,0 +1,82 @@
+---
+author : ['Author Name']
+title: "Configure Discussion"
+description: "How to configure post discussion in Hugo Brewm theme"
+date: 2025-01-26
+lastmod: 2025-02-10
+type: post
+draft: false
+translationKey: discussion
+coffee: 1
+tags: ['configuration', 'discussion']
+categories: ['configuration']
+toot: "https://infosec.exchange/@foxx/113979609651534969"
+bsky: "https://bsky.app/profile/808.foxx.ink/post/3lknem6ci2s2h"
+---
+
+## Configure Giscus Comments
+
+To enable Giscus comments on your Hugo site, follow these steps:
+
+1. First, install the [Giscus GitHub App](https://github.com/apps/giscus) on your repository
+2. Add the following parameters to your `config.toml`:
+
+```toml
+[params.giscus]
+    repo = "username/repository"
+    repoID = "R_kgDxxxxxxxx"
+    category = "Announcements"
+    categoryID = "DIC_kwDxxxxxxxxxxxxxxxx"
+```
+Replace the following values:
+- `repo`: Your GitHub username and repository name
+- `repoID`: Your repository ID (get from Giscus website)
+- `category`: The discussion category name
+- `categoryID`: The discussion category ID (get from Giscus website)
+
+You can generate these values by visiting [Giscus.app](https://giscus.app) and configuring your preferences.
+The following parameters can be optionally configured:
+
+```toml
+    mapping = "pathname"
+    strict = "0"
+    reactionsEnabled = "1"
+    emitMetadata = "0"
+    inputPosition = "bottom"
+    theme = "preferred_color_scheme"
+    loading = "lazy"
+```
+
+3. By default, Giscus comments will appear on all posts. To disable comments on specific posts, use the front matter parameter:
+
+```yaml
+---
+comments: false  # Disable comments for this post
+---
+```
+
+## Configure Social Media Integration
+The theme supports embedding comments from Bluesky or Mastodon or both social platforms.
+When you include links to your Bluesky or Mastodon posts in the front matter, the Giscus will be automatically replaced.
+
+### Linking discussions with Mastodon post
+
+Link your Mastodon post URL to the front matter using either `toot`, `mstd`, or `mastodon` parameter.
+
+```yaml
+---
+toot: https://example.com/@example/12345678901234567890
+---
+```
+
+### Linking discussions with Bluesky post
+
+Link your Bluesky post URL to the front matter using either `skeet`, `bsky` or `bluesky` parameter.
+
+```yaml
+---
+skeet: https://bsky.app/profile/example.com/post/12345678901234
+---
+```
+
+Note: You may need to estimating the article's permalink on your local preview before sharing on Fediverse platforms to obtain the post link, or you might need to run CI/CD operations twice.

content/en/post/configure-logo-and-accent-color.md

@@ -0,0 +1,81 @@
+---
+author : ['Author Name']
+title: "Configure Logo and Accent Color"
+description: "How to configure the Logo and Accent Color in Hugo Brewm theme"
+date: 2025-01-26
+lastmod: 2025-02-21
+type: post
+draft: false
+translationKey: logo
+coffee: 1
+tags: ['configuration', 'logo', 'color', 'accent']
+categories: ['configuration']
+---
+
+The Hugo Brewm theme allows you to easily configure your site's logo and accent color taylored to your brand. Follow these steps to set up your logo:
+
+## Change Color Accent
+
+To make the color accent align with your brand identity, you can customize the accent color in `custom.css` under `assets/css`.
+For example, in `exampleSite/assets/css/custom.css`:
+
+```css
+:root {
+    /* default contrast */
+    --ac-light: #36c;      /* accent color on default contrast */
+    --fg-light: #111;      /* foreground color on default contrast */
+    --bg-light: #f9f9fb; /* background color on default contrast */
+    --midtone: gray;       /* midtone on default contrast */
+    --fg-dark: #f9f9fb;  /* foreground color on dark mode, default contrast */
+    --bg-dark: #111;       /* background color on dark mode, default contrast */
+    --ac-dark: #fa0;       /* accent color on dark mode, default contrast */
+
+    /* less contrast */
+    --ac-light-less: var(--ac-light);
+    --fg-light-less: #13253d;
+    --bg-light-less: #e7e2e2;
+    --midtone-less: #7d8490;
+    --fg-dark-less: #e7e2e2;
+    --bg-dark-less: #13253d;
+    --ac-dark-less: var(--ac-dark);
+
+    /* more contrast */
+    --ac-light-more: var(--ac-light);
+    --fg-light-more: #000;
+    --bg-light-more: #fff;
+    --midtone-more: gray;
+    --fg-dark-more: #fff;
+    --bg-dark-more: #000;
+    --ac-dark-more: var(--ac-dark);
+}
+```
+
+This file will take the place of custom.css in the theme. To avoid missing the color variable during the build, please copy every variable and do not remove any.
+
+## Adding Logo Image / Logomark Icon
+
+> Prepare your logo image
+>
+> - Create or prepare your logo image file (recommended formats: PNG or SVG)
+> - For best results, use an image with a transparent background
+> - Recommended dimensions: height of 50px to 70px
+> - You can also add dark mode version of your logo
+
+Configure the logo in your site configuration:
+
+```toml
+[params]
+    logoMark = 'https://example.com/logoMark.svg'
+    logoMarkDark = 'https://example.com/logoMarkDark.svg' #optional
+```
+
+## Using Logo Type Preset
+
+If you prefer not to use an image logo, you can enable the built-in text-based logo by adding this setting:
+
+```toml
+[params]
+    logoType = true
+```
+
+After making these changes, rebuild your site to see the updated logo. The logo will automatically appear in the site's header and will be responsive across different device sizes.

content/en/post/configure-main-footer.md

@@ -0,0 +1,55 @@
+---
+author : ['Author Name']
+title: "Configure Main Footer"
+description: "How to configure the main footer in Hugo Brewm theme"
+date: 2025-01-26
+type: post
+draft: false
+translationKey: mainfooter
+coffee: 1
+tags: ['configuration', 'footer']
+categories: ['configuration']
+---
+
+The main footer in Hugo Brewm theme can be customized through several configuration options. Here's how to set up different components of the footer.
+
+## Configure Footer Title and Content
+
+To set up the main footer content, create a markdown file in your content directory with the following front matter:
+
+```yaml
+---
+type: footer
+title: "Your Main Footer Title"
+weight: 1
+params:
+    headless: true # prevent page body to be render and redirect to 404.html
+    target: "https://example.com" # override the redirect target
+---
+```
+
+You can then add your footer content below the front matter using markdown.
+Multiple footer sections can be created using different markdown files.
+
+## Configure Footer Menu Items
+
+Footer menu items can be configured in your site's config.toml file. Here's how to add menu items:
+
+```toml
+[[menu.footer]]
+    identifier = "github"       # Unique identifier for the menu item
+    name = "GitHub"             # Display name/tooltip
+    url = "https://github.com/" # Link URL
+    pre = "github"              # Icon
+```
+
+## Enable Coffee Stats
+
+If you want to display coffee statistics in your footer, enable it in your config.toml:
+
+```toml
+[params]
+    coffeeStat = true    # Set to false to disable
+```
+
+Every `coffee` parameter in your content frontmatter will be counted and displayed in the footer.

content/en/post/configure-menu.md

@@ -0,0 +1,230 @@
+---
+author : ['Author Name']
+title: "Configure Menu"
+description: "How to configure the menu in Hugo Brewm theme"
+date: 2025-01-26
+lastmod: 2025-02-04
+type: post
+draft: false
+translationKey: menus
+coffee: 1
+tags: ['configuration', 'menu']
+categories: ['configuration']
+---
+
+Learn how to configure menus in the Hugo Brewm theme using either `config.toml` or `menus[.lang].toml` files.
+
+## Menu Parameters
+
+- `identifier`: Unique identifier for each menu item
+- `name`: Text shown in the menu
+- `url`: External link destination
+- `pageRef`: Link to internal pages
+- `weight`: Menu item ordering (smaller numbers first)
+- `pre`: Icon placement
+- `post`: Description for the link
+- `parent`: Parent menu item reference
+- `params.target`: Set menu item link target
+
+## Adding Icons
+
+Add icons to your menu items with the `pre` parameter.
+
+```toml {hl_lines=["5"]}
+[[menu.main]]
+    identifier = "github"
+    name = "GitHub"
+    url = "https://github.com/"
+    pre = "github"
+    [[menu.main.params]]
+        target = "_blank"
+```
+
+Here are all the supported list icons and their corresponding names that can be used when configuring your menu items:
+
+<ul class="column pin" role="presentation">
+  <li><i class="icon email"></i> email  </li>
+  <li><i class="icon rss"></i> rss  </li>
+  <li><i class="icon behance"></i> behance  </li>
+  <li><i class="icon bigcartel"></i> bigcartel  </li>
+  <li><i class="icon bitbucket"></i> bitbucket  </li>
+  <li><i class="icon blogger"></i> blogger  </li>
+  <li><i class="icon bluesky"></i> bluesky  </li>
+  <li><i class="icon bukalapak"></i> bukalapak  </li>
+  <li><i class="icon buymeacoffee"></i> buymeacoffee  </li>
+  <li><i class="icon clubhouse"></i> clubhouse  </li>
+  <li><i class="icon codepen"></i> codepen  </li>
+  <li><i class="icon creativefabrica"></i> creativefabrica  </li>
+  <li><i class="icon dailymotion"></i> dailymotion  </li>
+  <li><i class="icon dev"></i> dev  </li>
+  <li><i class="icon deviantart"></i> deviantart  </li>
+  <li><i class="icon digg"></i> digg  </li>
+  <li><i class="icon dribbble"></i> dribbble  </li>
+  <li><i class="icon ebay"></i> ebay  </li>
+  <li><i class="icon etsy"></i> etsy  </li>
+  <li><i class="icon facebook"></i> facebook  </li>
+  <li><i class="icon figma"></i> figma  </li>
+  <li><i class="icon flickr"></i> flickr  </li>
+  <li><i class="icon flipkart"></i> flipkart  </li>
+  <li><i class="icon github"></i> github  </li>
+  <li><i class="icon githubsponsors"></i> githubsponsors  </li>
+  <li><i class="icon gitlab"></i> gitlab  </li>
+  <li><i class="icon gnusocial"></i> gnusocial  </li>
+  <li><i class="icon goodreads"></i> goodreads  </li>
+  <li><i class="icon googlescholar"></i> googlescholar  </li>
+  <li><i class="icon gumroad"></i> gumroad  </li>
+  <li><i class="icon hackernews"></i> hackernews  </li>
+  <li><i class="icon hashnode"></i> hashnode  </li>
+  <li><i class="icon icon--500px"></i> icon–500px  </li>
+  <li><i class="icon instagram"></i> instagram  </li>
+  <li><i class="icon jsfiddle"></i> jsfiddle  </li>
+  <li><i class="icon karyakarsa"></i> karyakarsa  </li>
+  <li><i class="icon keybase"></i> keybase  </li>
+  <li><i class="icon keycdn"></i> keycdn  </li>
+  <li><i class="icon kickstarter"></i> kickstarter  </li>
+  <li><i class="icon kofi"></i> kofi  </li>
+  <li><i class="icon lazada"></i> lazada  </li>
+  <li><i class="icon liberapay"></i> liberapay  </li>
+  <li><i class="icon linkedin"></i> linkedin  </li>
+  <li><i class="icon mastodon"></i> mastodon  </li>
+  <li><i class="icon medium"></i> medium  </li>
+  <li><i class="icon olx"></i> olx  </li>
+  <li><i class="icon opencollective"></i> opencollective  </li>
+  <li><i class="icon openid"></i> openid  </li>
+  <li><i class="icon orcid"></i> orcid  </li>
+  <li><i class="icon patreon"></i> patreon  </li>
+  <li><i class="icon paypal"></i> paypal  </li>
+  <li><i class="icon peertube"></i> peertube  </li>
+  <li><i class="icon pinterest"></i> pinterest  </li>
+  <li><i class="icon pleroma"></i> pleroma  </li>
+  <li><i class="icon publons"></i> publons  </li>
+  <li><i class="icon quora"></i> quora  </li>
+  <li><i class="icon reddit"></i> reddit  </li>
+  <li><i class="icon researchgate"></i> researchgate  </li>
+  <li><i class="icon saweria"></i> saweria  </li>
+  <li><i class="icon sellfy"></i> sellfy  </li>
+  <li><i class="icon shopee"></i> shopee  </li>
+  <li><i class="icon shopify"></i> shopify  </li>
+  <li><i class="icon signal"></i> signal  </li>
+  <li><i class="icon snapchat"></i> snapchat  </li>
+  <li><i class="icon soundcloud"></i> soundcloud  </li>
+  <li><i class="icon stackexchange"></i> stackexchange  </li>
+  <li><i class="icon stackoverflow"></i> stackoverflow  </li>
+  <li><i class="icon stripe"></i> stripe  </li>
+  <li><i class="icon substack"></i> substack  </li>
+  <li><i class="icon telegram"></i> telegram  </li>
+  <li><i class="icon threads"></i> threads  </li>
+  <li><i class="icon tiktok"></i> tiktok  </li>
+  <li><i class="icon tokopedia"></i> tokopedia  </li>
+  <li><i class="icon tumblr"></i> tumblr  </li>
+  <li><i class="icon twitch"></i> twitch  </li>
+  <li><i class="icon twitter"></i> twitter  </li>
+  <li><i class="icon vimeo"></i> vimeo  </li>
+  <li><i class="icon vine"></i> vine  </li>
+  <li><i class="icon vk"></i> vk  </li>
+  <li><i class="icon wattpad"></i> wattpad  </li>
+  <li><i class="icon weibo"></i> weibo  </li>
+  <li><i class="icon whatsapp"></i> whatsapp  </li>
+  <li><i class="icon wikipedia"></i> wikipedia  </li>
+  <li><i class="icon wordpress"></i> wordpress  </li>
+  <li><i class="icon write-dot-as"></i> write-dot-as  </li>
+  <li><i class="icon x"></i> x  </li>
+  <li><i class="icon xing"></i> xing  </li>
+  <li><i class="icon xmpp"></i> xmpp  </li>
+  <li><i class="icon youtube"></i> youtube  </li>
+</ul>
+
+## Creating Nested Menus
+
+Create dropdown menus by using the `parent` parameter:
+
+```toml
+[[menu.main]]
+    identifier = "about"
+    name = "About"
+    pageRef = "/about"
+
+    [[menu.main]]
+        identifier = "about-author"
+        name = "Author"
+        pageRef = "/about/author"
+        parent = "about"
+```
+
+## Language Support
+
+There are three ways to add multi-language support to your menus:
+
+### 1. Using `menu.[lang].[menuID]`
+
+In `config.toml`:
+
+```toml
+[[menu.en.main]]
+    identifier = "about"
+    name = "About"
+    url = "/about/"
+
+    [[menu.en.main]]
+        identifier = "about-author"
+        name = "Author"
+        pageRef = "/about/author"
+        parent = "about"
+
+[[menu.id.main]]
+    identifier = "about"
+    name = "Tentang"
+    url = "/tentang/"
+
+    [[menu.id.main]]
+        identifier = "about-author"
+        name = "Tentang Penyusun"
+        pageRef = "/tentang/penyusun"
+        parent = "about"
+```
+
+### 2. Using Separate Menu Files
+
+In `menus.en.toml`:
+
+```toml
+[[main]]
+    identifier = "about"
+    name = "About"
+    url = "/about/"
+
+    [[main]]
+        identifier = "about-author"
+        name = "Author"
+        pageRef = "/about/author"
+        parent = "about"
+```
+
+In `menus.id.toml`:
+
+```toml
+[[main]]
+    identifier = "about"
+    name = "Tentang"
+    url = "/tentang/"
+
+    [[menu.id.main]]
+        identifier = "about-author"
+        name = "Tentang Penyusun"
+        pageRef = "/tentang/penyusun"
+        parent = "about"
+```
+
+### 3. Using Front Matter in Markdown Files
+
+in `index[.lang].md` `_index[.lang].md` or `filename[.lang].md`
+
+```toml
+---
+title: "About Author"
+menus:
+  main:
+    indetifier: about-author
+    parent: about
+---
+```

content/en/post/configure-pagefind.md

@@ -0,0 +1,42 @@
+---
+author : ['Author Name']
+title: "Configure Pagefind"
+description: "How to configure Pagefind in Hugo Brewm theme"
+date: 2025-01-26
+type: post
+draft: false
+translationKey: pagefind
+coffee: 1
+tags: ['configuration', 'pagefind']
+categories: ['configuration']
+---
+
+## Setting up search in Hugo configuration
+
+To enable search functionality, you'll need to modify your `config.toml` file. First, enable the search button using `.params.search`. Then activate `.params.pagefind`, if you skip this step, the theme will default to using DuckDuckGo instead.
+
+```toml
+[params]
+  search = true
+  pagefind = true
+```
+
+## Setting up post frontmatter
+
+To make post indexed, you'll need to set `type` to `post` to the frontmatter of each post.
+
+```yaml
+---
+title: "Post"
+type: post
+---
+```
+
+## Setting up your CI/CD pipeline
+
+To create the search index, add this command to your CI/CD pipeline's build step:
+
+```yaml
+- name: Index pagefind
+  run: npx pagefind --source "public"
+```

content/en/post/configure-slides.md

@@ -0,0 +1,59 @@
+---
+author : ['Author Name']
+title: "Configure Homepage Slides"
+description: "How to configure Homepage Slides section in Hugo Brewm theme"
+date: 2025-01-26
+type: post
+draft: false
+translationKey: slide
+coffee: 1
+tags: ['configuration', 'slide']
+categories: ['homepage']
+---
+
+## Setting up slide content
+
+The Hugo Brewm theme features a homepage slides section that showcases important content through an interactive carousel.
+{{< marginpar >}}You can add a `cover` parameter to add a slide cover; this parameter also changes the slide layout.{{< /marginpar >}}
+To create multiple slides, you'll need to make separate files containing this front matter structure:
+
+```yaml
+---
+type: slide
+title: "Slide Title"
+textColor: black # change textcolor to `black` or `white` and set background transparent
+params:
+    headless: true # prevent page body to be render and redirect to 404.html
+    target: "https://example.com" # override the redirect target
+---
+```
+
+## Dedicated Shortcode for Slide Content
+
+### External RSS feeds
+
+The slides section can integrate content from external sources using the RSS shortcode.
+
+```yaml
+---
+type: slide
+title: "My post on example.com"
+---
+
+{{</* rss "https://example.com/feed.xml" */>}}
+```
+
+### Gallery with Masonry layout
+
+For a Pinterest-style layout, you can implement the pin shortcode as follows:
+
+```toml
+{{</* pin "begin" */>}}
+{{</* pin img="https://example.com/item1.jpg" url="https://example.com/item1" label="Item 1" */>}}
+{{</* pin img="https://example.com/item2.jpg" url="https://example.com/item2" label="Item 2" */>}}
+{{</* pin img="https://example.com/item3.jpg" url="https://example.com/item3" label="Item 3" */>}}
+{{</* pin img="https://example.com/item4.jpg" url="https://example.com/item4" label="Item 4" */>}}
+{{</* pin img="https://example.com/item5.jpg" url="https://example.com/item5" label="Item 5" */>}}
+{{</* pin img="https://example.com/item6.jpg" url="https://example.com/item6" label="Item 6" */>}}
+{{</* pin "end" */>}}
+```

content/en/post/markdown-test.md

@@ -0,0 +1,85 @@
+---
+author : ['Author Name']
+title: "Markdown Test"
+description: "Various sample Markdown test"
+date: 2025-01-26
+type: post
+draft: false
+translationKey: markdown
+coffee: 1
+tags: ['markdown']
+categories: ['test']
+comments: false
+---
+
+<span class="letterine"><i>T</i>his is example of span with letterine class.</span>
+You need set the `markup.goldmark.unsafe` and `markup.goldmark.renderer.unsafe` parameter in `config.toml` to write html directly, but this is not recommended.
+{{< marginpar >}}
+And this is marginpar.
+**Bold text**,
+*Italic text*,
+***Bold and italic text***,
+~~Strikethrough text~~,
+[Link text](https://example.com)
+---also works.
+{{< /marginpar >}}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+## Heading 2
+
+First paragraph will not indent.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+Second paragraph and after will indent.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+> This is a blockquote
+>> Nested blockquote
+
+### Heading 3
+
+1. Ordered list item 1
+2. Ordered list item 2
+   - Nested unordered item
+   - Another nested item
+3. Ordered list item 3
+
+- Unordered list item
+- Another item
+  - Nested item
+  - Another nested item
+
+#### Heading 4
+
+![Image alt text](https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/Domestic_cat_sitting_by_door.jpg/640px-Domestic_cat_sitting_by_door.jpg)
+
+| Header 1 | Header 2 |
+|----------|----------|
+| Cell 1   | Cell 2   |
+| Cell 3   | Cell 4   |
+
+Task list:
+- [x] Completed task
+- [ ] Incomplete task
+
+##### Heading 5
+
+Here's some `inline code` and some ***combined*** formatting.
+
+Here's some block code:
+
+    // code block with four space
+    def hello_world():
+        print("Hello, World!")
+
+```js
+// Code block with syntax highlighting
+function greeting(name) {
+    return `Hello, ${name}!`;
+}
+```
+
+###### Heading 6
+
+Heading level 6 will show as inline paragraph.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

content/en/post/tufte-features.md

@@ -0,0 +1,182 @@
++++
+author = "AUTHOR NAME"
+date = "2016-02-20T13:56:01-08:00"
+type = "post"
+meta = true
+math = true
+title = "Hugo-Tufte Features compatibility"
+subtitle = "Fancy Subtitle"
+toc = true
+categories = ["katex", "latex", "tufte-css"]
++++
+
+This is a quick demonstration post.  It serves as an example of the features
+of this theme.  One of them is $ \LaTeX $ via [Katex](https://katex.org/).
+{{< section "begin" >}}
+## A Bit About Mathematics
+
+{{< epigraph pre="Shawn O'Hare, " cite="Math is Fun" post=", p.8"  >}}
+This is an example of an epigraph with some math
+$ \mathbb N \subseteq \mathbb R $
+to start the beginning of a section.
+{{< /epigraph >}}
+
+<!--more-->
+
+### Inline
+Some inline math:
+{{< marginpar >}}This is Marginpar.{{< /marginpar >}}
+$e^{i \pi} = -1$
+ and $\sqrt{-1} = i $
+and $ a_2 = 3 $.
+
+### Display
+And display math using this symbol `$$`:
+{{< marginnote >}}This is Marginnote with counter like footnote.{{< /marginnote >}}
+$$
+  -- \cdot_H -- \colon B(G,H) \times B(H, K) \to B(G, K), \quad ([X], [Y]) \mapsto [X \times_H Y].
+$$
+
+### Environments
+
+Currently, certain $\LaTeX$ environments need to be escaped so that
+the markdown processor does not override Katex.  Currently, display
+environments should be enclosed in `<p>` tags and blank lines.
+For instance:
+
+<p>
+$$
+\begin{aligned}
+  \mu(A) &= \iint_{I^2} \chi_A (x,y) \ d(x,y)
+  = \int_I \left( \int_I  \chi_A (x,y) \ dx\right) dy
+  = \int_I 0 \ dy= 0 \quad \text{and} \\
+  \mu(A) &=\iint_{I^2}  \chi_A (x,y) \ d(x,y)
+  = \int_I \left(  \int_I \chi_A (x,y) \ dy \right) dx
+  =\int_I dx = 1,
+\end{aligned}
+$$
+</p>
+<!-- See https://github.com/jgm/pandoc/issues/3953#issuecomment-334670625 -->
+
+is produced from
+
+```txt
+<p>
+$$
+\begin{aligned}
+  \mu(A) &= \iint_{I^2} \chi_A (x,y) \ d(x,y)
+  = \int_I \left( \int_I  \chi_A (x,y) \ dx\right) dy
+  = \int_I 0 \ dy= 0 \quad \text{and} \\
+  \mu(A) &=\iint_{I^2}  \chi_A (x,y) \ d(x,y)
+  = \int_I \left(  \int_I \chi_A (x,y) \ dy \right) dx
+  =\int_I dx = 1,
+\end{aligned}
+$$
+</p>
+```
+
+### Blockquotes shortcode also eliminated
+
+This is suppose to be `{{</* blockquotes */>}}`, instead we use `{{</* epigraph */>}}` shortcode. But first, we try to manually cite via
+<cite>This is between cite tags and has math: $e^x $</cite>
+
+{{< epigraph pre="Shawn O'Hare, " cite="www.shawnohare.com" link="https://www.shawnohare.com" >}}
+This is a blockquote with two paragraphs, that employs the
+theme's `blockquote` shortcode. Lorem ipsum dolor sit amet,
+consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
+Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
+
+Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
+id sem consectetuer libero luctus adipiscing.
+Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
+{{< /epigraph >}}
+
+### Code
+As an example of some inline code: `go test -v -short`.
+And this is some block-code:
+```go {linenos=table,hl_lines=["2-5"],linenostart=199}
+package main
+
+import "log"
+
+func add(x int, y int) int {
+  log.Println("We are going to take the sum of two numbers, and leave a long comment.")
+  return x + y
+}
+
+func main() {
+  y := add(1, 2)
+  log.Println(y)
+}
+```
+
+Here's an example without line numbers.
+```go {hl_lines=["2-5"],linenostart=199}
+package main
+
+import "log"
+
+func add(x int, y int) int {
+  log.Println("We are going to take the sum of two numbers, and leave a very very very long comment.")
+  return x + y
+}
+
+func main() {
+  y := add(1, 2)
+  log.Println(y)
+}
+```
+
+### Figure
+Below we have an example of a regular width figure.
+{{< figure
+  src="https://github.com/edwardtufte/tufte-css/raw/gh-pages/img/exports-imports.png"
+  class="class param"
+  title="The image title."
+  caption="This is the image caption."
+  label="mn-export-import"
+  attr="Image attribution"
+  attrlink="attribute link"
+  alt="alt"
+  link="link"
+ >}}
+{{< section "end" >}}
+
+
+
+{{< figure
+  src="https://edwardtufte.github.io/tufte-css/img/rhino.png"
+  class="class param"
+  type="margin"
+  label="mn-rhino"
+  title="The image title."
+  label="mn-export-import"
+  caption="This is the image caption."
+  attr="Image attribution"
+  attrlink="https://edwardtufte.github.io/tufte-css"
+  alt="alt"
+  link="link"
+ >}}
+ But tight integration of graphics with text is central to Tufte’s work even when those graphics are ancillary to the main body of a text. In many of those cases, a margin figure may be most appropriate.
+{{< section "end" >}}
+
+Below is a full-width figure.
+{{< figure
+  src="https://edwardtufte.github.io/tufte-css/img/napoleons-march.png"
+  type="full"
+  label="mn-napoleonic-wars"
+  title="Napoleonic wars"
+  caption="This the image caption."
+  attr="Image attribution"
+  attrlink="attribute link"
+  alt="Napoleonic wars"
+  link="link"
+ >}}
+{{< section "end" >}}
+
+## A Story About Cats
+Climb a tree, wait for a fireman jump to fireman then scratch his face sleep on dog bed, force dog to sleep on floor cat snacks, and eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap climb a tree, wait for a fireman jump to fireman then scratch his face put toy mouse in food bowl run out of litter box at full speed . See owner, run in terror chase mice, so thinking longingly about tuna brine for eat a plant, kill a hand for wake up human for food at 4am. Human is washing you why halp oh the horror flee scratch hiss bite scratch the furniture and rub face on owner. Loves cheeseburgers see owner, run in terror chew on cable. Thug cat ignore the squirrels, you'll never catch them anyway. Eat a plant, kill a hand find empty spot in cupboard and sleep all day so hide head under blanket so no one can see yet love to play with owner's hair tie rub face on everything i like big cats and i can not lie. Wake up human for food at 4am stare at the wall, play with food and get confused by dust yet then cats take over the world scamper. Inspect anything brought into the house get video posted to internet for chasing red dot. Brown cats with pink ears chew foot spit up on light gray carpet instead of adjacent linoleum. I am the best wake up human for food at 4am, meow spread kitty litter all over house, for meow. Knock dish off table head butt cant eat out of my own dish jump off balcony, onto stranger's head, chase ball of string scream at teh bath but climb leg, so unwrap toilet paper but destroy couch. Climb a tree, wait for a fireman jump to fireman then scratch his face. Leave hair everywhere swat turds around the house eat grass, throw it back up, and eat grass, throw it back up. Chase after silly colored fish toys around the house.
+
+### We really like cats.
+
+Yes, they are fluffy and happy.

content/en/rss.md

@@ -0,0 +1,14 @@
+---
+type: 'slide'
+title: 'Hugo Release News'
+params:
+    headless: true
+    alias: 'https://github.com/foxihd/hugo-brewm'
+---
+
+This is a slide with RSS feed.
+RSS shortcodes allow you to integrate and display feeds from various sources like YouTube channels or external blogs.
+
+Note that The Hugo Release News RSS feed listed below displays only titles since content descriptions are not included in the RSS feed xml.
+
+{{< rss url="https://gohugo.io/news/index.xml" >}}

content/en/slide.md

@@ -0,0 +1,14 @@
+---
+type: 'slide'
+title: 'This is slide'
+cover: 'https://raw.githubusercontent.com/foxihd/hugo-et-hd/master/static/svg/flowlines/28.svg'
+weight: 1
+params:
+    headless: true
+    target: 'https://github.com/foxihd/hugo-brewm'
+---
+
+This demonstrates an example of three slide item. The navigation will change when there are three or more slides.
+
+This is slide layout with cover image in frontmatter.
+For a minimalist home page without a slide and flowlines, see the [Indonesian homepage](https://foxihd.github.io/hugo-brewm/id/).

content/en/stage/_index.en.md

@@ -0,0 +1,4 @@
+---
+title: 'Stage'
+translationKey: stage
+---

content/en/stage/_index.id.md

@@ -0,0 +1,4 @@
+---
+title: 'Fase'
+translationKey: stage
+---

content/en/stage/budding/_index.en.md

@@ -0,0 +1,4 @@
+---
+title: 'budding'
+translationKey: budding
+---

content/en/stage/budding/_index.id.md

@@ -0,0 +1,4 @@
+---
+title: 'kembang'
+translationKey: budding
+---

content/en/stage/evergreen/_index.en.md

@@ -0,0 +1,4 @@
+---
+title: 'evergreen'
+translationKey: evergreen
+---

content/en/stage/evergreen/_index.id.md

@@ -0,0 +1,4 @@
+---
+title: 'evergreen'
+translationKey: evergreen
+---

content/en/stage/seedling/_index.en.md

@@ -0,0 +1,4 @@
+---
+title: 'seedling'
+translationKey: seedling
+---

content/en/stage/seedling/_index.id.md

@@ -0,0 +1,4 @@
+---
+title: 'semai'
+translationKey: seedling
+---

content/id/_index.md

@@ -0,0 +1,18 @@
+---
+---
+
+# Jadi, Ini _Hero Section_?
+
+Ya, sama seperti _slide_, silakan sesuaikan setiap `_index.md`, seperti menambahkan _shortcode_ atau kode lainnya:
+
+{{< network-graph title="Grafik jaringan pada situs Bahasa Inggris" data="https://foxihd.github.io/hugo-brewm/en/index.json" height="400px" >}}
+
+<noscript>Javascript nonaktif</noscript>
+<center>
+<br>
+<a class="cta" href="#">CTA PRIMER</a>
+<a class="cta s" href="#">— SEKUNDER</a>
+<br>
+</center>
+
+

content/id/pos/_index.md

@@ -0,0 +1,4 @@
+---
+title: "Pos"
+translationKey: post
+---

content/id/pos/mengatur-diskusi.md

@@ -0,0 +1,79 @@
+---
+title: "Menambahkan Diskusi"
+description: "Cara menambahkan diskusi postingan di tema Hugo Brewm"
+date: 2025-01-26
+lastmod: 2025-02-03
+type: 'post'
+draft: false
+translationKey: discussion
+coffee: 1
+---
+
+## Mengatur Komentar Giscus
+
+Untuk mengaktifkan komentar Giscus di situs Hugo Anda, ikuti langkah-langkah berikut:
+
+1. Pertama, pasang [Aplikasi GitHub Giscus](https://github.com/apps/giscus) di repositori Anda
+2. Tambahkan parameter berikut ke `config.toml` Anda:
+
+```toml
+[params.giscus]
+    repo = "username/repository"
+    repoID = "R_kgDxxxxxxxx"
+    category = "Announcements"
+    categoryID = "DIC_kwDxxxxxxxxxxxxxxxx"
+```
+
+Ganti kata-kunci berikut:
+- `repo`: Nama pengguna dan repositori GitHub Anda
+- `repoID`: ID repositori Anda (dapatkan dari situs Giscus)
+- `category`: Nama kategori diskusi
+- `categoryID`: ID kategori diskusi (dapatkan dari situs Giscus)
+
+Anda bisa mendapatkan kata-kunci tersebut dengan mengunjungi [Giscus.app](https://giscus.app) dan mengatur preferensi Anda.
+
+Parameter berikut juga dapat dikonfigurasi secara opsional:
+
+```toml
+    mapping = "pathname"
+    strict = "0"
+    reactionsEnabled = "1"
+    emitMetadata = "0"
+    inputPosition = "bottom"
+    theme = "preferred_color_scheme"
+    loading = "lazy"
+```
+
+3. Secara default, komentar Giscus akan muncul di semua postingan. Untuk menonaktifkan komentar pada postingan tertentu, gunakan parameter front matter:
+
+```yaml
+---
+comments: false  # Nonaktifkan komentar untuk postingan ini
+---
+```
+
+## Mengatur Integrasi Media Sosial
+Tema ini mendukung penyematan komentar dari Bluesky atau Mastodon atau kedua platform sosial tersebut.
+Ketika Anda menyertakan tautan ke postingan Bluesky atau Mastodon di front matter, Giscus akan diganti secara otomatis.
+
+### Menautkan diskusi dengan postingan Mastodon
+
+Tautkan URL postingan Bluesky ke front matter menggunakan parameter `toot`, `mstd`, atau `mastodon`.
+
+```yaml
+---
+toot: https://example.com/@example/12345678901234567890
+---
+```
+
+### Menautkan diskusi dengan postingan Bluesky
+
+Tautkan URL postingan Mastodon ke front matter menggunakan parameter `skeet`, `bsky` atau `bluesky`.
+
+```yaml
+---
+skeet: https://bsky.app/profile/example.com/post/12345678901234
+---
+```
+
+Catatan: Anda mungkin perlu memperkirakan permalink artikel pada pratinjau lokal sebelum membagikan ke platform Fediverse untuk mendapatkan tautan postingan, atau Anda mungkin perlu menjalankan operasi CI/CD dua kali.

content/id/pos/mengatur-entri-terms.md

@@ -0,0 +1,42 @@
+---
+title: "Mengatur Entri `Terms`"
+description: "Cara mengatur cover dan menghubungkan entri `terms` di tema Hugo Brewm"
+date: 2025-02-03
+type: post
+draft: false
+translationKey: terms
+coffee: 1
+tags: ['authoring', 'cover', 'taxonomy', 'terms']
+---
+
+Anda dapat mengubah cover untuk setiap _entry terms_ dengan menambahkan parameter `cover` di `_index.md` di bawah `[bahasa]\[taksonomi]\[terms]\`.
+Sebagai contoh, untuk mengatur cover dari term `kongigurasi` di categories, tambahkan parameter di `content\id\categories\konfigurasi\_index.md`.
+
+```yaml
+---
+title: "Konfigurasi"
+description: "Deskripsi konfigurasi, ini bisa berguna untuk metadata HTML"
+cover: "https://example.com/cover.png"
+translationKey: konfigurasi
+---
+
+Jika ada teks yang ditulis di sini, teks akan ditampilkan sebagai bagian hero.
+```
+
+Untuk menghubungkan _entry terms_ dalam bahasa lain, Anda dapat menambahkan parameter `translationKey`.
+Sebagai contoh, jika Anda ingin menghubungkan _entry terms_ dalam bahasa Indonesia, tambahkan parameter di `content\id\categories\konfigurasi\_index.md`.
+
+```yaml
+---
+title: "Configuration"
+description: "Configuration description, this might be useful for HTML metadata"
+cover: "https://example.com/cover.png"
+translationKey: konfigurasi
+---
+
+Jika ada teks yang ditulis di sini, teks akan ditampilkan sebagai bagian hero.
+```
+
+Dengan cara yang sama, Anda dapat mengatur cover untuk setiap _entry terms_ untuk taksonomi `series` dan `author`.
+Setelah membuat perubahan ini, bangun ulang situs Anda untuk melihat pembaruan cover dan terjemahan di breadcrumbs.
+Cover akan menggantikan gambar _flowlines_ pada daftar taksonomi.

content/id/pos/mengatur-footer-situs.md

@@ -0,0 +1,51 @@
+---
+title: "Mengatur Footer Utama"
+description: "Cara mengatur footer utama di tema Hugo Brewm"
+date: 2025-01-26
+draft: false
+translationKey: mainfooter
+coffee: 1
+---
+
+Footer utama di tema Hugo Brewm dapat disesuaikan melalui beberapa opsi konfigurasi. Berikut cara mengatur berbagai komponen footer.
+
+## Mengatur Judul dan Konten Footer
+
+Untuk mengatur konten footer utama, buat file markdown di direktori konten Anda dengan front matter berikut:
+
+```yaml
+---
+type: footer
+title: "Judul Footer Utama Anda"
+weight: 1
+params:
+    headless: true # cegah pembuatan halaman dan alihkan ke 404.html
+    target: "https://example.com" # atau alihan ke target
+---
+```
+
+Anda kemudian dapat menambahkan konten footer di bawah front matter menggunakan markdown.
+Beberapa bagian footer dapat dibuat menggunakan file markdown yang berbeda.
+
+## Mengatur Item Menu Footer
+
+Item menu footer dapat dikonfigurasi di file config.toml situs Anda. Berikut cara menambahkan item menu:
+
+```toml
+[[menu.footer]]
+    identifier = "github"       # Pengenal unik untuk item menu
+    name = "GitHub"             # Nama tampilan/tooltip
+    url = "https://github.com/" # URL tautan
+    pre = "github"              # Ikon
+```
+
+## Mengaktifkan Statistik Kopi
+
+Jika Anda ingin menampilkan statistik kopi di footer Anda, aktifkan di config.toml:
+
+```toml
+[params]
+    coffeeStat = true    # Atur ke false untuk menonaktifkan
+```
+
+Setiap parameter `coffee` di frontmatter konten Anda akan dihitung dan ditampilkan di footer.

content/id/pos/mengatur-logo-dan-aksen-warna.md

@@ -0,0 +1,78 @@
+---
+title: "Mengatur Logo dan Aksen Warna"
+description: "Cara mengatur Logo di tema Hugo Brewm"
+date: 2025-01-26
+lastmod: 2025-02-21
+type: 'post'
+draft: false
+translationKey: logo
+coffee: 1
+---
+
+Tema Hugo Brewm memungkinkan Anda untuk dengan mudah mengatur logo dan aksen warna situs Anda. Ikuti langkah-langkah berikut untuk mengatur logo Anda:
+
+## Mengubah Aksen Warna
+
+Untuk membuat aksen warna sesuai dengan identitas merek Anda, Anda dapat menyesuaikan warna aksen di `custom.css` yang berada di dalam `assets/css`.
+Sebagai contoh, di `exampleSite/assets/css/custom.css`:
+
+```css
+:root {
+    /* default contrast */
+    --ac-light: #36c;      /* warna aksen pada kontras default */
+    --fg-light: #111;      /* warna latar depan pada kontras default */
+    --bg-light: #f9f9fb; /* warna latar belakang pada kontras default */
+    --midtone: gray;       /* warna midtone pada kontras default */
+    --fg-dark: #f9f9fb;  /* warna latar depan pada mode gelap, kontras default */
+    --bg-dark: #111;       /* warna latar belakang pada mode gelap, kontras default */
+    --ac-dark: #fa0;       /* warna aksen pada mode gelap, kontras default */
+
+    /* less contrast */
+    --ac-light-less: var(--ac-light);
+    --fg-light-less: #13253d;
+    --bg-light-less: #e7e2e2;
+    --midtone-less: #7d8490;
+    --fg-dark-less: #e7e2e2;
+    --bg-dark-less: #13253d;
+    --ac-dark-less: var(--ac-dark);
+
+    /* more contrast */
+    --ac-light-more: var(--ac-light);
+    --fg-light-more: #000;
+    --bg-light-more: #fff;
+    --midtone-more: gray;
+    --fg-dark-more: #fff;
+    --bg-dark-more: #000;
+    --ac-dark-more: var(--ac-dark);
+}
+```
+
+File ini akan menggantikan custom.css dalam tema. Untuk menghindari hilangnya variabel warna selama pembuatan, harap salin setiap variabel dan jangan hapus apa pun selain komentar.
+
+## Menambahkan Gambar Logo / Ikon LogoMark
+
+> Siapkan gambar logo Anda
+>
+> - Buat atau siapkan file gambar logo Anda (format yang disarankan: PNG atau SVG)
+> - Untuk hasil terbaik, gunakan gambar dengan latar belakang transparan
+> - Dimensi yang disarankan: tinggi 50px hingga 70px
+> - Anda juga dapat menambahkan versi mode gelap dari logo Anda
+
+Atur logo(mark) di konfigurasi situs Anda:
+
+```toml
+[params]
+    logoMark = 'https://example.com/logoMark.svg'
+    logoMarkDark = 'https://example.com/logoMarkDark.svg' #opsional
+```
+
+## Menggunakan Preset Logo Type
+
+Jika Anda lebih suka tidak menggunakan logo gambar, Anda dapat mengaktifkan logo berbasis teks bawaan dengan menambahkan pengaturan ini:
+
+```toml
+[params]
+    logoType = true
+```
+
+Setelah membuat perubahan ini, bangun ulang situs Anda untuk melihat logo yang diperbarui. Logo akan secara otomatis muncul di header situs dan akan responsif di berbagai ukuran perangkat.

content/id/pos/mengatur-menu.md

@@ -0,0 +1,224 @@
+---
+title: "Mengatur Menu"
+description: "Cara mengatur menu di tema Hugo Brewm"
+date: 2025-01-26
+lastmod: 2025-02-04
+type: 'post'
+draft: false
+translationKey: menus
+coffee: 1
+---
+
+Pelajari cara mengatur menu di tema Hugo Brewm menggunakan file `config.toml` atau `menus[.lang].toml`.
+
+## Parameter Menu
+
+- `identifier`: Pengenal unik untuk setiap item menu
+- `name`: Teks yang ditampilkan di menu
+- `url`: Tujuan tautan eksternal
+- `pageRef`: Tautan ke halaman internal
+- `weight`: Pengurutan item menu (angka lebih kecil lebih dulu)
+- `pre`: Setel ikon
+- `post`: Deskripsi untuk tautan
+- `parent`: Referensi item menu induk
+
+## Menambahkan Ikon
+
+Tambahkan ikon ke item menu Anda dengan parameter `pre`.
+
+```toml
+[[menu.main]]
+    identifier = "github"
+    name = "GitHub"
+    url = "https://github.com/"
+    pre = "github"
+```
+
+Berikut adalah daftar ikon yang didukung beserta nama-namanya yang dapat digunakan saat mengkonfigurasi item menu Anda:
+
+<ul class="column pin" role="presentation">
+  <li><i class="icon email"></i> email  </li>
+  <li><i class="icon rss"></i> rss  </li>
+  <li><i class="icon behance"></i> behance  </li>
+  <li><i class="icon bigcartel"></i> bigcartel  </li>
+  <li><i class="icon bitbucket"></i> bitbucket  </li>
+  <li><i class="icon blogger"></i> blogger  </li>
+  <li><i class="icon bluesky"></i> bluesky  </li>
+  <li><i class="icon bukalapak"></i> bukalapak  </li>
+  <li><i class="icon buymeacoffee"></i> buymeacoffee  </li>
+  <li><i class="icon clubhouse"></i> clubhouse  </li>
+  <li><i class="icon codepen"></i> codepen  </li>
+  <li><i class="icon creativefabrica"></i> creativefabrica  </li>
+  <li><i class="icon dailymotion"></i> dailymotion  </li>
+  <li><i class="icon dev"></i> dev  </li>
+  <li><i class="icon deviantart"></i> deviantart  </li>
+  <li><i class="icon digg"></i> digg  </li>
+  <li><i class="icon dribbble"></i> dribbble  </li>
+  <li><i class="icon ebay"></i> ebay  </li>
+  <li><i class="icon etsy"></i> etsy  </li>
+  <li><i class="icon facebook"></i> facebook  </li>
+  <li><i class="icon figma"></i> figma  </li>
+  <li><i class="icon flickr"></i> flickr  </li>
+  <li><i class="icon flipkart"></i> flipkart  </li>
+  <li><i class="icon github"></i> github  </li>
+  <li><i class="icon githubsponsors"></i> githubsponsors  </li>
+  <li><i class="icon gitlab"></i> gitlab  </li>
+  <li><i class="icon gnusocial"></i> gnusocial  </li>
+  <li><i class="icon goodreads"></i> goodreads  </li>
+  <li><i class="icon googlescholar"></i> googlescholar  </li>
+  <li><i class="icon gumroad"></i> gumroad  </li>
+  <li><i class="icon hackernews"></i> hackernews  </li>
+  <li><i class="icon hashnode"></i> hashnode  </li>
+  <li><i class="icon icon--500px"></i> icon–500px  </li>
+  <li><i class="icon instagram"></i> instagram  </li>
+  <li><i class="icon jsfiddle"></i> jsfiddle  </li>
+  <li><i class="icon karyakarsa"></i> karyakarsa  </li>
+  <li><i class="icon keybase"></i> keybase  </li>
+  <li><i class="icon keycdn"></i> keycdn  </li>
+  <li><i class="icon kickstarter"></i> kickstarter  </li>
+  <li><i class="icon kofi"></i> kofi  </li>
+  <li><i class="icon lazada"></i> lazada  </li>
+  <li><i class="icon liberapay"></i> liberapay  </li>
+  <li><i class="icon linkedin"></i> linkedin  </li>
+  <li><i class="icon mastodon"></i> mastodon  </li>
+  <li><i class="icon medium"></i> medium  </li>
+  <li><i class="icon olx"></i> olx  </li>
+  <li><i class="icon opencollective"></i> opencollective  </li>
+  <li><i class="icon openid"></i> openid  </li>
+  <li><i class="icon orcid"></i> orcid  </li>
+  <li><i class="icon patreon"></i> patreon  </li>
+  <li><i class="icon paypal"></i> paypal  </li>
+  <li><i class="icon peertube"></i> peertube  </li>
+  <li><i class="icon pinterest"></i> pinterest  </li>
+  <li><i class="icon pleroma"></i> pleroma  </li>
+  <li><i class="icon publons"></i> publons  </li>
+  <li><i class="icon quora"></i> quora  </li>
+  <li><i class="icon reddit"></i> reddit  </li>
+  <li><i class="icon researchgate"></i> researchgate  </li>
+  <li><i class="icon saweria"></i> saweria  </li>
+  <li><i class="icon sellfy"></i> sellfy  </li>
+  <li><i class="icon shopee"></i> shopee  </li>
+  <li><i class="icon shopify"></i> shopify  </li>
+  <li><i class="icon signal"></i> signal  </li>
+  <li><i class="icon snapchat"></i> snapchat  </li>
+  <li><i class="icon soundcloud"></i> soundcloud  </li>
+  <li><i class="icon stackexchange"></i> stackexchange  </li>
+  <li><i class="icon stackoverflow"></i> stackoverflow  </li>
+  <li><i class="icon stripe"></i> stripe  </li>
+  <li><i class="icon substack"></i> substack  </li>
+  <li><i class="icon telegram"></i> telegram  </li>
+  <li><i class="icon threads"></i> threads  </li>
+  <li><i class="icon tiktok"></i> tiktok  </li>
+  <li><i class="icon tokopedia"></i> tokopedia  </li>
+  <li><i class="icon tumblr"></i> tumblr  </li>
+  <li><i class="icon twitch"></i> twitch  </li>
+  <li><i class="icon twitter"></i> twitter  </li>
+  <li><i class="icon vimeo"></i> vimeo  </li>
+  <li><i class="icon vine"></i> vine  </li>
+  <li><i class="icon vk"></i> vk  </li>
+  <li><i class="icon wattpad"></i> wattpad  </li>
+  <li><i class="icon weibo"></i> weibo  </li>
+  <li><i class="icon whatsapp"></i> whatsapp  </li>
+  <li><i class="icon wikipedia"></i> wikipedia  </li>
+  <li><i class="icon wordpress"></i> wordpress  </li>
+  <li><i class="icon write-dot-as"></i> write-dot-as  </li>
+  <li><i class="icon x"></i> x  </li>
+  <li><i class="icon xing"></i> xing  </li>
+  <li><i class="icon xmpp"></i> xmpp  </li>
+  <li><i class="icon youtube"></i> youtube  </li>
+</ul>
+
+## Membuat Menu Bertingkat
+
+Buat menu dropdown dengan menggunakan parameter `parent`:
+
+```toml
+[[menu.main]]
+    identifier = "about"
+    name = "Tentang"
+    pageRef = "/about"
+
+    [[menu.main]]
+        identifier = "about-author"
+        name = "Penulis"
+        pageRef = "/about/author"
+        parent = "about"
+```
+
+## Dukungan Bahasa
+
+Ada tiga cara untuk menambahkan dukungan multi-bahasa ke menu Anda:
+
+### 1. Menggunakan `menu.[lang].[menuID]`
+
+Di `config.toml`:
+
+```toml
+[[menu.en.main]]
+    identifier = "about"
+    name = "About"
+    url = "/about/"
+
+    [[menu.en.main]]
+        identifier = "about-author"
+        name = "Author"
+        pageRef = "/about/author"
+        parent = "about"
+
+[[menu.id.main]]
+    identifier = "about"
+    name = "Tentang"
+    url = "/tentang/"
+
+    [[menu.id.main]]
+        identifier = "about-author"
+        name = "Tentang Penyusun"
+        pageRef = "/tentang/penyusun"
+        parent = "about"
+```
+
+### 2. Menggunakan File Menu Terpisah
+
+Di `menus.en.toml`:
+
+```toml
+[[main]]
+    identifier = "about"
+    name = "About"
+    url = "/about/"
+
+    [[main]]
+        identifier = "about-author"
+        name = "Author"
+        pageRef = "/about/author"
+        parent = "about"
+```
+
+Di `menus.id.toml`:
+
+```toml
+[[main]]
+    identifier = "about"
+    name = "Tentang"
+    url = "/tentang/"
+
+    [[menu.id.main]]
+        identifier = "about-author"
+        name = "Tentang Penyusun"
+        pageRef = "/tentang/penyusun"
+        parent = "about"
+```
+
+### 3. Menggunakan Front Matter di File Markdown
+
+di `index[.lang].md` `_index[.lang].md` atau `filename[.lang].md`
+
+```toml
+---
+title: "Tentang Penulis"
+menus:
+  main:
+    indetifier: about-author
+    parent: about
+---
+```

content/id/pos/mengatur-pagefind.md

@@ -0,0 +1,31 @@
+---
+title: "Mengatur Pagefind"
+description: "Panduan untuk mengatur pencarian Pagefind di tema Hugo Brewm"
+date: 2025-01-26
+type: 'post'
+draft: false
+translationKey: pagefind
+coffee: 1
+---
+
+## Menautkan diskusi dengan postingan Mastodon
+
+Tautkan URL postingan Mastodon ke front matter menggunakan parameter `toot`, `mstd`, atau `mastodon`.
+
+```yaml
+---
+toot: https://example.com/@example/12345678901234567890
+---
+```
+
+## Menautkan diskusi dengan postingan Bluesky
+
+Tautkan URL postingan Bluesky ke front matter menggunakan parameter `bsky` atau `bluesky`.
+
+```yaml
+---
+bsky: https://bsky.app/profile/example.com/post/12345678901234
+---
+```
+
+Catatan: Anda mungkin perlu memperkirakan permalink artikel pada pratinjau lokal sebelum membagikan ke platform Fediverse untuk mendapatkan tautan postingan, atau Anda mungkin perlu menjalankan operasi CI/CD dua kali.

content/id/pos/mengatur-riwayat-redaksi.md

@@ -0,0 +1,32 @@
++++
+title = "Mengatur Riwayat Redaksi"
+description = "Cara mengatur riwayat redaksi di tema Hugo Brewm"
+date = "2025-02-03"
+type = "post"
+draft = false
+translationKey = "history"
+coffee = 1
+tags = ["authoring", "redaksi", "riwayat"]
+history = [
+  {date = "2025-02-01", author = "Nama Penulis", reviewer = "Nama Pengulas", note = "Contoh"},
+  {date = "2025-02-02", author = "Nama Penulis", editor = "Nama Editor", note = "Addendum (contoh)"},
+  {date = "2025-02-03", note = "Errata (contoh)"},
+]
++++
+
+Fungsi riwayat redaksi memungkinkan Anda untuk melacak dan mengkomunikasikan modifikasi konten kepada pembaca.
+Di dalam front matter artikel, Anda dapat menentukan detail seperti `editor`, `reviewer`, dan menyertakan catatan penjelasan (`note`) tentang perubahan yang dilakukan.
+Fitur ini memerlukan konfigurasi manual di bagian front matter artikel.
+
+```toml
++++
+title = "Mengatur Riwayat Redaksi"
+history = [
+    {date = "2025-02-01", author = "Nama Penulis", reviewer = "Nama Pengulas", note = "Contoh"},
+    {date = "2025-02-02", author = "Nama Penulis", editor = "Nama Editor", note = "Addendum (contoh)"},
+    {date = "2025-02-03", note = "Errata (contoh)"},
+    ]
++++
+```
+
+Garis waktu kronologis yang menampilkan informasi ini akan muncul di bawah bagian informasi artikel, seperti yang ditunjukkan dalam contoh artikel ini.

content/id/pos/mengatur-sampul-dan-audio.md

@@ -0,0 +1,80 @@
+---
+title: "Menambahkan Gambar Sampul dan Artikel Audio"
+date: 2025-02-22
+description: "Panduan menambahkan gambar sampul dan artikel audio"
+draft: false
+type: "post"
+tags: ["authoring", "konten", "media", "audio", "sampul", "gambar", "alt"]
+cover: 'https://upload.wikimedia.org/wikipedia/commons/4/4d/Cat_and_styrofoam_%E2%80%93_electrostatic_charge_%28235112299%29.jpg'
+alt: 'Kucing bernama cooper dengan gabus yang menempel pada bulu karena elektrostatis.'
+translationKey: 'media'
+---
+## Menambahkan Gambar Sampul
+
+### Menambahkan Gambar ke Parameter
+
+Untuk menambahkan gambar sampul ke artikel Anda, ada dua pilihan:
+
+1. Metode _Front Matter_
+
+Anda dapat menggunakan parameter `cover` atau `images` untuk sumber gambar.
+Dan parameter `alt`, `coverAlt` atau `imagesAlt` untuk teks _alt_.
+
+```yaml
+---
+title: "Artikel Saya"
+images: "images/my-cover.jpg"
+alt: "Deskripsi gambar"
+---
+```
+
+2. Metode _Page Bundle_
+
+- Buat folder untuk artikel Anda
+- Beri nama gambar Anda `cover.*`
+- Letakkan di folder yang sama dengan konten Anda
+- Atur teks _alt_ di _frontmatter_ artikel
+
+### Menambahkan Gambar ke Badan Artikel
+
+Anda dapat menambahkan gambar dalam berbagai layout, dimana saja di badan artikel dengan _shortcode_ `{{</* figure */>}}`:
+
+```toml
+{{</* figure src="cover" caption="alt" */>}}
+```
+
+Ini adalah kebebasan untuk menata artikel!
+
+{{< figure src="cover" caption="alt" >}}
+
+## Menambahkan Artikel Audio
+
+1. Metode _Front Matter_
+
+```yaml
+---
+title: "Artikel Saya"
+audio: "audio/my-audio.ogg"
+---
+```
+
+
+2. Metode _Page Bundle_
+
+Anda dapat mengunggah beberapa format audio dengan metode ini:
+
+- Buat folder untuk artikel Anda
+- Beri nama audio Anda `audio.*`
+- Letakkan di folder yang sama dengan konten Anda
+
+## Contoh Metode _Page Bundle_
+
+Berikut bagaimana struktur folder pada metode _page bundle_:
+
+    content/
+    └── posts/
+        └── my-article/
+            ├── index.md
+            ├── cover.jpg
+            ├── audio.mp3
+            └── audio.ogg

content/id/pos/mengatur-slide.md

@@ -0,0 +1,55 @@
+---
+title: "Mengatur Slide Beranda"
+description: "Cara mengatur Bagian Slide Beranda di tema Hugo Brewm"
+date: 2025-01-26
+type: 'post'
+draft: false
+translationKey: slide
+coffee: 1
+---
+
+## Menyiapkan konten slide
+
+Tema Hugo Brewm memiliki bagian slide beranda yang menampilkan konten penting melalui carousel interaktif.
+{{< marginpar >}}Anda dapat menambahkan parameter `cover` untuk menambahkan sampul slide; parameter ini juga mengubah tata letak slide.{{< /marginpar >}}
+Untuk membuat beberapa slide, Anda perlu membuat file terpisah yang berisi struktur front matter seperti ini:
+
+```yaml
+---
+type: slide
+title: "Judul Slide"
+params:
+    headless: true # cegah pembuatan halaman dan alihkan ke 404.html
+    target: "https://example.com" # atau alihan ke target
+---
+```
+
+## Shortcode Khusus untuk Konten Slide
+
+### Feed RSS eksternal
+
+Bagian slide dapat mengintegrasikan konten dari sumber eksternal menggunakan shortcode RSS.
+
+```yaml
+---
+type: slide
+title: "Postingan saya di example.com"
+---
+
+{{</* rss "https://example.com/feed.xml" */>}}
+```
+
+### Galeri dengan tata letak Masonry
+
+Untuk gallery dengan tata letak gaya Pinterest, Anda dapat mengimplementasikan shortcode pin seperti berikut:
+
+```toml
+{{</* pin "begin" */>}}
+{{</* pin img="https://example.com/item1.jpg" url="https://example.com/item1" label="Item 1" */>}}
+{{</* pin img="https://example.com/item2.jpg" url="https://example.com/item2" label="Item 2" */>}}
+{{</* pin img="https://example.com/item3.jpg" url="https://example.com/item3" label="Item 3" */>}}
+{{</* pin img="https://example.com/item4.jpg" url="https://example.com/item4" label="Item 4" */>}}
+{{</* pin img="https://example.com/item5.jpg" url="https://example.com/item5" label="Item 5" */>}}
+{{</* pin img="https://example.com/item6.jpg" url="https://example.com/item6" label="Item 6" */>}}
+{{</* pin "end" */>}}
+```

content/id/pos/tes-markdown.md

@@ -0,0 +1,81 @@
+---
+title: "Tes Markdown"
+description: "Berbagai contoh tes Markdown"
+date: 2025-01-26
+type: 'post'
+draft: false
+translationKey: markdown
+coffee: 1
+---
+
+<span class="letterine"><i>I</i>ni adalah contoh span dengan kelas letterine.</span>
+Anda perlu mengatur parameter `markup.goldmark.unsafe` dan `markup.goldmark.renderer.unsafe` di `config.toml` untuk menulis html secara langsung, tetapi ini tidak direkomendasikan.
+{{< marginpar >}}
+Dan ini adalah marginpar.
+**Teks tebal**,
+*Teks miring*,
+***Teks tebal dan miring***,
+~~Teks dicoret~~,
+[Teks tautan](https://example.com)
+---juga berfungsi.
+{{< /marginpar >}}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+## Judul 2
+
+Paragraf pertama tidak akan menjorok.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+Paragraf kedua dan setelahnya akan menjorok.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+> Ini adalah kutipan
+>> Kutipan bertumpuk
+
+### Judul 3
+
+1. Item daftar terurut 1
+2. Item daftar terurut 2
+   - Item tidak terurut bersarang
+   - Item bersarang lainnya
+3. Item daftar terurut 3
+
+- Item daftar tidak terurut
+- Item lainnya
+  - Item bersarang
+  - Item bersarang lainnya
+
+#### Judul 4
+
+![Teks alternatif gambar](https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/Domestic_cat_sitting_by_door.jpg/640px-Domestic_cat_sitting_by_door.jpg)
+
+| Header 1 | Header 2 |
+|----------|----------|
+| Sel 1    | Sel 2    |
+| Sel 3    | Sel 4    |
+
+Daftar tugas:
+- [x] Tugas selesai
+- [ ] Tugas belum selesai
+
+##### Judul 5
+
+Ini adalah `kode dalam baris` dan beberapa pemformatan ***gabungan***.
+
+Ini adalah blok kode:
+
+    // blok kode dengan empat spasi
+    def hello_world():
+        print("Halo, Dunia!")
+
+```js
+// Blok kode dengan penyorotan sintaks
+function salam(nama) {
+    return `Halo, ${nama}!`;
+}
+```
+
+###### Judul 6
+
+Tingkat judul 6 akan ditampilkan sebagai paragraf dalam baris.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.