docs: create new homepage

packages/docs/auto-imports.d.ts

@@ -172,6 +172,9 @@ declare global {
   export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
   // @ts-ignore
+  export type { CodeSection } from './src/composables/playground'
+  import('./src/composables/playground')
+  // @ts-ignore
   export type { Category } from './src/stores/app'
   import('./src/stores/app')
   // @ts-ignore

packages/docs/components.d.ts

@@ -99,7 +99,6 @@ declare module 'vue' {
     DocMadeWithVueAttribution: typeof import('./src/components/doc/MadeWithVueAttribution.vue')['default']
     DocMadeWithVuetifyGallery: typeof import('./src/components/doc/MadeWithVuetifyGallery.vue')['default']
     DocMadeWithVuetifyLink: typeof import('./src/components/doc/MadeWithVuetifyLink.vue')['default']
-    DocPremiumThemesGallery: typeof import('./src/components/doc/PremiumThemesGallery.vue')['default']
     DocReadyForMore: typeof import('./src/components/doc/ReadyForMore.vue')['default']
     DocRelatedPage: typeof import('./src/components/doc/RelatedPage.vue')['default']
     DocRelatedPages: typeof import('./src/components/doc/RelatedPages.vue')['default']
@@ -119,13 +118,32 @@ declare module 'vue' {
     FeaturesSassApi: typeof import('./src/components/features/SassApi.vue')['default']
     GettingStartedWireframeExamples: typeof import('./src/components/getting-started/WireframeExamples.vue')['default']
     HomeActionBtns: typeof import('./src/components/home/ActionBtns.vue')['default']
+    HomeBgGradient: typeof import('./src/components/home/BgGradient.vue')['default']
+    HomeBlogs: typeof import('./src/components/home/Blogs.vue')['default']
+    HomeComponentGallery: typeof import('./src/components/home/ComponentGallery.vue')['default']
+    HomeDiscord: typeof import('./src/components/home/Discord.vue')['default']
+    HomeEcosystem: typeof import('./src/components/home/Ecosystem.vue')['default']
     HomeEntry: typeof import('./src/components/home/Entry.vue')['default']
     HomeEpicmaxSupport: typeof import('./src/components/home/EpicmaxSupport.vue')['default']
-    HomeFeatures: typeof import('./src/components/home/Features.vue')['default']
     HomeFooter: typeof import('./src/components/home/Footer.vue')['default']
+    HomeGalleryChatChat: typeof import('./src/components/home/Gallery/Chat/Chat.vue')['default']
+    HomeGalleryChatDetail: typeof import('./src/components/home/Gallery/Chat/Detail.vue')['default']
+    HomeGalleryChatInbox: typeof import('./src/components/home/Gallery/Chat/Inbox.vue')['default']
+    HomeGalleryChatList: typeof import('./src/components/home/Gallery/Chat/List.vue')['default']
+    HomeGalleryComponentGallery: typeof import('./src/components/home/Gallery/ComponentGallery.vue')['default']
+    HomeGalleryComponents: typeof import('./src/components/home/Gallery/Components.vue')['default']
+    HomeGalleryData: typeof import('./src/components/home/Gallery/Data.vue')['default']
+    HomeGalleryForm: typeof import('./src/components/home/Gallery/Form.vue')['default']
+    HomeGallerySelection: typeof import('./src/components/home/Gallery/Selection.vue')['default']
     HomeLogo: typeof import('./src/components/home/Logo.vue')['default']
+    HomeMarquee: typeof import('./src/components/home/Marquee.vue')['default']
+    HomeSnips: typeof import('./src/components/home/Snips.vue')['default']
     HomeSpecialSponsor: typeof import('./src/components/home/SpecialSponsor.vue')['default']
     HomeSponsors: typeof import('./src/components/home/Sponsors.vue')['default']
+    HomeStore: typeof import('./src/components/home/Store.vue')['default']
+    HomeSupport: typeof import('./src/components/home/Support.vue')['default']
+    HomeTooling: typeof import('./src/components/home/Tooling.vue')['default']
+    HomeVuetifyOne: typeof import('./src/components/home/VuetifyOne.vue')['default']
     IconsChevronDown: typeof import('./src/components/icons/ChevronDown.vue')['default']
     IntroductionComparison: typeof import('./src/components/introduction/Comparison.vue')['default']
     IntroductionConsultingServices: typeof import('./src/components/introduction/ConsultingServices.vue')['default']

packages/docs/src/components/app/Markup.vue

@@ -53,18 +53,18 @@
             <v-btn
               v-if="isHovering"
               :key="icon"
+              :icon="needsPlaygroundLink ? '$vuetify-play' : '$vuetify-bin'"
               class="text-disabled me-12 mt-2 app-markup-btn position-absolute right-0 top-0"
               density="comfortable"
-              icon="$vuetify-bin"
               size="small"
               v-bind="activatorProps"
               variant="text"
-              @click="bin"
+              @click="openCode"
             />
           </v-fade-transition>
         </template>
 
-        <span>{{ t('open-in-vuetify-bin') }}</span>
+        <span>{{ t(needsPlaygroundLink ? 'open-in-playground' : 'open-in-vuetify-bin') }}</span>
       </v-tooltip>
 
       <div class="pa-4 pe-12">
@@ -97,7 +97,10 @@
 
   const props = defineProps({
     resource: String,
-    code: null,
+    code: {
+      type: [String, Array] as PropType<string | CodeSection[]>,
+      default: '',
+    },
     inline: Boolean,
     language: {
       type: String,
@@ -130,16 +133,35 @@
   const root = ref<ComponentPublicInstance>()
 
   const highlighted = shallowRef('')
-  watchEffect(async () => {
-    highlighted.value = props.code && props.language && Prism.highlight(await props.code, Prism.languages[props.language], props.language)
-  })
 
   const className = computed(() => `language-${props.language}`)
   const icon = computed(() => clicked.value ? 'mdi-check' : 'mdi-clipboard-text-outline')
 
-  async function bin () {
+  const needsPlaygroundLink = computed(() => Array.isArray(props.code))
+
+  const displayedCode = computed(() => {
+    if (typeof props.code === 'string') {
+      return props.code
+    }
+
+    return props.code.map((section: CodeSection) => section.content).join('\n\n')
+  })
+
+  watchEffect(async () => {
+    highlighted.value = displayedCode.value && props.language && Prism.highlight(await displayedCode.value, Prism.languages[props.language], props.language)
+  })
+
+  function openCode () {
+    if (needsPlaygroundLink.value) {
+      openPlayground()
+    } else {
+      openBin()
+    }
+  }
+
+  async function openBin () {
     const el = root.value?.$el.querySelector('code')
-    const code = props.code || el?.innerText || ''
+    const code = displayedCode.value || el?.innerText || ''
     const language = props.language || 'markdown'
     const title = props.resource
 
@@ -148,10 +170,18 @@
     window.open(compressed, '_blank')
   }
 
+  async function openPlayground () {
+    if (typeof props.code === 'string') return
+
+    const url = usePlayground(props.code)
+
+    window.open(url, '_blank')
+  }
+
   async function copy () {
     const el = root.value?.$el.querySelector('code')
 
-    navigator.clipboard.writeText(props.code || el?.innerText || '')
+    navigator.clipboard.writeText(displayedCode.value || el?.innerText || '')
 
     clicked.value = true
 

packages/docs/src/components/home/BgGradient.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="v-bg position-absolute top-0 right-0 left-0 bottom-0">
+    <div
+      :class="{
+        [`bg-${props.color || defaultColor}`]: true,
+        [props.opacityClass]: true,
+      }"
+      aria-hidden="true"
+      class="overflow-hidden w-100 h-100"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  const theme = useTheme()
+
+  const props = defineProps({
+    color: {
+      type: String,
+    },
+    opacityClass: {
+      type: String,
+      default: 'opacity-20',
+    },
+  })
+
+  const defaultColor = computed(() => {
+    return theme.current.value.dark ? 'grey-darken-3' : 'blue-grey-lighten-3'
+  })
+</script>
+
+<style scoped>
+  .v-bg {
+    filter: blur(100px);
+    pointer-events: none;
+  }
+
+  .v-bg > div {
+    background: rgb(var(--v-theme-primary));
+    z-index: -10;
+    clip-path: polygon(
+      0% 0%,
+      100% 0%,
+      100% 40%,
+      0% 40%
+    )
+  }
+</style>