Skip to content
GitLab
About GitLab
GitLab: the DevOps platform
Explore GitLab
Install GitLab
How GitLab compares
Get started
GitLab docs
GitLab Learn
Pricing
Talk to an expert
/
Help
What's new
2
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Switch to GitLab Next
Projects
Groups
Snippets
Sign up now
Login
Sign in / Register
Toggle navigation
Menu
Open sidebar
Carl Schwan
Blog
Commits
2be132ad
Commit
2be132ad
authored
Dec 30, 2020
by
Carl Schwan
Browse files
Add comments
parent
9215cbef
Changes
9
Hide whitespace changes
Inline
Side-by-side
assets/scss/partials/article.scss
View file @
2be132ad
...
...
@@ -83,10 +83,10 @@
font-weight
:
600
;
margin
:
10px
0
;
color
:
var
(
--
card-text-color-main
);
font-size
:
2
.2
rem
;
font-size
:
3
rem
;
@media
(
min-width
:
$on-desktop-large
)
{
font-size
:
2
.4
rem
;
font-size
:
3
.2
rem
;
}
a
{
...
...
@@ -281,3 +281,44 @@
}
}
}
.button
,
button
{
padding
:
1rem
;
border-radius
:
4px
;
border-width
:
0
;
background-color
:
var
(
--
code-background-color
);
&
:hover
{
background-color
:
var
(
--
body-background
);
}
}
.mastodon-comment
{
background-color
:
var
(
--
body-background
);
border-radius
:
var
(
--
card-border-radius
);
padding
:
var
(
--
card-padding
);
margin-bottom
:
1rem
;
display
:
flex
;
.content
{
flex-grow
:
2
;
}
.avatar
img
{
margin-right
:
1rem
;
min-width
:
60px
;
}
.author
{
padding-top
:
0
;
display
:
flex
;
.date
{
margin-left
:
auto
;
}
}
.disabled
{
color
:
var
(
--
accent-color
)
}
}
.mastodon-comment-content
p
:first-child
{
margin-top
:
0
;
}
assets/scss/style.scss
View file @
2be132ad
...
...
@@ -36,6 +36,7 @@ a {
}
&
.link
{
text-decoration
:
underline
;
box-shadow
:
0px
-2px
0px
rgba
(
var
(
--
link-background-color
)
,
var
(
--
link-background-opacity
))
inset
;
transition
:
all
0
.3s
ease
;
...
...
assets/scss/variables.scss
View file @
2be132ad
...
...
@@ -19,7 +19,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
--accent-color
:
#34495e
;
--accent-color-darker
:
#2c3e50
;
--accent-color-text
:
#fff
;
--body-text-color
:
#
bababa
;
--body-text-color
:
#
555
;
--tag-border-radius
:
4px
;
...
...
@@ -38,10 +38,10 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
* Global font family
*/
:root
{
--sys-font-family
:
-
apple-system
,
BlinkMacSystemFont
,
"Segoe UI"
,
"
Droid
Sans"
,
"
Helvetica
Neue
"
;
--sys-font-family
:
-
apple-system
,
BlinkMacSystemFont
,
"Segoe UI"
,
"
Noto
Sans"
,
Roboto
,
Helvetica
,
Arial
,
sans-serif
,
"Apple Color Emoji"
,
"Segoe UI Emoji"
,
"Segoe UI Symbol
"
;
--zh-font-family
:
"PingFang SC"
,
"Hiragino Sans GB"
,
"Droid Sans Fallback"
,
"Microsoft YaHei"
;
--base-font-family
:
"Lato"
,
var
(
--
sys-font-family
)
,
var
(
--
zh-font-family
);
--base-font-family
:
var
(
--
sys-font-family
)
,
var
(
--
zh-font-family
);
--code-font-family
:
Menlo
,
Monaco
,
Consolas
,
"Courier New"
;
}
...
...
content/post/2020-10-30-kde-org-hugo/index.md
View file @
2be132ad
...
...
@@ -5,6 +5,10 @@ locale: en
subtitle
:
Hugo and Gettext, a love story?
title
:
KDE.org migrated to Hugo
image
:
heading_hugo.png
comments
:
host
:
linuxrocks.online
username
:
carl
id
:
105105837504372590
---
[
KDE.org
](
https://kde.org
)
now uses
[
Hugo
](
https://gohugo.io
)
. Hugo is a fast and modern static site
...
...
content/post/2020-12-23-neochat-1.0/index.md
View file @
2be132ad
...
...
@@ -2,7 +2,6 @@
date
:
"
2020-12-23T00:00:00Z"
title
:
Announcing NeoChat 1.0, the KDE Matrix client
hideHeaderImage
:
true
draft
:
true
categories
:
-
KDE
-
Blog
...
...
@@ -11,6 +10,10 @@ tags:
-
NeoChat
-
KDE
image
:
neochat-drawer-open.png
comments
:
host
:
mastodon.technology
username
:
kde
id
:
105429538591797190
---
Matrix is an instant messaging system similar to Whatsapp or Telegram, but
...
...
@@ -62,7 +65,8 @@ A lot of care has been put into making NeoChat intuitive to use. For
example, copying with Ctrl+C and dragging and dropping images just work; and
the text field gets autofocused so that you are never writing into the void.
NeoChat also integrates an emoji picker, letting you use the greatest invention
of the 21st century.
of the
<del>
21st century
</del>
. (Note: someone in Mastodon pointed out that
Emojis are from the 20th century and appeared in 1997 in Japan.)
## Image Editor
...
...
@@ -90,7 +94,7 @@ libQuotient library to interact with the Matrix protocol. We would like to send
out a huge thank you to these two projects and their contributors. Without
them, NeoChat wouldn't have been possible.
NeoChat uses the
[
Kirigami framework
](
https://develop.kde.org/framework/kirigami
)
NeoChat uses the
[
Kirigami framework
](
https://develop.kde.org/framework
s
/kirigami
)
and QML to provide an elegant and convergent user interface.
## Translations
...
...
@@ -121,8 +125,11 @@ get a cool KDE T-Shirt, feel free to say hi.
## Tarballs
Unfortunally there was an error generating the tarbals, we are working on it
and new tarbals will be created shortly.
Version 1.0 of NeoChat is availabe
[
here
](
https://download.kde.org/stable/neochat/1.0/neochat-1.0.tar.xz
)
,
kquickimageeditor 0.1 is availabe
[
here
](
https://download.kde.org/stable/kquickimageeditor/0.1/kquickimageeditor-0.1.tar.xz
)
.
kquickimageeditor 0.1
.2
is availabe
[
here
](
https://download.kde.org/stable/kquickimageeditor/0.1/kquickimageeditor-0.1.
2.
tar.xz
)
.
Both packages are signed with my gpg key
[
14B0ED91B5783415D0AA1E0A06B35D38387B67BE
](
/gpg.html
)
.
A Flathub release will hopefully be released in the next few days. We will
...
...
content/post/2020-12-29-adding-comments-to-your-static-blog.md
0 → 100644
View file @
2be132ad
---
title
:
Adding comments to your static blog with Mastodon
date
:
"
2020-12-29T12:00:00Z"
comments
:
host
:
linuxrocks.online
username
:
carl
id
:
105463655803971969
---
One of the biggest disadvantages of static site generators is that
they are static and can't include comments.
There are multiples solutions to solve this problem. You could add
a third party blog engine like Disqus, but this has the drawback
of including a third-party tool with a bad privacy record in your
website. Another solution would be to host an open-source alternative
but this comes at the cost of a higher maintenance burden. Having
to host a database was something we wanted to avoid with a
static site generator.
In my opinion, a better solution is to leverage the Mastodon and
Fediverse platform. Mastodon is a decentralized social network
and it allows people to communicate with each other without
being on the same server. It is inspired by Twitter, but instead
of tweeting, you write toot.
When publishing an article, you now only need to also write a
simple toot linking to your article. Then Mastodon has a simple
API to fetch the answer to your toot. This is the code I made for
my Hugo powered blog, but it is easily adaptable for other static
site generators. It will create a button to load comments instead
of loading them for every visitor so that it decreases the load on your
mastodon server.
```
html
{{ with .Params.comments }}
<div
class=
"article-content"
>
<h2>
Comments
</h2>
<p>
You can use your Mastodon account to reply to this
<a
class=
"link"
href=
"https://{{ .host }}/@{{ .username }}/{{ .id }}"
>
post
</a>
.
</p>
<p><a
class=
"button"
href=
"https://{{ .host }}/interact/{{ .id }}?type=reply"
>
Reply
</a></p>
<p
id=
"mastodon-comments-list"
><button
id=
"load-comment"
>
Load comments
</button></p>
<noscript><p>
You need JavaScript to view the comments.
</p></noscript>
<script
src=
"/assets/js/purify.min.js"
></script>
<script
type=
"text/javascript"
>
function
escapeHtml
(
unsafe
)
{
return
unsafe
.
replace
(
/&/g
,
"
&
"
)
.
replace
(
/</g
,
"
<
"
)
.
replace
(
/>/g
,
"
>
"
)
.
replace
(
/"/g
,
"
"
"
)
.
replace
(
/'/g
,
"
'
"
);
}
document
.
getElementById
(
"
load-comment
"
).
addEventListener
(
"
click
"
,
function
()
{
document
.
getElementById
(
"
load-comment
"
).
innerHTML
=
"
Loading
"
;
fetch
(
'
https://{{ .host }}/api/v1/statuses/{{ .id }}/context
'
)
.
then
(
function
(
response
)
{
return
response
.
json
();
})
.
then
(
function
(
data
)
{
if
(
data
[
'
descendants
'
]
&&
Array
.
isArray
(
data
[
'
descendants
'
])
&&
data
[
'
descendants
'
].
length
>
0
)
{
document
.
getElementById
(
'
mastodon-comments-list
'
).
innerHTML
=
""
;
data
[
'
descendants
'
].
forEach
(
function
(
reply
)
{
reply
.
account
.
display_name
=
escapeHtml
(
reply
.
account
.
display_name
);
reply
.
account
.
emojis
.
forEach
(
emoji
=>
{
reply
.
account
.
display_name
=
reply
.
account
.
display_name
.
replace
(
`:
${
emoji
.
shortcode
}
:`
,
`<img src="
${
escapeHtml
(
emoji
.
static_url
)}
" alt="Emoji
${
emoji
.
shortcode
}
" height="20" width="20" />`
);
});
mastodonComment
=
`<div class="mastodon-comment">
<div class="avatar">
<img src="
${
escapeHtml
(
reply
.
account
.
avatar_static
)}
" height=60 width=60 alt="">
</div>
<div class="content">
<div class="author">
<a href="
${
reply
.
account
.
url
}
" rel="nofollow">
<span>
${
reply
.
account
.
display_name
}
</span>
<span class="disabled">
${
escapeHtml
(
reply
.
account
.
acct
)}
</span>
</a>
<a class="date" href="
${
reply
.
uri
}
" rel="nofollow">
${
reply
.
created_at
.
substr
(
0
,
10
)}
</a>
</div>
<div class="mastodon-comment-content">
${
reply
.
content
}
</div>
</div>
</div>`
;
document
.
getElementById
(
'
mastodon-comments-list
'
).
appendChild
(
DOMPurify
.
sanitize
(
mastodonComment
,
{
'
RETURN_DOM_FRAGMENT
'
:
true
}));
});
}
else
{
document
.
getElementById
(
'
mastodon-comments-list
'
).
innerHTML
=
"
<p>Not comments found</p>
"
;
}
});
});
</script>
</div>
{{ end }}
```
This code is using
[
DOMPurify
](
https://github.com/cure53/DOMPurify
)
to sanitize the input, since it is not a great idea to load data from
third party sources without sanitizing them first. Also thanks to
[
chrismorgan
](
https://news.ycombinator.com/item?id=25575111
)
, the code
was optimized and is more secure.
In my blog post, I can now add the following information to my
frontmatter, to make comments appears magically.
```
yaml
comments
:
host
:
linuxrocks.online
username
:
carl
id
:
105105837504372590
```
layouts/partials/article/article.html
View file @
2be132ad
<article
class=
"{{ if .Params.image }}has-image {{ end }}main-article"
>
{{ partial "article/components/header" . }}
{{ partial "article/components/header" . }}
{{ partial "article/components/content" . }}
{{ partial "article/components/content" . }}
{{ partial "article/components/footer" . }}
{{ with .Params.comments }}
<div
class=
"article-content"
>
<h2>
Comments
</h2>
<p>
You can use your Mastodon account to reply to this
<a
class=
"link"
href=
"https://{{ .host }}/@{{ .username }}/{{ .id }}"
>
post
</a>
.
</p>
<p><a
class=
"button"
href=
"https://{{ .host }}/interact/{{ .id }}?type=reply"
>
Reply
</a></p>
<p
id=
"mastodon-comments-list"
><button
id=
"load-comment"
>
Load comments
</button></p>
<noscript>
You need JavaScript to view the comments.
</noscript>
<script
src=
"/assets/js/purify.min.js"
></script>
<script
type=
"text/javascript"
>
function
escapeHtml
(
unsafe
)
{
return
unsafe
.
replace
(
/&/g
,
"
&
"
)
.
replace
(
/</g
,
"
<
"
)
.
replace
(
/>/g
,
"
>
"
)
.
replace
(
/"/g
,
"
"
"
)
.
replace
(
/'/g
,
"
'
"
);
}
{{ if or .Params.math .Site.Params.article.math }}
{{ partialCached "article/components/math.html" . }}
{{ end }}
</article>
\ No newline at end of file
document
.
getElementById
(
"
load-comment
"
).
addEventListener
(
"
click
"
,
function
()
{
document
.
getElementById
(
"
load-comment
"
).
innerHTML
=
"
Loading
"
;
fetch
(
'
https://{{ .host }}/api/v1/statuses/{{ .id }}/context
'
)
.
then
(
function
(
response
)
{
return
response
.
json
();
})
.
then
(
function
(
data
)
{
if
(
data
[
'
descendants
'
]
&&
Array
.
isArray
(
data
[
'
descendants
'
])
&&
data
[
'
descendants
'
].
length
>
0
)
{
document
.
getElementById
(
'
mastodon-comments-list
'
).
innerHTML
=
""
;
data
[
'
descendants
'
].
forEach
(
function
(
reply
)
{
reply
.
account
.
display_name
=
escapeHtml
(
reply
.
account
.
display_name
);
reply
.
account
.
emojis
.
forEach
(
emoji
=>
{
reply
.
account
.
display_name
=
reply
.
account
.
display_name
.
replace
(
`:
${
emoji
.
shortcode
}
:`
,
`<img src="
${
escapeHtml
(
emoji
.
static_url
)}
" alt="Emoji
${
emoji
.
shortcode
}
" height="20" width="20" />`
);
});
mastodonComment
=
`<div class="mastodon-comment">
<div class="avatar">
<img src="
${
escapeHtml
(
reply
.
account
.
avatar_static
)}
" height=60 width=60 alt="">
</div>
<div class="content">
<div class="author">
<a href="
${
reply
.
account
.
url
}
" rel="nofollow">
<span>
${
reply
.
account
.
display_name
}
</span>
<span class="disabled">
${
escapeHtml
(
reply
.
account
.
acct
)}
</span>
</a>
<a class="date" href="
${
reply
.
uri
}
" rel="nofollow">
${
reply
.
created_at
.
substr
(
0
,
10
)}
</a>
</div>
<div class="mastodon-comment-content">
${
reply
.
content
}
</div>
</div>
</div>`
;
document
.
getElementById
(
'
mastodon-comments-list
'
).
appendChild
(
DOMPurify
.
sanitize
(
mastodonComment
,
{
'
RETURN_DOM_FRAGMENT
'
:
true
}));
});
}
else
{
document
.
getElementById
(
'
mastodon-comments-list
'
).
innerHTML
=
"
<p>Not comments found</p>
"
;
}
});
});
</script>
</div>
{{ end }}
{{ partial "article/components/footer" . }}
{{ if or .Params.math .Site.Params.article.math }}
{{ partialCached "article/components/math.html" . }}
{{ end }}
</article>
layouts/partials/head/style.html
View file @
2be132ad
{{ $sass := resources.Get "scss/style.scss" }}
{{ $style := $sass | resources.ToCSS | minify }}
<link
rel=
"stylesheet"
href=
"{{ $style.RelPermalink }}"
>
\ No newline at end of file
{{ $style := $sass | resources.ToCSS | minify | fingerprint }}
<link
rel=
"stylesheet"
href=
"{{ $style.RelPermalink }}?{{ $style.Data.Integrity }}"
>
layouts/post/single.html
View file @
2be132ad
...
...
@@ -18,4 +18,4 @@
{{ partialCached "footer/footer" . }}
{{- partialCached "article/components/photoswipe.html" . -}}
{{ end }}
\ No newline at end of file
{{ end }}
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment