Merge branch 'beta' into master

master c3.0.0
Raymonzut 4 years ago
commit 90eff2d619
No known key found for this signature in database
GPG Key ID: 1E9BCC39EDD1DD53
  1. 5
      client/nginx.conf
  2. 2
      client/public/.gitignore
  3. 9
      client/public/assets/styling/general.css
  4. 69
      client/public/gen.ex
  5. 0
      client/public/gen/.gitkeep
  6. 3
      client/public/index.html
  7. 10
      client/public/lib/me.mjs
  8. 24
      client/public/lib/remote.mjs
  9. 42
      client/public/posts.html
  10. 61
      client/public/posts.mjs
  11. 0
      client/public/posts/.gitkeep
  12. 2
      client/public/qa.html
  13. 31
      client/public/templates/post_index_page.html
  14. 14
      client/public/templates/post_item.xml
  15. 36
      client/public/templates/post_single_page.html
  16. 12
      client/public/templates/posts.xml
  17. 3
      docker-compose.yml
  18. 2
      server/.dockerignore
  19. 13
      server/Dockerfile
  20. 23
      server/index.js
  21. 1315
      server/package-lock.json
  22. 20
      server/package.json
  23. 1
      server/posts/.gitignore
  24. 6
      server/posts/.gitkeep
  25. 93
      server/routes/api/posts.js

@ -33,9 +33,8 @@ http {
alias /app/lib; alias /app/lib;
} }
location /api { location /posts {
proxy_pass https://raymon.dev/api; alias /app/gen/;
proxy_buffering on;
} }
error_page 404 /404.html; error_page 404 /404.html;

