Merge remote-tracking branch 'origin/master' into darkmode

Alexander Bilz

18.58.2021 9e0aac33f4400c1b12188ce6e05c049b3154e5be

Merge remote-tracking branch 'origin/master' into darkmode

 README.md

@@ -16,6 +16,7 @@
- Navigation items
- Pagination
- Multilingual
- RTL support
- Post Thumbnails (optional)
- 100⁄100 Google Lighthouse score
- Google Analytics (optional)
@@ -150,6 +151,13 @@
listDateFormat = "Jan 2"
```

### Read-more Links
You can enable read-more links for truncated posts by setting the `readMore = true`. The length of the preview is controlled by Hugo's `summarylength`. Read-more links are disabled by default.
```toml
[params]
  readMore = true
```

### Have a static page as a home page
If you prefer having a static page as your home page rather than a listing of the latest posts, then make sure you leave the `mainSections` parameter blank:
```toml
@@ -158,6 +166,16 @@
```
Put any content into the `_index.md` file located in the content directory. If you want, you can also have some static text and the posts below. In such case, simply keep the `mainSections = ["post"]` and put any static content in the `_index.md`.

### Rename post section
If you want to have a different post section identifier, such as `/blog`, you can specify the section name using `postSectionName`:

```toml
[params]
  postSectionName = "blog"
```

If the parameter is not set, it will default to `post`.

### Show full post content on the home page
If you prefer the full content of your posts to appear on the home page rather than a summary of each post, then set the parameter `fullPostContent` to `true`.
```toml
@@ -217,6 +235,15 @@

Anatole currently ships with support for some basic languages. Contributions for other language translations are welcome.

### RTL suppourt 

Anatole support RTL langauges and flip the whole theme for that. To enable the RTL mode for specific langauge it's enough to write the following code in the language params.

```toml
LanguageDirection = "rtl" 
```


### :100: Google Lighthouse score

