docs: about

docs/.vitepress/config.ts

@@ -4,26 +4,53 @@ import { apiPages } from './api-pages';
 
 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: '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: 'Playground', link: '/playground/' },
 ];
 
 const sidebar: DefaultTheme.MultiSideBarConfig = {
-  '/': [
+  '/about': [
     {
-      text: 'Guide',
+      text: 'About',
       children: [
         {
-          text: 'Recent Statement and FAQs',
-          link: '/update.html',
+          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/',

docs/about/announcements.md

@@ -0,0 +1,7 @@
+---
+editLink: false
+---
+
+# Announcements
+
+- [2022-01-14 - An update from the Faker team](./announcements/2022-01-14)

docs/update.md → docs/about/announcements/2022-01-14.md

@@ -68,7 +68,7 @@ He gave us permission to re-use his work to create **[fakerjs.dev](https://faker
 
 9. Done a TON of issue triage and many, many PR reviews.
 
-<div style="text-align: center;"><img src="./public/first-week-wins.png" width="600" alt="64 pull requests were opened. 34 were merged. 44 issues were opened. 25 were closed." /></div>
+<div style="text-align: center;"><img src="/first-week-wins.png" width="600" alt="64 pull requests were opened. 34 were merged. 44 issues were opened. 25 were closed." /></div>
 
 10. We've gotten in contact with the [Open Collective](https://opencollective.com) and discussed a transition plan for the project.
 

docs/about/team.md

@@ -0,0 +1,9 @@
+---
+title: Team
+---
+
+<script setup>
+  import TeamPage from './team/TeamPage.vue'
+</script>
+
+<TeamPage />

docs/about/team/TeamMember.ts

@@ -0,0 +1,7 @@
+export interface Member {
+  readonly name: string;
+  readonly github: string;
+  readonly gitlab?: string;
+  readonly twitter?: string;
+  readonly roles: readonly string[];
+}

docs/about/team/TeamMember.vue

@@ -0,0 +1,76 @@
+<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>

docs/about/team/TeamPage.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import membersData from './members.json';
+import TeamMember from './TeamMember.vue';
+</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>
+
+    <div class="contributors">
+      <h2>Contributors</h2>
+      <div class="members">
+        <TeamMember
+          v-for="member in membersData.contributors"
+          :key="member.name"
+          :member="member"
+        />
+      </div>
+    </div>
+
+    <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%;
+}
+
+.TeamPage .members .TeamMember {
+  width: 50%;
+}
+
+@media (max-width: 120rem) {
+  .TeamPage .members .TeamMember {
+    width: 100%;
+  }
+}
+</style>

docs/about/team/members.json

@@ -0,0 +1,77 @@
+{
+  "core": [
+    {
+      "name": "Christopher Quadflieg",
+      "github": "Shinigami92",
+      "twitter": "Shini_92",
+      "roles": ["Code Maintainer"]
+    },
+    {
+      "name": "Damien Retzinger",
+      "github": "damienwebdev",
+      "twitter": "damienwebdev",
+      "roles": ["Advisor"]
+    },
+    {
+      "name": "Daniel Bannert",
+      "github": "prisis",
+      "twitter": "_prisis_",
+      "roles": ["Organization Owner"]
+    },
+    {
+      "name": "Daniel Theuke",
+      "github": "ST-DDT",
+      "roles": ["Code Maintainer", "Docs Automation"]
+    },
+    {
+      "name": "Erica Clark",
+      "github": "clarkerican",
+      "twitter": "clarkerican",
+      "roles": []
+    },
+    {
+      "name": "griest",
+      "github": "griest024",
+      "gitlab": "griest",
+      "roles": ["Code Reviewer"]
+    },
+    {
+      "name": "Jessica Sachs",
+      "github": "JessicaSachs",
+      "twitter": "_JessicaSachs",
+      "roles": ["Press Officer"]
+    }
+  ],
+  "contributors": [
+    {
+      "name": "Eric Cheng",
+      "github": "import-brain",
+      "roles": ["Triage", "Contributor"]
+    },
+    {
+      "name": "Leyla Jähnig",
+      "github": "xDivisionByZerox",
+      "roles": ["Contributor"]
+    },
+    {
+      "name": "Piotr Kuczynski",
+      "github": "pkuczynski",
+      "twitter": "PiotrKuczynski",
+      "roles": ["Contributor"]
+    }
+  ],
+  "previous": [
+    {
+      "name": "Mateus Dadalto",
+      "github": "MateusDadalto",
+      "twitter": "MateusD",
+      "roles": []
+    },
+    {
+      "name": "Mo Mahallawy",
+      "github": "mmahalwy",
+      "twitter": "mmahalwy",
+      "roles": []
+    }
+  ]
+}

netlify.toml

@@ -20,3 +20,10 @@
   to = "https://stackblitz.com/edit/faker-js-demo?file=index.ts"
   status = 301
   force = true
+
+# Redirect old update page to new announcement section
+[[redirects]]
+  from = "/update.html"
+  to = "https://fakerjs.dev/about/announcements/2022-01-14.html"
+  status = 301
+  force = true