Update 1.10.0 (#27)

### Features

- Add bluesky share button
- Add new max width to Container
- Add background blur to ProgressBar component
- Add textTransform and optional title to SubTitle
- Add bluesky share option to PostShareBanner
- Add optional position to ThemeIcon
- Add Header component
- Add new description to tag and category pages
- Add new description for blog and projects pages
- Add optional display and margin to SubTitle
- Add display option to Link component
- Add `javascript-time-ago` dependency
- Add PostDateTime component
- Add new open graph template
- Add color to post schema
- Add new open graph background
- Add optional banner in posts
- Add default open graph image
- Add `remark-responsive-tables` package
- Add height to scrollbar
- Add `isIndexable` to post schema
- Add scale animation on hover to PostCard

### Changes

- **Allow cors to css and open-graph**
- Update link style in blog posts
- Update dependencies
- Update blog and projects pages layout
- Update header margin-bottom
- Update share icon from twitter to x
- Update remark-post-reference height
- **Update post file names and slug**
- **Update go-scs-test slug, title and description**
- Remove alternative tag
- Remove Navigation component
- Remove ThemeIcon from Layout
- Remove Links component
- Move category to the page top
- Move Links component to Socials
- Replace banner.png with default-og.png
- **Rename `markdown-showcase` to `hello-world`**
- Implement missing easyShare feature

### Fixes

- Fix wrong css tag class name
- Fix lint errors
- Fix comments being loaded even after enableComments set to false
- Fix markdown table overflow

*Bump version to 1.10.0*

astro.config.mjs

@@ -11,6 +11,7 @@ import astroMetaTags from 'astro-meta-tags';
 import rename from 'astro-rename';
 import robotsTxt from 'astro-robots-txt';
 
+import responsiveTables from '@adapttive/remark-responsive-tables';
 import remarkAlertBlocks from '@lucjosin/remark-alert-blocks';
 import remarkCodeHighlight from '@lucjosin/remark-code-highlight';
 import remarkCodeSet from '@lucjosin/remark-code-set';
@@ -150,6 +151,7 @@ export default defineConfig({
       remarkAlertBlocks,
       remarkCodeHighlight,
       remarkImageCaption,
+      responsiveTables,
       remarkCodeSet,
       remarkToc,
       [

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lucjosin/lucasjosino.com",
   "packageManager": "[email protected]",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "private": true,
   "scripts": {
     "dev": "astro dev",
@@ -11,6 +11,7 @@
     "astro": "astro"
   },
   "devDependencies": {
+    "@adapttive/remark-responsive-tables": "^1.0.1",
     "@astrojs/sitemap": "3.1.1",
     "@lucjosin/remark-alert-blocks": "./plugins/remark-alert-blocks",
     "@lucjosin/remark-code-highlight": "./plugins/remark-code-highlight",
@@ -20,15 +21,16 @@
     "@lucjosin/remark-readme-stats": "./plugins/remark-readme-stats",
     "@typescript-eslint/eslint-plugin": "^6.8.0",
     "@typescript-eslint/parser": "^6.8.0",
-    "astro": "^4.4.9",
-    "astro-compress": "^2.2.11",
-    "astro-expressive-code": "^0.33.4",
+    "astro": "^4.8.6",
+    "astro-compress": "^2.2.23",
+    "astro-expressive-code": "^0.35.3",
     "astro-icon": "^1.1.0",
     "astro-rename": "^1.1.2",
     "astro-robots-txt": "^1.0.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-astro": "^0.31.4",
+    "javascript-time-ago": "^2.5.10",
     "prettier": "^3.2.5",
     "prettier-plugin-astro": "^0.13.0",
     "rehype-autolink-headings": "^7.1.0",
@@ -40,7 +42,7 @@
     "satori": "^0.10.13",
     "satori-html": "^0.3.2",
     "svgo": "2.8.0",
-    "typescript": "^5.3.3"
+    "typescript": "^5.4.5"
   },
   "dependencies": {
     "@astrojs/react": "3.0.10",
@@ -53,10 +55,13 @@
     "@swup/astro": "^1.3.2",
     "@types/react": "^18.2.29",
     "@types/react-dom": "^18.2.14",
-    "astro-meta-tags": "^0.2.1",
+    "astro-meta-tags": "^0.3.0",
     "medium-zoom": "^1.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "reading-time": "^1.5.0"
+  },
+  "resolutions": {
+    "sharp": "0.33.1"
   }
 }

public/static/css/.htaccess

@@ -0,0 +1,3 @@
+<IfModule mod_headers.c> 
+ Header always set Access-Control-Allow-Origin "*"
+</IfModule>

public/static/open-graph/.htaccess

@@ -0,0 +1,3 @@
+<IfModule mod_headers.c> 
+ Header always set Access-Control-Allow-Origin "*"
+</IfModule>

src/components/core/Link/Link.astro

@@ -10,6 +10,7 @@ interface Props {
   icon?: string;
   iconSide?: 'left' | 'right';
   iconSize?: string;
+  display?: string;
   hasBorderBottom?: boolean;
   animatedIcon?: boolean;
   reverseAnimation?: boolean;
@@ -25,6 +26,7 @@ const {
   icon,
   iconSide = 'left',
   iconSize = '1.2em',
+  display = 'flex',
   hasBorderBottom = true,
   animatedIcon = false,
   reverseAnimation = false,
@@ -53,20 +55,26 @@ const iconColor = animatedIcon ? 'var(--constrast-color)' : 'gray';
   {...attr}
 >
   {icon && iconSide === 'left' && <Icon name={icon} />}
-  {title && <span>{title}</span>}
+  {title ? <span>{title}</span> : <slot />}
   {icon && iconSide === 'right' && <Icon name={icon} />}
 </a>
 
 <style
-  define:vars={{ borderBottom, currentGap, animatedGap, iconColor, iconSize }}
+  define:vars={{
+    borderBottom,
+    currentGap,
+    animatedGap,
+    iconColor,
+    iconSize,
+    display,
+  }}
 >
   .link-data {
     border-bottom: var(--border-size) solid transparent;
     transition: all var(--transition-duration);
     cursor: pointer;
-    display: flex;
-    align-items: center;
     gap: var(--currentGap);
+    display: var(--display);
   }
 
   .link-data:hover {

src/components/core/Link/LinkBox.astro

@@ -13,6 +13,7 @@ interface Props {
   padding?: string;
   titleId?: string;
   event?: string;
+  gridColumn?: string;
 }
 
 const {
@@ -27,6 +28,7 @@ const {
   padding = '0.8rem',
   titleId,
   event,
+  gridColumn,
 } = Astro.props as Props;
 
 const attr = { 'data-umami-event': event };
@@ -46,7 +48,7 @@ const attr = { 'data-umami-event': event };
   {icon && iconSide === 'right' && <Icon name={icon} />}
 </a>
 
-<style define:vars={{ padding, iconSize }}>
+<style define:vars={{ padding, iconSize, gridColumn }}>
   .link-box {
     height: min-content;
     border: var(--border-size) solid var(--border-color);
@@ -57,6 +59,7 @@ const attr = { 'data-umami-event': event };
     transition: all var(--transition-duration);
     gap: 0.5rem;
     padding: var(--padding);
+    grid-column: var(--gridColumn);
   }
 
   .link-box:hover {

src/components/core/Post/PostCard.astro

@@ -1,9 +1,9 @@
 ---
 import Tags from '@components/data/Tags.astro';
-import { getFormatedDate } from '@lib/date';
 import { getReadTime } from '@lib/time';
 import Description from '../Description.astro';
 import Link from '../Link/Link.astro';
+import PostDateTime from './PostDateTime.astro';
 
 interface Props {
   image?: string;
@@ -31,73 +31,110 @@ const {
 ---
 
 <div class="post-card">
-  {
-    image && (
-      <a href={`/blog/${href}`} title={`Read more about: ${title}`}>
-        <img src={image} alt={`Post - ${title}`} class="post-card-img" />
-      </a>
-    )
-  }
-  <div class="post-card-info">
-    <span class="post-card-info-left">
-      <span>{getFormatedDate(publishedAt)}</span> •
-      <Link
-        title={category}
-        alt="See all posts with this category"
-        href={`/blog/categories/${category}`}
-      /> •
-      <span>{getReadTime(body)}</span>
-    </span>
+  <div class="post-card-img-container">
+    {
+      image && (
+        <a href={`/blog/${href}`} title={`Read more about: ${title}`}>
+          <img src={image} alt={`Post - ${title}`} class="post-card-img" />
+        </a>
+      )
+    }
   </div>
-  <Tags values={tags.slice(0, maxTags)} target="tags" active />
-  <div class="post-card-header">
-    <h3>{title}</h3>
-  </div>
-  <Description
-    value={description}
-    margin="0"
-    align={false}
-    fontSize="0.9em"
-    maxLine="3"
-  />
-  <div class="post-card-read-more">
-    <Link
-      href={`/blog/${href}`}
-      alt="Read more about"
-      title="Read post"
-      icon="mdi:arrow-right-thin"
-      iconSide="right"
-      hasBorderBottom={false}
-      animatedIcon
-      reverseAnimation
+  <div class="post-card-container">
+    <div class="post-card-info">
+      <span class="post-card-info-left">
+        <PostDateTime date={publishedAt} /> •
+        <Link
+          title={category}
+          alt="See all posts with this category"
+          href={`/blog/categories/${category}`}
+        /> •
+        <span>{getReadTime(body)}</span>
+      </span>
+    </div>
+    <div class="post-card-header">
+      <Link
+        href={`/blog/${href}`}
+        alt={`Read more about: ${title}`}
+        display="inline"
+      >
+        <h3>{title}</h3>
+      </Link>
+    </div>
+    <Description
+      value={description}
+      margin="0"
+      align={false}
+      fontSize="0.9em"
+      maxLine="3"
     />
+    <Tags values={tags.slice(0, maxTags)} target="tags" active />
+    <div class="post-card-read-more">
+      <Link
+        href={`/blog/${href}`}
+        alt="Read more about"
+        title="Read post"
+        icon="mdi:arrow-right-thin"
+        iconSide="right"
+        hasBorderBottom={false}
+        animatedIcon
+        reverseAnimation
+      />
+    </div>
   </div>
 </div>
 
 <style>
   .post-card {
-    min-height: 22rem;
+    min-height: 15rem;
+    width: 100%;
     border: var(--border-size) solid var(--border-color);
     border-radius: var(--border-radius);
     padding: var(--card-padding);
     transition: all var(--transition-duration);
     display: flex;
-    flex-direction: column;
-    gap: 0.6rem;
+    gap: 1rem;
+  }
+
+  .post-card:hover {
+    background-color: var(--secondary-color);
   }
 
   h3 {
     margin: 0;
+    display: inherit;
+  }
+
+  .post-card-img-container {
+    width: 50%;
+    max-width: 50%;
+    min-width: 50%;
+    overflow: hidden;
+    border-radius: var(--border-radius);
   }
 
   .post-card-img {
     height: 100%;
     width: 100%;
     object-fit: cover;
-    border-radius: var(--border-radius);
+    border-radius: inherit;
+    transition: scale var(--transition-duration);
+  }
+
+  .post-card:hover .post-card-img {
+    scale: 1.03;
+  }
+
+  .post-card-container {
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+    position: relative;
   }
 
   .post-card-info {
+    margin-top: 0.5rem;
     font-size: 0.85em;
     display: flex;
     align-items: center;
@@ -112,5 +149,31 @@ const {
   .post-card-read-more {
     display: flex;
     align-items: center;
+    position: absolute;
+    bottom: 0rem;
+  }
+
+  @media (max-width: 768px) {
+    .post-card {
+      flex-direction: column;
+    }
+
+    .post-card-img-container {
+      width: 100%;
+      max-width: initial;
+      min-width: initial;
+    }
+
+    .post-card-container {
+      width: 100%;
+    }
+
+    .post-card-info {
+      margin-top: 0;
+    }
+
+    .post-card-read-more {
+      position: initial;
+    }
   }
 </style>