docs(nuxtjs): Update home hero (#432)

* docs(nuxtjs): Update home hero * fix: use onMounted for listening on mousemove * docs: update number of stars
nuxt-themes · Jun 15, 2021 · 1393bde · 1393bde
1 parent 47ae885
commit 1393bde
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 79 deletions.
diff --git a/nuxtjs.org/components/AButton.vue b/nuxtjs.org/components/AButton.vue
@@ -28,10 +28,6 @@ import { defineComponent, ref } from '@vue/composition-api'
 
 export default defineComponent({
   props: {
-    href: {
-      type: String,
-      default: null
-    },
     to: {
       type: [String, Object],
       default: null
@@ -94,7 +90,7 @@ export default defineComponent({
     props() {
       return {
         a: {
-          href: this.href,
+          href: this.to,
           target: this.target,
           rel: this.rel,
           ariaLabel: this.ariaLabel
@@ -111,8 +107,14 @@ export default defineComponent({
         }
       }[this.is]
     },
+    isExternal() {
+      if (!this.to) return false
+      const isInternal = typeof this.to !== 'string' || (this.to.startsWith('/') && this.to.startsWith('//') === false)
+
+      return !isInternal
+    },
     is() {
-      if (this.href) {
+      if (this.isExternal) {
         return 'a'
       } else if (this.to) {
         return 'NuxtLink'

diff --git a/nuxtjs.org/components/HeroDescription.vue b/nuxtjs.org/components/HeroDescription.vue
diff --git a/nuxtjs.org/components/HeroParallax.vue b/nuxtjs.org/components/HeroParallax.vue
@@ -52,7 +52,7 @@
 </template>
 
 <script>
-import { defineComponent, ref, onBeforeUnmount } from '@vue/composition-api'
+import { defineComponent, ref, onMounted, onBeforeUnmount } from '@vue/composition-api'
 
 export default defineComponent({
   setup() {
@@ -70,7 +70,7 @@ export default defineComponent({
       }
     }
 
-    window.addEventListener('mousemove', parallax)
+    onMounted(() => window.addEventListener('mousemove', parallax))
 
     onBeforeUnmount(() => window.removeEventListener('mousemove', parallax))
 

diff --git a/nuxtjs.org/components/HeroTemplate.vue b/nuxtjs.org/components/HeroTemplate.vue
@@ -7,8 +7,8 @@
           class="flex flex-col justify-start w-full px-4 pt-36 pb-52 md:pt-44 lg:pb-56 lg:pt-52 text-center"
           :class="{ 'lg:text-left xl:w-1/2': !contentCenter }"
         >
-          <slot name="title" />
-          <slot name="description" />
+          <Markdown slot="title" unwrap="p" />
+          <Markdown slot="description" />
           <div
             v-if="$slots.buttons"
             class="flex flex-wrap justify-center space-x-3 xl:space-x-4"

diff --git a/nuxtjs.org/components/HeroTitle.vue b/nuxtjs.org/components/HeroTitle.vue
diff --git a/nuxtjs.org/components/HomeHero.vue b/nuxtjs.org/components/HomeHero.vue
@@ -1,41 +1,69 @@
 <template>
-  <div class="overflow-hidden">
-    <HeroTemplate content-center class="mx-auto max-w-8xl">
-      <template #illustration>
-        <HeroParallax />
-      </template>
-
-      <template #title>
-        <HeroTitle class="mb-4">The Intuitive Vue <br />Framework</HeroTitle>
-      </template>
-
-      <template #description>
-        <HeroDescription class="mb-8 px-8 sm:px-0">
-          Build your next Vue.js application with confidence using NuxtJS.<br class="hidden sm:block" />An open source
-          framework making web development simple and powerful.
-        </HeroDescription>
-      </template>
-
-      <template #buttons>
-        <SectionButton
-          to="#"
-          aria-label="Get started"
-          size="md"
-          class="bg-primary-green text-gray-800 hover:bg-green-300 focus:bg-green-300"
-          icon-left="IconPlay"
-        >
-          Get started
-        </SectionButton>
-        <SectionButton
-          to="#"
-          aria-label="GitHub Stars"
-          size="md"
-          class="bg-white border rounded-md shadow-sm border-gray-700 text-gray-800 focus:bg-gray-200 hover:bg-gray-200"
-          icon-left="IconGitHub"
-        >
-          GitHub Stars
-        </SectionButton>
-      </template>
-    </HeroTemplate>
+  <div class="overflow-hidden relative mx-auto max-w-8xl">
+    <HeroParallax />
+    <div class="flex flex-wrap justify-center py-0 section">
+      <section class="flex flex-col justify-start w-full px-4 pt-36 pb-52 md:pt-44 lg:pb-56 lg:pt-52 text-center">
+        <h1 class="font-normal font-serif text-display-5 xs:text-display-4 md:text-display-3 2xl:text-display-2 mb-4">
+          <Markdown slot="title" unwrap="p" />
+        </h1>
+        <h2 class="font-normal text-body-base xs:text-body-lg md:text-body-xl 2xl:text-body-2xl mb-8 px-8 sm:px-0">
+          <Markdown slot="description" unwrap="p" />
+        </h2>
+        <div class="flex flex-wrap justify-center space-x-3 xl:space-x-4">
+          <SectionButton
+            :to="primary.url"
+            :aria-label="primary.text"
+            size="md"
+            class="bg-primary-green text-gray-800 hover:bg-green-300 focus:bg-green-300"
+            :icon-left="primary.icon"
+            >{{ primary.text }}</SectionButton
+          >
+          <SectionButton
+            :to="secondary.url"
+            :aria-label="secondary.text"
+            size="md"
+            class="
+              bg-white
+              border
+              rounded-md
+              shadow-sm
+              border-gray-700
+              text-gray-800
+              focus:bg-gray-200
+              hover:bg-gray-200
+            "
+            :icon-left="secondary.icon"
+            >{{ secondary.text }}</SectionButton
+          >
+        </div>
+      </section>
+    </div>
   </div>
 </template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+import { Markdown } from '~docus/utils'
+
+export default defineComponent({
+  components: { Markdown },
+  props: {
+    primary: {
+      type: Object,
+      default: () => ({
+        text: 'Get started',
+        url: '/get-started',
+        icon: 'IconPlay'
+      })
+    },
+    secondary: {
+      type: Object,
+      default: () => ({
+        text: 'Open on GitHub',
+        url: '/https://github.com',
+        icon: 'IconGitHub'
+      })
+    }
+  }
+})
+</script>
diff --git a/nuxtjs.org/components/SectionButton.vue b/nuxtjs.org/components/SectionButton.vue
@@ -2,7 +2,6 @@
   <AButton
     type="button"
     :aria-label="ariaLabel"
-    :href="href"
     :to="to"
     class="font-medium rounded-md"
     :class="[
@@ -30,13 +29,9 @@ export default defineComponent({
       type: String,
       required: true
     },
-    href: {
-      type: String,
-      default: null
-    },
     to: {
       type: [String, Object],
-      default: null
+      required: true
     },
     size: {
       type: String,

diff --git a/nuxtjs.org/content/index.md b/nuxtjs.org/content/index.md
@@ -5,6 +5,18 @@ layout:
 ---
 
 ::home-hero
+primary:
+  text: Get started
+  url: /docs/get-started/installation
+  icon: IconPlay
+secondary:
+  text: 36K+ GitHub stars
+  url: https://github.com/nuxt/nuxt.js
+  icon: IconGitHub
+---title
+The Intuitive Vue<br>Framework
+---description
+Build your next Vue.js application with confidence using NuxtJS.<br class="hidden sm:block" /> An open source framework making web development simple and powerful.
 ::
 
 ::home-discover