Basic pages
parent
f762f817d5
commit
404c7e6d83
|
@ -3,3 +3,4 @@
|
||||||
/data
|
/data
|
||||||
*.code-workspace
|
*.code-workspace
|
||||||
.vscode/settings.json
|
.vscode/settings.json
|
||||||
|
/frontend/public/img/.dev
|
|
@ -1,3 +1,9 @@
|
||||||
# yet-another-blog
|
# yet-another-blog
|
||||||
|
|
||||||
A open source blogging website made for both personal blogs and big projects.
|
A open source blogging website made for both personal blogs and big projects.
|
||||||
|
|
||||||
|
TODO
|
||||||
|
Setup instructions
|
||||||
|
Database
|
||||||
|
S3
|
||||||
|
Admin settings
|
||||||
|
|
|
@ -9,13 +9,21 @@ async function index(request, response) {
|
||||||
|
|
||||||
response.render("index.ejs", { user: request.session.user || null, website_name: process.env.WEBSITE_NAME });
|
response.render("index.ejs", { user: request.session.user || null, website_name: process.env.WEBSITE_NAME });
|
||||||
}
|
}
|
||||||
|
|
||||||
function register(request, response) {
|
function register(request, response) {
|
||||||
response.render("register.ejs", { user: request.session.user || null, website_name: process.env.WEBSITE_NAME });
|
response.render("register.ejs", { user: request.session.user || null, website_name: process.env.WEBSITE_NAME });
|
||||||
}
|
}
|
||||||
function login(request, response) {
|
function login(request, response) {
|
||||||
response.render("login.ejs", { user: request.session.user || null, website_name: process.env.WEBSITE_NAME });
|
response.render("login.ejs", { user: request.session.user || null, website_name: process.env.WEBSITE_NAME });
|
||||||
}
|
}
|
||||||
|
function author(request, response) {
|
||||||
|
response.render("author.ejs", { user: request.session.user || null, website_name: process.env.WEBSITE_NAME });
|
||||||
|
}
|
||||||
|
function blogList(request, response) {
|
||||||
|
response.render("blogList.ejs", { user: request.session.user || null, website_name: process.env.WEBSITE_NAME });
|
||||||
|
}
|
||||||
|
function blogNew(request, response) {
|
||||||
|
response.render("blogNew.ejs", { user: request.session.user || null, website_name: process.env.WEBSITE_NAME });
|
||||||
|
}
|
||||||
async function admin(request, response) {
|
async function admin(request, response) {
|
||||||
const reg_allowed = await settings.userRegistrationAllowed();
|
const reg_allowed = await settings.userRegistrationAllowed();
|
||||||
response.render("admin.ejs", { user: request.session.user || null, website_name: process.env.WEBSITE_NAME, settings: { registration_enabled: reg_allowed } });
|
response.render("admin.ejs", { user: request.session.user || null, website_name: process.env.WEBSITE_NAME, settings: { registration_enabled: reg_allowed } });
|
||||||
|
@ -45,4 +53,4 @@ async function settingPost(request, response) {
|
||||||
|
|
||||||
response.json({ success: true });
|
response.json({ success: true });
|
||||||
}
|
}
|
||||||
module.exports = { index, register, login, admin, registerPost, loginPost, settingPost };
|
module.exports = { index, register, login, author, blogList, blogNew, admin, registerPost, loginPost, settingPost };
|
||||||
|
|
|
@ -0,0 +1,53 @@
|
||||||
|
.blog-admin {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #222;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.blog-admin .horizontal-button-container a {
|
||||||
|
background-color: #00367b;
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 5px 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-entry {
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 150px auto;
|
||||||
|
grid-gap: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.blog-entry .thumbnail {
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
.blog-entry .thumbnail img {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.blog-entry .blog-info .blog-title {
|
||||||
|
font-size: 20px;
|
||||||
|
border-bottom: 1px solid #9f9f9f;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.blog-entry .blog-info .blog-title a {
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.blog-entry .blog-info .blog-title .author {
|
||||||
|
color: #9f9f9f;
|
||||||
|
font-style: italic;
|
||||||
|
margin-left: auto;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.blog-entry .blog-info .blog-description {
|
||||||
|
color: #9f9f9f;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-entry:last-of-type {
|
||||||
|
margin-bottom: inherit;
|
||||||
|
}
|
|
@ -0,0 +1,63 @@
|
||||||
|
$quiet-text: #9f9f9f;
|
||||||
|
|
||||||
|
.blog-admin {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #222;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.horizontal-button-container {
|
||||||
|
a {
|
||||||
|
background-color: #00367b;
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 5px 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-entry {
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 150px auto;
|
||||||
|
grid-gap: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
.thumbnail {
|
||||||
|
width: 150px;
|
||||||
|
img {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-info {
|
||||||
|
.blog-title {
|
||||||
|
font-size: 20px;
|
||||||
|
border-bottom: 1px solid $quiet-text;
|
||||||
|
display: flex;
|
||||||
|
a {
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author {
|
||||||
|
color: $quiet-text;
|
||||||
|
font-style: italic;
|
||||||
|
margin-left: auto;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.blog-description {
|
||||||
|
color: $quiet-text;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-entry:last-of-type {
|
||||||
|
margin-bottom: inherit;
|
||||||
|
}
|
|
@ -0,0 +1,107 @@
|
||||||
|
.e-header {
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 150px auto;
|
||||||
|
background-color: #222;
|
||||||
|
padding: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
grid-gap: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.e-header .e-thumbnail {
|
||||||
|
height: 150px;
|
||||||
|
}
|
||||||
|
.e-header .e-thumbnail img {
|
||||||
|
height: 100%;
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
.e-header .e-description {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.e-header .e-description input {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.e-header .e-description textarea {
|
||||||
|
color: #ccc;
|
||||||
|
font-size: 16px;
|
||||||
|
width: 100%;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-image-area {
|
||||||
|
background-color: #222;
|
||||||
|
height: 220px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
|
||||||
|
grid-template-rows: auto auto;
|
||||||
|
padding: 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.e-image-area .image {
|
||||||
|
height: 100px;
|
||||||
|
aspect-ratio: 16/9;
|
||||||
|
margin: auto;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.e-image-area .image img {
|
||||||
|
height: 100%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
.e-image-area .image:nth-child(odd) {
|
||||||
|
grid-row: span 1;
|
||||||
|
grid-column: 1;
|
||||||
|
}
|
||||||
|
.e-image-area .image:nth-child(even) {
|
||||||
|
grid-row: span 1;
|
||||||
|
grid-column: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-content {
|
||||||
|
background-color: #222;
|
||||||
|
padding: 5px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.e-content textarea {
|
||||||
|
font-size: 16px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-settings {
|
||||||
|
height: 40px;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #222;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
padding: 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.e-settings .publish-date {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.e-settings .publish-date div {
|
||||||
|
margin: auto 10px auto auto;
|
||||||
|
}
|
||||||
|
.e-settings .publish-date input {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.e-settings input,
|
||||||
|
.e-settings textarea {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
border: 0;
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
font-size: 18px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
|
@ -0,0 +1,118 @@
|
||||||
|
$background-body: #222;
|
||||||
|
|
||||||
|
.e-header {
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 150px auto;
|
||||||
|
background-color: $background-body;
|
||||||
|
padding: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
grid-gap: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
.e-thumbnail {
|
||||||
|
height: 150px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 100%;
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-description {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
input {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
color: #ccc;
|
||||||
|
font-size: 16px;
|
||||||
|
width: 100%;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-image-area {
|
||||||
|
background-color: $background-body;
|
||||||
|
height: 220px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
|
||||||
|
grid-template-rows: auto auto;
|
||||||
|
padding: 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
.image {
|
||||||
|
height: 100px;
|
||||||
|
aspect-ratio: 16/9;
|
||||||
|
margin: auto;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 100%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.image:nth-child(odd) {
|
||||||
|
grid-row: span 1;
|
||||||
|
grid-column: 1;
|
||||||
|
}
|
||||||
|
.image:nth-child(even) {
|
||||||
|
grid-row: span 1;
|
||||||
|
grid-column: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-content {
|
||||||
|
background-color: $background-body;
|
||||||
|
padding: 5px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
textarea {
|
||||||
|
font-size: 16px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.e-settings {
|
||||||
|
height: 40px;
|
||||||
|
width: 100%;
|
||||||
|
background-color: $background-body;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
padding: 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.publish-date {
|
||||||
|
display: flex;
|
||||||
|
div {
|
||||||
|
margin: auto 10px auto auto;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
textarea {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
border: 0;
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
font-size: 18px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
|
@ -0,0 +1,21 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="/css/index.css" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="/css/theme.css" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="/css/blog-list.css" />
|
||||||
|
<script src="/js/generic.js"></script>
|
||||||
|
<title><%= website_name %> | Author</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<%- include("partials/header.ejs", {selected: 'home'}) %>
|
||||||
|
|
||||||
|
<div class="page"></div>
|
||||||
|
|
||||||
|
<%- include("partials/footer.ejs") %>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
<script defer src="/js/login.js"></script>
|
|
@ -0,0 +1,24 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="/css/index.css" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="/css/theme.css" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="/css/blog-list.css" />
|
||||||
|
<script src="/js/generic.js"></script>
|
||||||
|
<title><%= website_name %> | Home</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<%- include("partials/header.ejs", {selected: 'home'}) %>
|
||||||
|
|
||||||
|
<div class="page">
|
||||||
|
<%- include("partials/blog-admin.ejs") %> <%- include("partials/blog-entry.ejs", {thumbnail: '/img/.dev/square.png', title: 'Title', description:
|
||||||
|
'Description', author: 'Author'}) %>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<%- include("partials/footer.ejs") %>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
<script defer src="/js/login.js"></script>
|
|
@ -0,0 +1,48 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="/css/new-blog.css" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="/css/theme.css" />
|
||||||
|
<script src="/js/generic.js"></script>
|
||||||
|
<title><%= website_name %> | New Blog</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<%- include("partials/header.ejs", {selected: 'home'}) %>
|
||||||
|
|
||||||
|
<div class="page">
|
||||||
|
<div class="e-header">
|
||||||
|
<div class="e-thumbnail">
|
||||||
|
<img src="/img/.dev/square.png" />
|
||||||
|
</div>
|
||||||
|
<div class="e-description">
|
||||||
|
<input type="text" placeholder="Title..." />
|
||||||
|
<textarea placeholder="Description..."></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="e-image-area">
|
||||||
|
<div class="image">
|
||||||
|
<img src="/img/.dev/screenshot.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="e-content">
|
||||||
|
<textarea placeholder="Tell us about your subject..."></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="e-settings">
|
||||||
|
<div class="publish-date">
|
||||||
|
<div>Publish On</div>
|
||||||
|
<input type="date" value="2023-09-26" />
|
||||||
|
<input type="time" value="13:00" step="3600" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<%- include("partials/footer.ejs") %>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
<script defer src="/js/login.js"></script>
|
|
@ -5,13 +5,16 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link rel="stylesheet" type="text/css" href="/css/index.css" />
|
<link rel="stylesheet" type="text/css" href="/css/index.css" />
|
||||||
<link rel="stylesheet" type="text/css" href="/css/theme.css" />
|
<link rel="stylesheet" type="text/css" href="/css/theme.css" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="/css/blog-list.css" />
|
||||||
<script src="/js/generic.js"></script>
|
<script src="/js/generic.js"></script>
|
||||||
<title><%= website_name %> | Home</title>
|
<title><%= website_name %> | Home</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<%- include("partials/header.ejs", {selected: 'home'}) %>
|
<%- include("partials/header.ejs", {selected: 'home'}) %>
|
||||||
|
|
||||||
<div class="page"></div>
|
<div class="page">
|
||||||
|
<%- include("partials/blog-entry.ejs", {thumbnail: '/img/.dev/square.png', title: 'Title', description: 'Description', author: 'Author'}) %>
|
||||||
|
</div>
|
||||||
|
|
||||||
<%- include("partials/footer.ejs") %>
|
<%- include("partials/footer.ejs") %>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
<div class="blog-admin">
|
||||||
|
<div class="horizontal-button-container">
|
||||||
|
<a href="/blog/new">New Post</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -0,0 +1,9 @@
|
||||||
|
<div class="blog-entry">
|
||||||
|
<a src="#" class="thumbnail">
|
||||||
|
<img src="<%= thumbnail %>" />
|
||||||
|
</a>
|
||||||
|
<div class="blog-info">
|
||||||
|
<div class="blog-title"><a href="#"><%= title %></a> <a href="#" class="author">By: <%= author %></a></div>
|
||||||
|
<div class="blog-description"><%= description %></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
5
yab.js
5
yab.js
|
@ -43,7 +43,7 @@ app.post("/register", checkNotAuthenticated, page_scripts.registerPost);
|
||||||
|
|
||||||
// Account Required Endpoints
|
// Account Required Endpoints
|
||||||
app.post("/setting", checkAuthenticated, page_scripts.settingPost);
|
app.post("/setting", checkAuthenticated, page_scripts.settingPost);
|
||||||
// app.get("/blog/new", checkAuthenticated, page_scripts.blogNew);
|
app.get("/blog/new", checkAuthenticated, page_scripts.blogNew);
|
||||||
// app.post("/blog", checkAuthenticated, page_scripts.postBlog);
|
// app.post("/blog", checkAuthenticated, page_scripts.postBlog);
|
||||||
// app.delete("/logout", page_scripts.logout);
|
// app.delete("/logout", page_scripts.logout);
|
||||||
|
|
||||||
|
@ -52,8 +52,9 @@ app.post("/setting", checkAuthenticated, page_scripts.settingPost);
|
||||||
|
|
||||||
// Endpoints
|
// Endpoints
|
||||||
app.get("/", page_scripts.index);
|
app.get("/", page_scripts.index);
|
||||||
|
app.get("/author/:author_username", page_scripts.author);
|
||||||
app.get("/admin", checkAuthenticated, page_scripts.admin);
|
app.get("/admin", checkAuthenticated, page_scripts.admin);
|
||||||
// app.get("/blog", page_scripts.blogList);
|
app.get("/blog", page_scripts.blogList);
|
||||||
// app.get("/blog/:id", page_scripts.blogSingle);
|
// app.get("/blog/:id", page_scripts.blogSingle);
|
||||||
// app.get("/projects", page_scripts.projectList);
|
// app.get("/projects", page_scripts.projectList);
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue