hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add share button and more (fixes #73)

Browse Source
This commit is contained in:
daudix
2024-09-17 01:40:25 +03:00
parent bd97b75c4f
commit 543d1bf862
10 changed files with 146 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -14,7 +14,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Add `--disabled-opacity` CSS variable for setting opacity of disabled elements.
- Add `--hover` CSS variable for setting zoom on hover.
- Add `--shadow-glass` CSS variable for setting shadow for glass-like elements.
- Add `config.extra.bundled_fonts` config variable to use custom fonts instead of system.
- Add `config.extra.bundled_fonts` config variable to use custom fonts instead of system (#44).
- Add `config.extra.show_share_button` confog variable for enabling share button in articles (#73).
- Add `external` class to comment timestamp.
- Add `h1` with page/section title by default.
- Add active state to footer's "Powered by" links.
@ -64,6 +65,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Show theme switcher if `config.extra.default_theme` is set, even if `config.extra.nav.show_theme_switcher` is not.
- Tweak `kbd` styling.
- Tweak padding of verified instance badge.
- Use logical inset properties instead of `top`, `right`, `bottom`, and `left`.
- Use more fitting cursors in some contexts.
- Use percents instead of decimals for color opacity.
- Use PNG instead of GIF for comments QR code to reduce download size.

3
config.toml
View File

@ -115,6 +115,9 @@ show_read_time = true
#
# words_per_minute = 200
#
# Whether to show a share button in articles.
# Uses https://shareopenly.org.
show_share_button = true
# Whether to enable the KaTeX library for rendering LaTeX.
# Note: This will make your page significantly heavier.
katex = true

6
content/demo/index.md
View File

@ -655,12 +655,12 @@ You know, <span class="spoiler solid">Duckquill is a pretty dumb name.</span> I
#color-picker-container {
-webkit-backdrop-filter: var(--blur);
position: fixed;
bottom: 1rem;
left: 0;
transform: translateX(calc(-100% + 1rem));
z-index: 1;
backdrop-filter: var(--blur);
transition: var(--transition);
inset-block-end: 1rem;
inset-inline-start: 0;
box-shadow: var(--edge-highlight), var(--shadow-glass);
border-start-end-radius: var(--rounded-corner);
border-end-end-radius: var(--rounded-corner);
@ -679,8 +679,6 @@ You know, <span class="spoiler solid">Duckquill is a pretty dumb name.</span> I
}
:root[dir*="rtl"] #color-picker-container {
right: 0;
left: unset;
transform: translateX(calc(100% - 1rem));
}

4
content/tricks/index.md
View File

@ -28,8 +28,8 @@ You can make navbar have more traditional look:
```scss
#site-nav {
top: 0;
margin-block-start: 0;
inset-block-start: 0;
box-shadow: var(--shadow-glass);
border-radius: 0;
width: 100%;
@ -66,8 +66,8 @@ Or you can make it sticked to top but not full-width:
```scss
#site-nav {
top: 0;
margin-block-start: 0;
inset-block-start: 0;
box-shadow: var(--shadow-glass);
border-radius: 0 0 calc(var(--rounded-corner) + 0.5rem) calc(var(--rounded-corner) + 0.5rem);

14
sass/_article-list.scss
View File

@ -73,21 +73,16 @@
&.poor {
&::before {
position: absolute;
top: 50%;
right: -3rem;
transform: translateY(-50%);
opacity: 0.5;
z-index: -1;
mask-size: cover;
transition: var(--transition-longer);
inset-block-start: 50%;
inset-inline-end: -3rem;
width: 12rem;
height: 12rem;
content: "";
:root[dir*="rtl"] & {
right: unset;
left: -3rem;
}
}
&:hover::before {
@ -268,11 +263,6 @@
width: 1rem;
height: 1rem;
}
:root[dir*="rtl"] & {
right: unset;
left: 0;
}
}
.draft-badge {

114
sass/_article.scss
View File

@ -1,23 +1,23 @@
#banner-container {
-webkit-user-select: none;
position: absolute;
top: 0;
left: 0;
z-index: -1;
mask-image: linear-gradient(black, transparent);
inset-block-start: 0;
inset-inline-start: 0;
width: 100vw;
height: 50vw; // hack to keep the aspect ratio 2:1
user-select: none;
#banner {
position: fixed;
top: 0;
left: 0;
transition: none;
margin: 0;
inset-block-start: 0;
inset-inline-start: 0;
}
& + h1 {
&+h1 {
margin-block-start: 35vw;
}
@ -26,8 +26,110 @@
margin-block-start: 50vw;
}
& + h1 {
&+h1 {
margin-block-start: 2rem;
}
}
}
#floating-buttons {
display: flex;
position: fixed;
flex-direction: column;
gap: 0.5rem;
inset-block-end: 1rem;
inset-inline-end: 1rem;
@media only screen and (max-width: 720px) {
display: none;
}
#toc summary,
#go-to-top,
#share,
#issue {
display: inline-block;
transition: var(--transition);
box-shadow: var(--edge-highlight);
border-radius: 999px;
background-color: var(--fg-muted-1);
padding: 0.5rem;
color: var(--fg-muted-4);
line-height: 0;
&:hover {
background-color: var(--fg-muted-2);
color: var(--fg-muted-5);
}
&:active {
transform: var(--active);
}
.icon {
transition: var(--transition);
width: 1rem;
height: 1rem;
}
}
#toc {
position: relative;
box-shadow: none;
border-radius: 0;
background-color: transparent;
padding: 0;
summary {
&::before {
display: none;
}
.icon {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M2 3a1 1 0 1 0 0 2 1 1 0 0 0 0-2m4 0c-.554 0-1 .446-1 1s.446 1 1 1h8c.554 0 1-.446 1-1s-.446-1-1-1ZM2 7a1 1 0 1 0 0 2 1 1 0 0 0 0-2m4 0c-.554 0-1 .446-1 1s.446 1 1 1h8c.554 0 1-.446 1-1s-.446-1-1-1Zm-4 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2m4 0c-.554 0-1 .446-1 1s.446 1 1 1h8c.554 0 1-.446 1-1s-.446-1-1-1z'/%3E%3C/svg%3E");
:root[dir*="rtl"] & {
transform: scaleX(-100%);
}
}
}
div {
-webkit-backdrop-filter: var(--blur);
position: absolute;
backdrop-filter: var(--blur);
inset-block-end: 0;
inset-inline-end: 3rem;
box-shadow: var(--edge-highlight), var(--shadow-glass);
border-radius: var(--rounded-corner);
background-color: var(--nav-bg);
padding: 1rem;
width: min(calc(var(--container-width) / 3), 90vw);
h2 {
margin-block-start: 0;
color: var(--fg-muted-4);
font-weight: bold;
font-size: var(--font-size-x-large);
font-family: var(--font-system-ui);
}
ul {
margin-block-start: 0;
padding-inline-start: 0.75rem;
}
}
}
#go-to-top .icon {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M1 11a1 1 0 0 1 .293-.707l6-6a1 1 0 0 1 1.414 0l6 6a1 1 0 1 1-1.414 1.414L8 6.414l-5.293 5.293A1 1 0 0 1 1 11m0 0'/%3E%3C/svg%3E");
}
#share .icon {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 1a1 1 0 0 0-.5.135 1 1 0 0 0-.207.158l-3 3a1 1 0 0 0 0 1.414 1 1 0 0 0 1.414 0L7 4.414V10a1 1 0 0 0 1 1 1 1 0 0 0 1-1V4.414l1.293 1.293a1 1 0 0 0 1.414 0 1 1 0 0 0 0-1.414L8.738 1.326 8.7 1.287a1 1 0 0 0-.195-.15l-.008-.004a1 1 0 0 0-.236-.098h-.004A1 1 0 0 0 8 1M4 7c-1.645 0-3 1.355-3 3v2c0 1.645 1.355 3 3 3h8c1.645 0 3-1.355 3-3v-2c0-1.645-1.355-3-3-3a1 1 0 0 0 0 2c.564 0 1 .436 1 1v2c0 .564-.436 1-1 1H4c-.564 0-1-.436-1-1v-2c0-.564.436-1 1-1a1 1 0 0 0 0-2'/%3E%3C/svg%3E");
}
#issue .icon {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M5 0c-.55 0-1 .45-1 1 0 .691.39 1.285.8 1.605C4.298 3.277 4 4.105 4 5H3V4H1v1c0 .832.563 1.523 1.05 1.77.493.246.95.23.95.23h1v1H1v2h3v1H3s-.457-.016-.95.23C1.563 11.477 1 12.168 1 13v3h2v-3h1.129c.45 1.719 2.016 3 3.871 3s3.422-1.281 3.871-3H13v3h2v-3c0-.832-.562-1.523-1.05-1.77-.493-.246-.95-.23-.95-.23h-1v-1h3V8h-3V7h1s.457.016.95-.23C14.437 6.523 15 5.832 15 5V4h-2v1h-1c0-.895-.297-1.723-.8-2.395.41-.32.8-.914.8-1.605 0-.55-.45-1-1-1s-1 .45-1 1a1 1 0 0 0-.645.238C8.93 1.086 8.473 1 8 1s-.93.086-1.355.238A1 1 0 0 0 6 1c0-.55-.45-1-1-1m2.969 5.031h.062A.97.97 0 0 1 9 6v3.063a.97.97 0 0 1-.969.968H7.97A.97.97 0 0 1 7 9.062V6a.97.97 0 0 1 .969-.969m0 6h.062A.97.97 0 0 1 9 12v.063a.97.97 0 0 1-.969.968H7.97a.97.97 0 0 1-.97-.969V12a.97.97 0 0 1 .969-.969m0 0'/%3E%3C/svg%3E");
}
}

