Skip to content

Commit ba8af8a

Browse files
wilfredinniwilfredinni
committed
Update ESLint configuration, enhance blog layout, and refine TypeScript types
1 parent 6c6ac3a commit ba8af8a

File tree

4 files changed

+130
-85
lines changed

4 files changed

+130
-85
lines changed

‎.eslintrc.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
module.exports = {
2+
ignorePatterns: ['dist'],
23
env: {
34
node: true,
45
},

‎src/layouts/blog.vue

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,22 @@ const reader = useReaderStore()
1010
<div
1111
class="relative mx-auto flex min-h-screen max-w-8xl justify-center sm:px-2 lg:px-8 xl:px-12"
1212
>
13-
<!-- article -->
14-
<div
15-
class="min-w-0 flex-auto px-4 py-12 lg:pl-8 lg:pr-0 xl:px-16"
16-
:class="[reader.isActive ? 'max-w-2xl lg:max-w-4xl' : 'lg:max-w-4xl']"
17-
>
18-
<article>
19-
<RouterView />
20-
</article>
21-
</div>
13+
<div class="min-w-0 w-full flex-auto px-4 py-12 lg:px-8">
14+
<div
15+
class="mx-auto"
16+
:class="[reader.isActive ? 'lg:max-w-4xl' : 'lg:max-w-6xl']"
17+
>
18+
<article>
19+
<RouterView />
20+
</article>
2221

23-
<div
24-
v-show="!reader.isActive"
25-
class="hidden w-56 overflow-x-hidden xl:sticky xl:top-[3.6rem] xl:-mr-6 xl:block xl:h-[calc(100vh-3.6rem)] xl:flex-none xl:overflow-y-auto xl:py-10 xl:pr-6"
26-
>
27-
<div class="flex h-full flex-col justify-end">
28-
<carbon-ads />
22+
<aside v-show="!reader.isActive" class="mt-12">
23+
<div class="flex justify-center">
24+
<carbon-ads />
25+
</div>
26+
</aside>
2927
</div>
3028
</div>
3129
</div>
3230
</div>
33-
</template>
31+
</template>

‎src/pages/blog/index.vue

Lines changed: 115 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -24,74 +24,60 @@ const articles = computed(() => {
2424
)
2525
})
2626
})
27+
28+
const latestArticle = computed(() => articles.value[0])
29+
const otherArticles = computed(() => articles.value.slice(1))
2730
</script>
2831
2932
<template>
30-
<div>
31-
<h1
32-
class="text-4xl font-bold tracking-tight text-slate-800 dark:text-slate-100 sm:text-5xl"
33-
>
34-
Blog
35-
</h1>
36-
<p class="mt-6 text-base text-slate-600 dark:text-slate-400">
37-
These articles provide a more in-depth look at the contents of the
38-
<router-link
39-
class="-underline-offset-4 font-medium text-sky-600 underline"
40-
to="/"
41-
>Python Cheatsheet</router-link
42-
>.
43-
</p>
44-
</div>
45-
46-
<div class="sm:mt-13 mt-20">
47-
<div
48-
class="md:border-l md:border-slate-100 md:pl-6 md:dark:border-slate-700/40"
33+
<div v-if="latestArticle" class="mb-12">
34+
<router-link
35+
:to="latestArticle.path"
36+
class="group block overflow-hidden rounded-lg border border-slate-200 bg-white shadow-md transition-all duration-300 hover:shadow-xl dark:border-slate-700 dark:bg-slate-800"
4937
>
50-
<div class="flex max-w-3xl flex-col space-y-16">
51-
<article
52-
v-for="article in articles"
53-
v-once
54-
:key="article.path"
55-
class="md:grid md:grid-cols-4 md:items-baseline"
56-
>
57-
<div class="group relative flex flex-col items-start md:col-span-3">
58-
<h2
59-
class="text-base font-semibold tracking-tight text-slate-800 dark:text-slate-100"
38+
<div class="md:flex">
39+
<div class="md:w-1/2">
40+
<img
41+
v-if="latestArticle.children[0]?.meta?.socialImage"
42+
:src="latestArticle.children[0]?.meta?.socialImage"
43+
alt=""
44+
class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
45+
/>
46+
<div
47+
v-else
48+
class="flex h-full w-full items-center justify-center bg-slate-100 dark:bg-slate-700"
49+
>
50+
<svg
51+
class="h-12 w-12 text-slate-400"
52+
xmlns="http://www.w3.org/2000/svg"
53+
fill="none"
54+
viewBox="0 0 24 24"
55+
stroke="currentColor"
6056
>
61-
<div
62-
class="absolute -inset-x-4 -inset-y-6 z-0 scale-95 bg-slate-100/60 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-slate-800/60 sm:-inset-x-6 sm:rounded-2xl"
57+
<path
58+
stroke-linecap="round"
59+
stroke-linejoin="round"
60+
stroke-width="2"
61+
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l-1.586-1.586a2 2 0 00-2.828 0L6 18"
6362
/>
64-
<router-link :to="article.path">
65-
<span
66-
class="absolute -inset-x-4 -inset-y-6 z-20 sm:-inset-x-6 sm:rounded-2xl"
67-
/>
68-
<span class="relative z-10">
69-
{{ article.children[0]?.meta?.title }}
70-
</span>
71-
</router-link>
72-
</h2>
73-
<time
74-
class="relative z-10 order-first mb-3 flex items-center pl-3.5 text-sm text-slate-400 dark:text-slate-500 md:hidden"
75-
datetime="2022-09-05"
76-
>
77-
<span
78-
class="absolute inset-y-0 left-0 flex items-center"
79-
aria-hidden="true"
80-
>
81-
<span
82-
class="h-4 w-0.5 rounded-full bg-slate-200 dark:bg-slate-500"
83-
/>
84-
</span>
85-
September 5, 2022
63+
</svg>
64+
</div>
65+
</div>
66+
<div class="p-6 md:w-1/2">
67+
<h2
68+
class="text-2xl font-semibold text-slate-800 dark:text-slate-100"
69+
>
70+
{{ latestArticle.children[0]?.meta?.title }}
71+
</h2>
72+
<p class="mt-2 text-slate-600 dark:text-slate-400">
73+
{{ latestArticle.children[0]?.meta?.description }}
74+
</p>
75+
<div class="mt-4 flex items-center justify-between">
76+
<time class="text-sm text-slate-500 dark:text-slate-400">
77+
{{ latestArticle.children[0]?.meta?.date }}
8678
</time>
87-
<p
88-
class="relative z-10 mt-2 text-sm text-slate-600 dark:text-slate-400"
89-
>
90-
{{ article.children[0]?.meta?.description }}
91-
</p>
9279
<div
93-
aria-hidden="true"
94-
class="relative z-10 mt-4 flex items-center text-sm font-medium text-sky-500"
80+
class="flex items-center text-sm font-medium text-sky-500"
9581
>
9682
Read article
9783
<svg
@@ -109,18 +95,79 @@ const articles = computed(() => {
10995
</svg>
11096
</div>
11197
</div>
112-
<time
113-
class="relative z-10 order-first mb-3 mt-1 hidden items-center text-sm text-slate-400 dark:text-slate-500 md:block"
114-
datetime="2022-09-05"
98+
</div>
99+
</div>
100+
</router-link>
101+
</div>
102+
103+
<div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
104+
<router-link
105+
v-for="article in otherArticles"
106+
:key="article.path"
107+
:to="article.path"
108+
class="group block overflow-hidden rounded-lg border border-slate-200 bg-white shadow-md transition-all duration-300 hover:shadow-xl dark:border-slate-700 dark:bg-slate-800"
109+
>
110+
<div class="relative overflow-hidden">
111+
<img
112+
v-if="article.children[0]?.meta?.socialImage"
113+
:src="article.children[0]?.meta?.socialImage"
114+
alt=""
115+
class="h-48 w-full object-cover transition-transform duration-300 group-hover:scale-105"
116+
/>
117+
<div
118+
v-else
119+
class="flex h-48 w-full items-center justify-center bg-slate-100 dark:bg-slate-700"
120+
>
121+
<svg
122+
class="h-12 w-12 text-slate-400"
123+
xmlns="http://www.w3.org/2000/svg"
124+
fill="none"
125+
viewBox="0 0 24 24"
126+
stroke="currentColor"
115127
>
128+
<path
129+
stroke-linecap="round"
130+
stroke-linejoin="round"
131+
stroke-width="2"
132+
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l-1.586-1.586a2 2 0 00-2.828 0L6 18"
133+
/>
134+
</svg>
135+
</div>
136+
</div>
137+
<div class="p-6">
138+
<h2
139+
class="text-xl font-semibold text-slate-800 dark:text-slate-100"
140+
>
141+
{{ article.children[0]?.meta?.title }}
142+
</h2>
143+
<p class="mt-2 text-sm text-slate-600 dark:text-slate-400">
144+
{{ article.children[0]?.meta?.description }}
145+
</p>
146+
<div class="mt-4 flex items-center justify-between">
147+
<time class="text-xs text-slate-500 dark:text-slate-400">
116148
{{ article.children[0]?.meta?.date }}
117149
</time>
118-
</article>
150+
<div
151+
class="flex items-center text-sm font-medium text-sky-500"
152+
>
153+
Read article
154+
<svg
155+
viewBox="0 0 16 16"
156+
fill="none"
157+
aria-hidden="true"
158+
class="ml-1 h-4 w-4 stroke-current"
159+
>
160+
<path
161+
d="M6.75 5.75 9.25 8l-2.5 2.25"
162+
stroke-width="1.5"
163+
stroke-linecap="round"
164+
stroke-linejoin="round"
165+
/>
166+
</svg>
167+
</div>
168+
</div>
119169
</div>
120-
</div>
121-
122-
<subscription-form class="mt-12" />
123-
<the-footer />
170+
</router-link>
124171
</div>
125172
</template>
126173

‎tsconfig.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@
2020
"types": [
2121
"vitest",
2222
"vite/client",
23-
"vue/ref-macros",
2423
"vite-plugin-pages/client",
2524
"vite-plugin-vue-layouts/client",
2625
"vite-plugin-pwa/client",

0 commit comments

Comments
 (0)