Skip to content

Commit

Permalink
content: migrate docs and examples folder from current website (#406)
Browse files Browse the repository at this point in the history 
* content: WIP on current doc migration

* fix: header navigation

* chore: update testimnonials

* content: WIP on docs migration

* content: clean frontmatter

* 🐛 (directory structure) fix nav and meta titles

* content: Remove position on missed file

* content: WIP on examples

* content: Structure example folder

* 🐛 (configuration glossary) fix nav and meta title

* docs: add Evan quote

* docs: NuxtJS -> Nuxt

* 🐛 (internals glossary) fix nav and meta titles

* content: Migrate components glossary

* content: migrate deployment folder

Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>
Co-authored-by: Florent <flo@nuxtjs.com>
Co-authored-by: Yaël Guilloux <yael.guilloux@gmail.com>
  • Loading branch information
@clemcode @atinux
@Flosciante @Tahul
4 people authored Jun 10, 2021
1 parent c4bab79 commit 835b878
Show file tree
Hide file tree
Showing 352 changed files with 14,402 additions and 95 deletions.
63 changes: 3 additions & 60 deletions nuxtjs.org/components/HeaderNavigation.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,50 +16,15 @@
'mt-4': $route.path !== '/'
}"
>
{{ link.slug }}
{{ link.title }}
</NuxtLink>
<div v-show="hover && itemIndex === index">
<div class="dropdown flex items-center justify-center w-52 -mt-2">
<img src="~/static/img/header/polygon.svg" class="w-5 h-5" />
</div>
<ul
class="light:bg-white dark:bg-secondary light:border rounded-md border-gray-100 py-2 dropdown"
>
<!-- TODO: Remove the filter -->
<li
v-for="(nav, i) in link.children.filter(
(item) => item.slug && item.slug !== ``
)"
:key="nav.slug"
>
<NuxtLink
:to="$contentLocalePath(nav.navigation.redirect || nav.to)"
class="mx-2 rounded-md capitalize p-2 flex justify-start items-center h-full w-52 space-x-4 light:hover:bg-gray-100 dark:hover:bg-secondary-light"
>
<img
:src="`/img/header/dropdown-gem-${
i + 1 > 4 ? '4' : i + 1
}.svg`"
class="w-1/5"
/>
<span> {{ nav.slug }} </span>
</NuxtLink>
</li>
</ul>
</div>
</li>
</ul>
</div>
</template>

<script>
import {
computed,
defineComponent,
useRoute,
ref,
useContext
} from '@nuxtjs/composition-api'
import { computed, defineComponent, useRoute, ref, useContext } from '@nuxtjs/composition-api'
export default defineComponent({
setup() {
Expand All @@ -72,9 +37,7 @@ export default defineComponent({
const currentNav = computed(() => $docus.get({ depth: 1 }).links)
// computed
const headerLinks = computed(() =>
currentNav.value.filter((link) => link.slug !== '')
)
const headerLinks = computed(() => currentNav.value.filter(link => link.slug !== '' && link.children.length))
const currentSlug = computed(() => {
return route.value.path !== '/' && route?.value?.params?.pathMatch
Expand Down Expand Up @@ -102,29 +65,9 @@ export default defineComponent({
.nuxt-link-active {
color: rgba(52, 211, 153);
}
.dropdown {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.menu li {
display: block;
position: relative;
}
.menu li ul {
position: absolute;
left: 0;
margin: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.2s;
}
.fade-enter,
.fade-leave-active {
opacity: 0;
}
</style>
74 changes: 39 additions & 35 deletions nuxtjs.org/components/HomeCommunity.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,47 +18,51 @@
<template #section-content>
<SectionContent class="col-span-12 items-center pt-20 pb-60">
<template #category>
<ALabel tag="span" class="text-primary-green font-bold text-lg"
>Community</ALabel
>
<ALabel tag="span" class="text-primary-green font-bold text-lg">Community</ALabel>
</template>
<template #title>
<SectionTitle class="text-center font-serif" size="sm"
>Developer love it</SectionTitle
>
<SectionTitle class="text-center font-serif" size="sm">Developer love it</SectionTitle>
</template>
<template #paragraph>
<SectionDescription class="pb-16 text-center" size="md"
>Be part of the Nuxt.js community and help us Nuxtify the
world.</SectionDescription
>Be part of the Nuxt.js community and help us Nuxtify the world.</SectionDescription
>
</template>
<template #content>
<ul
class="grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-8 lg:gap-20 pb-8 sm:mx-20 md:mx-0"
>
<ul class="grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-8 lg:gap-20 pb-8 sm:mx-20 md:mx-0">
<li
v-for="testimonial in testimonials"
:key="testimonial.author"
class="relative flex flex-col items-center space-y-3 border-3 border-gray-200 rounded-lg px-4 pb-6"
class="
relative
flex flex-col
items-center
justify-between
space-y-4
border-3 border-gray-200
rounded-lg
p-4
"
>
<img
:src="`/img/home/community/${testimonial.icon_author}.png`"
class="absolute h-12 bottom-0 -mb-9"
/>
<img
:src="`/img/home/community/${testimonial.icon_job}.svg`"
class="md:hidden lg:block absolute h-7 bottom-5 right-0 mr-4 mb-4"
/>
<ALabel tag="p" class="text-center px-4 xl:px-16 2xl:px-12">{{
testimonial.testimonial
}}</ALabel>
<ALabel tag="span" class="font-bold text-center text-base">{{
testimonial.author
}}</ALabel>
<ALabel tag="span" class="text-center text-sm">{{
testimonial.job
}}</ALabel>
<ALabel tag="p" class="text-left" v-html="testimonial.testimonial"></ALabel>
<div class="flex w-full justify-between align-middle">
<img
:src="`/img/home/community/${testimonial.icon_author}.png`"
width="48"
height="48"
class="h-12 w-12"
/>
<div class="flex flex-1 pl-4 text-left flex-col">
<ALabel tag="span" class="font-bold text-base">{{ testimonial.author }}</ALabel>
<ALabel tag="span" class="text-sm">{{ testimonial.job }}</ALabel>
</div>
<img
:src="`/img/home/community/${testimonial.icon_job}.svg`"
width="28"
height="28"
class="hidden xl:block"
/>
</div>
</li>
</ul>
</template>
Expand Down Expand Up @@ -88,26 +92,26 @@ export default defineComponent({
const testimonials = [
{
testimonial:
'Just migrated a few SPAs to @NuxtJS. Literally impossible to make the process any easier. Super impressive.',
'Nuxt offers a compelling solution and a great ecosystem to help you ship fullstack Vue apps that are performant and SEO friendly. The flexibility to choose between SSR and SSG is icing on the cake.',
author: 'Evan You',
icon_author: 'evan',
job: 'Creator of VueJS',
job: 'Creator of Vue.js',
icon_job: 'vue'
},
{
testimonial:
'Just migrated a few SPAs to @NuxtJS. Literally impossible to make the process any easier. Super impressive.',
'Nuxt has outstanding developer productivity, experience, and performance right out of the gate!<br/>There’s so much attention to detail, ensuring teams have everything at their fingertips to productively build all manners of applications.',
author: 'Sarah Drasner',
job: 'Core Team of VueJS',
job: 'Core Team of Vue.js',
icon_author: 'sarah',
icon_job: 'vue'
},
{
testimonial:
'Just migrated a few SPAs to @NuxtJS. Literally impossible to make the process any easier. Super impressive.',
'Nuxt is a fantastic choice for teams building a production-grade product on the web. It aims to bake in performance best-practices while maintaining excellent Vue.js DX.',
author: 'Addy Osmani',
job: 'Chief Engineer of Chrome',
icon_author: 'osman',
icon_author: 'addy',
icon_job: 'google'
}
]
Expand Down
Loading

0 comments on commit 835b878

Please sign in to comment.