Merge pull request #65 from nyomansunima/64-feature-contact

✅ fix: add all feature

apps/web/app.vue

@@ -8,10 +8,10 @@
 
 <script setup lang="ts">
 useHead({
-  titleTemplate: '%s - Nyoman Sunima',
+  titleTemplate: '%s | Nyoman Sunima',
   bodyAttrs: {
     class:
-      'font-sans font-medium text-base leading-normal text-black bg-white dark:bg-black'
+      'font-sans font-medium text-base leading-normal text-black dark:text-gray-100 bg-white dark:bg-black'
   }
 })
 </script>

apps/web/assets/styles/globals.css

@@ -6,34 +6,32 @@
 /* from `Gilroy` */
 @font-face {
   font-family: 'Gilroy';
-  src: local('Gilroy'), url(~/assets/fonts/gilroy/regular.woff2) format('woff2');
+  src: local('Gilroy'), url(/fonts/gilroy/regular.woff2) format('woff2');
   font-weight: 400;
 }
 @font-face {
   font-family: 'Gilroy';
-  src: local('Gilroy'), url(~/assets/fonts/gilroy/medium.woff2) format('woff2');
+  src: local('Gilroy'), url(/fonts/gilroy/medium.woff2) format('woff2');
   font-weight: 500;
 }
 @font-face {
   font-family: 'Gilroy';
-  src: local('Gilroy'),
-    url(~/assets/fonts/gilroy/semibold.woff2) format('woff2');
+  src: local('Gilroy'), url(/fonts/gilroy/semibold.woff2) format('woff2');
   font-weight: 600;
 }
 @font-face {
   font-family: 'Gilroy';
-  src: local('Gilroy'), url(~/assets/fonts/gilroy/bold.woff2) format('woff2');
+  src: local('Gilroy'), url(/fonts/gilroy/bold.woff2) format('woff2');
   font-weight: 700;
 }
 @font-face {
   font-family: 'Gilroy';
-  src: local('Gilroy'),
-    url(~assets/fonts/gilroy/extrabold.woff2) format('woff2');
+  src: local('Gilroy'), url(/fonts/gilroy/extrabold.woff2) format('woff2');
   font-weight: 800;
 }
 @font-face {
   font-family: 'Gilroy';
-  src: local('Gilroy'), url(~assets/fonts/gilroy/black.woff2) format('woff2');
+  src: local('Gilroy'), url(/fonts/gilroy/black.woff2) format('woff2');
   font-weight: 900;
 }
 

apps/web/components/base/button/IconButton.vue

@@ -2,7 +2,7 @@
   <button
     @click.prevent="$emit('click')"
     class="flex justify-center items-center"
-    :class="class"
+    :class="$props.class"
     :type="type"
   >
     <slot />
@@ -16,7 +16,7 @@ interface IconButtonProps extends BaseButtonProps {}
 const { type = 'button' } = defineProps<IconButtonProps>()
 
 interface IconButtonEmits extends BaseButtonEmits {}
-const emit = defineEmits<BaseButtonEmits>()
+defineEmits<IconButtonEmits>()
 </script>
 
 <style scoped>

apps/web/components/base/button/OutlineButton.vue

@@ -1,7 +1,7 @@
 <template>
   <button
-    @click.prevent="$emit('click')"
-    class="flex justify-center items-center h-16 rounded-full px-8 text-lg font-medium gap-3 border border-gray-100"
+    @click="link ? viewLink() : $emit('click')"
+    class="flex justify-center items-center h-16 rounded-full px-8 text-lg font-medium gap-3 border border-gray-100 dark:border-gray-600"
     :class="class"
     :type="type"
   >
@@ -13,10 +13,18 @@
 import { BaseButtonProps, BaseButtonEmits } from '~/types/component'
 
 interface OutlineButtonProps extends BaseButtonProps {}
-const { type = 'button' } = defineProps<OutlineButtonProps>()
+const { type = 'button', link } = defineProps<OutlineButtonProps>()
 
 interface OutlineButtonEmits extends BaseButtonEmits {}
