Implement backlinks

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Add `classic-article-list` mod for returning the classic article list style.
+- Add `config.extra.show_backlinks` config variable for showing the backlinks button for linked articles in the article's quick actions.
 - Add `fediverse:creator` meta tag.
 - Add `title` class for use on `<strong>`.
 - Add support for Fuse.js search (#101).

config.toml

@@ -134,10 +134,10 @@ show_copy_button = true
 # Whether to show estimated read time in posts.
 show_reading_time = true
 #
-# Whether to show a share button in articles.
+# Whether to show a share button in article's quick actions.
 # Uses https://shareopenly.org.
 show_share_button = true
-# Whether to show the "Read Also" section with articles linked to in the article
+# Whether to show the backlinks button for linked articles in the article's quick actions
 show_backlinks = true
 # Whether to enable the KaTeX library for rendering LaTeX.
 # Note: This will make your page significantly heavier.

i18n/ar.toml

@@ -18,6 +18,7 @@ Coffee = "القهوة"
 all_tags = "انظر جميع العلامات"
 archived = "الأرشيف"
 author = "الكاتب"
+backlinks = "الروابط الخلفية"
 blog_post_author = "كاتب منشور المدونة"
 boosts_from = "$INSTANCE التعزيزات من"
 by_author = "بقلم $AUTHOR"

i18n/en.toml

@@ -18,6 +18,7 @@ Coffee = "Coffee"
 all_tags = "See all tags"
 archived = "Archived"
 author = "Author"
+backlinks = "Backlinks"
 blog_post_author = "Blog post author"
 boosts_from = "Boosts from $INSTANCE"
 by_author = "By $AUTHOR"

i18n/es.toml

@@ -18,6 +18,7 @@ Coffee = "Café"
 all_tags = "Ver todas las etiquetas"
 archived = "Archivado"
 author = "Autor"
+backlinks = "Enlaces de retroceso"
 blog_post_author = "Autor del post"
 boosts_from = "Boosts de $INSTANCE"
 by_author = "Por $AUTHOR"

i18n/fa.toml

@@ -18,6 +18,7 @@ Coffee = "قهوه"
 all_tags = "دیدن تمامی برچسب ها"
 archived = "بایگانی شده"
 author = "نویسنده"
+backlinks = "بک لینک ها"
 blog_post_author = "نویسنده‌ی این مطلب"
 boosts_from = "$INSTANCE تقویت از"
 by_author = "از $AUTHOR"

i18n/ms.toml

@@ -18,6 +18,7 @@ Coffee = "Kopi"
 all_tags = "Lihat semua tag"
 archived = "Diarkibkan"
 author = "Pengarang"
+backlinks = "Pautan balik"
 blog_post_author = "Pengarang siaran blog"
 boosts_from = "Galakkan dari $INSTANCE"
 by_author = "Dari $AUTHOR"

i18n/ru.toml

@@ -22,6 +22,7 @@ Coffee = "Кофе"
 all_tags = "Показать все теги"
 archived = "Архив"
 author = "Автор"
+backlinks = "Обратные ссылки"
 blog_post_author = "Автор блог-поста"
 boosts_from = "Продвижения с $INSTANCE"
 by_author = "От $AUTHOR"

i18n/zh-Hans.toml

@@ -19,6 +19,7 @@ Coffee = "赞助"
 all_tags = "查看所有标签"
 archived = "归档"
 author = "作者"
+backlinks = "反向链接"
 blog_post_author = "博客作者"
 boosts_from = "来自 $INSTANCE 的转发"
 by_author = "由 $AUTHOR 创作"

sass/_article.scss

@@ -68,11 +68,11 @@
 	@media only screen and (max-width: 720px) {
 		position: static;
 		flex-direction: row-reverse;
-		align-items: flex-end;
+		// justify-content: center;
 		margin-block-start: 2rem;
 	}
 
-	#toc summary,
+	summary,
 	#go-to-top,
 	#share,
 	#issue {
@@ -101,7 +101,7 @@
 		}
 	}
 
