docs: add ValaxyMain desc for theme, close #69

docs/pages/components/index.md

@@ -0,0 +1,22 @@
+---
+title: Components
+title_zh: 组件
+categories:
+  - Guide
+end: false
+---
+
+Valaxy 内置了几个简单的组件。
+
+你可以在写文章或者创作主题时直接使用。
+
+## 基础组件
+
+> 面向主题开发者，你通常不需要直接使用
+
+- `ValaxyMain`: 页面基础布局
+- `ValaxyMd`: Markdown 渲染内容
+
+## 辅助组件
+
+> 面向用户，可直接使用

docs/pages/themes/index.md

@@ -55,9 +55,37 @@ export interface ValaxyConfig {
 }
 ```
 
-## ValaxyMain
+## 开始编写
 
-你可以从 `ValaxyMain` 的 `props` 中获取 `frontmatter` 与 `pageData`。
+### ValaxyMain
+
+你需要自定义一个 `ValaxyMain` 组件来决定主题的文章渲染部分。
+
+> 你可以从 `ValaxyMain` 的 `props` 中获取 `frontmatter` 与 `pageData`。
+
+```vue
+<script lang="ts" setup>
+import type { PageData, Post } from 'valaxy'
+
+defineProps<{
+  frontmatter: Post
+  data?: PageData
+}>()
+</script>
+
+<template>
+  <main>
+    <slot name="main-content">
+      <ValaxyMd :frontmatter="frontmatter">
+        <slot name="main-content-md" />
+        <slot />
+      </ValaxyMd>
+    </slot>
+  </main>
+</template>
+```
+
+> 示例可参考 [ValaxyMain.vue | valaxy-theme-yun](https://github.com/YunYouJun/valaxy/blob/main/packages/valaxy-theme-yun/components/ValaxyMain.vue)
 
 ## 样式
 

docs/pages/themes/use.md

@@ -3,6 +3,7 @@ title: Use Theme
 title_zh: 使用主题
 categories:
   - Theme
+top: 100
 ---
 
 ## 安装主题

packages/valaxy-theme-press/components/ValaxyMain.vue

@@ -23,10 +23,10 @@ const isHome = useLayout('home')
     <div
       w="full" flex="~" :class="{
         'px-6 md:px-8': hasSidebar,
-      }" p="t-8"
+      }" p="t-6"
     >
       <slot name="main">
-        <div class="content" m="auto y-0" flex="~ col grow" w="full" p="x-12 lt-md:0">
+        <div class="content" m="y-0" flex="~ col grow" w="full" p="x-12 lt-md:0">
           <slot name="main-header" />
           <slot name="main-header-after" />
 

packages/valaxy-theme-yun/components/YunFooter.vue

@@ -2,17 +2,24 @@
 import { capitalize, computed } from 'vue'
 import { useConfig } from 'valaxy'
 import { useI18n } from 'vue-i18n'
+import pkg from 'valaxy/package.json'
 import { useThemeConfig } from '../composables'
+
+const { t } = useI18n()
 const config = useConfig()
 const themeConfig = useThemeConfig()
 const year = new Date().getFullYear()
+
 const isThisYear = computed(() => {
   return year === themeConfig.value.footer.since
 })
 
-const { t } = useI18n()
-const poweredHtml = computed(() => t('footer.powered', [`<a href="${config.value.pkg.repository}" target="_blank" rel="noopener">Valaxy</a> v${config.value.pkg.version}`]))
-const footerIcon = computed(() => themeConfig.value.footer.icon || { url: config.value.pkg.repository, name: config.value.pkg.name })
+const poweredHtml = computed(() => t('footer.powered', [`<a href="${pkg.repository}" target="_blank" rel="noopener">Valaxy</a> v${pkg.version}`]))
+const footerIcon = computed(() => themeConfig.value.footer.icon || {
+  url: pkg.repository,
+  name: 'i-ri-cloud-line',
+  title: pkg.name,
+})
 </script>
 
 <template>

packages/valaxy/client/components/ValaxyMain.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { PageData, Post } from '../../types'
+
+defineProps<{
+  frontmatter: Post
+  data?: PageData
+}>()
+</script>
+
+<template>
+  <main>
+    <slot name="main-content">
+      <ValaxyMd :frontmatter="frontmatter">
+        <slot name="main-content-md" />
+        <slot />
+      </ValaxyMd>
+    </slot>
+  </main>
+</template>

packages/valaxy/client/config.ts

@@ -33,12 +33,12 @@ export const valaxyContextRef = shallowRef<ValaxyContext>(parse<ValaxyContext>(v
 if (import.meta.hot) {
   // /@valaxyjs/site must be static string
   import.meta.hot.accept('/@valaxyjs/site', (m) => {
-    valaxySiteConfigRef.value = parse<ValaxySiteConfig>(m.default)
+    valaxySiteConfigRef.value = parse<ValaxySiteConfig>(m?.default)
   })
 
   // context
   import.meta.hot.accept('/@valaxyjs/context', (m) => {
-    valaxyContextRef.value = parse<ValaxyContext>(m.default)
+    valaxyContextRef.value = parse<ValaxyContext>(m?.default)
   })
 }
 

packages/valaxy/node/config.ts

@@ -1,7 +1,6 @@
 import type { VitePluginConfig as UnoCssConfig } from 'unocss/vite'
 import type { Awaitable } from '@antfu/utils'
 import type { DefaultThemeConfig, SiteConfig, UserSiteConfig } from '../types'
-import pkg from '../package.json'
 import type { ResolvedValaxyOptions } from './options'
 import type { UserConfig, ValaxyAddonResolver, ValaxyConfig } from './types'
 
@@ -44,7 +43,6 @@ export function defineAddon(
 }
 
 export const defaultSiteConfig: SiteConfig = {
-  pkg,
   mode: 'auto',
   url: '/',
   lang: 'en',

packages/valaxy/node/types.ts

@@ -5,11 +5,10 @@ import type Pages from 'vite-plugin-pages'
 import type { UserConfig as ViteUserConfig } from 'vite'
 import type { presetAttributify, presetIcons, presetTypography, presetUno } from 'unocss'
 import type { DefaultThemeConfig, UserSiteConfig } from '../types'
-import type ValaxyPackage from '../package.json'
 import type { ResolvedValaxyOptions } from './options'
 import type { MarkdownOptions } from './markdown'
 
-export type ValaxyConfig<ThemeConfig = DefaultThemeConfig> = UserSiteConfig<ThemeConfig> & ValaxyExtendConfig & { pkg: typeof ValaxyPackage }
+export type ValaxyConfig<ThemeConfig = DefaultThemeConfig> = UserSiteConfig<ThemeConfig> & ValaxyExtendConfig
 export type UserConfig<ThemeConfig = DefaultThemeConfig> = ValaxyConfig<ThemeConfig>
 /**
  * fn with options for theme config

packages/valaxy/types/config.ts

@@ -1,5 +1,3 @@
-import type ValaxyPackage from '../package.json'
-
 export type DefaultThemeConfig = Record<string, any>
 
 export interface SocialLink {
@@ -29,10 +27,6 @@ export interface AlgoliaSearchOptions {
 
 // shared with valaxy node and client
 export interface SiteConfig<T = DefaultThemeConfig> {
-  /**
-   * valaxy package.json
-   */
-  pkg: typeof ValaxyPackage
   /**
    * enable auto (light/dark mode)
    * @default 'auto'