@ -0,0 +1,2 @@
posts/*
gen/*

@ -21,6 +21,15 @@ nav {
font-style: italic; font-style: italic;
} }
h1 {
font-size: 2.0em;
}
h2 {
font-size: 1.25em;
margin: auto 0;
}
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
:root { :root {
--primary-color: #ffffeb; --primary-color: #ffffeb;

@ -0,0 +1,69 @@
# Templates will be filled by posts
index_template = File.read!("./templates/post_index_page.html")
post_template = File.read!("./templates/post_single_page.html")
post_feed_item_template = File.read!("./templates/post_item.xml")
post_feed_template = File.read!("./templates/posts.xml")
post_contents = File.ls!("./posts")
|> Enum.reject(fn(x) -> String.starts_with?(x, ".") end)
|> Enum.map(fn f -> File.read!("./posts/" <> f) end)
|> Enum.map(fn c -> String.split(c, "\n") end)
|> Enum.map(fn c -> Enum.reject(c, fn(x) -> x == "" end) end)
|> Enum.map(fn c -> Enum.chunk_every(c, 2) end)
|> Enum.map(fn c ->
Enum.map(c, fn [k, v] -> %{String.to_atom(k) => v} end)
|> Enum.reduce(%{}, fn(x, acc) -> Map.merge(x, acc) end)
end)
index_file = post_contents
|> Enum.sort_by(fn m -> Map.get(m, :date) end)
|> Enum.reverse()
# Group by month
|> Enum.group_by(fn m -> Map.get(m, :date) |> String.slice(0..6) end)
|> Enum.reverse()
|> Enum.map(fn {month, posts} -> "\n<h1>" <> month <> "</h1>\n" <> (posts |>
Enum.map(fn post -> "<h2>" <> (Map.get(post, :date) |> String.slice(0..9)) <>
" - <a href=\"" <> Map.get(post, :id) <> ".html\">" <> Map.get(post, :title) <> "</a></h2>"
end) |> Enum.join("\n")) end)
|> (fn template -> Regex.replace(Regex.compile!("{{index}}"), index_template, fn _, __ -> template end) end).()
File.open!("./gen/index.html", [:write])
|> IO.binwrite(index_file)
|> File.close()
post_contents
|> Enum.each(fn post ->
File.open!("./gen/" <> Map.get(post, :id) <> ".html", [:write])
|> IO.binwrite(
# Converting handlebars to values
Regex.compile!("{{(.*)}}") |>
Regex.replace(post_template, fn _, key -> if key != "content" do Map.get(post, String.to_atom(key)) else
Map.get(post, String.to_atom(key))
# Converting \n to paragraphs
|> String.split("\\n")
|> Enum.reject(fn(x) -> x == "" end)
|> Enum.map(fn paragraph -> ("<p>" <> paragraph <> "</p>\n") end)
|> Enum.join("")
end
end))
|> File.close()
end)
post_feed = post_contents
|> Enum.sort_by(fn m -> Map.get(m, :date) end)
|> Enum.reverse()
|> Enum.map(fn post ->
Regex.compile!("{{(.*)}}") |>
Regex.replace(post_feed_item_template, fn _, key -> Map.get(post, String.to_atom(key))
end)
end)
|> Enum.join("\n")
|> (fn items -> (Regex.compile!("{{items}}") |>
Regex.replace(post_feed_template, fn _, __ -> items end))
end).()
File.open!("./gen/rss.xml", [:write])
|> IO.binwrite(post_feed)
|> File.close()

@ -17,7 +17,7 @@
href="https://cdn.statically.io/gh/dragonprojects/dragondesign/master/main.min.css" href="https://cdn.statically.io/gh/dragonprojects/dragondesign/master/main.min.css"
media="all" media="all"
> >
<link defer rel="stylesheet" href="css/general.css" media="all"> <link defer rel="stylesheet" href="/css/general.css" media="all">
</head> </head>
<body> <body>
@ -30,7 +30,6 @@
<h1>Home</h1> <h1>Home</h1>
<div> <div>
<h2>Who am I?</h2>
<p> <p>
Hi there, good to see you on my website. Hi there, good to see you on my website.
My name is Raymon Zutekouw (<span id="age">born on 29-08-2002</span>) My name is Raymon Zutekouw (<span id="age">born on 29-08-2002</span>)

@ -1,17 +1,17 @@
export function age() { export function age() {
let birthdate = new Date(2002, 8, 29) let birthdate = new Date("29 August 2002")
let now = new Date() let now = new Date()
let age = now.getFullYear() - birthdate.getFullYear() let age = now.getFullYear() - birthdate.getFullYear()
if (now.getMonth() < birthdate.getMonth()) { if (now.getMonth() < birthdate.getMonth())
age-- age--
}
if ( if (
birthdate.getMonth() === now.getMonth() && birthdate.getMonth() === now.getMonth() &&
now.getDate() < birthdate.getDate() now.getDate() < birthdate.getDate()
) { )
age-- age--
}
return age return age
} }

@ -1,24 +0,0 @@
export async function getPosts(id) {
const BASE_URL = 'https://raymon.dev'
const BASE_ENDPOINT = '/api/posts'
const URL = BASE_URL + BASE_ENDPOINT + (id ? `/${id}` : '?sort=-1')
let posts = []
return await fetch(URL)
.then(res => res.json())
.then(res => {
if (id !== undefined) {
if (res === undefined) {
throw Error("Response body empty")
}
return [res]
}
else {
return res
}
})
.catch(err => {
console.log(`Error: ${err}`)
})
}

@ -1,42 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="description"
content="Raymon typing nonsense on his blog">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Raymon Zutekouw</title>
<link rel="preload" href="./lib/remote.mjs" as="script" crossorigin="anonymous" type="application/javascript">
<link rel="preload" href="posts.mjs" as="script" crossorigin="anonymous" type="application/javascript">
<link defer
rel="stylesheet"
href="https://cdn.statically.io/gh/dragonprojects/dragondesign/master/main.min.css"
media="all"
>
<link defer rel="stylesheet" href="css/general.css" media="all">
</head>
<body>
<noscript>
<p>
This page isn't as fancy without JavaScript.
Some parts will not load, but this will be minimal.
</p>
</noscript>
<div id="app">
<nav>
<a href="/">Home</a>|
<a href="/posts">Posts</a>|
<a href="/qa">QA</a>
</nav>
<h3>For those using a RSS reader, subscribe here: <a href="/api/posts/rss.xml">rss.xml</a></h3>
<!-- Placeholder for posts -->
<div id="posts"></div>
<script async type="module" src="posts.mjs"></script>
</div>
</body>
</html>

@ -1,61 +0,0 @@
import { getPosts } from "./lib/remote.mjs"
function toMonthYearString(str) {
const date = new Date(str)
return `${date.toLocaleString('default', { month: 'long' })} ${date.getFullYear()}`
}
async function showPost(id) {
const post_list = await getPosts(id)
const post = post_list[0]
const title = document.createElement("h1")
title.textContent = post.title
const postsDOM = document.getElementById("posts")
postsDOM.appendChild(title)
post.content.split('\n').forEach(paragraph => {
const p = document.createElement("p")
p.innerHTML = paragraph
postsDOM.appendChild(p)
});
}
async function updatePosts() {
const posts = await getPosts()
const months = posts.map(post => toMonthYearString(post.date))
const uniques = Array.from(new Set(posts.map(post => toMonthYearString(post.date))))
const month_lists = uniques.map(month =>
posts.filter(
post => toMonthYearString(post.date) === month
)
)
const postsDOM = document.getElementById("posts")
uniques.forEach((month, i) => {
const month_DOM = document.createElement("h1")
month_DOM.textContent = month
month_lists[i].forEach((post, i) => {
const post_DOM = document.createElement("h6")
post_DOM.textContent = `${post.date.substring(0, 10)} - `
const post_link = document.createElement("a")
post_link.href = 'posts?post=' + post._id
post_link.textContent = post.title
post_DOM.appendChild(post_link)
month_DOM.appendChild(post_DOM)
})
postsDOM.appendChild(month_DOM)
})
}
// Check if a specific post is requested
let url = new URL(document.location.href);
url.searchParams.sort();
let post_id = url.searchParams.values().next().value;
const reg = /([0-9]|[a-f]){24}/
if (post_id && reg.test(post_id)) showPost(post_id)
else updatePosts()

@ -13,7 +13,7 @@
href="https://cdn.statically.io/gh/dragonprojects/dragondesign/master/main.min.css" href="https://cdn.statically.io/gh/dragonprojects/dragondesign/master/main.min.css"
media="all" media="all"
> >
<link defer rel="stylesheet" href="css/general.css" media="all"> <link defer rel="stylesheet" href="/css/general.css" media="all">
</head> </head>
<body> <body>

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="description"
content="Raymon typing nonsense on his blog">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Raymon Zutekouw</title>
<link defer
rel="stylesheet"
href="https://cdn.statically.io/gh/dragonprojects/dragondesign/master/main.min.css"
media="all"
>
<link defer rel="stylesheet" href="/css/general.css" media="all">
</head>
<body>
<main>
<nav>
<a href="/">Home</a>|
<a href="/posts">Posts</a>|
<a href="/qa">QA</a>
</nav>
<header>
<h1>Post listing</h1>
</header>
{{index}}
</main>
</body>
</html>

@ -0,0 +1,14 @@
<item>
<title>{{title}}</title>
<link>https://raymon.dev/posts/{{id}}.html</link>
<guid>https://raymon.dev/posts/{{id}}.html</guid>
<description>
<![CDATA[
{{content}}
]]>
</description>
<content type="html">
{{content}}
</content>
<pubDate>{{date}}</pubDate>
</item>

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="description"
content="Raymon typing nonsense on his blog">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Raymon Zutekouw</title>
<link defer
rel="stylesheet"
href="https://cdn.statically.io/gh/dragonprojects/dragondesign/master/main.min.css"
media="all"
>
<link defer rel="stylesheet" href="/css/general.css" media="all">
</head>
<body>
<main>
<nav>
<a href="/">Home</a>|
<a href="/posts">Posts</a>|
<a href="/qa">QA</a>
</nav>
<article>
<header>
<h1>{{title}}</h1>
<h3>For those using a RSS reader, subscribe here: <a href="/posts/rss.xml">rss.xml</a></h3>
</header>
<time datetime="{{date}}"></time>
{{content}}
</article>
</main>
</body>
</html>

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<atom:link href="https://raymon.dev/api/posts/rss.xml" rel="self" type="application/rss+xml" />
<title>Posts</title>
<link>https://raymon.dev</link>
<description>Personal blog</description>
<language>en-us</language>
{{items}}
</channel>
</rss>

@ -1,3 +0,0 @@
version: '3'
services:

@ -1,2 +0,0 @@
**/node_modules
**/dist

