chore: upgrade deps

docs/app.config.ts

@@ -1,11 +1,15 @@
 export default defineAppConfig({
+  github: {
+    owner: 'nuxt',
+    repo: 'content',
+    branch: 'main'
+  },
   docus: {
     title: 'Nuxt Content',
     description: 'Write pages in markdown, use Vue components and enjoy the power of Nuxt with a blazing fast developer experience.',
     layout: 'docs',
     image: 'https://content.nuxtjs.org/preview.png',
     url: 'https://content.nuxtjs.org',
-    debug: false,
     socials: {
       twitter: '@nuxt_js',
       github: 'nuxt/content'
@@ -23,26 +27,20 @@ export default defineAppConfig({
       level: 1
     },
     header: {
-      title: false,
-      logo: true,
+      logo: 'Logo',
       exclude: ['/v1', '/content-v1', '/fr', '/ja', '/ru']
     },
     footer: {
-      credits: {
-        icon: 'IconDocus',
-        text: 'Powered by Docus',
-        href: 'https://docus.com'
-      },
-      icons: [
+      iconLinks: [
         {
           label: 'NuxtJS',
           href: 'https://nuxtjs.org',
-          component: 'IconNuxt'
+          icon: 'IconNuxt'
         },
         {
           label: 'Vue Telescope',
           href: 'https://vuetelescope.com',
-          component: 'IconVueTelescope'
+          icon: 'IconVueTelescope'
         }
       ]
     }

docs/components/content/ChangeLog.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <GithubReleases v-slot="{releases}">
+      <div v-for="release in releases" :key="release.name" class="release">
+        <div class="release-name">
+          <h2 class="">
+            {{ release.name }}
+          </h2>
+        </div>
+        <div class="content">
+          <h3 class="sr-only">
+            Description
+          </h3>
+
+          <ContentRenderer :value="release">
+            <template #empty>
+              <p>
+                No description provided
+              </p>
+            </template>
+          </ContentRenderer>
+        </div>
+      </div>
+    </GithubReleases>
+  </div>
+</template>
+
+<style scoped lang="ts">
+css({
+  '.release': {
+    position: 'relative',
+    display: 'flex',
+    overflow: 'hidden',
+    flex: '1',
+    padding: '{space.4} {space.8}',
+    paddingBottom: '{space.8}',
+    overflowY: 'auto',
+  },
+  '.release-name': {
+    position: 'relative',
+    paddingTop: '{space.4}',
+    display: 'flex',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    gap: '{space.4}',
+    paddingBottom: '{space.4}',
+
+    'h2': {
+      fontSize: '{fontSizes.2xl}',
+      fontWeight: '{fontWeights.bold}',
+      color: '{colors.gray.900}',
+      marginTop: '{space.8}',
+      '@dark': {
+        color: '{colors.gray.100}'
+      }
+    }
+  },
+  '.content': {
+    paddingLeft: '{space.8}',
+    paddingRight: '{space.8}',
+    paddingBottom: '{space.24}',
+  }
+})
+</style>

docs/components/content/HeroAnnouncement.vue

@@ -12,8 +12,49 @@ defineProps({
 </script>
 
 <template>
-  <NuxtLink :to="to" class="hover:bg-primary-200 text-primary-900 bg-primary-100 transition dark:bg-transparent hover:dark:bg-primary-900 dark:border-primary-700 dark:text-primary-100 border border-primary-400 mb-8 px-4 py-2 rounded-md flex gap-x-1 inline-flex items-center justify-center">
-    <Icon name="heroicons-solid:sparkles" class="h-4 w-4" />
-    <span class="font-medium text-sm">{{ label }}</span>
+  <NuxtLink :to="to" class="link">
+    <Icon name="heroicons-solid:sparkles" class="icon" />
+    <span>{{ label }}</span>
   </NuxtLink>
 </template>
+
+<style scoped lang="ts">
+css({
+  '.link': {
+    color: '{colors.primary.900}',
+    backgroundColor: '{colors.primary.100}',
+    borderColor: '{colors.primary.400}',
+    borderRadius: '{radii.md}',
+    borderWidth: '{borderWidths.sm}',
+    borderStyle: 'solid',
+    display: 'inline-flex',
+    padding: '{space.2} {space.4}',
+    marginBottom: '{space.4}',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '{space.1}',
+
+    '@dark': {
+      color: '{colors.primary.100}',
+      backgroundColor: 'transparent',
+      borderColor: '{colors.primary.700}'
+    },
+
+    '&:hover': {
+      backgroundColor: '{colors.primary.200}',
+      '@dark': {
+        backgroundColor: '{colors.primary.900}'
+      },
+    }
+  },
+  '.link span': {
+    // font-medium text-sm
+    fontWeight: '{fontWeights.medium}',
+    fontSize: '{fontSizes.sm}'
+  },
+  '.link .icon': {
+    width: '{space.4}',
+    height: '{space.4}'
+  }
+})
+</style>

docs/components/content/Logo.vue

@@ -1,5 +1,5 @@
 <template>
-  <svg class="text-gray-900 dark:text-white h-5 sm:h-6" viewBox="0 0 126 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg height="24px" viewBox="0 0 126 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path fill-rule="evenodd" clip-rule="evenodd" d="M15.6009 1.34267c-.9666-1.65485-3.3832-1.65485-4.3499 0L.71619 19.3781c-.96664 1.6549.24165 3.7234 2.17494 3.7234h8.22407c-.8261-.7188-1.13199-1.9623-.5068-3.0293L18.587 6.45475l-2.9861-5.11208Z" fill="#80EEC0" />
     <path d="M22.276 5.29879c.8-1.35398 2.7999-1.35398 3.5999 0L34.5944 20.055c.8 1.354-.2 3.0465-1.7999 3.0465h-17.437c-1.5999 0-2.6-1.6925-1.8-3.0465L22.276 5.29879Z" fill="#00DC82" />
     <path d="M49.5744 23.0432c3.8655 0 6.7421-2.2261 7.0567-5.4866h-2.9665c-.2697 1.7089-1.9327 2.9007-4.0902 2.9007-2.7418 0-4.8094-1.8888-4.8094-5.4641 0-3.5753 2.0676-5.48663 4.8094-5.48663 2.1125 0 3.7756 1.19173 4.0003 2.92323h3.1014c-.427-3.26053-3.3036-5.48664-7.1017-5.48664-4.1127 0-7.7984 2.6983-7.7984 8.05004 0 5.3517 3.6183 8.05 7.7984 8.05Zm14.2834 0c3.4385 0 5.9104-2.4735 5.9104-5.8464s-2.4719-5.8464-5.9104-5.8464c-3.461 0-5.9329 2.4735-5.9329 5.8464s2.4719 5.8464 5.9329 5.8464Zm0-2.3836c-1.8878 0-3.1464-1.4166-3.1464-3.4628 0-2.0463 1.2586-3.4628 3.1464-3.4628 1.8653 0 3.124 1.4165 3.124 3.4628 0 2.0462-1.2587 3.4628-3.124 3.4628Zm10.5403 2.2037v-6.1837c0-1.664 1.0787-2.8782 2.6295-2.8782 1.4156 0 2.3598 1.0794 2.3598 2.6309v6.431h2.764v-7.0157c0-2.6533-1.6629-4.4972-4.2251-4.4972-1.618 0-2.8991.6971-3.5282 1.9338v-1.7539h-2.764v11.333h2.764Zm11.2487-11.333h-2.2252v2.3161h2.2252v5.0594c0 2.5184 1.6181 3.9575 4.09 3.9575h1.8205v-2.3386h-1.506c-1.0332 0-1.6404-.5846-1.6404-1.7314v-4.9469h3.1464v-2.3161h-3.1464V8.11242h-2.7641v3.41788Zm15.2492 7.5553c-.292 1.0793-1.2134 1.664-2.629 1.664-1.7532 0-2.9216-1.1693-3.124-2.9906h8.36c.023-.2249.045-.5622.045-.9445 0-2.6983-1.707-5.4641-5.5059-5.4641-3.7082 0-5.551 2.8108-5.551 5.8014 0 2.9682 2.0677 5.8914 5.7759 5.8914 2.787 0 4.899-1.5516 5.326-3.9576h-2.697Zm-2.8539-5.6664c1.6405 0 2.6299 1.0793 2.7419 2.5184h-5.5732c.2921-1.709 1.2805-2.5184 2.8313-2.5184Zm10.1759 9.4441v-6.1837c0-1.664 1.079-2.8782 2.63-2.8782 1.416 0 2.36 1.0794 2.36 2.6309v6.431h2.764v-7.0157c0-2.6533-1.663-4.4972-4.225-4.4972-1.618 0-2.899.6971-3.529 1.9338v-1.7539h-2.764v11.333h2.764Zm11.249-11.333h-2.225v2.3161h2.225v5.0594c0 2.5184 1.618 3.9575 4.09 3.9575h1.821v-2.3386h-1.506c-1.034 0-1.641-.5846-1.641-1.7314v-4.9469h3.147v-2.3161h-3.147V8.11242h-2.764v3.41788Z" fill="currentColor" />

docs/components/content/MyButton.vue

@@ -13,20 +13,23 @@ defineProps({
   </button>
 </template>
 
-<style scoped>
-  button {
-    padding: .5rem;
-    border-radius: 4px;
-    color: #000;
-  }
-  .info {
-    background-color: blue
-  }
-  .warning {
-    background-color: orange
-  }
-  .success {
-    background-color: rgb(209, 250, 229);
-    border: 1px solid rgb(52, 211, 153)
+<style scoped lang="ts">
+css({
+  'button': {
+    padding: '.5rem',
+    borderRadius: '4px',
+    color: '#000'
+  },
+  '.info': {
+    'backgroundColor': 'blue'
+  },
+  '.warning': {
+    'backgroundColor': 'orange'
+  },
+  '.success': {
+    backgroundColor: 'rgb(209, 250, 229)',
+    border: '1px solid rgb(52, 211, 153)'
   }
+
+})
 </style>

docs/components/content/Playground.vue

@@ -94,23 +94,23 @@ watch(content, refresh)
 </script>
 
 <template>
-  <div class="h-page max-h-page flex flex-col">
-    <div class="flex items-center">
-      <TabsHeader class="flex-1 w-1/2" :tabs="[{ label: 'Editor' }]" :active-tab-index="0" />
-      <TabsHeader class="flex-1 w-1/2" :tabs="tabs" :active-tab-index="tab" @update:active-tab-index="updateTab" />
+  <div class="playground">
+    <div class="tab-container">
+      <TabsHeader :tabs="[{ label: 'Editor' }]" :active-tab-index="0" />
+      <TabsHeader :tabs="tabs" :active-tab-index="tab" @update:active-tab-index="updateTab" />
     </div>
-    <div class="flex overflow-hidden flex-1">
-      <div ref="editor" class="relative w-1/2 flex-1">
+    <div class="playground-main">
+      <div ref="editor">
         <component :is="editorComponent" v-if="editorComponent" v-model="content" />
-        <div v-else class="absolute left-0 top-0 h-full w-full flex justify-center items-center">
+        <div v-else class="loading">
           <Alert type="primary">
             <span>Editor is loading...</span>
             <Icon name="file-icons:sandbox" class="ml-2 inline" />
           </Alert>
         </div>
       </div>
-      <div class="w-1/2 flex-1 overflow-y-auto">
-        <ContentRenderer v-if="tab === 0" :key="doc.updatedAt" class="docus-content p-8" :value="doc">
+      <div>
+        <ContentRenderer v-if="tab === 0" :key="doc.updatedAt" class="content" :value="doc">
           <template #empty>
             <div class="p-8">
               <Alert type="warning">
@@ -119,7 +119,10 @@ watch(content, refresh)
                 </p>
                 <br><br>
                 <p>
-                  Type any <span class="font-semibold">Markdown</span> or <span class="font-semibold">MDC code</span> in editor to see it replaced by rendered nodes in this panel.
+                  Type any
+                  <span class="font-semibold">Markdown</span> or
+                  <span class="font-semibold">MDC code</span>
+                  in editor to see it replaced by rendered nodes in this panel.
                 </p>
               </Alert>
             </div>
@@ -132,8 +135,53 @@ watch(content, refresh)
           read-only
           :model-value="docJSON"
         />
-        <!-- <pre v-if="tab === 1">{{ doc }}</pre> -->
       </div>
     </div>
   </div>
 </template>
+
+<style scoped lang="ts">
+css({
+  '.flex': { display: 'flex' },
+  '.flex-1': { flex: 1 },
+  '.p-8': { padding: '{space.8}' },
+  '.overflow-hidden': { overflow: 'hidden' },
+  '.relative': { position: 'relative' },
+  '.playground': {
+    height: 'calc(100vh - 114px)',
+    maxHeight: '100%',
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  '.tab-container': {
+    display: 'flex',
+    alignItems: 'center',
+    '> div': {
+      flex: 1
+    }
+  },
+  '.playground-main': {
+    display: 'flex',
+    overflow: 'hidden',
+    flex: 1,
+  },
+  '.playground-main > div': {
+    flex: 1,
+    overflowY: 'auto',
+    position: 'relative',
+  },
+  '.loading': {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    height: '100%',
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  '.content': {
+    padding: '{space.8}',
+  }
+})
+</style>