-const emit = defineEmits<BaseButtonEmits>()
+defineEmits<OutlineButtonEmits>()
+
+const viewLink = () => {
+  if (link?.includes('https://') || link?.includes('http://')) {
+    window.open(link)
+  } else {
+    navigateTo(link)
+  }
+}
 </script>
 
 <style scoped>

apps/web/components/base/footer/MainFooter.vue

@@ -0,0 +1,56 @@
+<template>
+  <footer
+    class="flex flex-col border-t border-t-gray-100 dark:border-t-gray-900"
+  >
+    <!-- menus -->
+    <div class="grid grid-cols-4 container mx-auto px-28 mt-32">
+      <div
+        class="flex flex-col col-span-1"
+        v-for="section in footerMenus"
+        :key="section.headline"
+      >
+        <h4 class="flex text-2xl">{{ section.headline }}</h4>
+        <ul class="flex flex-col gap-5 mt-10">
+          <li class="flex text-lg" v-for="menu in section.menus">
+            <NuxtLink :to="menu.link">{{ menu.label }}</NuxtLink>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- credit -->
+    <div
+      class="flex items-center px-10 py-6 border-t border-t-gray-100 dark:border-t-gray-900 mt-60"
+    >
+      <span>Copyright &copy; {{ currentYear }} - Alright Reserved</span>
+
+      <div class="flex flex-1"></div>
+
+      <div class="flex items-center">
+        <ul class="flex list-none gap-10">
+          <li
+            class="transition-all duration-300 hover:-translate-y-1 cursor-pointer"
+            v-for="social in socials"
+            :key="social.label"
+          >
+            <NuxtLink
+              :to="social.url"
+              external
+              target="_blank"
+              class="flex justify-center items-center text-2xl"
+            >
+              <i class="" :class="social.icon"></i>
+            </NuxtLink>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script setup lang="ts">
+import { socials } from '~/contents/social.json'
+import { footer as footerMenus } from '~/contents/menu.json'
+
+const currentYear = computed(() => new Date().getFullYear())
+</script>

apps/web/components/base/header/MainHeader.vue

@@ -0,0 +1,33 @@
+<template>
+  <header
+    class="flex items-center fixed z-10 top-0 inset-x-0 bg-white dark:bg-black px-10 py-3 border-b border-gray-100 dark:border-b-gray-900"
+  >
+    <!-- brands -->
+    <NuxtLink
+      to="/"
+      class="flex items-center h-10 w-10 transition-all duration-300 hover:scale-95 dark:bg-white rounded-full dark:p-2"
+    >
+      <NuxtImg src="/images/logo.png" class="flex w-full h-full" />
+    </NuxtLink>
+
+    <!-- menus -->
+    <div class="flex flex-1"></div>
+    <div class="flex mr-16">
+      <ul class="flex items-center gap-10">
+        <li
+          v-for="menu in header"
+          :key="menu.path"
+          class="font-medium transition-all duration-300 hover:-translate-y-1"
+        >
+          <NuxtLink class="" :to="menu.path">{{ menu.label }}</NuxtLink>
+        </li>
+      </ul>
+    </div>
+
+    <IconButton><i class="fi fi-rr-box-heart text-xl"></i></IconButton>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { header } from '~/contents/menu.json'
+</script>

apps/web/components/base/input/AreaTextInput.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="flex flex-col w-full">
+    <label :for="`${name}-input`" v-show="label" class="flex">{{
+      label
+    }}</label>
+    <div
+      class="flex w-full py-5 items-center bg-white dark:bg-black min-h-[200px] rounded-3xl ring-1 ring-gray-100 dark:ring-gray-800 focus-within:ring-2 focus-within:ring-black focus-within:dark:ring-gray-700 transition-all duration-300 px-5"
+    >
+      <i :class="preIcon" v-show="preIcon"></i>
+      <textarea
+        v-model="value"
+        :name="name"
+        :id="`${name}-input`"
+        :placeholder="placeholder"
+        class="flex h-full flex-1 bg-transparent border-transparent outline-transparent ring-transparent focus:ring-transparent focus:border-transparent focus:outline-transparent text-base text-black dark:text-gray-400 placeholder:text-gray-600"
+      ></textarea>
+      <i :class="sufIcon" class="dark:text-gray-600" v-show="sufIcon"></i>
+    </div>
+
+    <span v-show="errorMessage" class="flex ml-3 mt-5">{{ errorMessage }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useField } from 'vee-validate'
+import { BaseInputProps } from '~/types/component'
+
+interface TextAreaInputProps extends BaseInputProps {}
+const props = defineProps<TextAreaInputProps>()
+const { errorMessage, value, setValue } = useField(() => props.name)
+if (props.value) {
+  setValue(props.value)
+}
+</script>