@ -1,13 +0,0 @@
FROM node:latest
WORKDIR /usr/src/server
COPY package*.json ./
RUN npm ci --only=production
COPY . .
CMD [ "node", "index.js" ]
EXPOSE 5000

@ -1,23 +0,0 @@
const fastify = require('fastify')()
fastify.register(require('fastify-cors'))
const posts = require('./routes/api/posts')
// Assuming they are all get requests
for (let [route, resolver] of posts.entries()) {
fastify.get('/posts' + route, resolver)
}
const port = process.env.PORT || 5000
const start = async () => {
try {
await fastify.listen(port, '0.0.0.0')
console.log(`Launched on port ${port} 🚀`)
} catch (err) {
fastify.log.error(err)
process.exit(1)
}
}
start()

File diff suppressed because it is too large Load Diff

@ -1,20 +0,0 @@
{
"name": "server",
"version": "1.3.0",
"description": "The API for the website",
"main": "index.js",
"scripts": {
"start": "node ./index.js",
"dev": "nodemon server/index.js"
},
"keywords": [],
"author": "Raymonzut",
"license": "ISC",
"dependencies": {
"fastify": "^2.15.1",
"fastify-cors": "^3.0.3"
},
"devDependencies": {
"nodemon": "^2.0.4"
}
}