The theme is optimized to adhere to the requirements checked for in the Lighthouse Audit. On my [personal site](https://www.alexbilz.com) I was able to reach a perfect 100⁄100 score.

 assets/css/style.css

@@ -381,6 +381,8 @@
    text-decoration: none;
    letter-spacing: 1px;
    color: #2660ab;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.post .post-content a:hover {

 assets/css/style.rtl.css

New file
@@ -0,0 +1,1149 @@
@charset "UTF-8";

:root {
    --bg-color: #fff;
    --secondary-bg-color: #eeeeee;
    --heading-color: #5f5f5f;
    --body-color: rgba(0, 0, 0, 0.7);
    --post-color: rgba(0, 0, 0, 0.44);
    --border-color: rgba(0, 0, 0, 0.15);
    --form-border-color: #9f9f9f;
    --form-button-hover-border-color: #000;
    --pre-bg-color: #f9f9fd;
    --nav-text-color: #5a5a5a;
    --tag-color: #424242;
    --blockquote-text-color: #858585;
    --blockquote-border-color: #dfe2e5;
    --thumbnail-height: 15em;
    scroll-padding-top: 100px;
}

html[data-theme='dark'] {
    --bg-color: #292a2d;
    --secondary-bg-color: #2c2d32;
    --heading-color: rgb(169, 169, 179);
    --body-color: rgb(169, 169, 179);
    --post-color: rgba(0, 0, 0, 0.44);
    --border-color: rgb(38, 38, 38);
    --form-border-color: rgb(169, 169, 179);
    --form-button-hover-border-color: #fff;
    --pre-bg-color: rgb(33, 33, 45);
    --nav-text-color: rgb(191, 191, 191);
    --tag-color: rgb(191, 191, 191);
    --blockquote-text-color: #808080;
    --blockquote-border-color: #424242;
}

html {
    background-color: var(--bg-color);
    -webkit-font-smoothing: antialiased;
}

body {
    color: var(--body-color);
    font-family: 'Verdana', sans-serif;
    font-size: 15px;
    width: 100%;
    margin: 0 auto 30px auto;
    background-color: var(--bg-color);
}

p {
    line-height: 1.9em;
    font-weight: 400;
    font-size: 14px;
}

a {
    text-decoration: none;
}

blockquote {
    padding: 0 1em;
    border-right: .25em solid var(--blockquote-border-color);
    color: var(--blockquote-text-color);
}

.category {
    padding: 4px 6px;
    border-radius: 3px;
    color: var(--tag-color) !important;
    background-color: var(--secondary-bg-color);
    border: 1px solid var(--border-color);
}

.tag::before {
    content: "#";
    opacity: .5;
}

.tag,
.category {
    display: inline-block;
    font-size: 15px;
    line-height: 1;
    margin: 5px 0 5px 8px;
}

pre {
    background-color: var(--pre-bg-color);
    padding: 5px;
    display: block;
    overflow-x: auto;
}

.info i {
    opacity: 0.5;
    margin-left: 5px;
}

a:link,
a:visited {
    opacity: 1;
    color: var(--tag-color);
}

a:hover,
a:active {
    color: #2660ab;
}

/*basic styles ends*/
/*animation starts*/

.animated {
    transition: top .8s linear;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}

.animated.hinge {
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}

@-webkit-keyframes fadeInDown {
    0% {
        -webkit-transform: translateY(-20px);
    }

    100% {
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes fadeInDown {
    0% {
        -moz-transform: translateY(-20px);
    }

    100% {
        -moz-transform: translateY(0);
    }
}

@-o-keyframes fadeInDown {
    0% {
        -o-transform: translateY(-20px);
    }

    100% {
        -o-transform: translateY(0);
    }
}

@keyframes fadeInDown {
    0% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0);
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

/*animation ends*/
.content {
    height: auto;
    float: left;
    width: 60%;
    margin-top: 60px;
}

.page-top {
    width: 60%;
    position: fixed;
    left: 0;
    z-index: 3;
    background-color: var(--bg-color);
    height: 60px;
    border-bottom: 1px solid var(--border-color);
}

.page-top .nav {
    list-style: none;
    padding: 11px 30px;
    float: right;
    font-size: 12px;
    display: block;
    width: calc(100% - 30px);
}

.page-top .nav li {
    position: relative;
    display: initial;
    padding-left: 20px;
}

.page-top .nav a {
    color: var(--nav-text-color);
}

.page-top .nav a:hover {
    color: #2660ab;
}

.page-top .nav a.current {
    color: var(--nav-text-color);
    padding-bottom: 22px;
    border-bottom: 1px solid var(--nav-text-color);
}

.theme-switch-item {
    float: left;
    font-size: 2em;
    margin-top: -5px;
}

.page-top .information {
    float: left;
    padding-top: 12px;
    padding-left: 20px;
}

.page-top .information .avatar {
    float: left;
}

.page-top .information .avatar img {
    width: 32px;
    height: 32px;
    border-radius: 300px;
}

.page-top .information .back_btn {
    float: right;
    padding-top: 5px;
    margin-left: -10px;
}

.page-top .information .back_btn li {
    display: initial;
    padding-left: 40px;
}

.sidebar {
    width: 40%;
    -webkit-background-size: cover;
    background-size: cover;
    background-color: var(--bg-color);
    height: 100%;
    top: 0;
    right: 0;
    position: fixed;
    z-index: 4;
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.sidebar .logo-title {
    text-align: center;
    padding-top: 240px;
    flex: 1;
}

.sidebar .logo-title .description {
    font-size: 14px;
    margin: 0 1em;
}

.sidebar .logo-title .logo {
    margin: 0 auto;
}

.sidebar .logo-title .title img {
    width: 127px;
    border-radius: 50%;
}

.sidebar .logo-title .title h3 {
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 1;
    margin: 1em;
}

.sidebar .logo-title .title a {
    text-decoration: none;
    color: var(--heading-color);
    font-size: 2rem;
    font-weight: bold;
}

.sidebar .social-links {
    list-style: none;
    padding: 0;
    font-size: 14px;
    text-align: center;
    flex: 7;
}

.sidebar .social-links i {
    margin-left: 3px;
}

.sidebar .social-links li {
    display: inline;
    padding: 0 4px;
    line-height: 0;
}

.sidebar .social-links a {
    color: var(--heading-color);
}

.sidebar .social-links a:hover {
    color: #2660ab;
}

.post {
    background-color: var(--bg-color);
    margin: 30px;
}

.post .post-title h1 {
    text-transform: uppercase;
    font-size: 30px;
    letter-spacing: 5px;
    line-height: 1;
}

.post .post-title h2 {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 28px;
    line-height: 1;
    font-weight: 600;
    color: var(--heading-color);
}

.post .post-title h3 {
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;
    font-weight: 600;
    /* color: #464646; */
    color: var(--heading-color);
    font-size: 22px;
    margin: 0;
}

.post .post-title a {
    text-decoration: none;
    letter-spacing: 1px;
    color: var(--heading-color);
}

.post .post-title a:hover {
    text-decoration: underline;
}

.post .post-content a {
    text-decoration: none;
    letter-spacing: 1px;
    color: #2660ab;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.post .post-content a:hover {
    color: #2F69B3;
}

.post .post-content h3 {
    font-size: 22px;
    font-weight: 600;
}

.post .post-content h4 {
    /* color: var(--heading-color); */
    font-size: 16px;
}

.post .post-content img {
    max-width: 100%;
}

.post .post-footer {
    padding: 0 0 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.post .post-footer .meta {
    max-width: 100%;
    display: flex;
    color: #bbbbbb;
}

.post .post-footer .meta .info {
    float: right;
    font-size: 12px;
    margin-bottom: 1em;
    color: var(--body-color);
}

.post .post-footer .info .separator a {
    margin-left: 0.2em;
}

.post .post-footer .meta .info .date {
    margin-left: 10px;
    margin-right: 5px
}

.post figure {
    max-width: 100%;
    height: auto;
    margin: 0;
    text-align: center;
}

.post figure.right {
    float: left;
    margin-right: 1.5em;
    max-width: 50%;
}

.post figure.left {
    float: right;
    margin-left: 1.5em;
    max-width: 50%;
}

.post figure.big {
    max-width: 100vw;
}

.info {
    margin: 1em;
}

.info span {
    margin-left: 0.5em;
}

.post .post-footer .meta a {
    text-decoration: none;
    color: var(--body-color);
}

.post .post-footer .meta a:hover {
    color: #2660ab;
}

.post .post-footer .meta i {
    margin-left: 6px;
}

.post .post-footer .tags {
    padding-bottom: 15px;
    font-size: 13px;
}

.post .post-footer .tags ul {
    list-style-type: none;
    display: inline;
    margin: 0;
    padding: 0;
}

.post .post-footer .tags ul li {
    list-style-type: none;
    margin: 0;
    padding-left: 5px;
    display: inline;
}

.post .post-footer .tags a {
    text-decoration: none;
    color: var(--post-color);
    font-weight: 400;
}

.post .post-footer .tags a:hover {
    text-decoration: none;
}

.post .post-thumbnail {
    width: 100%;
    padding-bottom: 1em;
    box-shadow: black;
    border-radius: 0.5em;
    overflow: hidden;
    transition: box-shadow .3s ease;
    
}

.post .post-thumbnail img {
    width: 100%;
    height: var(--thumbnail-height);
    object-fit: cover;
    border: 1px solid var(--border-color);
    border-bottom: 0px;
}

.pagination {
    margin: 30px;
    padding: 0px 0 56px 0;
    text-align: center;
}

.pagination ul {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 13px;
}

.pagination ul li {
    margin: 0 2px 0 2px;
    display: inline;
    line-height: 1;
}

.pagination ul li a {
    text-decoration: none;
    color: var(--body-color);
}

.pagination .pre {
    float: right;
}

.pagination .next {
    float: left;
}

.like-reblog-buttons {
    float: left;
}

.like-button {
    float: left;
    padding: 0 10px 0 0;
}

.reblog-button {
    float: left;
    padding: 0;
}

#install-btn {
    position: fixed;
    bottom: 0px;
    left: 6px;
}

#disqus_thread {
    margin: 30px;
    border-bottom: 1px solid var(--border-color);
}

.footer {
    clear: both;
    text-align: center;
    font-size: 10px;
    margin: 0 auto;
    bottom: 0;
    width: 100%;
    padding-bottom: 20px;
    flex: 0;
    position: relative;
}

.footer a {
    color: #A6A6A6;
}

.footer a:hover {
    color: #2660ab;
}

/*for archive*/
.archive {
    width: 100%;
}

.list-with-title {
    font-size: 14px;
    margin: 30px;
    padding: 0;
}

.list-with-title li {
    list-style-type: none;
    padding: 0;
}

.list-with-title .listing-title {
    font-size: 24px;
    color: #666666;
    font-weight: 600;
    line-height: 2.2em;
}

.list-with-title .listing {
    padding: 0;
}

.list-with-title .listing .listing-post {
    padding-bottom: 5px;
}

.list-with-title .listing .listing-post .post-time {
    float: left;
    display: inline-block;
    max-width: 10%;
    text-align: left;
    color: #C5C5C5;
}

.list-with-title .listing .listing-post a {
    color: #8F8F8F;
    width: 90%;
    display: inline-block;
}

.list-with-title .listing .listing-post a:hover {
    color: #2660ab;
}

/* share */
.share {
    margin: 0px 30px;
    display: inline-flex;
}

.evernote {
    width: 32px;
    height: 32px;
    border-radius: 300px;
    background-color: #3E3E3E;
    margin-left: 5px;
}

.evernote a {
    color: #fff;
    padding: 11px;
    font-size: 12px;
}

.evernote a:hover {
    color: #ED6243;
    padding: 11px;
}

.weibo {
    width: 32px;
    height: 32px;
    border-radius: 300px;
    background-color: #ED6243;
    margin-left: 5px;
}

.weibo a {
    color: #fff;
    padding: 9px;
}

.weibo a:hover {
    color: #BD4226;
}

.twitter {
    width: 32px;
    height: 32px;
    border-radius: 300px;
    background-color: #59C0FD;
    margin-left: 5px;
}

.twitter a {
    color: #fff;
    padding: 9px;
}

.twitter a:hover {
    color: #4B9ECE;
}

/* about */
.about {
    margin: 30px;
}

.about h3 {
    font-size: 22px;
}

/* links*/
.links {
    margin: 30px;
}

.links h3 {
    font-size: 22px;
}

.links a {
    cursor: pointer;
}

/* Comments */
.comment-count {
    color: #666;
}

.tab-community {
    color: #666;
}

.read_more {
    font-size: 14px;
}

.back-button {
    padding-top: 30px;
    max-width: 100px;
    padding-right: 40px;
    float: right;
}

/* Facebook Comments */
#fb_comments_container {
    margin: 30px;
}

.utterances {
    max-width: unset;
}

/* Buttons */
a.btn {
    color: #868686;
    font-weight: 400;
}

.btn {
    display: inline-block;
    position: relative;
    outline: 0;
    color: var(--post-color);
    background: transparent;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid var(--border-color);
    white-space: nowrap;
    font-weight: 400;
    font-style: normal;
    border-radius: 999em;
}

.btn:hover {
    display: inline-block;
    position: relative;
    outline: 0px;
    color: #464545;
    background: transparent;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid #464545;
    white-space: nowrap;
    font-weight: 400;
    font-style: normal;
    border-radius: 999em;
}

[role="back"] {
    padding: 0.5em 1.25em;
    line-height: 1.666em;
}

[role="home"] {
    padding: 0.5em 1.25em;
    line-height: 1.666em;
}

[role="navigation"] {
    padding: 0.5em 1.25em;
    line-height: 1.666em;
}

[role="tags"] {
    padding: 6px 12px;
}

/* Menu */
.menu {
    float: left;
    padding-top: 30px;
}

.menu .btn-down {
    margin: 0px;
}

.menu .btn-down li {
    list-style: none;
    width: 100px;
}

.menu .btn-down li a {
    display: inline-block;
    position: relative;
    padding: 0.5em 1.25em;
    outline: 0;
    color: var(--post-color);
    background: transparent;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid var(--border-color);
    white-space: nowrap;
    font-weight: 400;
    font-style: normal;
    border-radius: 999em;
    margin-top: 5px;
}

.menu .btn-down li a:hover {
    position: relative;
    padding: 0.5em 1.25em;
    outline: 0;
    color: #fff;
    background: #3CBD10;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    font-weight: 400;
    font-style: normal;
    border-radius: 999em;
    margin-top: 5px;
}

.menu .btn-down div {
    position: absolute;
    visibility: hidden;
    width: 100px;
    float: left;
}

.page_404 {
    text-align: center;
    padding-top: 50px;
}

.navbar-burger {
    display: none;
}

@media screen and (max-width: 960px),
print {
    .sidebar {
        width: 100%;
        position: absolute;
        border-left: none;
        z-index: 1;
    }

    .sidebar .logo-title {
        padding-top: 120px;
    }

    .sidebar .logo-title .title img {
        width: 100px;
    }

    .sidebar .logo-title .title h3 {
        font-size: 20px;
    }

    .page-top {
        width: 100%;
    }

    .post-title h3 {
        line-height: 1.6;
    }

    .content {
        margin-top: 420px;
        width: 100%;
        z-index: 2;
        position: absolute;
    }

    .post figure.right {
        float: unset;
        max-width: 100%;
        margin: 0;
    }
    
    .post figure.left {
        float: unset;
        max-width: 100%;
        margin: 0;
    }
    

    .footer {
        display: none;
    }

    .share {
        display: grid;
    }

    .page-top .nav {
        background-color: var(--secondary-bg-color);
        box-shadow: 0 8px 16px rgba(10, 10, 10, .1);
        padding: .5rem 0;
        width: 100%;
        display: none;
        margin-top: 0px;
    }

    .page-top .nav.is-active {
        /* display: block; */
        display: block;
    }

    .page-top .nav li {
        display: block;
        flex-grow: 0;
        flex-shrink: 0;
        line-height: 2.5;
        padding: .5rem .75rem;
        position: relative;
        text-transform: uppercase;
        text-align: center;
        font-size: 1.3em;
    }

    .page-top .nav a.current {
        border-bottom: none;
    }

    .navbar-burger {
        cursor: pointer;
        display: block;
        height: 3.25rem;
        position: relative;
        width: 3.25rem;
        margin-right: auto;
    }

    .navbar-burger span {
        background-color: var(--heading-color);
        display: block;
        height: 1px;
        right: calc(50% - 8px);
        position: absolute;
        transform-origin: center;
        transition-duration: 86ms;
        transition-property: background-color, opacity, transform;
        transition-timing-function: ease-out;
        width: 16px;
    }

    .navbar-burger span:nth-child(1) {
        top: calc(50% - 6px);
    }

    .navbar-burger span:nth-child(2) {
        top: calc(50% - 1px);
    }

    .navbar-burger span:nth-child(3) {
        top: calc(50% + 4px);
    }

    .theme-switch-item {
        float: none;
    }

    .list-with-title .listing .listing-post .post-time {
        max-width: 20%;
    }
    
    .list-with-title .listing .listing-post a {
        width: 80%;
    }
}

/* Medium zoom */
.medium-zoom-overlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    transition: opacity 300ms;
    will-change: opacity;
    background: var(--bg-color);
}

.medium-zoom--opened .medium-zoom-overlay {
    cursor: pointer;
    cursor: zoom-out;
    opacity: 1;
}

.medium-zoom-image {
    cursor: pointer;
    cursor: zoom-in;
    /*
      The `transition` is marked as "!important" for the animation to happen
      even though it's overriden by another inline `transition` style attribute.
      This is problematic with frameworks that generate inline styles on their
      images (e.g. Gatsby).
      See https://github.com/francoischalifour/medium-zoom/issues/110
     */
    transition: transform 300ms cubic-bezier(0.2, 0, 0.2, 1) !important;
    z-index: 100;
}

.medium-zoom-image--hidden {
    visibility: hidden;
}

.medium-zoom-image--opened {
    position: relative;
    cursor: pointer;
    cursor: zoom-out;
    will-change: transform;
}

@media print {
    .page-top {
        display: none;
    }
}

@media (min-width: 1921px){
    .content {
        padding-left: 25%;
        width: 35%;
    }
    .sidebar {
        padding-right: 15%;
        width: 25%;
    }
}


/* (CONTACT) FORM */

.contact-form {
    margin-top: 30px;
}
.form-style{
    width: 100%;
}
.form-style ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.form-style ul li {
    display: block;
    margin-bottom: 10px;
    min-height: 35px;
}
.form-style ul li .field-style {
    box-sizing: border-box; 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box; 
    font-size: 14px;
    padding: 8px;
    outline: none;
    background-color: var(--bg-color);
    border: 1px solid var(--form-border-color);
    color: var(--body-color);
}
.form-style ul li    .field-style:focus {
    box-shadow: 0 0 5px;
    border:1px solid;
}
.form-style ul li .field-split {
    width: 49%;
}
.form-style ul li .field-full {
    width: 100%;
}
.form-style ul li input.align-left {
    float:right;
}
.form-style ul li input.align-right {
    float:left;
}
.form-style ul li textarea {
    background-color: var(--bg-color);
    border: 1px solid var(--form-border-color);
    color: var(--body-color);
    width: 100%;
    height: auto;
}
.form-style ul li input[type="button"], 
.form-style ul li input[type="submit"] {
    background-color: var(--bg-color);
    border: 1px solid var(--form-border-color);
    display: inline-block;
    cursor: pointer;
    color: var(--body-color);
    text-decoration: none;
    width: 100%;
}
.form-style ul li input[type="button"]:hover, 
.form-style ul li input[type="submit"]:hover {
    background-color: var(--bg-color);
    border: 1px solid var(--form-button-hover-border-color);
}

/* (CONTACT) FORM END */

 assets/js/anatole-theme-switcher.js

@@ -8,22 +8,46 @@
    localStorage.setItem('theme', style);
}

// Check if a theme was set manually
function getMode()  {
    return localStorage.getItem('mode') ? localStorage.getItem('mode') : null;
}

function setMode(mode)  {
    localStorage.setItem('mode', mode);
}

function init() {
    // initialize default value
    const theme = getTheme();
    const mode = getMode();

    // check if a preferred color theme is set for users that have never been to our site
    const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    const userPrefersLight = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches;
    if (theme === null) {
        if (userPrefersDark) {
            setTheme('dark');
            setMode('auto');
        } else if (userPrefersLight){
            setTheme('light');
            setMode('auto');
        } else if (!document.documentElement.getAttribute('data-theme')) {
            setTheme('light');
        } else {
            setTheme(document.documentElement.getAttribute('data-theme'));
        }
    } else {
        // load a stored theme

        if (mode === 'auto') {
            if (userPrefersDark) {
                document.documentElement.setAttribute('data-theme', 'dark');
            } else if (userPrefersLight){
                document.documentElement.setAttribute('data-theme', 'light');
            } 
        }
        else {
            // load a user set theme theme
        if (theme === 'light') {
            document.documentElement.setAttribute('data-theme', 'light');
        } else {
@@ -31,6 +55,7 @@
        }
    }
}
}


// switch themes
@@ -41,6 +66,7 @@
    } else {
        setTheme('light');
    }
    setMode('user');
}

