[Updated] home style and translation (axios#46)

* [Update] Index page styles

`assets/style/index.scss` file updated and some commented statements
uncommented so the desired css files will be generated, also some rules
added back where it was exists in the css file but not in the scss file
so now compiling the SCSS file will generate correct CSS files.

* [Updated] index posts style for better management

moved RTL specific styles up to the above of media queries
so it's more scannable when others want to make changes
this is a convention I picked up during CSS development and
it's very helpful for future contributors.

* [Added] better RTL support in home page

- Corrected subheading in the kurdish translations where some english
  words where leaved mistakenly before.
- Added these new fields for better translation of the home page, also
  updated the english file as it's the base language:
  - Website Copy Right Footer
  - View On Github
  - Axios Project Copy Right Footer
  - License Label Footer

* [Fixed] an ejs error

* [Fixed] typo in Kurdish translations

Author: akamfoad

assets/style/index.css

@@ -16,10 +16,6 @@
   font-size: 5px;
 }
 
-.typed-cursor {
-  animation: dissapear linear 8s forwards;
-}
-
 @media screen and (min-width: 370px) {
   :root {
     font-size: 7px;
@@ -164,7 +160,6 @@ section#hero div.content .buttons {
   -webkit-box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.1);
   box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.1);
   display: none;
-
   max-width: 343px;
   width: 100%;
   height: 157px;