apps/web/components/base/input/FormInput.vue

@@ -0,0 +1,25 @@
+<template>
+  <form @submit.prevent="saveForm" class="flex flex-col">
+    <slot />
+  </form>
+</template>
+
+<script setup lang="ts">
+import { FormContext } from 'vee-validate'
+
+interface FormInputProps {
+  context: FormContext
+}
+const {
+  context: { handleSubmit }
+} = defineProps<FormInputProps>()
+
+interface FormInputEmits {
+  (e: 'save', formData: any): void
+}
+const emit = defineEmits<FormInputEmits>()
+
+const saveForm = handleSubmit((formData) => {
+  emit('save', formData)
+})
+</script>

apps/web/components/base/input/TextInput.vue

@@ -4,7 +4,7 @@
       label
     }}</label>
     <div
-      class="flex w-full items-center bg-white h-16 rounded-full ring-1 ring-gray-100 focus-within:ring-2 focus-within:ring-black transition-all duration-300 px-5"
+      class="flex w-full items-center bg-white dark:bg-black h-16 rounded-3xl ring-1 ring-gray-100 dark:ring-gray-800 focus-within:ring-2 focus-within:ring-black focus-within:dark:ring-gray-700 transition-all duration-300 px-5"
     >
       <i :class="preIcon" v-show="preIcon"></i>
       <input
@@ -13,12 +13,12 @@
         :id="`${name}-input`"
         type="text"
         :placeholder="placeholder"
-        class="flex h-full flex-1 bg-transparent border-transparent outline-transparent ring-transparent focus:ring-transparent focus:border-transparent focus:outline-transparent text-base text-black placeholder:text-gray-600"
+        class="flex h-full flex-1 bg-transparent border-transparent outline-transparent ring-transparent focus:ring-transparent focus:border-transparent focus:outline-transparent text-base text-black dark:text-gray-400 placeholder:text-gray-600"
       />
-      <i :class="sufIcon" v-show="sufIcon"></i>
+      <i :class="sufIcon" class="dark:text-gray-600" v-show="sufIcon"></i>
     </div>
 
-    <span v-show="errorMessage" class="flex">{{ errorMessage }}</span>
+    <span v-show="errorMessage" class="flex ml-3 mt-5">{{ errorMessage }}</span>
   </div>
 </template>
 

apps/web/components/blog/BlogFooter.vue

@@ -4,7 +4,7 @@
 
     <!-- credit -->
     <div
-      class="flex items-center justify-between px-10 py-8 border-t-2 border-t-gray-100"
+      class="flex items-center justify-between px-10 py-8 border-t-2 border-t-gray-100 dark:border-t-gray-900"
     >
       <span>Copyright &copy; {{ currentYear }} - Alright Reserved </span>
       <span class="flex items-center gap-3"

apps/web/components/blog/BlogHeader.vue

@@ -1,11 +1,11 @@
 <template>
   <header
-    class="flex fixed z-10 top-0 inset-x-0 bg-white bg-opacity-50 backdrop-blur-sm border-b border-b-gray-100 px-14 py-3"
+    class="flex fixed z-10 top-0 inset-x-0 bg-white dark:bg-black bg-opacity-50 backdrop-blur-sm border-b border-b-gray-100 dark:border-b-gray-800 px-14 py-3"
     s
   >
     <!-- branding -->
     <div class="flex items-center gap-2">
