feat(postlist): calculate postlist height according to pageSize

Octobug · Nov 30, 2023 · d84227c · d84227c
1 parent 2776f45
commit d84227c
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 8 deletions.
diff --git a/.vitepress/config.theme.ts b/.vitepress/config.theme.ts
@@ -43,11 +43,15 @@ export default {
       text: "MORE",
       items: [
         // {
-        //   text: "RSS",
+        //   text: "Best Blogs",
+        //   link: "/bests",
+        // },
+        // {
+        //   text: "RSS Feed",
         //   link: "https://blog.octobug.site/feed.xml",
         // },
         {
-          text: "REPOSITORY",
+          text: "Repository",
           link: "https://github.com/Octobug/blog",
         }
       ]
@@ -76,6 +80,7 @@ export default {
   },
   socialLinks: [
     { icon: "github", link: "https://github.com/Octobug" },
+    { icon: "mastodon", link: "https://mastodon.online/@cyberwarmth" },
     {
       icon: {
         svg: emailSVGString,

diff --git a/.vitepress/theme/components/Avatar.vue b/.vitepress/theme/components/Avatar.vue
@@ -34,7 +34,7 @@ const { theme } = useData();
   }
 
   .frame {
-    padding: 1.5rem 0;
+    padding: 0 0 1.5rem;
   }
 }
 </style>
diff --git a/.vitepress/theme/components/Container.vue b/.vitepress/theme/components/Container.vue
@@ -7,7 +7,7 @@
 <style module scoped>
 .container {
   justify-content: center;
-  padding: 1rem 2.5rem 0;
+  padding: 2rem 2rem 0;
 }
 
 @media (min-width: 640px) {

diff --git a/.vitepress/theme/components/HomeFeed.vue b/.vitepress/theme/components/HomeFeed.vue
@@ -32,7 +32,7 @@
 
 <script lang="ts" setup>
 import type { ContentData } from "vitepress";
-import { useData } from "vitepress";
+import { onContentUpdated, useData } from "vitepress";
 import { ref } from "vue";
 import { data as allPosts } from "../posts.data";
 import PostList from "./PostList.vue";
@@ -53,15 +53,28 @@ function turnTo(n: number) {
   const start = (n - 1) * page.size;
   postList.value = allPosts.slice(start, start + page.size);
 }
+
+function setPostListMinHeight() {
+  const root = document.querySelector(":root");
+  const h = theme.value.pageSize * 2.9;
+  (<HTMLElement>root).style.setProperty("--post-list-min-height", `${h}rem`);
+}
+
+onContentUpdated(() => {
+  setPostListMinHeight();
+});
 </script>
 
 <style module scope>
+:root {
+  --post-list-min-height: 29rem;
+}
+
 .postListBox {
-  min-height: 29rem;
+  min-height: var(--post-list-min-height);
 }
 
 .pagination {
-  padding-top: 1rem;
   display: flex;
   align-items: center;
   justify-content: center;

diff --git a/.vitepress/theme/pages/Home.vue b/.vitepress/theme/pages/Home.vue
@@ -17,7 +17,7 @@ import HomeFeed from "../components/HomeFeed.vue";
 
 <style scoped module>
 .aside {
-  padding: 2rem;
+  padding: 1.5rem;
   padding-top: 0;
 }