Skip to content

Commit a0111bf

Browse files
OctobugOctobug
committed
feat(posts): archives page for all posts
1 parent c8f9cd0 commit a0111bf

File tree

11 files changed

+178
-45
lines changed

11 files changed

+178
-45
lines changed

‎.vitepress/config.utils.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,8 @@ export const giscus = {
1212
export const gMeasurementID = env.G_MEASUREMENT_ID || "";
1313

1414
export function withBaseURL(urlPath: string) {
15+
if (BASE_URL && urlPath.includes(BASE_URL)) {
16+
return urlPath;
17+
}
1518
return path.join(BASE_URL || "/", urlPath);
1619
}

‎.vitepress/theme/components/Container.vue‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<template>
2+
<div :class="$style.container">
3+
<slot />
4+
</div>
5+
</template>
6+
7+
<style module scoped>
8+
.container {
9+
justify-content: center;
10+
padding: 1rem 4rem 0;
11+
}
12+
13+
@media (min-width: 768px) {
14+
.container {
15+
padding: 3rem 6rem 0;
16+
}
17+
}
18+
19+
@media (min-width: 960px) {
20+
.container {
21+
padding: 3rem 4rem 0;
22+
display: flex;
23+
}
24+
}
25+
26+
@media (min-width: 1280px) {
27+
.container {
28+
padding: 4rem 8rem 0;
29+
display: flex;
30+
}
31+
}
32+
</style>

‎.vitepress/theme/components/PostElements.vue‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
<template>
2-
<div :class="$style.elementList">
2+
<div
3+
name="post-elements"
4+
:class="$style.elementList"
5+
hidden
6+
>
37
<span :class="$style.elementItem">
48
{{ moment(post.datetime).format("LL") }}
59
</span>
@@ -38,17 +42,33 @@ function getPostData() {
3842
return findPost(allPosts, page.value)?.frontmatter || frontmatter.value;
3943
}
4044
45+
function adjustPosition() {
46+
const elements = document.getElementsByName("post-elements");
47+
if (elements.length > 1) {
48+
return;
49+
}
50+
const block = elements[0];
51+
const title = document.querySelector(".main h1");
52+
const parent = title?.parentElement;
53+
if (block && title && parent) {
54+
const newBlock = block.cloneNode(true);
55+
(<Element>newBlock).removeAttribute("hidden");
56+
parent.insertBefore(newBlock, title.nextSibling);
57+
}
58+
}
59+
4160
onContentUpdated(() => {
4261
post.value = getPostData();
62+
setTimeout(adjustPosition, 0);
4363
});
4464
</script>
4565

4666
<style module scoped>
4767
.elementList {
4868
border-top: 1px dashed var(--vp-c-divider);
4969
padding-top: 0.5rem;
50-
margin-top: 3rem;
51-
margin-bottom: -5rem;
70+
margin-top: 0.5rem;
71+
margin-bottom: 2rem;
5272
font-size: 0.88rem;
5373
}
5474

‎.vitepress/theme/components/PostList.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<template>
22
<div :class="$style.postList">
3+
<span :class="[$style.date, $style.hack]">
4+
{{ moment(new Date()).format(dateFormat) }}
5+
</span>
36
<div
47
v-for="post in postList"
58
:key="post.url"
@@ -64,4 +67,8 @@ defineProps({
6467
font-size: 0.85em;
6568
color: var(--vp-c-text-3);
6669
}
70+
71+
.hack {
72+
visibility: hidden;
73+
}
6774
</style>

‎.vitepress/theme/index.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
// https://vitepress.dev/guide/custom-theme
22
import Theme from "vitepress/theme";
33
import "./style.css";
4-
// import Archives from "./components/Archives.vue";
5-
// import Tags from "./components/Tags.vue";
64
import Home from "./pages/Home.vue";
75
import Layout from "./pages/Layout.vue";
6+
import Posts from "./pages/Posts.vue";
7+
// import Tags from "./components/Tags.vue";
88

99
export default {
1010
extends: Theme,
1111
Layout,
1212
enhanceApp({ app }) {
1313
app.component("Home", Home);
14+
app.component("Posts", Posts);
1415
},
1516
};

‎.vitepress/theme/pages/Home.vue‎

Lines changed: 9 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,49 @@
11
<template>
2-
<div :class="$style.column">
2+
<Container>
33
<div :class="$style.aside">
44
<Profile />
55
</div>
66
<div :class="$style.homefeed">
77
<HomeFeed />
88
</div>
9-
</div>
9+
</Container>
1010
</template>
1111

1212
<script lang="ts" setup>
13+
import Container from "../components/Container.vue";
1314
import Profile from "../components/Profile.vue";
1415
import HomeFeed from "../components/HomeFeed.vue";
1516
</script>
1617

1718
<style scoped module>
18-
.column {
19-
justify-content: center;
20-
}
21-
2219
.aside {
23-
padding: 2rem 3rem;
24-
}
25-
26-
.homefeed {
27-
padding: 0 4rem;
20+
padding: 2rem;
21+
padding-top: 0;
2822
}
2923
3024
@media (min-width: 768px) {
3125
.aside {
32-
padding: 3rem;
33-
}
34-
35-
.homefeed {
36-
padding: 0 6rem;
26+
padding: 0 3rem 3rem;
3727
}
3828
}
3929
4030
@media (min-width: 960px) {
41-
.column {
42-
padding: 0rem 4rem;
43-
display: flex;
44-
}
45-
46-
.aside {
47-
padding: 3rem;
48-
}
49-
5031
.homefeed {
5132
max-width: 38rem;
5233
min-width: 38rem;
53-
padding: 3rem 3rem 0;
34+
padding: 0 3rem;
5435
}
5536
}
5637
5738
@media (min-width: 1280px) {
58-
.column {
59-
padding: 0rem 8rem;
60-
display: flex;
61-
}
62-
6339
.aside {
64-
padding: 4rem;
40+
padding: 0 4rem;
6541
}
6642
6743
.homefeed {
6844
max-width: 48rem;
6945
min-width: 48rem;
70-
padding: 4rem 4rem 0;
46+
padding: 0 4rem;
7147
}
7248
}
7349
</style>

‎.vitepress/theme/pages/Posts.vue‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<template>
2+
<Container :class="$style.container">
3+
<div :class="$style.main">
4+
<div :class="$style.amountBox">
5+
<div :class="$style.amountBadge">
6+
All Posts
7+
<span :class="$style.number">{{ allPosts.length }}</span>
8+
</div>
9+
</div>
10+
<div
11+
v-for="year of years"
12+
:key="year"
13+
>
14+
<h1 :class="$style.year">
15+
<a
16+
:id="year"
17+
:href="`#${year}`"
18+
>{{ year }}</a>
19+
</h1>
20+
<div :class="$style.yearPosts">
21+
<PostList
22+
date-format="MMM DD"
23+
:post-list="postsByYear[year]"
24+
/>
25+
</div>
26+
</div>
27+
</div>
28+
</Container>
29+
</template>
30+
31+
<script lang="ts" setup>
32+
import { data as allPosts } from "../posts.data";
33+
import Container from "../components/Container.vue";
34+
import PostList from "../components/PostList.vue";
35+
36+
const postsByYear = {};
37+
allPosts.forEach((post) => {
38+
const year = post.frontmatter.datetime.slice(0, 4);
39+
postsByYear[year] = postsByYear[year] || [];
40+
postsByYear[year].push(post);
41+
});
42+
const years = Object.keys(postsByYear).sort().reverse();
43+
</script>
44+
45+
<style module scoped>
46+
.container {
47+
display: block;
48+
}
49+
50+
.main {
51+
margin: 0 auto;
52+
max-width: 42rem;
53+
padding: 0 0 2rem;
54+
}
55+
56+
.amountBox {
57+
color: var(--vp-c-default-1);
58+
text-align: right;
59+
}
60+
61+
.amountBadge {
62+
background-color: var(--vp-c-default-soft);
63+
border-radius: 4px;
64+
padding: 0 0 0 7px;
65+
display: inline-block;
66+
}
67+
68+
.number {
69+
color: var(--vp-c-text-3);
70+
background-color: var(--vp-c-default-soft);
71+
padding: 2px 7px 2px 6px;
72+
margin-left: 1px;
73+
border-radius: 0 4px 4px 0;
74+
}
75+
76+
.year {
77+
color: var(--vp-c-neutral);
78+
font-size: 1.4rem;
79+
font-weight: 500;
80+
font-style: italic;
81+
padding-top: 1rem;
82+
}
83+
84+
.yearPosts {
85+
padding-left: 1rem;
86+
}
87+
</style>

‎.vitepress/theme/style.css‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -162,11 +162,6 @@ footer a {
162162
}
163163

164164
/* CSS for a Post */
165-
/* PostElements Workaround */
166-
.main h1 {
167-
margin-bottom: 5rem;
168-
}
169-
170165
.main img {
171166
border-radius: 0.5rem;
172167
box-shadow: 0 0.5rem 0.8rem var(--ct-c-shadow);

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# 🐳 WhaleVocal
22

33
[![Netlify Status](https://api.netlify.com/api/v1/badges/23e0b8dc-df98-491d-9885-d4229baa1ccb/deploy-status)](https://app.netlify.com/sites/octobug-blog/deploys)
4-
[![Badge: GitHub](https://github.com/Octobug/blog/actions/workflows/deploy.yml/badge.svg)](https://github.com/Octobug/blog/actions)
4+
[![Badge: GitHub](https://github.com/Octobug/blog/actions/workflows/deploy.yml/badge.svg)](https://octobug.github.io/blog/)
55

66
- <https://blog.octobug.site> (hosted on [Netlify](https://netlify.com/))
77

‎pages/posts.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@ description: All Posts
44
layout: page
55
---
66

7-
👷 🚧
7+
<Posts />

0 commit comments

Comments
 (0)