Switch to single page application #2
10 changed files with 76 additions and 3381 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -1,9 +1,10 @@
|
|||
# Nimcache
|
||||
nimcache/
|
||||
cache/
|
||||
build/
|
||||
|
||||
# Garbage
|
||||
*.exe
|
||||
*.js
|
||||
*.log
|
||||
*.lg
|
||||
main
|
||||
|
|
|
|||
18
README.md
18
README.md
|
|
@ -1,6 +1,6 @@
|
|||
# [Blog in a Matrix](https://bloginamatrix.xyz)
|
||||
|
||||
New server side rendered blog site written in Nim.
|
||||
New single page blog site application written in Nim.
|
||||
|
||||
Articles/blogs written in markdown using [Joplin](https://github.com/laurent22/joplin/ "The best notes app/markdown editor ever made.") then exported as `HTML` to the `/src/public` directory. Joplin has support for [the extended markdown syntax](https://github.com/laurent22/joplin/blob/dev/readme/markdown.md), [KaTeX](https://khan.github.io/KaTeX/), and [Mermaid.js](https://mermaidjs.github.io/) out of the box. The syntax can be farther extended with [plugins](https://github.com/joplin/plugins/) (e.g. [music sheet notation](https://github.com/joplin/plugin-abc-sheet-music)).
|
||||
|
||||
|
|
@ -18,20 +18,8 @@ Install Nim dependencies:
|
|||
nimble install happyx
|
||||
```
|
||||
|
||||
Build website:
|
||||
Development server:
|
||||
|
||||
```sh
|
||||
nim c "src/main.nim"
|
||||
```
|
||||
|
||||
Run HTTP server:
|
||||
|
||||
```sh
|
||||
./main
|
||||
```
|
||||
|
||||
Build debug site and run server using a single command:
|
||||
|
||||
```sh
|
||||
nim c -d:debug -r "src/main.nim"
|
||||
hpx dev --reload
|
||||
```
|
||||
|
|
|
|||
10
happyx.cfg
10
happyx.cfg
|
|
@ -2,7 +2,9 @@
|
|||
|
||||
[Main]
|
||||
projectName = Blog in a Matrix
|
||||
projectType = SSR
|
||||
mainFile = main # main script filename (without extension)
|
||||
srcDir = src # source directory
|
||||
assetsDir = public
|
||||
projectType = SPA
|
||||
mainFile = main # main script filename (without extension) that should be launched with hpx dev command
|
||||
srcDir = src # source directory in project root
|
||||
buildDir = build # build directory in project root
|
||||
assetsDir = public # assets directory in srcDir, will copied into build/public
|
||||
language = nim # programming language
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
8
src/components/glass.nim
Normal file
8
src/components/glass.nim
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
import happyx
|
||||
|
||||
component Glass:
|
||||
arg: string
|
||||
|
||||
`template`:
|
||||
tArticle(class="flex items-center justify-center flex-1 m-14 max-md:m-7 max-sm:m-0 rounded-3xl max-sm:rounded-none bg-white/20 backdrop-blur-xl drop-shadow-lg noise"):
|
||||
{self.arg}
|
||||
14
src/components/nav.nim
Normal file
14
src/components/nav.nim
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import happyx, navButton
|
||||
|
||||
# https://git.inamatrix.xyz/array-in-a-matrix/bloginamatrix.xyz/src/commit/218b85211755732344f3fd08ab4f4a3e01ab08ac/src/templates/index.nimja#L57
|
||||
|
||||
component Nav:
|
||||
`template`:
|
||||
tNav(class="text-center text-white w-64 max-md:w-32 max-sm:w-full bg-black"):
|
||||
tP(class="font-asix"):
|
||||
"Sidebar"
|
||||
|
||||
tUl(class="list-none"):
|
||||
component NavButton("Home", "/")
|
||||
component NavButton("Test Article", "/test")
|
||||
component NavButton("Page does not exist", "/404")
|
||||
11
src/components/navButton.nim
Normal file
11
src/components/navButton.nim
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import happyx
|
||||
|
||||
component NavButton:
|
||||
text: string
|
||||
path: cstring = "/"
|
||||
`template`:
|
||||
tLi(class="list-item cursor-pointer text-white mx-2 my-2 ring-1 ring-white/20 hover:ring-white/50 rounded"):
|
||||
tButton:
|
||||
{self.text}
|
||||
@click:
|
||||
route self.path
|
||||
|
|
@ -1,12 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!DOCTYPE html><html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta charset="utf-8">
|
||||
<title>Blog in a Matrix</title>
|
||||
<!-- begin tailwindcss -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
<!-- <script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
|
|
@ -20,9 +17,9 @@
|
|||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</script> -->
|
||||
<!-- end tailwindcss -->
|
||||
<style>
|
||||
<!-- <style>
|
||||
.noise {
|
||||
background-image: url(data:image/png;base64,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);
|
||||
}
|
||||
|
|
@ -47,35 +44,10 @@
|
|||
font-family: 'giga';
|
||||
src: url("/src/public/fonts/Giga.woff2") format("woff2");
|
||||
}
|
||||
|
||||
</style>
|
||||
</style> -->
|
||||
</head>
|
||||
<body
|
||||
class="flex flex-col min-h-screen m-0 bg-gradient-to-br from-yellow-400 to-green-900"
|
||||
>
|
||||
<main class="flex flex-1 w-full max-sm:flex-col noise">
|
||||
<nav class="text-center text-white w-64 max-md:w-32 max-sm:w-full bg-black">
|
||||
<p class="font-asix">sidebar</p>
|
||||
<ul class="list-none">
|
||||
<li class="list-item cursor-pointer text-white mx-2 my-2 ring-1 ring-white/20 hover:ring-white/50 rounded"><a href="/">Home</a></li>
|
||||
<li class="list-item cursor-pointer text-white mx-2 my-2 ring-1 ring-white/20 hover:ring-white/50 rounded"><a href="/test">test article</a></li>
|
||||
<li class="list-item cursor-pointer text-white mx-2 my-2 ring-1 ring-white/20 hover:ring-white/50 rounded"><a href="/404">article does not exist</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<article class="flex items-center justify-center flex-1 m-14 max-md:m-7 max-sm:m-0 rounded-3xl max-sm:rounded-none bg-white/20 backdrop-blur-xl drop-shadow-lg noise">
|
||||
<section class="w-full">
|
||||
<h1 class="font-giga text-7xl text-center">Blog in a Matrix</h1>
|
||||
|
||||
{% if title == "" %}
|
||||
{% elif title == "404" %}
|
||||
does not exist
|
||||
{% else %}
|
||||
<iframe class="w-full min-h-screen" src="/src/articles/{{title}}.html" seamless></iframe>
|
||||
{% endif %}
|
||||
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
<body class="flex flex-col min-h-screen m-0 bg-gradient-to-br from-yellow-400 to-green-900">
|
||||
<main id="app" class="flex flex-1 w-full max-sm:flex-col noise"></main>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
40
src/main.nim
40
src/main.nim
|
|
@ -1,28 +1,22 @@
|
|||
from os import fileExists
|
||||
import happyx
|
||||
import
|
||||
happyx,
|
||||
path_params,
|
||||
components/[nav, glass]
|
||||
|
||||
# Declare template folder
|
||||
templateFolder("templates")
|
||||
appRoutes("app"):
|
||||
"/":
|
||||
component Nav
|
||||
component Glass("Blog in a Matrix")
|
||||
|
||||
# ? Renders template and returns HTML string
|
||||
proc renderPage(title: string): string =
|
||||
renderTemplate("index.nimja")
|
||||
"/<article>":
|
||||
component Nav
|
||||
component Glass($article)
|
||||
# TODO: pass article title to component which renders the article; modify Glass or a new component is needed
|
||||
# TODO: check if article name exists otherwise route to /404
|
||||
|
||||
# ? Serve at http://127.0.0.1:5000
|
||||
serve("127.0.0.1", 5000):
|
||||
|
||||
get "/":
|
||||
req.answerHtml renderPage("")
|
||||
|
||||
get "/{article}":
|
||||
req.answerHtml renderPage(article)
|
||||
|
||||
middleware:
|
||||
echo req
|
||||
"/<errorCode>":
|
||||
component Nav
|
||||
component Glass("HTTP Error: " & $errorCode)
|
||||
|
||||
notfound:
|
||||
return renderPage("404")
|
||||
|
||||
# make base articles and assets publicly accessible
|
||||
staticDir "src/articles"
|
||||
staticDir "src/public"
|
||||
route "/404"
|
||||
5
src/path_params.nim
Normal file
5
src/path_params.nim
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import happyx
|
||||
|
||||
pathParams:
|
||||
article string
|
||||
errorCode int
|
||||
Loading…
Add table
Reference in a new issue