RTL support and Arabic Translation (#178)

Abdurrahman Rajab

18.31.2021 4beb92098a0c1565aca7e674c884992ee3723aad

RTL support  and Arabic Translation (#178)

Added support for RTL languages, such as Arabic.

 README.md

@@ -16,6 +16,7 @@
- Navigation items
- Pagination
- Multilingual
- RTL support
- Post Thumbnails (optional)
- 100⁄100 Google Lighthouse score
- Google Analytics (optional)
@@ -234,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

@@ -16,8 +16,6 @@
    --blockquote-border-color: #dfe2e5;
    --thumbnail-height: 15em;
    scroll-padding-top: 100px;
    --duration: 0.5s;
    --timing: ease;
}

html[data-theme='dark'] {
@@ -48,7 +46,6 @@
    width: 100%;
    margin: 0 auto 30px auto;
    background-color: var(--bg-color);
    transition: color var(--duration) var(--timing), background-color var(--duration) var(--timing);
}

p {

 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 */

 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

@@ -24,4 +24,13 @@
other = "Senden"

[read_more]
other = "weiterlesen"
other = "weiterlesen"

[name]
other = "Name"

[email]
other = "E-Mail Adresse"

[message]
other = "Nachricht" 

 i18n/dk.toml

@@ -24,4 +24,13 @@
other = "Sende"

[read_more]
other = "Læs mere"
other = "Læs mere"

[name]
other = "Navn"

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

[message]
other = "besked" 

 i18n/en.toml

@@ -24,4 +24,13 @@
other = "Send"

[read_more]
other = "Read more"
other = "Read more"

[name]
other = "Name"

[email]
other = "Email"

[message]
other = "Message" 

 i18n/es.toml

@@ -24,4 +24,13 @@
other = "Enviar"

[read_more]
other = "Leer más"
other = "Leer más"

[name]
other = "Nombre"

[email]
other = "Correo electrónico"

[message]
other = "Mensaje" 

 i18n/fa.toml

@@ -24,4 +24,13 @@
other = "ارسال"

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

[name]
other = "نام"

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

[message]
other = "پیام" 

 i18n/fi.toml

@@ -24,4 +24,13 @@
other = "Lähetä"

[read_more]
other = "Jatka lukemista"
other = "Jatka lukemista"

[name]
other = "Nimi"

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

[message]
other = "Viesti" 

 i18n/fr.toml

@@ -24,4 +24,13 @@
other = "Envoyer"

[read_more]
other = "continuer la lecture"
other = "continuer la lecture"

[name]
other = "Nom"

[email]
other = "Email"

[message]
other = "Message" 

 i18n/it.toml

@@ -24,4 +24,13 @@
other = "Spedire"

[read_more]
other = "Continua a leggere"
other = "Continua a leggere"

[name]
other = "Nome"

[email]
other = "Email"

[message]
other = "Messaggio" 

 i18n/ko.toml

@@ -25,3 +25,12 @@

[read_more]
other = "더 읽기"

[name]
other = "이름"

[email]
other = "이메일"

[message]
other = "메시지"

 i18n/pt-br.toml

@@ -24,4 +24,13 @@
other = "Enviar"

[read_more]
other = "continue lendo"
other = "continue lendo"

[name]
other = "Nome"

[email]
other = "Email"

[message]
other = "Mensagem" 

 i18n/zh-cn.toml

@@ -24,4 +24,13 @@
other = "发送"

[read_more]
other = "继续阅读"
other = "继续阅读"

[name]
other = "姓名"

[email]
other = "电子邮件"

[message]
other = "信息" 

 i18n/zh-tw.toml

@@ -24,4 +24,13 @@
other = "發送"

[read_more]
other = "繼續閱讀"
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/single.html

@@ -13,6 +13,7 @@
                                                {{ .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>

 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,12 +11,22 @@
    {{- 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.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.RelPermalink }}"