From b7ed911abaaaa61ef1d100b7fb712bcf2841b63b Mon Sep 17 00:00:00 2001
From: earnest ma
Date: Fri, 5 Feb 2021 16:55:57 -0500
Subject: [PATCH] feat: Add support for comments from Mastodon posts (API)
Can be replied to from the Fediverse/ any ActivityPub-compatible instance.
---
assets/main.css | 614 +++++++++++++++-------------
layouts/blog/single.html | 7 +-
layouts/partials/fedi-comments.html | 74 ++++
3 files changed, 402 insertions(+), 293 deletions(-)
create mode 100644 layouts/partials/fedi-comments.html
diff --git a/assets/main.css b/assets/main.css
index 251757a..7d3869d 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -1,7 +1,6 @@
/* Adapted from Simple CSS (MIT License): https://simplecss.org/ */
/* Set the global variables for everything. Change these to use your own fonts/colours. */
:root {
-
/* Set sans-serif & mono fonts */
--sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif;
--mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
@@ -24,429 +23,466 @@
--accent: #bd93f9;
--accent-light: #bd93f9;
--code: #ff79c6;
- --preformatted: #CCC;
+ --preformatted: #ccc;
--marked: #f1fa8c;
- }
+}
- /* Dark theme */
- img, video {
- opacity: .6;
- }
+/* Dark theme */
+img,
+video {
+ opacity: 0.6;
+}
- * {
+* {
/* Set the font globally */
font-family: var(--sans-font);
- }
+}
- html {
+html {
font-size: 16px;
- }
+}
- /* Make the body a nice central block */
- body {
+/* Make the body a nice central block */
+body {
color: var(--text);
background: var(--bg);
font-size: var(--base-fontsize);
line-height: var(--line-height);
margin: 0;
- }
+}
- /* Make the main element a nice central block */
- main {
+/* Make the main element a nice central block */
+main {
margin: 1rem auto 0;
max-width: 45rem;
- padding: 0 .5rem;
- }
+ padding: 0 0.5rem;
+}
- /* Make the header bg full width, but the content inline with body */
- header {
- background: var(--accent-bg);
- border-bottom: 1px solid var(--border);
+/* Make the header bg full width, but the content inline with body */
+header {
+ background: var(--accent-bg);
+ border-bottom: 1px solid var(--border);
padding: 1.5rem 15rem;
margin-bottom: 3rem;
- }
+}
- /* Reduces header padding on smaller screens */
- @media only screen and (max-width: 1200px) {
+/* Reduces header padding on smaller screens */
+@media only screen and (max-width: 1200px) {
header {
- padding: 1rem;
+ padding: 1rem;
}
nav {
- text-align: center;
+ text-align: center;
}
- }
+}
- /* Remove margins for header text */
- header h1,
- header p {
+/* Remove margins for header text */
+header h1,
+header p {
margin: 0;
- }
+}
- /* Fix header line height when title wraps */
- header h2 {
+/* Fix header line height when title wraps */
+header h2 {
text-align: center;
line-height: 1.1;
- }
+}
- /* Format navigation */
- nav {
+/* Format navigation */
+nav {
font-size: 1rem;
line-height: 2;
padding: 1rem 0;
- }
+}
- nav a {
+nav a {
margin: 1rem 1rem 0 0;
border: 1px solid var(--border);
border-radius: 5px;
color: var(--text) !important;
display: inline-block;
- padding: .1rem 1rem;
+ padding: 0.1rem 1rem;
text-decoration: none;
- transition: .4s;
- }
+ transition: 0.4s;
+}
- nav a:hover {
+nav a:hover {
color: var(--accent) !important;
border-color: var(--accent);
- }
+}
- nav a.current:hover {
+nav a.current:hover {
text-decoration: none;
- }
+}
- footer {
+footer {
margin-top: 4rem;
padding: 2rem 1rem 1.5rem 1rem;
color: var(--text-light);
- font-size: .9rem;
+ font-size: 0.9rem;
text-align: center;
border-top: 1px solid var(--border);
- }
+}
- /* Format headers */
- h1 {
+/* Format headers */
+h1 {
font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale) * var(--header-scale));
margin-top: calc(var(--line-height) * 1.5rem);
- }
+}
- h2 {
+h2 {
font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale));
margin-top: calc(var(--line-height) * 1.5rem);
- }
+}
- h3 {
+h3 {
font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale));
margin-top: calc(var(--line-height) * 1.5rem);
- }
+}
- h4 {
+h4 {
font-size: calc(var(--base-fontsize) * var(--header-scale));
margin-top: calc(var(--line-height) * 1.5rem);
- }
+}
- h5 {
+h5 {
font-size: var(--base-fontsize);
margin-top: calc(var(--line-height) * 1.5rem);
- }
+}
- h6 {
+h6 {
font-size: calc(var(--base-fontsize) / var(--header-scale));
margin-top: calc(var(--line-height) * 1.5rem);
- }
+}
- /* Format links & buttons */
- a,
- a:visited {
+/* Format links & buttons */
+a,
+a:visited {
color: var(--accent);
- }
+}
- a:hover {
+a:hover {
text-decoration: none;
- }
+}
- a button,
- button,
- input[type="submit"],
- input[type="reset"],
- input[type="button"] {
+a button,
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
border: none;
border-radius: 5px;
background: var(--accent);
font-size: 1rem;
color: var(--bg);
- padding: .7rem .9rem;
- margin: .5rem 0;
- transition: .4s;
- }
+ padding: 0.7rem 0.9rem;
+ margin: 0.5rem 0;
+ transition: 0.4s;
+}
- a button[disabled],
- button[disabled],
- input[type="submit"][disabled],
- input[type="reset"][disabled],
- input[type="button"][disabled] {
- cursor: default;
- opacity: .5;
- cursor: not-allowed;
- }
+a button[disabled],
+button[disabled],
+input[type="submit"][disabled],
+input[type="reset"][disabled],
+input[type="button"][disabled] {
+ cursor: default;
+ opacity: 0.5;
+ cursor: not-allowed;
+}
- /* Set the cursor to '?' while hovering over an abbreviation */
- abbr {
- cursor: help;
- }
+/* Set the cursor to '?' while hovering over an abbreviation */
+abbr {
+ cursor: help;
+}
- button:focus,
- button:enabled:hover,
- input[type="submit"]:focus,
- input[type="submit"]:enabled:hover,
- input[type="reset"]:focus,
- input[type="reset"]:enabled:hover,
- input[type="button"]:focus,
- input[type="button"]:enabled:hover {
- opacity: .8;
- }
+button:focus,
+button:enabled:hover,
+input[type="submit"]:focus,
+input[type="submit"]:enabled:hover,
+input[type="reset"]:focus,
+input[type="reset"]:enabled:hover,
+input[type="button"]:focus,
+input[type="button"]:enabled:hover {
+ opacity: 0.8;
+}
- /* Format the expanding box */
- details {
- padding: .6rem 1rem;
- background: var(--accent-bg);
- border: 1px solid var(--border);
- border-radius: 5px;
+/* Format the expanding box */
+details {
+ padding: 0.6rem 1rem;
+ background: var(--accent-bg);
+ border: 1px solid var(--border);
+ border-radius: 5px;
margin-bottom: 1rem;
- }
+}
- summary {
- cursor: pointer;
- font-weight: bold;
- }
-
- details[open] {
- padding-bottom: .75rem;
- }
-
- details[open] summary {
- margin-bottom: .5rem;
- }
-
- details[open]>*:last-child {
- margin-bottom: 0;
- }
-
- /* Format tables */
- table {
- border-collapse: collapse;
- width: 100%
- }
-
- td,
- th {
- border: 1px solid var(--border);
- text-align: left;
- padding: .5rem;
- }
-
- th {
- background: var(--accent-bg);
+summary {
+ cursor: pointer;
font-weight: bold;
- }
+}
- tr:nth-child(even) {
- /* Set every other cell slightly darker. Improves readability. */
- background: var(--accent-bg);
- }
+details[open] {
+ padding-bottom: 0.75rem;
+}
- table caption {
- font-weight: bold;
- margin-bottom: .5rem;
- }
+details[open] summary {
+ margin-bottom: 0.5rem;
+}
- /* Lists */
- ol,
- ul {
- padding-left: 3rem;
- }
+details[open] > *:last-child {
+ margin-bottom: 0;
+}
- /* Format forms */
- textarea,
- select,
- input {
+/* Format tables */
+table {
+ border-collapse: collapse;
+ width: 100%;
+}
+
+td,
+th {
+ border: 1px solid var(--border);
+ text-align: left;
+ padding: 0.5rem;
+}
+
+th {
+ background: var(--accent-bg);
+ font-weight: bold;
+}
+
+tr:nth-child(even) {
+ /* Set every other cell slightly darker. Improves readability. */
+ background: var(--accent-bg);
+}
+
+table caption {
+ font-weight: bold;
+ margin-bottom: 0.5rem;
+}
+
+/* Lists */
+ol,
+ul {
+ padding-left: 3rem;
+}
+
+/* Format forms */
+textarea,
+select,
+input {
font-size: inherit;
font-family: inherit;
- padding: .5rem;
- margin-bottom: .5rem;
+ padding: 0.5rem;
+ margin-bottom: 0.5rem;
color: var(--text);
- background: var(--bg);
- border: 1px solid var(--border);
- border-radius: 5px;
- box-shadow: none;
- box-sizing: border-box;
+ background: var(--bg);
+ border: 1px solid var(--border);
+ border-radius: 5px;
+ box-shadow: none;
+ box-sizing: border-box;
width: 60%;
- }
+}
- /* Make the textarea wider than other inputs */
- textarea {
- width: 80%
- }
+/* Make the textarea wider than other inputs */
+textarea {
+ width: 80%;
+}
- /* Makes input fields wider on smaller screens */
- @media only screen and (max-width: 720px) {
+/* Makes input fields wider on smaller screens */
+@media only screen and (max-width: 720px) {
textarea,
select,
input {
- width: 100%;
+ width: 100%;
}
- }
+}
- /* Ensures the checkbox and radio inputs do not have a set width like other input fields */
- input[type="checkbox"], input[type="radio"]{
+/* Ensures the checkbox and radio inputs do not have a set width like other input fields */
+input[type="checkbox"],
+input[type="radio"] {
width: auto;
- }
+}
- /* do not show border around file selector button */
- input[type="file"] {
+/* do not show border around file selector button */
+input[type="file"] {
border: 0;
- }
+}
- /* Without this any HTML using
-
-
-
-
+{{ partial "fedi-comments" . }}
{{ if $.Site.Params.openring }}
{{ partial "openring-out" . -}}
{{ end }}
+
+
{{ end }}
diff --git a/layouts/partials/fedi-comments.html b/layouts/partials/fedi-comments.html
new file mode 100644
index 0000000..4475ddc
--- /dev/null
+++ b/layouts/partials/fedi-comments.html
@@ -0,0 +1,74 @@
+{{ with .Params.comments }}
+Comments
+
+
+ You may view
+ or reply
+ if you have an account anywhere in the Fediverse.
+
+
+
+
+
+
+
+{{ end }}