Skip to content

Commit

Permalink
✨ (theme) update templates (wip)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tahul
Tahul committed May 26, 2021
1 parent 23e33af commit 22891bc
Show file tree
Hide file tree
Showing 8 changed files with 141 additions and 169 deletions.
157 changes: 68 additions & 89 deletions src/defaultTheme/components/templates/Blog.vue
View file
Original file line number Diff line number Diff line change
@@ -1,103 +1,82 @@
<template>
<AppContainer fluid>
<div class="max-w-2xl mx-auto py-24">
<div>
<div class="max-w-2xl mx-auto py-24">
<div>
<h1 class="px-4 sm:px-0 font-bold text-4xl sm:w-2/3 ml-auto mb-12">Blog</h1>
</div>

<article v-for="post in posts" :key="post.slug" class="mb-16 flex flex-col items-end">
<div class="flex flex-col sm:flex-row mb-4 w-full">
<div class="flex sm:flex-col items-center sm:items-end justify-between sm:w-1/3 px-4 sm:pr-4 mb-4 sm:mb-0">
<div class="sm:flex-1">
<div
class="sticky top-header text-right text-sm text-gray-400 dark:text-gray-500 font-medium py-2 -my-2"
>
{{ formatDateByLocale($i18n.locale, post.date) }}
</div>
</div>
<h1 class="px-4 sm:px-0 font-bold text-4xl sm:w-2/3 ml-auto mb-12">Blog</h1>
</div>

<!-- only show author on mobile layout -->
<div class="flex sm:hidden">
<span
v-for="(author, index) in post.authors"
:key="index"
class="flex items-center justify-end -ml-2 rounded-full border border-gray-300 dark:border-gray-500"
>
<NuxtImg
class="inline-block h-6 w-6 rounded-full"
height="24"
width="24"
:src="author.avatarUrl"
alt
/>
</span>
</div>
<article v-for="post in posts" :key="post.slug" class="mb-16 flex flex-col items-end">
<div class="flex flex-col sm:flex-row mb-4 w-full">
<div class="flex sm:flex-col items-center sm:items-end justify-between sm:w-1/3 px-4 sm:pr-4 mb-4 sm:mb-0">
<div class="sm:flex-1">
<div class="sticky top-header text-right text-sm text-gray-400 dark:text-gray-500 font-medium py-2 -my-2">
{{ formatDateByLocale($i18n.locale, post.date) }}
</div>
</div>

<NuxtLink
class="sm:w-2/3 hover:opacity-75 transition-opacity duration-100"
:to="$contentLocalePath(post.to)"
<!-- only show author on mobile layout -->
<div class="flex sm:hidden">
<span
v-for="(author, index) in post.authors"
:key="index"
class="flex items-center justify-end -ml-2 rounded-full border border-gray-300 dark:border-gray-500"
>
<div class="aspect-w-16 aspect-h-9 bg-gray-100 dark:bg-gray-800">
<NuxtImg :src="post.imgUrl" width="864" height="378" alt="" />
</div>
</NuxtLink>
<NuxtImg class="inline-block h-6 w-6 rounded-full" height="24" width="24" :src="author.avatarUrl" alt />
</span>
</div>
</div>

<div class="flex flex-col sm:flex-row w-full">
<div
class="
hidden
sm:flex sm:flex-col
items-center
sm:items-end
justify-between
sm:w-1/3
px-4
sm:pr-4
mb-4
sm:mb-0
"
>
<!-- only show sticky author on desktop layout -->
<div class="sticky top-header flex items-center py-2 -my-1.5">
<span
v-for="(author, index) in post.authors"
:key="index"
class="flex items-center justify-end -ml-2 rounded-full border border-gray-300 dark:border-gray-600"
>
<NuxtImg
class="inline-block h-6 w-6 rounded-full"
height="24"
width="24"
:src="author.avatarUrl"
alt
/>
</span>
</div>
</div>
<div class="sm:w-2/3 px-4 sm:px-0">
<NuxtLink
class="hover:text-gray-500 hover:dark:text-gray-400 transition-color duration-100"
:to="$contentLocalePath(post.to)"
>
<h1 class="text-2xl font-semibold mb-2">{{ post.title }}</h1>
</NuxtLink>
<NuxtLink class="sm:w-2/3 hover:opacity-75 transition-opacity duration-100" :to="$contentLocalePath(post.to)">
<div class="aspect-w-16 aspect-h-9 bg-gray-100 dark:bg-gray-800">
<NuxtImg :src="post.imgUrl" width="864" height="378" alt="" />
</div>
</NuxtLink>
</div>

