diff --git a/assets/css/article.css b/assets/css/article.css index e666fdc..3a4c5a6 100644 --- a/assets/css/article.css +++ b/assets/css/article.css @@ -15,10 +15,12 @@ article > header { display: grid; place-items: center; - width: 100%; + width: min(100%, 45ch); padding: 1rem 2rem; background-color: var(--grey3); + border-radius: .5rem; + box-shadow: 0 1rem 2rem var(--grey1); } .toc-container > .toc { diff --git a/assets/css/theme.css b/assets/css/theme.css index b1a00fc..9f68814 100644 --- a/assets/css/theme.css +++ b/assets/css/theme.css @@ -122,12 +122,16 @@ th, td { code { background-color: var(--grey3); font-family: monospace; - padding: .1rem .3rem; + padding: .1rem .2rem; + margin: 0 .1rem; + border-radius: .2rem; } pre > code { margin: 1rem 0; padding: 1rem; + border-radius: .5rem; + box-shadow: 0 1rem 2rem var(--grey1); display: block; overflow-x: auto; @@ -136,4 +140,10 @@ pre > code { code * { font-family: monospace; +} + +img { + margin: 1rem 0; + border-radius: .5rem; + box-shadow: 0 1rem 2rem var(--grey1); } \ No newline at end of file diff --git a/assets/images/design-res-promo.svg b/assets/images/design-res-promo.svg new file mode 100644 index 0000000..8e26ed9 --- /dev/null +++ b/assets/images/design-res-promo.svg @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/content/pages/docs/intro.md b/content/pages/docs/intro.md new file mode 100644 index 0000000..a83c3db --- /dev/null +++ b/content/pages/docs/intro.md @@ -0,0 +1,96 @@ +%%- +title: qwik cms +header: qwik cms intro +-%% + +# Introduction +BurnyLlama started working on this project as a part of [qwik](https://qwik.space). +We tried to find a good and simple CMS solution, but we couldn't really find something that +worked for and suited us. We decided to make our own, and that's when the `qwik-cms` repo was created. + +## Basic ideas +We wanted to keep it simple, yet powerful. At first we only wanted to use *include/import statements*, +but later we came to the realization that you could add other QoL things, like automatically generating +a table of contents for articles. + +We also want to make development of content be as fast as possible. Especially with when it comes to +writing articles. Writing articles in markdown can feel kinda nice as it (at least imo) saves a lot +of time compared to writing out HTML. + +## Underlying technologies +Thanks to all the technologies used, the CMS is really hackable and can be used in different ways +depending on your liking. There are three main ways of creating content: +1. Normal HTML +2. Nunjacks (an HTML templating language) +3. Markdown + + +## Views on bloat +*This all sounds kinda bloated?* +I hear you asking... and yes, I am afraid this is a bit bloated (sadly). Although I wouldn't call it +bloated if you actually use the features. The project does pull in a few dependencies, and making the +system more modular could potentially make som of those dependencies optional, but as of now we +depend on: +* Express - the server framework +* nunjucks - the templating language that does very heavy lifting in this CMS. +* nunjucks-markdown - adds support for markdown in nunjucks +* marked - the actual renderer for the markdown (used by `nunjucks-markdown`) +* highlight.js - provides syntax highlighting for codeblocks in markdown. +* jsdom - makes us able to use DOM operations server-side (used to generate the table of contents) +* chokidar - used to reload nunjucks templates if they change on the disk (without having to restart the server) + +So yes, we sure do have a lot of dependencies, but they are all used, so there are no dependencies just "lying around". + +# Installation +The installation process will be quite trivial if you are used to node-based projects. + +## Prerequesites +We will assume that you have `node` and `npm` installed already. Otherwise make sure to install those. + +## Process +The process is really simple: +```bash +git clone https://git.qwik.space/BurnyLlama/qwik-cms +cd qwik-cms +npm i +node index.js +``` +`npm i` installs all needed dependencies. + +# Configuration +The CMS can be configured from `config.json` and the default config looks like this: +```json +{ + "contentDir": "content", + "assetsDir": "assets", + + "serverPort": "8789", + "serverName": "qwik" +} +``` + +## Explanation +All of the options are kind of self-explanatory, but anyways: + +### contentDir +Specifies which directory the content is in. + +Default: `content` + +### assetsDir +Specifies which directory the assets are in. These items will be statically available on (your site's) +`/assets/`. I recommend storing CSS, images, etc. here. + +Default: `assets` + +### serverPort +The port the server should run on. + +Default: `8789` + +### serverName +This can be accessed in any page/template by using `{{ serverName }}` + +Default: `qwik` + +# Usage diff --git a/content/pages/docs/intro.njk b/content/pages/docs/intro.njk deleted file mode 100644 index ba78939..0000000 --- a/content/pages/docs/intro.njk +++ /dev/null @@ -1,97 +0,0 @@ -{% extends "templates/article_md.njk" %} -{% import "components/code.njk" as code with context %} - -{% block head %} - qwik cms - intro -{% endblock %} - -{% block header %} - qwik cms - docs -{% endblock %} - -{% block main %} - # Introduction - BurnyLlama started working on this project as a part of [qwik](https://qwik.space). - We tried to find a good and simple CMS solution, but we couldn't really find something that - worked for and suited us. We decided to make our own, and that's when the `qwik-cms` repo was created. - - ## Basic ideas - We wanted to keep it simple, yet powerful. At first we only wanted to use *include/import statements*, - but later we came to the realization that you could add other QoL things, like automatically generating - a table of contents for articles. - - We also want to make development of content be as fast as possible. Especially with when it comes to - writing articles. Writing articles in markdown can feel kinda nice as it (at least imo) saves a lot - of time compared to writing out HTML. - - ## Underlying technologies - Thanks to all the technologies used, the CMS is really hackable and can be used in different ways - depending on your liking. There are three main ways of creating content: - 1. Normal HTML - 2. Nunjacks (an HTML templating language) - 3. Markdown (although with a caveat as of now) - - - ## Views on bloat - *This all sounds kinda bloated?* - I hear you asking... and yes, I am afraid this is a bit bloated (sadly). Although I wouldn't call it - bloated if you actually use the features. The project does pull in a few dependencies, and making the - system more modular could potentially make som of those dependencies optional, but as of now we - depend on: - * Express - the server framework - * nunjucks - the templating language that does very heavy lifting in this CMS. - * nunjucks-markdown - adds support for markdown in nunjucks - * marked - the actual renderer for the markdown (used by `nunjucks-markdown`) - * highlight.js - provides syntax highlighting for codeblocks in markdown. - * jsdom - makes us able to use DOM operations server-side (used to generate the table of contents) - * chokidar - used to reload nunjucks templates if they change on the disk (without having to restart the server) - - So yes, we sure do have a lot of dependencies, but they are all used, so there are no dependencies just "lying around". - - # Installation - The installation process will be quite trivial if you are used to node-based projects. - - ## Prerequesites - We will assume that you have `node` and `npm` installed already. Otherwise make sure to install those. - - ## Process - The process is really simple: - ```bash - git clone https://git.qwik.space/BurnyLlama/qwik-cms - cd qwik-cms - npm i - node index.js - ``` - `npm i` installs all needed dependencies. - - # Configuration - The CMS can be configured from `config.json` and the default config looks like this: - {{ code.import("code/example_config.json", "json") }} - - ## Explanation - All of the options are kind of self-explanatory, but anyways: - - ### contentDir - Specifies which directory the content is in. - - Default: `content` - - ### assetsDir - Specifies which directory the assets are in. These items will be statically available on (your site's) - `/assets/`. I recommend storing CSS, images, etc. here. - - Default: `assets` - - ### serverPort - The port the server should run on. - - Default: `8789` - - ### serverName - This can be accessed in any page/template by using `{{ serverName }}` - - Default: `qwik` - - # Usage - -{% endblock %} \ No newline at end of file diff --git a/content/pages/docs/test.md b/content/pages/docs/test.md deleted file mode 100644 index d2e18b4..0000000 --- a/content/pages/docs/test.md +++ /dev/null @@ -1,6 +0,0 @@ -%%- -title: Hello World -header: Test Article --%% - -# Hello wonderful world!! \ No newline at end of file diff --git a/content/templates/external_md.njk b/content/templates/external_md.njk index 67de38a..9f9fce3 100644 --- a/content/templates/external_md.njk +++ b/content/templates/external_md.njk @@ -22,7 +22,7 @@ {% markdown %} - {{ externalMarkdown }} + {{ externalMarkdown | safe }} {% endmarkdown %} diff --git a/index.js b/index.js index ba015a6..93aafe6 100644 --- a/index.js +++ b/index.js @@ -3,9 +3,7 @@ import express from 'express' import njk from 'nunjucks' import njkMarkdown from 'nunjucks-markdown' - import marked from 'marked' -import hljs from 'highlight.js' import { requestHandler } from './libs/requestHandler.js' import { markedRenderer } from './libs/markedRenderer.js' @@ -35,17 +33,11 @@ const njkEnv = njk.configure( } ) -marked.setOptions({ - highlight: (code, lang) => { - const language = hljs.getLanguage(lang) ? lang : 'plaintext' - return hljs.highlight(language, code) - .value.replace(/\n/g, "
").replace(/•/g, " ") - }, - gfm: true +marked.use({ + gfm: true, + renderer: markedRenderer }) -marked.use({ renderer: markedRenderer }) - njkMarkdown.register(njkEnv, marked) diff --git a/libs/markedRenderer.js b/libs/markedRenderer.js index a12719f..3c17982 100644 --- a/libs/markedRenderer.js +++ b/libs/markedRenderer.js @@ -1,3 +1,14 @@ +import hljs from 'highlight.js' + +function highlight(code, lang) { + const language = hljs.getLanguage(lang) ? lang : 'plaintext' + return hljs.highlight( + code.replace(/•/g, " "), { language }) + .value.replace(/\n/g, "
") + .replace(/ /g, " " + ) +} + export const markedRenderer = { heading(text, level) { return ` @@ -6,5 +17,13 @@ export const markedRenderer = { ${text} ` - } + }, + + code(code, lang, escaped) { + return ` + 
+                ${highlight(code, lang)}
+
+ ` + } } \ No newline at end of file diff --git a/libs/siteRenderer.js b/libs/siteRenderer.js index 5168c70..259a277 100644 --- a/libs/siteRenderer.js +++ b/libs/siteRenderer.js @@ -42,7 +42,7 @@ export function mdRenderer(path) { const externalMarkdownFile = fs.readFileSync(path).toString() // Separate the actual markdown from potential 'externalContext' - const externalMarkdown = externalMarkdownFile.replace(/^%%-\n[\S\s]*-%%\n/, "") + const externalMarkdown = externalMarkdownFile.replace(/^%%-\n[\S\s]*-%%\n/, "").replace(/```\w*[\s\S]*?```/g, match => match.replace(/ /g, "•")) const externalContext = externalMarkdownFile.match(/^%%-\n[\S\s]*-%%\n/)[0] const renderedNjk = njk.renderString(njkFile, { externalMarkdown })