[Github-comments] [geany/www.geany.org] Update to Bootstrap 4 (#9)

[Matthew Brush]

> I personally prefer good ol' Python because I like it and so being much more familiar with it.

Same here, I've been using it for almost everything I need scripting language for since about 15 years or so, just not for web stuff (with the exception of a few backends using Flask).

> The only requirement I would like to consider is that the site should work mostly with JavaScript enabled in the browser.

I assume you mean **without** JavaScript, if so I agree.

> Obviously this is quite hard when using Vue or the like for the frontend

IMO, using Vue or other frontend frameworks isn't really appropriate for a site like Geany anyway since it's not really a "SPA", just a document/info site that is almost entirely static.

----

I started working on the frontend a bit. Basically it goes like this:

  1. Scan "pages" directory recursively looking for `*.md` files.
  2. Using [front-matter](https://www.npmjs.com/package/front-matter) to get meta data for the page (ex. title, description, keywords, output file, etc.).
  3. Convert the markdown body to HTML using [markdown-it](https://github.com/markdown-it/markdown-it) along with [highlight.js](https://highlightjs.org/) for any fenced code blocks.
  4. For each of the pages, process it into a full HTML document using [nujucks](https://mozilla.github.io/nunjucks/) and a few templates/partials.
  5. Using [Webpack](https://webpack.js.org/), the resulting pages, images, SCSS/CSS, JS, etc. are bundled into a production-ready, tiny, optimized, front-end site.

Basically it just pushes all of the work to "compile-time" to build the site before deploying, without any backend (so far at least, some stuff will likely need a bit of backend like nightly builds, IRC stuff, etc). Updating the site contents involves just adding/editing a markdown file in the "pages" directory and then running the build command to regenerate the site.

I wrote the compiler code in JS/Node because NPM has all of the needed tooling readily available and to start hacking on the site is as simple as running `npm install` in the source directory. To this point there's about 100 lines of JS for the compiler and about 50 lines of code for a dev server/file-monitoring/live-browser-reloading/etc for development. So far the dependencies (from `package.json`) look like this:

```json
{
  "dependencies": {
    "highlight.js": "^9.15.10",
    "normalize.css": "^8.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.6.0",
    "@babel/preset-env": "^7.6.0",
    "babel-loader": "^8.0.6",
    "browser-sync": "^2.26.7",
    "chokidar": "^3.0.2",
    "css-loader": "^3.2.0",
    "file-loader": "^4.2.0",
    "front-matter": "^3.0.2",
    "glob": "^7.1.4",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "markdown-it": "^9.1.0",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.12.0",
    "nodemon": "^1.19.2",
    "nunjucks": "^3.2.0",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "pretty": "^2.0.0",
    "sass-loader": "^8.0.0",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.8"
  }
```

So basically the actual site itself only depends on highlight.js package (only for the CSS theme, the rest is done at compile-time) and normalize.css (to make SCSS/CSS easier, since it doesn't use any CSS frameworks like Bootstrap). All of the other `devDependencies` are for the compiler, Webpack and to make development of the site easier.

What do you think?

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/geany/www.geany.org/issues/9#issuecomment-530946621
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.geany.org/pipermail/github-comments/attachments/20190912/c8d59ddc/attachment.html>