@@ -176,261 +171,8 @@ section#hero div.content .buttons {
 
 .code-preview span {
   font-family: var(--font-mono);
-  /*opacity: 0;
-  -webkit-animation: appear 500ms linear forwards;
-  animation: appear 500ms linear forwards;*/
-}
-
-/*.code-preview span:nth-child(1) {
-  -webkit-animation-delay: 300ms;
-          animation-delay: 300ms;
-}
-
-.code-preview span:nth-child(2) {
-  -webkit-animation-delay: 600ms;
-          animation-delay: 600ms;
-}
-
-.code-preview span:nth-child(3) {
-  -webkit-animation-delay: 900ms;
-          animation-delay: 900ms;
-}
-
-.code-preview span:nth-child(4) {
-  -webkit-animation-delay: 1200ms;
-          animation-delay: 1200ms;
-}
-
-.code-preview span:nth-child(5) {
-  -webkit-animation-delay: 1500ms;
-          animation-delay: 1500ms;
-}
-
-.code-preview span:nth-child(6) {
-  -webkit-animation-delay: 1800ms;
-          animation-delay: 1800ms;
-}
-
-.code-preview span:nth-child(7) {
-  -webkit-animation-delay: 2100ms;
-          animation-delay: 2100ms;
-}
-
-.code-preview span:nth-child(8) {
-  -webkit-animation-delay: 2400ms;
-          animation-delay: 2400ms;
-}
-
-.code-preview span:nth-child(9) {
-  -webkit-animation-delay: 2700ms;
-          animation-delay: 2700ms;
-}
-
-.code-preview span:nth-child(10) {
-  -webkit-animation-delay: 3000ms;
-          animation-delay: 3000ms;
-}
-
-.code-preview span:nth-child(11) {
-  -webkit-animation-delay: 3300ms;
-          animation-delay: 3300ms;
-}
-
-.code-preview span:nth-child(12) {
-  -webkit-animation-delay: 3600ms;
-          animation-delay: 3600ms;
-}
-
-.code-preview span:nth-child(13) {
-  -webkit-animation-delay: 3900ms;
-          animation-delay: 3900ms;
-}
-
-.code-preview span:nth-child(14) {
-  -webkit-animation-delay: 4200ms;
-          animation-delay: 4200ms;
-}
-
-.code-preview span:nth-child(15) {
-  -webkit-animation-delay: 4500ms;
-          animation-delay: 4500ms;
-}
-
-.code-preview span:nth-child(16) {
-  -webkit-animation-delay: 4800ms;
-          animation-delay: 4800ms;
-}
-
-.code-preview span:nth-child(17) {
-  -webkit-animation-delay: 5100ms;
-          animation-delay: 5100ms;
-}
-
-.code-preview span:nth-child(18) {
-  -webkit-animation-delay: 5400ms;
-          animation-delay: 5400ms;
-}
-
-.code-preview span:nth-child(19) {
-  -webkit-animation-delay: 5700ms;
-          animation-delay: 5700ms;
-}
-
-.code-preview span:nth-child(20) {
-  -webkit-animation-delay: 6000ms;
-          animation-delay: 6000ms;
-}
-
-.code-preview span:nth-child(21) {
-  -webkit-animation-delay: 6300ms;
-          animation-delay: 6300ms;
-}
-
-.code-preview span:nth-child(22) {
-  -webkit-animation-delay: 6600ms;
-          animation-delay: 6600ms;
-}
-
-.code-preview span:nth-child(23) {
-  -webkit-animation-delay: 6900ms;
-          animation-delay: 6900ms;
 }
 
-.code-preview span:nth-child(24) {
-  -webkit-animation-delay: 7200ms;
-          animation-delay: 7200ms;
-}
-
-.code-preview span:nth-child(25) {
-  -webkit-animation-delay: 7500ms;
-          animation-delay: 7500ms;
-}
-
-.code-preview span:nth-child(26) {
-  -webkit-animation-delay: 7800ms;
-          animation-delay: 7800ms;
-}
-
-.code-preview span:nth-child(27) {
-  -webkit-animation-delay: 8100ms;
-          animation-delay: 8100ms;
-}
-
-.code-preview span:nth-child(28) {
-  -webkit-animation-delay: 8400ms;
-          animation-delay: 8400ms;
-}
-
-.code-preview span:nth-child(29) {
-  -webkit-animation-delay: 8700ms;
-          animation-delay: 8700ms;
-}
-
-.code-preview span:nth-child(30) {
-  -webkit-animation-delay: 9000ms;
-          animation-delay: 9000ms;
-}
-
-.code-preview span:nth-child(31) {
-  -webkit-animation-delay: 9300ms;
-          animation-delay: 9300ms;
-}
-
-.code-preview span:nth-child(32) {
-  -webkit-animation-delay: 9600ms;
-          animation-delay: 9600ms;
-}
-
-.code-preview span:nth-child(33) {
-  -webkit-animation-delay: 9900ms;
-          animation-delay: 9900ms;
-}
-
-.code-preview span:nth-child(34) {
-  -webkit-animation-delay: 10200ms;
-          animation-delay: 10200ms;
-}
-
-.code-preview span:nth-child(35) {
-  -webkit-animation-delay: 10500ms;
-          animation-delay: 10500ms;
-}
-
-.code-preview span:nth-child(36) {
-  -webkit-animation-delay: 10800ms;
-          animation-delay: 10800ms;
-}
-
-.code-preview span:nth-child(37) {
-  -webkit-animation-delay: 11100ms;
-          animation-delay: 11100ms;
-}
-
-.code-preview span:nth-child(38) {
-  -webkit-animation-delay: 11400ms;
-          animation-delay: 11400ms;
-}
-
-.code-preview span:nth-child(39) {
-  -webkit-animation-delay: 11700ms;
-          animation-delay: 11700ms;
-}
-
-.code-preview span:nth-child(40) {
-  -webkit-animation-delay: 12000ms;
-          animation-delay: 12000ms;
-}
-
-.code-preview span:nth-child(41) {
-  -webkit-animation-delay: 12300ms;
-          animation-delay: 12300ms;
-}
-
-.code-preview span:nth-child(42) {
-  -webkit-animation-delay: 12600ms;
-          animation-delay: 12600ms;
-}
-
-.code-preview span:nth-child(43) {
-  -webkit-animation-delay: 12900ms;
-          animation-delay: 12900ms;
-}
-
-.code-preview span:nth-child(44) {
-  -webkit-animation-delay: 13200ms;
-          animation-delay: 13200ms;
-}
-
-.code-preview span:nth-child(45) {
-  -webkit-animation-delay: 13500ms;
-          animation-delay: 13500ms;
-}
-
-.code-preview span:nth-child(46) {
-  -webkit-animation-delay: 13800ms;
-          animation-delay: 13800ms;
-}
-
-.code-preview span:nth-child(47) {
-  -webkit-animation-delay: 14100ms;
-          animation-delay: 14100ms;
-}
-
-.code-preview span:nth-child(48) {
-  -webkit-animation-delay: 14400ms;
-          animation-delay: 14400ms;
-}
-
-.code-preview span:nth-child(49) {
-  -webkit-animation-delay: 14700ms;
-          animation-delay: 14700ms;
-}
-
-.code-preview span:nth-child(50) {
-  -webkit-animation-delay: 15000ms;
-          animation-delay: 15000ms;
-}*/
-
 .code-preview span.p {
   font-weight: var(--fw-bold);
   color: var(--primary-color);
@@ -474,25 +216,26 @@ footer .row {
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
+  -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   gap: 1rem;
   margin-bottom: 1.5rem;
 }
 
-/*@-webkit-keyframes appear {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
+html[dir="rtl"] main {
+  margin-right: calc(var(--margin) / 2);
+  margin-left: unset;
 }
 
-@keyframes appear {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}*/
+html[dir="rtl"] .code-preview {
+  direction: ltr;
+}
+
+html[dir="rtl"] header a.button {
+  margin-left: 0 !important;
+}
+
+html[dir="rtl"] footer table td,
+html[dir="rtl"] footer table th {
+  text-align: unset;
+}

assets/style/index.scss

@@ -2,6 +2,7 @@
 
 body {
   margin: 0;
+  overflow-x: hidden;
 }
 
 * {
@@ -99,10 +100,18 @@ section#hero {
   box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.1);
   display: none;
 
+  max-width: 343px;
+  width: 100%;
+  height: 157px;
+
+  pre {
+    display: inline;
+  }
+
   span {
     font-family: var(--font-mono);
-    opacity: 0;
-    animation: appear 500ms linear forwards;
+    // opacity: 0;
+    // animation: appear 500ms linear forwards;
 
     //@for $i from 1 through 50 {
     //  &:nth-child(#{$i}) {
@@ -148,15 +157,44 @@ footer {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
   }
 }
 
-@keyframes appear {
-  0% {
-    opacity: 0;
+// @keyframes appear {
+//   0% {
+//     opacity: 0;
+//   }
+
+//   100% {
+//     opacity: 1;
+//   }
+// }
+
+html[dir="rtl"] {
+  main {
+    margin-right: calc(var(--margin) / 2);
+    margin-left: unset;
   }
 
-  100% {
-    opacity: 1;
+  .code-preview {
+    direction: ltr;
+  }
+
+  header {
+    a.button {
+      margin-left: 0 !important;
+    }
+  }
+
+  footer {
+    table {
+      td,
+      th {
+        text-align: unset;
+      }
+    }
   }
 }

en.lang.js

@@ -28,6 +28,10 @@ module.exports = {
     "Create an Issue": undefined,
     "Next": undefined,
     "Previous": undefined,
+    "Website Copy Right Footer": undefined,
+    "View On Github": undefined,
+    "Axios Project Copy Right Footer": undefined,
+    "License Label Footer": undefined
   },
   sidebar: [
     {

ku.lang.js

@@ -9,9 +9,8 @@ module.exports = {
   lang: "ckb-ku",
   // `p` stands for `paragraph`. This will contain translations of full text blocks
   p: {
-    headline: "ڕاژەخوازێکی HTTPـیە لەسەر بنجینەی Promise بۆ وێبگەڕ و نۆد",
-    subhead: `Axios is a simple promise based HTTP client for the browser and node.js.
-    ئەکسیۆس ڕاژەخوازێکی HTTPـیە لەسەر Promise بنچینەکراوە بۆ نۆد و وێبگەڕ. ئەکسیۆس ژێدەرگەیەکی ئاسان بۆ بەکارهێنان لە گورزەیەکی بچووک بە ناوبەستێکی شیاو بۆ پەرەسەندن دابین دەکات.`,
+    headline: "ڕاژەخوازێکی HTTPـیە لەسەر بنچینەی Promise بۆ وێبگەڕ و نۆد",
+    subhead: `ئەکسیۆس ڕاژەخوازێکی HTTPـیە لەسەر Promise بنچینەکراوە بۆ نۆد و وێبگەڕ. ئەکسیۆس ژێدەرگەیەکی ئاسان بۆ بەکارهێنان لە گورزەیەکی بچووک بە ناوبەستێکی شیاو بۆ پەرەسەندن دابین دەکات.`,
   },
   // `t` stands fot `translation`. This will contain translations of single words or phrases
   t: {
@@ -26,6 +25,10 @@ module.exports = {
     "Create an Issue": "کێشەیەک دروست بکە",
     "Next": "دواتر",
     "Previous": "پێشتر",
+    "Website Copy Right Footer": 'ئەم ماڵپەڕە: مافی لەبەرگگرتنەوەی پارێزراوە @ 2020-ئێستا John Jakob "Jake" Sarjeant. بەکارهێنراوە پاش مۆڵەت وەرگرتن',
+    "View On Github": 'بڕوانە ئەم ماڵپەڕە لەسەر گیتهەب',
+    "Axios Project Copy Right Footer": 'پڕۆژەی ئەکسیۆس: مافی لەبەرگگرتنەوەی پارێزراوە @ 2014-ئێستا Matt Zabriskie.',
+    "License Label Footer":'بڵاوکراوەتەوە لە ژێر مۆڵەتی'
   },
   sidebar: [
     {

scss/index.scss

@@ -436,6 +436,35 @@ main {
   }
 }
 
+/* RTL styles */
+
+html[dir="rtl"] {
+  aside {
+    right: 0;
+    left: unset;
+
+    transform: translateX(100%);
+
+    details.dropdown-language {
+      div.options {
+        width: 100%;
+        padding-left: unset;
+        padding-right: 2.3rem;
+      }
+    }
+  }
+
+  main {
+    position: absolute;
+    right: var(--sidebar-width);
+    left: unset;
+
+    pre {
+      direction: ltr;
+    }
+  }
+}
+
 @media screen and (min-width: 800px) {
   body {
     --sidebar-width: 239px;
@@ -636,30 +665,3 @@ body {
     top: 0;
   }
 }
-
-/* RTL styles */
-
-html[dir="rtl"] {
-  aside {
-    right: 0;
-    left: unset;
-
-    details.dropdown-language {
-      div.options {
-        width: 100%;
-        padding-left: unset;
-        padding-right: 2.3rem;
-      }
-    }
-  }
-
-  main {
-    position: absolute;
-    right: var(--sidebar-width);
-    left: unset;
-
-    pre {
-      direction: ltr;
-    }
-  }
-}

templates/home.ejs

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="<%= locale.lang %>" dir="<%= locale.dir %>">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -106,23 +106,21 @@
         <% }) %>
       </table>
       <div class="row">
-        <span class="copyright-notice"
-          >This Website: Copyright © 2020-present John Jakob "Jake" Sarjeant.
-          Used by permission.</span
-        >
-        <a href="https://github.com/axios/axios-docs"
-          >View this site on GitHub</a
-        >
+        <span class="copyright-notice">
+          <%= locale.t['Website Copy Right Footer'] || 'This Website: Copyright © 2020-present John Jakob "Jake" Sarjeant. Used by permission.' %>
+        </span>
+        <a href="https://github.com/axios/axios-docs">
+          <%= locale.t['View On Github'] || 'View this site on GitHub' %>
+        </a>
       </div>
       <div class="row">
-        <span class="copyright-notice">The Axios Project: Copyright © 2014-present Matt Zabriskie.</span
-        >
-        <span
-          >Licensed under the
-          <b
-            ><a href="https://opensource.org/licenses/MIT">MIT License</a></b
-          ></span
-        >
+        <span class="copyright-notice">
+          <%= locale.t['Axios Project Copy Right Footer'] || 'The Axios Project: Copyright © 2014-present Matt Zabriskie.' %>
+        </span>
+        <span>
+          <%= locale.t['License Label Footer'] || 'Licensed under the' %>
+            <b><a href="https://opensource.org/licenses/MIT">MIT License</a></b>
+        </span>
       </div>
     </footer>