feat: iwakura theme + user assets

.woodpecker.yaml

@@ -7,12 +7,12 @@ steps:
     image: woodpeckerci/plugin-docker-buildx
     secrets: [ gitpat ]
     settings:
-      repo: git.clatter.cc/hexlocation/disseminate
+      repo: git.iwakura.rip/hex/disseminate
       platforms: linux/amd64
       dockerfile: Dockerfile
       tags: ["${CI_COMMIT_BRANCH}-latest","${CI_COMMIT_BRANCH}-${CI_COMMIT_SHA}"]
-      username: hexlocation
+      username: hex
-      registry: git.clatter.cc
+      registry: git.iwakura.rip
         #insecure: true
       password: 
         from_secret: gitpat

README.md

@@ -1,8 +1,8 @@
 <h1 align="center">Disseminate</h1>  
 <div style="margin:auto;" align="center">
     <a href="https://www.buymeacoffee.com/hexlocation" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;"></a>
-    <a href="https://ci.penhub.nl/repos/1/branches/stable" target="_blank">
+    <a href="https://ci.iwakura.rip/repos/1/branches/stable" target="_blank">
-        <img src="https://ci.penhub.nl/api/badges/1/status.svg?branch=stable" alt="status-badge" />
+        <img src="https://ci.iwakura.rip/api/badges/1/status.svg?branch=stable" alt="status-badge" />
     </a>  
 </div>
 

data.template/config.json

@@ -1,6 +1,9 @@
 {
   "branding": {
-    "title": "hexlocation's blog"
+    "title": "iwakura.rip"
   },
-  "theme":"default"
+  "themeOpts": {
+    "accentColor":"#DDC4D8"
+  },
+  "theme":"iwakura"
 }

src/index.ts

@@ -72,6 +72,7 @@ app.use("/post/:post", async (req:express.Request,res:express.Response) => {
   res.render(`post`, {posts: posts, post: post[0], config: config})
 })
 
-app.use('/static', express.static(path.join(__dirname, '../', 'data',"static")))
+app.use('/static', express.static(path.join(__dirname, '../', "static")))
+if (config['use_custom_assets']) app.use('/assets', express.static(path.join(__dirname, "../", "data", "assets")));
 
 app.listen(3024)

src/types/Config.ts

@@ -5,4 +5,5 @@ export default interface Config {
   branding: Branding;
   theme: string;
   themeOpts: any;
+  use_custom_assets: boolean;
 }

src/views/themes/iwakura/footer.ejs

@@ -0,0 +1,3 @@
+<div id="footer-content">
+  <a style="display: none;color: gray !important; opacity: 30%;" href="https://git.clatter.cc/hexlocation/disseminate">powered by Disseminate</a>
+</div>

src/views/themes/iwakura/global-style.ejs