12
sass/_input.scss
View File

@ -62,8 +62,8 @@ input[type="radio"] {
border-radius: 50%;
&::before {
top: 0.125rem;
left: 0.125rem;
inset-block-start: 0.125rem;
inset-inline-start: 0.125rem;
border-radius: 50%;
width: 0.5rem;
height: 0.5rem;
@ -75,11 +75,11 @@ input[type="checkbox"] {
border-radius: calc(var(--rounded-corner-small) / 2);
&::before {
top: -0.125rem;
left: -0.125rem;
transform-origin: bottom left;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M13.754 4.668c.176-.2.262-.461.246-.723a1 1 0 0 0-.34-.687 1 1 0 0 0-.726-.246 1 1 0 0 0-.688.34L5.95 10.547 3.707 8.3A1 1 0 0 0 2 9.01a1 1 0 0 0 .293.708l3 3c.195.195.465.3.742.293.278-.012.535-.133.719-.344zm0 0'/%3E%3C/svg%3E");
mask-size: cover;
inset-block-start: -0.125rem;
inset-inline-start: -0.125rem;
width: 1rem;
height: 1rem;
}
@ -104,13 +104,13 @@ input[type="checkbox"] {
}
&::before {
top: 0.25rem;
left: 0.25rem;
transform: none;
transform-origin: center;
opacity: 1;
mask-image: none;
transition: var(--transition);
inset-block-start: 0.25rem;
inset-inline-start: 0.25rem;
box-shadow: var(--shadow);
border-radius: 50%;
background-color: white;

10
sass/_nav.scss
View File

@ -1,10 +1,10 @@
#site-nav {
-webkit-backdrop-filter: var(--blur);
position: sticky;
top: 1rem;
z-index: 999;
backdrop-filter: var(--blur);
margin: 1rem auto;
inset-block-start: 1rem;
box-shadow: var(--edge-highlight), var(--shadow-glass);
border-radius: 1.625rem;
background-color: var(--nav-bg);
@ -20,13 +20,13 @@
#main-content {
-webkit-backdrop-filter: var(--blur);
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
opacity: 0;
z-index: 999;
backdrop-filter: var(--blur);
transition: var(--transition);
inset-block-start: 0;
box-shadow:
var(--edge-highlight),
var(--shadow-glass);
@ -37,8 +37,8 @@
text-decoration: none;
&:focus {
top: calc(100% + 0.5rem);
opacity: 1;
inset-block-start: calc(100% + 0.5rem);
}
}
@ -335,9 +335,9 @@
-webkit-backdrop-filter: var(--blur);
display: flex;
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
backdrop-filter: var(--blur);
inset-block-start: calc(100% + 0.5rem);
inset-inline-start: 0;
box-shadow: var(--edge-highlight), var(--shadow-glass);
border-radius: calc(var(--rounded-corner) + 0.5rem);
background-color: var(--nav-bg);

2
sass/_typography.scss
View File

@ -181,7 +181,7 @@ hr {
&::after {
position: relative;
top: -1.75rem;
inset-block-start: -1.75rem;
content: "☙❧";
color: var(--fg-muted-4);
font-size: var(--font-size-xx-large);

20
templates/article.html
View File

@ -72,13 +72,21 @@
</nav>
{%- endif -%}
<div class="dialog-buttons">
{# <a class="no-hover inline-button colored external" href="https://shareopenly.org/share/?url={{ page.permalink }}&text={{ page.description | urlencode }}">{{ macros_translate::translate(key="share", default="Share", language_strings=language_strings) }}</a> #}
<a class="inline-button" href="#top">{{ macros_translate::translate(key="go_to_top", default="Go to Top", language_strings=language_strings) }}</a>
<div id="floating-buttons">
{%- if page.extra.toc -%}
<details id="toc">
<summary title="{{ macros_translate::translate(key='table_of_contents', default='Table of Contents', language_strings=language_strings) }}"><i class="icon"></i></summary>
<div>
{%- include "partials/toc.html" -%}
</div>
</details>
{%- endif -%}
<a id="go-to-top" href="#top" title="{{ macros_translate::translate(key='go_to_top', default='Go to Top', language_strings=language_strings) }}"><i class="icon"></i></a>
{%- if config.extra.show_share_button -%}
<a id="share" href="https://shareopenly.org/share/?url={{ page.permalink }}&text={{ page.description | urlencode }}" rel="{{ rel_attributes }}" title="{{ macros_translate::translate(key='share', default='Share', language_strings=language_strings) }}"><i class="icon"></i></a>
{%- endif -%}
{%- if config.extra.issues_url -%}
<a class="inline-button colored external" href="{{ config.extra.issues_url }}" rel="{{ rel_attributes }}">
{{- macros_translate::translate(key="file_an_issue", default="File an Issue", language_strings=language_strings) -}}
</a>
<a id="issue" href="{{ config.extra.issues_url }}" rel="{{ rel_attributes }}" title="{{ macros_translate::translate(key='file_an_issue', default='File an Issue', language_strings=language_strings) }}"><i class="icon"></i></a>
{%- endif -%}
</div>
{% endblock content %}