// Manual Switch

 exampleSite/config.toml

File was deleted

 exampleSite/config/_default/config.toml

New file
@@ -0,0 +1,19 @@
baseURL = "https://example.com"
languageCode = "en"
DefaultContentLanguage = "en"
title = "Website of Jane Doe"
theme = "anatole"
summarylength = 10
enableEmoji = true
enableRobotsTXT = true

# Enable Disqus
#disqusShortname = ""

# Google Analytics
#googleAnalytics = "UA-123-45"

# Syntax highlighting
pygmentsUseClasses = true
pygmentsCodeFences = true
pygmentsCodefencesGuessSyntax = true

 exampleSite/config/_default/languages.toml

New file
@@ -0,0 +1,13 @@
[en]
title = "My blog"
weight = 1
LanguageName = "EN"
contentDir = "content/english"

[ar]
title = "عربي"
description = "أنا أحمد"
contentDir = "content/arabic" 
weight = 2
LanguageDirection = "rtl" 
LanguageName = "AR"

 exampleSite/config/_default/menus.ar.toml

New file
@@ -0,0 +1,23 @@
  [[main]]
  name = "الرئيسية"
  identifier = "main"
  weight = 100
  url = "/ar"

  [[main]]
  name = "المنشورات"
  weight = 200
  identifier = "posts"
  url = "/ar/post"

  [[main]]
  name = "حول"
  weight = 300
  identifier = "about"
  url = "/ar/about"

  [[main]]
  name = "للتواصل"
  weight = 400
  identifier = "contact"
  url = "/ar/contact"

 exampleSite/config/_default/menus.en.toml

