feat: team page (#442)

* 👌 (Alert) CapitalCamelCase on IconAlert * 👌 (docs) use docus syntax for nav title * 👌 (docs) use docus syntax for nav title * 👌 (examples) csb_link moved to ::code-sandbox component * 🚧 (team page) * ✨ (teams) add core and community md files * 🔧 (windi.config) add sky color * ✨ (teams) teams page * 🐛 (TeamMember) fix invalid key on v-for * 🐛 (teams) change title to name
nuxt-themes · Jun 16, 2021 · b9243a1 · b9243a1
1 parent c8fd248
commit b9243a1
Show file tree

Hide file tree

Showing 95 changed files with 378 additions and 241 deletions.
diff --git a/nuxtjs.org/components/Alert.vue b/nuxtjs.org/components/Alert.vue
@@ -2,7 +2,7 @@
   <div class="p-4 mt-4 mb-4 rounded-lg alert text-sm leading-relaxed" :class="[type]">
     <div class="flex items-center space-x-4">
       <div>
-        <Component :is="`IconAlert${type}`" class="w-5 h-5" />
+        <Component :is="iconComponent" class="w-5 h-5" />
       </div>
       <div class="flex-grow alert-content">
         <Markdown unwrap="p" />
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import { defineComponent } from '@nuxtjs/composition-api'
+import { defineComponent, computed } from '@nuxtjs/composition-api'
 import { Markdown } from '~docus/utils'
 export default defineComponent({
   components: { Markdown },
@@ -27,6 +27,15 @@ export default defineComponent({
         return ['info', 'success', 'warning', 'danger', 'next', 'star'].includes(value)
       }
     }
+  },
+  setup(props) {
+    const iconComponent = computed(() => {
+      return `iconAlert${props.type.charAt(0).toUpperCase() + props.type.slice(1)}`
+    })
+
+    return {
+      iconComponent
+    }
   }
 })
 </script>

