commit f18c92c8984fee62a852639c48c5e451b2deee3a parent 05a8beaf9ccfd349809ad7ac5dcd7a1b223afd0e Author: Yohanes Bandung Bondowoso <hi@ybbond.id> Date: Thu, 20 May 2021 01:56:03 +0700 refactor: add in-post webmention form Diffstat:
| M | assets/content.css | | | 3 | ++- |
| M | assets/main.css | | | 24 | ++++++++++++++++++++++++ |
| M | assets/responsive.css | | | 9 | +++++++++ |
| M | assets/theme.css | | | 29 | +++++++++++++++++++++++++++-- |
| M | layouts/_default/single.html | | | 3 | +++ |
| A | layouts/partials/components/webmentions-form.html | | | 29 | +++++++++++++++++++++++++++++ |
| M | layouts/partials/post/responses-item.html | | | 14 | ++++++++------ |
| M | layouts/partials/post/webmentions-handler.html | | | 12 | ------------ |
8 files changed, 102 insertions(+), 21 deletions(-)
diff --git a/assets/content.css b/assets/content.css @@ -26,7 +26,8 @@ .content.notes.h-entry, .content.responses.h-entry { /*padding: 4px 10px 1px 10px;*/ padding: .1px; - outline: solid 1px black; + outline-style: solid; + outline-width: 1px; } .content figcaption { diff --git a/assets/main.css b/assets/main.css @@ -48,6 +48,10 @@ h1, h2, h3, h4, h5 { h1 a, h2 a, h3 a, h4 a, h5 a { font-family: var(--font-mono); } +input { + font-family: var(--font-text); + font-size: .9rem; +} h1:not(.header__title) { font-size: 2.2rem; @@ -184,6 +188,26 @@ time[title] { font-size: 0.9rem; } +.wm-form { + margin: 1rem 0 2rem; +} +.wm-form form { + display: flex; + flex-direction: row; +} +.wm-form__textfield { + padding: .5rem; + flex: 1; +} +.wm-form__button { + cursor: pointer; + display: inline-block; + padding: .5rem .7rem; + border-style: solid; + border-width: 1px; + margin-left: .5rem; +} + .wm-hr { margin-bottom: 0.2rem; } diff --git a/assets/responsive.css b/assets/responsive.css @@ -170,6 +170,15 @@ height: 325px; } + /* webmention */ + .wm-form form { + flex-direction: column; + } + .wm-form__button { + margin-top: .5rem; + margin-left: 0; + } + /* footer */ .footer__nav__right a { padding: 0 0.15rem; diff --git a/assets/theme.css b/assets/theme.css @@ -51,7 +51,7 @@ .notes:target, .responses:target { outline-color: var(--light-background-hover); } - .notes__title, .responses__title { + .notes__title, .responses__title, .content.notes.h-entry, .content.responses.h-entry { background-color: var(--light-background); outline-color: var(--light-text); } @@ -79,6 +79,18 @@ color: var(--light-text); } + /* webmention */ + .wm-form__button { + background-color: var(--light-background); + border-color: var(--light-blue); + color: var(--light-blue); + } + .wm-form__button:hover { + background-color: var(--light-background-hover); + border-color: var(--light-red); + color: var(--light-red); + } + /* footer */ .footer .hcard { border: solid 1px var(--light-border); @@ -141,9 +153,10 @@ .notes:target, .responses:target { outline-color: var(--dark-background-hover); } - .notes__title, .responses__title { + .notes__title, .responses__title, .content.notes.h-entry, .content.responses.h-entry { background-color: var(--dark-background); outline-color: var(--dark-text); + outline-width: 0.5px; } .view-full-size svg { @@ -169,6 +182,18 @@ color: var(--dark-text); } + /* webmention */ + .wm-form__button { + background-color: var(--dark-background); + border-color: var(--dark-blue); + color: var(--dark-blue); + } + .wm-form__button:hover { + background-color: var(--dark-background-hover); + border-color: var(--dark-red); + color: var(--dark-red); + } + /* footer */ .footer .hcard { border: solid 1px var(--dark-border); diff --git a/layouts/_default/single.html b/layouts/_default/single.html @@ -2,11 +2,13 @@ {{ if eq .Type "notes" }} <article class="single__micro"> {{- partial "post/notes-item.html" . -}} + {{ partial "components/webmentions-form.html" . }} {{ partial "post/webmentions-handler.html" . }} </article> {{ else if eq .Type "responses" }} <article class="single__micro"> {{- partial "post/responses-item.html" . -}} + {{ partial "components/webmentions-form.html" . }} {{ partial "post/webmentions-handler.html" . }} </article> {{ else }} @@ -54,6 +56,7 @@ </div> {{- if ne .Type "page" }} + {{ partial "components/webmentions-form.html" . }} {{ partial "post/webmentions-handler.html" . }} {{- else }} <br> diff --git a/layouts/partials/components/webmentions-form.html b/layouts/partials/components/webmentions-form.html @@ -0,0 +1,28 @@ +<hr class="wm-hr"> +<h3 class="wm-title" id="post-webmention-section"> + Webmentions <a + href="https://indieweb.org/Webmention" + rel="noopenner noreferrer" + target="_blank" + class="no-outline" + >?</a>: +</h3> + +<div class="wm-form"> + <form action="https://webmention.io/ybbond.id/webmention" method="post"> + <input aria-label="Webmention Source" name="source" placeholder="Paste the URL to your response of this post!" type="url" required="" class="wm-form__textfield"> + <input name="target" value="{{ .Permalink }}" type="hidden"> + <input value="Send Webmention" type="submit" class="wm-form__button"> + </form> + +<!-- + <div> + <form method="get" action="https://quill.p3k.io/" target="_blank"> + <input type="hidden" name="dontask" value="1"> + <input type="hidden" name="me" value="https://commentpara.de/"> + <input type="hidden" name="reply" value="https://hacdias.com/micro/2021/02/re-is-it-time-to-build-my-cms-errors/"> + <input type="submit" value="Write a comment"> + </form> + </div> +--> +</div>+ \ No newline at end of file diff --git a/layouts/partials/post/responses-item.html b/layouts/partials/post/responses-item.html @@ -35,12 +35,14 @@ </span> </a> </p> - <div class="responses__content e-content p-content"> + <div class="responses__content"> <p class="responses__original"><a class="u-in-reply-to" href={{ .Params.Destination.Url }}>{{ $title }}</a></p> - {{ if eq ($.Scratch.Get "scope") "single" }} - {{ partial "components/content.html" .Content }} - {{ else }} - {{ partial "components/preview.html" .Content }} - {{ end }} + <div class="e-content p-content"> + {{ if eq ($.Scratch.Get "scope") "single" }} + {{ partial "components/content.html" .Content }} + {{ else }} + {{ partial "components/preview.html" .Content }} + {{ end }} + </div> </div> </div> diff --git a/layouts/partials/post/webmentions-handler.html b/layouts/partials/post/webmentions-handler.html @@ -1,17 +1,5 @@ {{ with index $.Site.Data.webmentions (replace (trim .RelPermalink "/") "/" "--") }} - <hr class="wm-hr"> <div class="wm-div"> - {{- with where . "wm-property" "in" (slice "like-of" "repost-of" "bookmark-of" "rsvp" "in-reply-to" "mention-of") }} - <h3 class="wm-title"> - Webmentions <a - href="https://indieweb.org/Webmention" - rel="noopenner noreferrer" - target="_blank" - class="no-outline" - >?</a>: - </h3> - {{- end }} - {{ with where . "wm-property" "in" (slice "repost-of" "bookmark-of" "rsvp") -}} <p class="wm-subtitle">Reposted/Boosted by:</p> {{- range . }}