mdown.js is a theme for website and blog, use github releases as database, and turn the mark down content into html output.
- Using github public releases database api, so its free database.
- Input as
mdmark-down, output ashtmlhypertext. - Code highlight using
highlightjs - Posting tags as blog does.
- It's only put in one file
index.htmleverything here. - Store library on browser storage using
virtual.js, so the page will be loaded faster, and feels like local page. - Silent database update in background process.
- Can be customized, templates and styles remain open-source.
All requirements are provided online, I'll explain on Usage section.
virtual.js- https://github.com/9r3i/virtual.js -v1.1.0gaino.js- https://github.com/9r3i/gaino.js -v1.3.1router.js- https://github.com/9r3i/router.js -v2.2.1parser.js- https://github.com/9r3i/parser.js -v1.2.6eloader.js- https://github.com/9r3i/eloader.js -v1.0.1blog.js- https://github.com/9r3i/blog.js -v1.2.1- Global variables:
_GLOBAL=object; generated byrouter.js_BLOG=objectof blog; generated byblog.js_ENV=object(dynamic); generated byrouter.js_FUNC=objectof functions; generated byrouter.js_GET=object(dynamic); generated byrouter.js
plain.helper.js- https://github.com/9r3i/plain.js -v1.1.0- includedshowdown.js- https://github.com/showdownjs/showdown -v2.1.0- includedhighlight.js- https://github.com/highlightjs/highlight.js -v11.9.0- included- Config file in JSON like:
config.json
The config file for blog.js is written in JSON, contains: database driver, host, name, username, theme host, namespace, files, etc.
Example hunter.json where i put in https://9r3i.github.io/ like:
{
"version": 231225.1017,
"name": "hunter.json",
"database": {
"driver": "BlogDatabaseDriver",
"host": "https://api.github.com/repos",
"username": "9r3i",
"password": "___PUBLIC_TOKEN___",
"name": "gaino-blog-data",
"tables": {
"posts": "releases",
"authors": "releases/download/1.0.0/authors.json"
},
"file": null,
"fetch": "browser",
"expires": "Fri, Dec 23 2024"
},
"theme": {
"host": "https://raw.githubusercontent.com/9r3i/mdown.js",
"namespace": "mdown",
"templates": {
"footer": "templates/footer.js",
"login": "templates/login.html",
"main": "templates/main.html"
},
"files": [
"js/showdown.min.js",
"js/highlight.min.js",
"js/plain.helper.js",
"css/atom-one-light.css",
"css/github-markdown-light.css",
"css/mdown.css",
"js/mdown.js"
],
"save": true,
"show_assets": true,
"mainTagName": "1.0.0",
"reader": "https://relfo.vercel.app/9r3i/plain.js/reader/",
"url": "https://raw.githubusercontent.com/9r3i/mdown.js"
},
"performTest": false
}Important
The repo of this release database must be set as PUBLIC
The index file must be index.html to load everything in one file.
Example index.html where i put in https://9r3i.github.io/ like:
<!DOCTYPE html><html lang="en-US" dir="ltr"><head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>9r3i\hunter</title>
<meta name="keywords" content="9r3i, niner, hunter" />
<meta name="description" content="the sly eagle doesn't kill at whim" />
<meta name="robots" content="follow,index" />
<meta name="author" content="9r3i" />
<meta name="uri" content="https://github.com/9r3i" />
</head><body>
</body></html>Also i put some loader progress tag into the body tag.
<div class="index-splash">
<span>Connecting...</span>
<progress max="100"></progress>
</div>Given class name is index-splash means we need style to make it beautiful, and put the style tag into head tag.
<style type="text/css">
body{
margin:0px;
padding:0px;
}
.index-splash{
display:flex;
align-items:center;
justify-content:center;
height:100vh;
width:100vw;
margin:0px;
padding:0px;
font-family:system-ui;
background-color:#fff;
background:linear-gradient(#fff 0%,#bdf 80%,#59d 100%);
}
.index-splash progress{
font-size:24px;
}
.index-splash span{
position:absolute;
margin:-35px 0px 0px;
font-size:13px;
color:#777;
animation:fade 2.3s infinite 0s;
}
@keyframes fade{
0%{opacity:1;}
50%{opacity:0.3;}
100%{opacity:1;}
}
</style>You can make your own style if you want to.
Next, script tags for javascript execution.
<script type="text/javascript" id="virtual.js"></script>
<script type="text/javascript">
/* javascript content here... */
</script>There is a script tag with id="virtual.js". Yup, that's for virtual.js to load, I'll explain in next section.
Now, we need script for javascript execution, if you want to trace errors, you might put an event listener for error, like this one:
/* error message -- for development only */
window.addEventListener('error',function(e){
let errorText=[
e.message,
'URL: ' + e.filename,
'Line: ' + e.lineno + ', Column: ' + e.colno,
'Stack: ' + (e.error && e.error.stack || '(no stack trace)')
].join('\n');
alert(errorText);
console.error(errorText);
});//*/But don't put this script on production mode.
Next, we're gonna make an anonymous async function for the script.
/* anonymous async function */
(async function(){
/* clear the storage -- for development only --
* uncomment this if there's something wrong with script
* it's gonna wipe all of virtual files that've been stored on storage
*
localStorage.clear();//*/
/* exit statement -- for splash screen development only
* uncomment this if you wanna modified the splash screen
*
if(true){return;}//*/
/* blog config host file
* we wrote this file in previous section
*/
const CONFIG_FILE="https://raw.githubusercontent.com/9r3i/mdown.js/mdown/hunter.json";
/**
* prepare for registered files
* note: do not change the keys
* example host:
* https://raw.githubusercontent.com/9r3i/gaino.js/master
*/
const REGISTERED_FILES={
"gaino.js": "https://raw.githubusercontent.com/9r3i/gaino.js/master/gaino.min.js",
"router.js": "https://raw.githubusercontent.com/9r3i/router.js/master/router.min.js",
"parser.js": "https://raw.githubusercontent.com/9r3i/parser.js/master/parser.min.js",
"eloader.css": "https://raw.githubusercontent.com/9r3i/eloader.js/master/eloader.min.css",
"eloader.js": "https://raw.githubusercontent.com/9r3i/eloader.js/master/eloader.min.js",
"locale.js": "https://raw.githubusercontent.com/9r3i/locale.js/master/locale.min.js",
"blog.js": "https://raw.githubusercontent.com/9r3i/blog.js/master/blog.min.js"
};
/* virtual host file */
const VIRTUAL_HOST = "https://raw.githubusercontent.com/9r3i/virtual.js/master/virtual.min.js";
/* gaino config -- do not change from this point */
const GAINO_CONFIG={
"load": [
"router.js",
"parser.js",
"eloader.css",
"eloader.js",
"locale.js",
"blog.js"
],
"start": {
"class": "blog",
"method": "init",
"args": [
CONFIG_FILE
]
}
};
/* standard virtual initialization -- do not change */
let vname='virtual.js',
vtag=document.getElementById(vname),
vscript=localStorage.getItem('virtual/'+vname);
if(!vscript){
vscript=await fetch(VIRTUAL_HOST).then(r=>r.text());
if(!vscript.match(/function\svirtual/)){
alert('Error: Failed to load virtual.js');
return;
}
}
/* execute the virtual script */
vtag.textContent=vscript;
/* initialize virtual.js with registered files */
const app=new virtual(REGISTERED_FILES);
/* save virtual script */
app.put(vname,vscript);
/* load gaino file */
await app.load('gaino.js');
/* start the gaino app */
new gaino(app,GAINO_CONFIG);
/* doing silent self update for virtual.js
* uncomment this if you wanna make virtual.js auto-update
*
app.files[vname]=VIRTUAL_HOST;
await app.update(vname);
/* end-of-script */
})();All in usage section is sample, the result is in here https://9r3i.github.io/
- Make this theme more flexible and customable
- More locale translation for more languages
- Create admin page
That's all there is to it. Alhamdulillaah...
| Since December 25th 2023 |