Merge pull request #19 from nemanjam/feat/astro-react-gallery-article

Astro React gallery article

Author: nemanjam

astro.config.ts

@@ -42,5 +42,9 @@ export default defineConfig({
     build: {
       sourcemap: false,
     },
+    server: {
+      // applies only to Vite dev server
+      allowedHosts: ['localhost', 'preview.amd1.nemanjamitic.com'],
+    },
   },
 });

docs/working-notes/todo4.md

@@ -156,6 +156,23 @@ flex flex-col and flex-grow until (including) client component to prevent layout
 -----------------
 // try pixelated blur
 style="image-rendering: pixelated;"
+-------
+// tunnel preview
+ssh -R *:1082:localhost:3000 amd1c
+https://preview.amd1.nemanjamitic.com
+
+vite: {
+  build: {
+    sourcemap: false,
+  },
+  server: {
+    allowedHosts: ['preview.amd1.nemanjamitic.com'],
+  },
+},
+-------
+open external md links in new tab by default
+https://cosmicthemes.com/blog/astro-mdx-external-link/
+https://github.com/rehypejs/rehype-external-links
 ```
 
 

package.json

@@ -25,6 +25,9 @@
     "docker:build:push:arm": "docker buildx build -f ./docker/Dockerfile -t nemanjamitic/nemanjam.github.io --build-arg ARG_SITE_URL_ARM64='https://nmc-docker.arm1.nemanjamitic.com' --build-arg ARG_PLAUSIBLE_SCRIPT_URL='https://plausible.arm1.nemanjamitic.com/js/script.js' --build-arg ARG_PLAUSIBLE_DOMAIN='nemanjamitic.com' --platform linux/arm64 --progress=plain --push .",
     "docker:build:push:x86": "docker buildx build -f ./docker/Dockerfile -t nemanjamitic/nemanjam.github.io --build-arg ARG_SITE_URL_AMD64='https://nmc-docker.local.nemanjamitic.com' --build-arg ARG_PLAUSIBLE_SCRIPT_URL='https://plausible.arm1.nemanjamitic.com/js/script.js' --build-arg ARG_PLAUSIBLE_DOMAIN='nemanjamitic.com' --platform linux/amd64 --push --progress=plain .",
     "docker:push": "docker push nemanjamitic/nemanjam.github.io",
+    "pi": "yarn build:nginx:pi && yarn deploy:nginx:pi",
+    "nginx": "yarn build:nginx && yarn deploy:nginx",
+    "tunnel": "ssh -R *:1082:localhost:3000 amd1c",
     "dc:up": "docker compose up --build --force-recreate -d"
   },
   "dependencies": {
@@ -68,8 +71,8 @@
     "@tailwindcss/typography": "^0.5.16",
     "@types/lodash.debounce": "^4.0.9",
     "@types/mdast": "^4.0.3",
-    "@types/react": "^19.0.12",
-    "@types/react-dom": "^19.0.4",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.1",
     "@typescript-eslint/eslint-plugin": "^8.29.0",
     "@typescript-eslint/parser": "^8.29.0",
     "eslint": "8.57.0",

src/components/PostCard.astro

@@ -60,7 +60,7 @@ const getTransitionNameFromElementId = setTransitionSlug({ pageSlug: slug });
           src={heroImage}
           alt={heroAlt}
           itemprop="image"
-          class="w-full h-[168px] xs:h-[250px] md:h-[168px] md:max-w-[298px] object-cover rounded-box"
+          class="w-full h-[168px] xs:h-[250px] md:h-[168px] md:max-w-[298px] object-cover rounded-box shadow shadow-base-300"
           transition:name={getTransitionNameFromElementId({
             elementId: TRANSITION_ELEMENT_IDS.POST_CARD.HERO_IMAGE,
           })}

src/constants/metadata.ts

@@ -31,7 +31,7 @@ export const PAGE_METADATA = {
   'lists/blog': {
     title: 'Blog',
     description:
-      'Est aliquip reprehenderit eu esse duis laboris cillum adipisicing reprehenderitvoluptate ex aute voluptate.',
+      'Here I share my coding experiments and thoughts on React.js, Next.js, Node.js, Astro, Python, DevOps, and more. Feel free to read, explore, and comment.',
   },
   'lists/blog/tags': {
     title: 'Tags',