Merge pull request #11 from hfidelis/dev

dev>main (prod)

Author: hfidelis

package-lock.json

@@ -19,8 +19,12 @@
   "dependencies": {
     "@jamescoyle/vue-icon": "^0.1.2",
     "@mdi/js": "^7.4.47",
+    "@vavt/cm-extension": "^1.5.0",
+    "@vavt/v3-extension": "^1.2.4",
     "@vueuse/core": "^10.8.0",
     "floating-vue": "^5.2.2",
+    "markdown-it": "^14.1.0",
+    "md-editor-v3": "^4.18.1",
     "sass": "^1.71.0",
     "vue": "^3.4.15",
     "vue-i18n": "^9.9.1",

package.json

@@ -1,41 +1,20 @@
 <script lang="ts" setup>
 import { RouterView } from 'vue-router'
 
-import AppHeader from '@/components/Header/AppHeader.vue'
-import AppFooter from '@/components/Footer/AppFooter.vue'
+import AppHeader from '@/components/header/AppHeader.vue'
+import AppFooter from '@/components/footer/AppFooter.vue'
+import FadeTransition from '@/components/fade-transition/FadeTransition.vue'
 </script>
 
-<template>
-  <div>
-    <AppHeader />
-    <RouterView
-      v-slot="{
-        Component,
-        route
-      }"
-    >
-      <Transition
-        name="fade"
-        mode="out-in"
-      >
-        <component
-          :is="Component"
-          :key="route.path"
-        />
-      </Transition>
-    </RouterView>
-    <AppFooter />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.45s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-</style>
+<template>  
+  <AppHeader />
+  <RouterView v-slot="{ Component, route }">
+    <FadeTransition>
+      <component
+        :is="Component"
+        :key="route.path"
+      />
+    </FadeTransition>
+  </RouterView>
+  <AppFooter />
+</template>