diff --git a/nuxtjs.org/components/IconLinkedIn.vue b/nuxtjs.org/components/IconLinkedIn.vue
@@ -0,0 +1,10 @@
+<template>
+  <svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12.3202 13.0704H10.1858V9.72805C10.1858 8.93205 10.1722 7.90645 9.0762 7.90645C7.9642 7.90645 7.7954 8.77525 7.7954 9.67205V13.0704H5.661V6.19845H7.7082V7.13765H7.7378C8.0226 6.59765 8.7194 6.02805 9.7586 6.02805C11.921 6.02805 12.321 7.45045 12.321 9.30165V13.0704H12.3202ZM3.2538 5.26005C3.09118 5.26021 2.93011 5.22833 2.7798 5.16624C2.62949 5.10415 2.49288 5.01306 2.37777 4.89818C2.26266 4.78329 2.17131 4.64686 2.10893 4.49667C2.04655 4.34648 2.01436 4.18548 2.0142 4.02285C2.01405 3.86022 2.04592 3.69915 2.10801 3.54884C2.1701 3.39853 2.26119 3.26192 2.37608 3.14682C2.49096 3.03171 2.62739 2.94036 2.77758 2.87798C2.92777 2.81559 3.08878 2.78341 3.2514 2.78325C3.57985 2.78293 3.89497 2.9131 4.12744 3.14512C4.35991 3.37714 4.49069 3.692 4.491 4.02045C4.49132 4.34889 4.36115 4.66401 4.12913 4.89648C3.89711 5.12895 3.58225 5.25973 3.2538 5.26005ZM2.1842 13.0704H4.3218V6.19845H2.1834V13.0704H2.1842ZM13.3842 0.800049H1.1122C0.525805 0.800049 0.0498047 1.26485 0.0498047 1.83845V14.1608C0.0498047 14.7344 0.525805 15.2 1.1122 15.2H13.3842C13.9714 15.2 14.4498 14.7344 14.4498 14.1608V1.83845C14.4498 1.26485 13.9714 0.800049 13.3842 0.800049Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/nuxtjs.org/components/TeamMember.vue b/nuxtjs.org/components/TeamMember.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="flex flex-col w-48 items-center pb-12">
+    <NuxtImg :src="member.avatarUrl" class="h-24 w-24 rounded-full" />
+    <span class="light:text-sky-darker dark:text-white font-semibold pt-4">{{ member.name }}</span>
+    <span class="text-primary-green font-semibold">{{ member.role }}</span>
+    <span class="text-gray-400">{{ member.location }}</span>
+    <ul class="flex space-x-2">
+      <li v-for="(social, index) in member.socials" :key="index" class="text-gray-300 hover:text-sky-darker">
+        <div v-for="(href, value, i) in social" :key="i">
+          <ALink :href="href" :aria-label="value">
+            <Component :is="getSocialIcon(value)" class="h-5 w-5" />
+          </ALink>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api'
+
+export default defineComponent({
+  props: {
+    member: {
+      type: Object,
+      required: true
+    }
+  },
+  setup() {
+    function getSocialIcon(social: String) {
+      return `Icon${social.charAt(0).toUpperCase() + social.slice(1)}`
+    }
+
+    return { getSocialIcon }
+  }
+})
+</script>
diff --git a/nuxtjs.org/components/TeamSection.vue b/nuxtjs.org/components/TeamSection.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="py-16 d-container-content">
+    <div v-for="team in teams" :key="team.slug">
+      <TeamTitle :slug="team.slug" :name="team.name" class="text-center pb-16" />
+      <div class="flex justify-center">
+        <div class="flex flex-wrap justify-center pb-16">
+          <div v-for="member in team.members" :key="member.name">
+            <TeamMember :member="member" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, useContext, useFetch } from '@nuxtjs/composition-api'
+export default defineComponent({
+  setup() {
+    const { $docus } = useContext()
+    const teams = ref()
+    useFetch(async () => {
+      teams.value = await $docus
+        .search('/teams', { deep: true })
+        .where({ slug: { $in: ['core', 'community'] } })
+        .sortBy('position', 'asc')
+        .fetch()
+    })
+    return {
+      teams
+    }
+  }
+})
+</script>
diff --git a/nuxtjs.org/components/TeamTitle.vue b/nuxtjs.org/components/TeamTitle.vue
@@ -0,0 +1,22 @@
+<template>
+  <h2 class="text-display-4 font-serif">
+    <span class="italic capitalize text-primary-green">{{ slug }}</span> {{ name }}
+  </h2>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api'
+
+export default defineComponent({
+  props: {
+    slug: {
+      type: String,
+      required: true
+    },
+    name: {
+      type: String,
+      required: true
+    }
+  }
+})
+</script>
diff --git a/nuxtjs.org/content/0.docs/4.directory-structure/1.nuxt.md b/nuxtjs.org/content/0.docs/4.directory-structure/1.nuxt.md
@@ -1,8 +1,6 @@
 ---
 title: Nuxt build directory
-navigation: {
-  title: .nuxt
-}
+navigation.title: .nuxt
 category: directory-structure
 ---
 

diff --git a/nuxtjs.org/content/0.docs/4.directory-structure/10.plugins.md b/nuxtjs.org/content/0.docs/4.directory-structure/10.plugins.md
@@ -1,8 +1,6 @@
 ---
 title: Plugins directory
-navigation: {
-  title: plugins
-}
+navigation.title: plugins
 description: The `plugins` directory contains your Javascript plugins that you want to run before instantiating the root Vue.js Application.
 category: directory-structure
 csb_link_plugins_client: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/12_plugins_client?fontsize=14&hidenavigation=1&theme=dark

diff --git a/nuxtjs.org/content/0.docs/4.directory-structure/11.static.md b/nuxtjs.org/content/0.docs/4.directory-structure/11.static.md
@@ -1,8 +1,6 @@
 ---
 title: Static directory
