basmala

app/assets/globals.css

@@ -26,4 +26,11 @@ body {
 
 .h-50 {
   height: 3rem;
+}
+
+
+@media only screen and (max-width: 800px) {
+  .holynames-page {
+    flex-direction: column;
+  }
 }

app/constants/global.ts

@@ -115,4 +115,5 @@ export function c(can: (arg0: string, arg1: string) => void) {
     can('read', 'post');
     can('update', 'post');
     can('add', 'post');
-}
+}
+export const AlFateha = "بِسۡمِ ٱللَّهِ ٱلرَّحۡمَٰنِ ٱلرَّحِيمِ"

app/layouts/default.vue

@@ -9,13 +9,15 @@ import { appName } from '../constants/global';
 const $q = useQuasar()
 const offset = ref([0, 18])
 const toggleLeftDrawer = ref(true)
-const drawerLeft = ref(true)
 
 const { toggle } = $q.dark
 function toggleDark() {
   toggle()
   return $q.dark.mode
 }
+function toggleDrwer() {
+  toggleLeftDrawer.value = !toggleLeftDrawer.value
+}
 
 </script>
 
@@ -24,14 +26,14 @@ function toggleDark() {
 
     <q-header elevated class="bg-primary text-white" height-hint="98">
       <q-toolbar>
-        <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />
+        <q-btn dense flat round icon="menu" @click="toggleDrwer" />
         <q-toolbar-title>
           <nuxt-link :title="appName" to="/">{{ appName }}</nuxt-link>
         </q-toolbar-title>
       </q-toolbar>
     </q-header>
 
-    <q-drawer persistent min-width="200" v-model="drawerLeft" elevated side="left" bordered>
+    <q-drawer min-width="200" v-model="toggleLeftDrawer" elevated side="left" bordered>
       <fahras />
     </q-drawer>
 

app/pages/holynames.vue

@@ -10,12 +10,14 @@ const holynames: HolyNameI[] = nuxtApp.payload.data['6Dst81xkaL'].data
 
 </script>
 <template>
-    <QPage padding class="fit flex rtl">
+    <QPage padding class="holynames-page fit flex wrap rtl">
         <Glory class="glory" v-for="one in holynames" :name="one
             .name" :text="one.text" :key="one.text">{{ one.name }}</Glory>
     </QPage>
 </template>
 
 <style>
-.glory {}
+.glory {
+    font: calc(4rem + 100vw);
+}
 </style>

app/pages/quran/[...lok].vue

@@ -1,8 +1,10 @@
 <script lang="ts" async setup>
 import { useHead, useNuxtApp, useRoute } from 'nuxt/app';
-import { computed, ref, watchEffect } from 'vue';
+import { is } from 'quasar';
+import { computed, Ref, ref, watchEffect } from 'vue';
 import { useRouter } from 'vue-router';
-import { appDescription, appName } from '../../constants/global';
+import { isNumber } from 'waelio-utils';
+import { AlFateha, appDescription, appName } from '../../constants/global';
 
 export type ONET = {
     Index: number | string,
@@ -18,21 +20,26 @@ useHead({
     ogTitle: appName,
     ogDescription: appDescription,
 });
+
 const route = useRoute()
 const lok = ref(route.params?.lok || 1)
 
+const sglok = (off = 1): number => {
+    return (isNumber(off)) ? lok.value = +off : 1
 
+}
 watchEffect(() => {
-    lok.value = +route.params.lok || 1
+    sglok(+route.params.lok)
 })
 
 
 
 const nuxtApp = useNuxtApp()
 const Quran: ONET[] = nuxtApp.payload.data['B6H5jvHlMH'].data
 const sura = computed(() => Quran[lok.value - 1] as unknown as number)
-const Verses = computed(() => sura.value.Verses)
+const Verses: Ref<string[]> = computed(() => sura.value.Verses)
 const cleanText = computed(() => JSON.stringify(Verses.value).replaceAll(',', ' ♦ '))
+
 </script>
 <template>
     <QPage padding class=" rtl">
@@ -52,7 +59,8 @@ const cleanText = computed(() => JSON.stringify(Verses.value).replaceAll(',', '
             </q-card>
             <q-card class="q-mt-xs">
                 <q-card-section>
-                    <p class="capitalize block just fit verse"> {{ cleanText }}</p>
+                    <p class="capitalize block just fit verse">
+                    <p class="verse text-center" v-if="lok.value !== 1">{{ AlFateha }}</p> {{ cleanText }}</p>
                 </q-card-section>
             </q-card>
         </div>
@@ -85,9 +93,9 @@ const cleanText = computed(() => JSON.stringify(Verses.value).replaceAll(',', '
     flex-wrap: nowrap;
 }
 
-.verse::after {
-    content: '♦';
-}
+// .verse::after {
+//     content: '♦';
+// }
 
 .verse {
     font-size: 2rem;

app/plugins/Quran.ts

@@ -12,7 +12,7 @@ export default defineNuxtPlugin(async _nuxtApp => {
   })
 
 
-  if (data && data.value) {
+  if (!!data && data.value) {
     useState('Quran', () => JSON.stringify(data.value.data))
   }
 

nuxt.config.ts

@@ -40,7 +40,7 @@ export default defineNuxtConfig({
   vite: {
     server: {
       hmr: {
-        protocol: "WS",
+        protocol: "http",
         host: 'localhost',
         clientPort: 3000,
         port: 3000,
@@ -81,7 +81,6 @@ export default defineNuxtConfig({
       dirs: [
         '../shared',
         '../app/constants',
-        '~/constants',
         '../app/components'
       ]
     }
@@ -91,10 +90,10 @@ export default defineNuxtConfig({
     dirs: [
       '../app/constants',
       '../app/layouts',
-      '../app/store/',
+      '../app/store',
       '../app/composables',
       '../app/components',
-      '../shared/',
+      '../shared',
       '../server/uils'
     ]
   },

package.json

@@ -44,6 +44,7 @@
     "bcryptjs": "^2.4.3",
     "index.d": "link:pinia-plugin-persistedstat/dist/index.d",
     "jose": "^5.9.6",
+    "jsdom": "^26.0.0",
     "prisma": "5.21.1",
     "sass": "^1.83.4",
     "tinyexec": "^0.3.2",