feat: generate all ayah

app.html

@@ -11,37 +11,49 @@
     /* THEME LIGHT -- start*/
     .light {
       --text-color: #071e3d;
-      --link-color: #071e3d;
+      --text-surah-header-color: #071e3d;
+      --link-color: #3ba7f0;
       --bg-color: #f6f7f8;
       --bg-card-color: #f6f7f8;
       --bg-card-darken-color: #c8cbcd;
       --bg-body-color: #ececec;
     }
-
     /* THEME LIGHT -- end*/
 
     /* THEME DARK -- start*/
     .dark {
       --text-color: #fff;
-      --link-color: #fff;
+      --text-surah-header-color: #fff;
+      --link-color: #3671e6;
       --bg-color: #071e3d;
       --bg-card-color: #1f4287;
       --bg-card-darken-color: #040c0f;
       --bg-body-color: #071e3d;
     }
-
     /* THEME DARK -- end*/
 
     /* THEME NATURE -- start*/
     .nature {
       --text-color: #333;
-      --link-color: #333;
+      --text-surah-header-color: #028e71;
+      --link-color: #028e71;
       --bg-color: #02c39a;
       --bg-card-color: #02c39a;
       --bg-card-darken-color: #028e71;
       --bg-body-color: #a3e9da;
     }
+    /* THEME NATURE -- end*/
 
+    /* THEME SEPIA -- start*/
+    .sepia {
+      --text-color: #FFF;
+      --text-surah-header-color: #5f4938;
+      --link-color: #5f4938;
+      --bg-color: #d0bc91;
+      --bg-card-color: #8a6c44;
+      --bg-card-darken-color: #5f4938;
+      --bg-body-color: #c6c4bc;
+    }
     /* THEME NATURE -- end*/
   </style>
 </head>

assets/search.scss

@@ -12,7 +12,6 @@
     background-color: #fff;
     font-size: 1rem;
     border-radius: 4px;
-    color: var(--bg-color);
     border: 1px solid var(--text-color);
   }
 

assets/switch.scss

@@ -25,16 +25,16 @@
   background-color: #ccc;
   -webkit-transition: .4s;
   transition: .4s;
