├── .npmrc
├── assets
    ├── css
    │   └── main.css
    └── images
    │   ├── side1.png
    │   ├── side2.png
    │   ├── mobile-case.png
    │   ├── linktree-logo.png
    │   └── linktree-logo-icon.png
├── public
    ├── favicon.ico
    ├── pwa-192x192.png
    └── pwa-512x512.png
├── tsconfig.json
├── .gitignore
├── plugins
    ├── lodash.js
    └── axios.js
├── middleware
    ├── isLoggedOut.js
    └── isLoggedIn.js
├── tailwind.config.js
├── package.json
├── nuxt.config.ts
├── layouts
    ├── AuthLayout.vue
    └── AdminLayout.vue
├── components
    ├── TextInput.vue
    ├── AddLink.vue
    ├── AddLinkOverlay.vue
    ├── MobileSectionDisplay.vue
    ├── PreviewOverlay.vue
    ├── UpdateLinkOverlay.vue
    ├── CropperModal.vue
    └── LinkBox.vue
├── pages
    ├── admin
    │   ├── more.vue
    │   ├── preview.vue
    │   ├── index.vue
    │   └── apperance.vue
    ├── index.vue
    └── register.vue
├── app.vue
├── stores
    └── user.js
└── README.md


/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | strict-peer-dependencies=false
3 | 


--------------------------------------------------------------------------------
/assets/css/main.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/John-Weeks-Dev/linktree-clone/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/assets/images/side1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/John-Weeks-Dev/linktree-clone/HEAD/assets/images/side1.png


--------------------------------------------------------------------------------
/assets/images/side2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/John-Weeks-Dev/linktree-clone/HEAD/assets/images/side2.png


--------------------------------------------------------------------------------
/public/pwa-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/John-Weeks-Dev/linktree-clone/HEAD/public/pwa-192x192.png


--------------------------------------------------------------------------------
/public/pwa-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/John-Weeks-Dev/linktree-clone/HEAD/public/pwa-512x512.png


--------------------------------------------------------------------------------
/assets/images/mobile-case.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/John-Weeks-Dev/linktree-clone/HEAD/assets/images/mobile-case.png


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | *.log*
 3 | .nuxt
 4 | .nitro
 5 | .cache
 6 | .output
 7 | .env
 8 | dist
 9 | .DS_Store
10 | 


--------------------------------------------------------------------------------
/assets/images/linktree-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/John-Weeks-Dev/linktree-clone/HEAD/assets/images/linktree-logo.png


--------------------------------------------------------------------------------
/assets/images/linktree-logo-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/John-Weeks-Dev/linktree-clone/HEAD/assets/images/linktree-logo-icon.png


--------------------------------------------------------------------------------
/plugins/lodash.js:
--------------------------------------------------------------------------------
1 | import lodash from "lodash"
2 | 
3 | export default defineNuxtPlugin((NuxtApp) => {
4 |     return {
5 |         provide: { 
6 |             $lodash: lodash,
7 |         },
8 |     }
9 | })


--------------------------------------------------------------------------------
/middleware/isLoggedOut.js:
--------------------------------------------------------------------------------
1 | import { useUserStore } from '~~/stores/user'
2 | 
3 | export default defineNuxtRouteMiddleware((to, from) => {
4 |     const userStore = useUserStore()
5 |     
6 |     if (!userStore.id) {
7 |         return navigateTo('/')
8 |     }
9 | })


--------------------------------------------------------------------------------
/plugins/axios.js:
--------------------------------------------------------------------------------
 1 | import axios from "axios"
 2 | 
 3 | export default defineNuxtPlugin((NuxtApp) => {
 4 |     // axios.defaults.baseURL = 'http://localhost:8000'
 5 |     axios.defaults.baseURL = 'https://api.johntest.site'
 6 |     axios.defaults.withCredentials = true;
 7 | 
 8 |     return {
 9 |         provide: { 
10 |             axios: axios
11 |         },
12 |     }
13 | })


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     "./components/**/*.{js,vue,ts}",
 5 |     "./layouts/**/*.vue",
 6 |     "./pages/**/*.vue",
 7 |     "./plugins/**/*.{js,ts}",
 8 |     "./nuxt.config.{js,ts}",
 9 |     "./app.vue",
10 |   ],
11 |   theme: {
12 |     extend: {},
13 |   },
14 |   plugins: [],
15 | }
16 | 


--------------------------------------------------------------------------------
/middleware/isLoggedIn.js:
--------------------------------------------------------------------------------
 1 | import { useUserStore } from '~~/stores/user'
 2 | 
 3 | export default defineNuxtRouteMiddleware((to, from) => {
 4 |     const userStore = useUserStore()
 5 |     
 6 |     if (to.fullPath === '/' && userStore.id) {
 7 |         return navigateTo('/admin')
 8 |     }
 9 | 
10 |     if (to.fullPath === '/register' && userStore.id) {
11 |         return navigateTo('/admin')
12 |     }
13 | })


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "build": "nuxt build",
 5 |     "dev": "nuxt dev",
 6 |     "generate": "nuxt generate",
 7 |     "preview": "nuxt preview",
 8 |     "postinstall": "nuxt prepare",
 9 |     "start": "node .output/server/index.mjs"
