Merge pull request #17 from code-star/feature/upgrade_next

Feature/upgrade next

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

.gitignore

@@ -3,7 +3,12 @@
 # dependencies
 /node_modules
 /.pnp
-.pnp.js
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
 
 # testing
 /coverage
@@ -25,8 +30,8 @@ yarn-debug.log*
 yarn-error.log*
 .pnpm-debug.log*
 
-# local env files
-.env*.local
+# env files (can opt-in for committing if needed)
+.env*
 
 # vercel
 .vercel

eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

mdx-components.tsx

@@ -0,0 +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

@@ -0,0 +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({
+  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);