first commit

app/layouts/default.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <slot />
+    <div class="progress-wrap">
+      <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
+        <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
+      </svg>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted } from 'vue';
+import { useHeroStore } from '@/stores/hero';
+import { useSettingStore } from '@/stores/setting';
+
+const heroStore = useHeroStore();
+const settingStore = useSettingStore();
+
+useHead(computed(() => {
+  const title = settingStore.settings?.title ?? heroStore.hero?.title ?? 'Blog details Sidebar Right || Avigo Multipurpose Theme';
+  const meta: Array<Record<string, string>> = [
+    { charset: 'utf-8' },
+    { name: 'viewport', content: 'width=device-width, initial-scale=1.0' },
+  ];
+  if (settingStore.settings?.meta_description) {
+    meta.push({ name: 'description', content: settingStore.settings.meta_description });
+  }
+
+  return {
+    title,
+    meta
+  }
+}));
+
+onMounted(() => {
+  // page-progress
+  const progressPath = document.querySelector(".progress-wrap path") as SVGPathElement | null;
+  if (progressPath) {
+    const pathLength = progressPath.getTotalLength();
+    // use webkitTransition (lowercase) to satisfy TypeScript and cast style where needed
+    progressPath.style.transition = (progressPath.style as any).webkitTransition = "none";
+    progressPath.style.strokeDasharray = pathLength + " " + pathLength;
+    progressPath.style.strokeDashoffset = String(pathLength);
+    progressPath.getBoundingClientRect();
+    progressPath.style.transition = (progressPath.style as any).webkitTransition = "stroke-dashoffset 10ms linear";
+    const updateProgress = () => {
+      const scroll = $(window).scrollTop();
+      const height = $(document).height() - $(window).height();
+      const prog = pathLength - (scroll * pathLength) / height;
+      progressPath!.style.strokeDashoffset = String(prog);
+    };
+    updateProgress();
+    $(window).scroll(updateProgress);
+    const offset = 50;
+    const duration = 550;
+    jQuery(window).on("scroll", () => {
+      if (jQuery(window).scrollTop() > offset) {
+        jQuery(".progress-wrap").addClass("active-progress");
+      } else {
+        jQuery(".progress-wrap").removeClass("active-progress");
+      }
+    });
+    jQuery(".progress-wrap").on("click", (event: any) => {
+      event.preventDefault();
+      jQuery("html, body").animate({ scrollTop: 0 }, duration);
+      return false;
+    });
+  }
+})
+
+</script>