<p class="text-gray-600 dark:text-gray-400 mb-4">{{ post.description }}</p>
<NuxtLink
class="font-medium hover:text-gray-500 hover:dark:text-gray-400 transition-color duration-100"
:to="$contentLocalePath(post.to)"
>
<span>Read More →</span>
</NuxtLink>
</div>
<div class="flex flex-col sm:flex-row w-full">
<div
class="
hidden
sm:flex sm:flex-col
items-center
sm:items-end
justify-between
sm:w-1/3
px-4
sm:pr-4
mb-4
sm:mb-0
"
>
<!-- only show sticky author on desktop layout -->
<div class="sticky top-header flex items-center py-2 -my-1.5">
<span
v-for="(author, index) in post.authors"
:key="index"
class="flex items-center justify-end -ml-2 rounded-full border border-gray-300 dark:border-gray-600"
>
<NuxtImg class="inline-block h-6 w-6 rounded-full" height="24" width="24" :src="author.avatarUrl" alt />
</span>
</div>
</article>
</div>
<div class="sm:w-2/3 px-4 sm:px-0">
<NuxtLink
class="hover:text-gray-500 hover:dark:text-gray-400 transition-color duration-100"
:to="$contentLocalePath(post.to)"
>
<h1 class="text-2xl font-semibold mb-2">{{ post.title }}</h1>
</NuxtLink>

<p class="text-gray-600 dark:text-gray-400 mb-4">{{ post.description }}</p>
<NuxtLink
class="font-medium hover:text-gray-500 hover:dark:text-gray-400 transition-color duration-100"
:to="$contentLocalePath(post.to)"
>
<span>Read More →</span>
</NuxtLink>
</div>
</div>
</div>
</AppContainer>
</article>
</div>
</template>

<script>
Expand Down
108 changes: 52 additions & 56 deletions src/defaultTheme/components/templates/BlogPost.vue
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,61 @@
<template>
<AppContainer fluid>
<div>
<div class="max-w-2xl mx-auto py-24 relative">
<NuxtLink
:to="$contentLocalePath('/blog')"
class="
absolute
top-0
left-0
px-4
mt-12
leading-none
text-gray-400
dark:text-gray-600
hover:text-gray-500
hover:dark:text-gray-400
font-medium
transition-color
duration-100
"
>
<span class="">← Back</span>
</NuxtLink>
<div class="mb-6 px-4">
<h1 class="text-4xl font-bold mb-6">{{ page.title }}</h1>
<p class="mb-4 text-gray-500 dark:text-gray-400 font-medium">
{{ page.description }}
</p>
<div class="max-w-2xl mx-auto py-24 relative">
<NuxtLink
:to="$contentLocalePath('/blog')"
class="
absolute
top-0
left-0
px-4
mt-12
leading-none
text-gray-400
dark:text-gray-600
hover:text-gray-500
hover:dark:text-gray-400
font-medium
transition-color
duration-100
"
>
<span class="">← Back</span>
</NuxtLink>
<div class="mb-6 px-4">
<h1 class="text-4xl font-bold mb-6">{{ page.title }}</h1>
<p class="mb-4 text-gray-500 dark:text-gray-400 font-medium">
{{ page.description }}
</p>

<div class="flex sm:flex-row items-center">
<div v-if="page.date" class="font-medium mr-2 text-sm text-gray-400 dark:text-gray-500">
{{ formatDateByLocale($i18n.locale, page.date) }}
</div>
<div v-else class="font-medium mr-2 text-sm text-yellow-600 dark:text-yellow-500">
⚠️ Please add
<ProseCodeInline>date: {{ today }}</ProseCodeInline>
in the page front-matter`
</div>
<div v-if="page.authors && page.authors.length" class="text-sm text-gray-400 dark:text-gray-700">|</div>
<div class="flex ml-4">
<span
v-for="(author, index) in page.authors"
:key="index"
class="flex items-center justify-end -ml-2 rounded-full border border-gray-300 dark:border-gray-500"
>
<NuxtImg class="inline-block h-6 w-6 rounded-full" height="24" width="24" :src="author.avatarUrl" alt />
</span>
</div>
</div>
<div class="flex sm:flex-row items-center">
<div v-if="page.date" class="font-medium mr-2 text-sm text-gray-400 dark:text-gray-500">
{{ formatDateByLocale($i18n.locale, page.date) }}
</div>

<div class="md:-mx-18 lg:-mx-24 aspect-w-16 aspect-h-9 bg-gray-100 dark:bg-gray-800 mb-8">
<NuxtImg :src="imgUrl" width="864" height="378" alt="" class="object-cover" />
<div v-else class="font-medium mr-2 text-sm text-yellow-600 dark:text-yellow-500">
⚠️ Please add
<ProseCodeInline>date: {{ today }}</ProseCodeInline>
in the page front-matter`
</div>
<div v-if="page.authors && page.authors.length" class="text-sm text-gray-400 dark:text-gray-700">|</div>
<div class="flex ml-4">
<span
v-for="(author, index) in page.authors"
:key="index"
class="flex items-center justify-end -ml-2 rounded-full border border-gray-300 dark:border-gray-500"
>
<NuxtImg class="inline-block h-6 w-6 rounded-full" height="24" width="24" :src="author.avatarUrl" alt />
</span>
</div>