-navigation: {
-  title: static
-}
+navigation.title: static
 description: The `static` directory is directly mapped to the server root () and contains files that likely won't be changed. All included files will be automatically served by Nuxt and are accessible through your project root URL.
 category: directory-structure
 csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/13_static?fontsize=14&hidenavigation=1&theme=dark

diff --git a/nuxtjs.org/content/0.docs/4.directory-structure/12.store.md b/nuxtjs.org/content/0.docs/4.directory-structure/12.store.md
@@ -1,8 +1,6 @@
 ---
 title: Store directory
-navigation: {
-  title: store
-}
+navigation.title: store
 description: The `store` directory contains your Vuex Store files. The Vuex Store comes with Nuxt.js out of the box but is disabled by default. Creating an `index.js`  file in this directory enables the store.
 category: directory-structure
 csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/14_store?fontsize=14&hidenavigation=1&theme=dark

diff --git a/nuxtjs.org/content/0.docs/4.directory-structure/13.nuxt-config.md b/nuxtjs.org/content/0.docs/4.directory-structure/13.nuxt-config.md
@@ -1,8 +1,6 @@
 ---
 title: Nuxt configuration file
-navigation: {
-  title: nuxt.config
-}
+navigation.title: nuxt.config
 description: By default, Nuxt.js is configured to cover most use cases. This default configuration can be overwritten with the nuxt.config.js file.
 category: directory-structure
 csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/15_nuxt-config?fontsize=14&hidenavigation=1&theme=dark

diff --git a/nuxtjs.org/content/0.docs/4.directory-structure/2.assets.md b/nuxtjs.org/content/0.docs/4.directory-structure/2.assets.md
@@ -1,8 +1,6 @@
 ---
 title: Assets directory
-navigation: {
-  title: assets
-}
+navigation.title: assets
 description: The `assets` directory contains your un-compiled assets such as Stylus or Sass files, images, or fonts.
 category: directory-structure
 csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/02_assets?fontsize=14&hidenavigation=1&theme=dark

diff --git a/nuxtjs.org/content/0.docs/4.directory-structure/3.components.md b/nuxtjs.org/content/0.docs/4.directory-structure/3.components.md
@@ -1,8 +1,6 @@
 ---
 title: Components directory
-navigation: {
-  title: components
-}
+navigation.title: components
 description: The components directory contains your Vue.js Components. Components are what makes up the different parts of your page and can be reused and imported into your pages, layouts and even other components.
 category: directory-structure
 csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/03_components?fontsize=14&hidenavigation=1&theme=dark

diff --git a/nuxtjs.org/content/0.docs/4.directory-structure/4.content.md b/nuxtjs.org/content/0.docs/4.directory-structure/4.content.md
@@ -1,8 +1,6 @@
 ---
 title: Content directory
-navigation: {
-  title: content
-}
+navigation.title: content
 description: Empower your Nuxt.js application with `@nuxt/content` module where you can write in a `content/` directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a **Git-based Headless CMS**.
 category: directory-structure
 ---

diff --git a/nuxtjs.org/content/0.docs/4.directory-structure/5.dist.md b/nuxtjs.org/content/0.docs/4.directory-structure/5.dist.md
@@ -1,8 +1,6 @@
 ---
 title: Dist directory
-navigation: {
-  title: dist
-}
+navigation.title: dist
 description: The `dist` folder, short for *distribution* folder. It is dynamically generated when using the `nuxt generate` commands and includes the generated production ready HTML files and assets that are necessary to deploy and run your statically generated Nuxt.js application.
 category: directory-structure
 csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/05_dist?fontsize=14&hidenavigation=1&theme=dark

diff --git a/nuxtjs.org/content/0.docs/4.directory-structure/6.layouts.md b/nuxtjs.org/content/0.docs/4.directory-structure/6.layouts.md
@@ -1,8 +1,6 @@
 ---
 title: Layouts directory
