docs: create new homepage (#22225)

Co-authored-by: John Leider <john@vuetifyjs.com>
Co-authored-by: J-Sek <J-Sek@users.noreply.github.com>
Co-authored-by: Kael <kaelwd@gmail.com>

Author: 4 people

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

@@ -100,7 +100,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,14 +118,32 @@ declare module 'vue' {
     FeaturesColorPalette: typeof import('./src/components/features/ColorPalette.vue')['default']
     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']
+    HomeBlogs: typeof import('./src/components/home/Blogs.vue')['default']
+    HomeCommonCard: typeof import('./src/components/home/Common/Card.vue')['default']
+    HomeCommonGradient: typeof import('./src/components/home/Common/Gradient.vue')['default']
+    HomeCommonMarquee: typeof import('./src/components/home/Common/Marquee.vue')['default']
+    HomeCommonTitle: typeof import('./src/components/home/Common/Title.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']
+    HomeGalleryAnalytics: typeof import('./src/components/home/Gallery/Analytics.vue')['default']
+    HomeGalleryChatChat: typeof import('./src/components/home/Gallery/Chat/Chat.vue')['default']
+    HomeGalleryChatDetail: typeof import('./src/components/home/Gallery/Chat/Detail.vue')['default']
+    HomeGalleryChatList: typeof import('./src/components/home/Gallery/Chat/List.vue')['default']
+    HomeGalleryComponents: typeof import('./src/components/home/Gallery/Components.vue')['default']
+    HomeGalleryDashboard: typeof import('./src/components/home/Gallery/Dashboard.vue')['default']
+    HomeGalleryLogin: typeof import('./src/components/home/Gallery/Login.vue')['default']
+    HomeGallerySettings: typeof import('./src/components/home/Gallery/Settings.vue')['default']
     HomeLogo: typeof import('./src/components/home/Logo.vue')['default']
+    HomeSnips: typeof import('./src/components/home/Snips.vue')['default']
+    HomeSnipsExample: typeof import('./src/components/home/SnipsExample.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/Alert.vue

@@ -3,7 +3,7 @@
     :border-color="type"
     :type="type"
     border="start"
-    class="v-alert--doc mb-4 border-opacity-100"
+    class="v-alert--doc my-4 border-opacity-100"
     variant="tonal"
   >
     <template #prepend>

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')
 
-    await navigator.clipboard.writeText(props.code || el?.innerText || '')
+    await navigator.clipboard.writeText(displayedCode.value || el?.innerText || '')
 
     clicked.value = true
 

packages/docs/src/components/app/bar/Bar.vue

@@ -18,7 +18,7 @@
     </template>
 
     <template #append>
-      <div v-if="mdAndUp" class="d-flex ga-1 pe-2">
+      <div v-if="showExtraLinks" class="d-flex ga-1 pe-2">
         <AppBarBlogLink />
 
         <AppBarLearnMenu />
@@ -27,12 +27,12 @@
 
         <AppBarEcosystemMenu />
 
-        <AppBarPlaygroundLink v-if="lgAndUp" />
+        <AppBarPlaygroundLink v-if="showPlaygroundLink" />
 
-        <AppBarOneLink />
+        <AppBarOneLink class="ml-4" />
       </div>
 
-      <AppVerticalDivider v-if="mdAndUp" />
+      <AppVerticalDivider v-if="showExtraLinks" />
 
       <div class="d-flex ga-1">
         <AppBarStoreLink v-if="smAndUp" />
@@ -49,8 +49,9 @@
 
 <script setup>
   const app = useAppStore()
-  const { smAndUp, lgAndUp, mdAndDown, width } = useDisplay()
+  const { smAndUp, mdAndDown, width } = useDisplay()
   const route = useRoute()
 
-  const mdAndUp = computed(() => width.value >= 1077)
+  const showExtraLinks = computed(() => width.value >= 1052)
+  const showPlaygroundLink = computed(() => width.value >= 1220)
 </script>

packages/docs/src/components/app/bar/OneLink.vue

@@ -2,6 +2,7 @@
   <AppBtn
     :to="rpath('/one/')"
     color="primary"
+    rounded="lg"
     text="one"
     variant="outlined"
     @click="sweClick('app-bar', 'one', name)"