Update v1.13.0 (#35)

### Features

- **Add about page**
- **Add i18n support**
- **Add new blog post (zBLtyQby) (en/pt)**
- **Add project details page**
- Add trailing slash to rss url
- Add og:image:alt meta to layout
- Add background pattern effect
- Add title option to Description
- Add dark/light icon toggle
- Add Tooltip to ThemeIcon
- Add Tooltip to Socials
- Add position option to Tooltip
- Add mobile menu to Header
- Add Tooltip to Footer links
- Add description to index page
- Add title to PostCard description
- Add `@iconify-json/tabler` package
- Add optional Tooltip message
- Add `showName` and `showTooltip` to Socials component
- Add accesskey to ThemeIcon tooltip message
- Add justifyContent option to Socials component
- Add icon toggle in mobile view
- Add project status to ProjectCard
- Add copy email button to 404 page
- Add width to PostComments component
- Add image slider to ProjectCard
- Add sections to home page
- Add new open graph generator
- Add title attribute to remark-image-caption
- Add z-index to header nav
- Add wrapContent option to Tags component
- Add opacity to ProjectCardSlider
- Add remark-slider package

### Changes

- Increase Description font size
- Increase mobile menu icon size
- Replace stackoverflow with email in socials
- Replace Table of Contents with Summary
- Update 404 page
- Update index page layout
- Update copyright year
- Update dependencies
- Update Layout component to support new open graph
- Update headConfig fields
- Update table structure in articles
- Update tags and category title page
- Update remark toc and collapse to support i18n
- Update remark-code-highlight package
- Update website static content
- Remove MiniPostCard
- Remove `time-ago` toggle/package
- Enable script: experimental flag
- Disable open graph in category and tag pages
- Reduce scrollbar width
- Move PostUpdatedAt to top

### Fixes

- Wrong width in LinkBox component
- Wrong heading structure in hello-world post
- Wrong "Read more" button in PostCard

*Bump version to 1.13.0*

.gitignore

@@ -2,6 +2,10 @@
 dist/
 .output/
 
+# satori-og
+.fonts/
+**/open-graph/*.png
+
 # dependencies
 node_modules/
 

astro.config.mjs

@@ -18,13 +18,15 @@ import remarkCodeSet from '@lucjosin/remark-code-set';
 import remarkImageCaption from '@lucjosin/remark-image-caption';
 import remarkPostReference from '@lucjosin/remark-post-reference';
 import remarkReadmeStats from '@lucjosin/remark-readme-stats';
+import remarkSlider from '@lucjosin/remark-slider';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import rehypeExternalLinks from 'rehype-external-links';
 import rehypeSlug from 'rehype-slug';
 import remarkCollapse from 'remark-collapse';
 import numberedFootnoteLabels from 'remark-numbered-footnote-labels';
 import remarkToc from 'remark-toc';
 
+import { defaultLocale, explicitLocales, locales } from './src/i18n/config';
 import HashRenamer from './src/lib/hash-renamer';
 import getRedirects from './src/lib/redirects';
 
@@ -58,6 +60,18 @@ export default defineConfig({
   output: 'static',
   // Specify a mapping of redirects where the key is the route to match and the value is the path to redirect to.
   redirects: getRedirects(),
+  // Configures i18n routing
+  i18n: {
+    defaultLocale: defaultLocale,
+    locales: locales,
+  },
+  // Set the route matching behavior
+  trailingSlash: 'always',
+  // Build Options
+  build: {
+    // Control the output file format of each page.
+    format: 'directory',
+  },
   // Astro integrations.
   //
   // Ref: https://docs.astro.build/en/guides/integrations-guide/
@@ -78,7 +92,12 @@ export default defineConfig({
         except: exceptions,
       },
     }),
-    sitemap(),
+    sitemap({
+      i18n: {
+        defaultLocale: defaultLocale,
+        locales: explicitLocales,
+      },
+    }),
     robotsTxt({
       sitemap: true,
     }),
@@ -153,14 +172,23 @@ export default defineConfig({
       numberedFootnoteLabels,
       remarkAlertBlocks,
       remarkCodeHighlight,
+      remarkSlider,
       remarkImageCaption,
       responsiveTables,
       remarkCodeSet,
-      remarkToc,
+      [
+        remarkToc,
+        {
+          heading: 'Summary|Sumário',
+        },
+      ],
       [
         remarkCollapse,
         {
-          test: 'Table of contents',
+          test: 'Summary|Sumário',
+          summary: (str) => {
+            return str === 'Summary' ? 'Show contents' : 'Mostrar conteúdos';
+          },
         },
       ],
     ],
@@ -174,7 +202,10 @@ export default defineConfig({
       external: ['svgo', '@resvg/resvg-js'],
     },
     // Fix 'resvg' on dev mode
-    optimizeDeps: { exclude: ['@resvg/resvg-js'] },
+    optimizeDeps: {
+      exclude: ['@resvg/resvg-js'],
+      esbuildOptions: { target: 'esnext' },
+    },
     build: { rollupOptions: { external: ['@resvg/resvg-js'] } },
   },
   // Listen on all addresses, including LAN and public addresses.
@@ -183,4 +214,13 @@ export default defineConfig({
   server: {
     host: true,
   },
+  // Astro offers experimental flags to give users early access to new features.
+  // These flags are not guaranteed to be stable.
+  experimental: {
+    // Enables a more reliable strategy to prevent scripts from being
+    // executed in pages where they are not used.
+    //
+    // https://docs.astro.build/en/reference/configuration-reference/#experimentaldirectrenderscript
+    directRenderScript: true,
+  },
 });

package.json

@@ -1,14 +1,17 @@
 {
   "name": "@lucjosin/lucasjosino.com",
   "packageManager": "[email protected]",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "private": true,
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
-    "astro": "astro"
+    "astro": "astro",
+    "sync": "astro sync",
+    "clean": "rm -rf ./dist",
+    "og:clean": "rm -rf ./public/static/open-graph/*.png"
   },
   "devDependencies": {
     "@adapttive/remark-responsive-tables": "^1.0.1",
@@ -19,30 +22,30 @@
     "@lucjosin/remark-image-caption": "./plugins/remark-image-caption",
     "@lucjosin/remark-post-reference": "./plugins/remark-post-reference",
     "@lucjosin/remark-readme-stats": "./plugins/remark-readme-stats",
+    "@lucjosin/remark-slider": "./plugins/remark-slider",
     "@typescript-eslint/eslint-plugin": "^6.8.0",
     "@typescript-eslint/parser": "^6.8.0",
-    "astro": "^4.10.1",
-    "astro-compress": "^2.2.27",
-    "astro-expressive-code": "^0.35.3",
-    "astro-icon": "^1.1.0",
+    "astro": "^4.16.8",
+    "astro-compress": "^2.3.5",
+    "astro-expressive-code": "^0.38.1",
+    "astro-icon": "^1.1.1",
     "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.3.1",
-    "prettier-plugin-astro": "^0.14.0",
+    "prettier": "^3.3.3",
+    "prettier-plugin-astro": "^0.14.1",
     "rehype-autolink-headings": "^7.1.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": "^9.0.0",
-    "satori": "^0.10.13",
-    "satori-html": "^0.3.2",
+    "satori": "^0.11.3",
+    "satori-og": "^1.0.0",
     "svgo": "2.8.0",
-    "typescript": "^5.4.5"
+    "typescript": "^5.6.3"
   },
   "dependencies": {
     "@astrojs/react": "3.0.10",
@@ -51,11 +54,12 @@
     "@iconify-json/ic": "^1.1.17",
     "@iconify-json/mdi": "^1.1.64",
     "@iconify-json/simple-icons": "^1.1.93",
+    "@iconify-json/tabler": "^1.1.118",
     "@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.3.0",
+    "astro-meta-tags": "^0.3.1",
     "medium-zoom": "^1.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

plugins/remark-code-highlight/src/index.js

@@ -1,25 +1,37 @@
 import { visit } from 'unist-util-visit';
 
-const HIGHLIGHT_REGEX = '\\{(.*?)((?:#(.*))(?:-(.*)))?\\}';
+const INLINECODE_REGEX =
+  /(.+?)\[((?:[a-zA-Z0-9_-]+=["'][^"']*["'](?:\s+[a-zA-Z0-9_-]+=["'][^"']*["'])*)\]$)/;
+
+const ATTR_REGEX = /([a-zA-Z0-9_-]+)=["']([^"']*)["']/g;
 
 export default function remarkCodeHighlight() {
   return function transformer(tree) {
     visit(tree, 'inlineCode', (inlineCodeNode) => {
-      const match = inlineCodeNode.value.match(HIGHLIGHT_REGEX);
+      const match = inlineCodeNode.value.match(INLINECODE_REGEX);
 
       if (match) {
-        // BUG: Regex returns 5 matches, instead of 4
-        const className = match[1];
-        const bgColor = match[3];
-        const textColor = match[4];
+        const modifiers = {};
+        const text = match[1];
+        const attributes = match[2];
+
+        let attrMatch;
+        while ((attrMatch = ATTR_REGEX.exec(attributes)) !== null) {
+          modifiers[attrMatch[1]] = attrMatch[2];
+        }
 
-        inlineCodeNode.value = inlineCodeNode.value.replace(match[0], '');
+        let className = '';
+        if (modifiers.class) {
+          className = modifiers.class;
+          delete modifiers.class;
+        }
 
+        inlineCodeNode.value = text;
         inlineCodeNode.data = {
           hProperties: {
-            style: [
-              bgColor && `background-color: ${bgColor}; color: ${textColor}`,
-            ],
+            style: Object.entries(modifiers).map(
+              ([key, value]) => `${key}:${value};`
+            ),
             className: ['remark-text-highlight', className],
           },
         };

plugins/remark-image-caption/src/index.js

@@ -5,6 +5,7 @@ export default function remarkImageCaption() {
     visit(tree, 'image', (imageNode) => {
       const src = imageNode.url;
       const alt = imageNode.alt;
+      const title = imageNode.title || alt || '';
 
       if (!src.match('\\.(jpeg|jpg|gif|png|webp|svg)$')) return;
 
@@ -13,7 +14,7 @@ export default function remarkImageCaption() {
         newNode = {
           type: 'html',
           value: `<figure class="remark-image-caption">
-                    <img src=${src} alt="${alt}" loading="lazy" decoding="async" />
+                    <img src=${src} alt="${alt}" title="${title}" loading="lazy" decoding="async" />
                     <figcaption>
                       ${alt} - 
                       <a 

plugins/remark-slider/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@lucjosin/remark-slider",
+  "version": "1.0.0",
+  "type": "module",
+  "author": {
+    "name": "Lucas Josino",
+    "username": "LucJosin",
+    "email": "[email protected]",
+    "url": "https://lucasjosino.com"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "homepage": "https://github.com/LucJosin/lucasjosino.com",
+  "bugs": {
+    "url": "https://github.com/LucJosin/lucasjosino.com",
+    "email": "[email protected]"
+  },
+  "license": "MIT",
+  "keywords": [
+    "remark-plugin",
+    "remark-slider"
+  ],
+  "main": "src/index.js",
+  "dependencies": {
+    "unist-util-visit": "^5.0.0"
+  }
+}