feat: more work on posts

.vitepress/theme/posts.data.js

@@ -45,7 +45,7 @@ export default createContentLoader('pages/posts/*.md', {
 
         return {
           title: frontmatter.title,
-          excerpt: truncateText(frontmatter.description, 100),
+          excerpt: truncateText(frontmatter.description, 150),
           image: getImagePath(url),
           author: frontmatter.author || 'PDan',
           href: url,

.vitepress/theme/style.sass

@@ -12,6 +12,12 @@
   --vp-home-hero-name-color: transparent
   --vp-home-hero-name-background: -webkit-linear-gradient(110deg, var(--vp-c-brand-1) 10%, var(--vp-c-brand-3) 30%, var(--vp-c-brand-2))
 
+html
+  scrollbar-gutter: stable
+
+body
+  contain: layout
+
 .VPHero
   .name
     font-weight: 800

components/PostCard.vue

@@ -1,8 +1,8 @@
 <template>
-  <a class="card" :href="href">
+  <component :is="href ? 'a' : 'section'" class="card" :href="href">
     <script-tag :meta="meta" />
 
-    <article>
+    <article :class="{ active: href }">
       <img
         v-if="imageSrc"
         class="thumbnail"
@@ -26,14 +26,14 @@
               by
               <address v-text="author" />
             </div>
-            <div v-if="date.iso">
+            <div v-if="date && date.iso">
               <time pubdate :datetime="date.iso" v-text="date.pretty" />
             </div>
           </div>
         </section>
       </div>
     </article>
-  </a>
+  </component>
 </template>
 
 <script>
@@ -85,13 +85,13 @@ export default {
         '@context': 'https://schema.org/',
         '@type': 'Article',
         headline: this.title,
-        description: this.date.excerpt,
+        description: this.excerpt,
         thumbnailUrl: this.image,
         author: {
           '@type': 'Person',
           name: this.author,
         },
-        datePublished: this.date.iso,
+        datePublished: this.date ? this.date.iso : null,
       });
     },
 
@@ -125,7 +125,7 @@ article
   box-shadow: var(--vp-shadow-1)
   transition: box-shadow 0.25s, background-color 0.25s
 
-  &:hover
+  &.active:hover
     background-color: var(--vp-c-bg-elv)
     box-shadow: var(--vp-shadow-2)
 
@@ -161,11 +161,20 @@ article
 
 .content
   flex-grow: 1
+  padding-inline: 8px
 
-h2
-  color: var(--vp-c-brand)
-  font-size: 1.2em
-  font-weight: bold
+  h2
+    color: var(--vp-c-brand)
+    font-size: 1.2em
+    font-weight: bold
+
+    margin: 8px 0 16px 0
+    padding: 0
+    border: none
+    letter-spacing: -0.02em
+
+  p
+    margin-block: 2px
 
 .info
   display: flex

components/PostHeader.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { computed } from 'vue';
+import { useData, withBase } from 'vitepress';
+import { data } from 'theme/posts.data.js';
+import PostCard from 'components/PostCard.vue';
+
+const { posts } = data;
+const { page } = useData();
+const postCardData = computed(() => {
+  if (!page.value) {
+    return null;
+  }
+
+  const needle = `/${ withBase(page.value.relativePath.split('.').slice(0, -1).join('.')) }.html`;
+  const post = posts.find((p) => p.href === needle);
+
+  return post ? { ...post, href: null } : post;
+});
+</script>
+
+<template>
+  <PostCard v-if="postCardData" v-bind="postCardData" />
+</template>

components/PostsList.vue

@@ -24,7 +24,7 @@
 <style lang="sass" scoped>
 .container
   padding: 1rem
-  max-width: 60rem
+  max-width: 1104px
   margin-inline: auto
 
 .tags

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@vueuse/core": "^10.5.0",
+    "quasar": "^2.13.0",
     "vue": "^3.3.7"
   },
   "devDependencies": {

pages/about/index.md

@@ -3,6 +3,8 @@ title: About
 description: Contact information
 ---
 
+# About PDan
+
 ## Contact
 
 * Name: Dan Popescu (PDan)

pages/my-projects/index.md

@@ -4,6 +4,8 @@ description: A list of projects I created or I worked on
 outline: [2, 3]
 ---
 
+# My Projects
+
 ## Quasar v1 (Vue 2)
 
 Quasar is a Vue based components framework that also provide an easy way to build cross-target applications (web, mobile - cordova/capacitor, desktop - electron).

pages/posts/post_001.md

@@ -1,12 +1,20 @@
 ---
-title: First post
-description: First post in a list of more posts. I hope.
-date: 2023-10-30
-tags: [test]
+title: Grouping form elements in Quasar
+description: Explain styling needed to group form elements in Quasar in order to make them look like a single element.
+date: 2023-10-31
+tags: [quasar, css]
 ---
 
-# First post
-{{ title }}
+<script setup>
+import PostHeader from 'components/PostHeader.vue';
+</script>
+
+<PostHeader />
+
+## Problem description
+
+<demo-block src="./post_001_01.demo.vue" />
+
 
 Post 1 content.