New file
@@ -0,0 +1,23 @@
  [[main]]
  name = "Home"
  identifier = "home"
  weight = 100
  url = "/"

  [[main]]
  name = "Posts"
  weight = 200
  identifier = "posts"
  url = "/post/"

  [[main]]
  name = "About"
  weight = 300
  identifier = "about"
  url = "/about/"

  [[main]]
  name = "Contact"
  weight = 400
  identifier = "contact"
  url = "/contact/"

 exampleSite/config/_default/params.toml

New file
@@ -0,0 +1,59 @@

title = "I'm Jane Doe"
author = "Jane Doe"
#copyright = "2020-2021"
description = "Call me Jane"
profilePicture = "images/profile.jpg"
keywords = ""
favicon = "favicons/"
# example ["css/custom.css"]
customCss = []
# example ["js/custom.js"]
customJs = [] 
mainSections = ["post"]
images = ["images/site-feature-image.png"]
doNotLoadAnimations = false
# Form Spree Contact Form
#contactFormAction = "https://formspree.io/f/your-form-hash-here"
# Google Site Verify
#googleSiteVerify = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
singleDateFormat = "2/1/2006"
indexDateFormat = "2/1/2006"
listDateFormat = "2/1/2006"
# Commento Comments
# CommentoURL = "https://commento.example.com/js/commento.js"
# Read More links for truncated summaries
# readMore = true
# postSectionName = "blog"


[simpleAnalytics]
# enable = true
# customurl = "https://analytics.example.com"

## Math settings
[math]
enable = false  # options: true, false. Enable math support globally, default: false. You can always enable math on per page.
use = "katex"  # options: "katex", "mathjax". default is "katex".

## Social links
# use 'fab' when brand icons, use 'fas' when standard solid icons.
[[socialIcons]]
icon = "fab fa-linkedin"
title = "Linkedin"
url = "https://de.linkedin.com/"

[[socialIcons]]
icon = "fab fa-github"
title = "GitHub"
url = "https://github.com/lxndrblz/anatole/"

[[socialIcons]]
icon = "fab fa-instagram"
title = "instagram"
url = "https://www.instagram.com/"

[[socialIcons]]
icon = "fas fa-envelope"
title = "e-mail"
url = "mailto:mail@example.com"

 exampleSite/content/arabic/_index.md

 exampleSite/content/arabic/about.md

New file
@@ -0,0 +1,12 @@
+++
title = "حول"
description = "Hugo, the world's fastest framework for building websites"
date = "2019-02-28"
aliases = ["about-us", "about-hugo", "contact"]
author = "Hugo Authors"
+++

هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.
إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع.
ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق.
هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق، أو حتى غير مفهوم. لأنه مازال نصاً بديلاً ومؤقتاً.

 exampleSite/content/arabic/archives.md

 exampleSite/content/arabic/contact.md

New file
@@ -0,0 +1,7 @@
---
author: Hugo Authors
title: للتواصل
date: 2019-03-08
description: Contact Page
contact: true
---

 exampleSite/content/arabic/post/_index.md

 exampleSite/content/arabic/post/arabic_example.md

New file
@@ -0,0 +1,18 @@
+++
author = "كتاب المقال"
title = "نموذج عربي"
date = "2019-03-05"
description = "نص عربي سريع"
tags = [
    "عربي",
]
+++
 من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.
إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع.
ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق.
هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق، أو حتى غير مفهوم. لأنه مازال نصاً بديلاً ومؤقتاً.

هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.
إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع.
ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق.
هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق، أو حتى غير مفهوم. لأنه مازال نصاً بديلاً ومؤقتاً.

 exampleSite/content/english/_index.md

copy from exampleSite/content/_index.md
copy to exampleSite/content/english/_index.md

 exampleSite/content/english/about.md

 exampleSite/content/english/archives.md

copy from exampleSite/content/archives.md
copy to exampleSite/content/english/archives.md

 exampleSite/content/english/contact.md

 exampleSite/content/english/post/_index.md

copy from exampleSite/content/post/_index.md
copy to exampleSite/content/english/post/_index.md

 exampleSite/content/english/post/emoji-support.md

 exampleSite/content/english/post/figure-shortcode.md

 exampleSite/content/english/post/image-test.md

 exampleSite/content/english/post/markdown-syntax.md

 exampleSite/content/english/post/math-typesetting.md

 exampleSite/content/english/post/placeholder-text.md

 exampleSite/content/english/post/rich-content.md

 i18n/ar.toml

New file
@@ -0,0 +1,37 @@
[category]
other = "التصنيفات"

[tag]
other = "الإشارات"

[reading_time]
one = "دقيقة للقراءة"
two = "دقيقتان للقراءة"
other = "{{ .Count }} دقائق للقراءة"

[page_not_found]
other = "لم يتم العثور على الصفحة"

[page_does_not_exist]
other = "عذرا, الصفحة غير موجودة"

[head_back]
other = "يمكنك العودة <a href=\"{{ . }}\">للصفحة الرئيسية</a>."

[comments]
other = "تعليقات"

[send]
other = "أرسل"

[read_more]
other = "اقرأ المزيد"

[name]
other = "الاسم"

[email]
other = "البريد الالكتروني"

[message]
other = "الرسالة" 

 i18n/de.toml

@@ -22,3 +22,15 @@

[send]
other = "Senden"

[read_more]
other = "weiterlesen"

[name]
other = "Name"

[email]
other = "E-Mail Adresse"

[message]
other = "Nachricht" 

 i18n/dk.toml

@@ -22,3 +22,15 @@

[send]
other = "Sende"

[read_more]
other = "Læs mere"

[name]
other = "Navn"

[email]
other = "e-mail-adresse"

[message]
other = "besked" 

 i18n/en.toml

@@ -22,3 +22,15 @@

[send]
other = "Send"

[read_more]
other = "Read more"

[name]
other = "Name"

[email]
other = "Email"

[message]
other = "Message" 

 i18n/es.toml

@@ -22,3 +22,15 @@

[send]
other = "Enviar"

[read_more]
other = "Leer más"

[name]
other = "Nombre"

[email]
other = "Correo electrónico"

[message]
other = "Mensaje" 

 i18n/fa.toml

@@ -22,3 +22,15 @@

[send]
other = "ارسال"

[read_more]
other = "ادامه خواندن"

[name]
other = "نام"

[email]
other = "پست الکترونیک"

[message]
other = "پیام" 

 i18n/fi.toml

@@ -22,3 +22,15 @@

[send]
other = "Lähetä"

[read_more]
other = "Jatka lukemista"

[name]
other = "Nimi"

[email]
other = "Sähköposti"

[message]
other = "Viesti" 

 i18n/fr.toml

@@ -22,3 +22,15 @@

[send]
other = "Envoyer"

[read_more]
other = "continuer la lecture"

[name]
other = "Nom"

[email]
other = "Email"

[message]
other = "Message" 

 i18n/it.toml

@@ -22,3 +22,15 @@

[send]
other = "Spedire"

[read_more]
other = "Continua a leggere"

[name]
other = "Nome"

[email]
other = "Email"

[message]
other = "Messaggio" 

 i18n/ko.toml

New file
@@ -0,0 +1,36 @@
[category]
other = "분류"

[tag]
other = "태그"

[reading_time]
one = "읽는 시간 1분"
other = "읽는 시간 {{ .Count }}분"

[page_not_found]
other = "페이지를 찾을 수 없음"

[page_does_not_exist]
other = "죄송하지만, 이 페이지는 존재하지 않습니다."

[head_back]
other = "<a href=\"{{ . }}\">홈페이지</a>로 돌아가실 수 있습니다."

[comments]
other = "댓글"

[send]
other = "보내기"

[read_more]
other = "더 읽기"

[name]
other = "이름"

[email]
other = "이메일"

[message]
other = "메시지"

 i18n/pt-br.toml

@@ -22,3 +22,15 @@

[send]
other = "Enviar"

[read_more]
other = "continue lendo"

[name]
other = "Nome"

[email]
other = "Email"

[message]
other = "Mensagem" 

 i18n/zh-cn.toml

@@ -22,3 +22,15 @@

[send]
other = "发送"

[read_more]
other = "继续阅读"

[name]
other = "姓名"

[email]
other = "电子邮件"

[message]
other = "信息" 

 i18n/zh-tw.toml

@@ -22,3 +22,15 @@

[send]
other = "發送"

[read_more]
other = "繼續閱讀"

[name]
other = "名稱"

[email]
other = "電子郵件"

[message]
other = "消息" 

 layouts/_default/baseof.html

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="{{- site.Language.Lang -}}" data-theme="{{- .Site.Params.displayMode -}}">
<html  dir="{{ .Site.Language.LanguageDirection | default "ltr" }}" lang="{{- site.Language.Lang -}}" data-theme="{{- .Site.Params.displayMode -}}">
{{- partial "head.html" . -}}
<body>


 layouts/_default/list.html

