Feat/landing fixes (#3003)

* fix: restore icons * feat: add new padding sizes, update font-sizes * feat: save stars response to the session storage; refactor * fix: align items * fix: update repo url * fix: padding for the docs header
epicmaxco · Feb 16, 2023 · 1aff3a2 · 1aff3a2
1 parent c4a4d4e
commit 1aff3a2
Show file tree

Hide file tree

Showing 10 changed files with 240 additions and 40 deletions.
diff --git a/packages/docs/components/landing/Admin.vue b/packages/docs/components/landing/Admin.vue
@@ -170,6 +170,8 @@ import LandingStarsButton from './StarsButton.vue'
     padding-top: 1.5rem;
 
     &--button {
+      --va-button-content-px: 1.5rem;
+
       @include button-font();
       @include md(margin-bottom, 1rem);
       @include md(justify-content, center);

diff --git a/packages/docs/components/landing/Customize.vue b/packages/docs/components/landing/Customize.vue
@@ -614,11 +614,19 @@ const copyText = () => {
       @include col();
       @include size(3);
 
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
       // lg
       @include size-lg(6);
       @include lg(padding-bottom, 1rem);
       // sm
       @include size-sm(12);
+
+      .va-slider {
+        width: 100%;
+      }
     }
   }
 }
@@ -669,6 +677,7 @@ const copyText = () => {
 .code {
   @include code-font();
 
+  font-size: 1rem;
   color: #ffffff;
   line-height: 1.4;
   white-space: pre;

diff --git a/packages/docs/components/landing/Footer.vue b/packages/docs/components/landing/Footer.vue
@@ -5,30 +5,51 @@
   >
     <div class="footer__wrapper">
       <div class="footer__inner">
-        <LandingEpicmaxBanner style="margin-bottom: 1.5rem;" />
+        <LandingEpicmaxBanner style="margin-bottom: 2rem;" />
         <div class="footer__buttons">
           <va-button
             class="footer__buttons__button"
             href="https://epicmax.co/about"
             target="blank"
             preset="plain"
+            size="large"
           >
+            <template #prepend>
+              <va-icon
+                class="button-icon"
+                :component="IconEpicmaxRaw"
+              />
+            </template>
             {{ $t("landing.footer.buttons.epicmax") }}
           </va-button>
           <va-button
             class="footer__buttons__button"
             href="https://github.com/epicmaxco/vuestic-admin"
             target="blank"
             preset="plain"
+            size="large"
           >
+            <template #prepend>
+              <va-icon
+                class="button-icon"
+                :component="IconAdminRaw"
+              />
+            </template>
             {{ $t("landing.footer.buttons.admin") }}
           </va-button>
           <va-button
             class="footer__buttons__button"
             href="https://github.com/epicmaxco/epic-spinners"
             target="blank"
             preset="plain"
+            size="large"
           >
+            <template #prepend>
+              <va-icon
+                class="button-icon"
+                :component="IconSpinnersRaw"
+              />
+            </template>
             {{ $t("landing.footer.buttons.spinners") }}
           </va-button>
         </div>
@@ -86,7 +107,13 @@
 </template>
 
 <script lang="ts" setup>
+import {markRaw} from 'vue'
+
 import { useColors, useElementTextColor } from 'vuestic-ui'
+
+import IconEpicmax from './icons/IconEpicmax.vue'
+import IconAdmin from './icons/IconAdmin.vue'
+import IconSpinners from './icons/IconSpinners.vue'
 import LandingEpicmaxBanner from './EpicmaxBanner.vue'
 // import LandingNewsBanner from './NewsBanner.vue'
 
@@ -95,6 +122,10 @@ const { getComputedColor } = useColors()
 const textColor = useElementTextColor('background-primary')
 const primaryColor = getComputedColor('primary')
 const currentYear = new Date().getFullYear()
+
+const IconEpicmaxRaw = markRaw(IconEpicmax)
+const IconAdminRaw = markRaw(IconAdmin)
+const IconSpinnersRaw = markRaw(IconSpinners)
 </script>
 
 <style lang="scss" scoped>
@@ -149,36 +180,33 @@ const currentYear = new Date().getFullYear()
     @include size(8);
     @include shift-left(2);
 
-    display: flex;
     justify-content: center;
     align-items: center;
-
-    // lg
-    @include size-lg(10);
-    @include shift-lg-left(1);
-    // md
-    @include size-md(4);
-    @include shift-md-left(4);
-    // sm
-    @include size-md(6);
-    @include shift-md-left(3);
-    // xs
-    @include size-xs(12);
-    @include shift-xs-left(0);
+    margin: 0 auto;
 
     &__button {
+      --va-button-font-size: 1.2rem;
+
       @include col();
       @include size(4);
       @include button-font();
 
       // md
-      @include size-md(12);
       @include md(margin-bottom, 1rem);
 
-      .button-icon {
-        margin-right: 0.5rem;
+      width: auto;
+
+      .va-icon {
+        margin-right: 0.75rem;
       }
     }
+
+    &__button + &__button {
+      margin-left: 3rem;
+
+      @include md(margin-left, 1rem);
+      @include sm(margin-left, 1rem);
+    }
   }
 
   &__social {

diff --git a/packages/docs/components/landing/Header.vue b/packages/docs/components/landing/Header.vue
@@ -156,7 +156,7 @@
             </div>
 
             <div class="stars-button-wrapper">
-              <landing-stars-button repo="epicmaxco/vuestic-admin" />
+              <landing-stars-button repo="epicmaxco/vuestic-ui" />
             </div>
           </va-list>
         </nav>

diff --git a/packages/docs/components/landing/Preview.vue b/packages/docs/components/landing/Preview.vue
@@ -18,7 +18,6 @@
 
           <va-button
             preset="secondary"
-            size="large"
             href="https://github.com/epicmaxco/vuestic-ui"
             target="_blank"
             class="preview__buttons--button"
@@ -179,6 +178,7 @@ const textColor = useElementTextColor('background-primary')
     padding-top: 1.5rem;
 
     &--button {
+      --va-button-content-px: 1.5rem;
       --va-button-font-size: 1.1rem;
 
       @include button-font();
@@ -188,8 +188,7 @@ const textColor = useElementTextColor('background-primary')
     }
 
     &--button:nth-child(1) {
-      margin-right: 2rem;
-      padding: 0 3rem;
+      margin-right: 1rem;
 
       @include xs(margin-right, 0);
     }

diff --git a/packages/docs/components/landing/StarsButton.vue b/packages/docs/components/landing/StarsButton.vue
@@ -1,14 +1,30 @@
 <template>
-  <va-button
-    class="stars-button"
-    target="blank"
-    :href="url"
-    color="textPrimary"
-    size="small"
-    icon="star_empty"
-  >
-    {{ stars }}
-  </va-button>
+  <client-only>
+    <va-button
+      :href="url"
+      size="small"
+      target="blank"
+      color="textPrimary"
+      class="stars-button"
+    >
+      <template #prepend>
+        <va-icon
+          name="star_empty"
+          size="small"
+        />
+      </template>
+      {{ stars }}
+    </va-button>
+
+    <template #fallback>
+      <va-button
+        loading
+        size="small"
+        color="textPrimary"
+        class="stars-button"
+      />
+    </template>
+  </client-only>
 </template>
 
 <script lang="ts">
@@ -21,11 +37,20 @@ export default defineComponent({
     repo: { type: String, required: true },
   },
   setup (props) {
-    const stars = ref('57')
+    const stars = ref('Star')
     const apiUrl = `https://api.github.com/repos/${props.repo}`
     const url = `https://github.com/${props.repo}`
 
+    const getStarsStorageKey = (repo: string) => `stars_${repo}`
+
     onBeforeMount(async () => {
+      const storedStars = window.sessionStorage.getItem(getStarsStorageKey(props.repo))
+
+      if (storedStars) {
+        stars.value = storedStars
+        return
+      }
+
       try {
         const rawResponse = await fetch(apiUrl)
         const response = await rawResponse.json()
@@ -42,14 +67,13 @@ export default defineComponent({
         }
 
         stars.value = response.stargazers_count
+        window.sessionStorage.setItem(getStarsStorageKey(props.repo), response.stargazers_count)
       } catch (error) {
         console.log(error)
       }
     })
 
-    return {
-      stars, url,
-    }
+    return { url, stars }
   },
 })
 </script>
@@ -59,8 +83,7 @@ export default defineComponent({
 
 .stars-button {
   .va-icon {
-    @include sm(padding-right, 0.25rem);
-    @include xs(padding-right, 0.25rem);
+    padding-right: 0.25rem;
   }
 }
 </style>
diff --git a/packages/docs/components/landing/icons/IconAdmin.vue b/packages/docs/components/landing/icons/IconAdmin.vue
@@ -0,0 +1,42 @@
+<template>
+  <svg
+    width="25"
+    height="24"
+    viewBox="0 0 25 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect
+      x="2.5"
+      y="19"
+      width="20"
+      height="2"
+      rx="1"
+      :fill="colors.primary"
+    />
+    <path
+      d="M4 14C4 13.4477 4.44772 13 5 13C5.55228 13 6 13.4477 6 14V16C6 16.5523 5.55228 17 5 17C4.44772 17 4 16.5523 4 16V14Z"
+      :fill="colors.primary"
+    />
+    <path
+      d="M14 10C14 9.44772 14.4477 9 15 9C15.5523 9 16 9.44772 16 10V16C16 16.5523 15.5523 17 15 17C14.4477 17 14 16.5523 14 16V10Z"
+      :fill="colors.primary"
+    />
+    <path
+      d="M9 6.5C9 5.94772 9.44772 5.5 10 5.5C10.5523 5.5 11 5.94772 11 6.5V16C11 16.5523 10.5523 17 10 17C9.44772 17 9 16.5523 9 16V6.5Z"
+      :fill="colors.primary"
+    />
+    <path
+      d="M19 3.5C19 2.94771 19.4477 2.5 20 2.5C20.5523 2.5 21 2.94772 21 3.5V16C21 16.5523 20.5523 17 20 17C19.4477 17 19 16.5523 19 16V3.5Z"
+      :fill="colors.primary"
+    />
+  </svg>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useColors } from 'vuestic-ui/src/composables'
+
+const { getColors } = useColors()
+const colors = computed(getColors)
+</script>
diff --git a/packages/docs/components/landing/icons/IconEpicmax.vue b/packages/docs/components/landing/icons/IconEpicmax.vue
@@ -0,0 +1,46 @@
+<template>
+  <svg
+    width="25"
+    height="24"
+    viewBox="0 0 25 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M22.5 2.5H4.5L7.5 7L6.5 16H10L9 22L22.5 2.5Z"
+      :stroke="colors.primary"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M15.9998 3.5L14 11"
+      :stroke="colors.primary"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M11 7H14"
+      :stroke="colors.primary"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M10.5 11H11.5H16"
+      :stroke="colors.primary"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useColors } from 'vuestic-ui/src/composables'
+
+const { getColors } = useColors()
+const colors = computed(getColors)
+</script>