-navigation: {
-  title: layouts
-}
+navigation.title: layouts
 description: Layouts are a great help when you want to change the look and feel of your Nux app. Whether you want to include a sidebar or have distinct layouts for mobile and desktop.
 category: directory-structure
 csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/07_layouts?fontsize=14&hidenavigation=1&theme=dark

diff --git a/nuxtjs.org/content/0.docs/4.directory-structure/7.middleware.md b/nuxtjs.org/content/0.docs/4.directory-structure/7.middleware.md
@@ -1,8 +1,6 @@
 ---
 title: Middleware directory
-navigation: {
-  title: middleware
-}
+navigation.title: middleware
 description: The `middleware` directory contains your application middleware. Middleware lets you define custom functions that can be run before rendering either a page or a group of pages (layout).
 category: directory-structure
 csb_link_anonymous: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/09_middleware_anonymous?fontsize=14&hidenavigation=1&theme=dark

diff --git a/nuxtjs.org/content/0.docs/4.directory-structure/8.modules.md b/nuxtjs.org/content/0.docs/4.directory-structure/8.modules.md
@@ -1,8 +1,6 @@
 ---
 title: Modules directory
-navigation: {
-  title: modules
-}
+navigation.title: modules
 description: Nuxt.js provides a higher-order module system that makes it possible to extend the core. Modules are functions that are called sequentially when booting Nuxt.js.
 category: directory-structure
 csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/10_modules?fontsize=14&hidenavigation=1&theme=dark

diff --git a/nuxtjs.org/content/0.docs/4.directory-structure/9.pages.md b/nuxtjs.org/content/0.docs/4.directory-structure/9.pages.md
@@ -1,8 +1,6 @@
 ---
 title: Pages directory
-navigation: {
-  title: pages
-}
+navigation.title: pages
 description: The `pages` directory contains your Application Views and Routes. Nuxt.js reads all the `.vue` files inside this directory and automatically creates the  router configuration for you.
 category: directory-structure
 csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/11_pages?fontsize=14&hidenavigation=1&theme=dark

diff --git a/nuxtjs.org/content/0.docs/5.configuration-glossary/1.configuration-alias.md b/nuxtjs.org/content/0.docs/5.configuration-glossary/1.configuration-alias.md
@@ -1,8 +1,6 @@
 ---
 title: The alias Property
-navigation: {
-  title: alias
-}
+navigation.title: alias
 description: Nuxt.js allows you to use aliases to access custom directories within your JavaScript and CSS
 menu: alias
 category: configuration-glossary

diff --git a/....org/content/0.docs/5.configuration-glossary/10.configuration-extend-plugins.md b/....org/content/0.docs/5.configuration-glossary/10.configuration-extend-plugins.md
@@ -1,8 +1,6 @@
 ---
 title: The extendPlugins Property
-navigation: {
-  title: extendPlugins
-}
+navigation.title: extendPlugins
 description: The extendPlugins property lets you customize Nuxt.js plugins. ([options.plugins](/docs/configuration-glossary/configuration-plugins)).
 
 menu: extendPlugins

diff --git a/nuxtjs.org/content/0.docs/5.configuration-glossary/11.configuration-generate.md b/nuxtjs.org/content/0.docs/5.configuration-glossary/11.configuration-generate.md
@@ -1,8 +1,6 @@
 ---
 title: The generate Property
-navigation: {
-  title: generate
-}
+navigation.title: generate
 description: Configure the generation of your universal web application to a static web application.
 menu: generate
 category: configuration-glossary

diff --git a/nuxtjs.org/content/0.docs/5.configuration-glossary/12.configuration-global-name.md b/nuxtjs.org/content/0.docs/5.configuration-glossary/12.configuration-global-name.md
@@ -1,8 +1,6 @@
 ---
 title: The globalName Property