10 |   },
11 |   "devDependencies": {
12 |     "@pinia-plugin-persistedstate/nuxt": "^1.1.1",
13 |     "@vite-pwa/nuxt": "^0.0.7",
14 |     "autoprefixer": "^10.4.14",
15 |     "nuxt": "^3.3.1",
16 |     "nuxt-icon": "^0.3.3",
17 |     "nuxt-lodash": "^2.4.1",
18 |     "postcss": "^8.4.21",
19 |     "tailwindcss": "^3.2.7"
20 |   },
21 |   "dependencies": {
22 |     "@pinia/nuxt": "^0.4.7",
23 |     "axios": "^1.3.4",
24 |     "lodash": "^4.17.21",
25 |     "pinia": "^2.0.33",
26 |     "vue-advanced-cropper": "^2.8.8"
27 |   },
28 |   "engines": {
29 |     "node": "18.x"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://nuxt.com/docs/api/configuration/nuxt-config
 2 | export default defineNuxtConfig({
 3 |   pages: true,
 4 |   experimental: {
 5 |     payloadExtraction: false
 6 |   },
 7 |   css: ['~/assets/css/main.css'],
 8 |   postcss: {
 9 |     plugins: {
10 |       tailwindcss: {},
11 |       autoprefixer: {},
12 |     },
13 |   },
14 |   modules: [
15 |     "nuxt-icon",
16 |     "nuxt-lodash",
17 |     "@pinia/nuxt",
18 |     "@pinia-plugin-persistedstate/nuxt",
19 |     "@vite-pwa/nuxt",
20 |   ],
21 |   pwa: {
22 |     manifest: {
23 |       name: "Linktree Clone",
24 |       short_name: "Linktree Clone",
25 |       description: "This is a Linktree Clone",
26 |       theme_color: "#32CD32",
27 |       icons: [
28 |         {
29 |           src: "pwa-192x192.png",
30 |           sizes: "192x192",
31 |           type: "image/png",
32 |         },
33 |         {
34 |           src: "pwa-512x512.png",
35 |           sizes: "512x512",
36 |           type: "image/png",
37 |         },
38 |       ],
39 |     },
40 |     devOptions: {
41 |       enabled: true,
42 |       type: "module",
43 |     },
44 |   },
45 |   app: {
46 |     head: {
47 |       charset: 'utf-8',
48 |       viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
49 |     }
50 |   }
51 | });
52 | 


--------------------------------------------------------------------------------
/layouts/AuthLayout.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div id="AuthLayout" class="h-screen w-full flex justify-between">
 3 |         <div class="lg:pt-7 pt-3 lg:px-12 px-6 lg:w-2/3 w-full lg:min-w-[800px]">
 4 |             <NuxtLink to="/admin" class="inline-block">
 5 |                 <img 
 6 |                     class="lg:w-28 w-[75px] select-none" 
 7 |                     src="~/assets/images/linktree-logo.png"
 8 |                 >
 9 |             </NuxtLink>
10 |             <main class="w-full">
11 |                 <div class="w-full md:max-w-[550px] max-w-[360px] mx-auto">
12 |                     <slot />
13 |                 </div>
14 |             </main>
15 |         </div>
16 | 
17 |         <div class="lg:block hidden w-1/3 pointer-events-none">
18 |             <img 
19 |                 v-if="route.fullPath === '/'"
20 |                 class="object-cover w-full h-screen select-none" 
21 |                 src="~/assets/images/side1.png"
22 |             >
23 |             <img 
24 |                 v-else
25 |                 class="object-cover w-full h-screen select-none" 
26 |                 src="~/assets/images/side2.png"
27 |             >
28 |         </div>
29 |     </div>
30 | </template>
31 | 
32 | <script setup>
33 | import { useUserStore } from '../stores/user'
34 | import { storeToRefs } from 'pinia';
35 | const userStore = useUserStore()
36 | const { updatedLinkId } = storeToRefs(userStore)
37 | 
38 | const route = useRoute()
39 | 
40 | onUnmounted(() => updatedLinkId.value = 0)
41 | </script>
42 | 


--------------------------------------------------------------------------------
/components/TextInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <client-only>
 4 |             <input 
 5 |                 :id="placeholder"
 6 |                 :placeholder="placeholder"
 7 |                 :maxlength="String(max)"
 8 |                 class="
 9 |                     w-full
10 |                     bg-[#EFF0EB]
11 |                     text-gray-800
12 |                     border-2
13 |                     text-sm
14 |                     border-[#EFF0EB]
15 |                     rounded-xl
16 |                     py-3.5
17 |                     px-3
18 |                     placeholder-gray-500
19 |                     focus:outline-none
20 |                 " 
21 |                 @focus="isFocused = true"
22 |                 @blur="isFocused = false"
23 |                 :class="isFocused ? 'border-gray-900' : ''"
24 |                 :type="inputType"
25 |                 v-model="inputComputed"
26 |                 autocomplete="off"
27 |             >
28 |         </client-only>
29 |         <span v-if="error" class="text-red-500 text-[14px] font-semibold">
30 |             {{ error }}
31 |         </span>
32 |     </div>
33 |                     
34 | </template>
35 | 
36 | <script setup>
37 |     const emit = defineEmits(['update:input'])
38 |     const props = defineProps(['input', 'placeholder', 'max', 'inputType', 'error'])
39 |     const { input, placeholder, max, inputType, error } = toRefs(props)
40 | 
41 |     let isFocused = ref(false)
42 | 
43 |     const inputComputed = computed({
44 |         get: () => input.value,
45 |         set: (val) => emit('update:input', val)
46 |     })
47 | </script>


--------------------------------------------------------------------------------
/pages/admin/more.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <AdminLayout>
 3 |         <div 
 4 |             id="MorePage" 
 5 |             class="flex"
 6 |             :class="userStore.isMobile ? 'pt-24' : 'pt-32'"
 7 |         >
 8 |             <div class="rounded-md bg-white w-full">   
 9 |                 <button
10 |                     @click="logout()"
11 |                     class="w-full flex items-center text-gray-600 p-3 hover:text-black"
12 |                     :class="userStore.isMobile ? 'text-[20px]' : 'text-[15px]'"
13 |                 >
14 |                     <Icon 
15 |                         name="circum:logout" 
16 |                         class="mr-6" 
17 |                         :size="userStore.isMobile ? '22' : '15'"
18 |                     />
19 |                     Sign out
20 |                 </button>
21 |             </div>
22 |         </div>
23 |     </AdminLayout>
24 | </template>
25 | 
26 | <script setup>
27 | import AdminLayout from '~~/layouts/AdminLayout.vue';
28 | import { useUserStore } from '~~/stores/user'
29 | const userStore = useUserStore()
30 | const router = useRouter()
31 | 
32 | let windowWidth = ref(window.innerWidth)
33 | 
34 | definePageMeta({ middleware: 'is-logged-out' })
35 | 
36 | onMounted(() => {
37 |     window.addEventListener('resize', function () {
38 |         windowWidth.value = window.innerWidth;
39 |     });
40 | })
41 | 
42 | const logout = async () => {
43 |     let res = confirm('Are you sure you want to sign out?')
44 |     try {
45 |         if (res) {
46 |             await userStore.logout()
47 |             router.push('/')
48 |         }
49 |     } catch (error) {
50 |         console.log(error) 
51 |     }
52 | }
53 | 
54 | watch(() => windowWidth.value, () => {
55 |     if (windowWidth.value >= 767) {
56 |         router.push('/admin')
57 |     }
58 | })
59 | </script>
60 | 


--------------------------------------------------------------------------------
/pages/admin/preview.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 
 3 |     <div 
 4 |         class="fixed overflow-auto w-full h-screen"
 5 |         :class="userStore.theme.color"
 6 |     />
 7 | 
 8 |     <AdminLayout>
 9 |         <div 
10 |             id="PreviewAdminPage" 
11 |             class="w-full mx-auto pt-32 relative z-10"
12 |         >
13 |             <div class="mx-auto w-full">
14 |                 <div class="h-full mx-auto w-full">
15 |                     <img 
16 |                         class="rounded-full min-w-[120px] w-[120px] mx-auto"
17 |                         :src="userStore.image"
18 |                     >
19 | 
20 |                     <div 
21 |                         class="text-center text-2xl font-semibold mt-2"
22 |                         :class="userStore.theme.text"
23 |                     >
24 |                         @{{ userStore.allLowerCaseNoCaps(userStore.name) }}
25 |                     </div>
26 | 
27 |                     <div 
28 |                         class="text-center text-lg font-light mt-2 mb-10"
29 |                         :class="userStore.theme.text"
30 |                     >
31 |                         <div class="px-8">
32 |                             {{ userStore.bio }}
33 |                         </div>
34 |                     </div>
35 | 
36 |                     <div v-for="link in userStore.allLinks">
37 |                         <a
38 |                             :href="link.url" 
39 |                             target="_blank"
40 |                             class="flex items-center relative border w-[calc(100%-10px)] mx-auto bg-white mt-4 p-1 rounded-lg"
41 |                         >
42 |                             <img 
43 |                                 class="rounded-lg h-[55px] aspect-square"
44 |                                 :src="link.image"
45 |                             >
46 | 
47 |                             <div class="absolute text-[20px] text-center w-full">
48 |                                 {{ link.name }}
49 |                             </div>
50 |                         </a>
51 |                     </div>
52 | 
53 |                     <div class="pb-32"/>
54 |                 </div>
55 |             </div>
56 |         </div>
57 |     </AdminLayout>
58 | </template>
59 | 
60 | <script setup>
61 | import AdminLayout from '~~/layouts/AdminLayout.vue';
62 | import { useUserStore } from '~~/stores/user'
63 | const userStore = useUserStore()
64 | 
65 | definePageMeta({ middleware: 'is-logged-out' })
66 | </script>
67 | 


--------------------------------------------------------------------------------
/components/AddLink.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div id="AddLink" class="w-full bg-white rounded-3xl overflow-hidden">
 3 |         
 4 |         <div class="flex items-center justify-between pb-2 p-6">
 5 |             <div class="text-[19px] font-semibold">Enter URL</div>
 6 |             <button 
 7 |                 @click="$emit('close')"
 8 |                 class="flex items-center rounded-full p-1.5 hover:bg-[#EFF0EA]"
 9 |             >
10 |                 <Icon 
11 |                     name="mdi:close" 
12 |                     size="20" 
13 |                     color="#676B5F" 
14 |                 />
15 |             </button>
16 |         </div>
17 | 
18 |         <form 
19 |             @submit.prevent="submit()" 
20 |             class="flex items-center gap-4 w-full pt-2 p-6"
21 |         >
22 | 
23 |             <div class="w-full">
24 |                 <TextInput 
25 |                     class="w-full"
26 |                     placeholder="Name"
27 |                     v-model:input="name"
28 |                     inputType="text"
29 |                     :error="errors && errors.name ? errors.name[0] : ''"
30 |                 />
31 | 
32 |                 <div class="py-1" />
33 | 
34 |                 <TextInput 
35 |                     class="w-full"
36 |                     placeholder="URL"
37 |                     v-model:input="url"
38 |                     inputType="text"
39 |                     :error="errors && errors.url ? errors.url[0] : ''"
40 |                 />
41 |             </div>
42 | 
43 |             <button
44 |                 type="submit"
45 |                 :disabled="!name && !url"
46 |                 @click="addLink()"
47 |                 class="rounded-full p-3 px-6"
48 |                 :class="
49 |                     name && url
50 |                         ? 'bg-[#8228D9] hover:bg-[#6c21b3] text-white' 
51 |                         : 'bg-[#EFF0EA] text-[#A7AAA2]'
52 |                 "
53 |             >
54 |                 Add
55 |             </button>
56 |         </form>
57 |     </div>
58 | </template>
59 | 
60 | <script setup>
61 | import { useUserStore } from '~~/stores/user'
62 | const userStore = useUserStore()
63 | 
64 | const emit = defineEmits(['close'])
65 | 
66 | let name = ref('')
67 | let url = ref('')
68 | let errors = ref(null)
69 | 
70 | const addLink = async () => {
71 |     try {
72 |         await userStore.addLink(name.value, url.value)
73 |         await userStore.getAllLinks()
74 |         setTimeout(() => { 
75 |             emit('close')
76 |             name.value = ''
77 |             url.value = ''
78 |         }, 100)
79 |     } catch (error) {
80 |         console.log(error)
81 |         errors.value = error.response.data.errors
82 |     }
83 | }
84 | </script>
85 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <AuthLayout>
 3 |         <div class="mt-10">
 4 |             <h1 class="lg:text-5xl text-3xl text-center font-extrabold">
 5 |                 Log in to your Linktree
 6 |             </h1>
 7 | 
 8 |             <form 
 9 |                 class="mt-12" 
10 |                 @submit.prevent="login()"
11 |             >
12 |                 <div>
13 |                     <TextInput 
14 |                         placeholder="Email: link@gmail.com"
15 |                         v-model:input="email"
16 |                         inputType="email"
17 |                         :error="errors && errors.email ? errors.email[0] : ''"
18 |                     />
19 |                 </div>
20 | 
21 |                 <div class="mt-4">
22 |                     <TextInput 
23 |                         placeholder="Password"
24 |                         v-model:input="password"
25 |                         inputType="password"
26 |                         :error="errors && errors.password ? errors.password[0] : ''"
27 |                     />
28 |                 </div>
29 | 
30 |                 <div class="mt-10">
31 |                     <button
32 |                         type="submit"
33 |                         class="rounded-full w-full p-3 font-bold"
34 |                         :disabled="(!email || !password) "
35 |                         :class="
36 |                             (email && password) 
37 |                                 ? 'bg-[#8228D9] hover:bg-[#6c21b3] text-white' 
38 |                                 : 'bg-[#EFF0EB] text-[#A7AAA2]'
39 |                         "
40 |                     >
41 |                         Log in
42 |                     </button>
43 |                 </div>
44 |             </form>
45 | 
46 |             <div class="text-[14px] text-center pt-12">
47 |                 Don't have an account?
48 |                 <NuxtLink 
49 |                     to="/register"
50 |                     class="text-[#8228D9] underline"
51 |                 >
52 |                     Sign up
53 |                 </NuxtLink>
54 |             </div>
55 |         </div>
56 |     </AuthLayout>
57 | </template>
58 | 
59 | <script setup>
60 | import AuthLayout from '~/layouts/AuthLayout.vue';
61 | 
62 | import { useUserStore } from '~~/stores/user';
63 | const userStore = useUserStore()
64 | 
65 | const router = useRouter()
66 | 
67 | definePageMeta({ middleware: 'is-logged-in' })
68 | 
69 | let email = ref(null)
70 | let password = ref(null)
71 | let errors = ref(null)
72 | 
73 | const login = async () => {
74 |     errors.value = null
75 | 
76 |     try {
77 |         await userStore.getTokens()
78 |         await userStore.login(email.value, password.value)
79 |         await userStore.getUser()
80 |         await userStore.getAllLinks()
81 |         router.push('/admin')
82 |     } catch (error) {
83 |         console.log(error)
84 |         errors.value = error.response.data.errors
85 |     }
86 | }
87 | 
88 | </script>
89 | 


--------------------------------------------------------------------------------
/pages/admin/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <AdminLayout>
 3 |         <div 
 4 |             id="AdminPage" 
 5 |             class="flex h-[100vh] pb-4"
 6 |         >
 7 |             <div class="lg:w-[calc(100%-500px)] md:w-[calc(100%-330px)] w-full md:pt-20 pt-14">
 8 |                 <div class="max-w-[750px] mx-auto pb-24">
 9 |                     
10 |                     <button 
11 |                         v-if="userStore.isMobile || !showAddLink"
12 |                         @click="showAddLinkFunc()"
13 |                         class="flex items-center justify-center w-full py-3 rounded-full text-white font-semibold bg-[#8228D9] hover:bg-[#6c21b3]"
14 |                         :class="userStore.isMobile ? 'mt-8 text-xl' : 'mt-20 md:mt-8'"
15 |                     >
16 |                         <Icon 
17 |                             v-if="!userStore.isMobile" 
18 |                             name="mdi:plus" 
19 |                             class="mr-0.5" 
20 |                             size="25"
21 |                         />
22 |                         <span v-if="!userStore.isMobile">Add link</span>
23 |                         <span v-if="userStore.isMobile">Add new link</span>
24 |                     </button>
25 | 
26 |                     <AddLink 
27 |                         v-if="!userStore.isMobile"
28 |                         @close="showAddLink = false"
29 |                         :class="[
30 |                             {'mt-20 md:mt-8 mb-12 max-h-[1000px] transition-all duration-300 ease-in': showAddLink},
31 |                             {'max-h-0 transition-all duration-300 ease-out': !showAddLink},
32 |                         ]"
33 |                     />
34 | 
35 |                     <div v-for="link in userStore.allLinks" class="mt-4">
36 |                         <LinkBox 
37 |                             v-if="link"
38 |                             :link="link" 
39 |                             :selectedId="selectedInput.id"
40 |                             :selectedStr="selectedInput.str"
41 |                             @updatedInput="updatedInput"
42 |                             class="mt-6" 
43 |                         />
44 |                     </div>
45 | 
46 |                 </div>
47 |             </div>
48 | 
49 |             <MobileSectionDisplay />
50 | 
51 |         </div>
52 |     </AdminLayout>
53 | </template>
54 | 
55 | <script setup>
56 | import AdminLayout from '~~/layouts/AdminLayout.vue';
57 | import { useUserStore } from '~~/stores/user'
58 | const userStore = useUserStore()
59 | 
60 | definePageMeta({ middleware: 'is-logged-out' })
61 | 
62 | let selectedInput = ref({ id: 0, str: '' })
63 | let showAddLink = ref(false)
64 | 
65 | const updatedInput = (e) => {
66 |     selectedInput.value.id = e.id
67 |     selectedInput.value.str = e.str
68 | }
69 | 
70 | const showAddLinkFunc = () => {
71 |     if (userStore.isMobile) {
72 |         userStore.addLinkOverlay = true
73 |     } else {
74 |         showAddLink.value = true
75 |     }
76 | }
77 | </script>
78 | 


--------------------------------------------------------------------------------
/components/AddLinkOverlay.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div 
 3 |         id="AddLinkOverlay"
 4 |         class="fixed z-40 top-0 left-0 w-full h-full bg-white px-5"
 5 |     >
 6 |         <div class="flex items-center justify-start w-full py-[8px]">
 7 |             <button 
 8 |                 type="button"
 9 |                 @click="close()"
10 |                 class="rounded-full"
11 |             >
12 |                 <Icon 
13 |                     name="material-symbols:arrow-back-sharp" 
14 |                     size="35" 
15 |                     color="#676B5F" 
16 |                 />
17 |             </button>
18 | 
19 |             <div class="text-lg font-semibold pl-8">Add New Link</div>
20 |         </div>
21 | 
22 |         <div class="text-2xl font-semibold pt-10">Enter URL</div>
23 | 
24 |         <form 
25 |             @submit.prevent="submit()" 
26 |             class="flex items-center gap-4 w-full pt-4"
27 |         >
28 |             <div class="w-full">
29 |                 <TextInput 
30 |                     class="w-full"
31 |                     placeholder="Name"
32 |                     v-model:input="name"
33 |                     inputType="text"
34 |                     :error="errors && errors.name ? errors.name[0] : ''"
35 |                 />
36 | 
37 |                 <div class="py-1" />
38 | 
39 |                 <TextInput 
40 |                     class="w-full"
41 |                     placeholder="URL"
42 |                     v-model:input="url"
43 |                     inputType="text"
44 |                     :error="errors && errors.url ? errors.url[0] : ''"
45 |                 />
46 |             </div>
47 | 
48 |             <button
49 |                 type="submit"
50 |                 @click="addLink()"
51 |                 class="rounded-full p-2 bg-[#EFF0EA]"
52 |             >
53 |                 <Icon 
54 |                     name="material-symbols:arrow-forward-sharp" 
55 |                     size="25" 
56 |                     color="#676B5F" 
57 |                 />
58 |             </button>
59 |         </form>
60 |     </div>
61 | </template>
62 | 
63 | <script setup>
64 | import { useUserStore } from '~~/stores/user'
65 | import { storeToRefs } from 'pinia';
66 | const userStore = useUserStore()
67 | const { addLinkOverlay } = storeToRefs(userStore)
68 | 
69 | onMounted(() => userStore.hidePageOverflow(true, 'AdminPage'))
70 | 
71 | const close = () => addLinkOverlay.value = false
72 | 
73 | let name = ref('')
74 | let url = ref('')
75 | let errors = ref(null)
76 | 
77 | const addLink = async () => {
78 |     try {
79 |         await userStore.addLink(name.value, url.value)
80 |         await userStore.getAllLinks()
81 |         setTimeout(() => { 
82 |             name.value = ''
83 |             url.value = ''
84 |             addLinkOverlay.value = false
85 |         }, 100)
86 |     } catch (error) {
87 |         errors.value = error.response.data.errors
88 |     }
89 | }
90 | 
91 | onUnmounted(() => {
92 |     userStore.hidePageOverflow(false, 'AdminPage')
93 |     addLinkOverlay.value = false
94 | })
95 | </script>
96 | 


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <VitePwaManifest />
 3 |   <div v-if="bgIsGray" class="bg-[#F3F3F1] fixed w-full h-full z-[-1]" />
 4 | 
 5 |   <NuxtPage v-if="show"/>
 6 | 
 7 |   <UpdateLinkOverlay v-if="isMobile && updatedLinkId"/>
 8 |   <AddLinkOverlay v-if="isMobile && addLinkOverlay"/>
 9 |   <PreviewOverlay v-if="!isMobile && isPreviewOverlay"/>
10 | </template>
11 | 
12 | <script setup>
13 | import { useUserStore } from '~~/stores/user';
14 | import { storeToRefs } from 'pinia';
15 | const userStore = useUserStore()
16 | const { isMobile, isPreviewOverlay, updatedLinkId, addLinkOverlay, id } = storeToRefs(userStore)
17 | 
18 | const route = useRoute()
19 | let show = ref(false)
20 | let bgIsGray = ref(false)
21 | 
22 | watch(() => id.value, () => {
23 |   if (!userStore.colors) {
24 |     userStore.colors = colors()
25 |   }
26 | })
27 | 
28 | onMounted(async () => {
29 |   userStore.colors = colors()
30 |   updatedLinkId.value = 0
31 |   addLinkOverlay.value = false
32 |   isPreviewOverlay.value = false
33 |   isMobile.value = false
34 | 
35 |   try {
36 |     if (userStore.id) {
37 |       await userStore.hasSessionExpired()
38 |       await userStore.getUser()
39 |       await userStore.getAllLinks()
40 |     }
41 |   } catch (error) {
42 |     console.log(error)
43 |   }
44 | 
45 |   checkPath(route.fullPath)
46 | 
47 |   if ('ontouchstart' in window) {
48 |     isMobile.value = true
49 |   }
50 | 
51 |   setTimeout(() => show.value = true, 1) 
52 | })
53 | 
54 | const colors = () => {
55 |     return [
56 |         { id: 1, color: 'bg-white', text: 'text-black', name: 'Air White' },
57 |         { id: 2, color: 'bg-gray-800', text: 'text-white', name: 'Lake Black' },
58 |         { id: 3, color: 'bg-gradient-to-t from-indigo-500 via-purple-500 to-pink-500', text: 'text-white', name: 'Purple Pie' },
59 |         { id: 4, color: 'bg-gradient-to-t from-gray-500 via-blue-500 to-green-500', text: 'text-white', name: 'Green Grass' },
60 |         { id: 5, color: 'bg-gradient-to-t from-orange-500 via-green-500 to-red-500', text: 'text-white', name: 'Traffic Lights' },
61 |         { id: 6, color: 'bg-gradient-to-b from-blue-800 via-blue-500 to-green-500', text: 'text-white', name: 'Blue Sky' },
62 |         { id: 7, color: 'bg-gradient-to-t from-lime-500 via-indigo-700 to-amber-500', text: 'text-white', name: 'Soft Horizon' },
63 |         { id: 8, color: 'bg-gradient-to-t from-gray-800 to-emerald-500', text: 'text-white', name: 'Tinted Lake' },
64 |     ]
65 | }
66 | 
67 | const checkPath = (path) => {
68 |   if (path == '/' || path == '/register') {
69 |     bgIsGray.value = false
70 |     return
71 |   }
72 |   bgIsGray.value = true
73 | }
74 | 
75 | watch(() => route.fullPath, (path) => checkPath(path))
76 | 
77 | watch(() => isPreviewOverlay.value, (val) => {
78 |   let id = null
79 |   if (route.fullPath == '/admin') {
80 |     id = 'AdminPage'
81 |   } else if (route.fullPath == '/admin/apperance') {
82 |     id = 'ApperancePage'
83 |   } else if (route.fullPath == '/admin/settings') {
84 |     id = 'SettingsPage'
85 |   }
86 | 
87 |   userStore.hidePageOverflow(val, id)
88 | })
89 | </script>
90 | 


--------------------------------------------------------------------------------
/components/MobileSectionDisplay.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div 
 3 |         v-if="userStore.theme"
 4 |         class="md:block fixed hidden right-0 lg:w-[500px] w-[310px] h-[calc(100%-20px)] mt-[20px] mx-auto border-l border-l-gray-300 pt-20"
 5 |     >
 6 |         <div
 7 |             class="
 8 |                 mx-auto
 9 |                 mt-16
10 |                 mb-16
11 |                 flex 
12 |                 items-center 
13 |                 justify-center 
14 |                 w-full 
15 |                 lg:max-w-[230px] 
16 |                 max-w-[200px] 
17 |                 lg:h-[460px] 
18 |                 h-[400px] 
19 |                 p-3 
20 |                 rounded-3xl
21 |                 relative
22 |             "
23 |         >
24 |             <img 
25 |                 class="absolute z-10 pointer-events-none select-none" 
26 |                 src="~/assets/images/mobile-case.png"
27 |             >
28 | 
29 |             <div 
30 |                 class=" w-full h-full absolute lg:max-w-[220px] max-w-[195px] rounded-3xl z-0" 
31 |                 :class="userStore.theme.color"
32 |             />
33 | 
34 |             <div class="h-full mx-auto w-full overflow-auto z-10">
35 |                 <img 
36 |                     class="rounded-full min-w-[60px] w-[60px] mx-auto mt-8"
37 |                     :src="userStore.image"
38 |                 >
39 | 
40 |                 <div 
41 |                     class="text-center text-sm font-semibold mt-4 break-words"
42 |                     :class="userStore.theme.text"
43 |                 >
44 |                     @{{ userStore.allLowerCaseNoCaps(userStore.name) }}
45 |                 </div>
46 | 
47 |                 <div 
48 |                     class="text-center text-[8px] font-semibold mt-2"
49 |                     :class="userStore.theme.text"
50 |                 >
51 |                     <div class="px-8 break-words">
52 |                         {{ userStore.bio }}
53 |                     </div>
54 |                 </div>
55 | 
56 |                 <div v-for="link in userStore.allLinks">
57 |                     <a 
58 |                         :href="link.url"
59 |                         target="_blank"
60 |                         class="
61 |                             flex 
62 |                             items-center 
63 |                             relative 
64 |                             w-[calc(100%-10px)] 
65 |                             mx-auto 
66 |                             border
67 |                             bg-white 
68 |                             mt-2 
69 |                             p-1 
70 |                             rounded-xl
71 |                         "
72 |                     >
73 |                         <img 
74 |                             class="rounded-lg h-[30px] aspect-square"
75 |                             :src="link.image"
76 |                         >
77 | 
78 |                         <div class="absolute w-full">
79 |                             <div class="max-w-[70%] w-full mx-auto text-[10px] text-center">
80 |                                 {{ link.name }}
81 |                             </div>
82 |                         </div>
83 |                     </a>
84 |                 </div>
85 | 
86 |                 <div class="pb-12"/>
87 |             </div>
88 |         </div>
89 |     </div>
90 | </template>
91 | 
92 | <script setup>
93 | import { useUserStore } from '~~/stores/user'
94 | const userStore = useUserStore()
95 | </script>
96 | 


--------------------------------------------------------------------------------
/pages/register.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <AuthLayout>
  3 |         <div class="mt-10">
  4 |             <h1 class="lg:text-5xl text-3xl text-center font-extrabold">
  5 |                 Create your account
  6 |             </h1>
  7 | 
  8 |             <form 
  9 |                 class="mt-12" 
 10 |                 @submit.prevent="register()"
 11 |             >
 12 |                 <div>
 13 |                     <TextInput 
 14 |                         placeholder="Username"
 15 |                         v-model:input="name"
 16 |                         inputType="text"
 17 |                         :error="errors && errors.name ? errors.name[0] : ''"
 18 |                     />
 19 |                 </div>
 20 | 
 21 |                 <div class="mt-4">
 22 |                     <TextInput 
 23 |                         placeholder="Email: link@gmail.com"
 24 |                         v-model:input="email"
 25 |                         inputType="email"
 26 |                         :error="errors && errors.email ? errors.email[0] : ''"
 27 |                     />
 28 |                 </div>
 29 | 
 30 |                 <div class="mt-4">
 31 |                     <TextInput 
 32 |                         placeholder="Password"
 33 |                         v-model:input="password"
 34 |                         inputType="password"
 35 |                         :error="errors && errors.password ? errors.password[0] : ''"
 36 |                     />
 37 |                 </div>
 38 | 
 39 |                 <div class="mt-4">
 40 |                     <TextInput 
 41 |                         placeholder="Confirm Password"
 42 |                         v-model:input="confirmPassword"
 43 |                         inputType="password"
 44 |                     />
 45 |                 </div>
 46 | 
 47 |                 <div class="mt-10">
 48 |                     <button
 49 |                         type="submit"
 50 |                         class="rounded-full w-full p-3 font-bold"
 51 |                         :disabled="(!name || !email || !password || !confirmPassword)"
 52 |                         :class="
 53 |                             (name && email && password && confirmPassword) 
 54 |                                 ? 'bg-[#8228D9] hover:bg-[#6c21b3] text-white' 
 55 |                                 : 'bg-[#EFF0EB] text-[#A7AAA2]'
 56 |                         "
 57 |                     >
 58 |                         Create account
 59 |                     </button>
 60 |                 </div>
 61 |             </form>
 62 | 
 63 |             <div class="text-[14px] text-center pt-12">
 64 |                 Already have an account?
 65 |                 <NuxtLink 
 66 |                     to="/"
 67 |                     class="text-[#8228D9] underline"
 68 |                 >
 69 |                     Log in
 70 |                 </NuxtLink>
 71 |             </div>
 72 |         </div>
 73 |     </AuthLayout>
 74 | </template>
 75 | 
 76 | <script setup>
 77 | import AuthLayout from '~/layouts/AuthLayout.vue';
 78 | 
 79 | import { useUserStore } from '~~/stores/user';
 80 | const userStore = useUserStore()
 81 | 
 82 | const router = useRouter()
 83 | 
 84 | definePageMeta({ middleware: 'is-logged-in' })
 85 | 
 86 | let name = ref(null)
 87 | let email = ref(null)
 88 | let password = ref(null)
 89 | let confirmPassword = ref(null)
 90 | let errors = ref(null)
 91 | 
 92 | const register = async () => {
 93 |     errors.value = null
 94 | 
 95 |     try {
 96 |         await userStore.getTokens()
 97 |         await userStore.register(
 98 |             name.value, 
 99 |             email.value, 
100 |             password.value, 
101 |             confirmPassword.value
102 |         )
103 |         await userStore.getUser()
104 |         router.push('/admin')
105 |     } catch (error) {
106 |         console.log(error)
107 |         errors.value = error.response.data.errors
108 |     }
109 | }
110 | 
111 | </script>
112 | 


--------------------------------------------------------------------------------
/components/PreviewOverlay.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div 
  3 |         id="PreviewOverlay" 
  4 |         class="md:hidden fixed z-30 top-0 left-0 h-full w-full overflow-auto"
  5 |         :class="userStore.theme.color"
  6 |     >
  7 |         <div 
  8 |             id="PreviewOverlayTopNav" 
  9 |             class="w-full fixed z-10 flex items-center justify-between"
 10 |         >
 11 |             <div class="flex items-center justify-between px-2 py-[8px] pl-4 bg-white w-full border-b">
 12 |                 <div class="flex items-center justify-start w-full">
 13 |                     <button @click="userStore.isPreviewOverlay = false">
 14 |                         <img 
 15 |                             class="w-[23px] min-w-[23px] select-none" 
 16 |                             src="~/assets/images/linktree-logo-icon.png"
 17 |                         >
 18 |                     </button>
 19 | 
 20 |                 </div>
 21 | 
 22 |                 <div class="flex items-center justify-between gap-3">
 23 |                     <button class="flex items-center text-sm font-semibold p-2 rounded-full hover:bg-gray-100">
 24 |                         <Icon name="healthicons:megaphone-outline" class="mr-0.5"  size="22"/>
 25 |                     </button>
 26 | 
 27 |                     <button class="flex items-center font-semibold px-3 py-2 rounded-full bg-gray-100">
 28 |                         <Icon name="mdi:lightning-bolt" class="mr-0.5"  size="18"/>
 29 |                         Upgrade
 30 |                     </button>
 31 | 
 32 |                     <button class="flex items-center font-semibold px-3 py-2 rounded-full border hover:bg-gray-100">
 33 |                         <Icon name="teenyicons:upload-solid" class="mr-1.5"  size="18"/>
 34 |                         Share
 35 |                     </button>
 36 |                 </div>
 37 |             </div>
 38 |         </div>
 39 | 
 40 |         <div 
 41 |             id="PreviewOverlayContentSection" 
 42 |             class="relative w-full h-full mx-auto pt-24"
 43 |         >
 44 |             <div class="mx-auto  mb-16 w-full p-3">
 45 |                 <div class="h-full mx-auto w-full overflow-auto z-10">
 46 |                     <img 
 47 |                         class="rounded-full min-w-[100px] w-[100px] mx-auto "
 48 |                         :src="userStore.image"
 49 |                     >
 50 | 
 51 |                     <div 
 52 |                         class="text-center text-xl font-semibold mt-4"
 53 |                         :class="userStore.theme.text"
 54 |                     >
 55 |                         @{{ userStore.allLowerCaseNoCaps(userStore.name) }}
 56 |                     </div>
 57 | 
 58 |                     <div 
 59 |                         class="text-center font-light mt-2"
 60 |                         :class="userStore.theme.text"
 61 |                     >
 62 |                         <div class="px-8">
 63 |                             {{ userStore.bio }}
 64 |                         </div>
 65 |                     </div>
 66 | 
 67 |                     <div v-for="link in userStore.allLinks">
 68 |                         <a 
 69 |                             :href="link.url"
 70 |                             target="_blank"
 71 |                             class="flex items-center relative border w-[calc(100%-10px)] mx-auto bg-white mt-4 p-1 rounded-lg"
 72 |                         >
 73 |                             <img 
 74 |                                 class="rounded-lg h-[45px] aspect-square"
 75 |                                 :src="link.image"
 76 |                             >
 77 | 
 78 |                             <div class="absolute text-[16px] text-center w-full">
 79 |                                 {{ link.name }}
 80 |                             </div>
 81 |                         </a>
 82 |                     </div>
 83 |                     <div class="pb-28"/>
 84 |                 </div>
 85 |             </div>
 86 |         </div>
 87 | 
 88 |         <div
 89 |             id="PreviewButton"
 90 |             class="fixed bottom-10 w-full flex items-center justify-center"
 91 |         >
 92 |             <button 
 93 |                 @click="userStore.isPreviewOverlay = false"
 94 |                 class="flex items-center justify-center p-2.5 bg-[#DFE2D9] rounded-full"
 95 |             >
 96 |                 <Icon name="mdi:close" size="30"/>
 97 |             </button>
 98 |         </div>
 99 |     </div>
100 | </template>
101 | 
102 | <script setup>
103 | import { useUserStore } from '~~/stores/user'
104 | const userStore = useUserStore()
105 | 
106 | onUnmounted(() => userStore.isPreviewOverlay = false)
107 | </script>
108 | 


--------------------------------------------------------------------------------
/stores/user.js:
--------------------------------------------------------------------------------
  1 | import { defineStore } from 'pinia'
  2 | import axios from '~~/plugins/axios'
  3 | 
  4 | const $axios = axios().provide.axios
  5 | 
  6 | export const useUserStore = defineStore('user', {
  7 |   state: () => ({
  8 |     id: '',
  9 |     theme_id: '',
 10 |     name: '',
 11 |     email: '',
 12 |     image: '',
 13 |     bio: '',
 14 |     theme: null,
 15 |     colors: null,
 16 |     allLinks: null,
 17 |     isMobile: false,
 18 |     updatedLinkId: 0,
 19 |     addLinkOverlay: false,
 20 |     isPreviewOverlay: false,
 21 |   }),
 22 |   actions: {
 23 |     hidePageOverflow(val, id) {
 24 |       if (val) {
 25 |         document.body.style.overflow = 'hidden'
 26 |         if (id) {
 27 |           document.getElementById(id).style.overflow  = 'hidden'
 28 |         }
 29 |         return
 30 |       }
 31 |       document.body.style.overflow = 'visible'
 32 |       if (id) {
 33 |         document.getElementById(id).style.overflow  = 'visible'
 34 |       }
 35 |     },
 36 | 
 37 |     allLowerCaseNoCaps(str) {
 38 |       return str.split(' ').join('').toLowerCase()
 39 |     },
 40 | 
 41 |     async hasSessionExpired() {
 42 |       await $axios.interceptors.response.use((response) => {
 43 |         // Call was successful, continue.
 44 |         return response;
 45 |       }, (error) => {
 46 |           switch (error.response.status) {
 47 |               case 401: // Not logged in
 48 |               case 419: // Session expired
 49 |               case 503: // Down for maintenance
 50 |                   // Bounce the user to the login screen with a redirect back
 51 |                   this.resetState()
 52 |                   window.location.href = '/';
 53 |                   break;
 54 |               case 500:
 55 |                   alert('Oops, something went wrong!  The team has been notified.');
 56 |                   break;
 57 |               default:
 58 |                   // Allow individual requests to handle other errors
 59 |                   return Promise.reject(error);
 60 |           }
 61 |       });
 62 |     },
 63 | 
 64 |     async getTokens() {
 65 |       await $axios.get('/sanctum/csrf-cookie')
 66 |     },
 67 | 
 68 |     async login(email, password) {
 69 |       await $axios.post('/login', {
 70 |         email: email,
 71 |         password: password
 72 |       })
 73 |     },
 74 | 
 75 |     async register(name, email, password, confirmPassword) {
 76 |       await $axios.post('/register', {
 77 |         name: name,
 78 |         email: email,
 79 |         password: password,
 80 |         password_confirmation: confirmPassword
 81 |       })
 82 |     },
 83 | 
 84 |     async getUser() {
 85 |       let res = await $axios.get('/api/users')
 86 |       
 87 |       this.$state.id = res.data.id
 88 |       this.$state.theme_id = res.data.theme_id
 89 |       this.$state.name = res.data.name
 90 |       this.$state.bio = res.data.bio
 91 |       this.$state.image = res.data.image
 92 | 
 93 |       this.getUserTheme()
 94 |     },
 95 | 
 96 |     async updateUserImage(data) {
 97 |       await $axios.post('/api/user-image', data)
 98 |     },
 99 | 
100 |     async updateLinkImage(data) {
101 |       await $axios.post(`/api/link-image`, data)
102 |     },
103 | 
104 |     async deleteLink(id) {
105 |       await $axios.delete(`/api/links/${id}`)
106 |     },
107 | 
108 |     getUserTheme() {
109 |       this.$state.colors.forEach(color => {
110 |         if (this.$state.theme_id === color.id) {
111 |           this.$state.theme = color
112 |         }
113 |       })
114 |     },
115 | 
116 |     async updateUserDetails(name, bio) {
117 |       await $axios.patch(`/api/users/${this.$state.id}`, {
118 |         name: name,
119 |         bio: bio
120 |       })
121 |     },
122 | 
123 |     async updateTheme(themeId) {
124 |       let res = await $axios.patch('/api/themes', {
125 |         theme_id: themeId,
126 |       })
127 |       this.$state.theme_id = res.data.theme_id
128 |       this.getUserTheme()
129 |     },
130 | 
131 |     async getAllLinks() {
132 |       let res = await $axios.get('/api/links')
133 |       this.$state.allLinks = res.data
134 |     },
135 | 
136 |     async addLink(name, url) {
137 |       await $axios.post('/api/links', {
138 |         name: name,
139 |         url: url
140 |       })
141 |     },
142 | 
143 |     async updateLink(id, name, url) {
144 |       await $axios.patch(`/api/links/${id}`, {
145 |         name: name,
146 |         url: url
147 |       })
148 |     },
149 | 
150 |     async logout() {
151 |       await $axios.post('/logout')
152 |       this.resetState()
153 |     },
154 | 
155 |     resetState() {      
156 |       this.$state.id = ''
157 |       this.$state.name = ''
158 |       this.$state.email = ''
159 |       this.$state.image = ''
160 |       this.$state.bio = ''
161 |       this.$state.theme_id = ''
162 |       this.$state.theme = null
163 |       this.$state.colors = null
164 |       this.$state.allLinks = null
165 |       this.$state.isMobile = false
166 |       this.$state.updatedLinkId = 0
167 |       this.$state.addLinkOverlay = false
168 |       this.$state.isPreviewOverlay = false
169 |     },
170 |   },
171 |   persist: true
172 | })


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Linktree Clone / PWA (linktree-clone)
  2 | 
  3 | ### Learn how to build this!
  4 | 
  5 | If you'd like a step by step guide on how to build this just **CLICK THE IMAGE BELOW**
  6 | 
  7 | [![GO TO JOHN WEEKS DEV TUTORIAL VIDEOS](https://user-images.githubusercontent.com/108229029/228964328-b0e75187-32de-4b29-8fd0-d1546237b1fd.png)](https://www.youtube.com/watch?v=NtsbjB8QD3Y)
  8 | 
  9 | Come and check out my YOUTUBE channel for lots more tutorials -> https://www.youtube.com/@johnweeksdev
 10 | 
 11 | **LIKE**, **SUBSCRIBE**, and **SMASH THE NOTIFICATION BELL**!!!
 12 | 
 13 | ## NOTE
 14 | 
 15 | ### For this Linktree Clone to work you'll need the API/Backend:
 16 | 
 17 | Linktree Clone API: https://github.com/John-Weeks-Dev/linktree-clone-api
 18 | 
 19 | ## App Setup (localhost)
 20 | 
 21 | ```
 22 | git clone https://github.com/John-Weeks-Dev/linktree-clone.git
 23 | 
 24 | npm i
 25 | 
 26 | npm run dev
 27 | ```
 28 | Inside Plugins/axios.js make sure the baseUrl is the same as your API.
 29 | 
 30 | <img width="443" alt="Screenshot 2023-03-15 at 00 14 21" src="https://user-images.githubusercontent.com/108229029/225085615-529afbca-8cb8-4ed4-bf5b-54ba6f827f36.png">
 31 | 
 32 | You should be good to go!
 33 | 
 34 | ## Extra Info
 35 | 
 36 | In the tutorial I show you what you need to edit in your Nginx config file.
 37 | 
 38 | This example is in Laravel Forge:
 39 | 
 40 | 1. In the frontend open the "Edit Nginx Configuration"
 41 | 
 42 | <img width="600" src="https://user-images.githubusercontent.com/108229029/229151201-f9d1fe83-ca68-496e-9a1e-3ef031ce8271.png">
 43 | <img width="400" src="https://user-images.githubusercontent.com/108229029/229151378-986b62d3-aab4-451d-8c65-029a3f2ec8a7.png">
 44 | 
 45 | 2. Update the location section to this.
 46 | <img width="400" src="https://user-images.githubusercontent.com/108229029/229151891-46be485f-57e7-4bb9-9bac-6a1686e2c653.png">
 47 | <img width="600" src="https://user-images.githubusercontent.com/108229029/229152382-358daed2-6c7f-4cbb-b367-c17351a37b2d.png">
 48 | 
 49 | # Application Images
 50 | 
 51 | <img width="1439" src="https://user-images.githubusercontent.com/108229029/228939676-4f229e2a-96b7-4bfd-9926-91c203e1448e.png">
 52 | <img width="1439" src="https://user-images.githubusercontent.com/108229029/228939788-e2064606-4abc-478f-b6b0-8bb80ef29b86.png">
 53 | <img width="1439" src="https://user-images.githubusercontent.com/108229029/228939898-46b3d07e-a621-4969-ac84-d52f7a28150c.png">
 54 | <img width="1439" src="https://user-images.githubusercontent.com/108229029/228940125-68978815-d8c0-4ccc-a422-ff9b39afed39.png">
 55 | <img width="1439" src="https://user-images.githubusercontent.com/108229029/228940234-08eff6c7-1d77-4992-9813-e1e1584100c5.png">
 56 | <img width="1439" src="https://user-images.githubusercontent.com/108229029/228940314-45580c79-10c1-440e-a9b0-3f3a554b4a47.png">
 57 | <img width="1439" src="https://user-images.githubusercontent.com/108229029/228940489-69cf84fc-5f6c-4dd8-a94a-568af290e00e.png">
 58 | <img width="1439" src="https://user-images.githubusercontent.com/108229029/228940597-8dcaef65-266a-4cd0-b0ef-1f0715159f1a.png">
 59 | <img width="1439" src="https://user-images.githubusercontent.com/108229029/228940672-b4a1c33c-ffe5-4346-a47a-dcfedf01090e.png">
 60 | <img width="1439" src="https://user-images.githubusercontent.com/108229029/228940742-c1c1b786-e212-448e-87d8-60d4d66945fd.png">
 61 | <img width="1439" src="https://user-images.githubusercontent.com/108229029/228940845-2d863b6f-67f7-4221-801d-d433265584e9.png">
 62 | <img width="1439" src="https://user-images.githubusercontent.com/108229029/228940930-53cac8bf-30ba-4e4c-993d-b0007c1601cb.png">
 63 | <img width="1439" src="https://user-images.githubusercontent.com/108229029/228941007-efe23396-b189-4ce3-85c5-53d1bd8fc983.png">
 64 | <img width="1439" src="https://user-images.githubusercontent.com/108229029/228941097-3de7b664-023f-48e6-beff-1810791f45ff.png">
 65 | 
 66 | # PWA Images
 67 | <img width="1439" src="https://user-images.githubusercontent.com/108229029/228941385-ba10b505-0522-4493-95e6-2214cba4ed0a.png">
 68 | <img width="1439" src="https://user-images.githubusercontent.com/108229029/228941510-24b39533-c93c-48fe-aa0d-ca6b140eef75.png">
 69 | <img width="1439" src="https://user-images.githubusercontent.com/108229029/228941606-74b3b422-a4f3-4973-834d-f3e152c3e71e.png">
 70 | <img width="800" src="https://user-images.githubusercontent.com/108229029/228941671-b521f9fa-b764-418e-9e97-e3cdcba08a7b.png">
 71 | 
 72 | 
 73 | <div>
 74 |   <img width="333" src="https://user-images.githubusercontent.com/108229029/228942219-5712d33c-dfa7-4d8f-846d-c2449ebcb01c.png">
 75 |   <img width="333" src="https://user-images.githubusercontent.com/108229029/228942317-12756e75-bac0-4715-9c77-b00efde31937.png">
 76 |   <img width="333" src="https://user-images.githubusercontent.com/108229029/228942370-f8bef7e5-2e62-4da8-9ea8-f806d8a7b3d3.png">
 77 | </div>
 78 | 
 79 | <div>
 80 |   <img width="333" src="https://user-images.githubusercontent.com/108229029/228942477-44a16a82-e2cd-4546-bb4b-461b492d6812.png">
 81 |   <img width="333" src="https://user-images.githubusercontent.com/108229029/228942526-89dc5f45-dc15-4508-9353-eeb90e90059d.png">
 82 |   <img width="333" src="https://user-images.githubusercontent.com/108229029/228942612-dea08e4d-69d7-4622-ba70-a2378d91ab04.png">
 83 | </div>
 84 | 
 85 | <div>
 86 |   <img width="333" src="https://user-images.githubusercontent.com/108229029/228942915-1f036606-5705-43d8-ad63-888346b6af42.png">
 87 |   <img width="333" src="https://user-images.githubusercontent.com/108229029/228942980-a3acc437-2bda-4500-9cee-d79c3ffda773.png">
 88 |   <img width="333" src="https://user-images.githubusercontent.com/108229029/228943033-5f0f911f-712e-4352-a85d-886a503c0508.png">
 89 | </div>
 90 | 
 91 | <div>
 92 |   <img width="333" src="https://user-images.githubusercontent.com/108229029/228943152-93e08fbb-ad95-47e9-9b8b-e9dae9484cd5.png">
 93 |   <img width="333" src="https://user-images.githubusercontent.com/108229029/228943200-b38238ef-d4bc-4703-881a-71fe498bbfa9.png">
 94 |   <img width="333" src="https://user-images.githubusercontent.com/108229029/228943242-cffc88a7-7211-4f43-bbe4-4fa89aae1f3a.png">
 95 | </div>
 96 | 
 97 | <div>
 98 |   <img width="333" src="https://user-images.githubusercontent.com/108229029/228943303-3aaddfc4-9c55-40c4-8a8d-c4d52fcc20d7.png">
 99 |   <img width="333" src="https://user-images.githubusercontent.com/108229029/228943392-e84c29d0-9262-4d07-a2c2-a96aec9c546d.png">
100 |   <img width="333" src="https://user-images.githubusercontent.com/108229029/228943453-4757ed61-0857-4894-be5c-f8447fb56ee4.png">
101 | </div>
102 | 
103 | <div>
104 |   <img width="333" src="https://user-images.githubusercontent.com/108229029/228943520-8f10ffa2-b936-4383-863a-50262984712f.png">
105 |   <img width="333" src="https://user-images.githubusercontent.com/108229029/228943657-698c06c8-ab4b-41ec-8585-de27f1e63d78.png">
106 | </div>
107 | 
108 | 


--------------------------------------------------------------------------------
/components/UpdateLinkOverlay.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div 
  3 |         id="UpdateLinkOverlay"
  4 |         class="fixed z-40 top-0 left-0 w-full h-full bg-white px-5"
  5 |     >
  6 |         <div class="w-full md:hidden flex items-center justify-between">
  7 |             <div class="flex items-center justify-between w-full py-[8px]">
  8 |                 <button 
  9 |                     type="button"
 10 |                     @click="close()"
 11 |                     class="rounded-full"
 12 |                 >
 13 |                     <Icon name="ic:baseline-check" size="35" color="#676B5F" />
 14 |                 </button>
 15 | 
 16 |                 <div class="flex items-center justify-between gap-8">
 17 | 
 18 |                     <button class="flex items-center">
 19 |                         <Icon name="mdi:bell-outline" size="30" color="#676B5F"/>
 20 |                     </button>
 21 | 
 22 |                     <button 
 23 |                         @click="deleteLink()"
 24 |                         class="flex items-center"
 25 |                     >
 26 |                         <Icon name="carbon:trash-can"  size="27" color="#676B5F"/>
 27 |                     </button>
 28 |                 </div>
 29 |             </div>
 30 |         </div>
 31 | 
 32 |         <div class="flex flex-col items-center w-full pt-12">
 33 |             <div v-show="!isName" class="flex items-center justify-between w-full">
 34 |                 <div 
 35 |                     @click="isFocused('isName')"
 36 |                     class="text-2xl font-semibold mr-2 cursor-pointer"
 37 |                 >
 38 |                     {{ name }}
 39 |                 </div>
 40 |                 <Icon 
 41 |                     @click="isFocused('isName')"
 42 |                     class="cursor-pointer"
 43 |                     name="octicon:pencil-24" 
 44 |                     size="25" 
 45 |                     color="#676B5F"
 46 |                 />
 47 |             </div>
 48 |             <input 
 49 |                 v-show="isName"
 50 |                 id="editNameInputMobile"
 51 |                 type="text"
 52 |                 v-model="name"
 53 |                 class="w-full text-2xl underline font-semibold focus:outline-none"
 54 |             >
 55 |             <span 
 56 |                 v-if="errors && errors.name"
 57 |                 class="text-red-500 font-sm font-semibold w-full"
 58 |             >
 59 |                 {{ errors.name[0] }}
 60 |             </span>
 61 |         </div>
 62 | 
 63 |         <div class="flex items-center w-full pt-3 pb-6 border-b-2">
 64 |             <div v-show="!isLink" class="flex items-center w-[calc(100%-2px)]">
 65 |                 <div 
 66 |                     @click="isFocused('isLink')" 
 67 |                     class="text-lg mr-2 truncate cursor-pointer"
 68 |                 >
 69 |                     {{ url }}
 70 |                 </div>
 71 |                 <Icon 
 72 |                     @click="isFocused('isLink')"
 73 |                     class="cursor-pointer min-w-[17px]"
 74 |                     name="octicon:pencil-24" 
 75 |                     size="25" 
 76 |                     color="#676B5F"
 77 |                 />
 78 |             </div>
 79 |             <input 
 80 |                 v-show="isLink"
 81 |                 id="editLinkInputMobile"
 82 |                 type="text"
 83 |                 v-model="url"
 84 |                 class="w-full text-lg underline focus:outline-none"
 85 |             >
 86 |             <span 
 87 |                 v-if="errors && errors.url"
 88 |                 class="text-red-500 font-sm font-semibold w-full"
 89 |             >
 90 |                 {{ errors.url[0] }}
 91 |             </span>
 92 |         </div>
 93 | 
 94 |         <div id="UploadImageForLink" class="pt-6">
 95 |             <button
 96 |                 @click="openCropper = true"
 97 |                 class="
 98 |                     flex 
 99 |                     items-center 
100 |                     justify-center 
101 |                     text-xl 
102 |                     w-full 
103 |                     py-3 
104 |                     rounded-full 
105 |                     text-white 
106 |                     font-semibold 
107 |                     bg-[#8228D9] 
108 |                 "
109 |             >
110 |                 <Icon name="mdi:plus" class="mr-0.5" size="25"/>
111 |                 Select image
112 |             </button>
113 | 
114 |             <img 
115 |                 v-if="currentLink && currentLink.image"
116 |                 class="mx-auto pt-4 aspect-square object-cover" 
117 |                 width="300" 
118 |                 :src="currentLink.image"
119 |             >
120 |         </div>
121 | 
122 |         <CropperModal 
123 |             v-if="openCropper"
124 |             :linkId="updatedLinkId"
125 |             @data="data = $event"
126 |             @close="openCropper = false"
127 |         />
128 |     </div>
129 | </template>
130 | 
131 | <script setup>
132 | import { useUserStore } from '~~/stores/user'
133 | import { storeToRefs } from 'pinia';
134 | const userStore = useUserStore()
135 | const { updatedLinkId } = storeToRefs(userStore)
136 | 
137 | let isName = ref(false)
138 | let isLink = ref(false)
139 | let name = ref('')
140 | let url = ref('')
141 | let data = ref(null)
142 | let currentLink = ref(null)
143 | let openCropper = ref(false)
144 | let errors = ref(null)
145 | 
146 | onMounted(() => {   
147 |     getLinkById()
148 |     userStore.hidePageOverflow(true, 'AdminPage')
149 | 
150 |     document.addEventListener('mouseup', function(e) {
151 |         let editNameInput = document.getElementById('editNameInputMobile')
152 |         if (!editNameInput.contains(e.target)) { 
153 |             editNameInput.blur() 
154 |             isName.value = false
155 |         }
156 |     });
157 | 
158 |     document.addEventListener('mouseup', function(e) {
159 |         let editLinkInput = document.getElementById('editLinkInputMobile')
160 |         if (!editLinkInput.contains(e.target)) {
161 |             editLinkInput.blur() 
162 |             isLink.value = false
163 |         }
164 |     });
165 | })
166 | 
167 | const getLinkById = () =>{
168 |     userStore.allLinks.forEach(link => {
169 |         if (updatedLinkId.value == link.id) {
170 |             currentLink.value = link
171 |             name.value = link.name
172 |             url.value = link.url
173 |         }
174 |     });
175 | }
176 | 
177 | const close = () => updatedLinkId.value = 0
178 | 
179 | const updateLinkImage = async () => {
180 |     try {
181 |         await userStore.updateLinkImage(data.value)
182 |         await userStore.getAllLinks()
183 |         getLinkById()
184 |         setTimeout(() => openCropper.value = false, 300)
185 |     } catch (error) {
186 |         console.log(error)
187 |         errors.value = error.response.data.errors
188 |     }
189 | }
190 | 
191 | const deleteLink = async () => {
192 |     let res = confirm('Are you sure you want to delete this link?')
193 |     try {
194 |         if (res) {
195 |             await userStore.deleteLink(updatedLinkId.value)
196 |             await userStore.getAllLinks()
197 |         }
198 |     } catch (error) {
199 |         console.log(error)
200 |         errors.value = error.response.data.errors
201 |     }
202 | }
203 | 
204 | const isFocused = (str) => {
205 |     if (str == 'isName') {
206 |         setTimeout(() => document.getElementById('editNameInputMobile').focus())
207 |         isName.value = true; 
208 |         isLink.value = false
209 |     }
210 | 
211 |     if (str == 'isLink') {
212 |         setTimeout(() => document.getElementById('editLinkInputMobile').focus())
213 |         isName.value = false; 
214 |         isLink.value = true
215 |     }
216 | }
217 | 
218 | const updateLink = useDebounce(async () => {
219 |     try {
220 |         await userStore.updateLink(updatedLinkId.value, name.value, url.value)
221 |         await userStore.getAllLinks()
222 |         getLinkById()
223 |     } catch (error) {
224 |         console.log(error)
225 |         errors.value = error.response.data.errors
226 |     }
227 | }, 500)
228 | 
229 | watch(() => name.value, () => {
230 |     if (name.value && currentLink.value.name != name.value) {
231 |         errors.value = null
232 |         updateLink()
233 |     }
234 | })
235 | 
236 | watch(() => url.value, () => {
237 |     if (url.value && currentLink.value.url != url.value) {
238 |         errors.value = null
239 |         updateLink()
240 |     }
241 | })
242 | 
243 | watch(() => data.value, async () => await updateLinkImage())
244 | 
245 | onUnmounted(() => {
246 |     userStore.hidePageOverflow(false, 'AdminPage')
247 |     updatedLinkId.value = 0
248 | })
249 | </script>
250 | 


--------------------------------------------------------------------------------
/pages/admin/apperance.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <AdminLayout>
  3 |         <div 
  4 |             id="ApperancePage" 
  5 |             class="flex h-[calc(100%-50px)] pb-4"
  6 |         >
  7 |             <div class="lg:w-[calc(100%-500px)] md:w-[calc(100%-330px)] w-full md:pt-20 pt-14">
  8 |                 <div class="max-w-[750px] mx-auto pb-24">
  9 | 
 10 |                     <div id="ProfileSection">
 11 |                         <div
 12 |                             class="font-semibold pb-4"
 13 |                             :class="userStore.isMobile ? 'mt-8 text-2xl' : 'mt-20 md:mt-8 text-xl'"
 14 |                         >
 15 |                             Profile
 16 |                         </div>
 17 |                         
 18 |                         <div class="w-full bg-white rounded-3xl p-6">
 19 |                             <div class="flex items-center justify-between gap-4">
 20 |                                 <img 
 21 |                                     class="rounded-full w-[90px]"
 22 |                                     :src="userStore.image"
 23 |                                 >
 24 | 
 25 |                                 <div class="w-full">
 26 |                                     <button 
 27 |                                         @click="openCropper = true"
 28 |                                         class="
 29 |                                             flex 
 30 |                                             items-center 
 31 |                                             justify-center 
 32 |                                             w-full 
 33 |                                             py-3 
 34 |                                             rounded-full 
 35 |                                             text-white 
 36 |                                             font-semibold 
 37 |                                             bg-[#8228D9] 
 38 |                                             hover:bg-[#6c21b3] 
 39 |                                             mb-2
 40 |                                         "
 41 |                                     >
 42 |                                         Pick image
 43 |                                     </button>
 44 |                                 </div>
 45 |                             </div>
 46 | 
 47 |                             <div class="mt-4">
 48 |                                 <TextInput 
 49 |                                     placeholder="Profile Title"
 50 |                                     v-model:input="name"
 51 |                                     inputType="text"
 52 |                                     :max="25"
 53 |                                     :error="errors && errors.name ? errors.name[0] : ''"
 54 |                                 />
 55 |                             </div>
 56 | 
 57 |                             <textarea 
 58 |                                 v-model="bio" 
 59 |                                 rows="4"
 60 |                                 maxlength="80"
 61 |                                 placeholder="Bio"
 62 |                                 @focus="isBioFocused = true"
 63 |                                 @blur="isBioFocused = false"
 64 |                                 :class="isBioFocused ? 'border-gray-900' : ''"
 65 |                                 class="
 66 |                                     w-full
 67 |                                     mt-4
 68 |                                     bg-[#EFF0EB]
 69 |                                     text-gray-800
 70 |                                     border-2
 71 |                                     text-sm
 72 |                                     border-[#EFF0EB]
 73 |                                     rounded-xl
 74 |                                     py-3.5
 75 |                                     px-3
 76 |                                     placeholder-gray-500
 77 |                                     resize-none
 78 |                                     focus:outline-none
 79 |                                 "
 80 |                             ></textarea>
 81 |                             <div class="flex items-center justify-end text-[#676B5F] text-[13px]">
 82 |                                 {{ bioLengthComputed }}/80
 83 |                             </div>
 84 | 
 85 |                         </div>
 86 |                     </div>
 87 | 
 88 |                     <div id="ThemeSection">
 89 |                         <div
 90 |                             class="font-semibold pb-4"
 91 |                             :class="userStore.isMobile ? 'mt-8 text-2xl' : 'mt-20 md:mt-8 text-xl'"
 92 |                         >
 93 |                             Themes
 94 |                         </div>
 95 |                         
 96 |                         <div class="w-full bg-white rounded-3xl p-6">
 97 |                             <div class="grid xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-2 gap-4">
 98 |                                 <div v-for="item in userStore.colors">
 99 |                                     <div 
100 |                                         class="border-2 border-gray-500 rounded-lg aspect-[2/3] border-dashed cursor-pointer"
101 |                                         :class="
102 |                                             userStore.theme_id == item.id 
103 |                                                 ? 'transition-all duration-150 ease-in p-2' 
104 |                                                 : 'transition-all duration-150 ease-out p-0'
105 |                                         "
106 |                                     >
107 |                                         <div 
108 |                                             @click="updateTheme(item.id)"
109 |                                             class="relative rounded-xl h-full mx-auto"
110 |                                         >
111 |                                             <div 
112 |                                                 class="absolute left-0 top-0 h-full w-full z-0"
113 |                                                 :class="item.color"
114 |                                             />
115 |                                             <div class="relative z-10 pt-9">
116 |                                                 <div class="rounded-full mx-auto w-12 h-12 bg-[#EFF0EA] bg-opacity-70" />
117 | 
118 |                                                 <div class="w-[calc(100%-20px)] mx-auto rounded-full h-6 mt-4 bg-[#EFF0EA] bg-opacity-70"/>
119 |                                                 <div class="w-[calc(100%-20px)] mx-auto rounded-full h-6 mt-1 bg-[#EFF0EA] bg-opacity-70"/>
120 |                                                 <div class="w-[calc(100%-20px)] mx-auto rounded-full h-6 mt-1 bg-[#EFF0EA] bg-opacity-70"/>
121 |                                             </div>
122 |                                         </div>
123 |                                     </div>
124 |                                     <div class="text-center">{{ item.name }}</div>
125 |                                 </div>
126 |                             </div>
127 |                         </div>
128 |                     </div>
129 |                 </div>
130 |             </div>
131 | 
132 |             <MobileSectionDisplay />
133 |             <CropperModal 
134 |                 v-if="openCropper"
135 |                 @data="data = $event"
136 |                 @close="openCropper = false"
137 |             />
138 | 
139 |         </div>
140 |     </AdminLayout>
141 | </template>
142 | 
143 | <script setup>
144 | import AdminLayout from '~~/layouts/AdminLayout.vue';
145 | import { useUserStore } from '~~/stores/user'
146 | const userStore = useUserStore()
147 | 
148 | definePageMeta({ middleware: 'is-logged-out' })
149 | 
150 | let name = ref('')
151 | let bio = ref('')
152 | let data = ref(null)
153 | let errors = ref('')
154 | let isBioFocused = ref(false)
155 | let openCropper = ref(false)
156 | 
157 | onMounted(() => {
158 |     name.value = userStore.name
159 |     bio.value = userStore.bio
160 | })
161 | 
162 | const updateTheme = async (themeId) => {
163 |     try {
164 |         await userStore.updateTheme(themeId)
165 |     } catch (error) {
166 |         console.log(error)
167 |     }
168 | }
169 | 
170 | const updateUserDetails = useDebounce(async () => {
171 |     try {
172 |         await userStore.updateUserDetails(name.value, bio.value)
173 |         await userStore.getUser()
174 |     } catch (error) {
175 |         console.log(error)
176 |         errors.value = error.response.data.errors
177 |     }
178 | }, 1000)
179 | 
180 | const bioLengthComputed = computed(() => {
181 |     return !bio.value ? 0 : bio.value.length
182 | })
183 | 
184 | const updateUserImage = async () => {
185 |     try {
186 |         await userStore.updateUserImage(data.value)
187 |         await userStore.getUser()
188 |         setTimeout(() => openCropper.value = false, 300)
189 |     } catch (error) {
190 |         openCropper.value = false
191 |         alert(error)
192 |         console.log(error)
193 |     }
194 | }
195 | 
196 | watch(() => name.value, async () => await updateUserDetails())
197 | watch(() => bio.value, async () => await updateUserDetails())
198 | watch(() => data.value, async () => await updateUserImage())
199 | </script>
200 | 


--------------------------------------------------------------------------------
/components/CropperModal.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="fixed z-50 h-full">
  3 |         <div class="fixed inset-0 bg-black bg-opacity-60"></div>
  4 |         <div class="fixed inset-0 z-10 overflow-auto h-full">
  5 |             <div class="flex flex-col min-h-full justify-center items-center py-2">
  6 | 
  7 |                 <div
  8 |                     class="
  9 |                         transform
 10 |                         overflow-hidden
 11 |                         rounded-lg
 12 |                         bg-white
 13 |                         shadow-2xl
 14 |                         transition-all
 15 |                         max-w-lg
 16 |                         w-full
 17 |                     "
 18 |                 >
 19 |                     <div class="flex items-center  py-4 border-b border-b-gray-300">
 20 |                         <div class="text-[22px] font-semibold w-full text-center">
 21 |                             Pick Image
 22 |                         </div>
 23 |                         <div
 24 |                             @click="$emit('close')"
 25 |                             class="absolute right-3 rounded-full p-1.5 bg-gray-200 hover:bg-gray-300 cursor-pointer"
 26 |                         >
 27 |                             <Icon name="mdi:close" size="25"/>
 28 |                         </div>
 29 |                     </div>
 30 | 
 31 |                     <div class="flex items-center bg-white px-4 pb-4">
 32 |                         <div class="w-full">
 33 |                             <div v-if="!uploadedImage" class="my-4">
 34 | 
 35 |                                 <label
 36 |                                     for="file"
 37 |                                     class="
 38 |                                         flex 
 39 |                                         items-center 
 40 |                                         justify-center 
 41 |                                         w-full 
 42 |                                         py-3 
 43 |                                         rounded-full 
 44 |                                         text-white 
 45 |                                         font-semibold 
 46 |                                         bg-[#8228D9] 
 47 |                                         hover:bg-[#6c21b3] 
 48 |                                         mb-2
 49 |                                         cursor-pointer
 50 |                                     "
 51 |                                 >
 52 |                                     Upload photo
 53 |                                 </label>
 54 |                                 <input
 55 |                                     type="file"
 56 |                                     id="file"
 57 |                                     class="hidden"
 58 |                                     @change="getUploadedImage"
 59 |                                 >
 60 |                             </div>
 61 | 
 62 |                             <div v-if="!uploadedImage && video && video.paused" class="my-4">
 63 |                                 <button
 64 |                                     @click="startCamera()"
 65 |                                     class="
 66 |                                         flex 
 67 |                                         items-center 
 68 |                                         justify-center 
 69 |                                         w-full 
 70 |                                         py-3 
 71 |                                         rounded-full 
 72 |                                         text-white 
 73 |                                         font-semibold 
 74 |                                         bg-[#8228D9] 
 75 |                                         hover:bg-[#6c21b3] 
 76 |                                         mb-2
 77 |                                         cursor-pointer
 78 |                                     "
 79 |                                 >
 80 |                                     Open camera
 81 |                                 </button>
 82 |                             </div>
 83 | 
 84 |                             <div v-show="isOpenCamera" class="pb-4">
 85 |                                 <video v-show="!isNewPhoto" ref="video" class="aspect-square" />
 86 |                                 <canvas v-show="isNewPhoto" ref="canvas" class="aspect-square"/>
 87 |                             </div>
 88 | 
 89 |                             <div class="max-w-lg w-full mx-auto">
 90 |                                 <Cropper
 91 |                                     class="object-cover"
 92 |                                     ref="cropper"
 93 |                                     :stencil-props="{
 94 |                                         movable: true,
 95 |                                         resizable: true,
 96 |                                         aspectRatio: 1,
 97 |                                     }"
 98 |                                     :resize-image="{
 99 |                                         adjustStencil: false
100 |                                     }"
101 |                                     image-restriction="stencil"
102 |                                     :src="uploadedImage"
103 |                                 />
104 |                             </div>
105 | 
106 |                             <div class="flex gap-4" :class="uploadedImage ? 'pt-4' : ''">
107 |                                 <button
108 |                                     @click="$emit('close')"
109 |                                     type="button"
110 |                                     class="
111 |                                         flex 
112 |                                         items-center 
113 |                                         border 
114 |                                         justify-center 
115 |                                         w-full 
116 |                                         py-3 
117 |                                         rounded-full 
118 |                                         text-black 
119 |                                         font-semibold 
120 |                                         hover:bg-gray-100
121 |                                         focus:outline-none
122 |                                         focus:ring-0
123 |                                         cursor-pointer
124 |                                     "
125 |                                 >
126 |                                     Cancel
127 |                                 </button>
128 |                                 <button
129 |                                     v-if="isOpenCamera"
130 |                                     @click="takePhoto()"
131 |                                     class="
132 |                                         flex 
133 |                                         items-center 
134 |                                         justify-center 
135 |                                         w-full 
136 |                                         py-3 
137 |                                         rounded-full 
138 |                                         text-white 
139 |                                         font-semibold 
140 |                                         bg-[#8228D9] 
141 |                                         hover:bg-[#6c21b3] 
142 |                                         cursor-pointer
143 |                                         focus:outline-none
144 |                                         focus:ring-0
145 |                                     "
146 |                                 >
147 |                                     <span v-show="!isTakingPhoto">Take photo</span>
148 |                                     <Icon v-show="isTakingPhoto" name="eos-icons:loading" size="25"/>
149 |                                 </button>
150 |                                 <button
151 |                                     v-if="uploadedImage"
152 |                                     @click="cropImage()"
153 |                                     class="
154 |                                         flex 
155 |                                         items-center 
156 |                                         justify-center 
157 |                                         w-full 
158 |                                         py-3 
159 |                                         rounded-full 
160 |                                         text-white 
161 |                                         font-semibold 
162 |                                         bg-[#8228D9] 
163 |                                         hover:bg-[#6c21b3] 
164 |                                         cursor-pointer
165 |                                         focus:outline-none
166 |                                         focus:ring-0
167 |                                     "
168 |                                 >
169 |                                     <span v-show="!isCropping">Crop Image</span>
170 |                                     <Icon v-show="isCropping" name="eos-icons:loading" size="25"/>
171 |                                 </button>
172 |                             </div>
173 |                         </div>
174 |                     </div>
175 |                 </div>
176 |             </div>
177 |         </div>
178 |     </div>
179 | </template>
180 | 
181 | <script setup>
182 |     import { Cropper } from 'vue-advanced-cropper'
183 |     import 'vue-advanced-cropper/dist/style.css';
184 | 
185 |     const emit = defineEmits(['close', 'data'])
186 | 
187 |     const props = defineProps({ 
188 |         linkId: { type: Number, required: false }
189 |     })
190 |     const { linkId } = toRefs(props)
191 | 
192 |     let file = ref(null)
193 |     let video = ref(null)
194 |     let canvas = ref(null)
195 |     let isNewPhoto = ref(null)
196 |     let isOpenCamera = ref(null)
197 |     let photoData = ref(null)
198 |     let cropper = ref(null)
199 |     let uploadedImage = ref(null)
200 |     let isTakingPhoto = ref(false)
201 |     let isCropping = ref(false)
202 | 
203 |     const getUploadedImage = (e) => {
204 |         file.value = e.target.files[0]
205 |         uploadedImage.value = URL.createObjectURL(e.target.files[0])
206 |     }
207 | 
208 |     const startCamera = async() => {
209 |         isOpenCamera.value = true
210 | 
211 |         if (navigator.mediaDevices) {
212 |             let stream = await navigator.mediaDevices.getUserMedia({
213 |                 video: {
214 |                     width: { max: 1024 },
215 |                     height: { max: 1024 },
216 |                     aspectRatio: { ideal: 1 }
217 |                 }
218 |             })
219 |             video.value.srcObject = stream
220 |             video.value.play()
221 |         }
222 |     }
223 | 
224 |     const takePhoto = () => {
225 |         let videoLocal = video.value
226 |         let canvasLocal = canvas.value
227 | 
228 |         canvasLocal.width = videoLocal.getBoundingClientRect().width
229 |         canvasLocal.height = videoLocal.getBoundingClientRect().height
230 | 
231 |         let context = canvasLocal.getContext('2d')
232 |         context.drawImage(videoLocal, 0, 0, canvasLocal.width, canvasLocal.height)
233 |         isNewPhoto.value = true
234 |         photoData.value = canvasLocal.toDataURL()
235 | 
236 |         convertBlobToUrl()
237 |     }
238 | 
239 |     const convertBlobToUrl = async () => {
240 |         const blob = await (await fetch(photoData.value)).blob()
241 |         file.value = new File([blob], "NEW_PHOTO.png", { type: blob.type });
242 |         uploadedImage.value = URL.createObjectURL(file.value)
243 |         isOpenCamera.value = false        
244 |     }
245 | 
246 |     const cropImage = async () => {
247 |         isCropping.value = true
248 |         const { coordinates } = cropper.value.getResult()
249 | 
250 |         let data = new FormData();
251 |         data.append('image', file.value || '')
252 |         data.append('height', coordinates.height || '')
253 |         data.append('width', coordinates.width || '')
254 |         data.append('left', coordinates.left || '')
255 |         data.append('top', coordinates.top || '')
256 |         data.append('id', linkId.value || '')
257 | 
258 |         isCropping.value = true
259 |         emit('data', data)
260 |     }
261 | 
262 |     onUnmounted(() => {
263 |         video.value.pause()
264 |         video.value.currentTime = 0
265 |     })
266 | </script>


--------------------------------------------------------------------------------
/layouts/AdminLayout.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div id="AdminLayout" class="w-full fixed z-30">
  3 |         <div 
  4 |             v-if="!userStore.isMobile"
  5 |             id="TopNav" 
  6 |             class="w-full flex items-center justify-between md:pt-2.5 md:px-2.5"
  7 |         >
  8 |             <div class="flex items-center justify-between md:rounded-full md:shadow-sm px-2 md:pl-6 pl-4 py-[8px] bg-white w-full border-b">
  9 |                 <div class="flex items-center justify-start w-full max-w-[500px]">
 10 |                     <NuxtLink to="/admin">
 11 |                         <img 
 12 |                             class="w-[23px] min-w-[23px] select-none" 
 13 |                             src="~/assets/images/linktree-logo-icon.png"
 14 |                         >
 15 |                     </NuxtLink>
 16 | 
 17 |                     <div v-for="link in links" class="lg:px-2.5 px-0.5 md:block hidden">
 18 |                         <NuxtLink 
 19 |                             :to="link.url" 
 20 |                             class="flex items-center text-sm font-semibold px-1.5 py-3 rounded-lg hover:bg-gray-100"
 21 |                         >
 22 |                             <Icon 
 23 |                                 :name="link.icon" 
 24 |                                 class="mr-0.5" 
 25 |                                 size="18" 
 26 |                                 :color="route.fullPath == link.url ? '#000000' : '#676B5F'"
 27 |                             />
 28 |                             <div :class="route.fullPath == link.url ? 'text-[#000000]' : 'text-[#676B5F]'">
 29 |                                 {{ link.name }}
 30 |                             </div>
 31 |                         </NuxtLink>
 32 |                     </div>
 33 | 
 34 |                 </div>
 35 | 
 36 |                 <div class="flex items-center justify-between gap-3">
 37 |                     <button class="flex items-center text-sm font-semibold p-2 rounded-full hover:bg-gray-100">
 38 |                         <Icon name="healthicons:megaphone-outline" class="mr-0.5"  size="22"/>
 39 |                     </button>
 40 | 
 41 |                     <button class="flex items-center font-semibold px-3 py-2 rounded-full bg-gray-100">
 42 |                         <Icon name="mdi:lightning-bolt" class="mr-0.5"  size="18"/>
 43 |                         Upgrade
 44 |                     </button>
 45 | 
 46 |                     <button class="flex items-center font-semibold px-3 py-2 rounded-full border hover:bg-gray-100">
 47 |                         <Icon name="teenyicons:upload-solid" class="mr-1.5"  size="18"/>
 48 |                         Share
 49 |                     </button>
 50 |                     
 51 |                     <button 
 52 |                         @click="!isTopNav ? openMenu('TopNav') : isTopNav = false"
 53 |                         class="rounded-full md:block hidden"
 54 |                     >
 55 |                         <img 
 56 |                             class="rounded-full min-w-[40px] w-[40px]"
 57 |                             :src="userStore.image"
 58 |                         >
 59 |                     </button>
 60 | 
 61 |                 </div>
 62 |             </div>
 63 |             <div
 64 |                 v-if="isTopNav"
 65 |                 class="
 66 |                     absolute 
 67 |                     md:block
 68 |                     hidden
 69 |                     right-4 
 70 |                     top-16 
 71 |                     border 
 72 |                     shadow-[0_5px_15px_15px_rgba(0,0,0,0.1)] 
 73 |                     bg-white 
 74 |                     w-full 
 75 |                     max-w-[300px] 
 76 |                     rounded-2xl
 77 |                 "
 78 |             >   
 79 |                 <button
 80 |                     @click="logout()"
 81 |                     class="w-full flex items-center text-gray-600 text-[15px] p-3 hover:text-black"
 82 |                 >
 83 |                     <Icon name="circum:logout" class="mr-6" />
 84 |                     Sign out
 85 |                 </button>
 86 |             </div>
 87 |         </div>
 88 |         <div 
 89 |             v-if="!userStore.isMobile"
 90 |             id="SecondaryTopNav"
 91 |             class="w-full md:hidden flex items-center justify-between md:pt-2.5 md:px-2.5"
 92 |         >
 93 |             <div 
 94 |                 class="flex items-center justify-between gap-4 shadow-sm bg-white w-full"
 95 |                 :class="route"
 96 |             >
 97 |                 <div class="flex w-full">
 98 |                     <div v-for="link in linksSecondaryNav" class="w-1/4">
 99 |                         <NuxtLink 
100 |                             :to="link.url" 
101 |                             class="
102 |                                 relative 
103 |                                 flex 
104 |                                 justify-center 
105 |                                 border-t-black 
106 |                                 text-sm 
107 |                                 w-full 
108 |                                 h-full
109 |                                 font-semibold 
110 |                                 px-1.5 
111 |                                 my-[1px] 
112 |                                 py-[1px]
113 |                                 hover:bg-gray-100
114 |                             "
115 |                             :class="link.url == route.fullPath ? 'border-b-2 border-b-black' : ''"
116 |                         >
117 |                             <button class="relative pt-[6px]">
118 |                                 <Icon 
119 |                                     v-if="link.icon" 
120 |                                     :name="link.icon" 
121 |                                     size="20" 
122 |                                     :color="route.fullPath == link.url ? '#000000' : '#676B5F'"
123 |                                 />
124 |                                 <img 
125 |                                     v-else
126 |                                     class="rounded-full min-w-[22px] w-[22px]"
127 |                                     :src="link.img"
128 |                                 >
129 |                                 <div 
130 |                                     class="relative text-[13px] text-[#676B5F]"
131 |                                     :class="link.img ? '-left-[5px]' : ''"
132 |                                 >
133 |                                     <span :class="route.fullPath == link.url ? 'text-[#000000]' : 'text-[#676B5F]'">
134 |                                         {{ link.name }}
135 |                                     </span>
136 |                                 </div>
137 |                             </button>
138 |                         </NuxtLink>
139 |                     </div>
140 |                 </div>
141 |             </div>
142 |         </div>
143 | 
144 |         <div
145 |             v-if="!userStore.isMobile"
146 |             id="PreviewButton"
147 |             class="fixed bottom-10 w-full flex items-center justify-center"
148 |         >
149 |             <button 
150 |                 @click="userStore.isPreviewOverlay = true"
151 |                 class="md:hidden flex items-center text-[17px] font-semibold px-5 py-2.5 bg-[#DFE2D9] rounded-full"
152 |             >
153 |                 <Icon name="icon-park-outline:preview-open" size="20" class="mr-2"/>
154 |                 Preview
155 |             </button>
156 |         </div>
157 | 
158 |         <div
159 |             v-if="userStore.isMobile"
160 |             id="TopNavMobile" 
161 |             class="fixed w-full flex items-center justify-between px-2.5 bg-[#F3F3F1]"
162 |         >
163 |             <div class="flex items-center justify-between w-full py-[8px]">
164 |                 <div class="flex items-center justify-between w-full text-3xl font-bold max-w-[500px]">
165 |                     {{ currentMobilePage() }}
166 |                 </div>
167 | 
168 |                 <div class="flex items-center justify-between gap-3">
169 | 
170 |                     <button class="flex items-center text-[18px] font-semibold px-3 py-2 rounded-full bg-gray-200">
171 |                         Upgrade
172 |                         <Icon name="mdi:lightning-bolt" class="ml-1"  size="20"/>
173 |                     </button>
174 | 
175 |                     <button class="flex items-center font-semibold px-3 py-2 rounded-full hover:bg-gray-200">
176 |                         <Icon name="ph:share-network" class="mr-0.5"  size="23"/>
177 |                     </button>
178 |                 </div>
179 |             </div>
180 |         </div>
181 |     </div>
182 |     <div class="px-2.5 w-full z-0">
183 |         <slot />
184 |     </div>
185 | 
186 |     <div
187 |         v-if="userStore.isMobile"
188 |         id="BottomNav" 
189 |         class="fixed z-20 bottom-0 flex w-full bg-white shadow-[0_35px_60px_10px_rgba(0,0,0,0.4)]"
190 |         :class="userStore.isMobile ? 'h-[70px]' : 'h-[60px]'"
191 |     >
192 |         <div class="flex w-full">
193 |             <div v-for="link in linksMobile" class="w-1/5">
194 |                 <button 
195 |                     class="
196 |                         relative 
197 |                         flex 
198 |                         justify-center 
199 |                         text-sm 
200 |                         w-full 
201 |                         h-full
202 |                         font-semibold 
203 |                         px-1.5 
204 |                         py-1 
205 |                         hover:bg-gray-100
206 |                     "
207 |                     :class="link.url == route.fullPath ? 'border-t-2 border-t-black' : ''"
208 |                 >
209 |                     <NuxtLink :to="link.url" class="relative h-[35px]">
210 |                         <Icon 
211 |                             v-if="link.icon" 
212 |                             :name="link.icon" 
213 |                             class="mr-0.5 mt-[2px]" 
214 |                             size="25"
215 |                             :color="route.fullPath == link.url ? '#000000' : '#676B5F'"
216 |                         />
217 |                         <img 
218 |                             v-else
219 |                             class="rounded-full min-w-[25px] w-[25px] mt-[2px]"
220 |                             :src="link.img"
221 |                         >
222 |                         <div 
223 |                             class="relative text-[13px]"
224 |                             :class="link.img ? '-left-[4px]' : ''"
225 |                         >
226 |                             <span :class="route.fullPath == link.url ? 'text-[#000000]' : 'text-[#676B5F]'">
227 |                                 {{ link.name }}
228 |                             </span>
229 |                         </div>
230 |                     </NuxtLink>
231 |                 </button>
232 |             </div>
233 |         </div>
234 |     </div>
235 | </template>
236 | 
237 | <script setup>
238 | import { useUserStore } from '~~/stores/user'
239 | const userStore = useUserStore()
240 | 
241 | const route = useRoute()
242 | const router = useRouter()
243 | 
244 | let isTopNav = ref(false)
245 | let windowWidth = ref(process.client ? window.innerWidth : '')
246 | let isSecondaryTopNav = ref(false)
247 | 
248 | onMounted(() => {
249 |     window.addEventListener('resize', function () {
250 |         windowWidth.value = window.innerWidth;
251 |     });
252 | })
253 | 
254 | const links = ref([
255 |     { name: 'Links', url: '/admin', icon: 'icon-park-outline:hamburger-button' },
256 |     { name: 'Apperance', url: '/admin/apperance', icon: 'fluent:shapes-48-regular' },
257 |     { name: 'Analytics', url: '/', icon: 'tabler:brand-google-analytics' },
258 |     { name: 'Settings', url: '/', icon: 'material-symbols:settings' },
259 | ])
260 | 
261 | const linksSecondaryNav = ref([
262 |     { name: 'Links', url: '/admin', icon: 'icon-park-outline:hamburger-button' },
263 |     { name: 'Apperance', url: '/admin/apperance', icon: 'fluent:shapes-48-regular' },
264 |     { name: 'Analytics', url: '/', icon: 'tabler:brand-google-analytics' },
265 |     { name: 'More', url: '/admin/more', icon: '', img: userStore.image }
266 | ])
267 | 
268 | const linksMobile = ref([
269 |     { name: 'Links', url: '/admin', icon: 'icon-park-outline:hamburger-button', img: '' },
270 |     { name: 'Apperance', url: '/admin/apperance', icon: 'fluent:shapes-48-regular', img: '' },
271 |     { name: 'Preview', url: '/admin/preview', icon: 'icon-park-outline:preview-open', img: '' },
272 |     { name: 'Analytics', url: '/', icon: 'tabler:brand-google-analytics', img: '' },
273 |     { name: 'More', url: '/admin/more', icon: '', img: userStore.image }
274 | ])
275 | 
276 | const currentMobilePage = () => {
277 |     switch(route.fullPath) {
278 |         case '/admin':
279 |             return 'Links'
280 |             break;
281 |         case '/admin/apperance':
282 |             return 'Apperance'
283 |             break;
284 |         case '/admin/preview':
285 |             return 'Preview'
286 |             break;
287 |         case '/admin/more':
288 |             return 'More'
289 |             break;
290 |     }
291 | }
292 | 
293 | const openMenu = (str) => {
294 |     if (str === 'TopNav') {
295 |         isTopNav.value = true
296 |     } else if (str === 'SecondaryTopNav') {
297 |         isSecondaryTopNav.value = true
298 |     } else {
299 |         router.push('/admin/settings')
300 |     }
301 | }
302 | 
303 | const logout = async () => {
304 |     let res = confirm('Are you sure you want to sign out?')
305 |     try {
306 |         if (res) {
307 |             await userStore.logout()
308 |             router.push('/')
309 |             return
310 |         }
311 |         isTopNav.value = false
312 |     } catch (error) {
313 |         console.log(error) 
314 |     }
315 | }
316 | 
317 | watch(() => windowWidth.value, () => {
318 |     if (windowWidth.value <= 767) {
319 |         isTopNav.value = false
320 |     }
321 | })
322 | 
323 | </script>
324 | 


--------------------------------------------------------------------------------
/components/LinkBox.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div :id="`LinkBox${link.id}`" class="w-full bg-white rounded-3xl">
  3 |         <div id="MainLinkBoxSection" class="px-8 py-5">
  4 |             <div class="flex items-center justify-between py-1">
  5 |                 <div class="flex items-center w-full">
  6 |                     <input 
  7 |                         v-if="editName(selectedId, selectedStr)"
  8 |                         :id="`editNameInput-${link.id}`"
  9 |                         type="text"
 10 |                         v-model="name"
 11 |                         maxlength="18"
 12 |                         class="w-full text-sm font-semibold focus:outline-none"
 13 |                     >
 14 | 
 15 |                     <div v-else class="flex items-center w-full">
 16 |                         <div 
 17 |                             @click="
 18 |                                 name = link.name;
 19 |                                 $emit('updatedInput', { id: link.id, str: 'isName' })
 20 |                             " 
 21 |                             class="font-semibold mr-2 cursor-pointer"
 22 |                             :class="isMobile ? 'text-xl' : 'text-sm'"
 23 |                         >
 24 |                             {{ link.name }}
 25 |                         </div>
 26 |                         <Icon 
 27 |                             @click="$emit('updatedInput', { id: link.id, str: 'isName' })"
 28 |                             class="cursor-pointer"
 29 |                             name="octicon:pencil-24" 
 30 |                             :size="isMobile ? '23' : '17'" 
 31 |                             color="#676B5F"
 32 |                         />
 33 |                     </div>
 34 |                 </div>
 35 |                 <div class="flex items-center">
 36 |                     <Icon 
 37 |                         class="cursor-pointer"
 38 |                         :class="isMobile ? 'min-w-[23px]' : 'min-w-[17px]'"
 39 |                         name="mdi:bell-outline" 
 40 |                         :size="isMobile ? '25' : '20'"
 41 |                         color="#676B5F"
 42 |                     />
 43 |                 </div>
 44 |             </div>
 45 | 
 46 |             <div class="flex items-center justify-between py-1">
 47 |                 <div class="flex items-center w-full">
 48 |                     <input 
 49 |                         v-if="editLink(selectedId, selectedStr)"
 50 |                         :id="`editLinkInput-${link.id}`"
 51 |                         type="text"
 52 |                         v-model="url"
 53 |                         class="w-full text-sm focus:outline-none"
 54 |                     >
 55 |                     <div v-else class="flex items-center w-[calc(100%-2px)]">
 56 |                         <div 
 57 |                             @click="
 58 |                                 url = link.url;
 59 |                                 $emit('updatedInput', { id: link.id, str: 'isLink' })
 60 |                             " 
 61 |                             class="mr-2 truncate cursor-pointer"
 62 |                             :class="isMobile ? 'text-lg' : 'text-sm'"
 63 |                         >
 64 |                         {{ link.url }}
 65 |                         </div>
 66 |                         <Icon 
 67 |                             @click="$emit('updatedInput', { id: link.id, str: 'isLink' })"
 68 |                             class="cursor-pointer min-w-[17px]"
 69 |                             :class="isMobile ? 'min-w-[23px]' : 'min-w-[17px]'"
 70 |                             name="octicon:pencil-24" 
 71 |                             :size="isMobile ? '23' : '17'"
 72 |                             color="#676B5F"
 73 |                         />
 74 |                     </div>
 75 |                 </div>
 76 |             </div>
 77 | 
 78 |             <div class="flex items-center justify-between py-1 mt-4">
 79 |                 <div class="flex items-center w-full relative">
 80 |                     <div 
 81 |                         class="flex items-center px-1.5 py-[2px] absolute -left-[6px] rounded-md"
 82 |                         :class="isUploadImage ? 'bg-[#8228D9]' : 'hover:bg-gray-200'"
 83 |                     >
 84 |                         <Icon 
 85 |                             @click="editImage()"
 86 |                             class="cursor-pointer"
 87 |                             name="icon-park-twotone:collect-picture" 
 88 |                             :size="isMobile ? '23' : '17'" 
 89 |                             :color="isUploadImage ? '#FFFFFF' : '#676B5F'"
 90 |                         />
 91 |                     </div>
 92 |                 </div>
 93 |                 <div v-if="!isMobile" class="flex items-center">
 94 |                     <div class="flex items-center px-1.5 py-[2px] rounded-md relative">
 95 |                         <button 
 96 |                             @click="isDelete = true; isUploadImage = false"
 97 |                             class="flex items-center px-1.5 py-[2px] absolute -right-[6px] rounded-md"
 98 |                             :class="isDelete ? 'bg-[#8228D9]' : 'hover:bg-gray-200'"
 99 |                         >
100 |                             <Icon 
101 |                                 class="cursor-pointer"
102 |                                 name="carbon:trash-can" 
103 |                                 size="20" 
104 |                                 :color="isDelete ? '#FFFFFF' : '#676B5F'"
105 |                             />
106 |                         </button>
107 |                     </div>
108 |                 </div>
109 |             </div>
110 |         </div>
111 | 
112 |         <div
113 |             id="FooterLinkDeleteSection"
114 |             class="overflow-hidden"
115 |             :class="[
116 |                 {'max-h-[180px] transition-all duration-300 ease-in': isDelete},
117 |                 {'max-h-0 transition-all duration-200 ease-out': !isDelete},
118 |             ]"
119 |         >
120 |             <button 
121 |                 @click="isDelete = false"
122 |                 class="relative w-full bg-[#DFE2D9] py-1.5"
123 |             >
124 |                 <Icon
125 |                     name="mdi:close" 
126 |                     class="absolute right-1 top-[6px] cursor-pointer" 
127 |                     size="20" 
128 |                     color="#45494A"
129 |                 />
130 |                 <div class="text-center text-sm font-bold text-[#45494A]">
131 |                     Delete
132 |                 </div>
133 |             </button>
134 | 
135 |             <div class="flex items-center justify-center pt-3">
136 |                 Delete this forever?
137 |             </div>
138 | 
139 |             <div class="w-full px-4 py-3">
140 | 
141 |                 <div class="flex items-center gap-2 w-full">
142 |                     <button     
143 |                         @click="deleteLink()"
144 |                         class="
145 |                             flex 
146 |                             items-center 
147 |                             border 
148 |                             justify-center 
149 |                             w-full 
150 |                             py-3 
151 |                             rounded-full 
152 |                             text-black 
153 |                             font-semibold 
154 |                             hover:bg-gray-100
155 |                         "
156 |                     >
157 |                         Remove
158 |                     </button>
159 |                 </div>
160 |             </div>
161 |         </div>
162 | 
163 |         <div
164 |             id="FooterLinkBoxSection"
165 |             class="overflow-hidden"
166 |             :class="[
167 |                 {'max-h-[180px] transition-all duration-300 ease-in': isUploadImage},
168 |                 {'max-h-0 transition-all duration-200 ease-out': !isUploadImage},
169 |             ]"
170 |         >
171 |             <div class="relative w-full bg-[#DFE2D9] py-1.5">
172 |                 <Icon 
173 |                     @click="isUploadImage = false"
174 |                     name="mdi:close" 
175 |                     class="absolute right-1 top-[6px] cursor-pointer" 
176 |                     size="20" 
177 |                     color="#45494A"
178 |                 />
179 |                 <div class="text-center text-sm font-bold text-[#45494A]">
180 |                     Add Thumbnail
181 |                 </div>
182 |             </div>
183 | 
184 |             <div class="w-full flex items-center justify-between px-4 py-5">
185 |                 <img 
186 |                     class="rounded-lg w-[80px] aspect-square" 
187 |                     :src="link.image"
188 |                 >
189 | 
190 |                 <div class="w-full pl-3">
191 |                     <button 
192 |                         @click="openCropper = true"
193 |                         class="
194 |                             flex 
195 |                             items-center 
196 |                             justify-center 
197 |                             w-full 
198 |                             py-3 
199 |                             rounded-full 
200 |                             text-white 
201 |                             font-semibold 
202 |                             bg-[#8228D9] 
203 |                             hover:bg-[#6c21b3] 
204 |                             mb-2
205 |                         "
206 |                     >
207 |                         Change
208 |                     </button>
209 |                 </div>
210 |             </div>
211 |         </div>
212 | 
213 |         <CropperModal 
214 |             v-if="openCropper"
215 |             :linkId="link.id"
216 |             @data="data = $event"
217 |             @close="openCropper = false"
218 |         />
219 |     </div>
220 | </template>
221 | 
222 | <script setup>
223 | import { useUserStore } from '~~/stores/user';
224 | import { storeToRefs } from 'pinia';
225 | const userStore = useUserStore()
226 | const { isMobile, updatedLinkId } = storeToRefs(userStore)
227 | 
228 | const props = defineProps({
229 |     link: Object,
230 |     selectedId: { type: Number, default: 0 },
231 |     selectedStr: { type: String, default: '' },
232 | })
233 | const { link, selectedId, selectedStr } = toRefs(props)
234 | 
235 | const emit = defineEmits(['updatedInput'])
236 | 
237 | let name = ref('')
238 | let url = ref('')
239 | let data = ref(null)
240 | let isDelete = ref(false)
241 | let openCropper = ref(false)
242 | let isUploadImage = ref(false)
243 | 
244 | onMounted(() => {
245 |     name.value = link.value.name
246 |     url.value = link.value.url
247 | 
248 |     document.addEventListener('mouseup', function(e) {
249 |         let editNameInput = document.getElementById(`editNameInput-${link.value.id}`)
250 |         if (
251 |             editNameInput &&
252 |             !editNameInput.contains(e.target) && 
253 |             selectedStr.value == 'isName' && 
254 |             link.value.id == selectedId.value
255 |         ) { 
256 |             editNameInput.blur() 
257 |             emit('updatedInput', { id: 0, str: '' })
258 |         }
259 |     });
260 | 
261 |     document.addEventListener('mouseup', function(e) {
262 |         let editLinkInput = document.getElementById(`editLinkInput-${link.value.id}`)
263 |         if (
264 |             editLinkInput &&
265 |             !editLinkInput.contains(e.target) && 
266 |             selectedStr.value == 'isLink' && 
267 |             link.value.id == selectedId.value
268 |         ) {
269 |             editLinkInput.blur() 
270 |             emit('updatedInput', { id: 0, str: '' })
271 |         }
272 |     });
273 | })
274 | 
275 | const updateLink = useDebounce(async () => {
276 |     try {
277 |         await userStore.updateLink(link.value.id, name.value, url.value)
278 |         await userStore.getAllLinks()
279 |     } catch (error) {
280 |         console.log(error)
281 |         errors.value = error.response.data.errors
282 |     }
283 | }, 500)
284 | 
285 | const changeInput = (str, linkIdNameString) => {
286 |     if (selectedId.value == link.value.id && selectedStr.value == str) {
287 |         setTimeout(() => {
288 |             document.getElementById(`${linkIdNameString}-${link.value.id}`).focus()
289 |             return 
290 |         }, 100)
291 |     }
292 | }
293 | 
294 | const editName = (selectedId, selectedStr) => {
295 |     if (userStore.isMobile) {
296 |         userStore.updatedLinkId = selectedId
297 |         return false
298 |     } else if (selectedId == link.value.id && selectedStr == 'isName') {
299 |         return true
300 |     }
301 |     return false
302 | }
303 | 
304 | const editLink = (selectedId, selectedStr) => {
305 |     if (userStore.isMobile) {
306 |         userStore.updatedLinkId = selectedId
307 |         return false
308 |     } else if (selectedId == link.value.id && selectedStr == 'isLink') {
309 |         return true
310 |     }
311 |     return false
312 | }
313 | 
314 | const editImage = () => {
315 |     if (userStore.isMobile) {
316 |         userStore.updatedLinkId = link.value.id
317 |     } else  {
318 |         isUploadImage.value = true;
319 |         isDelete.value = false;
320 |     }
321 | }
322 | 
323 | const updateLinkImage = async () => {
324 |     try {
325 |         await userStore.updateLinkImage(data.value)
326 |         await userStore.getAllLinks()
327 |         setTimeout(() => openCropper.value = false, 300)
328 |     } catch (error) {
329 |         console.log(error)
330 |     }
331 | }
332 | 
333 | const deleteLink = async () => {
334 |     let res = confirm('Are you sure you want to delete this link?')
335 |     try {
336 |         if (res) {
337 |             await userStore.deleteLink(link.value.id)
338 |             await userStore.getAllLinks()
339 |         }
340 |     } catch (error) {
341 |         console.log(error)
342 |     }
343 | }
344 | 
345 | watch(() => name.value, () => {
346 |     if (name.value && name.value !== link.value.name) {
347 |         updateLink()
348 |     }
349 | })
350 | 
351 | watch(() => url.value, () => {
352 |     if (url.value && url.value !== link.value.url) {
353 |         updateLink()
354 |     }
355 | })
356 | 
357 | watch(() => selectedId.value, () => {
358 |     if (selectedId.value) {
359 |         changeInput('isName', 'editNameInput')
360 |         changeInput('isLink', 'editLinkInput')
361 |     }
362 | })
363 | 
364 | watch(() => selectedStr.value, () => {
365 |     if (selectedStr.value) {
366 |         changeInput('isName', 'editNameInput')
367 |         changeInput('isLink', 'editLinkInput')
368 |     }
369 | })
370 | 
371 | watch(() => updatedLinkId.value, (val) => {
372 |     if (!val) {
373 |         emit('updatedInput', { id: 0, str: '' })
374 |     }
375 | })
376 | 
377 | watch(() => data.value, async () => await updateLinkImage())
378 | </script>
379 | 


--------------------------------------------------------------------------------