Add demo
This commit is contained in:
@@ -0,0 +1,67 @@
|
||||
include "pages/page.wl"
|
||||
|
||||
let posts = $query("SELECT P.id, P.title, P.is_link, P.content, (SELECT COUNT(*) FROM Comments as C WHERE c.parent_post=P.id) as num_comments, CURRENT_TIMESTAMP as date FROM Posts as P")
|
||||
|
||||
if posts == none:
|
||||
posts = []
|
||||
|
||||
let style =
|
||||
<style>
|
||||
.item {
|
||||
overflow: auto;
|
||||
border-bottom: 1px solid #E8D4A9;
|
||||
font-size: 14px;
|
||||
}
|
||||
.item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.item span {
|
||||
color: #7A5F2A;
|
||||
text-decoration: none;
|
||||
}
|
||||
.item div {
|
||||
color: #E8D4A9;
|
||||
float: left
|
||||
}
|
||||
.item div:first-child {
|
||||
width: calc(100% - 250px);
|
||||
}
|
||||
.item div:last-child {
|
||||
width: 250px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#no-posts {
|
||||
margin: 60px auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #7A5F2A;
|
||||
}
|
||||
</style>
|
||||
|
||||
let main =
|
||||
<main>
|
||||
|
||||
\if len(posts) == 0:
|
||||
<div id="no-posts">There are no posts yet!</div>
|
||||
|
||||
\for post in posts: {
|
||||
|
||||
let link
|
||||
if post.is_link != 0:
|
||||
link = post.content
|
||||
else
|
||||
link = ["/post?id=", post.id]
|
||||
|
||||
<div class="item">
|
||||
<div>
|
||||
<a href=\'"'\link\'"'>\escape(post.title)</a>
|
||||
</div>
|
||||
<div>
|
||||
<span>\escape(post.date)</span> | <span>\escape(post.num_comments) comments</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</main>
|
||||
|
||||
page("Index", $login_user_id, style, main)
|
||||
@@ -0,0 +1,22 @@
|
||||
include "pages/page.wl"
|
||||
include "pages/login_and_signup_style.wl"
|
||||
|
||||
let main =
|
||||
<main>
|
||||
<span>Welcome back!</span>
|
||||
|
||||
<div id="response"></div>
|
||||
|
||||
<form hx-post="/api/login" hx-target="#response">
|
||||
<input type="text" name="username" placeholder="username" />
|
||||
<input type="password" name="password" placeholder="password" />
|
||||
<input type="submit" value="Log-In" />
|
||||
<div class="form-links">
|
||||
<a href="">forgot password?</a>
|
||||
|
|
||||
<a href="">create account</a>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
page("Log-In", none, style, main)
|
||||
@@ -0,0 +1,74 @@
|
||||
let style =
|
||||
<style>
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
color: #1D2B42;
|
||||
font-size: 18px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
form {
|
||||
max-width: 300px;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
form input {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
padding: 8px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
form input[type=text],
|
||||
form input[type=email],
|
||||
form input[type=password] {
|
||||
background: #E8D4A9;
|
||||
border: 1px solid #D4C298;
|
||||
}
|
||||
|
||||
form input[type=text]:focus,
|
||||
form input[type=email]:focus,
|
||||
form input[type=password]:focus {
|
||||
border-color: #5780C9;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
form input[type=submit] {
|
||||
cursor: pointer;
|
||||
background: #5780C9;
|
||||
color: #F7E6C0;
|
||||
}
|
||||
|
||||
form input[type=submit]:hover {
|
||||
background: #1D2B42;
|
||||
}
|
||||
|
||||
.form-links {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
.form-links a {
|
||||
color: #7A5F2A;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.form-links a:hover {
|
||||
color: #1D2B42;
|
||||
}
|
||||
|
||||
#response {
|
||||
max-width: 300px;
|
||||
margin: auto;
|
||||
}
|
||||
#response .error {
|
||||
margin-top: 30px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #E44C82;
|
||||
background: #F295B5;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,60 @@
|
||||
include "pages/page.wl"
|
||||
|
||||
let style =
|
||||
<style>
|
||||
.not-found-container {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
}
|
||||
.error-code {
|
||||
font-size: 72px;
|
||||
font-weight: bold;
|
||||
color: #7A5F2A;
|
||||
margin-bottom: 20px;
|
||||
line-height: 100%;
|
||||
}
|
||||
.error-message {
|
||||
font-size: 24px;
|
||||
color: #1D2B42;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.error-description {
|
||||
font-size: 14px;
|
||||
color: #7A5F2A;
|
||||
margin-bottom: 40px;
|
||||
max-width: 500px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
line-height: 160%;
|
||||
}
|
||||
|
||||
.home-button {
|
||||
display: inline-block;
|
||||
background: #5780C9;
|
||||
color: #F7E6C0;
|
||||
padding: 12px 24px;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.home-button:hover {
|
||||
background: #1D2B42;
|
||||
color: #F7E6C0;
|
||||
}
|
||||
</style>
|
||||
|
||||
let main =
|
||||
<main>
|
||||
<div class="not-found-container">
|
||||
<div class="error-code">404</div>
|
||||
<div class="error-message">Page Not Found</div>
|
||||
<div class="error-description">
|
||||
Looks like this page wandered off somewhere.
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
page("Not Found", $login_user_id, style, main)
|
||||
@@ -0,0 +1,75 @@
|
||||
|
||||
procedure page(title, login_user_id, style, main)
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>CN - \escape(title)</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 200%;
|
||||
font-family: monospace;
|
||||
max-width: 800px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
nav {
|
||||
overflow: auto;
|
||||
background: #5780C9;
|
||||
color: #6E93D4;
|
||||
padding: 5px 10px;
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
}
|
||||
nav div {
|
||||
float: left
|
||||
}
|
||||
nav div:last-child {
|
||||
float: right
|
||||
}
|
||||
nav a {
|
||||
font-size: 14px;
|
||||
color: #1D2B42;
|
||||
}
|
||||
nav a.current {
|
||||
font-weight: bold;
|
||||
}
|
||||
main {
|
||||
padding: 5px 10px;
|
||||
background: #F7E6C0;
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
footer {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
</style>
|
||||
\(style)
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/htmx/1.9.2/htmx.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<div>
|
||||
<a href="/index">index</a>
|
||||
\if login_user_id != none: {
|
||||
"|\n"
|
||||
<a href="/write">write</a>
|
||||
}
|
||||
</div>
|
||||
\if login_user_id == none:
|
||||
<div>
|
||||
<a href="/login">log-in</a>
|
||||
|
|
||||
<a href="/signup">sign-up</a>
|
||||
</div>
|
||||
else
|
||||
<div>
|
||||
<a href="">settings</a>
|
||||
|
|
||||
<a href="/api/logout">log-out</a>
|
||||
</div>
|
||||
</nav>
|
||||
\main
|
||||
<footer>
|
||||
Made with love by cozis
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,246 @@
|
||||
include "pages/page.wl"
|
||||
|
||||
let posts = $query("SELECT U.username, P.title, P.content FROM Posts as P, Users as U WHERE P.id=? AND U.id=P.author", $post_id)
|
||||
let comments = $query("SELECT C.id, U.username, C.content, C.parent_post, C.parent_comment FROM Comments as C, Users as U WHERE C.parent_post=? AND U.id=C.author", $post_id)
|
||||
|
||||
let lookup = {}
|
||||
|
||||
for comment in comments: {
|
||||
comment.child = []
|
||||
lookup[comment.id] = comment
|
||||
}
|
||||
|
||||
let root_comments = []
|
||||
|
||||
for comment in comments: {
|
||||
if comment.parent_comment == none:
|
||||
root_comments << comment
|
||||
else
|
||||
lookup[comment.parent_comment].child << comment
|
||||
}
|
||||
|
||||
let post = posts[0]
|
||||
|
||||
let style =
|
||||
<style>
|
||||
.thread-header {
|
||||
padding: 15px 0;
|
||||
border-bottom: 2px solid #E8D4A9;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.thread-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.thread-title a {
|
||||
color: #1D2B42;
|
||||
text-decoration: none;
|
||||
}
|
||||
.thread-title a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.thread-meta {
|
||||
font-size: 12px;
|
||||
color: #7A5F2A;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.thread-meta a {
|
||||
color: #7A5F2A;
|
||||
}
|
||||
.thread-text {
|
||||
font-size: 14px;
|
||||
color: #1D2B42;
|
||||
line-height: 160%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.thread-actions {
|
||||
font-size: 12px;
|
||||
}
|
||||
.thread-actions a {
|
||||
color: #7A5F2A;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* Comment styles */
|
||||
.comment {
|
||||
margin-bottom: 15px;
|
||||
border-left: 1px solid #E8D4A9;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.comment-meta {
|
||||
font-size: 11px;
|
||||
color: #7A5F2A;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.comment-meta a {
|
||||
color: #7A5F2A;
|
||||
}
|
||||
.comment-text {
|
||||
font-size: 13px;
|
||||
color: #1D2B42;
|
||||
line-height: 150%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.comment-actions {
|
||||
font-size: 11px;
|
||||
}
|
||||
.comment-actions a {
|
||||
color: #7A5F2A;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.comment-actions a:hover {
|
||||
color: #1D2B42;
|
||||
}
|
||||
|
||||
.vote-buttons {
|
||||
float: left;
|
||||
width: 15px;
|
||||
margin-right: 8px;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.vote-buttons a {
|
||||
display: block;
|
||||
color: #7A5F2A;
|
||||
text-decoration: none;
|
||||
line-height: 100%;
|
||||
}
|
||||
.vote-buttons a:hover {
|
||||
color: #1D2B42;
|
||||
}
|
||||
.comment-content {
|
||||
margin-left: 23px;
|
||||
}
|
||||
.comment-child {
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.add-comment {
|
||||
}
|
||||
.add-comment form {
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
.add-comment form textarea {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
background: white;
|
||||
border: 1px solid #D4C298;
|
||||
border-radius: 3px;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
resize: vertical;
|
||||
}
|
||||
.add-comment form input[type=submit] {
|
||||
background: #5780C9;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
padding: 6px 12px;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
margin-top: 8px;
|
||||
float: right;
|
||||
}
|
||||
.add-comment input[type=submit]:hover {
|
||||
background: #1D2B42;
|
||||
}
|
||||
summary {
|
||||
list-style: none;
|
||||
text-decoration: underline;
|
||||
color: #7A5F2A;
|
||||
cursor: pointer;
|
||||
}
|
||||
::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#no-comments {
|
||||
margin: 30px 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #7A5F2A;
|
||||
}
|
||||
pre {
|
||||
white-space: pre-wrap; /* Since CSS 2.1 */
|
||||
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
|
||||
white-space: -pre-wrap; /* Opera 4-6 */
|
||||
white-space: -o-pre-wrap; /* Opera 7 */
|
||||
word-wrap: break-word; /* Internet Explorer 5.5+ */
|
||||
}
|
||||
</style>
|
||||
|
||||
let main =
|
||||
<main>
|
||||
<div class="thread-header">
|
||||
<div class="thread-title">
|
||||
<span>\escape(post.title)</span>
|
||||
</div>
|
||||
<div class="thread-meta">
|
||||
submitted 3 hours ago by <a href="">\escape(post.username)</a> | <a href="">\len(comments)</a>
|
||||
</div>
|
||||
<div class="thread-text">
|
||||
<pre>\escape(post.content)</pre>
|
||||
</div>
|
||||
<details>
|
||||
<summary>
|
||||
reply
|
||||
</summary>
|
||||
<div class="add-comment">
|
||||
<form action="/api/comment" method="POST">
|
||||
<input type="hidden" name="parent_post" value=\'"'\$post_id\'"' />
|
||||
<textarea name="content" placeholder="Add a comment..."></textarea>
|
||||
<input type="submit" vaue="Publish" />
|
||||
</form>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
\procedure render_comment(comment)
|
||||
<div class="comment">
|
||||
<div class="vote-buttons">
|
||||
<a href="">▲</a>
|
||||
<a href="">▼</a>
|
||||
</div>
|
||||
<div class="comment-content">
|
||||
<div class="comment-meta">
|
||||
<a href="">\escape(comment.username)</a> 2 hours ago
|
||||
</div>
|
||||
<div class="comment-text">
|
||||
<pre>\escape(comment.content)</pre>
|
||||
</div>
|
||||
\if $login_user_id != none:
|
||||
<details>
|
||||
<summary>
|
||||
reply
|
||||
</summary>
|
||||
<div class="add-comment">
|
||||
<form action="/api/comment" method="POST">
|
||||
<input type="hidden" name="parent_post" value=\'"'\$post_id\'"' />
|
||||
<input type="hidden" name="parent_comment" value=\'"'\comment.id\'"' />
|
||||
<textarea name="content" placeholder="Add a comment..."></textarea>
|
||||
<input type="submit" vaue="Publish" />
|
||||
</form>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
<div class="comment-child">
|
||||
\for child in comment.child:
|
||||
render_comment(child)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
\if len(root_comments) == 0:
|
||||
<div id="no-comments">
|
||||
No comments
|
||||
</div>
|
||||
else for comment in root_comments:
|
||||
render_comment(comment)
|
||||
</main>
|
||||
|
||||
page(post.title, $login_user_id, style, main)
|
||||
@@ -0,0 +1,73 @@
|
||||
include "pages/page.wl"
|
||||
|
||||
let posts = $query("SELECT title, content FROM Posts WHERE id=?", $post_id)
|
||||
let comments = $query("SELECT C.id, U.username, C.content, C.parent_post, C.parent_comment FROM Comments as C, Users as U WHERE C.parent_post=? AND U.id == C.author", $post_id)
|
||||
|
||||
let lookup = {}
|
||||
|
||||
for comment in comments: {
|
||||
comment.child = []
|
||||
lookup[comment.id] = comment
|
||||
}
|
||||
|
||||
let roots = []
|
||||
|
||||
for comment in comments: {
|
||||
if comment.parent_comment == none:
|
||||
roots << comment
|
||||
else
|
||||
lookup[comment.parent_comment].child << comment
|
||||
}
|
||||
|
||||
comments = roots
|
||||
|
||||
let post = posts[0]
|
||||
|
||||
let style =
|
||||
<style>
|
||||
.child {
|
||||
border-left: 3px solid #ccc;
|
||||
padding-left: 10px;
|
||||
}
|
||||
form textarea {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
procedure render_comment(parent)
|
||||
<div>
|
||||
<a href="">\parent.username</a>
|
||||
<p>
|
||||
\parent.content
|
||||
</p>
|
||||
<div class="child">
|
||||
\if $login_user_id != none:
|
||||
<form action="/api/comment" method="POST">
|
||||
<input type="hidden" name="parent_post" value=\'"'\$post_id\'"' />
|
||||
<input type="hidden" name="parent_comment" value=\'"'\parent.id\'"' />
|
||||
<textarea name="content"></textarea>
|
||||
<input type="submit" vaue="Publish" />
|
||||
</form>
|
||||
\for child in parent.child:
|
||||
render_comment(child)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
let main =
|
||||
<main>
|
||||
<h3>\post.title</h3>
|
||||
<p>\post.content</p>
|
||||
<div>
|
||||
<form action="/api/comment" method="POST">
|
||||
<input type="hidden" name="parent_post" value=\'"'\$post_id\'"' />
|
||||
<textarea name="content"></textarea>
|
||||
<input type="submit" vaue="Publish" />
|
||||
</form>
|
||||
</div>
|
||||
\if len comments == 0:
|
||||
<span>No comments yet!</span>
|
||||
else for comment in comments:
|
||||
render_comment(comment)
|
||||
</main>
|
||||
|
||||
page(post.title, $login_user_id, style, main)
|
||||
@@ -0,0 +1,24 @@
|
||||
include "pages/page.wl"
|
||||
include "pages/login_and_signup_style.wl"
|
||||
|
||||
let main =
|
||||
<main>
|
||||
<span>Welcome!</span>
|
||||
|
||||
<div id="response"></div>
|
||||
|
||||
<form hx-post="/api/signup" hx-target="#response">
|
||||
<input type="text" name="username" placeholder="username" />
|
||||
<input type="email" name="email" placeholder="email" />
|
||||
<input type="password" name="password1" placeholder="password" />
|
||||
<input type="password" name="password2" placeholder="repeat password" />
|
||||
<input type="submit" value="Sign-Up" />
|
||||
<div class="form-links">
|
||||
<a href="">forgot password?</a>
|
||||
|
|
||||
<a href="">already have an account?</a>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
page("Log-In", none, style, main)
|
||||
@@ -0,0 +1,95 @@
|
||||
include "pages/page.wl"
|
||||
|
||||
let style =
|
||||
<style>
|
||||
form {
|
||||
max-width: 400px;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
form input,
|
||||
form textarea {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
padding: 8px;
|
||||
margin-bottom: 15px;
|
||||
background: #E8D4A9;
|
||||
border: 1px solid #D4C298;
|
||||
}
|
||||
|
||||
form input:focus,
|
||||
form textarea:focus {
|
||||
border-color: #5780C9;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
form textarea {
|
||||
height: 120px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
form input[type=submit] {
|
||||
cursor: pointer;
|
||||
background: #5780C9;
|
||||
color: #F7E6C0;
|
||||
}
|
||||
|
||||
form input[type=submit]:hover {
|
||||
background: #1D2B42;
|
||||
}
|
||||
|
||||
.checkbox-row {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.checkbox-row input[type="checkbox"] {
|
||||
width: auto;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.checkbox-row label {
|
||||
color: #1D2B42;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
let main =
|
||||
<main>
|
||||
<form action="/api/post" method="POST">
|
||||
|
||||
<input type="hidden" name="csrf" value=\'"'\$csrf\'"' />
|
||||
<input type="text" id="title" name="title" placeholder="Title" required />
|
||||
|
||||
<div class="checkbox-row">
|
||||
<input type="checkbox" id="is_link" name="is_link" onchange="togglePostType()" />
|
||||
<label>This is a link post</label>
|
||||
</div>
|
||||
|
||||
<input type="url" id="url" name="link" placeholder="URL" style="display: none;" />
|
||||
|
||||
<textarea id="content" name="content" placeholder="Write your post here..."></textarea>
|
||||
|
||||
<input type="submit" value="Submit Post" />
|
||||
</form>
|
||||
|
||||
<script>
|
||||
function togglePostType() {
|
||||
const checkbox = document.getElementById('is_link');
|
||||
const urlInput = document.getElementById('url');
|
||||
const contentTextarea = document.getElementById('content');
|
||||
|
||||
if (checkbox.checked) {
|
||||
urlInput.style.display = 'block';
|
||||
contentTextarea.style.display = 'none';
|
||||
} else {
|
||||
urlInput.style.display = 'none';
|
||||
contentTextarea.style.display = 'block';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</main>
|
||||
|
||||
page("Write Post", $login_user_id, style, main)
|
||||
Reference in New Issue
Block a user