From f641c9dc6baee00d08fa955dd3fd60b23e589af2 Mon Sep 17 00:00:00 2001
From: Alexander Eble <35292572+alexanderdavide@users.noreply.github.com>
Date: Sun, 20 Jun 2021 16:51:03 +0000
Subject: [PATCH] Added External URL Redirect Option (#215)
---
exampleSite/content/english/post/redirect.md | 14 ++++
layouts/shortcodes/loading.html | 9 +++
exampleSite/config/_default/config.toml | 9 ++
layouts/partials/head.html | 12 +++
assets/css/spinner.css | 87 +++++++++++++++++++++++++++++
README.md | 14 +++-
6 files changed, 139 insertions(+), 6 deletions(-)
diff --git a/README.md b/README.md
index 6777884..2638ac0 100644
--- a/README.md
+++ b/README.md
@@ -599,6 +599,13 @@
rssFullContent = true
```
+### External Redirect URLs
+You can create pages, which redirect to another (external) URL with a short delay. This can be useful for migrating previously indexed URLs, which no longer exist, or for communicating complex external URLs to your readers.
+
+You will have to define a `redirectUrl` in the markdown header of the post or page, which you want to forward. An example can be found in the [redirect.md](https://github.com/lxndrblz/anatole/blob/master/exampleSite/content/english/post/redirect.md). The page will be automatically redirected with a delay of one second.
+
+Additionally, you can include the `{{% loading %}}` shortcode, which will display a spinner on the page that will be redirected. If it does not display, make sure that unsafe mode is enabled for `markup.goldmark.renderer`.
+
## License
Anatole is licensed under the [MIT license](https://github.com/lxndrblz/anatole/blob/master/LICENSE).
@@ -615,6 +622,7 @@
## Special Thanks 🎁
-- Go to [Cai Cai](https://github.com/hi-caicai), for the great Anatole Farbox theme that formed the foundation for this theme.
-- Go to [Kareya Saleh](https://unsplash.com/photos/tLKOj6cNwe0) for providing the profile picture in the exampleSite.
-- Go to [Ales Krivec](https://unsplash.com/photos/4miBe6zg5r0) for providing the thumbnail picture in the exampleSite post.
+- Go to [Cai Cai](https://github.com/hi-caicai), for the great Anatole [Farbox theme](https://github.com/hi-caicai/farbox-theme-Anatole) that formed the foundation for this theme.
+- Go to [Kareya Saleh](https://unsplash.com/photos/tLKOj6cNwe0) for providing the [profile picture](https://github.com/lxndrblz/anatole/blob/master/exampleSite/static/images/profile.jpg) used in the exampleSite.
+- Go to [Ales Krivec](https://unsplash.com/photos/4miBe6zg5r0) for providing the thumbnail picture used in the exampleSite [image-test post](https://github.com/lxndrblz/anatole/blob/master/exampleSite/content/english/post/image-test.md).
+- Go to [Tobias Ahlin](https://github.com/tobiasahlin) for his [SpinKit](https://github.com/tobiasahlin/SpinKit) that is used in the exampleSite [redirect post](https://github.com/lxndrblz/anatole/blob/master/exampleSite/content/english/post/redirect.md).
diff --git a/assets/css/spinner.css b/assets/css/spinner.css
new file mode 100644
index 0000000..6996de1
--- /dev/null
+++ b/assets/css/spinner.css
@@ -0,0 +1,87 @@
+:root {
+ --sk-size: 40px;
+ --sk-color: #333;
+}
+
+html[data-theme='dark'] {
+ --sk-color: rgb(169, 169, 179)
+}
+
+.sk-wrapper {
+ display: flex;
+ justify-content: center;
+ padding: 24px 0;
+}
+
+.sk-fold {
+ width: var(--sk-size);
+ height: var(--sk-size);
+ position: relative;
+ transform: rotateZ(45deg);
+}
+
+.sk-fold-cube {
+ float: left;
+ width: 50%;
+ height: 50%;
+ position: relative;
+ transform: scale(1.1);
+}
+
+.sk-fold-cube:before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: var(--sk-color);
+ animation: sk-fold 2.4s infinite linear both;
+ transform-origin: 100% 100%;
+}
+
+.sk-fold-cube:nth-child(2) {
+ transform: scale(1.1) rotateZ(90deg);
+}
+
+.sk-fold-cube:nth-child(4) {
+ transform: scale(1.1) rotateZ(180deg);
+}
+
+.sk-fold-cube:nth-child(3) {
+ transform: scale(1.1) rotateZ(270deg);
+}
+
+.sk-fold-cube:nth-child(2):before {
+ animation-delay: 0.3s;
+}
+
+.sk-fold-cube:nth-child(4):before {
+ animation-delay: 0.6s;
+}
+
+.sk-fold-cube:nth-child(3):before {
+ animation-delay: 0.9s;
+}
+
+@keyframes sk-fold {
+ 0%,
+ 10% {
+ transform: perspective(140px) rotateX(-180deg);
+ opacity: 0;
+ }
+
+ 25%,
+ 75% {
+ transform: perspective(140px) rotateX(0);
+ opacity: 1;
+ }
+
+ 90%,
+ 100% {
+ transform: perspective(140px) rotateY(180deg);
+ opacity: 0;
+ }
+
+}
+
diff --git a/exampleSite/config/_default/config.toml b/exampleSite/config/_default/config.toml
index b9af4d7..e6ee52e 100644
--- a/exampleSite/config/_default/config.toml
+++ b/exampleSite/config/_default/config.toml
@@ -14,6 +14,11 @@
#googleAnalytics = "UA-123-45"
# Syntax highlighting
-pygmentsUseClasses = true
+pygmentsUseClasses = true
pygmentsCodeFences = true
-pygmentsCodefencesGuessSyntax = true
\ No newline at end of file
+pygmentsCodefencesGuessSyntax = true
+
+[markup]
+ [markup.goldmark]
+ [markup.goldmark.renderer]
+ unsafe=true
\ No newline at end of file
diff --git a/exampleSite/content/english/post/redirect.md b/exampleSite/content/english/post/redirect.md
new file mode 100644
index 0000000..3f8cc1b
--- /dev/null
+++ b/exampleSite/content/english/post/redirect.md
@@ -0,0 +1,14 @@
++++
+author = "Hugo Authors"
+title = "Redirect"
+date = "2021-06-20"
+description = "Usage of redirectUrl"
+tags = [
+ "redirect", "redirectUrl",
+]
+redirectUrl="https://gohugo.io"
++++
+
+Forwarding to [gohugo](https://gohugo.io) using `redirectUrl`
+
+{{% loading %}}
\ No newline at end of file
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index becba47..17bcd2d 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -6,6 +6,9 @@
{{- hugo.Generator -}}
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="description" content="{{ if .Params.description }}{{ .Params.description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
+ {{ if .Params.redirectUrl }}
+ <meta http-equiv="refresh" content="1; url={{ .Params.redirectUrl }}" />
+ {{ end }}
{{- if .Site.Params.googleSiteVerify }}
<meta name="google-site-verification" content="{{ .Site.Params.googleSiteVerify }}">
{{- end -}}
@@ -48,7 +51,14 @@
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous" />
-
+ {{ if .Params.redirectUrl }}
+ {{ $style := resources.Get "css/spinner.css" | resources.Minify | resources.Fingerprint }}
+ <link rel="stylesheet"
+ href="{{ $style.RelPermalink }}"
+ integrity="{{ $style.Data.Integrity }}"
+ crossorigin="anonymous"
+ type="text/css">
+ {{- end -}}
<!-- Favicons -->
<link rel="shortcut icon" href="{{ .Site.Params.favicon | relURL }}favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" sizes="180x180" href="{{ .Site.Params.favicon | relURL }}apple-touch-icon.png">
diff --git a/layouts/shortcodes/loading.html b/layouts/shortcodes/loading.html
new file mode 100644
index 0000000..e57d250
--- /dev/null
+++ b/layouts/shortcodes/loading.html
@@ -0,0 +1,9 @@
+<!-- loading -->
+<div class="sk-wrapper">
+ <div class="sk-fold">
+ <div class="sk-fold-cube"></div>
+ <div class="sk-fold-cube"></div>
+ <div class="sk-fold-cube"></div>
+ <div class="sk-fold-cube"></div>
+ </div>
+</div>
\ No newline at end of file
--
Gitblit v1.10.0