@@ -0,0 +1,84 @@
+<style>
+  @import url('https://fonts.cdnfonts.com/css/renogare');
+  @import url('https://fonts.cdnfonts.com/css/unbounded');
+  @import url('https://fonts.cdnfonts.com/css/source-code-pro');
+  @import url('https://fonts.cdnfonts.com/css/outfit');
+  :root {
+    --title-font: Unbounded;
+    --link-font: Outfit;
+  }
+  #main-content, #header-content, #post-content {
+    margin-top: 50px;
+    margin: auto;
+    width: 50%;
+  }
+  code {
+    font-family: "Source Code Pro";
+    padding-left: 2px;
+    padding-right: 2px;
+    border: 1px #2e2e2e solid;
+    background-color: #2e2e2e;
+    border-radius: 5px;
+  }
+  hr {
+    color: white;
+  }
+  #h_subtitle {
+    line-height: 5px;
+    color: gray;
+  }
+  #main-content {
+    text-align: left;
+  }
+  #header-content {
+    text-align: center;
+  }
+  #link-container a {
+    <% if(config.hasOwnProperty("themeOpts") && config.themeOpts.hasOwnProperty("accentColor")) { %>
+      color: <%= config.themeOpts.accentColor %> !important;
+    <% } else { %>
+      color: #82d3ff !important;
+    <% } %>
+  }
+  #post-content {
+    font-family: "Arial";
+  }
+  a {
+    text-decoration: none;
+    decoration: none;
+<% if(config.hasOwnProperty("themeOpts") && config.themeOpts.hasOwnProperty("accentColor")) { %>
+    color: <%= config.themeOpts.accentColor %> !important;
+<% } else { %>
+  color: #82d3ff !important;
+<% } %>
+  }
+  table td {
+<% if(config.hasOwnProperty("themeOpts") && config.themeOpts.hasOwnProperty("accentColor")) { %>
+    color: <%= config.themeOpts.accentColor %> !important;
+<% } else { %>
+    color: #82d3ff !important;
+<% } %>
+    line-height: 25px;
+    text-decoration: none;
+  }
+  table {
+    width: 100%;
+  }
+  #date-header, .date-item {
+    text-align: right;
+  }
+  #title-header, .post-item {
+    text-align: left;
+  }
+  #footer-content {
+    position: fixed;
+    bottom: 5;
+    left: 0;
+    text-align: center;
+    width: 100%;
+  }
+  body {
+    background-color: black;
+    color: white;
+  }
+</style>

src/views/themes/iwakura/header.ejs

@@ -0,0 +1,39 @@
+<title><%= config.branding.title %></title>
+<link rel="stylesheet" href="/static/custom.css">
+<div id="header-content">
+  <h1 id="h_title"><%= config.branding.title %></h1>
+  <% if(config.branding.hasOwnProperty("subtitle")) { %>
+    <p id="h_subtitle"><%= config.branding.subtitle %></p>
+  <% } %>
+  <div id="link-container">
+    <% if(config.hasOwnProperty("themeOpts") && config.themeOpts.hasOwnProperty("links")) { %>
+      <% for(const link of config.themeOpts.links) { %>
+        <a href="<%= link.url %>"><%= link.title %></a>
+      <% } %>
+    <% } else { %>
+      <a href="/">home</a>
+      <a href="/post/about.md">about</a>
+      <a href="/post/contact.md">contact</a>
+    <% } %>
+  </div>
+</div>
+<style>
+  #h_title {
+    background: url("/static/lain.png");
+    background-position: -200px 1125px;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-size: 35px;
+    margin-bottom: 5;
+    font-family: var(--title-font);
+  }
+  #link-container {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    flex-direction: row;
+    flex-wrap: wrap;  
+    font-family: var(--link-font), sans-serif;
+  }
+</style>
+

src/views/themes/iwakura/index.ejs

@@ -0,0 +1,25 @@
+<%- include('header') %>
+<div id="main-content" style="">
+  <table id="posts-table">
+  <!---
+    <tr>
+      <th id="title-header">Title</th>
+      <th id="date-header">Last Edited</th>
+    </tr>
+  --->
+  <% posts = posts.sort((a,b) => {return new Date(b.metadata.mtime) - new Date(a.metadata.mtime)}) %>
+  <% for(const post of posts) { %>
+    <tr>
+      <td class="post-item"><a class="post" href="/post/<%= post.file %>"><%= post.title %></a></td>
+      <td class="date-item"><%= new Date(post.metadata.mtime).toDateString() %></td>
+    </tr>
+  <% } %>
+</div>
+<style>
+  #main-content {
+    font-size: 15px;
+    font-family: var(--link-font);
+  }
+</style>
+<%- include('global-style'); %>
+<%- include('footer') %>

src/views/themes/iwakura/post.ejs

@@ -0,0 +1,6 @@
+<%- include('header') %>
+<div id="post-content">
+  <%- post['parsedPost'] %>
+</div>
+<%- include('global-style') %>
+<%- include('footer') %>