docs: improve documentation (#1801)

* docs: improve documentation

* docs: updates

* fix: updates

docs/.vitepress/config.mts

@@ -67,7 +67,7 @@ function nav() {
  },
  {
  text: 'Roadmap',
- link: '/guide/roadmap'
+ link: '/guide/extra/roadmap'
  },
  {
  text: 'v9.x',
@@ -90,24 +90,20 @@ function sidebarGuide() {
  text: 'What is Vue I18n?',
  link: '/guide/introduction'
  },
- {
- text: 'Getting Started',
- link: '/guide/'
- },
  {
  text: 'Installation',
  link: '/guide/installation'
- },
- {
- text: 'Roadmap',
- link: '/guide/roadmap'
  }
  ]
  },
  {
  text: 'Essentials',
  collapsible: true,
  items: [
+ {
+ text: 'Getting Started',
+ link: '/guide/essentials/started',
+ },
  {
  text: 'Message Format Syntax',
  link: '/guide/essentials/syntax'
@@ -217,13 +213,20 @@ function sidebarGuide() {
  ]
  },
  {
- text: 'v8.x',
+ text: 'Extra Topics',
  collapsible: true,
- collapsed: true,
  items: [
+ {
+ text: 'Different Distribution files',
+ link: '/guide/extra/dist'
+ },
  {
  text: 'Documentation for v8.x',
- link: '/guide/v8-docs'
+ link: '/guide/extra/v8-docs'
+ },
+ {
+ text: 'Roadmap',
+ link: '/guide/extra/roadmap'
  }
  ]
  }

docs/.vitepress/theme/styles/global.css

@@ -1,10 +1,26 @@
 :root {
+ --vp-c-brand-1: var(--vp-c-green-1);
+ --vp-c-brand-2: var(--vp-c-green-2);
+ --vp-c-brand-3: var(--vp-c-green-3);
+ --vp-c-brand-soft: var(--vp-c-green-soft);
+ --vp-code-color: #476582;
  --vp-home-hero-name-color: transparent;
  --vp-home-hero-image-filter: blur(72px);
  --vp-home-hero-image-background-image: linear-gradient( -45deg, #647eff 30%, #42d392 );
  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #647eff, #42d392);
 }
 
+:root.dark {
+ --vp-code-color: #c9def1;
+
+ --vp-home-hero-image-filter: blur(72px);
+ --vp-home-hero-image-background-image: linear-gradient(
+ 0deg,
+ var(--vp-c-brand-soft) 50%,
+ var(--vp-c-brand-soft) 50%
+ );
+}
+
 .vp-sponsor-grid.xmini .vp-sponsor-grid-link { height: 64px; }
 .vp-sponsor-grid.xmini .vp-sponsor-grid-image { max-width: 64px; max-height: 22px }