fix: images and frontmatter in mdx and scss upgrade

Author: mdvanes

.github/workflows/test.yml

@@ -0,0 +1,58 @@
+name: Deploy to Test (https://code-star.github.io/codestar-website-next/)
+
+on:
+  push:
+    branches:
+      - main
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Install and Build components 🔧
+        # .nojekyll: do not ignore _ dirs
+        run: |
+          touch .env
+          echo TWITTER_ACCESS_TOKEN=${{ secrets.TWITTER_ACCESS_TOKEN }} >> .env
+          echo TWITTER_USER_NAME=${{ secrets.TWITTER_USER_NAME }} >> .env
+          echo YOUTUBE_API_KEY=${{ secrets.YOUTUBE_API_KEY }} >> .env
+          echo YOUTUBE_PLAYLIST_ID=${{ secrets.YOUTUBE_PLAYLIST_ID }} >> .env
+          echo MASTODON_ACCESS_TOKEN=${{ secrets.MASTODON_ACCESS_TOKEN }} >> .env
+          echo MASTODON_ID=${{ secrets.MASTODON_ID }} >> .env
+          npm ci
+          echo "{ \"basePath\": \"/codestar-website-next\" }" > config.json
+          npx next build && npx next export
+          touch out/.nojekyll
+        #     CI: false # true -> fails on warning
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: "out"
+      - name: Deploy to GitHub Pages 🚀
+        id: deployment
+        uses: actions/deploy-pages@v4

mdx-components.tsx

@@ -1,7 +1,16 @@
 import type { MDXComponents } from "mdx/types";
+import Image, { ImageProps } from 'next/image'
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
+    img: (props: ImageProps) => (
+      // eslint-disable-next-line jsx-a11y/alt-text
+      <Image
+        sizes="100vw"
+        style={{ width: '100%', height: 'auto' }}
+        {...props}
+      />
+    ),
     ...components,
   };
 }

mdx.d.ts

@@ -0,0 +1,12 @@
+export interface ArticleMetadata {
+  title?: string;
+  author?: string;
+  publishedAt?: string;
+}
+
+declare module "*.mdx" {
+  let MDXComponent: (props) => JSX.Element;
+  export default MDXComponent;
+
+  export const metadata: ArticleMetadata;
+}

next.config.ts

@@ -1,13 +1,25 @@
 import type { NextConfig } from "next";
 import createMDX from "@next/mdx";
+import remarkFrontmatter from "remark-frontmatter";
+import remarkMdxFrontmatter from "remark-mdx-frontmatter";
 
 const nextConfig: NextConfig = {
   pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
   reactStrictMode: true,
+  experimental: {
+    mdxRs: false,
+  },
 };
 
 const withMDX = createMDX({
-  // Add markdown plugins here, as desired
+  extension: /\.mdx?$/,
+  options: {
+    // turbopack does not yet support these plugins, see https://nextjs.org/docs/app/building-your-application/configuring/mdx#using-plugins-with-turbopack
+    remarkPlugins: [
+      remarkFrontmatter,
+      [remarkMdxFrontmatter, { name: "metadata" }],
+    ],
+  },
 });
 
 export default withMDX(nextConfig);

package-lock.json

@@ -3,7 +3,8 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
+    "devTurbo": "next dev --turbopack",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -16,7 +17,9 @@
     "html-to-text": "^9.0.5",
     "next": "15.1.7",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "remark-frontmatter": "^5.0.0",
+    "remark-mdx-frontmatter": "^5.0.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",