docs: use vitepress v1 (#993)

8 files changed, 274 insertions, 283 deletions

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 91e7fd2f..9b013d2e 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -1,93 +1,7 @@
-import type { DefaultTheme } from 'vitepress';
 import { defineConfig } from 'vitepress';
 import { apiPages } from './api-pages';
 import { currentVersion, oldVersions } from './versions';
 
-const nav: DefaultTheme.NavItem[] = [
-  { text: 'Guide', link: '/guide/' },
-  // { text: 'Playground', link: '/playground/' },
-  {
-    text: 'Ecosystem',
-    items: [
-      { text: 'Discord ', link: 'https://chat.fakerjs.dev' },
-      { text: 'StackBlitz ', link: 'https://fakerjs.dev/new' },
-      { text: 'Twitter ', link: 'https://twitter.com/faker_js' },
-    ],
-  },
-  {
-    text: 'About',
-    items: [
-      {
-        text: 'Announcements',
-        link: '/about/announcements',
-      },
-      {
-        text: 'Team',
-        link: '/about/team',
-      },
-    ],
-  },
-  {
-    text: currentVersion,
-    items: [
-      {
-        text: 'Release Notes',
-        link: 'https://github.com/faker-js/faker/releases',
-      },
-      ...oldVersions.map(({ version, link }) => ({
-        text: version,
-        link,
-      })),
-    ],
-  },
-];
-
-const sidebar: DefaultTheme.MultiSideBarConfig = {
-  '/about': [
-    {
-      text: 'About',
-      children: [
-        {
-          text: 'Announcements',
-          link: '/about/announcements',
-          children: [
-            { text: '2022-01-14', link: '/about/announcements/2022-01-14' },
-          ],
-        },
-        {
-          text: 'Team',
-          link: '/about/team',
-        },
-      ],
-    },
-  ],
-  '/': [
-    {
-      text: 'Guide',
-      children: [
-        {
-          text: 'Getting Started',
-          link: '/guide/',
-        },
-      ],
-    },
-    {
-      text: 'API',
-      children: apiPages,
-    },
-    {
-      text: 'Migrating from Faker v5',
-      link: '/migration-guide-v5/',
-    },
-  ],
-};
-
-const algolia: DefaultTheme.AlgoliaSearchOptions = {
-  apiKey: process.env.API_KEY,
-  appId: process.env.APP_ID,
-  indexName: 'fakerjs',
-};
-
 const description =
   'Generate massive amounts of fake (but reasonable) data for testing and development.';
 const image = 'https://fakerjs.dev/social-image.png';
@@ -95,6 +9,7 @@ const image = 'https://fakerjs.dev/social-image.png';
 export default defineConfig({
   title: 'Faker',
   description,
+
   head: [
     ['link', { rel: 'icon', href: '/logo.svg' }],
     ['meta', { name: 'theme-color', content: '#40af7c' }],
@@ -141,15 +56,116 @@ export default defineConfig({
       },
     ],
   ],
+
   themeConfig: {
-    repo: 'faker-js/faker',
     logo: '/logo.svg',
-    docsDir: 'docs',
-    docsBranch: 'main',
-    editLinks: true,
-    editLinkText: 'Suggest changes to this page',
-    nav,
-    sidebar,
-    algolia,
+
+    editLink: {
+      pattern: 'https://github.com/faker-js/faker/edit/main/docs/:path',
+      text: 'Suggest changes to this page',
+    },
+
+    socialLinks: [
+      { icon: 'twitter', link: 'https://twitter.com/faker_js' },
+      { icon: 'discord', link: 'https://chat.fakerjs.dev' },
+      { icon: 'github', link: 'https://github.com/faker-js/faker' },
+    ],
+
+    algolia: {
+      apiKey: process.env.API_KEY,
+      appId: process.env.APP_ID,
+      indexName: 'fakerjs',
+    },
+
+    footer: {
+      message: 'Released under the MIT License.',
+      copyright: 'Copyright © 2022-present Faker.',
+    },
+
+    nav: [
+      { text: 'Guide', link: '/guide/' },
+      // { text: 'Playground', link: '/playground/' },
+      {
+        text: 'Ecosystem',
+        items: [{ text: 'StackBlitz ', link: 'https://fakerjs.dev/new' }],
+      },
+      {
+        text: 'About',
+        items: [
+          {
+            text: 'Announcements',
+            link: '/about/announcements',
+          },
+          {
+            text: 'Team',
+            link: '/about/team',
+          },
+        ],
+      },
+      {
+        text: currentVersion,
+        items: [
+          {
+            text: 'Release Notes',
+            link: 'https://github.com/faker-js/faker/releases',
+          },
+          ...oldVersions.map(({ version, link }) => ({
+            text: version,
+            link,
+          })),
+        ],
+      },
+    ],
+
+    sidebar: {
+      '/guide/': [
+        {
+          text: 'Guide',
+          items: [
+            {
+              text: 'Getting Started',
+              link: '/guide/',
+            },
+          ],
+        },
+        {
+          text: 'API',
+          items: apiPages,
+        },
+        {
+          text: 'Migrations',
+          items: [
+            {
+              text: 'Migrating from Faker v5',
+              link: '/guide/migration-guide-v5',
+            },
+          ],
+        },
+      ],
+      '/api/': [
+        {
+          text: 'API',
+          items: apiPages,
+        },
+      ],
+      '/about/': [
+        {
+          text: 'About',
+          items: [
+            {
+              text: 'Announcements',
+              link: '/about/announcements',
+              // children: [
+              //   { text: '2022-01-14', link: '/about/announcements/2022-01-14' },
+              // ],
+            },
+            {
+              text: 'Team',
+              link: '/about/team',
+            },
+          ],
+        },
+      ],
+    },
   },
 });
diff --git a/docs/about/team.md b/docs/about/team.md
index 9013ee90..a3502b76 100644
--- a/docs/about/team.md
+++ b/docs/about/team.md
@@ -1,9 +1,11 @@
 ---
+layout: page
 title: Team
+description: The development of Faker is guided by an international team.
 ---
 
 <script setup>
-  import TeamPage from './team/TeamPage.vue'
+import TeamPage from './team/TeamPage.vue'
 </script>
 
 <TeamPage />
diff --git a/docs/about/team/TeamMember.ts b/docs/about/team/TeamMember.ts
deleted file mode 100644
index 01fe3771..00000000
--- a/docs/about/team/TeamMember.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export interface Member {
-  readonly name: string;
-  readonly github: string;
-  readonly gitlab?: string;
-  readonly twitter?: string;
-  readonly roles: readonly string[];
-}
diff --git a/docs/about/team/TeamMember.vue b/docs/about/team/TeamMember.vue
deleted file mode 100644
index 03514a1f..00000000
--- a/docs/about/team/TeamMember.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<script lang="ts" setup>
-import type { Member } from './TeamMember';
-
-defineProps<{ member: Member }>();
-</script>
-
-<template>
-  <div class="TeamMember">
-    <div class="avatar">
-      <img :src="'https://github.com/' + member.github + '.png'" width="120" />
-    </div>
-    <div class="info">
-      <div class="name">
-        <b>{{ member.name }}</b>
-      </div>
-      <div class="socials">
-        <a :href="'https://github.com/' + member.github">
-          <img
-            src="https://img.icons8.com/ios-glyphs/344/github.png"
-            alt="GitHub"
-            title="GitHub"
-            width="32"
-          />
-        </a>
-        <a v-if="member.gitlab" :href="'https://gitlab.com/' + member.gitlab">
-          <img
-            src="https://img.icons8.com/color/344/gitlab.png"
-            alt="GitLab"
-            title="GitLab"
-            width="32"
-          />
-        </a>
-        <a
-          v-if="member.twitter"
-          :href="'https://twitter.com/' + member.twitter"
-        >
-          <img
-            src="https://img.icons8.com/color/344/twitter.png"
-            alt="Twitter"
-            title="Twitter"
-            width="32"
-          />
-        </a>
-      </div>
-      <div v-if="member.roles?.length" class="roles">
-        <span>Roles: </span>
-        <template v-for="(role, index) in member.roles">
-          <i>{{ role }}</i>
-          <span v-if="index < member.roles.length - 1">, </span>
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.TeamMember {
-  padding: 0.5em;
-
-  display: flex;
-  align-items: center;
-}
-
-.TeamMember .avatar {
-  flex: 0 0 120px;
-  margin-right: 1em;
-}
-
-.TeamMember .avatar img {
-  border-radius: 50%;
-}
-
-.TeamMember .roles i {
-  white-space: nowrap;
-}
-</style>
diff --git a/docs/about/team/TeamPage.vue b/docs/about/team/TeamPage.vue
index 99801f17..67171917 100644
--- a/docs/about/team/TeamPage.vue
+++ b/docs/about/team/TeamPage.vue
@@ -1,60 +1,41 @@
-<script lang="ts" setup>
-import membersData from './members.json';
-import TeamMember from './TeamMember.vue';
+<script setup lang="ts">
+import {
+  VPTeamMembers,
+  VPTeamPage,
+  VPTeamPageSection,
+  VPTeamPageTitle,
+} from 'vitepress/theme';
+import { contributors, core, emeriti } from './members.json';
 </script>
 
 <template>
-  <div class="TeamPage">
-    <div class="core">
-      <h2>Core Team</h2>
-      <div class="members">
-        <TeamMember
-          v-for="member in membersData.core"
-          :key="member.name"
-          :member="member"
-        />
-      </div>
-    </div>
+  <VPTeamPage>
+    <VPTeamPageTitle>
+      <template #title>Meet the Team</template>
+      <template #lead>
+        The development of Faker is guided by an international team, some of
+        whom have chosen to be featured below.
+      </template>
+    </VPTeamPageTitle>
 
-    <div class="contributors">
-      <h2>Contributors</h2>
-      <div class="members">
-        <TeamMember
-          v-for="member in membersData.contributors"
-          :key="member.name"
-          :member="member"
-        />
-      </div>
-    </div>
+    <VPTeamMembers :members="core" />
 
-    <div class="previous">
-      <h2>Honorable previous members</h2>
-      <div class="members">
-        <TeamMember
-          v-for="member in membersData.previous"
-          :key="member.name"
-          :member="member"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.TeamPage .members {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  width: 100%;
-}
+    <VPTeamPageSection>
+      <template #title>Team Contributors</template>
+      <template #members>
+        <VPTeamMembers :members="contributors" />
+      </template>
+    </VPTeamPageSection>
 
-.TeamPage .members .TeamMember {
-  width: 50%;
-}
-
-@media (max-width: 120rem) {
-  .TeamPage .members .TeamMember {
-    width: 100%;
-  }
-}
-</style>
+    <VPTeamPageSection>
+      <template #title>Team Emeriti</template>
+      <template #lead>
+        Here we honor some no-longer-active team members who have made valuable
+        contributions in the past.
+      </template>
+      <template #members>
+        <VPTeamMembers size="small" :members="emeriti" />
+      </template>
+    </VPTeamPageSection>
+  </VPTeamPage>
+</template>
diff --git a/docs/about/team/members.json b/docs/about/team/members.json
index 31018175..7732eab2 100644
--- a/docs/about/team/members.json
+++ b/docs/about/team/members.json
@@ -1,77 +1,141 @@
 {
   "core": [
     {
+      "avatar": "https://github.com/Shinigami92.png",
       "name": "Christopher Quadflieg",
-      "github": "Shinigami92",
-      "twitter": "Shini_92",
-      "roles": ["Code Maintainer"]
+      "title": "Code Maintainer",
+      "org": "Faker",
+      "orgLink": "https://fakerjs.dev",
+      "desc": "Passionate TypeScript enthusiast. Also core member of Vite.",
+      "links": [
+        { "icon": "github", "link": "https://github.com/Shinigami92" },
+        { "icon": "twitter", "link": "https://twitter.com/Shini_92" }
+      ],
+      "sponsor": "https://github.com/sponsors/Shinigami92"
     },
     {
+      "avatar": "https://github.com/damienwebdev.png",
       "name": "Damien Retzinger",
-      "github": "damienwebdev",
-      "twitter": "damienwebdev",
-      "roles": ["Advisor"]
+      "title": "Advisor",
+      "org": "",
+      "orgLink": "",
+      "desc": "",
+      "links": [
+        { "icon": "github", "link": "https://github.com/damienwebdev" },
+        { "icon": "twitter", "link": "https://twitter.com/damienwebdev" }
+      ],
+      "sponsor": "https://github.com/sponsors/damienwebdev"
     },
     {
+      "avatar": "https://github.com/prisis.png",
       "name": "Daniel Bannert",
-      "github": "prisis",
-      "twitter": "_prisis_",
-      "roles": ["Organization Owner"]
+      "title": "Organization Owner",
+      "org": "",
+      "orgLink": "",
+      "desc": "",
+      "links": [
+        { "icon": "github", "link": "https://github.com/prisis" },
+        { "icon": "twitter", "link": "https://twitter.com/_prisis_" }
+      ],
+      "sponsor": "https://github.com/sponsors/prisis"
     },
     {
+      "avatar": "https://github.com/ST-DDT.png",
       "name": "Daniel Theuke",
-      "github": "ST-DDT",
-      "roles": ["Code Maintainer", "Docs Automation"]
+      "title": "Code Maintainer | Docs Automation",
+      "org": "",
+      "orgLink": "",
+      "desc": "",
+      "links": [{ "icon": "github", "link": "https://github.com/ST-DDT" }],
+      "sponsor": "https://github.com/sponsors/ST-DDT"
     },
     {
+      "avatar": "https://github.com/clarkerican.png",
       "name": "Erica Clark",
-      "github": "clarkerican",
-      "twitter": "clarkerican",
-      "roles": []
+      "title": "",
+      "org": "",
+      "orgLink": "",
+      "desc": "",
+      "links": [
+        { "icon": "github", "link": "https://github.com/clarkerican" },
+        { "icon": "twitter", "link": "https://twitter.com/clarkerican" }
+      ]
     },
     {
+      "avatar": "https://github.com/griest024.png",
       "name": "griest",
-      "github": "griest024",
-      "gitlab": "griest",
-      "roles": ["Code Reviewer"]
+      "title": "Code Reviewer",
+      "org": "",
+      "orgLink": "",
+      "desc": "",
+      "links": [
+        { "icon": "github", "link": "https://github.com/griest024" },
+        { "icon": "gitlab", "link": "https://gitlab.com/griest" }
+      ]
     },
     {
+      "avatar": "https://github.com/JessicaSachs.png",
       "name": "Jessica Sachs",
-      "github": "JessicaSachs",
-      "twitter": "_JessicaSachs",
-      "roles": ["Press Officer"]
+      "title": "Press Officer",
+      "org": "",
+      "orgLink": "",
+      "desc": "",
+      "links": [
+        { "icon": "github", "link": "https://github.com/JessicaSachs" },
+        { "icon": "twitter", "link": "https://twitter.com/_JessicaSachs" }
+      ],
+      "sponsor": "https://github.com/sponsors/JessicaSachs"
     }
   ],
   "contributors": [
     {
+      "avatar": "https://github.com/import-brain.png",
       "name": "Eric Cheng",
-      "github": "import-brain",
-      "roles": ["Triage", "Contributor"]
+      "title": "Triage",
+      "org": "",
+      "orgLink": "",
+      "desc": "",
+      "links": [{ "icon": "github", "link": "https://github.com/import-brain" }]
     },
     {
+      "avatar": "https://github.com/xDivisionByZerox.png",
       "name": "Leyla Jähnig",
-      "github": "xDivisionByZerox",
-      "roles": ["Contributor"]
+      "title": "Contributor",
+      "desc": "",
+      "links": [
+        { "icon": "github", "link": "https://github.com/xDivisionByZerox" }
+      ]
     },
     {
+      "avatar": "https://github.com/pkuczynski.png",
       "name": "Piotr Kuczynski",
-      "github": "pkuczynski",
-      "twitter": "PiotrKuczynski",
-      "roles": ["Contributor"]
+      "title": "Contributor",
+      "org": "",
+      "orgLink": "",
+      "desc": "",
+      "links": [
+        { "icon": "github", "link": "https://github.com/pkuczynski" },
+        { "icon": "twitter", "link": "https://twitter.com/PiotrKuczynski" }
+      ],
+      "sponsor": "https://github.com/sponsors/pkuczynski"
     }
   ],
-  "previous": [
+  "emeriti": [
     {
+      "avatar": "https://github.com/MateusDadalto.png",
       "name": "Mateus Dadalto",
-      "github": "MateusDadalto",
-      "twitter": "MateusD",
-      "roles": []
+      "links": [
+        { "icon": "github", "link": "https://github.com/MateusDadalto" },
+        { "icon": "twitter", "link": "https://twitter.com/MateusD" }
+      ]
     },
     {
+      "avatar": "https://github.com/mmahalwy.png",
       "name": "Mo Mahallawy",
-      "github": "mmahalwy",
-      "twitter": "mmahalwy",
-      "roles": []
+      "links": [
+        { "icon": "github", "link": "https://github.com/mmahalwy" },
+        { "icon": "twitter", "link": "https://twitter.com/mmahalwy" }
+      ]
     }
   ]
 }
diff --git a/docs/migration-guide-v5/index.md b/docs/guide/migration-guide-v5.md
index 1fcc229f..1fcc229f 100644
--- a/docs/migration-guide-v5/index.md
+++ b/docs/guide/migration-guide-v5.md
diff --git a/docs/index.md b/docs/index.md
index 7a4b9300..8f5f6b55 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,27 +1,38 @@
 ---
-home: true
-title: 'Faker'
-heroImage: /logo.svg
-heroAlt: 'Cartoon logo of a panda magician'
-heroText: 'Faker'
-tagline: 'Generate massive amounts of fake (but realistic) data for testing and development.'
-actionText: Get Started
-actionLink: /guide/
-altActionText: Star
-altActionLink: https://github.com/faker-js/faker
+layout: home
+
+hero:
+  name: Faker
+  text: ''
+  tagline: Generate massive amounts of fake (but realistic) data for testing and development.
+  image:
+    src: /logo.svg
+    alt: Cartoon logo of a panda magician
+  actions:
+    - theme: brand
+      text: Get Started
+      link: /guide/
+    - theme: alt
+      text: View on GitHub
+      link: https://github.com/faker-js/faker
 
 features:
-  - title: 👠 Products
+  - icon: 👠
+    title: Products
     details: Generate Prices, Product Names, Adjectives, and Descriptions.
-  - title: 💸 Finance
+  - icon: 💸
+    title: Finance
     details: Create stubbed out Account Details, Transactions, and Crypto Addresses.
-  - title: 💌 Addresses
+  - icon: 💌
+    title: Addresses
     details: Generate valid Addresses, Zip Codes, Street Names, States, and Countries!
-  - title: 👾 Hacker Jargon
+  - icon: 👾
+    title: Hacker Jargon
     details: “Try to reboot the SQL bus, maybe it will bypass the virtual application!”
-  - title: ⏰ Time-based Data
+  - icon: ⏰
+    title: Time-based Data
     details: Past, present, future, recent, soon... whenever!
-  - title: 🌏 Localization
+  - icon: 🌏
+    title: Localization
     details: Set a locale to generate realistic looking Names, Addresses, and Phone Numbers.
-footer: MIT Licensed 2022
 ---