Update 1.5.0 (#20)

Features

- Add image position to blog schema
- Add margin to links on posts
- Add link to git history on PostUpdatedAt component
- Add width param to Description component
- Add description to some pages
- Add remark-codeset (Code with tab list)

Changes

- Move some dependencies to dev
- Update dependencies
- Update post template and showcase
- Update post text and description color to gray
- Update description on some pages
- Update post to support new codeset component
- Remove horizontal margin from LinkBox
- Simplify open-graph images

Fixes

- Wrong example highlight on post `pNCgOiQi`
- Wrong iconSize from LinkBox on Socials
- Link overflow on posts

*Bump version to 1.5.0*

.gitignore

@@ -28,4 +28,7 @@ pnpm-debug.log*
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
-!.yarn/versions
+!.yarn/versions
+
+# open-graph
+class-maps/

astro.config.mjs

@@ -16,6 +16,7 @@ import remarkReadmeStats from '@lucjosin/remark-readme-stats';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import rehypeExternalLinks from 'rehype-external-links';
 import rehypeSlug from 'rehype-slug';
+import codeset from 'remark-codeset';
 import remarkCollapse from 'remark-collapse';
 import numberedFootnoteLabels from 'remark-numbered-footnote-labels';
 import remarkToc from 'remark-toc';
@@ -41,23 +42,18 @@ export default defineConfig({
   // Ref: https://docs.astro.build/en/guides/integrations-guide/
   // Ref: https://docs.astro.build/en/guides/integrations-guide/sitemap/
   integrations: [
-    // swup({
-    //   theme: 'fade',
-    //   accessibility: false,
-    //   cache: false,
-    // }),
-    sitemap(),
-    robotsTxt({
-      sitemap: true,
-    }),
+    astroExpressiveCode(),
     rename({
       rename: {
         strategy: (key) => renamer.rename(key),
         except: ['details', 'show'],
       },
     }),
+    sitemap(),
+    robotsTxt({
+      sitemap: true,
+    }),
     compress(),
-    astroExpressiveCode(),
     react(),
   ],
   // Markdown configuration
@@ -129,6 +125,7 @@ export default defineConfig({
       remarkAlertBlocks,
       remarkCodeHighlight,
       remarkImageCaption,
+      codeset,
       remarkToc,
       [
         remarkCollapse,

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lucjosin/lucasjosino.com",
   "packageManager": "yarn@3.6.4",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "private": true,
   "scripts": {
     "dev": "astro dev",
@@ -12,45 +12,46 @@
   },
   "devDependencies": {
     "@astrojs/sitemap": "^3.0.2",
+    "@lucjosin/remark-alert-blocks": "./plugins/remark-alert-blocks",
+    "@lucjosin/remark-code-highlight": "./plugins/remark-code-highlight",
+    "@lucjosin/remark-image-caption": "./plugins/remark-image-caption",
+    "@lucjosin/remark-post-reference": "./plugins/remark-post-reference",
+    "@lucjosin/remark-readme-stats": "./plugins/remark-readme-stats",
     "@typescript-eslint/eslint-plugin": "^6.8.0",
     "@typescript-eslint/parser": "^6.8.0",
-    "astro": "^3.3.2",
-    "astro-compress": "^2.0.15",
+    "astro": "^3.3.4",
+    "astro-compress": "^2.1.5",
+    "astro-expressive-code": "^0.26.2",
     "astro-icon": "^0.8.1",
+    "astro-rename": "^1.1.1",
     "astro-robots-txt": "^1.0.0",
-    "eslint": "^8.51.0",
+    "eslint": "^8.52.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-astro": "^0.29.1",
     "prettier": "^3.0.3",
     "prettier-plugin-astro": "^0.12.0",
+    "rehype-autolink-headings": "^7.0.0",
+    "rehype-external-links": "^3.0.0",
+    "rehype-slug": "^6.0.0",
+    "remark-codeset": "^1.1.4",
+    "remark-collapse": "^0.1.2",
+    "remark-numbered-footnote-labels": "^1.1.0",
+    "remark-toc": "^8.0.1",
+    "satori": "^0.10.9",
+    "satori-html": "^0.3.2",
     "svgo": "2.8.0",
     "typescript": "^5.2.2"
   },
   "dependencies": {
     "@astrojs/react": "^3.0.3",
     "@astrojs/rss": "^3.0.0",
-    "@lucjosin/remark-alert-blocks": "./plugins/remark-alert-blocks",
-    "@lucjosin/remark-code-highlight": "./plugins/remark-code-highlight",
-    "@lucjosin/remark-image-caption": "./plugins/remark-image-caption",
-    "@lucjosin/remark-post-reference": "./plugins/remark-post-reference",
-    "@lucjosin/remark-readme-stats": "./plugins/remark-readme-stats",
     "@resvg/resvg-js": "^2.5.0",
     "@swup/astro": "^1.3.2",
     "@types/react": "^18.2.29",
     "@types/react-dom": "^18.2.14",
-    "astro-expressive-code": "^0.26.2",
-    "astro-rename": "https://github.com/LucJosin/astro-rename.git",
     "medium-zoom": "^1.0.8",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "reading-time": "^1.5.0",
-    "rehype-autolink-headings": "^7.0.0",
-    "rehype-external-links": "^3.0.0",
-    "rehype-slug": "^6.0.0",
-    "remark-collapse": "^0.1.2",
-    "remark-numbered-footnote-labels": "^1.1.0",
-    "remark-toc": "^8.0.1",
-    "satori": "^0.10.9",
-    "satori-html": "^0.3.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "reading-time": "^1.5.0"
   }
 }

src/components/core/Description.astro

@@ -1,6 +1,7 @@
 ---
 interface Props {
   value: string;
+  width?: string;
   margin?: string;
   fontSize?: string;
   maxLine?: string;
@@ -10,6 +11,7 @@ interface Props {
 const {
   value,
   margin = '1rem 0',
+  width = '100%',
   fontSize = '1em',
   maxLine,
   align = true,
@@ -22,15 +24,22 @@ const textAlign = align ? 'center' : 'initial';
   {value}
 </p>
 
-<style define:vars={{ margin, fontSize, maxLine, textAlign }}>
+<style define:vars={{ width, margin, fontSize, maxLine, textAlign }}>
   .description-container {
     overflow: hidden;
-    width: 100%;
+    width: var(--width);
     display: -webkit-box;
     -webkit-line-clamp: var(--maxLine);
     -webkit-box-orient: vertical;
     margin: var(--margin);
     font-size: var(--fontSize);
     text-align: var(--textAlign);
+    color: #cfcfcf;
+  }
+
+  @media (prefers-color-scheme: light) {
+    .description-container {
+      color: #404040;
+    }
   }
 </style>

src/components/core/Link/LinkBox.astro

@@ -23,7 +23,7 @@ const {
   title,
   id,
   isLocal = true,
-  padding = '0.8rem 2rem',
+  padding = '0.8rem',
   titleId,
 } = Astro.props as Props;
 ---

src/components/core/Post/MiniPostCard.astro

@@ -11,13 +11,22 @@ interface Props {
   description: string;
   publishedAt: string;
   body: string;
+  imageAlign?: string;
 }
 
-const { image, href, title, description, publishedAt, body } = Astro.props;
+const {
+  image,
+  href,
+  title,
+  description,
+  publishedAt,
+  body,
+  imageAlign = 'center',
+} = Astro.props;
 ---
 
 <a href={href} class="blog-item">
-  <img src={image} alt="" class="blog-item-image" />
+  <img src={image} alt={`Post - ${title}`} class="blog-item-image" />
   <div class="blog-item-info">
     <span class="blog-item-info-publish">
       {getFormatedDate(publishedAt)}
@@ -35,7 +44,7 @@ const { image, href, title, description, publishedAt, body } = Astro.props;
   </div>
 </a>
 
-<style>
+<style define:vars={{ imageAlign }}>
   .blog-item {
     height: 10rem;
     width: 100%;
@@ -62,6 +71,7 @@ const { image, href, title, description, publishedAt, body } = Astro.props;
     width: 12rem;
     border-radius: var(--border-radius);
     object-fit: cover;
+    object-position: var(--imageAlign);
   }
 
   .blog-item-info-publish {

src/components/core/Post/PostUpdatedAt.astro

@@ -1,27 +1,42 @@
 ---
 import { getFormatedDate } from '@lib/date';
+import Link from '../Link/Link.astro';
 
 interface Props {
+  slug: string;
   updatedAt: string;
 }
 
-const { updatedAt } = Astro.props;
+const { slug, updatedAt } = Astro.props;
+const GIT_REF = `https://github.com/LucJosin/lucasjosino.com/commits/main/src/content/blog/${slug}.md`;
 ---
 
 <div class="post-updated-at">
-  <i>Last modified: {getFormatedDate(updatedAt, true)} UTC</i>
+  <i class="post-updated-at-content">
+    Last modified:
+    <Link
+      href={GIT_REF}
+      alt="See post history"
+      title={getFormatedDate(updatedAt, true)}
+      isLocal={false}
+    />
+  </i>
 </div>
 
 <style>
   .post-updated-at {
     width: 100%;
-    margin: 1rem 0 0 0;
+    margin: 0 0 1rem 0;
     display: flex;
     gap: 0.2rem;
     text-align: center;
   }
 
-  .post-updated-at > i {
+  .post-updated-at-content {
     width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    justify-content: center;
   }
 </style>

src/components/data/Links.astro

@@ -9,7 +9,7 @@ import { links } from '@constants/links';
       <LinkBox
         href={data.url}
         icon={data.icon}
-        iconSize="20"
+        iconSize="18"
         title={data.name}
         alt={data.alt}
         isLocal={false}

src/components/data/Posts.astro

@@ -27,7 +27,8 @@ const posts = await getAllPosts();
         .slice(0, 2)
         .map((e) => (
           <MiniPostCard
-            image={e.data.image}
+            image={e.data.image.src}
+            imageAlign={e.data.image.position}
             href={`/blog/${e.slug}`}
             title={e.data.title}
             description={e.data.description}

src/components/data/Socials.astro

@@ -18,7 +18,7 @@ const { hasTitle = true } = Astro.props;
         <LinkBox
           href={data.url}
           icon={data.icon}
-          iconSize="20"
+          iconSize="18"
           alt={data.alt}
           isLocal={false}
         />

src/content/_schemas.ts

@@ -2,7 +2,10 @@ import { reference, z } from 'astro:content';
 
 export const blogSchema = z.object({
   refFile: z.string().optional(),
-  image: z.string().default('/static/banner.png'),
+  image: z.object({
+    src: z.string().default('/static/banner.png'),
+    position: z.string().default('center'),
+  }),
   publishedAt: z.string(),
   updatedAt: z.string().optional(),
   title: z.string().max(65),
@@ -15,4 +18,5 @@ export const blogSchema = z.object({
   isDraft: z.boolean().default(false),
   enableComments: z.boolean().default(true),
   relatedPosts: z.array(reference('blog')).max(4).optional(),
+  easyShare: z.boolean().default(true),
 });

src/content/_templates/post.md

@@ -1,15 +1,16 @@
 ---
-image: ''
-publishedAt: '202X-XX-XX XX:XX UTC'
 title: ''
 description: ''
+image:
+  src: ''
 tags:
   - ''
 category: ''
 language: ''
 shortlink: '/b/XXXXXXX'
 isVisible: true
 enableComments: true
+publishedAt: '202X-XX-XX XX:XX UTC'
 ---
 
 ## Table of Contents