-
Notifications
You must be signed in to change notification settings - Fork 156
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* footer image * resources page; some tokenisation * themes page * video courses page * blog pages * update secondary text color in dark mode for index Co-authored-by: Sébastien Chopin <[email protected]> Co-authored-by: Yaël GUILLOUX <[email protected]>
- Loading branch information
3 people
authored
Jun 17, 2021
1 parent
a11edaa
commit 8b2a0f2
Showing
55 changed files
with
618 additions
and
133 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| <template> | ||
| <div class="px-6 my-8"> | ||
| <div class="flex flex-wrap grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6"> | ||
| <ContentCardTemplate | ||
| v-for="post in posts" | ||
| :key="post.id" | ||
| class="" | ||
| :title="post.title" | ||
| :description="post.description" | ||
| :image="post.imgUrl" | ||
| :slug="post.slug" | ||
| :tags="post.tags" | ||
| > | ||
| <div slot="footer" class="px-4 mb-4 mt-auto"> | ||
| <div class="flex items-center"> | ||
| <div class="flex mr-4"> | ||
| <a | ||
| v-for="(author, index) in post.authors" | ||
| :key="index" | ||
| :href="author.link" | ||
| target="_blank" | ||
| rel="noopener noindex nofollow" | ||
| :class="{ '-ml-4': index !== 0 }" | ||
| class="flex items-center justify-end rounded-full border-3 border-white dark:border-secondary-darker" | ||
| > | ||
| <NuxtImg | ||
| class="inline-block h-10 w-10 rounded-full" | ||
| height="32" | ||
| width="32" | ||
| :src="author.avatarUrl" | ||
| alt | ||
| /> | ||
| </a> | ||
| </div> | ||
| <div class="text-sm flex flex-col"> | ||
| <span class="font-bold">{{ post.authors.length > 1 ? 'Multiple Authors' : post.authors[0].name }}</span> | ||
| <time :datetime="post.date" class="font-medium mr-2 text-sm text-gray-400 dark:text-cloud"> | ||
| {{ formatDateByLocale($i18n.locale, post.date) }} | ||
| </time> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </ContentCardTemplate> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { defineComponent, ref, useContext, useFetch } from '@nuxtjs/composition-api' | ||
| export default defineComponent({ | ||
| setup() { | ||
| const { $docus } = useContext() | ||
| const posts = ref() | ||
| useFetch(async () => { | ||
| const documents = await $docus | ||
| .search('/blog', { deep: true }) | ||
| .where({ slug: { $ne: '' } }) | ||
| .sortBy('date', 'desc') | ||
| .fetch() | ||
| posts.value = documents | ||
| }) | ||
| const formatDateByLocale = (locale, d) => { | ||
| const currentLocale = locale || 'en' | ||
| const options = { year: 'numeric', month: 'long', day: 'numeric' } | ||
| return new Date(d).toLocaleDateString(currentLocale, options) | ||
| } | ||
| return { | ||
| posts, | ||
| formatDateByLocale | ||
| } | ||
| } | ||
| }) | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| <template> | ||
| <NuxtLink | ||
| tag="article" | ||
| :to="slug" | ||
| class="flex flex-col cursor-pointer shadow rounded-lg overflow-hidden dark:bg-secondary-darkest" | ||
| > | ||
| <div class="aspect-w-16 aspect-h-9 bg-gray-100 dark:bg-secondary-darker mb-4"> | ||
| <NuxtImg :src="image" width="864" height="378" :alt="title" /> | ||
| </div> | ||
| <div v-if="tags.length" class="px-4 mb-1"> | ||
| <span v-for="(tag, i) in tags" :key="tag" class="text-gray-400 dark:text-cloud font-medium text-sm"> | ||
| <span>{{ tag }}</span> | ||
| <span v-if="(i === 0 && tags.length > 1) || i !== tags.length - 1"> – </span> | ||
| </span> | ||
| </div> | ||
| <h1 class="font-bold text-body-xl mb-2 px-4"> | ||
| <NuxtLink :to="slug">{{ title }}</NuxtLink> | ||
| </h1> | ||
| <p class="pb-8 px-4 text-gray-500 dark:text-cloud-lighter">{{ description }}</p> | ||
| <slot name="footer" /> | ||
| </NuxtLink> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { defineComponent } from '@nuxtjs/composition-api' | ||
| export default defineComponent({ | ||
| props: { | ||
| title: { | ||
| type: String, | ||
| default: '' | ||
| }, | ||
| description: { | ||
| type: String, | ||
| default: '' | ||
| }, | ||
| image: { | ||
| type: String, | ||
| default: '' | ||
| }, | ||
| slug: { | ||
| type: String, | ||
| default: '' | ||
| }, | ||
| tags: { | ||
| type: Array, | ||
| default: () => [] | ||
| } | ||
| } | ||
| }) | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
8b2a0f2There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
nuxtjs-with-docus – ./
nuxtjs-with-docus-nuxtlabs.vercel.app
nuxtjs.docus.com
nuxtjs-with-docus.vercel.app
nuxtjs-with-docus-git-dev-nuxtlabs.vercel.app