aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Chris Xiong <chirs241097@gmail.com> 2018-12-09 10:52:50 +0800
committerGravatar Chris Xiong <chirs241097@gmail.com> 2018-12-09 10:52:50 +0800
commitedd8aa6e058d12dd0f9b0b886e507bd73dce72cb (patch)
treeb2c778c0a3e2f269207de65543ee289b95fa404d
parenta846e514aa281059f8b207823d1ff7612b89b768 (diff)
downloadsbs-edd8aa6e058d12dd0f9b0b886e507bd73dce72cb.tar.xz
Load images asynchronously.
Fix line endings in templates. Apply theme color.
Diffstat
-rwxr-xr-x[-rw-r--r--]generator/main.js1
-rw-r--r--generator/postrenderer.js15
-rw-r--r--templates/list_template198
-rw-r--r--templates/post_template230
4 files changed, 236 insertions, 208 deletions
diff --git a/generator/main.js b/generator/main.js
index ccdc380..e25d5f2 100644..100755
--- a/generator/main.js
+++ b/generator/main.js
@@ -1,3 +1,4 @@
+#!/usr/bin/node
//Copyright Chris Xiong 2018
//License: Expat (MIT)
const content_dir='../content';
diff --git a/generator/postrenderer.js b/generator/postrenderer.js
index 8797c22..e387691 100644
--- a/generator/postrenderer.js
+++ b/generator/postrenderer.js
@@ -133,18 +133,25 @@ async function _render(inf,outf,np,pp)
await encrypt(trd);
//TOC
- const l=trd.getElementById('article').querySelectorAll('h2,h3,h4,h5,h6');
- const tocroot=trd.getElementById('tocroot');
tocid=0;
headerlist=[];
- for(let i of l)
- if(!i.classList.contains('notoc'))headerlist.push(i);
+ trd.getElementById('article').querySelectorAll('h2,h3,h4,h5,h6').forEach(
+ (i)=>{if(!i.classList.contains('notoc'))headerlist.push(i);}
+ );
+ const tocroot=trd.getElementById('tocroot');
for(let i=0;i<headerlist.length;)i=_dfs(trd,headerlist[i],tocroot,i);
if(!tocroot.children.length)trd.getElementById('tocouter').style.display='none';
//Footnotes
footnoter(trd);
+ //async images
+ //TODO: Actually compress the images using imagemagick
+ //(by introducing a new tag e.g. <thumb> ?)
+ trd.getElementById('article').querySelectorAll('img').forEach(
+ (i)=>{if(!i.getAttribute('decoding'))i.setAttribute('decoding','async');}
+ );
+
//Tag list
const tgs=meta[2].split(',');
for(let i=0;i<tgs.length;++i)
diff --git a/templates/list_template b/templates/list_template
index 687d134..033dfbd 100644
--- a/templates/list_template
+++ b/templates/list_template
@@ -1,94 +1,104 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>Chrisoft::Blog</title>
-<script type="text/javascript" src="/panel.js"></script>
-<link rel="stylesheet" type="text/css" href="/common.css">
-<link rel="stylesheet" type="text/css" href="/panel.css">
-<link rel="stylesheet" type="text/css" href="/theme0a.css" id="theme0a">
-<link rel="stylesheet" type="text/css" href="/theme0b.css" id="theme0b">
-<link rel="stylesheet" type="text/css" href="/theme1a.css" id="theme1a">
-<link rel="stylesheet" type="text/css" href="/theme1b.css" id="theme1b">
-<link rel="stylesheet" type="text/css" href="/theme2a.css" id="theme2a">
-<link rel="stylesheet" type="text/css" href="/theme2b.css" id="theme2b">
-<link rel="stylesheet" type="text/css" href="/theme3a.css" id="theme3a">
-<link rel="stylesheet" type="text/css" href="/theme3b.css" id="theme3b">
-<link rel="stylesheet" type="text/css" href="/blog/blogext.css">
-<script>
-function ol()
-{
- window.onresize=function()
- {
- if(window.innerWidth<768)
- setupevents();
- else unsetevents();
- }
- window.onresize();
-}
-function loadTheme(){
- var thm=document.cookie.replace(new RegExp("(?:(?:^|.*;\\s*)thm\\s*\\=\\s*([^;]*).*$)|^.*$"),"$1");
- if(thm.length<2||'0123z'.indexOf(thm[0])==-1||'abz'.indexOf(thm[1])==-1)thm='zz';
- var ent="";
- var d=new Date();
- if(thm[0]=='z')
- {
- var m=d.getMonth()+1;
- if(m>=3&&m<6)thm='0'+thm[1];
- else if(m>=6&&m<9)thm='1'+thm[1];
- else if(m>=9&&m<12)thm='2'+thm[1];
- else thm='3'+thm[1];
- }
- if(thm[1]=='z')
- {if(d.getHours()>=18||d.getHours()<6)thm=thm[0]+'b';else thm=thm[0]+'a';}
- ent=`theme${thm}`;
- var R=new RegExp('theme[0-4][ab]');
- for(var i=0;i<document.styleSheets.length;++i)
- {
- if(R.exec(document.styleSheets[i].ownerNode.id)!==null&&document.styleSheets[i].ownerNode.id!=ent)
- document.styleSheets[i].disabled=true;
- else document.styleSheets[i].disabled=false;
- }
-}
-loadTheme();
-</script>
-</head>
-<body onload="ol()" style="overflow-x:hidden;">
- <div id="panel" class="TText">
- <ul id="panellist">
- <li><a href="/"><h1>Chrisoft</h1></a></li>
- <li><a href="/blog"><h2>Blog</h2></a></li>
- <li><span>Tags filter</span>
- <ul id="tagslist">
- <li id="active_taglist_item_template"><a class="active"></a></li>
- <li id="taglist_item_template"><a></a></li>
- </ul>
- </li>
- </ul>
- </div>
- <div id="content">
- <div id="postslist">
- <div class="block TText" id="post_item_template" style="display:block;">
- <h3 style="line-height:1.5em;"><a id="title"></a></h3>
- <br>
- <div style="display:table;width:100%;table-layout:fixed;"><span class="left" id="tags"></span>
- <span class="right" id="time"></span></div>
- </div>
- </div>
- <div id="insanch" style="height:5em;"></div>
- <div id="footer">
- <div id="pagesw" class="TText" style="display:table;width:100%;padding:1em 0;">
- <span style="display:table-cell;"><a id="prepage">&lt;&lt;</a></span>
- <span style="text-align:center;display:table-cell;" id="page"></span>
- <span style="text-align:right;display:table-cell;"><a id="nexpage">&gt;&gt;</a></span>
- </div>
- <div style="text-align:center;" class="TText">
- Proudly powered by SSBS <reduced style="font-size:70%;">(the static stupid blogging system)</reduced> 2.5
- <br>
- Content licensed under CC BY-SA 4.0.
- </div>
- </div>
- </div>
-</body>
-</html>
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="theme-color" content="#000000">
+<title>Chrisoft::Blog</title>
+<script type="text/javascript" src="/panel.js"></script>
+<link rel="stylesheet" type="text/css" href="/common.css">
+<link rel="stylesheet" type="text/css" href="/panel.css">
+<link rel="stylesheet" type="text/css" href="/theme0a.css" id="theme0a">
+<link rel="stylesheet" type="text/css" href="/theme0b.css" id="theme0b">
+<link rel="stylesheet" type="text/css" href="/theme1a.css" id="theme1a">
+<link rel="stylesheet" type="text/css" href="/theme1b.css" id="theme1b">
+<link rel="stylesheet" type="text/css" href="/theme2a.css" id="theme2a">
+<link rel="stylesheet" type="text/css" href="/theme2b.css" id="theme2b">
+<link rel="stylesheet" type="text/css" href="/theme3a.css" id="theme3a">
+<link rel="stylesheet" type="text/css" href="/theme3b.css" id="theme3b">
+<link rel="stylesheet" type="text/css" href="/blog/blogext.css">
+<script>
+function ol()
+{
+ window.onresize=function()
+ {
+ if(window.innerWidth<768)
+ setupevents();
+ else unsetevents();
+ }
+ window.onresize();
+}
+function loadTheme(){
+ var thm=document.cookie.replace(new RegExp("(?:(?:^|.*;\\s*)thm\\s*\\=\\s*([^;]*).*$)|^.*$"),"$1");
+ if(thm.length<2||'0123z'.indexOf(thm[0])==-1||'abz'.indexOf(thm[1])==-1)thm='zz';
+ var ent="";
+ var d=new Date();
+ if(thm[0]=='z')
+ {
+ var m=d.getMonth()+1;
+ if(m>=3&&m<6)thm='0'+thm[1];
+ else if(m>=6&&m<9)thm='1'+thm[1];
+ else if(m>=9&&m<12)thm='2'+thm[1];
+ else thm='3'+thm[1];
+ }
+ if(thm[1]=='z')
+ {if(d.getHours()>=18||d.getHours()<6)thm=thm[0]+'b';else thm=thm[0]+'a';}
+ ent=`theme${thm}`;
+ var R=new RegExp('theme[0-4][ab]');
+ for(var i=0;i<document.styleSheets.length;++i)
+ {
+ if(R.exec(document.styleSheets[i].ownerNode.id)!==null&&document.styleSheets[i].ownerNode.id!=ent)
+ document.styleSheets[i].disabled=true;
+ else document.styleSheets[i].disabled=false;
+ }
+ var thmcolor="";
+ switch(thm[0])
+ {
+ case '0':thmcolor=thm[1]=='a'?'#f59dda':'#2f0933';break;
+ case '1':thmcolor=thm[1]=='a'?'#9df59d':'#090933';break;
+ case '2':thmcolor=thm[1]=='a'?'#edb47b':'#1f1205';break;
+ case '3':thmcolor=thm[1]=='a'?'#a0cdfa':'#051933';break;
+ }
+ document.querySelector("meta[name=theme-color]").setAttribute('content',thmcolor);
+}
+loadTheme();
+</script>
+</head>
+<body onload="ol()" style="overflow-x:hidden;">
+ <div id="panel" class="TText">
+ <ul id="panellist">
+ <li><a href="/"><h1>Chrisoft</h1></a></li>
+ <li><a href="/blog"><h2>Blog</h2></a></li>
+ <li><span>Tags filter</span>
+ <ul id="tagslist">
+ <li id="active_taglist_item_template"><a class="active"></a></li>
+ <li id="taglist_item_template"><a></a></li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ <div id="content">
+ <div id="postslist">
+ <div class="block TText" id="post_item_template" style="display:block;">
+ <h3 style="line-height:1.5em;"><a id="title"></a></h3>
+ <br>
+ <div style="display:table;width:100%;table-layout:fixed;"><span class="left" id="tags"></span>
+ <span class="right" id="time"></span></div>
+ </div>
+ </div>
+ <div id="insanch" style="height:5em;"></div>
+ <div id="footer">
+ <div id="pagesw" class="TText" style="display:table;width:100%;padding:1em 0;">
+ <span style="display:table-cell;"><a id="prepage">&lt;&lt;</a></span>
+ <span style="text-align:center;display:table-cell;" id="page"></span>
+ <span style="text-align:right;display:table-cell;"><a id="nexpage">&gt;&gt;</a></span>
+ </div>
+ <div style="text-align:center;" class="TText">
+ Proudly powered by SSBS <reduced style="font-size:70%;">(the static stupid blogging system)</reduced> 2.5
+ <br>
+ Content licensed under CC BY-SA 4.0.
+ </div>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/templates/post_template b/templates/post_template
index 92c6cc4..10a93fa 100644
--- a/templates/post_template
+++ b/templates/post_template
@@ -1,110 +1,120 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>Chrisoft::Blog</title>
-<script type="text/javascript" src="/panel.js"></script>
-<script type="text/javascript" src="/blog/footnoter.js"></script>
-<script type="text/javascript" src="/blog/aes-js.js"></script>
-<script type="text/javascript" src="/blog/scrypt.js"></script>
-<script type="text/javascript" src="/blog/sha256.js"></script>
-<script type="text/javascript" src="/blog/decryptor.js"></script>
-<link rel="stylesheet" type="text/css" href="/common.css">
-<link rel="stylesheet" type="text/css" href="/panel.css">
-<link rel="stylesheet" type="text/css" href="/theme0a.css" id="theme0a">
-<link rel="stylesheet" type="text/css" href="/theme0b.css" id="theme0b">
-<link rel="stylesheet" type="text/css" href="/theme1a.css" id="theme1a">
-<link rel="stylesheet" type="text/css" href="/theme1b.css" id="theme1b">
-<link rel="stylesheet" type="text/css" href="/theme2a.css" id="theme2a">
-<link rel="stylesheet" type="text/css" href="/theme2b.css" id="theme2b">
-<link rel="stylesheet" type="text/css" href="/theme3a.css" id="theme3a">
-<link rel="stylesheet" type="text/css" href="/theme3b.css" id="theme3b">
-<link rel="stylesheet" type="text/css" href="/blog/blogext.css">
-<script>
-function ol()
-{
- window.onresize=function()
- {
- if(window.innerWidth<768)
- setupevents();
- else unsetevents();
- }
- window.onresize();
- _decryptonload();
-}
-function loadTheme(){
- var thm=document.cookie.replace(new RegExp("(?:(?:^|.*;\\s*)thm\\s*\\=\\s*([^;]*).*$)|^.*$"),"$1");
- if(thm.length<2||'0123z'.indexOf(thm[0])==-1||'abz'.indexOf(thm[1])==-1)thm='zz';
- var ent="";
- var d=new Date();
- if(thm[0]=='z')
- {
- var m=d.getMonth()+1;
- if(m>=3&&m<6)thm='0'+thm[1];
- else if(m>=6&&m<9)thm='1'+thm[1];
- else if(m>=9&&m<12)thm='2'+thm[1];
- else thm='3'+thm[1];
- }
- if(thm[1]=='z')
- {if(d.getHours()>=18||d.getHours()<6)thm=thm[0]+'b';else thm=thm[0]+'a';}
- ent=`theme${thm}`;
- var R=new RegExp('theme[0-4][ab]');
- for(var i=0;i<document.styleSheets.length;++i)
- {
- if(R.exec(document.styleSheets[i].ownerNode.id)!==null&&document.styleSheets[i].ownerNode.id!=ent)
- document.styleSheets[i].disabled=true;
- else document.styleSheets[i].disabled=false;
- }
-}
-loadTheme();
-</script>
-</head>
-<body onload="ol()" style="overflow-x:hidden;">
- <div id="panel" class="TText">
- <ul id="panellist">
- <li><a href="/"><h1>Chrisoft</h1></a></li>
- <li><a href="/blog"><h2>Blog</h2></a></li>
- <li><a href="#"><h3 id="title"></h3></a></li>
- <li><span>Tags</span>
- <ul id="tagslist">
- </ul>
- </li>
- <li id="tocouter">
- <span>Table of Contents</span>
- <ul id="tocroot">
- </ul>
- </li>
- <li style="margin-left:-0.5em"><a id="prevp">Prev post</a></li>
- <li style="margin-left:-0.5em"><a id="nextp">Next post</a></li>
- </ul>
- </div>
- <div id="content">
- <h2 id="titleh" class="TText" style="font-wight:normal;"></h2>
- <div id="datetags" class="TText" style="margin-bottom:1em;"></div>
- <hr><div id="article" class="TText"></div><br><hr>
- <div class="TText" id="notediv" style="font-size:80%;"></div>
- <div id="insanch" style="height:3em;"></div>
- <div id="footer" style="">
- <div id="pagesw" class="TText" style="width:100%;height:0.5em;"></div>
- <div style="text-align:center;" class="TText">
- Proudly powered by SSBS <reduced style="font-size:70%;">(the static stupid blogging system)</reduced> 2.5
- <br>
- Content licensed under CC BY-SA 4.0. <span id="purgep" style="display:none;font-size:70%;">This page has passphrase(s) stored. Click <a href="javascript:_purgep()">here</a> to purge.</span>
- </div>
- </div>
- <div id="cmdbuf" class="TText" style="transition:500ms;padding:1em;font-size:2em;color:white;position:absolute;background-color:rgba(0,0,0,0.6);left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;">
- </div>
- </div>
- <div id="decryptui" style="display:none;opacity:0;color:white;z-index:1000;position:fixed;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.4);transition:opacity 0.5s;">
- <div id="decryptdlg" class="TText" style="padding:10px 20px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background-color:rgba(0,0,0,0.6);">
- <div id="keyhint" style="margin-bottom:8px;"></div>
- <div style="margin-bottom:8px;">Key: <input id="keyinp" type="text" style="color:#fff;"></div>
- <div style="height:2.25em;">
- <button id="btndecrypt" onclick="decryptor(decid,document.getElementById('keyinp').value);" style="position:absolute;left:20px;">Decrypt</button>
- <button onclick="hidedecryptui();" style="position:absolute;right:20px;">Cancel</button>
- </div>
- </form>
- </div>
-</body>
-</html>
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="theme-color" content="#000000">
+<title>Chrisoft::Blog</title>
+<script type="text/javascript" src="/panel.js"></script>
+<script type="text/javascript" src="/blog/footnoter.js"></script>
+<script type="text/javascript" src="/blog/aes-js.js"></script>
+<script type="text/javascript" src="/blog/scrypt.js"></script>
+<script type="text/javascript" src="/blog/sha256.js"></script>
+<script type="text/javascript" src="/blog/decryptor.js"></script>
+<link rel="stylesheet" type="text/css" href="/common.css">
+<link rel="stylesheet" type="text/css" href="/panel.css">
+<link rel="stylesheet" type="text/css" href="/theme0a.css" id="theme0a">
+<link rel="stylesheet" type="text/css" href="/theme0b.css" id="theme0b">
+<link rel="stylesheet" type="text/css" href="/theme1a.css" id="theme1a">
+<link rel="stylesheet" type="text/css" href="/theme1b.css" id="theme1b">
+<link rel="stylesheet" type="text/css" href="/theme2a.css" id="theme2a">
+<link rel="stylesheet" type="text/css" href="/theme2b.css" id="theme2b">
+<link rel="stylesheet" type="text/css" href="/theme3a.css" id="theme3a">
+<link rel="stylesheet" type="text/css" href="/theme3b.css" id="theme3b">
+<link rel="stylesheet" type="text/css" href="/blog/blogext.css">
+<script>
+function ol()
+{
+ window.onresize=function()
+ {
+ if(window.innerWidth<768)
+ setupevents();
+ else unsetevents();
+ }
+ window.onresize();
+ _decryptonload();
+}
+function loadTheme(){
+ var thm=document.cookie.replace(new RegExp("(?:(?:^|.*;\\s*)thm\\s*\\=\\s*([^;]*).*$)|^.*$"),"$1");
+ if(thm.length<2||'0123z'.indexOf(thm[0])==-1||'abz'.indexOf(thm[1])==-1)thm='zz';
+ var ent="";
+ var d=new Date();
+ if(thm[0]=='z')
+ {
+ var m=d.getMonth()+1;
+ if(m>=3&&m<6)thm='0'+thm[1];
+ else if(m>=6&&m<9)thm='1'+thm[1];
+ else if(m>=9&&m<12)thm='2'+thm[1];
+ else thm='3'+thm[1];
+ }
+ if(thm[1]=='z')
+ {if(d.getHours()>=18||d.getHours()<6)thm=thm[0]+'b';else thm=thm[0]+'a';}
+ ent=`theme${thm}`;
+ var R=new RegExp('theme[0-4][ab]');
+ for(var i=0;i<document.styleSheets.length;++i)
+ {
+ if(R.exec(document.styleSheets[i].ownerNode.id)!==null&&document.styleSheets[i].ownerNode.id!=ent)
+ document.styleSheets[i].disabled=true;
+ else document.styleSheets[i].disabled=false;
+ }
+ var thmcolor="";
+ switch(thm[0])
+ {
+ case '0':thmcolor=thm[1]=='a'?'#f59dda':'#2f0933';break;
+ case '1':thmcolor=thm[1]=='a'?'#9df59d':'#090933';break;
+ case '2':thmcolor=thm[1]=='a'?'#edb47b':'#1f1205';break;
+ case '3':thmcolor=thm[1]=='a'?'#a0cdfa':'#051933';break;
+ }
+ document.querySelector("meta[name=theme-color]").setAttribute('content',thmcolor);
+}
+loadTheme();
+</script>
+</head>
+<body onload="ol()" style="overflow-x:hidden;">
+ <div id="panel" class="TText">
+ <ul id="panellist">
+ <li><a href="/"><h1>Chrisoft</h1></a></li>
+ <li><a href="/blog"><h2>Blog</h2></a></li>
+ <li><a href="#"><h3 id="title"></h3></a></li>
+ <li><span>Tags</span>
+ <ul id="tagslist">
+ </ul>
+ </li>
+ <li id="tocouter">
+ <span>Table of Contents</span>
+ <ul id="tocroot">
+ </ul>
+ </li>
+ <li style="margin-left:-0.5em"><a id="prevp">Prev post</a></li>
+ <li style="margin-left:-0.5em"><a id="nextp">Next post</a></li>
+ </ul>
+ </div>
+ <div id="content">
+ <h2 id="titleh" class="TText" style="font-wight:normal;"></h2>
+ <div id="datetags" class="TText" style="margin-bottom:1em;"></div>
+ <hr><div id="article" class="TText"></div><br><hr>
+ <div class="TText" id="notediv" style="font-size:80%;"></div>
+ <div id="insanch" style="height:3em;"></div>
+ <div id="footer" style="">
+ <div id="pagesw" class="TText" style="width:100%;height:0.5em;"></div>
+ <div style="text-align:center;" class="TText">
+ Proudly powered by SSBS <reduced style="font-size:70%;">(the static stupid blogging system)</reduced> 2.5
+ <br>
+ Content licensed under CC BY-SA 4.0. <span id="purgep" style="display:none;font-size:70%;">This page has passphrase(s) stored. Click <a href="javascript:_purgep()">here</a> to purge.</span>
+ </div>
+ </div>
+ <div id="cmdbuf" class="TText" style="transition:500ms;padding:1em;font-size:2em;color:white;position:absolute;background-color:rgba(0,0,0,0.6);left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;">
+ </div>
+ </div>
+ <div id="decryptui" style="display:none;opacity:0;color:white;z-index:1000;position:fixed;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.4);transition:opacity 0.5s;">
+ <div id="decryptdlg" class="TText" style="padding:10px 20px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background-color:rgba(0,0,0,0.6);">
+ <div id="keyhint" style="margin-bottom:8px;"></div>
+ <div style="margin-bottom:8px;">Key: <input id="keyinp" type="text" style="color:#fff;"></div>
+ <div style="height:2.25em;">
+ <button id="btndecrypt" onclick="decryptor(decid,document.getElementById('keyinp').value);" style="position:absolute;left:20px;">Decrypt</button>
+ <button onclick="hidedecryptui();" style="position:absolute;right:20px;">Cancel</button>
+ </div>
+ </form>
+ </div>
+</body>
+</html>
generated by cgit v1.2.3 (git 2.39.1) at 2024-04-26 16:16:30 +0000