import createMDX from "@next/mdx";

/** @type {import('next').NextConfig} */
const nextConfig = {
    pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
    images: {
        remotePatterns: [
            {
                protocol: "https",
                hostname: "r2.resynced.design",
            },
        ],
    },
};

const withMDX = createMDX({
    options: {
        remarkPlugins: [],
        rehypePlugins: [],
    },
});

export default withMDX(nextConfig);

import { MDXRemote } from "next-mdx-remote";
import Link from "next/link";
import { format } from "date-fns";
import type { ChangelogEntry as ChangelogEntryType } from "@/utils/changelog";

const components = {
    h2: (props: any) => (
        <h2 className="mb-4 mt-8 text-xl font-semibold" {...props} />
    ),
    p: (props: any) => <p className="my-4" {...props} />,
    img: (props: any) => (
        <img
            className="pointer-events-none my-6 w-full select-none rounded-lg"
            {...props}
            alt={props.alt || "Changelog image"}
        />
    ),
    a: (props: any) => (
        <a className="text-blue-500 hover:underline" {...props} />
    ),
    ul: (props: any) => (
        <ul className="my-4 list-disc space-y-2 pl-5" {...props} />
    ),
    li: (props: any) => <li className="pl-2" {...props} />,
    code: (props: any) => (
        <code
            className="rounded bg-gray-800 px-1 py-0.5 font-mono text-sm"
            {...props}
        />
    ),
};

interface ChangelogEntryProps {
    entry: ChangelogEntryType;
    mdxSource: any;
    isDetailed?: boolean;
}

export const ChangelogEntry = ({
    entry,
    mdxSource,
    isDetailed = false,
}: ChangelogEntryProps) => {
    const formattedDate = format(new Date(entry.date), "MMMM d, yyyy");

    return (
        <article className="changelog-entry mb-16">
            <div className="changelog-meta mb-4 flex items-center gap-3">
                <Link
                    href={`/changelog/${entry.version}`}
                    className="pill-version"
                >
                    v{entry.version}
                </Link>
                <span className="text-gray-400">{formattedDate}</span>
            </div>
            <div className="changelog-content text-gray-200">
                <MDXRemote {...mdxSource} components={components} />
            </div>
        </article>
    );
};

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginReact from "eslint-plugin-react";

/** @type {import('eslint').Linter.Config[]} */
export default [
    { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
    { languageOptions: { globals: globals.browser } },
    pluginJs.configs.recommended,
    ...tseslint.configs.recommended,
    pluginReact.configs.flat.recommended,
];

{
  "extends": ["next/typescript", "plugin:react-hooks/recommended"]
}