blog visitor frontend (pretty much) done!
This commit is contained in:
parent
3d64333b4f
commit
faf6095d16
GPG key ID:
CF99829C92678188
16 changed files with 903 additions and 463 deletions
83
controller/blog.go
Normal file
83
controller/blog.go
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
package controller
|
||||
|
||||
import (
|
||||
"arimelody-web/model"
|
||||
|
||||
"github.com/jmoiron/sqlx"
|
||||
)
|
||||
|
||||
func GetBlogPost(db *sqlx.DB, id string) (*model.BlogPost, error) {
|
||||
var blog = model.BlogPost{}
|
||||
|
||||
err := db.Get(&blog, "SELECT * FROM blogpost WHERE id=$1", id)
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
|
||||
return &blog, nil
|
||||
}
|
||||
|
||||
func GetBlogPosts(db *sqlx.DB, onlyVisible bool, limit int, offset int) ([]*model.BlogPost, error) {
|
||||
var blogs = []*model.BlogPost{}
|
||||
|
||||
query := "SELECT * FROM blogpost ORDER BY created_at"
|
||||
if onlyVisible {
|
||||
query = "SELECT * FROM blogpost WHERE visible=true ORDER BY created_at"
|
||||
}
|
||||
|
||||
var err error
|
||||
if limit < 0 {
|
||||
err = db.Select(&blogs, query)
|
||||
} else {
|
||||
err = db.Select(&blogs, query + " LIMIT $1 OFFSET $2", limit, offset)
|
||||
}
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
|
||||
// for range 4 {
|
||||
// blog := *blogs[len(blogs)-1]
|
||||
// blog.CreatedAt = blog.CreatedAt.Add(time.Hour * -5000)
|
||||
// blogs = append(blogs, &blog)
|
||||
// }
|
||||
|
||||
return blogs, nil
|
||||
}
|
||||
|
||||
func CreateBlogPost(db *sqlx.DB, post *model.BlogPost) error {
|
||||
_, err := db.Exec(
|
||||
"INSERT INTO blogpost (id,title,description,visible,author,markdown,html,bluesky_actor,bluesky_post) " +
|
||||
"VALUES ($1,$2,$3,$4,$5,$6,$7,$8,$9)",
|
||||
post.ID,
|
||||
post.Title,
|
||||
post.Description,
|
||||
post.Visible,
|
||||
post.AuthorID,
|
||||
post.Markdown,
|
||||
post.HTML,
|
||||
post.BlueskyActorID,
|
||||
post.BlueskyPostID,
|
||||
)
|
||||
|
||||
return err
|
||||
}
|
||||
|
||||
func UpdateBlogPost(db *sqlx.DB, postID string, post *model.BlogPost) error {
|
||||
_, err := db.Exec(
|
||||
"UPDATE blogpost SET " +
|
||||
"id=$2,title=$3,description=$4,visible=$5,author=$6,markdown=$7,html=$8,bluesky_actor=$9,bluesky_post=$10,modified_at=CURRENT_TIMESTAMP " +
|
||||
"WHERE id=$1",
|
||||
postID,
|
||||
post.ID,
|
||||
post.Title,
|
||||
post.Description,
|
||||
post.Visible,
|
||||
post.AuthorID,
|
||||
post.Markdown,
|
||||
post.HTML,
|
||||
post.BlueskyActorID,
|
||||
post.BlueskyPostID,
|
||||
)
|
||||
|
||||
return err
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@ import (
|
|||
"github.com/jmoiron/sqlx"
|
||||
)
|
||||
|
||||
const DB_VERSION int = 4
|
||||
const DB_VERSION int = 5
|
||||
|
||||
func CheckDBVersionAndMigrate(db *sqlx.DB) {
|
||||
db.MustExec("CREATE SCHEMA IF NOT EXISTS arimelody")
|
||||
|
|
@ -49,6 +49,10 @@ func CheckDBVersionAndMigrate(db *sqlx.DB) {
|
|||
ApplyMigration(db, "003-fail-lock")
|
||||
oldDBVersion = 4
|
||||
|
||||
case 4:
|
||||
ApplyMigration(db, "004-blog")
|
||||
oldDBVersion = 5
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
package model
|
||||
|
||||
import (
|
||||
"database/sql"
|
||||
"fmt"
|
||||
"html/template"
|
||||
"regexp"
|
||||
|
|
@ -9,20 +10,22 @@ import (
|
|||
)
|
||||
|
||||
type (
|
||||
Blog struct {
|
||||
BlogPost struct {
|
||||
ID string `db:"id"`
|
||||
Title string `db:"title"`
|
||||
Description string `db:"description"`
|
||||
Visible bool `db:"visible"`
|
||||
Date time.Time `db:"date"`
|
||||
CreatedAt time.Time `db:"created_at"`
|
||||
ModifiedAt sql.NullTime `db:"modified_at"`
|
||||
AuthorID string `db:"author"`
|
||||
Markdown string `db:"markdown"`
|
||||
HTML template.HTML `db:"html"`
|
||||
BlueskyActorID string `db:"bsky_actor"`
|
||||
BlueskyPostID string `db:"bsky_post"`
|
||||
BlueskyActorID *string `db:"bluesky_actor"`
|
||||
BlueskyPostID *string `db:"bluesky_post"`
|
||||
}
|
||||
)
|
||||
|
||||
func (b *Blog) TitleNormalised() string {
|
||||
func (b *BlogPost) TitleNormalised() string {
|
||||
rgx := regexp.MustCompile(`[^a-z0-9\-]`)
|
||||
return rgx.ReplaceAllString(
|
||||
strings.ReplaceAll(
|
||||
|
|
@ -32,10 +35,17 @@ func (b *Blog) TitleNormalised() string {
|
|||
)
|
||||
}
|
||||
|
||||
func (b *Blog) GetMonth() string {
|
||||
return fmt.Sprintf("%02d", int(b.Date.Month()))
|
||||
func (b *BlogPost) GetMonth() string {
|
||||
return fmt.Sprintf("%02d", int(b.CreatedAt.Month()))
|
||||
}
|
||||
|
||||
func (b *Blog) PrintDate() string {
|
||||
return b.Date.Format("02 January 2006")
|
||||
func (b *BlogPost) PrintDate() string {
|
||||
return b.CreatedAt.Format("2 January 2006, 03:04")
|
||||
}
|
||||
|
||||
func (b *BlogPost) PrintModifiedDate() string {
|
||||
if !b.ModifiedAt.Valid {
|
||||
return ""
|
||||
}
|
||||
return b.ModifiedAt.Time.Format("2 January 2006, 03:04")
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ type (
|
|||
func (record *Record) CreatedAtPrint() (string, error) {
|
||||
t, err := record.CreatedAtTime()
|
||||
if err != nil { return "", err }
|
||||
return t.Format("15:04, 2 February 2006"), nil
|
||||
return t.Format("2 Jan 2006, 15:04"), nil
|
||||
}
|
||||
|
||||
func (record *Record) CreatedAtTime() (time.Time, error) {
|
||||
|
|
|
|||
|
|
@ -1,28 +1,15 @@
|
|||
document.addEventListener('readystatechange', () => {
|
||||
document.querySelectorAll('.comment-hover').forEach((/** @type {HTMLDivElement} */ comment) => {
|
||||
/** @type {HTMLLinkElement} */
|
||||
const commentBody = comment.querySelector('a.comment-body');
|
||||
import { hijackClickEvent } from "./main.js";
|
||||
|
||||
comment.querySelectorAll('a').forEach((/** @type {HTMLLinkElement} */ element) => {
|
||||
element.addEventListener('click', event => {
|
||||
event.stopPropagation();
|
||||
document.querySelectorAll('article.blog-post').forEach(element => {
|
||||
const link = element.querySelector('.blog-title a');
|
||||
hijackClickEvent(element, link);
|
||||
});
|
||||
document.querySelectorAll('article.blog-post').forEach(element => {
|
||||
const link = element.querySelector('.blog-title a');
|
||||
hijackClickEvent(element, link);
|
||||
});
|
||||
|
||||
comment.addEventListener('click', () => {
|
||||
commentBody.click();
|
||||
});
|
||||
|
||||
comment.style.cursor = 'pointer';
|
||||
comment.role = 'link';
|
||||
});
|
||||
|
||||
document.getElementById('blog-copy-link').addEventListener('click', event => {
|
||||
document.getElementById('load-more').addEventListener('click', event => {
|
||||
event.preventDefault();
|
||||
if (navigator.clipboard === undefined) {
|
||||
console.error("clipboard is not supported by this browser!");
|
||||
return;
|
||||
}
|
||||
navigator.clipboard.writeText(location.protocol + "//" + location.host + location.pathname);
|
||||
});
|
||||
alert('ok');
|
||||
});
|
||||
|
|
|
|||
16
public/script/blogpost.js
Normal file
16
public/script/blogpost.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import { hijackClickEvent } from "./main.js";
|
||||
|
||||
document.querySelectorAll('.comment-hover').forEach((/** @type {HTMLDivElement} */ comment) => {
|
||||
/** @type {HTMLLinkElement} */
|
||||
const commentDate = comment.querySelector('.comment-date');
|
||||
hijackClickEvent(comment, commentDate);
|
||||
});
|
||||
|
||||
document.getElementById('blog-copy-link').addEventListener('click', event => {
|
||||
event.preventDefault();
|
||||
if (navigator.clipboard === undefined) {
|
||||
console.error("clipboard is not supported by this browser!");
|
||||
return;
|
||||
}
|
||||
navigator.clipboard.writeText(location.protocol + "//" + location.host + location.pathname);
|
||||
});
|
||||
|
|
@ -1,249 +1,70 @@
|
|||
:root {
|
||||
--like: rgb(223, 104, 104);
|
||||
--repost: rgb(162, 223, 73);
|
||||
--bluesky: rgb(16, 131, 254);
|
||||
--mastodon: rgb(86, 58, 204);
|
||||
}
|
||||
|
||||
main {
|
||||
width: min(calc(100% - 4rem), 1200px);
|
||||
margin: 0 auto 1rem auto;
|
||||
}
|
||||
|
||||
#blog-sidebar {
|
||||
position: fixed;
|
||||
width: 3em;
|
||||
padding: 3em;
|
||||
transform: translate(-9em, -1em);
|
||||
overflow: clip;
|
||||
opacity: .5;
|
||||
transition: opacity .2s;
|
||||
}
|
||||
#blog-sidebar:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#blog-sidebar ul {
|
||||
margin: 0;
|
||||
padding: .3em;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .3em;
|
||||
article.blog-post {
|
||||
margin-bottom: 1rem;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid #8882;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--on-background);
|
||||
box-shadow: 4px 4px 4px #0001;
|
||||
}
|
||||
|
||||
#blog-sidebar a {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
display: block;
|
||||
padding: .2em;
|
||||
border-radius: 2px;
|
||||
background-color: #ffffff08;
|
||||
transition: background-color .1s;
|
||||
text-decoration: none;
|
||||
}
|
||||
#blog-sidebar a:hover {
|
||||
background: #0001;
|
||||
}
|
||||
#blog-sidebar a:active {
|
||||
background: #0002;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#blog-sidebar a img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
.blog-post h2:hover,
|
||||
.blog-post p:hover {
|
||||
background: none;
|
||||
}
|
||||
|
||||
#blog-sidebar span {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.5em;
|
||||
.blog-title {
|
||||
margin: 0;
|
||||
}
|
||||
.blog-title a {
|
||||
display: inherit;
|
||||
text-wrap: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.blog p:hover,
|
||||
.comment p:hover {
|
||||
background: inherit;
|
||||
.blog-meta {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
article.blog {
|
||||
font-family: 'Lora', serif;
|
||||
font-size: 24px;
|
||||
.blog-author {
|
||||
margin: 0;
|
||||
font-size: .8em;
|
||||
}
|
||||
.blog-author img {
|
||||
width: 1.3em;
|
||||
height: 1.3em;
|
||||
display: inline-block;
|
||||
transform: translate(0, 4px);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.blog-date {
|
||||
margin-top: -1em;
|
||||
opacity: .75;
|
||||
}
|
||||
|
||||
.blog p {
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.blog sub {
|
||||
opacity: .75;
|
||||
}
|
||||
|
||||
.blog pre {
|
||||
max-height: 15em;
|
||||
padding: .5em;
|
||||
font-size: .9em;
|
||||
border: 1px solid #8884;
|
||||
border-radius: 2px;
|
||||
overflow: scroll;
|
||||
background: var(--background-alt);
|
||||
}
|
||||
|
||||
.blog p code {
|
||||
padding: .2em .3em;
|
||||
font-size: .9em;
|
||||
border: 1px solid #8884;
|
||||
border-radius: 2px;
|
||||
background: var(--background-alt);
|
||||
}
|
||||
|
||||
.blog img {
|
||||
max-height: 50%;
|
||||
max-width: 100%;
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
.blog i.end-mark {
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
margin-top: -.2em;
|
||||
|
||||
display: inline-block;
|
||||
transform: translateY(.2em);
|
||||
|
||||
background: url("/img/aridoodle.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* COMMENTS */
|
||||
|
||||
#interactions {
|
||||
margin: 1em 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: .5em;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: .4em .6em;
|
||||
border: 1px solid var(--on-background);
|
||||
border-radius: 2px;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#interactions .likes,
|
||||
#interactions .reposts {
|
||||
padding: 0 .5em;
|
||||
min-width: fit-content;
|
||||
font-family: monospace;
|
||||
text-align: center;
|
||||
line-height: 2em;
|
||||
border: 1px solid var(--on-background);
|
||||
border-radius: 2px;
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
|
||||
#interactions .likes {
|
||||
border-color: var(--on-background);
|
||||
}
|
||||
#interactions .reposts {
|
||||
border-color: var(--on-background);
|
||||
}
|
||||
|
||||
.comment-callout {
|
||||
padding-bottom: 1em;
|
||||
text-align: center;
|
||||
border-radius: 2px;
|
||||
border-bottom: 1px solid #8884;
|
||||
}
|
||||
|
||||
.bluesky {
|
||||
color: var(--bluesky);
|
||||
}
|
||||
|
||||
.mastodon {
|
||||
color: var(--mastodon);
|
||||
}
|
||||
|
||||
.comment {
|
||||
font-family: 'Inter', 'Arial', sans-serif;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.comment .comment-hover {
|
||||
padding: 1em;
|
||||
transition: background-color .1s;
|
||||
}
|
||||
|
||||
.comment .comment-hover:hover {
|
||||
background-color: #8881;
|
||||
}
|
||||
|
||||
.comment .comment-header a {
|
||||
display: flex;
|
||||
gap: .5em;
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.comment .comment-header a .display-name {
|
||||
overflow: inherit;
|
||||
text-overflow: inherit;
|
||||
}
|
||||
|
||||
.comment .comment-header a .handle {
|
||||
opacity: .5;
|
||||
font-family: monospace;
|
||||
font-size: .9em;
|
||||
overflow: inherit;
|
||||
text-overflow: inherit;
|
||||
}
|
||||
|
||||
.comment .comment-header img.avatar {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
}
|
||||
|
||||
.comment .comment-body {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.comment p.comment-text {
|
||||
margin: .5em 0;
|
||||
white-space: break-spaces;
|
||||
}
|
||||
|
||||
.comment .comment-footer {
|
||||
margin: 0;
|
||||
font-size: .8em;
|
||||
opacity: .5;
|
||||
opacity: .75;
|
||||
}
|
||||
|
||||
.comment .comment-replies {
|
||||
margin-left: 1em;
|
||||
border-left: 2px solid #8884;
|
||||
.blog-description {
|
||||
margin: .5em 0 0 0;
|
||||
display: -webkit-box;
|
||||
font-size: .8em;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#load-more {
|
||||
margin: 0 auto;
|
||||
padding: .5em 2em;
|
||||
display: block;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1500px) {
|
||||
#blog-sidebar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
314
public/style/blogpost.css
Normal file
314
public/style/blogpost.css
Normal file
|
|
@ -0,0 +1,314 @@
|
|||
:root {
|
||||
--like: rgb(223, 104, 104);
|
||||
--boost: rgb(162, 223, 73);
|
||||
--bluesky: rgb(16, 131, 254);
|
||||
--mastodon: rgb(86, 58, 204);
|
||||
}
|
||||
|
||||
main {
|
||||
width: min(calc(100% - 4rem), 1200px);
|
||||
margin: 0 auto 1rem auto;
|
||||
}
|
||||
|
||||
#blog-sidebar {
|
||||
position: fixed;
|
||||
width: 3em;
|
||||
padding: 3em;
|
||||
transform: translate(-9em, -1em);
|
||||
overflow: clip;
|
||||
opacity: .5;
|
||||
transition: opacity .2s;
|
||||
}
|
||||
#blog-sidebar:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#blog-sidebar ul {
|
||||
margin: 0;
|
||||
padding: .3em;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .3em;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--on-background);
|
||||
box-shadow: 4px 4px 4px #0001;
|
||||
}
|
||||
|
||||
#blog-sidebar a {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
display: block;
|
||||
padding: .2em;
|
||||
border-radius: 2px;
|
||||
text-decoration: none;
|
||||
}
|
||||
#blog-sidebar a:hover {
|
||||
background: #0001;
|
||||
}
|
||||
#blog-sidebar a:active {
|
||||
background: #0002;
|
||||
}
|
||||
|
||||
#blog-sidebar a img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
#blog-sidebar span {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
#blog-sidebar hr {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.blog p:hover,
|
||||
.comment p:hover {
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
article.blog {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.blog h1 {
|
||||
margin-bottom: 0;
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
.blog-author {
|
||||
margin: .2em 0;
|
||||
}
|
||||
.blog .blog-author img {
|
||||
width: 1.3em;
|
||||
height: 1.3em;
|
||||
display: inline-block;
|
||||
transform: translate(0, 6px);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.blog-date {
|
||||
margin: .5em 0;
|
||||
font-size: .7em;
|
||||
}
|
||||
.blog-modified-date {
|
||||
font-style: italic;
|
||||
opacity: .75;
|
||||
}
|
||||
|
||||
#blog-content {
|
||||
font-family: 'Lora', serif;
|
||||
}
|
||||
|
||||
.blog p {
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.blog sub {
|
||||
opacity: .75;
|
||||
}
|
||||
|
||||
.blog pre {
|
||||
max-height: 15em;
|
||||
padding: .5em;
|
||||
font-size: .9em;
|
||||
border: 1px solid #8884;
|
||||
border-radius: 2px;
|
||||
overflow: scroll;
|
||||
background: var(--background-alt);
|
||||
}
|
||||
|
||||
.blog p code {
|
||||
padding: .2em .3em;
|
||||
font-size: .9em;
|
||||
border: 1px solid #8884;
|
||||
border-radius: 2px;
|
||||
background: var(--background-alt);
|
||||
}
|
||||
|
||||
.blog img {
|
||||
max-height: 50%;
|
||||
max-width: 100%;
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
.blog i.end-mark {
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
margin-top: -.2em;
|
||||
|
||||
display: inline-block;
|
||||
transform: translateY(.2em);
|
||||
|
||||
background: url("/img/aridoodle.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* COMMENTS */
|
||||
|
||||
#interactions {
|
||||
margin: 1em 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: .5em;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: .4em .6em;
|
||||
border: 1px solid var(--on-background);
|
||||
border-radius: 2px;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#interactions button {
|
||||
min-width: fit-content;
|
||||
padding: 0 .75em 0 .5em;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: .5em;
|
||||
|
||||
font-family: monospace;
|
||||
font-size: inherit;
|
||||
text-align: center;
|
||||
line-height: 2em;
|
||||
text-wrap: nowrap;
|
||||
|
||||
color: inherit;
|
||||
background: none;
|
||||
border: 1px solid var(--on-background);
|
||||
border-radius: 4px;
|
||||
}
|
||||
#interactions button:hover {
|
||||
background: #0001;
|
||||
}
|
||||
#interactions button:active {
|
||||
background: #0002;
|
||||
}
|
||||
|
||||
#interactions img {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.comment-callout {
|
||||
margin: 0 0 0 1em;
|
||||
}
|
||||
.comment-callout:hover {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.bluesky {
|
||||
color: var(--bluesky);
|
||||
}
|
||||
|
||||
.mastodon {
|
||||
color: var(--mastodon);
|
||||
}
|
||||
|
||||
.comment {
|
||||
font-family: 'Inter', 'Arial', sans-serif;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.comment .comment-hover {
|
||||
padding: 1em;
|
||||
transition: background-color .1s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.comment .comment-hover:hover {
|
||||
background-color: #8881;
|
||||
}
|
||||
|
||||
.comment .comment-header a {
|
||||
display: flex;
|
||||
gap: .5em;
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.comment .comment-header a .display-name {
|
||||
overflow: inherit;
|
||||
text-overflow: inherit;
|
||||
}
|
||||
|
||||
.comment .comment-header a .handle {
|
||||
opacity: .5;
|
||||
font-family: monospace;
|
||||
font-size: .9em;
|
||||
overflow: inherit;
|
||||
text-overflow: inherit;
|
||||
}
|
||||
|
||||
.comment .comment-header img.avatar {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.comment .comment-body {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.comment p.comment-text {
|
||||
margin: .5em 0;
|
||||
white-space: break-spaces;
|
||||
}
|
||||
|
||||
.comment .comment-footer {
|
||||
margin: 0;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
.comment .comment-footer .comment-footer-static {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.comment .comment-replies {
|
||||
margin-left: 1em;
|
||||
border-left: 2px solid #8884;
|
||||
}
|
||||
|
||||
.comment .comment-date {
|
||||
transition: opacity .2s;
|
||||
}
|
||||
|
||||
@media screen and (prefers-color-scheme: dark) {
|
||||
#blog-sidebar a:hover {
|
||||
background: #fff2;
|
||||
}
|
||||
#blog-sidebar a:active {
|
||||
background: #fff4;
|
||||
}
|
||||
|
||||
.comment-date {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
|
@ -38,7 +38,7 @@ a:hover {
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a.link-button {
|
||||
.link-button {
|
||||
padding: .3em .5em;
|
||||
border: 1px solid var(--links);
|
||||
color: var(--links);
|
||||
|
|
@ -51,7 +51,7 @@ a.link-button {
|
|||
opacity: 0;
|
||||
}
|
||||
|
||||
a.link-button:hover {
|
||||
.link-button:hover {
|
||||
color: #eee;
|
||||
border-color: #eee;
|
||||
background-color: var(--links) !important;
|
||||
|
|
|
|||
|
|
@ -127,17 +127,39 @@ ALTER TABLE arimelody.musicreleasetrack ADD CONSTRAINT musicreleasetrack_pk PRIM
|
|||
|
||||
|
||||
|
||||
CREATE TABLE arimelody.blogpost (
|
||||
id TEXT NOT NULL UNIQUE,
|
||||
title TEXT NOT NULL,
|
||||
description TEXT NOT NULL,
|
||||
visible BOOLEAN NOT NULL DEFAULT FALSE,
|
||||
created_at TIMESTAMP NOT NULL DEFAULT current_timestamp,
|
||||
modified_at TIMESTAMP,
|
||||
author UUID NOT NULL,
|
||||
markdown TEXT NOT NULL,
|
||||
html TEXT NOT NULL,
|
||||
bluesky_actor TEXT,
|
||||
bluesky_post TEXT
|
||||
);
|
||||
ALTER TABLE arimelody.blogpost ADD CONSTRAINT blogpost_pk PRIMARY KEY (id);
|
||||
|
||||
|
||||
|
||||
--
|
||||
-- Foreign keys
|
||||
--
|
||||
|
||||
-- Account
|
||||
ALTER TABLE arimelody.privilege ADD CONSTRAINT privilege_account_fk FOREIGN KEY (account) REFERENCES account(id) ON DELETE CASCADE;
|
||||
ALTER TABLE arimelody.session ADD CONSTRAINT session_account_fk FOREIGN KEY (account) REFERENCES account(id) ON DELETE CASCADE;
|
||||
ALTER TABLE arimelody.session ADD CONSTRAINT session_attempt_account_fk FOREIGN KEY (account) REFERENCES account(id) ON DELETE CASCADE;
|
||||
ALTER TABLE arimelody.totp ADD CONSTRAINT totp_account_fk FOREIGN KEY (account) REFERENCES account(id) ON DELETE CASCADE;
|
||||
|
||||
-- Music
|
||||
ALTER TABLE arimelody.musiccredit ADD CONSTRAINT musiccredit_artist_fk FOREIGN KEY (artist) REFERENCES artist(id) ON DELETE CASCADE ON UPDATE CASCADE;
|
||||
ALTER TABLE arimelody.musiccredit ADD CONSTRAINT musiccredit_release_fk FOREIGN KEY (release) REFERENCES musicrelease(id) ON DELETE CASCADE;
|
||||
ALTER TABLE arimelody.musiclink ADD CONSTRAINT musiclink_release_fk FOREIGN KEY (release) REFERENCES musicrelease(id) ON UPDATE CASCADE ON DELETE CASCADE;
|
||||
ALTER TABLE arimelody.musicreleasetrack ADD CONSTRAINT music_pair_trackref_fk FOREIGN KEY (release) REFERENCES musicrelease(id) ON DELETE CASCADE;
|
||||
ALTER TABLE arimelody.musicreleasetrack ADD CONSTRAINT music_pair_releaseref_fk FOREIGN KEY (track) REFERENCES musictrack(id) ON DELETE CASCADE;
|
||||
|
||||
-- Blog
|
||||
ALTER TABLE arimelody.blogpost ADD CONSTRAINT blogpost_author_fk FOREIGN KEY (author) REFERENCES account(id) ON DELETE CASCADE;
|
||||
|
|
|
|||
15
schema-migration/004-blog.sql
Normal file
15
schema-migration/004-blog.sql
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
CREATE TABLE arimelody.blogpost (
|
||||
id TEXT NOT NULL UNIQUE,
|
||||
title TEXT NOT NULL,
|
||||
description TEXT NOT NULL,
|
||||
visible BOOLEAN NOT NULL DEFAULT FALSE,
|
||||
created_at TIMESTAMP NOT NULL DEFAULT current_timestamp,
|
||||
modified_at TIMESTAMP,
|
||||
author UUID NOT NULL,
|
||||
markdown TEXT NOT NULL,
|
||||
html TEXT NOT NULL,
|
||||
bluesky_actor TEXT,
|
||||
bluesky_post TEXT
|
||||
);
|
||||
ALTER TABLE arimelody.blogpost ADD CONSTRAINT blogpost_pk PRIMARY KEY (id);
|
||||
ALTER TABLE arimelody.blogpost ADD CONSTRAINT blogpost_author_fk FOREIGN KEY (author) REFERENCES account(id) ON DELETE CASCADE;
|
||||
|
|
@ -33,3 +33,10 @@ var BlogTemplate = template.Must(template.ParseFiles(
|
|||
filepath.Join("view", "prideflag.html"),
|
||||
filepath.Join("view", "blog.html"),
|
||||
))
|
||||
var BlogPostTemplate = template.Must(template.ParseFiles(
|
||||
filepath.Join("view", "layout.html"),
|
||||
filepath.Join("view", "header.html"),
|
||||
filepath.Join("view", "footer.html"),
|
||||
filepath.Join("view", "prideflag.html"),
|
||||
filepath.Join("view", "blogpost.html"),
|
||||
))
|
||||
|
|
|
|||
173
view/blog.go
173
view/blog.go
|
|
@ -5,7 +5,9 @@ import (
|
|||
"html/template"
|
||||
"net/http"
|
||||
"os"
|
||||
"time"
|
||||
"slices"
|
||||
"strconv"
|
||||
"strings"
|
||||
|
||||
"arimelody-web/controller"
|
||||
"arimelody-web/model"
|
||||
|
|
@ -16,14 +18,26 @@ import (
|
|||
"github.com/gomarkdown/markdown/parser"
|
||||
)
|
||||
|
||||
type BlogView struct {
|
||||
*model.Blog
|
||||
type (
|
||||
BlogView struct {
|
||||
Collections []*BlogViewPostCollection
|
||||
}
|
||||
|
||||
BlogViewPostCollection struct {
|
||||
Name string
|
||||
Posts []*BlogPostView
|
||||
}
|
||||
|
||||
BlogPostView struct {
|
||||
*model.BlogPost
|
||||
Author *model.Account
|
||||
Comments []*model.ThreadViewPost
|
||||
Likes int
|
||||
Reposts int
|
||||
Boosts int
|
||||
BlueskyURL string
|
||||
MastodonURL string
|
||||
}
|
||||
)
|
||||
|
||||
var mdRenderer = html.NewRenderer(html.RendererOptions{
|
||||
Flags: html.CommonFlags | html.HrefTargetBlank,
|
||||
|
|
@ -31,40 +45,104 @@ var mdRenderer = html.NewRenderer(html.RendererOptions{
|
|||
|
||||
func BlogHandler(app *model.AppState) http.Handler {
|
||||
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
|
||||
blog := model.Blog{
|
||||
Title: "hello world!",
|
||||
Description: "lorem ipsum yadda yadda something boobies babababababababa",
|
||||
Visible: true,
|
||||
Date: time.Now(),
|
||||
AuthorID: "ari",
|
||||
Markdown:
|
||||
`
|
||||
**i'm ari!** (she/her) 🏳️⚧️🏳️🌈💫🦆🇮🇪
|
||||
|
||||
welcome to my blog!
|
||||
|
||||
i'm a musician, developer, streamer, youtuber, and probably a bunch of other things i forgot to mention!
|
||||
|
||||
|
||||
## code block test
|
||||
|
||||
~~~ c
|
||||
#include <stdio.h>
|
||||
|
||||
int main(int argc, char *argv[]) {
|
||||
printf("hello world!~\n");
|
||||
return 0;
|
||||
if strings.Count(r.URL.Path, "/") > 1 {
|
||||
http.NotFound(w, r)
|
||||
return
|
||||
}
|
||||
~~~
|
||||
|
||||
## aridoodle
|
||||
if len(r.URL.Path) > 1 {
|
||||
ServeBlogPost(app, r.URL.Path[1:]).ServeHTTP(w, r)
|
||||
return
|
||||
}
|
||||
|
||||
this is `+"`"+`aridoodle`+"`"+`. please take care of her.
|
||||
dbPosts, err := controller.GetBlogPosts(app.DB, true, -1, 0)
|
||||
if err != nil {
|
||||
if strings.Contains(err.Error(), "no rows") {
|
||||
http.NotFound(w, r)
|
||||
return
|
||||
}
|
||||
fmt.Fprintf(os.Stderr, "WARN: Failed to fetch blog posts: %v\n", err)
|
||||
http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
`,
|
||||
BlueskyActorID: "did:plc:yct6cvgfipngizry5umzkxr3",
|
||||
BlueskyPostID: "3llsudsx7pc2u",
|
||||
collections := []*BlogViewPostCollection{}
|
||||
posts := []*BlogPostView{}
|
||||
collectionYear := 0
|
||||
for i, post := range dbPosts {
|
||||
author, err := controller.GetAccountByID(app.DB, post.AuthorID)
|
||||
if err != nil {
|
||||
fmt.Fprintf(os.Stderr, "WARN: Failed to retrieve author of blog %s: %v\n", post.ID, err)
|
||||
continue
|
||||
}
|
||||
|
||||
if i == 0 {
|
||||
collectionYear = post.CreatedAt.Year()
|
||||
}
|
||||
|
||||
if post.CreatedAt.Year() != collectionYear || i == len(dbPosts) - 1 {
|
||||
if i == len(dbPosts) - 1 {
|
||||
posts = append(posts, &BlogPostView{
|
||||
BlogPost: post,
|
||||
Author: author,
|
||||
})
|
||||
}
|
||||
postsCopy := slices.Clone(posts)
|
||||
collections = append(collections, &BlogViewPostCollection{
|
||||
Name: strconv.Itoa(collectionYear),
|
||||
Posts: postsCopy,
|
||||
})
|
||||
posts = []*BlogPostView{}
|
||||
collectionYear = post.CreatedAt.Year()
|
||||
}
|
||||
|
||||
posts = append(posts, &BlogPostView{
|
||||
BlogPost: post,
|
||||
Author: author,
|
||||
})
|
||||
}
|
||||
|
||||
err = templates.BlogTemplate.Execute(w, BlogView{
|
||||
Collections: collections,
|
||||
})
|
||||
if err != nil {
|
||||
fmt.Fprintf(os.Stderr, "WARN: Error rendering blog post: %v\n", err)
|
||||
http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
func ServeBlogPost(app *model.AppState, blogPostID string) http.Handler {
|
||||
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
|
||||
blog, err := controller.GetBlogPost(app.DB, blogPostID)
|
||||
if err != nil {
|
||||
if strings.Contains(err.Error(), "no rows") {
|
||||
http.NotFound(w, r)
|
||||
return
|
||||
}
|
||||
fmt.Fprintf(os.Stderr, "WARN: Failed to fetch blog post Bluesky thread: %v\n", err)
|
||||
http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
|
||||
if !blog.Visible {
|
||||
session, err := controller.GetSessionFromRequest(app, r)
|
||||
if err != nil {
|
||||
fmt.Fprintf(os.Stderr, "WARN: Failed to retrieve session: %v\n", err)
|
||||
http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
|
||||
if session == nil || session.Account == nil {
|
||||
http.NotFound(w, r)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
author, err := controller.GetAccountByID(app.DB, blog.AuthorID)
|
||||
if err != nil {
|
||||
fmt.Fprintf(os.Stderr, "WARN: Failed to retrieve author of blog %s: %v\n", blog.ID, err)
|
||||
}
|
||||
|
||||
// blog.Markdown += " <i class=\"end-mark\"></i>"
|
||||
|
|
@ -74,23 +152,32 @@ this is `+"`"+`aridoodle`+"`"+`. please take care of her.
|
|||
blog.HTML = template.HTML(markdown.Render(md, mdRenderer))
|
||||
|
||||
comments := []*model.ThreadViewPost{}
|
||||
blueskyPost, err := controller.FetchThreadViewPost(blog.BlueskyActorID, blog.BlueskyPostID)
|
||||
likeCount := 0
|
||||
boostCount := 0
|
||||
var blueskyURL string
|
||||
var blueskyPost *model.ThreadViewPost
|
||||
if blog.BlueskyActorID != nil && blog.BlueskyPostID != nil {
|
||||
blueskyPost, err = controller.FetchThreadViewPost(*blog.BlueskyActorID, *blog.BlueskyPostID)
|
||||
if err != nil {
|
||||
fmt.Fprintf(os.Stderr, "WARN: Failed to fetch blog post Bluesky thread: %v\n", err)
|
||||
} else {
|
||||
comments = append(comments, blueskyPost.Replies...)
|
||||
likeCount += blueskyPost.Post.LikeCount
|
||||
boostCount += blueskyPost.Post.RepostCount
|
||||
blueskyURL = fmt.Sprintf("https://bsky.app/profile/%s/post/%s", blueskyPost.Post.Author.Handle, *blog.BlueskyPostID)
|
||||
}
|
||||
}
|
||||
|
||||
err = templates.BlogTemplate.Execute(w, BlogView{
|
||||
Blog: &blog,
|
||||
Comments: blueskyPost.Replies,
|
||||
Likes: blueskyPost.Post.LikeCount,
|
||||
Reposts: blueskyPost.Post.RepostCount,
|
||||
BlueskyURL: fmt.Sprintf("https://bsky.app/profile/%s/post/%s", blog.BlueskyActorID, blog.BlueskyPostID),
|
||||
MastodonURL: "#",
|
||||
err = templates.BlogPostTemplate.Execute(w, BlogPostView{
|
||||
BlogPost: blog,
|
||||
Author: author,
|
||||
Comments: comments,
|
||||
Likes: likeCount,
|
||||
Boosts: boostCount,
|
||||
BlueskyURL: blueskyURL,
|
||||
})
|
||||
if err != nil {
|
||||
fmt.Fprintf(os.Stderr, "Error rendering blog post: %v\n", err)
|
||||
fmt.Fprintf(os.Stderr, "WARN: Error rendering blog post: %v\n", err)
|
||||
http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
|
|
|
|||
164
view/blog.html
164
view/blog.html
|
|
@ -1,15 +1,15 @@
|
|||
{{define "head"}}
|
||||
<title>{{.Title}} - ari melody 💫</title>
|
||||
<title>blog - ari melody 💫</title>
|
||||
<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
|
||||
|
||||
<meta name="description" content="{{.Description}}">
|
||||
<meta name="description" content="thoughts from your local SPACEGIRL 💫">
|
||||
|
||||
<meta property="og:title" content="{{.Title}}">
|
||||
<meta property="og:title" content="ari melody blog 💫">
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:url" content="www.arimelody.me/blog/{{.Date.Year}}/{{.GetMonth}}/{{.TitleNormalised}}">
|
||||
<meta property="og:image" content="https://www.arimelody.me/img/favicon.png">
|
||||
<meta property="og:url" content="https://arimelody.space/blog/">
|
||||
<meta property="og:image" content="https://arimelody.space/img/favicon.png">
|
||||
<meta property="og:site_name" content="ari melody">
|
||||
<meta property="og:description" content="{{.Description}}">
|
||||
<meta property="og:description" content="thoughts from your local SPACEGIRL 💫">
|
||||
|
||||
<link rel="stylesheet" href="/style/main.css">
|
||||
<link rel="stylesheet" href="/style/index.css">
|
||||
|
|
@ -18,138 +18,34 @@
|
|||
|
||||
{{define "content"}}
|
||||
<main>
|
||||
<div id="blog-sidebar">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#copy-link" id="blog-copy-link" title="copy link">
|
||||
<div class="dark-only">
|
||||
<img src="/img/blog/copy-link-dark.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
<div class="light-only">
|
||||
<img src="/img/blog/copy-link-light.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
{{if ne .BlueskyURL ""}}
|
||||
<li>
|
||||
<a href="{{.BlueskyURL}}" id="blog-share-bsky" title="share on bluesky">
|
||||
<div class="dark-only">
|
||||
<img src="/img/blog/bluesky-dark.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
<div class="light-only">
|
||||
<img src="/img/blog/bluesky-light.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{.BlueskyURL}}" id="blog-like" title="like this post">
|
||||
<div class="dark-only">
|
||||
<img src="/img/blog/like-dark.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
<div class="light-only">
|
||||
<img src="/img/blog/like-light.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{.BlueskyURL}}" id="blog-boost" title="boost this post">
|
||||
<div class="dark-only">
|
||||
<img src="/img/blog/boost-dark.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
<div class="light-only">
|
||||
<img src="/img/blog/boost-light.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#comments" id="blog-comments" title="comments">
|
||||
<div class="dark-only">
|
||||
<img src="/img/blog/comment-dark.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
<div class="light-only">
|
||||
<img src="/img/blog/comment-light.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<h1 class="typeout"># blog</h1>
|
||||
<p class="">thoughts from your local SPACEGIRL 💫</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div id="posts">
|
||||
{{if eq (len .Collections) 0}}
|
||||
<p>there are no posts! 🍃</p>
|
||||
{{end}}
|
||||
</ul>
|
||||
</div>
|
||||
<div id="blog-container">
|
||||
<article class="blog">
|
||||
<h1 class="typeout">{{.Title}}</h1>
|
||||
<p class="blog-date">Posted by <a href="/blog/{{.AuthorID}}">{{.AuthorID}}</a> @ {{.PrintDate}}</p>
|
||||
|
||||
<hr>
|
||||
{{.HTML}}
|
||||
|
||||
</article>
|
||||
|
||||
{{if ne .BlueskyURL ""}}
|
||||
<hr>
|
||||
|
||||
<div id="interactions">
|
||||
<span class="likes">❤️ {{.Likes}}</span>
|
||||
<span class="reposts">🔁 {{.Reposts}}</span>
|
||||
</div>
|
||||
|
||||
<p class="comment-callout">
|
||||
join the conversation on
|
||||
<a class="bluesky" href="{{.BlueskyURL}}" target="_blank">Bluesky 🦋</a>
|
||||
<!-- TODO: mastodon support -->
|
||||
<!--
|
||||
and
|
||||
<a class="mastodon" href="{{.MastodonURL}}" target="_blank">Mastodon 🐘</a>
|
||||
-->
|
||||
{{range .Collections}}
|
||||
<h2 id="{{.Name}}" class="collection-name">{{.Name}}</h2>
|
||||
{{range .Posts}}
|
||||
<article class="blog-post">
|
||||
<h3 class="blog-title"><a href="/blog/{{.ID}}">{{.Title}}</a></h3>
|
||||
<p class="blog-meta">
|
||||
<span class="blog-author"><img src="/img/favicon.png" alt="{{.Author.Username}}'s avatar" width="32" height="32"/> {{.Author.Username}}</span>
|
||||
<span class="blog-date">• {{.PrintDate}}</span>
|
||||
</p>
|
||||
|
||||
<div id="comments">
|
||||
{{range .Comments}}
|
||||
{{template "comment" .}}
|
||||
{{if ne .Description ""}}
|
||||
<p class="blog-description">{{.Description}}</p>
|
||||
{{end}}
|
||||
</article>
|
||||
{{end}}
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<script type="module" src="/script/blog.js"></script>
|
||||
</div>
|
||||
<!-- <button type="submit" class="link-button" id="load-more">load more</button> -->
|
||||
|
||||
<script src="/script/blog.js" type="module" defer></script>
|
||||
</main>
|
||||
{{end}}
|
||||
|
||||
{{define "comment"}}
|
||||
<article class="comment">
|
||||
<div class="comment-hover">
|
||||
<div class="comment-header">
|
||||
<a href="https://bsky.app/profile/{{.Post.Author.DID}}" target="_blank">
|
||||
<img class="avatar" src="{{.Post.Author.Avatar}}" alt="{{.Post.Author.DisplayName}}'s avatar" width="32" height="32">
|
||||
<span class="display-name">{{.Post.Author.DisplayName}}</span>
|
||||
<span class="handle">@{{.Post.Author.Handle}}</span>
|
||||
</a>
|
||||
</div>
|
||||
<a class="comment-body" href="{{.Post.BskyURL}}" target="_blank">
|
||||
<div>
|
||||
<p class="comment-text">{{.Post.Record.Text}}</p>
|
||||
{{if .Post.HasImage}}
|
||||
<p class="comment-images">
|
||||
{{range .Post.Embed.Media.Images}}
|
||||
<a href="{{.Fullsize}}" target="_blank">[image]</a>
|
||||
{{end}}
|
||||
</p>
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="comment-footer">
|
||||
<span>{{.Post.LikeCount}} like{{if ne .Post.LikeCount 1}}s{{end}}</span>
|
||||
•
|
||||
<span>{{.Post.RepostCount}} repost{{if ne .Post.RepostCount 1}}s{{end}}</span>
|
||||
•
|
||||
<span class="comment-date">{{.Post.Record.CreatedAtPrint}}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="comment-replies">
|
||||
{{range .Replies}}
|
||||
{{template "comment" .}}
|
||||
{{end}}
|
||||
</div>
|
||||
</article>
|
||||
{{end}}
|
||||
|
||||
|
|
|
|||
178
view/blogpost.html
Normal file
178
view/blogpost.html
Normal file
|
|
@ -0,0 +1,178 @@
|
|||
{{define "head"}}
|
||||
<title>{{.Title}} - ari melody 💫</title>
|
||||
<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
|
||||
|
||||
<meta name="description" content="{{.Description}}">
|
||||
|
||||
<meta property="og:title" content="{{.Title}}">
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:url" content="https://arimelody.space/blog/{{.ID}}">
|
||||
<meta property="og:image" content="https://arimelody.space/img/favicon.png">
|
||||
<meta property="og:site_name" content="ari melody">
|
||||
<meta property="og:description" content="{{.Description}}">
|
||||
|
||||
<link rel="stylesheet" href="/style/main.css">
|
||||
<link rel="stylesheet" href="/style/index.css">
|
||||
<link rel="stylesheet" href="/style/blogpost.css">
|
||||
{{end}}
|
||||
|
||||
{{define "content"}}
|
||||
<main>
|
||||
<div id="blog-sidebar">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#copy-link" id="blog-copy-link" title="copy link">
|
||||
<div class="dark-only">
|
||||
<img src="/img/blog/copy-link-dark.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
<div class="light-only">
|
||||
<img src="/img/blog/copy-link-light.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
{{if ne .BlueskyURL ""}}
|
||||
<li>
|
||||
<a href="{{.BlueskyURL}}" id="blog-share-bsky" title="share on bluesky">
|
||||
<div class="dark-only">
|
||||
<img src="/img/blog/bluesky-dark.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
<div class="light-only">
|
||||
<img src="/img/blog/bluesky-light.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<hr>
|
||||
<li>
|
||||
<a href="{{.BlueskyURL}}" id="blog-like" title="like this post">
|
||||
<div class="dark-only">
|
||||
<img src="/img/blog/like-dark.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
<div class="light-only">
|
||||
<img src="/img/blog/like-light.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{.BlueskyURL}}" id="blog-boost" title="boost this post">
|
||||
<div class="dark-only">
|
||||
<img src="/img/blog/boost-dark.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
<div class="light-only">
|
||||
<img src="/img/blog/boost-light.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#comments" id="blog-comments" title="comments">
|
||||
<div class="dark-only">
|
||||
<img src="/img/blog/comment-dark.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
<div class="light-only">
|
||||
<img src="/img/blog/comment-light.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
{{end}}
|
||||
</ul>
|
||||
</div>
|
||||
<div id="blog-container">
|
||||
<article class="blog">
|
||||
<div id="blog-header">
|
||||
<h1 class="typeout"># {{.Title}}</h1>
|
||||
<p class="blog-author">by <a href="/blog?author={{.Author.Username}}">{{.Author.Username}} <img src="/img/favicon.png" alt="{{.Author.Username}}'s avatar" width="32" height="32"/></a></p>
|
||||
<p class="blog-date">posted {{.PrintDate}}{{if .ModifiedAt.Valid}} <span class="blog-modified-date">• updated {{.PrintModifiedDate}}</span>{{end}}</p>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div id="blog-content">
|
||||
{{.HTML}}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{{if ne .BlueskyURL ""}}
|
||||
<hr>
|
||||
|
||||
<div id="interactions">
|
||||
<button class="likes" aria-label="{{.Likes}} likes">
|
||||
<div class="dark-only">
|
||||
<img src="/img/blog/like-dark.svg" alt="" width="32" height="32">
|
||||
</div>
|
||||
<div class="light-only">
|
||||
<img src="/img/blog/like-light.svg" alt="" width="32" height="32">
|
||||
</div>
|
||||
{{.Likes}}
|
||||
</button>
|
||||
<button class="boosts" aria-label="{{.Boosts}} boosts">
|
||||
<div class="dark-only">
|
||||
<img src="/img/blog/boost-dark.svg" alt="" width="32" height="32">
|
||||
</div>
|
||||
<div class="light-only">
|
||||
<img src="/img/blog/boost-light.svg" alt="" width="32" height="32">
|
||||
</div>
|
||||
{{.Boosts}}
|
||||
</button>
|
||||
|
||||
<p class="comment-callout">
|
||||
join the conversation on
|
||||
<a class="bluesky" href="{{.BlueskyURL}}">Bluesky 🦋</a>
|
||||
<!-- TODO: mastodon support -->
|
||||
<!--
|
||||
and
|
||||
<a class="mastodon" href="{{.MastodonURL}}">Mastodon 🐘</a>
|
||||
-->
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="comments">
|
||||
{{range .Comments}}
|
||||
{{template "comment" .}}
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<script type="module" src="/script/blogpost.js"></script>
|
||||
</div>
|
||||
</main>
|
||||
{{end}}
|
||||
|
||||
{{define "comment"}}
|
||||
<article class="comment">
|
||||
<div class="comment-hover">
|
||||
<div class="comment-header">
|
||||
<a href="https://bsky.app/profile/{{.Post.Author.Handle}}" target="_blank">
|
||||
<img class="avatar" src="{{.Post.Author.Avatar}}" alt="{{.Post.Author.DisplayName}}'s avatar" width="32" height="32">
|
||||
<span class="display-name">{{.Post.Author.DisplayName}}</span>
|
||||
<span class="handle">@{{.Post.Author.Handle}}</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="comment-body" target="_blank">
|
||||
<div>
|
||||
<p class="comment-text">{{.Post.Record.Text}}</p>
|
||||
{{if .Post.HasImage}}
|
||||
<p class="comment-images">
|
||||
{{range .Post.Embed.Media.Images}}
|
||||
<a href="{{.Fullsize}}" target="_blank">[image]</a>
|
||||
{{end}}
|
||||
</p>
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="comment-footer">
|
||||
<span class="comment-footer-static">
|
||||
<span>{{.Post.LikeCount}} like{{if ne .Post.LikeCount 1}}s{{end}}</span>
|
||||
•
|
||||
<span>{{.Post.RepostCount}} boost{{if ne .Post.RepostCount 1}}s{{end}}</span>
|
||||
•
|
||||
</span>
|
||||
<a href="{{.Post.BskyURL}}" class="comment-date">{{.Post.Record.CreatedAtPrint}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comment-replies">
|
||||
{{range .Replies}}
|
||||
{{template "comment" .}}
|
||||
{{end}}
|
||||
</div>
|
||||
</article>
|
||||
{{end}}
|
||||
|
|
@ -21,11 +21,11 @@
|
|||
<a href="/" preload="mouseover">home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/music" preload="mouseover">music</a>
|
||||
<a href="/music/" preload="mouseover">music</a>
|
||||
</li>
|
||||
<li>
|
||||
<!-- coming later! -->
|
||||
<span title="coming later!">blog</span>
|
||||
<a href="/blog/" preload="mouseover">blog</a>
|
||||
</li>
|
||||
<li>
|
||||
<!-- coming later! -->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue