Add .drone.yml

.drone.yml

@@ -3,39 +3,22 @@ kind: pipeline
 type: docker
 name: Deploy to bbaovanc.com
 
-trigger:
-    branch:
-        - master
-    event:
-        exclude:
-            - pull_request
-
 steps:
-    - name: submodules
-      image: alpine/git
-      commands:
-          - git submodule update --init --recursive
-
-    - name: build
-      image: bbaovanc/hugo
+    - name: Build site
+      image: mapitman/docker-hugo
       commands:
           - hugo version
           - hugo --minify
 
-    - name: list files
-      image: alpine:latest
-      commands:
-          - find public/
-
-    - name: upload
+    - name: Upload files
       image: appleboy/drone-scp
-      settings:
+      aettings:
           host: bbaovanc.com
           port: 2222
           username: droneci
           key:
               from_secret: SSH_KEY
-          target: /var/www/bbaovanc/blog/
+          target: /var/www/bbaovanc/blog
           rm: true
-          source: public/
-          strip_components: 1
+          source:
+              - public/*

.gitmodules

@@ -1,3 +1,3 @@
-[submodule "themes/hugo-bearblog"]
-	path = themes/hugo-bearblog
-	url = https://github.com/janraasch/hugo-bearblog.git
+[submodule "themes/terminal"]
+	path = themes/terminal
+	url = https://github.com/panr/hugo-theme-terminal.git

archetypes/blog.md

@@ -1,13 +0,0 @@
-+++
-title = "{{ replace .Name "-" " " | title }}"
-date = "{{ .Date }}"
-# Format date like 2006-01-02 (it gives an error if I use .Format)
-
-description = """
-Lorem ipsum
-"""
-
-tags = [
-    "",
-]
-+++

archetypes/default.md

@@ -1,8 +1,6 @@
-+++
-title = "{{ replace .Name "-" " " | title }}"
-menu = "main"
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+draft: true
+---
 
-description = """
-Lorem ipsum
-"""
-+++

config.toml

@@ -1,62 +1,105 @@
+baseURL = "https://bbaovanc.com/blog/"
+languageCode = "en-us"
+theme = "terminal"
+paginate = 5
+enableGitInfo = true
 
-baseURL = "https://bbaovanc.com"
-
-# The name of this wonderful theme ;-).
-theme = 'hugo-bearblog'
-
-# Basic metadata configuration for your blog.
-title = "bbaovanc's blog"
-author = "bbaovanc"
-copyright = "Copyright © 2021, bbaovanc."
-languageCode = "en-US"
-
-# Generate a nice robots.txt for SEO
-enableRobotsTXT = true
-
-# Generate "Bearblog"-like URLs !only!, see https://bearblog.dev/.
-disableKinds = ["taxonomy"]
-ignoreErrors = ["error-disable-taxonomy"]
-[permalinks]
-  #blog = "/:slug/"
-  tags = "/blog/:slug"
+# [permalinks]
+#   posts = "/:year/:month/:title/"
 
 [params]
-  # The "description" of your website. This is used in the meta data of your generated html.
-  description = "My personal blog site"
+  # dir name of your main content (default is `content/posts`).
+  # the list of set content will show up on your index page (baseurl).
+  contentTypeName = "posts"
 
-  # The path to your "favicon". This should be a square (at least 32px x 32px) png-file.
-  # Hint: It's good practise to also put a "favicon.ico"-file into your "static"-folder.
-  favicon = "img/favicon.ico"
+  # ["orange", "blue", "red", "green", "pink"]
+  themeColor = "blue"
 
-  # These "images" are used for the structured data templates. This will show up, when
-  # services like Twitter or Slack want to generate a preview of a link to your site.
-  # See https://gohugo.io/templates/internal#twitter-cards and
-  # https://gohugo.io/templates/internal#open-graph.
-  images = ["img/favicon.png"]
+  # if you set this to 0, only submenu trigger will be visible
+  showMenuItems = 6
 
-  # Another "title" :-). This one is used as the site_name on the Hugo's internal
-  # opengraph structured data template.
-  # See https://ogp.me/ and https://gohugo.io/templates/internal#open-graph.
-  title = "bbaovanc's blog"
+  # show selector to switch language
+  showLanguageSelector = false
 
-  # This theme will, by default, inject a made-with-line at the bottom of the page.
-  # You can turn it off, but we would really appreciate if you don’t :-).
-  # hideMadeWithLine = true
+  # set theme to full screen width
+  fullWidthTheme = false
 
-  # By default, this theme displays dates with a format like "02 Jan, 2006", but
-  # you can customize it by setting the `dateFormat` param in your site's config
-  # file. See [Hugo's Format function docs](https://gohugo.io/functions/format/)
-  # for details. An example TOML config that uses [ISO
-  # 8601](https://en.wikipedia.org/wiki/ISO_8601) format:
-  # dateFormat = "2006-01-02"
+  # center theme with default width
+  centerTheme = true
 
-[menu]
-  [[menu.main]]
-    identifier = "rss"
-    name = "RSS Feed"
-    url = "/blog/index.xml"
+  # set a custom favicon (default is a `themeColor` square)
+  favicon = "icon/favicon.ico"
 
-  [[menu.main]]
-    identifier = "git-repo"
-    name = "Source Code"
-    url = "https://git.bbaovanc.com/bbaovanc.com/blog"
+  # set post to show the last updated
+  # If you use git, you can set `enableGitInfo` to `true` and then post will automatically get the last updated
+  showLastUpdated = true
+  # Provide a string as a prefix for the last update date. By default, it looks like this: 2020-xx-xx [Updated: 2020-xx-xx] :: Author
+  # updatedDatePrefix = "Updated"
+
+  # set all headings to their default size (depending on browser settings)
+  # it's set to `true` by default
+  # oneHeadingSize = false
+
+[params.twitter]
+  # set Twitter handles for Twitter cards
+  # see https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started#card-and-content-attribution
+  # do not include @
+  creator = ""
+  site = ""
+
+[languages]
+  [languages.en]
+    languageName = "English"
+    title = "bbaovanc's blog"
+    subtitle = "My personal blog site"
+    owner = "bbaovanc"
+    keywords = ""
+    copyright = ""
+    menuMore = "Show more"
+    readMore = "Read more"
+    readOtherPosts = "Read other posts"
+    newerPosts = "Newer posts"
+    olderPosts = "Older posts"
+    missingContentMessage = "Page not found..."
+    missingBackButtonLabel = "Back to home page"
+
+    [languages.en.params.logo]
+      logoText = "bbaovanc's blog"
+      logoHomeLink = "/blog/"
+
+    [languages.en.menu]
+      [[languages.en.menu.main]]
+        identifier = "tags"
+        name = "Tags"
+        url = "/tags"
+        weight = 10
+
+      [[languages.en.menu.main]]
+        identifier = "links"
+        name = "Links"
+        url = "/links"
+        weight = 20
+
+      [[languages.en.menu.main]]
+        identifier = "rss"
+        name = "RSS Feed"
+        url = "/posts/index.xml"
+        weight = 30
+
+      [[languages.en.menu.main]]
+        identifier = "email-me"
+        name = "Email Me"
+        url = "mailto:contact@bbaovanc.com"
+        weight = 40
+
+      [[languages.en.menu.main]]
+        identifier = "main-website"
+        name = "Main Website"
+        url = "https://bbaovanc.com/"
+        weight = 50
+
+      [[languages.en.menu.main]]
+        identifier = "source-code"
+        name = "Source Code"
+        url = "https://git.bbaovanc.com/bbaovanc.com/blog"
+        weight = 60

content/_index.md

@@ -1,3 +0,0 @@
-This is my website.
-
-https://boba.best is also my website.

content/blog/new-comment-system-again.md

@@ -1,40 +0,0 @@
-+++
-title = "New Comment System (again)"
-date = "2021-04-17"
-aliases = [
-  "posts/new-comment-system-again/",
-]
-
-description = """
-I decided to switch my comment system from Isso to
-[Commento](https://www.commento.io/)
-"""
-
-tags = [
-  "announcement",
-  "hugo",
-  "blog",
-]
-+++
-
-## Isso vs Commento
-
-I know it's only been six days since I added Isso, but I decided to switch to a
-better comment system. Isso is meant to be simple, which means that it's missing
-a lot of features. Commento has a lot of features such as sticky (pinned)
-comments, spam detection, thread locking, email notifications (I couldn't get
-this working on Isso), and a nicer design. I also was able to write some
-[custom CSS rules][1] which make it look alright on my blog's theme. It also
-supports SSO, so I might add support for signing up with GitHub, and possibly
-GitLab.
-
-## Summary of the [first post]({{< ref "/blog/new-comment-system" >}})
-
-If you haven't read the
-[New Comment System]({{< ref "/blog/new-comment-system" >}}) post, here's the
-most important information. There's a comment section at the bottom of each post
-where you can view and post comments. You can post anonymously, or create an
-account so you can show your username and get email notifications. You can also
-upvote, downvote, and reply to other comments.
-
-[1]: https://git.bbaovanc.com/bbaovanc.com/blog/src/commit/478e15218313a33216d361de387b3bd878cd0ba6/assets/css/comments.css

content/contact.md

@@ -1,10 +0,0 @@
-+++
-title = "Contact"
-menu = "main"
-
-description = """
-List of ways to contact me
-"""
-+++
-
-- [Email me](mailto:contact@bbaovanc.com)

content/donate.md

@@ -1,18 +0,0 @@
-+++
-title = "Donate"
-menu = "main"
-
-description = """
-How to donate to me
-"""
-+++
-
-## Cryptocurrency Links
-
-Nano: `nano_1ewtme68x5gia1bjq3jx1ku5pcxzayipdxjmjrc3x8qjjpat4ria8ajhjoxd`
-
-Bitcoin: `bc1qj6h8z2tg9nxcl9ddnv9k798cru6asr6cpmj84m`
-
-Ethereum: `0x80DaED7e2BEF5d894b37fBd79d0609aa17c8Cabc`
-
-Monero: `45gGauNcWLNSobRMzk3rtfEpad7gGcEvegxCbEm6QYENdG4vag3fCVuFoKfdKSESeSEKyUNRGwAJyLaCQ6MC5AQ79DGcaRq`

content/gpg-fingerprints.md

@@ -1,17 +0,0 @@
-+++
-title = "GPG Fingerprints"
-menu = "main"
-
-description = """
-Fingerprint of my GPG key
-"""
-+++
-
-```
-sec   rsa4096 2020-08-31 [SC]
-      CB7CCED9209E47B9B99B8E1D18089E4E3CCF1D3A
-uid           [ultimate] BBaoVanC <bbaovanc@bbaovanc.com>
-uid           [ultimate] BBaoVanC <github@bbaovanc.com>
-uid           [ultimate] BBaoVanC <bbaovanc@boba.best>
-ssb   rsa4096 2020-08-31 [E]
-```

content/links.md

@@ -1,14 +1,9 @@
-+++
-title = "Links"
-menu = "main"
-aliases = [
-  "/blog/links/",
-]
+---
+title: "Links"
+toc: true
+---
 
-description = """
-Various links to my stuff
-"""
-+++
+---
 
 ## Other
 

content/posts/allow-non-root-processes-to-bind-to-privileged-ports.md

@@ -1,19 +1,18 @@
 +++
 title = "Allow Non Root Processes to Bind to Privileged Ports"
-date = "2021-03-28"
-aliases = [
-  "posts/allow-non-root-processes-to-bind-to-privileged-ports/",
-]
+date = "2021-03-28T20:03:16-05:00"
+author = "bbaovanc"
+tags = ["guide", "linux", "systemd"]
+keywords = ["linux", "privileged", "ports", "tutorial", "guide", "gitea",
+"systemd"]
 
 description = """
 In Linux, processes cannot bind to privileged ports (<=1024) unless they are
 running as root. Here's how to allow any process to bind to privileged ports.
 """
 
-tags = [
-  "guide",
-  "linux",
-]
+showFullContent = false
+toc = true
 +++
 
 ## Introduction

content/posts/checkra1n-gui-on-other-distros.md

@@ -1,25 +1,19 @@
 +++
 title = "Checkra1n GUI on Other Distros"
-date = "2021-03-25"
-aliases = [
-  "posts/checkra1n-gui-on-other-distros/",
-]
+date = "2021-03-25T21:19:51-05:00"
+author = "bbaovanc"
+cover = "/blog/media/checkra1n-gui-on-arch-linux.png"
+tags = ["guide", "linux", "archlinux", "jailbreak", "checkra1n"]
+keywords = ["checkra1n", "gui", "linux", "arch linux"]
 
 description = """
 You can run the GUI version of checkra1n on non Debian-based distributions.
 """
 
-tags = [
-  "guide",
-  "linux",
-  "archlinux",
-  "jailbreak",
-  "checkra1n",
-]
+showFullContent = false
+toc = true
 +++
 
-![Checkra1n GUI running on Arch Linux](/media/checkra1n-gui-on-arch-linux.webp)
-
 ## Introduction
 
 The official cross-distribution build of checkra1n only contains a CLI and TUI.

content/posts/edited-in-middle-of-message-discord.md

@@ -1,24 +1,19 @@
 +++
 title = "Put (edited) in the middle of a message in Discord"
-date = "2021-03-25"
-aliases = [
-  "posts/edited-in-middle-of-message-discord/",
-]
+date = "2021-03-25T18:48:34-05:00"
+author = "bbaovanc"
+cover = "media/discord-tricks/edited-in-middle-of-message.png"
+tags = ["tutorial", "discord", "discord-tricks"]
+keywords = ["discord", "edited"]
 
 description = """
 With a bit of trickery using the RLE character (U+202B), you can get the
 (edited) text on a message to be somewhere other than at the end of the message.
 """
 
-tags = [
-  "tutorial",
-  "discord",
-  "discord-tricks",
-]
+showFullContent = false
 +++
 
-![Example image](/media/discord-tricks/edited-in-middle-of-message.webp)
-
 ## Tutorial
 
 1. Copy the "right-to-left embedding" character (U+202A) to your clipboard.

content/posts/new-comment-system.md

@@ -1,19 +1,16 @@
 +++
 title = "New Comment System"
-date = "2021-04-11"
-aliases = [
-  "posts/new-comment-system/",
-]
+date = "2021-04-11T00:17:13-05:00"
+author = "bbaovanc"
+tags = ["announcement", "hugo", "blog"]
+keywords = ["hugo", "comment system", "blog", "isso"]
 
 description = """
 I added a comment system to my blog, using [Isso](https://posativ.org/isso/).
 """
 
-tags = [
-  "announcement",
-  "hugo",
-  "blog",
-]
+showFullContent = false
+toc = true
 +++
 
 ## About

content/posts/sed-text-substitution-in-discord.md

@@ -1,19 +1,15 @@
 +++
 title = "Text Substitution in Discord using `sed`"
-date = "2021-03-25"
-aliases = [
-  "posts/text-substitution-in-discord-using-sed/",
-]
+date = "2021-03-25T18:48:15-05:00"
+author = "bbaovanc"
+tags = ["tutorial", "discord", "discord-tricks"]
+keywords = ["discord", "sed", "text", "replacement"]
 
 description = """
 Discord has (very primitive) support for text replacement using `sed` syntax.
 """
 
-tags = [
-  "tutorial",
-  "discord",
-  "discord-tricks",
-]
+showFullContent = false
 +++
 
 ## Tutorial

content/referral-codes.md

@@ -1,15 +0,0 @@
-+++
-title = "Referral Codes"
-menu = "main"
-aliases = [
-  "/referrals/",
-]
-
-description = """
-Referral codes for various services that I use/have used
-"""
-+++
-
-- [Vultr](https://www.vultr.com/?ref=8643438-6G)
-  - You get $100 to try out the service for a month
-  - I get $25 if you stay.

layouts/_default/single.html

@@ -1,20 +0,0 @@
-{{ define "main" }}
-<h1>{{ .Title }}</h1>
-{{ if eq .Type "blog" }}{{ if not .Params.menu }}
-<p>
-  <i>
-    <time datetime='{{ .Date.Format "2006-01-02" }}' pubdate>
-      {{ .Date.Format (default "02 Jan, 2006" .Site.Params.dateFormat) }}
-    </time>
-  </i>
-</p>
-{{ end }}{{ end }}
-<content>
-  {{ .Content }}
-</content>
-<p>
-  {{ range (.GetTerms "tags") }}
-  <a href="{{ .Permalink }}">#{{ .LinkTitle }}</a>
-  {{ end }}
-</p>
-{{ end }}

layouts/partials/comments.html

@@ -0,0 +1,274 @@
+<style>
+#isso-thread * {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+#isso-thread .isso-comment-header a {
+    text-decoration: none;
+}
+
+#isso-thread {
+    padding: 0;
+    margin: 0;
+}
+#isso-thread > h4 {
+    color: #555;
+    font-weight: bold;
+}
+#isso-thread > .isso-feedlink {
+    float: right;
+    padding-left: 1em;
+}
+#isso-thread > .isso-feedlink > a {
+    font-size: 0.8em;
+    vertical-align: bottom;
+}
+#isso-thread .textarea {
+    color: black;
+    min-height: 58px;
+    outline: 0;
+}
+#isso-thread .textarea.placeholder {
+    color: #757575;
+}
+
+#isso-root .isso-comment {
+    max-width: 68em;
+    padding-top: 0.95em;
+    margin: 0.95em auto;
+}
+#isso-root .preview .isso-comment {
+    padding-top: 0;
+    margin: 0;
+}
+#isso-root .isso-comment:not(:first-of-type),
+.isso-follow-up .isso-comment {
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+.isso-comment > div.avatar {
+    display: block;
+    float: left;
+    width: 7%;
+    margin: 3px 15px 0 0;
+}
+.isso-comment > div.avatar > svg {
+    max-width: 48px;
+    max-height: 48px;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 3px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.isso-comment > div.text-wrapper {
+    display: block;
+}
+.isso-comment .isso-follow-up {
+    padding-left: calc(7% + 20px);
+}
+.isso-comment > div.text-wrapper > .isso-comment-header, .isso-comment > div.text-wrapper > .isso-comment-footer {
+    font-size: 0.95em;
+}
+.isso-comment > div.text-wrapper > .isso-comment-header {
+    font-size: 0.85em;
+}
+.isso-comment > div.text-wrapper > .isso-comment-header .spacer {
+    padding: 0 6px;
+}
+.isso-comment > div.text-wrapper > .isso-comment-header .spacer,
+.isso-comment > div.text-wrapper > .isso-comment-header a.permalink,
+.isso-comment > div.text-wrapper > .isso-comment-header .note,
+.isso-comment > div.text-wrapper > .isso-comment-header a.parent {
+    color: gray !important;
+    font-weight: normal;
+    text-shadow: none !important;
+}
+.isso-comment > div.text-wrapper > .isso-comment-header .spacer:hover,
+.isso-comment > div.text-wrapper > .isso-comment-header a.permalink:hover,
+.isso-comment > div.text-wrapper > .isso-comment-header .note:hover,
+.isso-comment > div.text-wrapper > .isso-comment-header a.parent:hover {
+    color: #606060 !important;
+}
+.isso-comment > div.text-wrapper > .isso-comment-header .note {
+    float: right;
+}
+.isso-comment > div.text-wrapper > .isso-comment-header .author {
+    font-weight: bold;
+    color: #555;
+}
+.isso-comment > div.text-wrapper > .textarea-wrapper .textarea,
+.isso-comment > div.text-wrapper > .textarea-wrapper .preview {
+    margin-top: 0.2em;
+}
+.isso-comment > div.text-wrapper > div.text p {
+    margin-top: 0.2em;
+}
+.isso-comment > div.text-wrapper > div.text p:last-child {
+    margin-bottom: 0.2em;
+}
+.isso-comment > div.text-wrapper > div.text h1,
+.isso-comment > div.text-wrapper > div.text h2,
+.isso-comment > div.text-wrapper > div.text h3,
+.isso-comment > div.text-wrapper > div.text h4,
+.isso-comment > div.text-wrapper > div.text h5,
+.isso-comment > div.text-wrapper > div.text h6 {
+    font-size: 130%;
+    font-weight: bold;
+}
+.isso-comment > div.text-wrapper > div.textarea-wrapper .textarea,
+.isso-comment > div.text-wrapper > div.textarea-wrapper .preview {
+    width: 100%;
+    border: 1px solid #f0f0f0;
+    border-radius: 2px;
+    box-shadow: 0 0 2px #888;
+}
+.isso-comment > div.text-wrapper > .isso-comment-footer {
+    font-size: 0.80em;
+    color: gray !important;
+    clear: left;
+}
+.isso-feedlink,
+.isso-comment > div.text-wrapper > .isso-comment-footer a {
+    font-weight: bold;
+    text-decoration: none;
+}
+.isso-feedlink:hover,
+.isso-comment > div.text-wrapper > .isso-comment-footer a:hover {
+    color: #111111 !important;
+    text-shadow: #aaaaaa 0 0 1px !important;
+}
+.isso-comment > div.text-wrapper > .isso-comment-footer > a {
+    position: relative;
+    top: .2em;
+}
+.isso-comment > div.text-wrapper > .isso-comment-footer > a + a {
+    padding-left: 1em;
+}
+.isso-comment > div.text-wrapper > .isso-comment-footer .votes {
+    color: gray;
+}
+.isso-comment > div.text-wrapper > .isso-comment-footer .upvote svg,
+.isso-comment > div.text-wrapper > .isso-comment-footer .downvote svg {
+    position: relative;
+    top: .2em;
+}
+.isso-comment .isso-postbox {
+    margin-top: 0.8em;
+}
+.isso-comment.isso-no-votes > * > .isso-comment-footer span.votes {
+    display: none;
+}
+
+.isso-postbox {
+    max-width: 68em;
+    margin: 0 auto 2em;
+    clear: right;
+}
+.isso-postbox > .form-wrapper {
+    display: block;
+    padding: 0;
+}
+.isso-postbox > .form-wrapper > .auth-section,
+.isso-postbox > .form-wrapper > .auth-section .post-action {
+    display: block;
+}
+.isso-postbox > .form-wrapper .textarea,
+.isso-postbox > .form-wrapper .preview {
+    margin: 0 0 .3em;
+    padding: .4em .8em;
+    border-radius: 3px;
+    background-color: #fff;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.isso-postbox > .form-wrapper input[type=checkbox] {
+    vertical-align: middle;
+    position: relative;
+    bottom: 1px;
+    margin-left: 0;
+}
+.isso-postbox > .form-wrapper .notification-section {
+    font-size: 0.90em;
+    padding-top: .3em;
+}
+#isso-thread .textarea:focus,
+#isso-thread input:focus {
+    border-color: rgba(0, 0, 0, 0.8);
+}
+.isso-postbox > .form-wrapper > .auth-section .input-wrapper {
+    display: inline-block;
+    position: relative;
+    max-width: 25%;
+    margin: 0;
+}
+.isso-postbox > .form-wrapper > .auth-section .input-wrapper input {
+    padding: .3em 10px;
+    max-width: 100%;
+    border-radius: 3px;
+    background-color: #fff;
+    line-height: 1.4em;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.isso-postbox > .form-wrapper > .auth-section .post-action {
+    display: inline-block;
+    float: right;
+    margin: 0 0 0 5px;
+}
+.isso-postbox > .form-wrapper > .auth-section .post-action > input {
+    padding: calc(.3em - 1px);
+    border-radius: 2px;
+    border: 1px solid #CCC;
+    background-color: #DDD;
+    cursor: pointer;
+    outline: 0;
+    line-height: 1.4em;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.isso-postbox > .form-wrapper > .auth-section .post-action > input:hover {
+    background-color: #CCC;
+}
+.isso-postbox > .form-wrapper > .auth-section .post-action > input:active {
+    background-color: #BBB;
+}
+.isso-postbox > .form-wrapper .preview,
+.isso-postbox > .form-wrapper input[name="edit"],
+.isso-postbox.preview-mode > .form-wrapper input[name="preview"],
+.isso-postbox.preview-mode > .form-wrapper .textarea {
+    display: none;
+}
+.isso-postbox.preview-mode > .form-wrapper .preview {
+    display: block;
+}
+.isso-postbox.preview-mode > .form-wrapper input[name="edit"] {
+    display: inline;
+}
+.isso-postbox > .form-wrapper .preview {
+    background-color: #f8f8f8;
+    background: repeating-linear-gradient(
+        -45deg,
+        #f8f8f8,
+        #f8f8f8 10px,
+        #fff 10px,
+        #fff 20px
+    );
+}
+.isso-postbox > .form-wrapper > .notification-section {
+    display: none;
+    padding-bottom: 10px;
+}
+@media screen and (max-width:600px) {
+    .isso-postbox > .form-wrapper > .auth-section .input-wrapper {
+        display: block;
+        max-width: 100%;
+        margin: 0 0 .3em;
+    }
+    .isso-postbox > .form-wrapper > .auth-section .input-wrapper input {
+        width: 100%;
+    }
+}
+</style>
+<script data-isso="https://bbaovanc.com/isso/"
+        data-isso-css="false"
+        src="https://bbaovanc.com/isso/js/embed.min.js"></script>
+
+<section id="isso-thread"></section>