@ -1 +0,0 @@
*.json

@ -1,6 +0,0 @@
All the posts will be in here seperate in JSON format
post
- title
- date
- content

@ -1,93 +0,0 @@
const fs = require('fs')
const posts_dir = 'posts/'
const routes = new Map();
if (!fs.existsSync(posts_dir)) throw Error(`Missing ${posts_dir}`)
let posts = readPosts();
setInterval(() => posts = readPosts(), 1000 * 60 * 60)
function readPosts() {
console.warn("reading all posts")
const files = fs.readdirSync(posts_dir)
if (files.length === 0) throw Error(`Could not find posts in ${posts_dir}`)
return files.filter(file_name => file_name.endsWith('.json'))
.map(file_name => `${posts_dir}${file_name}`)
.map(readJSONAsObject)
}
function readJSONAsObject(filename) {
return JSON.parse(fs.readFileSync(filename, 'utf8'))
}
function notFoundResponse(res) {
res.status(404).send('Sorry, can not find that')
}
routes.set('', async (req, res) => {
if (req.query.sort === '-1' || req.query.sort === '1') {
const posts_sorted = posts.sort((a, b) => {
return new Date(a.date).getTime() - new Date(b.date).getTime()
})
if (req.query.sort === '1') res.send(posts_sorted)
else res.send(posts_sorted.reverse())
return
}
// Default response when there are no interesting queries
res.send(posts)
})
routes.set('/:id', async (req, res) => {
const re = /[0-9A-Fa-f]{24}/g
if (!re.test(req.params.id)) {
notFoundResponse(res)
return
}
const results = posts.filter(post => post._id === req.params.id)
if (!results.length) notFoundResponse(res)
else res.send(results[0])
})
// Dynamic RSS feed
routes.set('/rss.xml', async (req, res) => {
const re = /(\/api\/)?(.*)\/rss/g
const result = [...req.raw.originalUrl.matchAll(re)]
if (!result) {
notFoundResponse(res)
return
}
const endpoint = result [1] ? result[1][2] : result[0][2]
// Assumes https
const BASE_URL = 'https://' + req.raw.hostname + endpoint
const ITEMS = posts.map(post =>
`\r\n <item>
<title>${post.title}</title>
<link>https://${req.raw.hostname}/posts?post=${post._id}</link>
<guid>https://${req.raw.hostname}/posts?post=${post._id}</guid>
<description>${post.content}</description>
</item>`
).join("\n")
const xml = `<?xml version="1.0" encoding="UTF-8" ?>\n<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<atom:link href="https://${req.raw.hostname}/api/posts/rss.xml" rel="self" type="application/rss+xml" />
<title>Posts</title>
<link>https://${req.raw.hostname}</link>
<description>Personal blog</description>
<language>en-us</language>
${ITEMS}
</channel>\n</rss>`
res.header('Content-Type', 'application/xml')
res.status(200).send(xml)
})
module.exports = routes
Loading…
Cancel
Save