Added External URL Redirect Option (#215)

Alexander Eble

20.51.2021 f641c9dc6baee00d08fa955dd3fd60b23e589af2

Added External URL Redirect Option (#215)

This feature allows client-side redirects by specifying a redirectUrl in the markdown header.

 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).

 assets/css/spinner.css

New file
@@ -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;
  }

}


 exampleSite/config/_default/config.toml

@@ -17,3 +17,8 @@
pygmentsUseClasses = true
pygmentsCodeFences = true
pygmentsCodefencesGuessSyntax = true

[markup]
    [markup.goldmark]
        [markup.goldmark.renderer]
        unsafe=true

 exampleSite/content/english/post/redirect.md

New file
@@ -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 %}}

 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">

 layouts/shortcodes/loading.html

New file
@@ -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>