Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: tokenise blogpost #540

Merged
merged 1 commit into from
Jul 11, 2021
Merged

fix: tokenise blogpost #540

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 5 additions & 16 deletions src/defaultTheme/components/organisms/blog/BlogpostToc.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,7 @@
<template>
<div
v-if="toc.length"
class="
sticky
z-10
px-4
text-sm
border-b border-gray-100 border-dashed
top-header
dark:border-gray-800
d-blur-header d-page-mobile-toc-bg
"
class="sticky z-10 px-4 text-sm border-dashed top-header d-border-header d-blur-header d-page-mobile-toc-bg"
>
<button
class="
Expand All @@ -30,7 +21,7 @@
>
<span class="mr-2">{{ title || $t('toc.title') }}</span>
<IconChevronRight
class="w-4 h-4 text-gray-400 transition-transform duration-100 transform"
class="w-4 h-4 d-tertiary-text transition-transform duration-100 transform"
:class="[showMobileToc ? 'rotate-90' : 'rotate-0']"
/>
</button>
Expand All @@ -39,12 +30,10 @@
<li v-for="link of filteredToc" :key="link.id" @click="showMobileToc = false">
<a
:href="`#${link.id}`"
class="block py-1 transition-colors duration-100 transform scrollactive-item"
class="block py-1 transition-colors duration-100 transform"
:class="{
'text-gray-600 dark:text-gray-300 hover:text-primary-400 dark:hover:text-primary-400':
activeHeadings.includes(link.id),
'text-gray-400 dark:text-gray-500 hover:text-primary-500 dark:hover:text-primary-400':
!activeHeadings.includes(link.id)
'd-secondary-text-active hover:d-secondary-text-hover': activeHeadings.includes(link.id),
'd-secondary-text hover:d-secondary-text-hover': !activeHeadings.includes(link.id)
}"
@click.prevent="scrollToHeading(link.id, '--blogpost-scroll-margin-block')"
>{{ link.text }}</a
Expand Down
10 changes: 5 additions & 5 deletions src/defaultTheme/components/templates/BlogPost.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
leading-none
text-gray-900
dark:text-gray-100
hover:text-gray-500 hover:dark:text-gray-400
hover:d-secondary-text
font-medium
"
>← Back</span
Expand All @@ -34,25 +34,25 @@
<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 v-if="page.authors && page.authors.length" class="text-sm d-tertiary-text">|</div>
<div class="flex ml-4 sm:ml-2">
<a
v-for="(author, index) in page.authors"
:key="index"
:href="author.link"
target="_blank"
rel="noopener noindex nofollow"
class="flex items-center justify-end -ml-2 sm:ml-0 sm:mr-2"
class="flex items-center justify-end -ml-2 sm:ml-0 sm:mr-2 hover:d-secondary-text"
>
<NuxtImg
class="rounded-full border border-gray-300 dark:border-gray-700 inline-block h-8 w-8 sm:mr-1"
class="rounded-full border d-border-tertiary inline-block h-8 w-8 sm:mr-1"
height="32"
width="32"
:src="author.avatarUrl"
:alt="author.name"
:title="author.name"
/>
<span class="hidden sm:inline-block font-medium text-sm text-gray-800 dark:text-gray-300">
<span class="hidden sm:inline-block font-medium text-sm">
{{ author.name }}
</span>
</a>
Expand Down
1 change: 1 addition & 0 deletions src/defaultTheme/settings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ const defaultThemeSettings = {
'd-secondary-text': 'text-gray-500 dark:text-gray-400',
'd-secondary-text-hover': 'text-primary-500 dark:text-primary-400',
'd-tertiary-text': 'text-gray-400 dark:text-gray-500',
'd-border-tertiary': 'border-gray-400 dark:border-gray-500',
'd-primary-text-hover': 'text-gray-600 dark:text-gray-400',
'd-secondary-text-active': 'text-gray-900 dark:text-gray-300',
'd-prose-code-inline-bg': 'bg-gray-100 dark:bg-gray-800',
Expand Down