-	#toc {
+	details {
 		position: relative;
 		box-shadow: none;
 		border-radius: 0;
@@ -110,21 +110,21 @@
 
 		&[open] summary~* {
 			transform-origin: bottom right;
-			animation: toc-open var(--transition);
+			animation: button-dropdown-open var(--transition);
 
 			:root[dir*="rtl"] & {
 				transform-origin: bottom left;
-				animation: toc-open-rtl var(--transition);
+				animation: button-dropdown-open-rtl var(--transition);
 			}
 
-			@keyframes toc-open {
+			@keyframes button-dropdown-open {
 				from {
 					transform: scale(0.5) translate(1rem, 1rem);
 					opacity: 0;
 				}
 			}
 
-			@keyframes toc-open-rtl {
+			@keyframes button-dropdown-open-rtl {
 				from {
 					transform: scale(0.5) translate(-1rem, 1rem);
 					opacity: 0;
@@ -136,67 +136,88 @@
 			&::before {
 				display: none;
 			}
+		}
+	}
 
-			.icon {
+	summary + div {
-				--icon: 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");
+		-webkit-backdrop-filter: var(--blur);
-				-webkit-mask-image: var(--icon);
+		display: flex;
-				mask-image: var(--icon);
+		position: absolute;
+		flex-direction: column;
+		z-index: 1;
+		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), calc(90vw - 3rem));
+		max-height: 50vh;
 
-				:root[dir*="rtl"] & {
+		@media only screen and (max-width: 720px) {
-					transform: scaleX(-1);
+			inset-inline-end: 2.5rem;
-				}
+			width: min(calc(var(--container-width) / 3), calc(90vw - 2.5rem));
+		}
+
+		strong.title {
+			color: var(--fg-muted-4);
+		}
+
+		div {
+			--mask: linear-gradient(to bottom, transparent, black 1rem, black calc(100% - 1rem), transparent);
+			-webkit-mask-image: var(--mask);
+			flex: 1;
+			mask-image: var(--mask);
+			margin: 0 -1rem -1rem;
+			padding: 1rem;
+			padding-block-start: 0;
+			overflow: auto;
+		}
+
+		ol,
+		ul {
+			margin: 0;
+			padding-inline-start: 0.75rem;
+			font-size: var(--font-size-small);
+
+			&:first-child {
+				margin-block-start: 0.75rem;
+			}
+
+			li::marker {
+				color: var(--fg-muted-5);
+			}
+
+			a {
+				color: var(--fg-muted-5);
+			}
+		}
+	}
+
+	#toc .icon {
+		--icon: 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");
+		-webkit-mask-image: var(--icon);
+		mask-image: var(--icon);
+
+		:root[dir*="rtl"] & {
+			transform: scaleX(-1);
+		}
+	}
+
+	#backlinks {
+		.icon {
+			--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M5 14a1 1 0 0 1-.707-.293l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 1 1 1.414 1.414L3.414 8H12c1.117 0 2-.883 2-2s-.883-2-2-2c-.55 0-1-.45-1-1s.45-1 1-1c2.2 0 4 1.8 4 4s-1.8 4-4 4H3.414l2.293 2.293A1 1 0 0 1 5 14m0 0'/%3E%3C/svg%3E");
+			-webkit-mask-image: var(--icon);
+			mask-image: var(--icon);
+	
+			:root[dir*="rtl"] & {
+				transform: scaleX(-1);
 			}
 		}
 
-		#toc-dropdown {
+		summary + div {
-			-webkit-backdrop-filter: var(--blur);
+			width: min(calc(var(--container-width) / 3), calc(90vw - 5rem));
-			display: flex;
-			position: absolute;
-			flex-direction: column;
-			z-index: 1;
-			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), calc(90vw - 3rem));
-			max-height: 50vh;
-
-			strong.title {
-				color: var(--fg-muted-4);
-			}
-
-			div {
-				--mask: linear-gradient(to bottom, transparent, black 1rem, black calc(100% - 1rem), transparent);
-				-webkit-mask-image: var(--mask);
-				flex: 1;
-				mask-image: var(--mask);
-				margin: 0 -1rem -1rem;
-				padding: 1rem;
-				padding-block-start: 0;
-				overflow: auto;
-			}
-
-			ol,
-			ul {
-				margin: 0;
-				padding-inline-start: 0.75rem;
-				font-size: var(--font-size-small);
-
-				&:first-child {
-					margin-block-start: 0.75rem;
-				}
-
-				li::marker {
-					color: var(--fg-muted-5);
-				}
-
-				a {
-					color: var(--fg-muted-5);
-				}
-			}
 		}
 	}
 

templates/article.html

@@ -74,7 +74,7 @@
 		{%- if page.extra.toc and page.toc | length > 0 -%}
 			<details id="toc" class="closable">
 				<summary title="{{ macros_translate::translate(key='table_of_contents', default='Table of Contents', language_strings=language_strings) }}"><i class="icon"></i></summary>
-				<div id="toc-dropdown">
+				<div>
 					<strong class="title">{{ macros_translate::translate(key="table_of_contents", default="Table of Contents", language_strings=language_strings) }}</strong>
 					<div>
 						<{{ list_element }}>
@@ -97,6 +97,23 @@
 				</div>
 			</details>
 		{%- endif -%}
+		{%- if config.extra.show_backlinks and page.backlinks | length > 0 -%}
+			<details id="backlinks" class="closable">
+				<summary title="{{ macros_translate::translate(key='backlinks', default='Backlinks', language_strings=language_strings) }}"><i class="icon"></i></summary>
+				<div>
+					<strong class="title">{{ macros_translate::translate(key="backlinks", default="Backlinks", language_strings=language_strings) }}</strong>
+					<div>
+						<ul>
+							{%- for backlink in page.backlinks -%}
+								<li>
+									<a href="{{ backlink.permalink }}">{{ backlink.title }}</a>
+								</li>
+							{%- endfor -%}
+						</ul>
+					</div>
+				</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>
@@ -117,17 +134,6 @@
 	{{ page.content | safe }}
 </article>
 
-{%- if config.extra.show_backlinks and page.backlinks | length > 0 -%}
-	<h2>{{ macros_translate::translate(key="backlinks", default="Backlinks", language_strings=language_strings) }}</h2>
-	<ul>
-		{%- for backlink in page.backlinks -%}
-			<li>
-				<a href="{{ backlink.permalink }}">{{ backlink.title }}</a>
-			</li>
-		{%- endfor -%}
-	</ul>
-{%- endif -%}
-
 {%- if page.extra.comments.id -%}
 	{% include "partials/comments.html" %}
 {%- endif -%}