-navigation: {
-  title: globalName
-}
+navigation.title: globalName
 description: Nuxt.js lets you customize the global ID used in the main HTML template as well as the main Vue instance name and other options.
 menu: globalName
 category: configuration-glossary

diff --git a/nuxtjs.org/content/0.docs/5.configuration-glossary/13.configuration-head.md b/nuxtjs.org/content/0.docs/5.configuration-glossary/13.configuration-head.md
@@ -1,8 +1,6 @@
 ---
 title: The head Property
-navigation: {
-  title: head
-}
+navigation.title: head
 description: Nuxt.js let you define all default meta for your application inside `nuxt.config.js`, use the same `head` property
 menu: head
 category: configuration-glossary

diff --git a/nuxtjs.org/content/0.docs/5.configuration-glossary/14.configuration-hooks.md b/nuxtjs.org/content/0.docs/5.configuration-glossary/14.configuration-hooks.md
@@ -1,8 +1,6 @@
 ---
 title: The hooks Property
-navigation: {
-  title: hooks
-}
+navigation.title: hooks
 description: Hooks are [listeners to Nuxt events](/docs/internals-glossary/internals) that are typically used in Nuxt modules, but are also available in `nuxt.config.js`.
 menu: hooks
 category: configuration-glossary

diff --git a/nuxtjs.org/content/0.docs/5.configuration-glossary/15.configuration-ignore.md b/nuxtjs.org/content/0.docs/5.configuration-glossary/15.configuration-ignore.md
@@ -1,8 +1,6 @@
 ---
 title: The ignore Property
-navigation: {
-  title: ignore
-}
+navigation.title: ignore
 description: Define the ignore files for your Nuxt.js application
 menu: ignore
 category: configuration-glossary

diff --git a/nuxtjs.org/content/0.docs/5.configuration-glossary/16.configuration-loading.md b/nuxtjs.org/content/0.docs/5.configuration-glossary/16.configuration-loading.md
@@ -1,8 +1,6 @@
 ---
 title: The loading Property
-navigation: {
-  title: loading
-}
+navigation.title: loading
 description: Nuxt.js uses its own component to show a progress bar between the routes. You can customize it, disable it or create your own component.
 menu: loading
 category: configuration-glossary

diff --git a/...g/content/0.docs/5.configuration-glossary/17.configuration-loading-indicator.md b/...g/content/0.docs/5.configuration-glossary/17.configuration-loading-indicator.md
@@ -1,8 +1,6 @@
 ---
 title: The loading indicator Property
-navigation: {
-  title: loading indicator
-}
+navigation.title: loading indicator
 description: Show fancy loading indicator while page is loading!
 menu: loadingIndicator
 category: configuration-glossary

diff --git a/nuxtjs.org/content/0.docs/5.configuration-glossary/18.configuration-mode.md b/nuxtjs.org/content/0.docs/5.configuration-glossary/18.configuration-mode.md
@@ -1,8 +1,6 @@
 ---
 title: The mode Property
-navigation: {
-  title: mode
-}
+navigation.title: mode
 description: Change default nuxt mode
 menu: mode
 category: configuration-glossary

diff --git a/nuxtjs.org/content/0.docs/5.configuration-glossary/19.configuration-modern.md b/nuxtjs.org/content/0.docs/5.configuration-glossary/19.configuration-modern.md
@@ -1,8 +1,6 @@
 ---
 title: The modern Property
-navigation: {
-  title: modern
-}
+navigation.title: modern
 description: Build and server a modern bundle
 menu: modern
 category: configuration-glossary

diff --git a/nuxtjs.org/content/0.docs/5.configuration-glossary/2.configuration-build.md b/nuxtjs.org/content/0.docs/5.configuration-glossary/2.configuration-build.md
@@ -1,8 +1,6 @@
 ---
 title: The build Property
-navigation: {
-  title: build
-}
+navigation.title: build
 description: Nuxt.js lets you customize the webpack configuration for building your web application as you want.
 menu: build
 category: configuration-glossary