Add the theme

2026-09-24 14:26:49 +00:00 · 2025-11-09 21:24:34 +01:00 · 2025-11-09 21:24:34 +01:00 · 142a478a6a
commit 142a478a6a
parent cff7000285
21 changed files with 663 additions and 1 deletions
--- a/themes/openalt
+++ b/themes/openalt
@ -1 +0,0 @@
-Subproject commit aa354ad7324fdd2861a94cbc9febfa3136b3d69c
--- a/themes/openalt/.gitignore
+++ b/themes/openalt/.gitignore
@ -0,0 +1,2 @@
+_config.yml
+
--- a/themes/openalt/LICENSE
+++ b/themes/openalt/LICENSE
@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 The Hackman Club
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/themes/openalt/README.md
+++ b/themes/openalt/README.md
@ -0,0 +1,135 @@
+# Tapestry Theme
+
+Tapestry is a Hexo theme designed for tumblr style gallery blog feed.
+
+I am using this theme for a [personal blog](https://blog.bashynx.com/), or you can check the [official theme preview](https://tapestry.demo.bashynx.dev/).
+
+---
+
+## 1. Installation
+
+1. Clone the theme into your Hexo project:
+
+```bash
+cd your-hexo-project
+git clone https://github.com/HackmanClub/tapestry.git themes/tapestry
+```
+
+1. Set the theme in Hexo’s main `_config.yml`:
+
+```yaml
+theme: tapestry
+```
+
+1. Install dependencies:
+
+```bash
+npm install sharp
+```
+
+---
+
+## 2. Configuration
+
+The theme uses its own `_config.yml` inside `themes/tapestry/`. You will need to copy / rename `_EXAMPLE_config.yml` as a starting point:
+
+```bash
+cp themes/tapestry/_EXAMPLE_config.yml themes/tapestry/_config.yml
+```
+
+### Important Sections
+
+#### Site Settings
+
+- `avatar`, `banner`, `favicon`: paths to your images.
+- `primary_color`: main color for your theme.
+- `tag_border`: add borders around tags.
+- `sidebar`: show or hide the sidebar.
+- `scarves`: enable or disable scarves links.
+
+#### Scarves
+
+Scarf links appear at the top right. You can use an image or FontAwesome icon:
+
+```yaml
+scarf:
+  - url: tags/baking
+    image: images/assets/scarves/scarf.png
+    icon: false
+    enable: true
+    alt: Example
+  - url: tags/photo
+    image: false
+    icon: fa-solid fa-heart
+    enable: true
+    alt: Example
+```
+
+- `url` – link target
+- `image` – path to scarf image
+- `icon` – FontAwesome icon class
+- `enable` – show/hide scarf
+- `alt` – accessibility text
+
+#### Social Links
+
+Add or remove social links easily:
+
+```yaml
+social:
+  - url: https://www.instagram.com/
+    icon: fab fa-instagram
+    enable: true
+```
+
+---
+
+### Sidebar Menu
+
+Configure links in the sidebar:
+
+```yaml
+sidebar_menu:
+  - enable: true
+    name: Home
+    url: /
+  - enable: true
+    name: Get Hexo
+    url: https://hexo.io/docs/setup
+```
+
+- `enable` – show/hide
+- `name` – link text
+- `url` – destination
+
+---
+
+## 3. Using Thumbnails
+
+- Put post images in `source/images/`
+- The theme generates thumbnails automatically in `source/thumbnails/`
+- Use `small-` or `large-` in templates depending on your layout.
+
+Example in a template:
+
+```ejs
+<% if (post.photos && post.photos.length) { %>
+  <img class="gallery" src="<%- config.root %>thumbnails/small-<%- post.photos[0].replace(/^images\//,'') %>" alt="<%- post.title %>">
+<% } %>
+```
+
+> ⚠️ Only shows image if `post.photos` exists.
+
+---
+
+## 4. Running Locally
+
+Start a local Hexo server to preview:
+
+```bash
+hexo clean
+hexo s
+```
+
+- Visit `http://localhost:4000`
+- Changes in templates or CSS are reflected immediately.
--- a/themes/openalt/layout/_partial/article.ejs
+++ b/themes/openalt/layout/_partial/article.ejs
@ -0,0 +1,26 @@
+<div class="narrow_view">
+    <div class="post">
+        <div class="post-header">
+            <h1 class="article"><%= page.title  || "Untitled" %></h1>
+            <% if(page.photos && page.photos.length) { %>
+                <div class="cover">
+                    <img class="gallery" src="<%- config.root %><%- page.photos[0] %>" alt="<%- page.title || "Untitled" %>">
+                </div>
+            <% } %>
+            <p><%= page.description %></p>
+            <a href='<%= url_for(page.path) %>' class="page-date"><%- include('date', { date: page.date.toISOString() }) %></a>
+        </div>
+        <div class="post-content">
+            <%- page.content %>
+        </div>
+        <div class="post-footer">
+            <div class="tags smoll">
+                <% if (page.tags) { %>
+                    <% page.tags.data.forEach(function(tag) { %>
+                        <a href="<%= url_for('/tags/' + tag.name) %>">#<%= tag.name %></a>
+                    <% }); %>
+                <% } else {console.log(page)} %>
+            </div>
+        </div>
+    </div>
+</div>
--- a/themes/openalt/layout/_partial/date.ejs
+++ b/themes/openalt/layout/_partial/date.ejs
@ -0,0 +1,11 @@
+<div class="date smoll">
+    <% 
+        const posted = new Date(date);
+        const now = new Date();
+        const year = 365 * 24 * 60 * 60 * 1000;
+        const format = (now - posted) < year ? 
+            { day: 'numeric', month: 'long', hour: 'numeric', minute: 'numeric', hour12: true } : 
+            { day: 'numeric', month: 'long', year: 'numeric', hour: 'numeric', minute: 'numeric', hour12: true };
+    %>
+    <%= posted.toLocaleString('en-US', format ) %>
+</div>
--- a/themes/openalt/layout/_partial/feed.ejs
+++ b/themes/openalt/layout/_partial/feed.ejs
@ -0,0 +1,11 @@
+<div class="narrow_view">
+    <% page.posts.forEach(function(post) { %>
+        <%- include('post_feed', { post: post }) %>
+    <% }); %>
+
+    <div class="pagination">
+        <% if (page.next) { %>
+            <a href="<%- url_for(page.next_link) %>"></a>
+        <% } %>
+    </div>
+</div>
--- a/themes/openalt/layout/_partial/index/feed_preview.ejs
+++ b/themes/openalt/layout/_partial/index/feed_preview.ejs
@ -0,0 +1,22 @@
+<section id="feed_preview">
+
+<div class="feed_preview">
+    <% counter = 3 %>
+    <% page.posts.forEach(function(post) { %>
+        <% if (counter != 0) { %>
+            <% isEvent = false %>
+            <% post.tags.data.forEach(function(tag) { %>
+                <% if (tag.name == "Events") { %>
+                    <% isEvent = true %>
+                <% } %>
+            <% }); %>
+
+            <% if (isEvent == false) { %>
+                <%- include('./../post_feed', { post: post }) %>
+                <% counter = counter - 1 %>
+            <% } %>
+        <% } %>
+    <% }); %>
+</div>
+
+</section>
--- a/themes/openalt/layout/_partial/index/main_event.ejs
+++ b/themes/openalt/layout/_partial/index/main_event.ejs
@ -0,0 +1,13 @@
+<section class="event">
+
+    <% counter = false %>
+    <% page.posts.forEach(function(post) { %>
+        <% post.tags.data.forEach(function(tag) { %>
+            <% if ( (tag.name == "Events") && (counter == false) ) { %>
+                <%- include('./../post_event', { post: post }) %>
+                <% counter = true %>
+            <% } %>
+        <% }); %>
+    <% }); %>
+
+</section>
--- a/themes/openalt/layout/_partial/index/partners.ejs
+++ b/themes/openalt/layout/_partial/index/partners.ejs
@ -0,0 +1,18 @@
+<section id="partners">
+
+<div class="section-title">
+    <h1>Brought to you by:</h1>
+</div>
+
+<div class="partners">
+    <ul class="partners">
+    <% site.data.partners.forEach(function(partner) { %>
+        <li>
+        <a href="<%= partner.url %>">
+            <img src="<%= partner.logo %>" alt="<%= partner.name %>">
+        </a>
+        </li>
+    <% }); %>
+    </ul>
+</div>
+</section>
--- a/themes/openalt/layout/_partial/post_event.ejs
+++ b/themes/openalt/layout/_partial/post_event.ejs
@ -0,0 +1,9 @@
+<div class="event-wrapper">
+    <img src="/images/assets/OpenAltRomania.svg" alt="<%=  post.title || "Untitled" %>" style="max-height: 250px" width="300px" />
+
+    <a href='<%= url_for(post.path) %>'><h1><%= post.title || "Untitled" %></h1></a>
+
+    <div class="post-content">
+        <%- post.content %>
+    </div>
+</div>
--- a/themes/openalt/layout/_partial/post_feed.ejs
+++ b/themes/openalt/layout/_partial/post_feed.ejs
@ -0,0 +1,20 @@
+<!-- This is the template for the post. It is used to display the posts in the feeds. -->
+<div class="post post-feed">
+    <% if(post.photos && post.photos.length) { %>
+        <div class="cover">
+            <a href='<%= url_for(post.path) %>'>
+                <img class="gallery" src="<%- config.root %>thumbnails/<%- post.photos[0].replace(/^images\//, '') %>" alt="<%- post.title || 'Untitled' %>">
+            </a>
+        </div>
+    <% } %>
+    <div class="post-header">
+        <a href='<%= url_for(post.path) %>'><h2><%= post.title || "Untitled" %></h2>
+        <%- include('date', { date: post.date.toISOString() }) %></a>
+        <p class="post_description"><%= post.description %></p>
+        <div class="tags smoll">
+            <% post.tags.data.forEach(function(tag) { %>
+                <a href="<%= url_for('/tags/' + tag.slug || tag.name.replace(/\s+/g, '-')) %>">#<%= tag.name %></a>
+            <% }); %>
+        </div>
+    </div>
+</div>
--- a/themes/openalt/layout/archive.ejs
+++ b/themes/openalt/layout/archive.ejs
@ -0,0 +1,11 @@
+<div class="narrow_view">
+  <% site.posts.sort('-date').forEach(function(post) { %>
+    <%- include('_partial/post_feed', { post: post }) %>
+  <% }); %>
+
+  <div class="pagination">
+      <% if (page.next) { %>
+          <a href="<%- url_for(page.next_link) %>"></a>
+      <% } %>
+  </div>
+</div>
--- a/themes/openalt/layout/category.ejs
+++ b/themes/openalt/layout/category.ejs
@ -0,0 +1 @@
+<%- include("_partial/feed", { item: page.posts.sort('-date') }) %>
--- a/themes/openalt/layout/index.ejs
+++ b/themes/openalt/layout/index.ejs
@ -0,0 +1,5 @@
+<%- include("_partial/index/main_event", { item: site.posts.sort('-date') }) %>
+
+<%- include("_partial/index/feed_preview", { item: site.posts.sort('-date') }) %>
+
+<%- include("_partial/index/partners") %>
--- a/themes/openalt/layout/layout.ejs
+++ b/themes/openalt/layout/layout.ejs
@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!-- Metadata -->
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="<%= config.description %>">
+    <meta name="author" content="<%= config.author %>">
+    <meta name="title" content="<%= config.title %> - <%= config.subtitle %>">
+    <meta name="theme-color" content="<%= theme.primary_color %>">
+
+    <!-- Open Graph Meta Tags -->
+    <meta property="og:title" content="<%= config.title %>">
+    <meta property="og:description" content="<%= config.description %>">
+    <meta property="og:image" content="<%= url_for(theme.banner) %>">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="<%= config.url %>">
+
+    <link rel="icon" href="<%= url_for(theme.favicon) %>">
+
+    <script src="<%= url_for(theme.fontawesome) %>" crossorigin="anonymous"></script>
+
+    <title><%= config.title %></title>
+    <link rel="stylesheet" href="<%= url_for('/css/style.css') %>">
+
+    <style>
+        a:hover {
+            color: <%= theme.primary_color %>;
+        }
+    </style>
+</head>
+<body>
+    <header class="topbar">
+        <nav>
+            <!-- Avatar -->
+            <a href="/">
+                <div class="topbar-header">
+                    <img src="<%= url_for(theme.banner) %>" alt="<%= config.author %>">
+                </div>
+            </a>
+
+            <!-- Topbar Menu -->
+            <% theme.topbar_menu.forEach(function(menu) { %> 
+                <% if (menu.enable) { %>
+                    <a href="<%= menu.url %>">
+                        <%= menu.name %>
+                    </a>
+                <% } %>
+            <% }); %>
+
+            <span class="social">
+                <% theme.social.forEach(function(social) { %> 
+                    <% if (social.enable) { %>
+                        <span class="social-icon">
+                            <a href="<%= social.url %>" target="_blank">
+                                <% if (theme.fontawesome) { %>
+                                    <i class="<%= social.icon %>"></i>
+                                <% } else { %>
+                                    <img src='<%= url_for(theme.avatar) %>'></img>
+                                <% } %>
+                            </a>
+                        </span>
+                    <% } %>
+                <% }); %>
+            </span>
+
+        </nav>
+    </header>
+    <main>
+        <!-- BODY -->
+        <div class="content">
+            <%- body %>
+        </div>
+
+        <!-- Footer -->
+        <div class="footer smoll">
+            <% if (theme.hexo) { %>
+                <div class="hexo footer">
+                    Powered by Hexo, theme <a href="https://openalt.ro" target="_blank">OpenAlt</a><br>
+                </div>
+            <% } %>
+            <% if (theme.copyright) { %>
+                <div class="copy footer">
+                    &copy; <%= theme.copy_year %> <%= config.author %>
+                </div>
+            <% } %>
+        </div>
+    </main>
+</body>
+</html>
--- a/themes/openalt/layout/page.ejs
+++ b/themes/openalt/layout/page.ejs
@ -0,0 +1 @@
+<%- include("_partial/article", { page: page }) %>
--- a/themes/openalt/layout/post.ejs
+++ b/themes/openalt/layout/post.ejs
@ -0,0 +1 @@
+<%- include("_partial/article", { page: page }) %>
--- a/themes/openalt/layout/tag.ejs
+++ b/themes/openalt/layout/tag.ejs
@ -0,0 +1 @@
+<%- include("_partial/feed", { item: page.posts.sort('-date') }) %>
--- a/themes/openalt/source/css/style.css
+++ b/themes/openalt/source/css/style.css
@ -0,0 +1,265 @@
+body {
+    font-family:  "Open Sans";
+    margin: auto;
+    font-size: 14px;
+    background-color: #0D1117;
+}
+
+h1, h2, h3, h4 {
+    padding: 0;
+    margin: 0;
+    font-weight: lighter;
+    color: #0D1117;
+}
+
+h1 {
+    font-size: 25px;
+    line-height: 30px;
+    text-align: center;
+}
+
+h2 {
+    font-size: 22px;
+    line-height: 25px;
+}
+
+h3 {
+    font-size: 18px;
+    line-height: 22px;
+}
+
+h4 {
+    font-size: 15px;
+    line-height: 18px;
+    font-style: italic;
+}
+
+a {
+    text-decoration: none;
+    color: #0D1117;
+}
+
+/* Definition of small fonted text, example: footer */
+.smoll {
+    font-size: 12px !important;
+    line-height: 12px;
+}
+
+/* Topbar header section */
+.topbar {
+    position: sticky;
+    margin: 0;
+    top: 0;
+    width: 100%;
+    box-shadow:0 .125rem .25rem rgba(255,255,255,0.075) !important;
+}
+
+.topbar-header {
+    width: 150px;
+}
+
+/* Topbar menu section */
+nav {
+  width: 80%;
+  list-style: none;
+  display: flex;
+  margin: 0 auto;
+  padding: 0;
+}
+
+nav a {
+  padding: 15px 10px;
+  font-size: 15px;
+  align-content: center;
+  color: #dcdcdf;
+}
+
+/* Footer */
+.footer {
+    color: #dcdcdf !important;
+    text-align: center;
+    margin-top: 5px;
+}
+
+.footer a {
+    color: #dcdcdf !important;
+}
+
+/* Footer - Social */
+.social {
+    justify-content: center;
+    margin: 0.5em 0 0 auto;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+}
+
+.social-icon a {
+    padding: 8px;
+    box-sizing: border-box;
+    display:inline-block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 19px;
+    transition: color 0.3s;
+}
+
+.social-icon img {
+    width: 15px !important;
+    height: 15px !important;
+    border-radius: 50%;
+}
+
+/* Posts */
+main {
+    width: 80%;
+    margin: 30px auto 0 auto;
+}
+
+.narrow_view{
+    width: 70%;
+    margin: 0 auto;
+}
+
+.post {
+    padding: 1em;
+    background-color: #dcdcdf;
+    border-radius: 10px;
+    box-sizing: border-box;
+    margin-bottom: 16px;
+}
+
+/* Images */
+img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    border-radius: 10px;
+    opacity: 1;
+    transition: all 1s;
+}
+
+img:hover {
+    opacity: 0.95;
+}
+
+/* Post */
+.post-header {
+    line-height: 100%;
+    color:#0D1117;
+}
+
+.date {
+    color: #0D1117;
+    font-style: italic;
+}
+
+iframe {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 16 / 9;
+}
+
+/* Post - Top section */
+.article {
+    font-size: 35px !important;
+    line-height: 40px !important;
+    padding-bottom: 15px;
+}
+
+.page-date{
+    text-align: right !important;
+}
+
+.page-divider {
+    margin-top: 1em;
+    border-top: 1px solid #0D1117;
+}
+
+/* Post - Tags */
+.tags {
+    text-align: right;
+    margin-bottom: 0em;
+}
+
+.tags a {
+    color: #6c6f72 !important;
+    border-radius: 5px;
+    padding: 0.25em;
+}
+
+.tags a:hover {
+    color: #9fa5aa !important;
+}
+
+/* Section info */
+section {
+    margin-bottom: 20px;
+}
+
+.section-title h1{
+    color: #dcdcdf;
+    margin: 20px auto;
+}
+
+/* Events */
+.event-wrapper {
+    text-align: center;
+    margin: 75px auto 100px auto;
+}
+.event .event-wrapper h1,
+.event .event-wrapper h2,
+.event .event-wrapper h3,
+.event .event-wrapper h4,
+.event .event-wrapper a ,
+.event .event-wrapper p {
+    color: #dcdcdf;
+    padding-bottom: 5px;
+}
+
+.event-wrapper h1{
+    font-size: 35px;
+    line-height: 40px;
+    font-style: normal;
+}
+
+.event-wrapper img{
+    vertical-align: middle;
+    margin:0 auto 25px auto;
+}
+
+/* Feed Preview */
+
+.feed_preview {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.25%;   
+}
+
+.feed_preview .post {
+    width: 32.5%;
+}
+
+
+/* Partners */
+
+.partners {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  list-style: none;
+  padding: 0;
+  margin: 0 auto;
+}
+
+.partners li {
+  width: 300px;
+  text-align: center;
+  margin: auto;
+}
+
+.partners img {
+  width: 300px;
+}
				`@ -1 +0,0 @@`
				`Subproject commit aa354ad7324fdd2861a94cbc9febfa3136b3d69c`
				`@ -0,0 +1 @@`
				`<%- include("_partial/feed", { item: page.posts.sort('-date') }) %>`
				`@ -0,0 +1 @@`
				`<%- include("_partial/article", { page: page }) %>`