update image to dynamic path

m-mattia-m · Jun 2, 2024 · b1f5c24 · b1f5c24
1 parent a95da88
commit b1f5c24
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 20 deletions.
diff --git a/pages/about.vue b/pages/about.vue
@@ -1,35 +1,75 @@
 <script setup lang="ts">
 
-const credits = [
-  { name: 'Nuxt', description: 'Framework, Design kit', source: '~/public/credits/nuxt.svg', href: 'https://nuxt.com', bgColor: 'bg-green-100', borderColor: 'border-green-300' },
-  { name: 'Tailwind', description: 'Tailwind CSS, Tailwind UI', source: '~/public/credits/tailwindcss.svg', href: 'https://tailwindcss.com', bgColor: 'bg-blue-100', borderColor: 'border-blue-300' },
-  { name: 'SVG Repo', description: 'SVGs', source: '~/public/credits/svg-repo.svg', href: 'https://www.svgrepo.com', bgColor: 'bg-blue-100', borderColor: 'border-blue-300' },
-  { name: 'Zitadel', description: 'OIDC, OAuth2.0, Design Kit', source: '~/public/credits/zitadel-dark.svg', href: 'https://zitadel.com', bgColor: 'bg-pink-100', borderColor: 'border-pink-300' },
-]
+const credits = computed(() => {
+  return [
+    {
+      name: 'Nuxt',
+      description: 'Framework, Design kit',
+      source: '/credits/nuxt.svg',
+      href: 'https://nuxt.com',
+      bgColor: 'bg-green-100',
+      borderColor: 'border-green-300'
+    },
+    {
+      name: 'Tailwind',
+      description: 'Tailwind CSS, Tailwind UI',
+      source: '/credits/tailwindcss.svg',
+      href: 'https://tailwindcss.com',
+      bgColor: 'bg-blue-100',
+      borderColor: 'border-blue-300'
+    },
+    {
+      name: 'SVG Repo',
+      description: 'SVGs',
+      source: '/credits/svg-repo.svg',
+      href: 'https://www.svgrepo.com',
+      bgColor: 'bg-blue-100',
+      borderColor: 'border-blue-300'
+    },
+    {
+      name: 'Zitadel',
+      description: 'OIDC, OAuth2.0, Design Kit',
+      source: '/credits/zitadel-dark.svg',
+      href: 'https://zitadel.com',
+      bgColor: 'bg-pink-100',
+      borderColor: 'border-pink-300'
+    },
+  ]
+})
 
 </script>
 
 <template>
   <h1 class="text-4xl text-gray-900 mb-2">About</h1>
-  <p class="text-base"><b>Auth Playground</b> is a playground &#x1F3AE; to help you to get all authentication codes and tokens during development &#x1F9D1;&#x200D;&#x1F4BB;. We do not save any token or code which you received to be sure about that &#128272;, you can check &#128065; our opensource Github Repository &#128214;. You are also welcome to contribute to this project.</p>
+  <p class="text-base"><b>Auth Playground</b> is a playground &#x1F3AE; to help you to get all authentication codes and
+    tokens during development &#x1F9D1;&#x200D;&#x1F4BB;. We do not save any token or code which you received to be sure
+    about that &#128272;, you can check &#128065; our opensource Github Repository &#128214;. You are also welcome to
+    contribute to this project.</p>
 
   <h1 class="text-4xl text-gray-900 mb-2 mt-32">Contribution</h1>
-  <p class="text-base">We would love &#x2764;&#xFE0F; if you contribute &#x1F9D1;&#x200D;&#x1F4BB; to this project. You can for example add a new authentication provider &#127970;, fix some issues &#128308; which you found or do something else.</p>
+  <p class="text-base">We would love &#x2764;&#xFE0F; if you contribute &#x1F9D1;&#x200D;&#x1F4BB; to this project. You
+    can for example add a new authentication provider &#127970;, fix some issues &#128308; which you found or do
+    something else.</p>
 
   <h1 class="text-4xl text-gray-900 mb-2 mt-32">Credits</h1>
   <h2 class="text-2xl text-gray-900 mt-4 mb-2"> Tech Stack</h2>
   <div>
     <ul role="list" class="mt-3 grid grid-cols-1 gap-5 sm:grid-cols-2 sm:gap-6 lg:grid-cols-4">
       <li v-for="credit in credits" :key="credit.name" class="col-span-1 flex rounded-md shadow-sm">