src/App.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import AvatarBox from '@/components/AvatarBox/AvatarBox.vue'
+import AvatarBox from '@/components/avatar-box/AvatarBox.vue'
 
 const props = defineProps({
   name: {

src/components/ThemeToggle/ThemeToggle.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { useDark } from '@vueuse/core'
+
 import avatar from '@/assets/images/me.png'
 
 const isDark = useDark()

src/components/AuthorInfo/AuthorInfo.vue renamed to src/components/author-info/AuthorInfo.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { useDark } from '@vueuse/core'
+
+import isMobile from '@/helpers/isMobile'
+
+import {
+  mdiCreation,  
+} from '@mdi/js'
+
+const isDark = useDark()
+const router = useRouter()
+
+const redirectToBlog = () => {
+  router.push({ name: 'blog' })
+}
+</script>
+
+<template>
+  <button    
+    id="blog__button"
+    class="header__button"
+    :class="[
+      isDark ? 'dark' : 'light',
+      isMobile ? 'header__mobile__item' : '',
+    ]"
+    :aria-label="$t('components.blogButton.ariaLabel')"
+    @click="redirectToBlog"
+  >
+    <span>
+      {{ $t('components.blogButton.label') }}
+    </span>
+    <SvgIcon
+      :path="mdiCreation"
+      type="mdi"
+      size="30"
+    />
+  </button>
+</template>
+
+<style lang="scss" scoped >
+@import '@/styles/app.scss';
+
+#blog__button {
+  &.dark {
+    > svg {
+      color: #f5b11d;
+      filter: drop-shadow(0 0 0.75rem #f5b11d);
+      animation: dark-star-pulse 2s infinite, scale 1.5s infinite;
+    }
+  }
+
+  &.light{
+    > svg {
+      color: #c2880c;
+      filter: drop-shadow(0 0 0.75rem #c2880c);
+      animation: light-star-pulse 2s infinite, scale 1.5s infinite;
+    }
+  }
+}
+
+@keyframes scale {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.15);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes light-star-pulse {
+  0% {
+    filter: drop-shadow(0 0 0.75rem $star-dark);
+  }
+  50% {
+    filter: drop-shadow(0 0 0.75rem $star-light);
+  }
+  100% {
+    filter: drop-shadow(0 0 0.75rem $star-dark);
+  }
+}
+
+@keyframes dark-star-pulse {
+  0% {
+    filter: drop-shadow(0 0 0.75rem $star-light);
+  }
+  50% {
+    filter: drop-shadow(0 0 0.75rem $star-dark);
+  }
+  100% {
+    filter: drop-shadow(0 0 0.75rem $star-light);
+  }
+}
+</style>

src/components/AvatarBox/AvatarBox.vue renamed to src/components/avatar-box/AvatarBox.vue

@@ -0,0 +1,20 @@
+<template>
+  <Transition
+    name="fade"
+    mode="out-in"
+  >
+    <slot />
+  </Transition>
+</template>
+
+<style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.45s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

src/components/blog-button/BlogButton.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import { useDark } from '@vueuse/core'
-import FooterLink from '@/types/components/FooterLink/FooterLink.type'
+import FooterLink from '@/types/components/footer-link/FooterLink.type'
 
 const props = defineProps<FooterLink>()
 const isDark = useDark()
 
-const resolveLink = (link: string) => {
+const resolveLink = (link: string): void => {
   window.open(link, '_blank')
 }
 </script>

src/components/fade-transition/FadeTransition.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { useDark } from '@vueuse/core'
 
-import IconVue from '@/components/Icons/IconVue.vue'
-import IconGmail from '@/components/Icons/IconGmail.vue'
-import IconGithub from '@/components/Icons/IconGithub.vue'
-import IconLinkedin from '@/components/Icons/IconLinkedin.vue'
-import FooterLinkIcon from '@/components/FooterLinkIcon/FooterLinkIcon.vue'
-import FooterLink from '@/types/components/FooterLink/FooterLink.type'
+import IconVue from '@/components/icons/IconVue.vue'
+import IconGmail from '@/components/icons/IconGmail.vue'
+import IconGithub from '@/components/icons/IconGithub.vue'
+import IconLinkedin from '@/components/icons/IconLinkedin.vue'
+import FooterLinkIcon from '@/components/footer-link-icon/FooterLinkIcon.vue'
+import FooterLink from '@/types/components/footer-link/FooterLink.type'
 
 const isDark = useDark()
 

src/components/FooterLinkIcon/FooterLinkIcon.vue renamed to src/components/footer-link-icon/FooterLinkIcon.vue

@@ -5,19 +5,20 @@ import { RouterLink } from 'vue-router'
 import { mdiMenuOpen, mdiWindowClose } from '@mdi/js'
 
 import isMobile from '@/helpers/isMobile'
-import LocaleSelect from '@/components/LocaleSelect/LocaleSelect.vue'
-import ThemeToggle from '@/components/ThemeToggle/ThemeToggle.vue'
+import LocaleSelect from '@/components/locale-select/LocaleSelect.vue'
+import ThemeToggle from '@/components/theme-toggle/ThemeToggle.vue'
+import BlogButton from '@/components/blog-button/BlogButton.vue'
 
 const isDark = useDark()
-const isOpen = ref(false)
+const isOpen = ref<boolean>(false)
 
-const toggleOpen = () => {
+const toggleOpen = (): void => {
   isOpen.value = !isOpen.value
 }
 
 watch(
   () => isMobile.value,
-  (val) => {
+  (val: boolean): void => {
     if (val) {
       isOpen.value = false
     }
@@ -74,8 +75,9 @@ watch(
         v-if="!isMobile"
         class='actions__default'
       >
+        <BlogButton />
         <LocaleSelect />
-        <ThemeToggle />
+        <ThemeToggle />        
       </div>
       <Transition
         name="sidebar"
@@ -84,8 +86,9 @@ watch(
           v-if="isMobile && isOpen"
           class='actions__mobile'
         >
+          <BlogButton />
           <LocaleSelect />
-          <ThemeToggle />
+          <ThemeToggle />        
         </div>
       </Transition>
     </section>

src/components/Footer/AppFooter.vue renamed to src/components/footer/AppFooter.vue

@@ -3,8 +3,8 @@ import { ref } from 'vue'
 import { useDark } from '@vueuse/core'
 
 import Locale from '@/types/i18n/Locale'
-import LocaleOption from '@/components/LocaleSelect/LocaleOption/LocaleOption.vue'
-import LocaleValue from '@/types/components/LocaleSelect/LocaleValue.type'
+import LocaleOption from '@/components/locale-select/locale-option/LocaleOption.vue'
+import LocaleValue from '@/types/components/locale-select/LocaleValue.type'
 
 import ptBRFlag from '@/assets/flags/pt-BR.png'
 import enUSFlag from '@/assets/flags/en-US.png'

src/components/Header/AppHeader.vue renamed to src/components/header/AppHeader.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import LocaleValue from '@/types/components/LocaleSelect/LocaleValue.type'
+import LocaleValue from '@/types/components/locale-select/LocaleValue.type'
 
 const props = defineProps({
   option: {