@@ -6,7 +6,7 @@
                {{ range .Pages }}
                    <ul class="listing">
                        <div class="listing-item">
                            <div class="listing-post"><a href="{{ .Permalink }}" title="{{ .Title }}">{{ .Title }}</a>
                            <div class="listing-post"><a href="{{ .RelPermalink }}" title="{{ .Title }}">{{ .Title }}</a>
                                <div class="post-time"><span class="date">{{ if isset .Site.Params "listdateformat" }} 
                                                                            {{ .Date.Format .Site.Params.listDateFormat }}
                                                                            {{ else }} {{.Date.Format "Jan 2"}} 

 layouts/_default/single.html

@@ -2,17 +2,18 @@
    <div class="post {{ with .Site.Params.doNotLoadAnimations }} . {{ else }} animated fadeInDown {{ end }}">
        <div class="post-content">
            {{ if .Params.thumbnail }}
            <img class="post-thumbnail" src="{{ .Params.thumbnail | absURL }}" alt="Thumbnail image">
            <img class="post-thumbnail" src="{{ .Params.thumbnail | relURL }}" alt="Thumbnail image">
            {{ end }}
            <div class="post-title">
                <h3>{{ .Title }}</h3>
                {{ if eq .Type "post"}}
                {{ if or (eq .Type "post") (eq .Type .Site.Params.postSectionName) }}
                    <div class="info">
                        <em class="fas fa-calendar-day"></em>
                        <span class="date">{{ if isset .Site.Params "singledateformat" }} 
                                                {{ .Date.Format .Site.Params.singleDateFormat }}
                                           {{ else }} {{.Date.Format "Mon, Jan 2, 2006"}} 
                                           {{ end }}</span>
                        <br>
                        <em class="fas fa-stopwatch"></em>
                        <span class="reading-time">{{ i18n "reading_time" .ReadingTime }}</span>
                    </div>
@@ -33,7 +34,7 @@
            </div>
        </div>

        {{ if and (eq .Type "post") (ne .Page.Params.disableComments true) }}
        {{ if and (or (eq .Type "post") (eq .Type .Site.Params.postSectionName)) (ne .Page.Params.disableComments true) }}
            {{- if .Site.DisqusShortname -}}
                <div id="fb_comments_container">
                    <h2>{{ i18n "comments" }}</h2>

 layouts/index.html

@@ -26,8 +26,16 @@
                </h3>
            </div>
            <div class="post-content">
                <div class="p_part"><p>{{ if .Site.Params.fullPostContent }}{{ .Content }}{{ else }}{{ .Summary }}{{ end }}</p></div>
                <div class="p_part">
                    <p>{{ if .Site.Params.fullPostContent }}{{ .Content }}{{ else }}{{ .Summary }}{{ end }}</p>
                    <!-- add read more -->
                    {{- if and (.Truncated) (.Site.Params.readMore) -}}
                        <a href='{{ .RelPermalink }}' class="read_more">{{ i18n "read_more" }}</a>
                    {{- end -}}
            </div>
            </div>

            <!--  -->
            <div class="post-footer">
                <div class="meta">
                    <div class="info">

 layouts/partials/contact.html

@@ -3,12 +3,15 @@
  <form class="form-style" method="POST" action="{{ .Site.Params.contactFormAction }}" data-toggle="validator">
    <ul>
      <li>
        <input class="field-style field-full" type="text" name="username" id="username" placeholder="Name" required>
        <label for="username">{{ i18n "name" }}</label>
        <input class="field-style field-full" type="text" name="username" id="username" placeholder="{{ i18n "name" }}" required>
      </li>
      <li>
        <input class="field-style field-full" type="email" id="email" name="email" placeholder="Email" required>
        <label for="email">{{ i18n "email" }}</label>
        <input class="field-style field-full" type="email" id="email" name="email" placeholder="{{i18n "email" }}" required>
      </li>
      <li>
        <label for="message">{{ i18n "message" }}</label>
        <textarea class="field-style" name="message" id="message" rows="6" placeholder="{{ i18n "message" }}"></textarea>
      </li>
      <li>

 layouts/partials/head.html

@@ -11,15 +11,25 @@
    {{- end -}}

    <!-- CSS -->
    {{ $style := resources.Get "css/style.css" | resources.Minify | resources.Fingerprint }}
    
    {{ if eq .Site.Language.LanguageDirection "rtl"}}
    {{ $style := resources.Get "css/style.rtl.css" | resources.Minify | resources.Fingerprint }}
    <link rel="stylesheet"
          href="{{ $style.Permalink }}"
          href="{{ $style.RelPermalink }}"
          integrity="{{ $style.Data.Integrity }}"
          crossorigin="anonymous"
          type="text/css">
    {{else}}
    {{ $style := resources.Get "css/style.css" | resources.Minify | resources.Fingerprint }}
    <link rel="stylesheet"
        href="{{ $style.RelPermalink }}"
        integrity="{{ $style.Data.Integrity }}"
        crossorigin="anonymous"
        type="text/css">
    {{end}}
    {{ $markupHighlightStyle := resources.Get "css/markupHighlight.css" | resources.Minify | resources.Fingerprint }}
    <link rel="stylesheet"
        href="{{ $markupHighlightStyle.Permalink }}"
        href="{{ $markupHighlightStyle.RelPermalink }}"
        integrity="{{ $markupHighlightStyle.Data.Integrity }}"
        crossorigin="anonymous"
        type="text/css">
@@ -27,7 +37,7 @@
        {{ $minstyles := resources.Get . }}
        {{ $styles := $minstyles | resources.Minify | resources.Fingerprint }}
        <link rel="stylesheet"
        href="{{ $styles.Permalink }}"
        href="{{ $styles.RelPermalink }}"
        integrity="{{ $styles.Data.Integrity }}"
        crossorigin="anonymous"
        media="screen" />
