Skip to content

Commit

Permalink
feat: HAM v1.0
Browse files Browse the repository at this point in the history
  • Loading branch information
reinhart1010 committed Dec 14, 2023
1 parent a06a79d commit 4b4c262
Show file tree
Hide file tree
Showing 25 changed files with 670 additions and 236 deletions.
29 changes: 29 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,12 @@ external_links:

# HAM 🥩

> [!IMPORTANT]
>
> **BREAKING CHANGE:** HAM is currently being upgraded to Halfmoon 2.0, which introduce visual breaking changes. See <https://github.com/reinhart1010/HAM/issues/6>.
{% youtube 0FKaIiRhUME %}

HAM is a Jekyll-based boilerplate template for generating better, static wiki-style websites. HAM can be instantly used to build static wiki pages. But the best of all, the default theme of HAM can be easily customized to create more personalized wiki pages, unlike those from MediaWiki, for example.

This project is built to replace the current, MediaWiki installation at <hackapedia.reinhart1010.id> after I found out difficult to create custom styles for it, while other, Git-based alternatives such as GitHub Wiki sucks (no, really) and may not support self-hosting on shared hosting providers.
Expand Down Expand Up @@ -128,6 +132,31 @@ ham:
Note: You can also override the whole favicon settings (either to entirely remove, or adding mobile or browser-specific icon formats) by overriding `_includes/favicon.html`.

### Navigation
HAM currently provides two navigation areas: the **navigation bar** and the **index** (as on the sidebar).

#### Navigation Bar
You can freely add items in the navigation bar by modifying `_includes/navbar.html`, including placing additional nested menus, dialogs/modals, and other HTML tags.

#### Sidebar
Just like the "On This Page" section, you can add custom sections into the sidebar. Note that the configuration is stored **outside** the `ham` section of `_config.yml` (see below example).

```yaml
ham:
# Other HAM configuration here
data:
index:
- name: "Customise Me"
id: "customize-me"
children:
- name: "Sample Menu 1"
url: "#"
- name: "Sample Menu 2"
url: "#"
- name: "Sample Menu 3"
url: "#"
```

### Comments
HAM provides built-in support for Facebook, Giscus, Telegram, and Utteranc.es widgets plugins. However, you can also add your own widgets or links by following these instructions.

Expand Down
2 changes: 2 additions & 0 deletions _config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ defaults:
ham:
site_icon: https://raw.githubusercontent.com/googlefonts/noto-emoji/main/svg/emoji_u1f969.svg
highlighter: rouge
include:
- _embed
kramdown:
input: GFM
syntax_highlighter: rouge
Expand Down
142 changes: 142 additions & 0 deletions _embed/youtube.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
<!DOCTYPE html>
<html>
<head>
<!-- Halfmoon CSS -->
<link href="/assets/halfmoon-variables.min.css" rel="stylesheet" />

<!-- Bootstrap Icons CSS -->
<link href="/assets/bootstrap-icons.min.css" rel="stylesheet" />

<!-- Core CSS required for HAM to work properly -->
<link href="/assets/default.css" rel="stylesheet" />

<!-- Additional CSS -->
<link href="/assets/main.css" rel="stylesheet" />
<link href="/assets/syntax-highlighter.css" rel="stylesheet" />

<script src="/assets/cookies.js"></script>
</head>
<body>
<div id="settings" class="alert alert-warning bg-body min-vh-100 vw-100 m-0">
<p><strong class="text-warning-emphasis">This page contains an embedded video from YouTube.</strong> You can watch the video directly here, on YouTube, or on alternative viewers including <a target="_blank" href="https://invidious.io">Invidious</a> and <a a target="_blank" href="https://piped.kavin.rocks">Piped</a>.</p>
<select id="yt-embed-choice" name="yt-embed-choice" class="form-select mb-1" aria-label="Choose how would you like to view this content." onchange="updateInstanceField()">
<option value="yt-embed" selected>Watch video here (YouTube)</option>
<option value="iv-embed">Watch video here (Invidious)</option>
<option value="yt-open">Open in YouTube</option>
<option value="iv-open">Open in...</option>
</select>
<div class="mb-1">
<div class="input-group">
<label for="yt-instance-url" class="input-group-text" id="yt-instance-url-label">Instance URL</label>
<input type="text" class="form-control" id="yt-instance-url" aria-describedby="yt-instance-url-label" placeholder="https://youtube.com" required>
</div>
<div class="form-text">The instance must be accessible under HTTPS.</div>
</div>
<div class="d-flex align-items-center gap-2">
<button class="btn btn-warning" onclick="openButton()">Open</button>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="yt-embed-save-preferences">
<label class="form-check-label" for="yt-embed-save-preferences">
Apply to all (requires reload)
</label>
</div>
</div>
</div>
<div id="redirect" class="d-none alert alert-warning bg-body min-vh-100 vw-100 m-0 d-flex flex-column align-items-center justify-content-center">
<p id="redirect-text"></p>
<button class="btn btn-warning" onclick="cancelButton()">Change Settings</button>
</div>
<!-- Bootstrap JS for color modes -->
<script src="/assets/bootstrap-color-modes.js"></script>
<script>
const searchParams = new URLSearchParams(window.location.search);
const videoId = searchParams.get("id");
let redirectTimer = null;

