raymon
/
Personal-Website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'replacejs/posts' into beta

Browse Source
master
Raymonzut 4 years ago
parent 1ba2a430fe 6c67113227
commit 0850426683
No known key found for this signature in database
GPG Key ID: 1E9BCC39EDD1DD53
11 changed files with 127 additions and 128 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      client/nginx.conf
  2. 2
      client/public/.gitignore
  3. 6
      client/public/assets/styling/general.css
  4. 0
      client/public/gen/.gitkeep
  5. 49
      client/public/gen_posts.ex
  6. 24
      client/public/lib/remote.mjs
  7. 42
      client/public/posts.html
  8. 61
      client/public/posts.mjs
  9. 0
      client/public/posts/.gitkeep
  10. 31
      client/public/templates/index.html
  11. 36
      client/public/templates/post.html

4
client/nginx.conf
Unescape View File

@ -33,6 +33,10 @@ http {
alias /app/lib; alias /app/lib;
} }
location /posts {
alias /app/gen/;
}
location /api { location /api {
proxy_pass https://raymon.dev/api; proxy_pass https://raymon.dev/api;
proxy_buffering on; proxy_buffering on;

2
client/public/.gitignore vendored
Unescape View File

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

6
client/public/assets/styling/general.css
Unescape View File

@ -21,8 +21,12 @@ nav {
font-style: italic; font-style: italic;
} }
h1 {
font-size: 2.0em;
}
h2 { h2 {
font-size: 0.6em; font-size: 1.25em;
margin: auto 0; margin: auto 0;
} }

0
client/public/gen/.gitkeep
Unescape View File

49
client/public/gen_posts.ex
Unescape View File

@ -0,0 +1,49 @@
# Templates will be filled by posts
index_template = File.read!("./templates/index.html")
post_template = File.read!("./templates/post.html")
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)

24
client/public/lib/remote.mjs
Unescape View File

@ -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}`)
})
}

42
client/public/posts.html
Unescape View File

@ -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>

61
client/public/posts.mjs
Unescape View File

@ -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("h2")
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()

0
client/public/posts/.gitkeep
Unescape View File

31
client/public/templates/index.html
Unescape View File

@ -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>

36
client/public/templates/post.html
Unescape View File

@ -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="/api/posts/rss.xml">rss.xml</a></h3>
</header>
<time datetime="{{date}}"></time>
{{content}}
</article>
</main>
</body>
</html>
Write Preview
Loading…
Cancel
Save