-      <NuxtLink to="/" class="h-10 w-10 relative">
+      <NuxtLink to="/" class="h-10 w-10 relative dark:bg-white rounded-full">
         <NuxtImg src="/images/logo.png" />
       </NuxtLink>
       <NuxtLink to="/blog" class="text-xl font-semibold">Blog</NuxtLink>

apps/web/components/blog/BlogPostItem.vue

@@ -9,7 +9,7 @@
     >
       <!-- categories -->
       <div
-        class="flex bg-white px-5 h-12 rounded-full gap-3 absolute right-5 top-5 justify-center items-center z-10"
+        class="flex bg-white dark:text-black px-5 h-12 rounded-full gap-3 absolute right-5 top-5 justify-center items-center z-10"
       >
         <span class="h-2 w-2 rounded-full bg-black"></span>
         <span class="text-base font-medium">{{ data.tag }}</span>

apps/web/components/blog/BlogTag.vue

@@ -2,9 +2,9 @@
   <button
     @click.prevent="viewTag"
     type="button"
-    class="font-medium px-5 py-3 rounded-full border border-gray-100 flex justify-center items-center gap-3 transition-all duration-300 hover:-translate-y-1"
+    class="font-medium px-5 py-3 rounded-full border border-gray-100 dark:border-gray-700 flex justify-center items-center gap-3 transition-all duration-300 hover:-translate-y-1"
   >
-    <span class="flex h-2 w-2 rounded-full bg-black"></span>
+    <span class="flex h-2 w-2 rounded-full bg-black dark:bg-gray-200"></span>
     {{ tag }}
   </button>
 </template>

apps/web/components/blog/filter/BlogFilterTagItem.vue

@@ -1,9 +1,9 @@
 <template>
   <button
-    class="flex bg-white h-14 rounded-full px-5 border border-gray-100 items-center gap-3"
+    class="flex bg-white dark:bg-black h-14 rounded-full px-5 border border-gray-100 dark:border-gray-700 items-center gap-3"
     type="button"
   >
-    <span class="h-2 w-2 rounded-full bg-black"></span>
+    <span class="h-2 w-2 rounded-full bg-black dark:bg-gray-600"></span>
     <span class="flex text-base">{{ tag }}</span>
   </button>
 </template>

apps/web/components/content/MarkdownContent.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-col prose prose-xl prose-headings:font-semibold marker:text-black mt-16 prose-img:w-full prose-img:rounded-3xl prose-img:overflow-hidden prose-pre:border prose-pre:rounded-2xl content prose-pre:font-mono text-black prose-li:my-0 prose-p:mt-1 mb-0"
+    class="flex flex-col prose prose-xl prose-headings:font-medium marker:text-black dark:marker:text-gray-100 mt-16 prose-img:w-full prose-img:rounded-3xl prose-img:overflow-hidden prose-pre:border prose-pre:dark:border-gray-800 prose-pre:rounded-2xl content prose-pre:font-mono text-black prose-li:my-0 prose-p:mt-1 mb-0 dark:text-gray-200 prose-headings:text-black dark:prose-headings:text-gray-200 dark:prose-invert"
     v-html="parsedMarkdown"
   ></div>
 </template>

apps/web/composables/useBrevo.ts

@@ -0,0 +1,29 @@
+import { defu } from 'defu'
+import { UseFetchOptions } from 'nuxt/app'
+
+/**
+ * # useBrevo
+ *
+ * the brevo client to connect with the
+ * brevo API.
+ *
+ * @param url the url to fething in brevo API
+ * @param options
+ * @returns AsyncData
+ */
+export function useBrevo<T>(url: string, options: UseFetchOptions<T> = {}) {
+  const baseUrl = `https://api.brevo.com/v3`
+  const {
+    public: { brevoApiKey }
+  } = useRuntimeConfig()
+
+  const defaults: UseFetchOptions<T> = {
+    baseURL: baseUrl,
+    key: url,
+    headers: {
+      'api-key': brevoApiKey
+    }
+  }
+  const params = defu(options, defaults)
+  return useFetch(url, params)
+}