+  border: 2px solid var(--text-color);
 }
 
 .slider:before {
   position: absolute;
   content: "";
   height: 20px;
   width: 20px;
-  top: 0;
+  top: -2px;
   left: 0px;
-  bottom: 4px;
   background-color: var(--text-color);
   -webkit-transition: .4s;
   transition: .4s;

build-scripts/generateJuz30Markdown.js

@@ -0,0 +1,32 @@
+const fs = require('fs')
+const path = require('path')
+
+const main = async () => {
+  try {
+    let fileContent = `
+|No. | |No. Surat |  Nama Surah | Bahasa Arab | Arti | Jumlah Ayat |
+|--- |--- | --- |--- |--- |--- |
+`
+    const content = await fs.readFileSync(path.resolve('./static/data/surah-info.json'), {
+      encoding: 'utf-8'
+    })
+    const jsContent = JSON.parse(content)
+    jsContent.surah_info.filter(s => s.index >= 78).map((s, i) => {
+      fileContent += `| ${i + 1} | ${s.index} | [${s.latin}](https://www.baca-quran.id/${s.index}/) | ${s.arabic} | ${s.translation} | ${s.ayah_count} |
+`
+    })
+    fs.writeFile(
+      path.resolve('./juz30-markdown.md'), fileContent,
+      function (err) {
+        if (err) {
+          return console.log('❌ Error write file', err)
+        }
+        console.log('✅ Success write file')
+      }
+    )
+  } catch (error) {
+    return console.log('❌ Error read', error)
+  }
+}
+
+main()

build-scripts/generateSurahMarkdown.js

@@ -0,0 +1,32 @@
+const fs = require('fs')
+const path = require('path')
+
+const main = async () => {
+  try {
+    let fileContent = `
+|No. | Nama Surah | Bahasa Arab | Arti | Jumlah Ayat |
+|--- |--- |--- |--- |--- |
+`
+    const content = await fs.readFileSync(path.resolve('./static/data/surah-info.json'), {
+      encoding: 'utf-8'
+    })
+    const jsContent = JSON.parse(content)
+    jsContent.surah_info.map((s) => {
+      fileContent += `| ${s.index} | [${s.latin}](https://www.baca-quran.id/${s.index}/) | ${s.arabic} | ${s.translation} | ${s.ayah_count} |
+`
+    })
+    fs.writeFile(
+      path.resolve('./surah-markdown.md'), fileContent,
+      function (err) {
+        if (err) {
+          return console.log('❌ Error write file', err)
+        }
+        console.log('✅ Success write file')
+      }
+    )
+  } catch (error) {
+    return console.log('❌ Error read', error)
+  }
+}
+
+main()

build-scripts/getRoutes.ts

@@ -1,3 +1,5 @@
+import SurahConstant from './surah'
+
 const getRoutes = (): string[] => {
   const res: string[] = [
     '/',
@@ -24,8 +26,13 @@ const getRoutes = (): string[] => {
   for (let i = 1; i < 115; i++) {
     res.push(`/${i}`)
     res.push(`/amp/${i}`)
-    res.push(`/${i}/1`)
-    res.push(`/${i}/2`)
+    const surahObj = SurahConstant.find(item => item.index === i)
+    if (surahObj) {
+      for (let j = 1; j < surahObj.ayah_count + 1; j++) {
+        res.push(`/${i}/${j}`)
+        res.push(`/amp/${i}/${j}`)
+      }
+    }
   }
   return res
 }

build-scripts/getSitemaps.ts

@@ -44,35 +44,44 @@ const getVerseRoutes = (surahIndex: number): string[] => {
   const surahObj = SurahConstant.find(item => item.index === surahIndex)
   if (surahObj) {
     for (let j = 1; j < surahObj.ayah_count + 1; j++) {
-      if (j < 2) {
-        res.push(`/${surahIndex}/${j}`)
-      }
+      res.push(`/${surahIndex}/${j}`)
     }
   }
   return res
 }
 
+function chunkArray (arr, len) {
+  const chunks = []; let i = 0; const n = arr.length
+  while (i < n) {
+    chunks.push(arr.slice(i, i += len))
+  }
+  return chunks
+}
 // @ts-ignore
 // eslint-disable-next-line
-const getVerseSitemaps = (): sitemapConfigs => {
+const getVerseSitemaps = (): sitemapConfigs[] => {
   let r: string[] = []
   for (let i = 1; i < 115; i++) {
     r = r.concat(getVerseRoutes(i))
   }
 
-  const surahSitemap: sitemapConfigs = {
-    path: 'sitemaps/allverse.xml',
-    routes: r,
-    exclude: getStaticRoutes(),
-    trailingSlash: true,
-    defaults: {
-      changefreq: 'daily',
-      priority: 1,
-      lastmod: new Date()
+  const chunkArr = chunkArray(r, 1000)
+  const result = chunkArr.map((arr, index) => {
+    const surahSitemap: sitemapConfigs = {
+      path: `sitemaps/allverse${index === 0 ? '' : (index + 1)}.xml`,
+      routes: arr,
+      exclude: getStaticRoutes(),
+      trailingSlash: true,
+      defaults: {
+        changefreq: 'weekly',
+        priority: 0.6,
+        lastmod: new Date()
+      }
     }
-  }
+    return surahSitemap
+  })
 
-  return surahSitemap
+  return result
 }
 
 const getSitemaps = (): sitemapConfigs[] => {
@@ -81,8 +90,8 @@ const getSitemaps = (): sitemapConfigs[] => {
     routes: getStaticRoutes(),
     trailingSlash: true,
     defaults: {
-      changefreq: 'daily',
-      priority: 1,
+      changefreq: 'weekly',
+      priority: 0.9,
       lastmod: new Date()
     }
   }
@@ -99,7 +108,7 @@ const getSitemaps = (): sitemapConfigs[] => {
     }
   }
 
-  const res: sitemapConfigs[] = [staticSitemap, surahSitemap, getVerseSitemaps()]
+  const res: sitemapConfigs[] = [staticSitemap, surahSitemap].concat(getVerseSitemaps())
   return res
 }
 

components/BaseHeader.vue

@@ -12,9 +12,9 @@
         </a>
         <a
           v-else
-          href="javascript:void(0)"
           class="header__hamburger"
           title="Kembali"
+          :href="backUrl"
           @click="backToPreviousPage">
           <MdArrowBackIcon w="30px" h="30px" name="Kembali" title="Kembali" />
         </a>
@@ -63,6 +63,14 @@ export default class BaseHeader extends Vue {
     return this.$route.path === '/'
   }
 
+  get backUrl (): string {
+    if (this.page === 'surah-detail') {
+      return '/all-surah/'
+    } else {
+      return '/'
+    }
+  }
+
   toggleSidebar () {
     this.setShowSidebar(true)
   }

components/Breadcrumb.vue

@@ -70,7 +70,7 @@ export default class BaseSidebar extends Vue {
       }
       a {
         text-decoration: none;
-        color: var(--bg-card-color);
+        color: var(--text-surah-header-color);
       }
     }
   }

components/SingleVerse.vue

@@ -173,6 +173,7 @@ export default class SingleVerseCard extends Vue {
     &_icon {
       padding: 0 0.5em;
       position: relative;
+      color: var(--text-color);
     }
   }
   &__arabic {

components/SurahHeader.vue

@@ -13,7 +13,7 @@
     </div>
     <div v-if="showSettings" class="settings__group">
       <div>
-        <label for="surah-setting-tafsir">Tafsir</label>
+        <label class="switch__label" for="surah-setting-tafsir">Tafsir</label>
         <label class="switch">
           <input
             id="surah-setting-tafsir"
@@ -26,7 +26,7 @@
       </div>
 
       <div>
-        <label for="surah-setting-translation">Terjemahan</label>
+        <label class="switch__label" for="surah-setting-translation">Terjemahan</label>
         <label class="switch">
           <input
             id="surah-setting-translation"
@@ -39,7 +39,7 @@
       </div>
 
       <div>
-        <label for="surah-setting-muqaddimah">Muqaddimah</label>
+        <label class="switch__label" for="surah-setting-muqaddimah">Muqaddimah</label>
         <label class="switch">
           <input
             id="surah-setting-muqaddimah"
@@ -98,6 +98,10 @@ export default class SurahHeader extends Vue {
   font-size: 2rem;
   text-align: center;
   text-decoration: none;
+  color: var(--text-surah-header-color);
+}
+.switch__label{
+  color: var(--text-surah-header-color);
 }
 .surah-latin {
   font-size: 1rem;

constant/theme.ts

@@ -3,22 +3,31 @@ const LIGHT = {
   bgColor: '#f6f7f8',
   fgColor: '#071e3d'
 }
+
 const DARK = {
   name: 'dark',
   bgColor: '#071e3d',
   fgColor: '#fff'
 }
+
 const GREEN = {
   name: 'nature',
   bgColor: '#02c39a',
   fgColor: '#333'
 }
 
+const SEPIA = {
+  name: 'sepia',
+  bgColor: '#d0bc91',
+  fgColor: '#fff'
+}
+
 export default {
   AVAILABLE_THEME: [
-    LIGHT, DARK, GREEN
+    LIGHT, DARK, GREEN, SEPIA
   ],
   LIGHT,
   DARK,
-  GREEN
+  GREEN,
+  SEPIA
 }