Skip to content

Commit 041623b

Browse files
ktquezktquez
committed
Centering post page
1 parent d726165 commit 041623b

File tree

5 files changed

+101
-120
lines changed

5 files changed

+101
-120
lines changed

‎src/.vuepress/config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ module.exports = {
1717
themeConfig: require('./config/themeConfig'),
1818
markdown: {
1919
anchor: {
20-
permalinkAttrs: () => ({ 'aria-hidden': 'true', tabindex: '-1' })
20+
permalink: false
2121
},
2222
extendMarkdown: md => {
2323
md.renderer.rules.table_open = () => '<div class="table-wrapper" tabindex="0">\n<table>\n'

‎src/.vuepress/theme/layouts/Post.vue‎

Lines changed: 98 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,106 @@
11
<template>
22
<Full>
33
<div
4-
class="container z-10 mx-auto post-page"
4+
class="z-10 post-page"
55
itemscope
66
itemtype="https://schema.org/Blog"
77
>
88
<article
99
itemscope
1010
itemprop="blogPost"
1111
itemtype="https://schema.org/BlogPosting"
12-
class="px-6 pb-24 mt-6 mb-24 xl:px-4"
12+
class="pb-24 mb-24"
1313
>
1414
<meta
1515
itemprop="mainEntityOfPage"
1616
:content="$themeConfig.url + post.path"
1717
>
18-
<BackTo
19-
class="py-2 -ml-4"
20-
:text="`${$themeLocaleConfig.backToText} posts`"
21-
:to="`${$localePath}posts/`"
22-
/>
23-
<HeaderFullPage>
24-
<template v-slot:cardTitle>
25-
{{ $page.title }}
26-
</template>
27-
28-
<template v-slot:cardFooter>
29-
<time
30-
:datetime="post.date.datetime"
31-
itemprop="datePublished"
32-
>
33-
{{ post.date.short }}
34-
</time>
35-
<span
36-
itemprop="author"
37-
itemscope
38-
itemtype="https://schema.org/Person"
39-
>
40-
<RouterLink
41-
v-if="post.author"
42-
ref="authors"
43-
rel="author"
44-
itemprop="url"
45-
:to="{ path: '/authors/', hash: post.author.username }"
46-
class="relative flex hover:underline"
47-
style="top: 6px;"
48-
>
49-
<div class="w-8 h-8 mr-2 overflow-hidden rounded-full">
50-
<img
51-
:src="post.author.avatar"
52-
:alt="`Avatar ${post.author.name}`"
53-
class="object-cover object-top w-full h-fl"
54-
>
55-
</div>
56-
<span class="mt-1">
57-
<span class="sr-only">Post by </span>
58-
<span itemprop="name">{{ post.author.name }}</span>
59-
</span>
60-
</RouterLink>
61-
</span>
62-
</template>
63-
</HeaderFullPage>
6418
<meta
6519
itemprop="dateModified"
6620
:content="post.updated_at"
6721
>
68-
69-
<section
70-
v-show="post.summary"
71-
class="my-10 text-lg leading-9 post-page-summary sm:px-5 md:mx-auto lg:mx-0 max-char"
72-
role="region"
73-
:aria-label="$themeLocaleConfig.a11y.landmarks.post.summary"
22+
<header
23+
class="w-full py-20 border-b border-solid bg-primary border-secondary"
24+
aria-labelledby="title-post"
7425
>
75-
<span itemprop="description">
26+
<div class="container max-w-2xl mx-auto">
27+
<h1
28+
id="title-post"
29+
class="text-4xl font-bold"
30+
>
31+
{{ $page.title }}
32+
</h1>
33+
<aside
34+
role="note"
35+
class="flex items-center mt-4 text-sm"
36+
>
37+
<!-- <span class="uppercase">3 min</span> -->
38+
<div
39+
itemprop="author"
40+
itemscope
41+
itemtype="https://schema.org/Person"
42+
>
43+
<RouterLink
44+
v-if="post.author"
45+
ref="authors"
46+
rel="author"
47+
itemprop="url"
48+
:to="{ path: '/authors/', hash: post.author.username }"
49+
class="relative flex hover:underline"
50+
style="top: 2px;"
51+
>
52+
<div class="w-8 h-8 mr-2 overflow-hidden rounded-full">
53+
<img
54+
:src="post.author.avatar"
55+
:alt="`Avatar ${post.author.name}`"
56+
class="object-cover object-top w-full h-fl"
57+
>
58+
</div>
59+
<span class="mt-1">
60+
<span class="sr-only">Post by </span>
61+
<span itemprop="name">{{ post.author.name }}</span>
62+
</span>
63+
</RouterLink>
64+
</div>
65+
<div class="w-6 mx-4 border-b-2 border-solid rounded border-accent-primary" />
66+
<time
67+
:datetime="post.date.datetime"
68+
class="uppercase"
69+
itemprop="datePublished"
70+
>
71+
{{ post.date.short }}
72+
</time>
73+
</aside>
74+
</div>
75+
</header>
76+
77+
<div class="container max-w-2xl mx-auto">
78+
<p
79+
v-show="post.summary"
80+
class="mt-10 text-lg leading-9 post-page-summary"
81+
itemprop="description"
82+
>
7683
{{ post.summary }}
77-
</span>
78-
</section>
79-
80-
<TableOfContents
81-
v-if="$frontmatter.toc !== 0"
82-
:key="$route.path"
83-
:title="$themeLocaleConfig.toc.title"
84-
title-tag="h2"
85-
class="my-10 lg:hidden"
86-
/>
87-
88-
<hr v-show="post.summary">
89-
90-
<section
91-
class="flex justify-between"
92-
role="region"
93-
aria-label="Content post"
94-
>
95-
<div class="w-full max-w-3xl lg:w-auto">
96-
<Content
97-
itemprop="articleBody"
98-
class="sm:px-5 md:mx-auto lg:mx-0"
99-
/>
84+
</p>
85+
86+
<hr
87+
v-show="post.summary"
88+
class="my-10"
89+
>
90+
91+
<TableOfContents
92+
v-if="$frontmatter.toc !== 0"
93+
:key="$route.path"
94+
:title="$themeLocaleConfig.toc.title"
95+
title-tag="h2"
96+
class="my-10"
97+
/>
98+
99+
<section
100+
role="region"
101+
aria-label="Content article"
102+
>
103+
<Content itemprop="articleBody" />
100104

101105
<hr class="my-16">
102106

@@ -105,43 +109,30 @@
105109
:title="post.title"
106110
:summary="post.summary"
107111
horizontal
108-
class="lg:hidden"
109112
/>
110113

111-
<hr class="my-16 lg:hidden">
114+
<hr class="my-16">
112115

113116
<div class="disqus-section">
114-
<Disqus shortname="vue-a11y-test" />
117+
<Disqus v-bind="disqus" />
115118
</div>
116119

117120
<hr class="my-16">
118121

119122
<div class="webmentions-section">
120123
<WebMentions />
121124
</div>
122-
</div>
123-
<RightNavigation class="mt-16 ml-16 lg:block post-page-toc">
124-
<ShareLinks
125-
class="mt-16"
126-
:path="post.path"
127-
:title="post.title"
128-
:summary="post.summary"
129-
/>
130-
</RightNavigation>
131-
</section>
125+
</section>
126+
</div>
132127
</article>
133128
</div>
134129
</Full>
135130
</template>
136131

137132
<script>
138133
import { computed } from '@vue/composition-api'
139-
import { Comment } from '@vuepress/plugin-blog/lib/client/components'
140134
import { Disqus } from 'vue-disqus'
141135
142-
import BackTo from '@/theme/components/BackTo'
143-
import HeaderFullPage from '@/theme/components/HeaderFullPage'
144-
import RightNavigation from '@/theme/components/RightNavigation'
145136
import ShareLinks from '@/theme/components/ShareLinks'
146137
import TableOfContents from '@/theme/components/TableOfContents'
147138
import WebMentions from '@/theme/components/WebMentions'
@@ -150,14 +141,10 @@ export default {
150141
name: 'Post',
151142
152143
components: {
153-
BackTo,
154144
Disqus,
155-
Comment,
156-
HeaderFullPage,
157145
ShareLinks,
158146
WebMentions,
159-
TableOfContents,
160-
RightNavigation
147+
TableOfContents
161148
},
162149
163150
setup (_, { root }) {
@@ -174,21 +161,19 @@ export default {
174161
}
175162
}))
176163
164+
const disqus = {
165+
shortname: 'vue-a11y-test',
166+
lazyConfig: {
167+
root: null,
168+
rootMargin: '1000px',
169+
threshold: 0.5
170+
}
171+
}
172+
177173
return {
178-
post
174+
post,
175+
disqus
179176
}
180177
}
181178
}
182179
</script>
183-
184-
<style lang="scss">
185-
.post-page-content {
186-
max-width: 57rem
187-
}
188-
189-
.post-page-toc {
190-
@screen xl {
191-
min-width: var(--toc-w-size);
192-
}
193-
}
194-
</style>

‎src/.vuepress/theme/styles/_custom-blocks.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
&:before {
2121
@apply absolute text-accent-primary border-none;
2222
content: '“';
23-
top: -70px;
23+
top: 20px;
2424
left: -20px;
2525
font-size: 150px;
2626
font-family: "Helvetica";

‎src/.vuepress/theme/styles/_markdown.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
p {
66
word-wrap: break-word;
77
margin: 40px 0;
8-
max-width: 68ex;
98

109
abbr {
1110
cursor: help;

‎src/.vuepress/theme/styles/base.scss‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,8 @@ hr {
3535
}
3636

3737
.container {
38+
@apply px-4;
3839
transition: max-width .5s;
39-
40-
@media (min-width: 1366px) {
41-
max-width: 1366px !important;
42-
}
4340
}
4441

4542
.container-layout {

0 commit comments

Comments
 (0)