function initFields() {
const embedPreferenceEl = document.getElementById("yt-embed-choice");
const instanceUrlEl = document.getElementById("yt-instance-url");
const savePreferencesEl = document.getElementById("yt-embed-save-preferences");

embedPreferenceEl.value = getCookie("_ham_embed_yt_preference") ?? "yt-embed";
instanceUrlEl.value = getCookie("_ham_embed_yt_instance") ?? "https://youtube.com";
}

function updateInstanceField() {
const embedPreferenceEl = document.getElementById("yt-embed-choice");
const instanceUrlEl = document.getElementById("yt-instance-url");
if (embedPreferenceEl.value.startsWith("yt-")) {
instanceUrlEl.disabled = true;
instanceUrlEl.value = "https://youtube.com";
} else {
instanceUrlEl.disabled = false;
instanceUrlEl.value = "";
}
}

function openButton() {
const embedPreferenceEl = document.getElementById("yt-embed-choice");
const instanceUrlEl = document.getElementById("yt-instance-url");
const savePreferencesEl = document.getElementById("yt-embed-save-preferences");

instanceUrlEl.value.replace(/^(http(s){0,1}):\/\//, "https://")

if (savePreferencesEl.value == "on") {
setCookie("_ham_embed_yt_preference", embedPreferenceEl.value, 30);
setCookie("_ham_embed_yt_instance", instanceUrlEl.value, 30);
window.location.reload();
}
redirect(embedPreferenceEl.value, instanceUrlEl.value, true);
}

// Check whether the user has saved preferences.
const preference = getCookie("_ham_embed_yt_preference");
const instance = getCookie("_ham_embed_yt_instance");
const redirectContainerEl = document.getElementById("redirect");
const settingsContainerEl = document.getElementById("settings");
const redirectTextEl = document.getElementById("redirect-text");

function cancelButton() {
if (redirectTimer) clearTimeout(redirectTimer);
redirectContainerEl.classList.add("d-none");
settingsContainerEl.classList.remove("d-none");
}

function redirect(preference, instance, force) {
if (preference && instance) {
redirectContainerEl.classList.remove("d-none");
settingsContainerEl.classList.add("d-none");
if (preference.endsWith("-embed")) {
redirectTextEl.innerHTML = "Redirecting to <a id=\"redirect-url\" class=\"text-break\"></a>…";
const redirectUrlEl = document.getElementById("redirect-url");
if (preference.startsWith("yt-")) {
redirectUrlEl.innerHTML = redirectUrlEl.href = "https://youtube.com/embed/" + videoId;
} else {
redirectUrlEl.innerHTML = redirectUrlEl.href = "https://" + instance + "/embed/" + videoId;
}
redirectTimer = setTimeout(() => {
redirectTimer = null;
if (preference.startsWith("yt-")) {
window.location = "https://youtube.com/embed/" + videoId;
} else {
window.location = "https://" + instance + "/embed/" + videoId;
}
}, force ? 0 : 3000);
} else {
redirectTextEl.innerHTML = "Video content from <a id=\"redirect-url\" class=\"text-break\"></a>";
const redirectUrlEl = document.getElementById("redirect-url");
if (preference.startsWith("yt-")) {
redirectUrlEl.innerHTML = redirectUrlEl.href = "https://youtube.com/watch?v=" + videoId;
} else {
redirectUrlEl.innerHTML = redirectUrlEl.href = "https://" + instance + "/watch?v=" + videoId;
}
}
}
}

redirect(preference, instance, false);
initFields();
updateInstanceField();
</script>
</body>
</html>
53 changes: 4 additions & 49 deletions _includes/comments.html
Original file line number Diff line number Diff line change
@@ -1,49 +1,4 @@
{% assign contributing = page.contributing | default: site.ham.contributing %}
{% if contributing != null %}
{% if contributing.discuss.type != 'url' %}
<h5 id="discuss" class="sidebar-title">Discuss this page</h5>
<div class="sidebar-title">
{% case contributing.discuss.type %}
{% when 'custom' %}
{% include custom-comments.html %}
{% when 'commentbox.io %}
<div class="commentbox"></div>
<script src="https://unpkg.com/commentbox.io/dist/commentBox.min.js"></script>
<script>commentBox("{{ page.project_id }}")</script>
{% when 'disqus' %}
<div id="disqus_thread"></div>
<script>
var disqus_config = function () {
this.page.url = "{{ page.url }}";
this.page.identifier = "{{ page.url }}";
};
(function() {
var d = document, s = d.createElement('script');
s.src = 'https://{{ contributing.discuss.forum_shortname }}.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
{% when 'facebook' %}
{% if contributing.discuss.facebook_app_id != null %}
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/{{ contributing.discuss.lang }}/sdk.js#xfbml=1&version=v17.0&appId={{ contributing.discuss.facebook_app_id }}&autoLogAppEvents=1" nonce="mqsBinib"></script>
<div class="fb-comments" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-width="" data-numposts="5"></div>
{% endif %}
{% when 'giscus' %}
<script src="https://giscus.app/client.js" data-repo="{{ contributing.discuss.repo }}" data-repo-id="{{ contributing.discuss.repo_id }}" data-category="{{ contributing.discuss.category }}" data-category-id="{{ contributing.discuss.category_id }}" data-mapping="{{ contributing.discuss.mapping }}" data-reactions-enabled="{{ contributing.discuss.reactions_enabled | default: 1 }}" data-emit-metadata="{{ contributing.discuss.emit_metadata | default: 0 }}" data-theme="{{ contributing.discuss.theme | default: 'preferred_color_scheme' }}" data-lang="{{ contributing.discuss.lang | default: 'en' }}" crossorigin="anonymous" async></script>
{% when 'telegram' %}
<script src="https://telegram.org/js/telegram-widget.js?15" {% if contributing.discuss.telegram_discussion != null %} data-telegram-discussion="{{ contributing.discuss.telegram_discussion }}" {% endif %} data-comments-limit="{{ contributing.discuss.comments_limit | default: '5' }}" {% if contributing.discuss.height != null %} data-height="{{ contributing.discuss.height }}" {% endif %} data-color="{{ contributing.discuss.color | default: '319BE6' }}" data-dark-color="{{ contributing.discuss.color | default: '4BA3E2' }}" data-colorful="{{ contributing.discuss.colorful | default: 0 }}" data-dark="{{ contributing.discuss.dark | default: 0 }}" crossorigin="anonymous" async></script>
{% when 'utterances' %}
<script src="https://utteranc.es/client.js" repo="{{ contributing.discuss.repo }}" issue-term="{{ contributing.discuss.issue_term }}"
{% if contributing.discuss.label != null %}
label="{{ contributing.discuss.label }}"
{% endif %}
theme="{{ contributing.discuss.theme | default: 'preferred-color-scheme' }}" crossorigin="anonymous" async></script>
{% endcase %}
<noscript>
Please enable JavaScript to view comments and discussions
</noscript>
</div>
{% endif %}
{% endif %}
<div class="alert alert-danger" role="alert">
<h4 class="alert-heading">Error: Custom comment widget is not set up.</h4>
Make sure that the custom comment widget code is placed under <code>/_includes/custom-comments.html</code>, then recompile.
</div>
4 changes: 0 additions & 4 deletions _includes/custom-comments.html

This file was deleted.

49 changes: 49 additions & 0 deletions _includes/ham/comments.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
{% assign contributing = page.contributing | default: site.ham.contributing %}
{% if contributing != null %}
{% if contributing.discuss.type != 'url' %}
<h5 id="discuss" class="sidebar-title">Discuss this page</h5>
<div class="sidebar-title">
{% case contributing.discuss.type %}
{% when 'custom' %}
{% include comments.html %}
{% when 'commentbox.io %}
<div class="commentbox"></div>
<script src="https://unpkg.com/commentbox.io/dist/commentBox.min.js"></script>
<script>commentBox("{{ page.project_id }}")</script>
{% when 'disqus' %}
<div id="disqus_thread"></div>
<script>
var disqus_config = function () {
this.page.url = "{{ page.url }}";
this.page.identifier = "{{ page.url }}";
};
(function() {
var d = document, s = d.createElement('script');
s.src = 'https://{{ contributing.discuss.forum_shortname }}.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
{% when 'facebook' %}
{% if contributing.discuss.facebook_app_id != null %}
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/{{ contributing.discuss.lang }}/sdk.js#xfbml=1&version=v17.0&appId={{ contributing.discuss.facebook_app_id }}&autoLogAppEvents=1" nonce="mqsBinib"></script>
<div class="fb-comments" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-width="" data-numposts="5"></div>
{% endif %}
{% when 'giscus' %}
<script src="https://giscus.app/client.js" data-repo="{{ contributing.discuss.repo }}" data-repo-id="{{ contributing.discuss.repo_id }}" data-category="{{ contributing.discuss.category }}" data-category-id="{{ contributing.discuss.category_id }}" data-mapping="{{ contributing.discuss.mapping }}" data-reactions-enabled="{{ contributing.discuss.reactions_enabled | default: 1 }}" data-emit-metadata="{{ contributing.discuss.emit_metadata | default: 0 }}" data-theme="{{ contributing.discuss.theme | default: 'preferred_color_scheme' }}" data-lang="{{ contributing.discuss.lang | default: 'en' }}" crossorigin="anonymous" async></script>
{% when 'telegram' %}
<script src="https://telegram.org/js/telegram-widget.js?15" {% if contributing.discuss.telegram_discussion != null %} data-telegram-discussion="{{ contributing.discuss.telegram_discussion }}" {% endif %} data-comments-limit="{{ contributing.discuss.comments_limit | default: '5' }}" {% if contributing.discuss.height != null %} data-height="{{ contributing.discuss.height }}" {% endif %} data-color="{{ contributing.discuss.color | default: '319BE6' }}" data-dark-color="{{ contributing.discuss.color | default: '4BA3E2' }}" data-colorful="{{ contributing.discuss.colorful | default: 0 }}" data-dark="{{ contributing.discuss.dark | default: 0 }}" crossorigin="anonymous" async></script>
{% when 'utterances' %}
<script src="https://utteranc.es/client.js" repo="{{ contributing.discuss.repo }}" issue-term="{{ contributing.discuss.issue_term }}"
{% if contributing.discuss.label != null %}
label="{{ contributing.discuss.label }}"
{% endif %}
theme="{{ contributing.discuss.theme | default: 'preferred-color-scheme' }}" crossorigin="anonymous" async></script>
{% endcase %}
<noscript>
Please enable JavaScript to view comments and discussions
</noscript>
</div>
{% endif %}
{% endif %}
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<a href="{{ link.url }}" class="sidebar-link sidebar-link-with-icon" target="{{ link.target }}">
<a href="{{ link.url }}" class="list-group-item list-group-item-action" target="{{ link.target }}">
<span class="sidebar-icon">
<i class="{{ link.icon | default: 'bi bi-file-text' }}" aria-hidden="true"></i>
</span>
Expand Down
File renamed without changes.
29 changes: 29 additions & 0 deletions _includes/ham/navbar.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<nav class="navbar navbar-expand-lg sticky-top" style="background-color: var(--bs-content-bg); border-bottom: var(--bs-border-width) solid var(--bs-content-border-color);">
<div class="container-fluid">
<div class="btn-group d-md-none" role="group">
<button type="button" data-bs-toggle="offcanvas" data-bs-target="#_ham_sidebar" aria-controls="_ham_sidebar" class="btn btn-secondary">
<i class="bi bi-search" aria-hidden="true"></i>
</button>
<button type="button" data-bs-toggle="offcanvas" data-bs-target="#_ham_sidebar" aria-controls="_ham_sidebar" class="btn btn-secondary">
<i class="bi bi-list-nested me-1" aria-hidden="true"></i> Menu
</button>
</div>
<a class="navbar-brand" href="#">
{% if site.ham.site_icon != null %}
<img src="{{ site.ham.site_icon }}" alt="{{ site.title }}" width="24" height="24" class="d-inline-block align-text-top">
{% endif %}{{ site.title }}
</a>
<div class="btn-group d-md-none" role="group">
<button type="button" data-bs-toggle="collapse" data-bs-target="#_ham_settings" aria-controls="_ham_settings" class="btn btn-secondary">
<i class="bi bi-gear me-1" aria-hidden="true"></i>
<p>Settings</p>
</button>
</div>
<div class="collapse navbar-collapse" id="_ham_settings">
{% if site.tagline != null %}
<span>{{ site.tagline }}</span>
{% endif %}
{% include navbar.html %}
</div>
</div>
</nav>
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<span aria-hidden="true">&times;</span>
</a>
<input id="search-input" type="text" class="form-control" placeholder="Keyword">
<ul id="results-container" class="my-10"></ul>
<ul id="_ham_search_results_container" class="my-10"></ul>
<span>Search articles on this site...</span>
</div>
</div>
Expand Down
Loading

0 comments on commit 4b4c262

Please sign in to comment.