<BlogpostToc :toc="page.toc.links" :title="page.toc.title" class="mb-8" />

<NuxtContent :document="page" class="px-4 docus-content" />
</div>
</div>
</AppContainer>

<div class="md:-mx-18 lg:-mx-24 aspect-w-16 aspect-h-9 bg-gray-100 dark:bg-gray-800 mb-8">
<NuxtImg :src="imgUrl" width="864" height="378" alt="" class="object-cover" />
</div>

<BlogpostToc :toc="page.toc.links" :title="page.toc.title" class="mb-8" />

<NuxtContent :document="page" class="px-4 docus-content" />
</div>
</template>

<script>
Expand Down
18 changes: 8 additions & 10 deletions src/defaultTheme/components/templates/Docs.vue
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
<template>
<AppContainer aside>
<AppPage>
<PageContent :page="page" />
<AppPage>
<PageContent :page="page" />

<hr class="mt-10 mb-4 border-gray-100 dark:border-gray-800" />
<hr class="mt-10 mb-4 border-gray-100 dark:border-gray-800" />

<PagePrevNext :prev="prev" :next="next" />
<PagePrevNext :prev="prev" :next="next" />

<template #toc>
<PageToc v-if="!page.hideToc" :title="page.toc.title" :toc="page.toc.links" />
</template>
</AppPage>
</AppContainer>
<template #toc>
<PageToc v-if="!page.hideToc" :title="page.toc.title" :toc="page.toc.links" />
</template>
</AppPage>
</template>

<script>
Expand Down
10 changes: 4 additions & 6 deletions src/defaultTheme/components/templates/Error.vue
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
<template>
<AppContainer>
<AppPage prose class="min-h-screen-sm">
<h1>{{ error.message }}</h1>
<p v-if="error.statusCode === 404">Go back <NuxtLink to="/">home</NuxtLink>.</p>
</AppPage>
</AppContainer>
<AppPage prose class="min-h-screen-sm">
<h1>{{ error.message }}</h1>
<p v-if="error.statusCode === 404">Go back <NuxtLink to="/">home</NuxtLink>.</p>
</AppPage>
</template>

<script>
Expand Down
4 changes: 2 additions & 2 deletions src/defaultTheme/components/templates/Landing.vue
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<template>
<AppContainer fluid aside>
<AppTemplate>
<template #aside>
<AppAside class="block lg:hidden" />
</template>

<NuxtContent :document="page" />
</AppContainer>
</AppTemplate>
</template>

<script>
Expand Down
5 changes: 3 additions & 2 deletions src/defaultTheme/components/templates/Page.vue
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
<template>
<AppContainer aside>
<AppTemplate aside>
<template #aside>
<!-- TODO: navigation instead -->
<AppAside class="block lg:hidden" />
</template>

<AppPage>
<PageContent :page="page" />

<template #toc>
<PageToc v-if="page.toc" :title="page.toc.title" :toc="page.toc.links" />
</template>
</AppPage>
</AppContainer>
</AppTemplate>
</template>

<script>
Expand Down
4 changes: 2 additions & 2 deletions src/defaultTheme/components/templates/PreLaunch.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<AppContainer fluid :footer="false">
<AppTemplate fluid :footer="false">
<NuxtContent :document="page" />
</AppContainer>
</AppTemplate>
</template>

<script>
Expand Down
4 changes: 2 additions & 2 deletions src/defaultTheme/components/templates/Releases.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<AppContainer aside>
<AppTemplate aside>
<AppPage>
<div class="mb-10">
<h1
Expand All @@ -24,7 +24,7 @@
<PageToc :toc="toc" title="Versions" />
</template>
</AppPage>
</AppContainer>
</AppTemplate>
</template>

<script>
Expand Down

0 comments on commit 22891bc

Please sign in to comment.