§ Megane @~@
Megane (眼鏡) is the Japanese word for 👓 glasses, a macOS game (Yuichi Fujishige), and it's also this silly templating mini-engine.
§ Freki HTML Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
@~@FRONTMATTER:DESCRIPTION@~@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@~@FRONTMATTER:TITLE@~@
<link rel="stylesheet" href="/styles.css">
</head>
<body>
@~@FREKI:SITE_JSON@~@
<header>
<h1>
<a href="/">👓 @~@FREKI:SITE_TITLE@~@</a>
</h1>
</header>
@~@FREKI:NAVIGATION@~@
<main>
@~@FREKI:MARKDOWN_CONTENT@~@
</main>
</body>
</html>
§ Syntax
§ Tags
| name | type |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
§ @~@FREKI:MARKDOWN_CONTENT@~@
The generated HTML content from the markdown file.
<section id="markdown">
<!-- content -->
</section>
§ @~@FREKI:SITE_TITLE@~@
The site_title defaults to Freki cause why not.
§ @~@FREKI:TITLE@~@
<title>frontmatter_page_title | freki_site_title</title>
<!-- if no page title -->
<title>freki_site_title</title>
§ @~@FREKI:DESCRIPTION@~@
<meta name="description" content="frontmatter_description">
§ @~@FREKI:CURRENT_PATH@~@
The path (/the/current/path/) to the current page.
§ @~@FREKI:NAVIGATION@~@
<!-- Inline cSS... -->
<aside id="freki-floating-menu">
<!-- menu button... -->
<nav id="sidebar-menu">
<ul>
<li><a href="/path/">page_title</a></li>
<li><a href="/path/">page_title</a></li>
</ul>
</nav>
</aside>
§ @~@FREKI:NAVIGATION_FOOTER@~@
<!-- Inline cSS... -->
<footer id="freki-navigation-footer">
<a href="/next/path/" style="margin-left: auto"><button>Next</button></a>
<a href="/previous/path/" style="margin-right: auto"><button>
Previous
</button></a>
</footer>
§ @~@FREKI:BASE_URL@~@
Required if the docs are hosted in sub path of the main host like GitHub or Codeberg pages. It will transform src and href attributes: /some/path/ to /base-url-value/some/path.
§ @~@FREKI:TABLE_OF_CONTENTS@~@
Page heading navigation links.
Example
<aside id="megane-freki-table-of-contents">
<details id="toc-menu">
<summary><div class="icon">table of contents</div></summary>
<ul>
<li class="toc-anchor level-1"><a href="#extended">Extended</a></li>
<ul>
<li class="toc-anchor level-2">
<a href="#removed-content-del">~~Removed~~ Content <del></a>
</li>
<li class="toc-anchor level-2">
<a href="#highlighted-text-mark">==Highlighted== Text <mark></a>
</li>
<li class="toc-anchor level-2">
<a href="#tabular-data-table">Tabular Data <table></a>
</li>
<li class="toc-anchor level-2">
<a href="#task-list">Task List</a>
</li>
<li class="toc-anchor level-2"><a href="#emojis">Emojis</a></li>
<li class="toc-anchor level-2">
<a href="#unsupported">Unsupported</a>
</li>
</ul>
</ul>
</details>
</aside>
§ @~@FREKI:TABLE_OF_CONTENTS_JSON@~@
JSON array of objects containing heading anchor link data (level, href, text).
Example
[
{
"level": 1,
"href": "megane",
"text": "Megane @~@"
},
{
"level": 2,
"href": "freki-html-template",
"text": "Freki HTML Template"
},
{
"level": 3,
"href": "tags",
"text": "Tags"
},
{
"level": 4,
"href": "freki-markdown-content",
"text": "@~@FREKI:MARKDOWN_CONTENT@~@"
}
]
§ @~@FREKI:TABLE_OF_CONTENTS_JSON_SCRIPT_DATA_BLOCK@~@
Data block of JSON array of objects containing heading anchor link data (level, href, text).
Example
<script id="freki-table-of-contents-data" type="application/json">
[
{
"level": 2,
"href": "about",
"text": "About"
},
{
"level": 2,
"href": "word-on-the-street",
"text": "Word on the street!"
}
]
</script>
§ @~@FREKI:TABLE_OF_CONTENTS_JSON_DATA_ATTRIBUTE@~@
Data attribute containing JSON array of objects containing heading anchor link data (level, href, text).
Example
<div
data-freki-table-of-contents-json="[
{
"level": 2,
"href": "about",
"text": "About"
},
{
"level": 2,
"href": "word-on-the-street",
"text": "Word on the street!"
}
]"
>
</div>
§ @~@FREKI:SITE_JSON@~@
Includes page site data as a jSON script element. Useful for scripting.
Example
<script id="freki-site-data" type="application/json">
{
"path": "main",
"order": 0,
"pages": [
{
"name": "megane.md",
"path": "/megane/",
"frontmatter": {
"title": "Megane",
"description": "The silliest templating engine",
"updated": "2026-06-28",
"published": "2026-06-28",
"order": 2,
"flavor": 3,
"excludeFromFrekiNavigation": false
},
"order": 2
}
],
"paths": [
{
"path": "markdown",
"order": 1,
"pages": [
{
"name": "extended.md",
"path": "/markdown/extended/",
"frontmatter": {
"title": "Extended Syntax",
"description": "Extended markdown syntax.",
"updated": "2024-11-28",
"published": "2024-10-25",
"order": 1,
"flavor": 2,
"excludeFromFrekiNavigation": false
},
"order": 1
}
],
"paths": [
{
"path": "extended",
"order": 0,
"pages": [
{
"name": "task-list.md",
"path": "/markdown/extended/task-list/",
"frontmatter": {
"title": "Task List",
"description": "Extended markdown syntax.",
"created": "2026-07-13",
"updated": "2026-07-13",
"order": 1,
"flavor": 2,
"excludeFromFrekiNavigation": false
},
"order": 1
}
],
"paths": []
}
]
}
]
}
</script>
§ Page Frontmatter Data Tags
These tags extract data provide in the markdown frontmatter.
{
"title": "Basic Syntax",
"description": "Basic markdown syntax.",
"created": "2024-10-24",
"updated": "2024-11-06",
"published": "2024-11-06"
}
| name | type | description |
|---|---|---|
|
|
Page title |
|
|
Page description |
|
|
Page creation date |
|
|
Date the page was last updated the page was last updated |
|
|
Date the page was first published |