-        <div :class="[credit.bgColor, credit.borderColor, 'flex w-16 flex-shrink-0 items-center justify-center rounded-l-md text-sm font-medium text-white border-[1px]']">
+        <div
+            :class="[credit.bgColor, credit.borderColor, 'flex w-16 flex-shrink-0 items-center justify-center rounded-l-md text-sm font-medium text-white border-[1px]']">
 
           <img class="h-8 w-8" v-if="credit.source != ''"
                :src="credit.source"
                :alt="credit.name"/>
         </div>
-        <div class="flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white">
+        <div
+            class="flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white">
           <div class="flex-1 truncate px-4 py-2 text-sm">
-            <a :href="credit.href" class="font-medium text-gray-900 hover:text-gray-600">{{ credit.name }}</a>
+            <NuxtLink :to="credit.href" class="font-medium text-gray-900 hover:text-gray-600">{{
+                credit.name
+              }}
+            </NuxtLink>
             <p class="text-gray-500">{{ credit.description }}</p>
           </div>
         </div>
@@ -39,13 +79,15 @@ const credits = [
 
 
   <h2 class="text-2xl text-gray-900 mt-10 mb-2">Contributors</h2>
-<!--  <p class="text-base mt-10 mb-6">And of course all our contributors.</p>-->
 
-  <a href="https://github.com/m-mattia-m/auth-playground/graphs/contributors">
-    <img src="https://contrib.rocks/image?repo=m-mattia-m/auth-playground" alt="contributors" />
-  </a>
+  <NuxtLink to="https://github.com/m-mattia-m/auth-playground/graphs/contributors" target="_blank">
+    <img src="https://contrib.rocks/image?repo=m-mattia-m/auth-playground" alt="contributors"/>
+  </NuxtLink>
 
-  <p class="text-base text-gray-300 mt-4">Made with <NuxtLink external="external" to="https://contrib.rocks">contrib.rocks</NuxtLink>.</p>
+  <p class="text-base text-gray-300 mt-4">Made with
+    <NuxtLink external="external" to="https://contrib.rocks">contrib.rocks</NuxtLink>
+    .
+  </p>
 
 </template>
 

diff --git a/pages/index.vue b/pages/index.vue
@@ -20,19 +20,19 @@
         <div class="w-full sm:w-1/2 grid grid-cols-2 xs:grid-cols-4 sm:grid-cols-2 gap-12 sm:gap-6 place-content-stretch mt-8">
           <!-- bg-white p-2 w-12 h-12 xs:p-4 xs:w-16 xs:h-16 sm:p-8 sm:w-36 sm:h-36 rounded-md shadow-2xl shadow-gray-200 sm:place-self-end -->
           <div class="bg-white p-4 w-24 h-24 xs:p-2 xs:h-16 xs:w-16 sm:p-6 sm:w-32 sm:h-32 rounded-md shadow-2xl shadow-gray-200 sm:place-self-end">
-            <img src="~/public/providers/google.svg" alt="google">
+            <img src="/providers/google.svg" alt="google">
           </div>
           <!-- bg-white p-2 w-12 h-12 xs:p-4 xs:w-16 xs:h-16 sm:p-8 sm:w-36 sm:h-36 rounded-md shadow-2xl shadow-gray-200 -->
           <div class="bg-white p-4 w-24 h-24 xs:p-2 xs:h-16 xs:w-16 sm:p-6 sm:w-32 sm:h-32 rounded-md shadow-2xl shadow-gray-200 ">
-            <img src="~/public/providers/microsoft.svg" alt="microsoft">
+            <img src="/providers/microsoft.svg" alt="microsoft">
           </div>
           <!-- bg-white p-2 w-12 h-12 xs:p-4 xs:w-16 xs:h-16 sm:p-8 sm:w-36 sm:h-36 rounded-md shadow-2xl shadow-gray-200 sm:place-self-end flex items-center -->
           <div class="bg-white p-4 w-24 h-24 xs:p-2 xs:h-16 xs:w-16 sm:p-6 sm:w-32 sm:h-32 rounded-md shadow-2xl shadow-gray-200 sm:place-self-end flex items-center ">
-            <img src="~/public/providers/meta.svg" alt="meta">
+            <img src="/providers/meta.svg" alt="meta">
           </div>
           <!-- bg-white p-2 w-12 h-12 xs:p-4 xs:w-16 xs:h-16 sm:p-8 sm:w-36 sm:h-36 rounded-md shadow-2xl shadow-gray-200 -->
           <div class="bg-white p-4 w-24 h-24 xs:p-2 xs:h-16 xs:w-16 sm:p-6 sm:w-32 sm:h-32 rounded-md shadow-2xl shadow-gray-200 ">
-            <img src="~/public/providers/notion.svg" alt="notion">
+            <img src="/providers/notion.svg" alt="notion">
           </div>
         </div>
       </div>