first commit

Author: RoyTakanen

.DS_Store

@@ -0,0 +1,2 @@
+node_modules/
+.DS_Store

.gitignore

@@ -0,0 +1,25 @@
+# ThonelJS
+
+Website hosting should not be a hassle.
+
+## ## About
+
+I wanted to host a simple website somewhere and know that it would not go down when I forget to pay the hosting. That is why I chose Github Pages as my hosting platform. Github Pages only has one problem. I do not want to write HTML. This lead to ThonelJS creation. ThonelJS automatically generates new HTML and updates it to the git repository.
+
+I also made a simple web server which made it possible to preview the website locally at [localhost:8000](http://localhost:8000). 
+
+[Read more...](https://thoneljs.github.io/about.html)
+
+## Usage
+
+As a blogger you should only focus onto the `content` folder and most specifically `articles` folder inside it. `articles` folder contains your blog posts. The title will be grabbed from the filename (`.md` suffix will be removed) so writing title inside markdown file is unnecessary (and leads to duplicate title). 
+
+`/content/info.json` is like your blog settings. It uses JSON to store the website title and description. 
+
+`/content/index.md` is the frontpage of your website. If you rename or remove it the frontpage will show a list of all the blog posts. The same applies to `/content/about.md` which will be shown only if it exists.
+
+If you want to preview the changes before pushing them (very much RECOMMENDED) you can do that by running `node .` in the ThonelJS folder. This although requires Node.JS to be installed on your machine.
+
+## Bugs
+
+See them [here](https://thoneljs.github.io/Common%20bugs.md)

README.md

@@ -0,0 +1,15 @@
+const fs = require('fs');
+
+exports.exists = () => {
+    if (fs.existsSync('./content/about.md'))
+        return true;
+    return false;
+}
+
+exports.read = () => {
+    const content = fs
+        .readFileSync(`./content/about.md`)
+        .toString();
+
+    return content;
+};

about.js

@@ -0,0 +1,50 @@
+const fs = require('fs');
+const express = require('express');
+const showdown = require('showdown');
+
+const articles = require('./articles');
+const frontpage = require('./frontpage');
+const about = require('./about');
+
+const app = express();
+app.set('view engine', 'pug');
+const port = 8000;
+const converter = new showdown.Converter();
+
+if (about.exists()) {
+    app.locals.about = true;
+}
+
+app.locals.info = JSON.parse(fs.readFileSync('./content/info.json'));
+
+app.get('/', (req, res) => {
+    if (frontpage.exists()) {
+        const html = converter.makeHtml(frontpage.read());
+        return res.render('index', { content: html });
+    }
+
+    return res.render('list', { articles: articles.list() });
+});
+
+app.get('/blog.html', (req, res) => {
+    return res.render('list', { articles: articles.list() });
+});
+
+app.get('/about.html', (req, res) => {
+    const html = converter.makeHtml(about.read());
+    return res.render('about', { content: html });
+});
+
+app.get('/:article', (req, res) => {
+    const article = req.params.article;
+    if (articles.exists(article)) {
+        const html = articles.read(article, 0, true);
+        return res.render('article', { content: html, title: article });
+    } else {
+        res.redirect('/');
+    }
+});
+
+app.listen(port, () => {
+    console.log(`Web server at http://localhost:${port}`);
+});

app.js

@@ -0,0 +1,46 @@
+const fs = require('fs');
+const showdown = require('showdown');
+
+// TODO: Do not use filename as title. Instead use the first h1.
+
+const converter = new showdown.Converter();
+
+exports.read = (name, truncate = 0, outputHtml = false) => {
+    if (!name.includes('.md'))
+        name = `${name}.md`;
+
+    const content = fs
+        .readFileSync(`./content/articles/${name}`)
+        .toString();
+
+    const truncated = content
+        .substring(0, truncate == 0 ? content.length : truncate);
+
+    if (outputHtml)
+        return converter.makeHtml(truncated)
+
+    return truncated;
+};
+
+exports.list = (outputHtml = false) => {
+    articleList = fs.readdirSync(`./content/articles`);
+
+    let articles = [];
+
+    articleList.forEach(article => {
+        articles.push({
+            "name": article.replace('.md', ''),
+            "caption": this.read(article, 200, outputHtml)
+        });
+    });
+
+    return articles;
+};
+
+exports.exists = (name) => {
+    console.log(name)
+    if (!name.includes('.md'))
+        name = `${name}.md`;
+
+    return fs.existsSync(`./content/articles/${name}`)
+};

articles.js

@@ -0,0 +1,18 @@
+## Project
+
+I wanted to host a simple website somewhere and know that it would not go down when I forget to pay the hosting. That is why I chose Github Pages as my hosting platform. Github Pages only has one problem. I do not want to write HTML. This lead to ThonelJS creation. ThonelJS automatically generates new HTML and updates it to the git repository.
+
+I also made a simple web server which made it possible to preview the website locally at [localhost:8000](http://localhost:8000). 
+
+## Creator
+
+[Roy Takanen](https://github.com/RoyTakanen/)
+
+Web development and server management have always been important for me. I also follow actively activities on the cyber security field and try to understand them. The fascinating idea that code will be deployed automatically after it is finished has pushed me to learn more about Github Actions. I currentely use Docker to self-host email, password manager and file storage but I am looking forward to examine Kubernetes and Docker swarm.
+
+## Tech stack
+
+- Node.JS with following packages:
+- Showdown.JS
+- Pug
+- ExpressJS

content/about.md

@@ -0,0 +1,23 @@
+Choosing the name for a project has always been very difficult to me. First I tried to read other [static site generator](https://jamstack.org/generators/) names to find my own. This was not a success. 
+
+I continued searching and found two websites. These websites generated names for projects. They were [codenames.herokuapp.com](http://codenames.herokuapp.com/) and [foswig.js](https://mrsharpoblunto.github.io/foswig.js/). I used the latter to find the current name, ThanolJS. Originally it suggested thanol which was already reserver so added suffix JS into it. 
+
+The next problem was icon. I did not want the organization to look like some random new Github profile. That is why I went to [favicon.io](https://favicon.io/favicon-generator/). I was able to generate a pretty looking white `T` on black background with following settings:
+
+----
+
+**Text:** *T*
+
+**Background:** *Rounded*
+
+**Font Family:** *Leckerli One*
+
+**Font Variant:** *Regular 400 Normal*
+
+**Font Size:** *110*
+
+**Font Color:** `#FFFFFF`
+
+**Background Color:** `#222`
+
+----

content/articles/Choosing the name.md

@@ -0,0 +1,6 @@
+This project was made in a hurry so bugs are common here. I will try to fix them as soon as possible, though.
+
+**List of bugs**
+
+- No `?`-character in article names (it is handled as GET parameter and does not work)
+- Caption generation contains raw markdown

content/articles/Common bugs.md

@@ -0,0 +1,21 @@
+## About
+
+I wanted to host a simple website somewhere and know that it would not go down when I forget to pay the hosting. That is why I chose Github Pages as my hosting platform. Github Pages only has one problem. I do not want to write HTML. This lead to ThonelJS creation. ThonelJS automatically generates new HTML and updates it to the git repository.
+
+I also made a simple web server which made it possible to preview the website locally at [localhost:8000](http://localhost:8000). 
+
+[Read more...](about.html)
+
+## Usage
+
+As a blogger you should only focus onto the `content` folder and most specifically `articles` folder inside it. `articles` folder contains your blog posts. The title will be grabbed from the filename (`.md` suffix will be removed) so writing title inside markdown file is unnecessary (and leads to duplicate title). 
+
+`/content/info.json` is like your blog settings. It uses JSON to store the website title and description. 
+
+`/content/index.md` is the frontpage of your website. If you rename or remove it the frontpage will show a list of all the blog posts. The same applies to `/content/about.md` which will be shown only if it exists.
+
+If you want to preview the changes before pushing them (very much RECOMMENDED) you can do that by running `node .` in the ThonelJS folder. This although requires Node.JS to be installed on your machine.
+
+## Bugs
+
+See them [here](Common%20bugs)

content/index.md

@@ -0,0 +1,4 @@
+{
+    "title": "ThonelJS",
+    "description": "Website hosting should not be a hassle."
+}

content/info.json

@@ -0,0 +1 @@
+<html><head><title>HimosCMS</title><meta name="viewport" content="width=device-width, initial-scale=1.0"/><link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css"/></head><body><header><nav> <a href="index.html">Home</a><a href="blog.html">Blog</a><h1>HimosCMS</h1><p>Static blog generator for Github pages (free hosting).</p></nav></header><article><h1>Initial release</h1><div><p>This is just an example blog post to demonstrate this…</p></div></article><hr/></body></html>

docs/Initial release.html

@@ -0,0 +1,14 @@
+<html><head><title>HimosCMS</title><meta name="viewport" content="width=device-width, initial-scale=1.0"/><link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css"/></head><body><header><nav> <a href="index.html">Home</a><a href="blog.html">Blog</a><h1>HimosCMS</h1><p>Static blog generator for Github pages (free hosting).</p></nav></header><div><h1 id="aboutthistool">About this tool</h1>
+<h2 id="whytouse">Why to use</h2>
+<ul>
+<li>Free</li>
+<li>Simple</li>
+</ul>
+<h2 id="howitismade">How it is made?</h2>
+<p>The stack that we are using here consists of:</p>
+<ul>
+<li>Node.JS with following packages:</li>
+<li>Showdown.JS</li>
+<li>Pug</li>
+<li>ExpressJS</li>
+</ul></div></body></html>

docs/about.html

@@ -0,0 +1 @@
+<html><head><title>HimosCMS</title><meta name="viewport" content="width=device-width, initial-scale=1.0"/><link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css"/></head><body><header><nav> <a href="index.html">Home</a><a href="blog.html">Blog</a><h1>HimosCMS</h1><p>Static blog generator for Github pages (free hosting).</p></nav></header><article><a href="Initial release"><h2>Initial release</h2></a><i>This is just an example blog post to demonstrate this...</i><hr/></article></body></html>

docs/blog.html

@@ -0,0 +1,2 @@
+<html><head><title>HimosCMS</title><meta name="viewport" content="width=device-width, initial-scale=1.0"/><link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css"/></head><body><header><nav> <a href="index.html">Home</a><a href="blog.html">Blog</a><h1>HimosCMS</h1><p>Static blog generator for Github pages (free hosting).</p></nav></header><div><h1 id="himoscms">HimosCMS</h1>
+<p>This is HimosCMS. Our goal is to be a simple, elegant and tiny blog solution for Github pages.</p></div></body></html>

docs/index.html

@@ -0,0 +1,15 @@
+const fs = require('fs');
+
+exports.exists = () => {
+    if (fs.existsSync('./content/index.md'))
+        return true;
+    return false;
+}
+
+exports.read = () => {
+    const content = fs
+        .readFileSync(`./content/index.md`)
+        .toString();
+
+    return content;
+};

frontpage.js

@@ -0,0 +1,59 @@
+const fs = require('fs');
+const showdown = require('showdown');
+const pug = require('pug');
+
+const articles = require('./articles');
+const frontpage = require('./frontpage');
+const about = require('./about');
+
+converter = new showdown.Converter();
+
+fs.rmSync('./docs', { recursive: true, force: true });
+fs.mkdirSync('./docs');
+
+const info = JSON.parse(fs.readFileSync('./content/info.json'));
+
+// About page
+const aboutHtml = pug.renderFile('./views/about.pug', {
+    info,
+    content: converter.makeHtml(about.read())
+});
+
+fs.writeFileSync('./docs/about.html', aboutHtml);
+
+// Frontpage
+if (frontpage.exists()) {
+    const frontpageHtml = pug.renderFile('./views/index.pug', {
+        info,
+        content: converter.makeHtml(frontpage.read())
+    });
+} else {
+    const frontpageHtml = pug.renderFile('./views/list.pug', {
+        info,
+        articles: articles.list()
+    });
+}
+
+fs.writeFileSync('./docs/index.html', frontpageHtml);
+
+// Blog
+const blogHtml = pug.renderFile('./views/list.pug', {
+    info,
+    articles: articles.list()
+});
+
+fs.writeFileSync('./docs/blog.html', blogHtml);
+
+
+// Individual articles
+console.log(`Generating pages for ${articles.list().length} articles...`);
+
+articles.list().forEach((article) => {
+    const articleHtml = pug.renderFile('./views/article.pug', {
+        info,
+        content: articles.read(article.name, 0, true),
+        title: article.name
+    });
+
+    fs.writeFileSync(`./docs/${article.name}.html`, articleHtml);
+});