Chore: package update and migration to updates

Signed-off-by: Kiran Parajuli <[email protected]>

Author: kiranparajuli589

src/constants/Links.ts

@@ -0,0 +1,18 @@
+const Links = {
+  Github: "https://github.com/vue-formik/vue-formik",
+  NPM: "https://www.npmjs.com/package/vue-formik",
+  Documentation: "https://vue-formik.netlify.app/",
+  Playground: "https://stackblitz.com/edit/vitejs-vite-px7jzkdy?file=src%2FApp.vue",
+  Issues: "https://github.com/vue-formik/vue-formik/issues",
+  PullRequests: "https://github.com/vue-formik/vue-formik/pulls",
+
+  Yup: "https://github.com/jquense/yup",
+  Joi: "https://joi.dev/",
+  Zod: "https://zod.dev/",
+  Formik: "https://formik.org",
+
+  DemoViewGHPage: "https://github.com/vue-formik/docs/blob/main/src/views/DemoView.vue",
+  KiranLinkedIn: "https://www.linkedin.com/in/kiranparajuli589/",
+};
+
+export default Links;

src/constants/theSidebarItems.ts

@@ -1,3 +1,5 @@
+import Links from "@/constants/Links.ts";
+
 export default [
   {
     name: "Getting Started",
@@ -31,7 +33,7 @@ export default [
       { name: "Demo", path: "/demo" },
       {
         name: "Playground",
-        path: "https://stackblitz.com/edit/vitejs-vite-px7jzkdy?file=src%2Fcomponents%2FHelloWorld.vue",
+        path: Links.Playground,
       },
     ],
   },

src/views/AboutView.vue

@@ -45,44 +45,45 @@
 
 <script setup lang="ts">
 import pkgJson from "../../package.json";
+import Links from "@/constants/Links.ts";
 const { dependencies } = pkgJson;
 const version = dependencies["vue-formik"]?.replace(/^\^/, "");
 const links = [
   {
     title: "Github",
-    url: "https://github.com/vue-formik/vue-formik",
+    url: Links.Github,
     color: "text-gray-100",
   },
   {
     title: "Documentation",
-    url: "https://vue-formik.netlify.app",
+    url: Links.Documentation,
     color: "text-green-500",
   },
   {
     title: "Playground",
-    url: "https://stackblitz.com/edit/vitejs-vite-px7jzkdy?file=src%2FApp.vue",
+    url: Links.Playground,
     color: "text-blue-500",
   },
   {
     title: "NPM",
-    url: "https://www.npmjs.com/package/vue-formik",
+    url: Links.NPM,
     color: "text-red-500",
   },
   {
     title: "Issues",
-    url: "https://github.com/vue-formik/vue-formik/issues",
+    url: Links.Issues,
     color: "text-yellow-500",
   },
   {
     title: "Pull Requests",
-    url: "https://github.com/vue-formik/vue-formik/pulls",
+    url: Links.PullRequests,
     color: "text-purple-500",
   },
 ];
 const author = {
   name: "Kiran Parajuli",
   email: "[email protected]",
-  linkedIn: "https://www.linkedin.com/in/kiranparajuli589/",
+  linkedIn: Links.KiranLinkedIn,
 };
 const birth = "2024-12-28T18:22:01.000Z";
 const fromNow = new Date(birth).toLocaleString();

src/views/DemoView.vue

@@ -36,7 +36,7 @@
     <p class="py-2 text-sm">
       <span> You can find the source code for this example on </span>
       <a
-        href="https://github.com/vue-formik/docs/blob/main/src/views/DemoView.vue"
+        :href="Links.DemoViewGHPage"
         target="_blank"
         rel="noopener noreferrer"
         class="text-blue-500 underline"
@@ -53,6 +53,7 @@ import { onBeforeMount, ref } from "vue";
 import ValidationSchemaPreview from "@/components/home/ValidationSchemaPreview.vue";
 import ExpoForm from "@/components/home/ExpoForm.vue";
 import { DemoTabs } from "@/constants/demo.ts";
+import Links from "@/constants/Links.ts";
 
 onBeforeMount(() => {
   document.title = "Home | Vue Formik";

src/views/HomeView.vue

@@ -13,13 +13,7 @@
         <router-link class="secondary-btn md" to="/getting-started/quick-start">
           Get Started
         </router-link>
-        <a
-          class="secondary-btn md"
-          target="_blank"
-          href="https://stackblitz.com/edit/vitejs-vite-px7jzkdy?file=src%2FApp.vue"
-        >
-          Playground
-        </a>
+        <a class="secondary-btn md" target="_blank" :href="Links.Playground"> Playground </a>
       </div>
     </section>
 
@@ -46,7 +40,9 @@
   </section>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import Links from "@/constants/Links.js";
+</script>
 
 <style lang="scss">
 .text-gradient {

src/views/gettingStarted/IntroductionView.vue

@@ -18,7 +18,7 @@
       <p>
         Vue Formik is a powerful library for Vue.js that simplifies form handling by providing a
         more structured approach to managing HTML forms. Inspired by the popular React library
-        <a href="https://formik.org" target="_blank" title="Formik">Formik</a>, Vue Formik leverages
+        <a :href="Links.Formik" target="_blank" title="Formik">Formik</a>, Vue Formik leverages
         Vue's built-in reactivity system to streamline form development and management. 💡
       </p>
     </section>
@@ -48,10 +48,9 @@
         </li>
         <li>
           You can create custom validation functions or integrate a library like
-          <a href="https://github.com/jquense/yup" target="_blank" title="Yup" class="text-primary"
-            >Yup</a
-          >, <a href="https://joi.dev/" target="_blank" title="Joi" class="text-primary">Joi</a>, or
-          <a href="https://zod.dev/" target="_blank" title="Zod" class="text-primary">Zod</a>
+          <a :href="Links.Yup" target="_blank" title="Yup" class="text-primary">Yup</a>,
+          <a :href="Links.Joi" target="_blank" title="Joi" class="text-primary">Joi</a>, or
+          <a :href="Links.Zod" target="_blank" title="Zod" class="text-primary">Zod</a>
 
           for schema-based validation.
         </li>
@@ -72,4 +71,5 @@ import minimalExample from "@/constants/examples/minimalExample";
 import CodeBlock from "@/components/core/CodeBlock.vue";
 import InfoIcon from "@/components/svgIcons/InfoIcon.vue";
 import InfoPageFooter from "@/components/core/InfoPageFooter.vue";
+import Links from "@/constants/Links.ts";
 </script>

src/views/gettingStarted/QuickStartView.vue

@@ -11,8 +11,8 @@
         <h4>✨ Try Vue-Formik Online</h4>
         <p>
           To quickly try out Vue-Formik, you can use the online
-          <router-link to="/playground">playground</router-link>. It is a code editor that allows
-          you to write Vue-Formik code and see the results in real-time.
+          <a :href="Links.Playground" target="_blank">playground</a>. It is a code editor that
+          allows you to write Vue-Formik code and see the results in real-time.
         </p>
       </article>
     </section>
@@ -72,6 +72,7 @@ import CodeBlock from "@/components/core/CodeBlock.vue";
 import minimalExample from "@/constants/examples/minimalExample.ts";
 import InfoPageFooter from "@/components/core/InfoPageFooter.vue";
 import { ref } from "vue";
+import Links from "@/constants/Links.ts";
 
 const installCommands = {
   npm: `npm i vue-formik`,

src/views/libDocs/composables/useFormik/sections/CustomValidationSection.vue

@@ -36,7 +36,7 @@
 
     <p>
       For more complex validation rules, check out the
-      <router-link to="/playground">Playground</router-link> section. 🔗
+      <a :href="Links.Playground" target="_blank">playground</a> section. 🔗
     </p>
   </section>
 </template>
@@ -47,4 +47,5 @@ import {
   CustomValidationWithEmailArrayExample,
 } from "@/constants/examples/validationExamples.ts";
 import CodeBlock from "@/components/core/CodeBlock.vue";
+import Links from "@/constants/Links.ts";
 </script>