Update v1.8.0 (#24)

Features - Add margin to PostShare component - Add astro-meta-tags integration (dev mode) Changes - Upgrade astro to 4.X - Update code style from post **(pNCgOiQi)** - Update `astro-rename` config - Remove unused code from scripts - Move `getGiscusTheme` function to head Fixes - Fix broken `expressive-code` frame - Fix code copy button not showing - Fix extra margin on code - Fix wrong `og:url` link - Fix wrong `og:image` height *Bump version to 1.8.0*
LucJosin · Feb 28, 2024 · 658c2da · 658c2da
1 parent 92ee78c
commit 658c2da
Show file tree

Hide file tree

Showing 9 changed files with 972 additions and 1,374 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -6,6 +6,7 @@ import sitemap from '@astrojs/sitemap';
 import { pluginLineNumbers } from '@expressive-code/plugin-line-numbers';
 import compress from 'astro-compress';
 import astroExpressiveCode from 'astro-expressive-code';
+import astroMetaTags from 'astro-meta-tags';
 import rename from 'astro-rename';
 import robotsTxt from 'astro-robots-txt';
 
@@ -26,6 +27,20 @@ import HashRenamer from './src/lib/hash-renamer';
 
 const cssPrefix = 'astro-';
 const renamer = new HashRenamer(cssPrefix);
+const exceptions = [
+  // Global
+  'details',
+  'show',
+
+  // Giscus
+  'giscus',
+
+  // Expressive code
+  'expressive-code',
+  'frame',
+  'header',
+  'is-terminal',
+];
 
 // https://astro.build/config
 export default defineConfig({
@@ -50,10 +65,11 @@ export default defineConfig({
         `[data-theme='${theme.name.replace('-plus', '')}']`,
       plugins: [pluginLineNumbers()],
     }),
+    astroMetaTags(),
     rename({
       rename: {
         strategy: (key) => renamer.rename(key),
-        except: ['details', 'show'],
+        except: exceptions,
       },
     }),
     sitemap(),

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@lucjosin/lucasjosino.com",
   "packageManager": "yarn@3.6.4",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "private": true,
   "scripts": {
     "dev": "astro dev",
@@ -11,7 +11,7 @@
     "astro": "astro"
   },
   "devDependencies": {
-    "@astrojs/sitemap": "^3.0.2",
+    "@astrojs/sitemap": "3.1.1",
     "@lucjosin/remark-alert-blocks": "./plugins/remark-alert-blocks",
     "@lucjosin/remark-code-highlight": "./plugins/remark-code-highlight",
     "@lucjosin/remark-code-set": "./plugins/remark-code-set",
@@ -20,7 +20,7 @@
     "@lucjosin/remark-readme-stats": "./plugins/remark-readme-stats",
     "@typescript-eslint/eslint-plugin": "^6.8.0",
     "@typescript-eslint/parser": "^6.8.0",
-    "astro": "^3.3.4",
+    "astro": "4.4.6",
     "astro-compress": "^2.2.10",
     "astro-expressive-code": "^0.33.4",
     "astro-icon": "^0.8.1",
@@ -43,13 +43,14 @@
     "typescript": "^5.2.2"
   },
   "dependencies": {
-    "@astrojs/react": "^3.0.3",
-    "@astrojs/rss": "^3.0.0",
+    "@astrojs/react": "3.0.10",
+    "@astrojs/rss": "4.0.5",
     "@expressive-code/plugin-line-numbers": "^0.33.4",
     "@resvg/resvg-js": "^2.5.0",
     "@swup/astro": "^1.3.2",
     "@types/react": "^18.2.29",
     "@types/react-dom": "^18.2.14",
+    "astro-meta-tags": "^0.2.1",
     "medium-zoom": "^1.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/src/components/core/ThemeIcon.astro b/src/components/core/ThemeIcon.astro
@@ -36,14 +36,13 @@ import Icon from 'astro-icon';
 </style>
 
 <script is:inline>
-  function getGiscusTheme(theme) {
-    return `${window.location.origin}/static/css/giscus_${theme}.css`;
-  }
-
   function sendMessage(message) {
-    const iframe = document.querySelector('iframe.giscus-frame');
-    if (!iframe) return;
-    iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
+    const giscusFrame = document.querySelector('iframe.giscus-frame');
+    if (!giscusFrame) return;
+    giscusFrame.contentWindow.postMessage(
+      { giscus: message },
+      'https://giscus.app'
+    );
   }
 
   const html = document.documentElement;

diff --git a/src/components/data/Post/PostShare.astro b/src/components/data/Post/PostShare.astro
@@ -12,9 +12,10 @@ interface PostShareItem {
 
 interface Props {
   items: PostShareItem[];
+  margin?: string;
 }
 
-const { items } = Astro.props;
+const { items, margin } = Astro.props;
 ---
 
 <div class="post-share">
@@ -41,12 +42,12 @@ const { items } = Astro.props;
   }
 </div>
 
-<style>
+<style define:vars={{ margin }}>
   .post-share {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 1rem;
-    margin: 0 0 1rem 0;
+    margin: var(--margin);
   }
 </style>
diff --git a/...content/blog/how-to-hash-class-names-in-astro-using-astro-rename-integration.md b/...content/blog/how-to-hash-class-names-in-astro-using-astro-rename-integration.md
@@ -103,7 +103,7 @@ import rename from 'astro-rename';
 
 Add to integrations option:
 
-```js title="astro.config.mjs" {3, 8-12}
+```js title="astro.config.mjs" ins={3, 8-12}
 import { defineConfig } from 'astro/config';
 
 import rename from 'astro-rename';
@@ -198,7 +198,7 @@ See more: [Support multiple CSS files](https://github.com/google/postcss-rename/
 
 Now, let's create the `getHash` method. This function will loop from `0` to `maxSize` and take a random letter from `CHARS` constant.
 
-```ts title="src/lib/hash-renamer.ts" {1, 3-16}
+```ts title="src/lib/hash-renamer.ts" ins={1, 3-16}
 const CHARS = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_';
 
 /**
@@ -252,7 +252,7 @@ export default class HashRenamer {
 
 Open the `astro.config.cjs` file and add the custom strategy:
 
-```js title="astro.config.mjs" {5, 7, 13-17}
+```js title="astro.config.mjs" ins={5, 7, 13-17}
 import { defineConfig } from 'astro/config';
 
 import rename from 'astro-rename';

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -65,7 +65,10 @@ const { title, description, banner, robots, shortlink, locale, article } =
     />
 
     <!-- Open Graph -->
-    <meta property="og:url" content={Astro.site} />
+    <meta
+      property="og:url"
+      content={headConfig.canonical + Astro.url.pathname}
+    />
     <meta
       property="og:title"
       content={article?.title || title + ' | ' + headConfig.name}
@@ -89,9 +92,14 @@ const { title, description, banner, robots, shortlink, locale, article } =
       content=`image/${(banner ?? headConfig.banner).split('.').pop()}`
     />
     <meta property="og:image:width" content="1200" />
-    <meta property="og:image:height" content="600" />
+    <meta property="og:image:height" content="630" />
 
     <script is:inline>
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      function getGiscusTheme(theme) {
+        return `${window.location.origin}/static/css/giscus_${theme}.css`;
+      }
+
       const theme = (() => {
         if (
           typeof localStorage !== 'undefined' &&

diff --git a/src/layouts/PostLayout.astro b/src/layouts/PostLayout.astro
@@ -111,6 +111,7 @@ const article = {
     </PostInfo>
 
     <PostShare
+      margin="0 0 1rem 0"
       items={[
         {
           href: linkedin,
@@ -195,8 +196,5 @@ const article = {
       giscusScript.setAttribute(key, value)
     );
     document.body.appendChild(giscusScript);
-    const t = document.createElement('p');
-    t.innerHTML = theme;
-    document.body.appendChild(t);
   });
 </script>
diff --git a/src/styles/post.css b/src/styles/post.css
@@ -22,4 +22,8 @@ summary {
 .expressive-code .frame.is-terminal .header,
 .expressive-code .frame .header {
   z-index: 0 !important;
+}
+
+.expressive-code .frame {
+  margin: 0 !important;
 }