July 8 deployment (#46)

#44 
#45 
#31 
#30

README.md

@@ -1,3 +1,5 @@
+[![Netlify Status](https://api.netlify.com/api/v1/badges/8b8db315-b660-404a-8b13-d5adc8d56885/deploy-status)](https://app.netlify.com/sites/clan-uni/deploys)
+
 # Content v2 Minimal Starter
 
 Look at the [Content documentation](https://content.nuxt.com/) to learn more.

app.vue

@@ -1,3 +1,19 @@
 <template>
   <NuxtPage />
-</template>
+</template>
+
+<script setup lang="ts">
+import { useContentData } from "~/stores/contentData";
+import { useUiOptions } from "~/stores/uiOptions";
+import { useRoute } from "vue-router";
+
+const contentData = useContentData();
+const uiOptions = useUiOptions();
+const route = useRoute();
+
+const { data } = await useAsyncData(async () => await queryContent().find());
+const viewMode = route.query.view;
+
+contentData.set(data.value);
+uiOptions.setIsDetailView(viewMode === "course");
+</script>

components/breadcrumbs.vue

@@ -25,7 +25,6 @@
 
 <script setup>
 import { computed } from "vue";
-import { subpathToTitle } from "~/src/helpers/blogPostHelper";
 import { useUiOptions } from "~/stores/uiOptions";
 
 const uiOptions = useUiOptions();

components/top-menu.vue

@@ -7,9 +7,9 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
-import { subpathToTitle } from '~/src/helpers/blogPostHelper';
-import { useUiOptions } from '~/stores/uiOptions';
+import { computed } from "vue";
+import { subpathToTitle } from "~/src/helpers/blogPostHelper";
+import { useUiOptions } from "~/stores/uiOptions";
 
 const props = defineProps({
   path: {
@@ -25,7 +25,7 @@ const props = defineProps({
 const uiOptions = useUiOptions();
 
 const subCategories = computed(() => {
-  const names = props.path ? props.path.split('/') : [];
+  const names = props.path ? props.path.split("/") : [];
   let ref = props.treeData;
 
   for (let i = 0; i < names.length; i++) {

content/web-components.md

@@ -1,8 +1,11 @@
 ---
 title: Web Components
+author: Masoud Alemi
+github: iMasoud
 tags: web components, front end
 cover: /media/web-components/images/web-components.png
 ---
+
 Embark on a journey through the world of web components in this comprehensive course!
 Discover the essence of web components, how they came to be, and the reasons why major tech companies are adopting them over traditional JavaScript libraries. Following this introduction, we'll delve into the technical aspects, exploring the building blocks of web components and guiding you through creating your own.
 For those ready to leap into this exciting topic, your adventure starts here:

layouts/default.vue

@@ -86,26 +86,17 @@
 import { ref, onMounted, watch } from "vue";
 import { useUiOptions } from "~/stores/uiOptions";
 import { useContentData } from "~/stores/contentData";
-import { useRoute } from "vue-router";
 
-const route = useRoute();
 const uiOptions = useUiOptions();
 const contentData = useContentData();
 const colorMode = useColorMode();
 
-const { data: allContent } = await useAsyncData(() => queryContent().find());
-contentData.set(allContent.value);
 const coursesTree = contentData.coursesTree;
 const filesArray = contentData.filesArray;
 
 const isDetailView = ref(uiOptions.isDetailView);
 const isDarkMode = ref(uiOptions.isDarkMode);
 
-const setDetailView = () => {
-  const viewMode = route.query.view;
-  uiOptions.setIsDetailView(viewMode === "course");
-};
-
 const initiateIsDarkMode = () => {
   const value = colorMode.value === "dark";
   isDarkMode.value = value;
@@ -114,7 +105,6 @@ const initiateIsDarkMode = () => {
 
 onMounted(() => {
   initiateIsDarkMode();
-  setDetailView();
 });
 
 watch(isDarkMode, (newValue) => {

pages/[...slug].vue

@@ -1,50 +1,49 @@
 <template>
   <NuxtLayout>
-    <ClientOnly>
-      <main v-if="isIndex">
-        <!-- <top-menu path="/" :treeData="treeData" :isIndex="isIndex" /> -->
-        <blog-post v-if="page" :article="page" class="blog-post" />
-      </main>
-      <article v-else>
-        <breadcrumbs
-          :path="currentPath"
-          :treeData="treeData"
-          :pageTitle="isArticle ? page.title : null"
-        />
-        <!-- <top-menu :path="currentPath" :treeData="treeData" /> -->
+    <main v-if="isIndex">
+      <!-- <top-menu path="/" :treeData="treeData" :isIndex="isIndex" /> -->
+      <blog-post v-if="page" :article="page" class="blog-post" />
+    </main>
+    <article v-else>
+      <breadcrumbs
+        :path="currentPath"
+        :treeData="treeData"
+        :pageTitle="isArticle ? page.title : null"
+      />
+      <!-- <top-menu :path="currentPath" :treeData="treeData" /> -->
+      <blog-post
+        v-if="isArticle"
+        :article="page"
+        :path="page && page._path"
+        class="blog-post"
+      />
+      <template v-else>
         <blog-post
-          v-if="isArticle"
-          :article="page"
-          :path="page && page._path"
+          v-for="post in articles"
+          :key="post._id"
+          :article="post"
+          :path="post._path"
           class="blog-post"
+          preview
         />
-        <template v-else>
-          <blog-post
-            v-for="post in articles"
-            :key="post._id"
-            :article="post"
-            :path="post._path"
-            class="blog-post"
-            preview
-          />
-        </template>
-      </article>
-    </ClientOnly>
+      </template>
+    </article>
   </NuxtLayout>
 </template>
 
 <script setup>
 import { useContentData } from "~/stores/contentData";
 import { useRoute } from "vue-router";
-
 const { treeData, filesArray } = useContentData();
 const a = useContent();
 const page = a.page;
 const route = useRoute();
-const currentPath = route.fullPath;
+const currentPath = route.path;
 const isIndex = currentPath === "/";
 const isArticle = filesArray.includes(currentPath);
+console.log(currentPath);
 const articles = isArticle
   ? []
-  : (await useAsyncData(() => queryContent(currentPath).find()))?.data?.value ?? [];
+  : (await useAsyncData(async () => await queryContent(currentPath).find()))?.data
+      ?.value ?? [];
 </script>