@@ -38,23 +48,23 @@
    crossorigin="anonymous" />

    <!-- Favicons -->
    <link rel="shortcut icon" href="{{ .Site.Params.favicon | absURL }}favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon" sizes="180x180" href="{{ .Site.Params.favicon | absURL }}apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ .Site.Params.favicon | absURL }}favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ .Site.Params.favicon | absURL }}favicon-16x16.png">
    <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">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ .Site.Params.favicon | relURL }}favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ .Site.Params.favicon | relURL }}favicon-16x16.png">

    <link rel="canonical" href="{{ .Permalink }}">
    <link rel="canonical" href="{{ .RelPermalink }}">

    <!-- RSS -->
    {{ with .OutputFormats.Get "rss" -}}
        {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
        {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .RelPermalink $.Site.Title | safeHTML }}
    {{ end -}}

    <!-- JavaScript -->
    {{ $anatoleHeader := resources.Get "js/anatole-header.js" }}
    {{ $secureHeaderJS := $anatoleHeader |  resources.Minify | resources.Fingerprint }}
    <script type="text/javascript"
            src="{{ $secureHeaderJS.Permalink }}"
            src="{{ $secureHeaderJS.RelPermalink }}"
            integrity="{{ $secureHeaderJS.Data.Integrity }}"
            crossorigin="anonymous"></script>

@@ -63,7 +73,7 @@
        {{ $anatoleThemeSwitcher := resources.Get "js/anatole-theme-switcher.js" }}
        {{ $secureThemeSwitcherJS := $anatoleThemeSwitcher |  resources.Minify | resources.Fingerprint }}
        <script type="text/javascript"
                src="{{ $secureThemeSwitcherJS.Permalink }}"
                src="{{ $secureThemeSwitcherJS.RelPermalink }}"
                integrity="{{ $secureThemeSwitcherJS.Data.Integrity }}"
                crossorigin="anonymous"></script>
    {{ end }}
@@ -87,7 +97,7 @@
    {{- if ne $js "" -}}
    {{- $secureJS := $js |  resources.Minify | resources.Fingerprint -}}
    <script type="text/javascript"
            src="{{ $secureJS.Permalink }}"
            src="{{ $secureJS.RelPermalink }}"
            integrity="{{ $secureJS.Data.Integrity }}"
            crossorigin="anonymous"></script>
    {{- end -}}

 layouts/partials/medium-zoom.html

@@ -3,7 +3,7 @@
{{ $js := resources.Get "js/medium-zoom.js" }}
{{ $secureJS := $js |  resources.Minify | resources.Fingerprint }}
<script type="text/javascript"
        src="{{ $secureJS.Permalink }}"
        src="{{ $secureJS.RelPermalink }}"
        integrity="{{ $secureJS.Data.Integrity }}"
        crossorigin="anonymous"></script>
{{- end -}}

 layouts/partials/navbar.html

@@ -18,7 +18,7 @@
        {{ end }}
        {{ if .Site.IsMultiLingual }}
            {{ range $.Site.Home.AllTranslations }}
                <li><a href="{{ .Permalink }}"
                <li><a href="{{ .RelPermalink }}"
                       title="{{ .Language.LanguageName }}">{{ .Language.LanguageName }}</a>
                </li>
            {{ end }}

 layouts/partials/sidebar.html

@@ -1,7 +1,7 @@
<div class="sidebar{{ with .Site.Params.doNotLoadAnimations }} . {{ else }} animated fadeInDown {{ end }}">
    <div class="logo-title">
        <div class="title">
            <img src="{{ .Site.Params.profilePicture | absURL }}" alt="profile picture">
            <img src="{{ .Site.Params.profilePicture | relURL }}" alt="profile picture">
            <h3 title=""><a href="/">{{ .Site.Params.Title }}</a></h3>
            <div class="description">
                <p>{{ replace .Site.Params.description "\n" "<br>" | safeHTML }}</p>

 layouts/partials/taxonomy/categories.html

@@ -1,7 +1 @@
<span class="separator">
    {{- range $index, $el := . -}}
        {{- $category := replace . "#" "%23" -}}
        {{- $category = replace $category "." "%2e" -}}
        <a class="category" href="{{ ( printf "categories/%s/" ( $category | urlize ) ) | relLangURL }}">{{ . }}</a>
    {{- end -}}
</span>
{{ partial "taxonomy/template.html" (dict "items" . "linkClass" "category" "linkBase" "categories") }}

 layouts/partials/taxonomy/tags.html

@@ -1,7 +1 @@
<span class="separator">
    {{- range $index, $el := . -}}
    {{- $tag := replace . "#" "%23" -}}
    {{- $tag = replace $tag "." "%2e" -}}
    <a class="tag" href="{{ ( printf "tags/%s/" ( $tag | urlize ) ) | relLangURL }}">{{- . -}}</a>
    {{- end -}}
</span>
{{ partial "taxonomy/template.html" (dict "items" . "linkClass" "tag" "linkBase" "tags") }}

 layouts/partials/taxonomy/template.html

New file
@@ -0,0 +1,12 @@
{{- $linkClass := .linkClass -}}
{{- $linkBase := .linkBase -}}

<span class="separator">
    {{- range $index, $el := .items -}}
        <!-- Replace certain special characters with their URL encoded counterparts -->
        {{- $item := replace . "#" "%23" -}}
        {{- $item = replace $item "." "%2e" -}}
        {{- $link := ( printf "%s/%s/" $linkBase ( $item | urlize ) ) | relLangURL -}}
        <a class="{{$linkClass}}" href="{{$link}}">{{- . -}}</a>
    {{- end -}}
</span>