create-adr-app 0.0.0-stage → 0.1.0

package/template/app/[lang]/components/LanguageSwitcher.tsx

@@ -0,0 +1,101 @@
+'use client';
+import * as React from 'react';
+import {
+  Button,
+  Menu,
+  MenuItem,
+  ListItemIcon,
+  ListItemText,
+  Typography,
+  Tooltip,
+} from '@mui/material';
+import LanguageIcon from '@mui/icons-material/Language';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import { useRouter, usePathname, useParams } from 'next/navigation';
+
+type Language = {
+  code: string;
+  name: string;
+  flag: string;
+};
+
+const languages: Language[] = [
+  { code: 'en', name: 'English', flag: '🇺🇸' },
+//   { code: 'fr', name: 'Français', flag: '🇫🇷' },
+  { code: 'de', name: 'Deutsch', flag: '🇩🇪' },
+  // Add more languages here as needed
+];
+
+export default function LanguageSwitcher() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const { lang: currentLang } = useParams() as { lang: string };
+
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const changeLanguage = (newLang: string) => {
+    handleClose();
+    if (newLang === currentLang) return;
+
+    const newPath = pathname.replace(`/${currentLang}`, `/${newLang}`);
+    router.push(newPath);
+  };
+
+  // Find current language object
+  const currentLanguage = languages.find((l) => l.code === currentLang) || languages[0];
+
+  return (
+    <>
+      <Tooltip title="Change language" arrow>
+        <Button
+          color="inherit"
+          aria-label="select language"
+          onClick={handleClick}
+          startIcon={<LanguageIcon />}
+          endIcon={<ExpandMore sx={{ fontSize: 18 }} />}
+          sx={{
+            ml: 1,
+            textTransform: 'none',
+            fontWeight: 500,
+            '&:hover': {
+              backgroundColor: 'rgba(255,255,255,0.1)',
+            },
+          }}
+        >
+          {currentLanguage.name}
+        </Button>
+      </Tooltip>
+
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+      >
+        {languages.map((lang) => (
+          <MenuItem
+            key={lang.code}
+            onClick={() => changeLanguage(lang.code)}
+            selected={lang.code === currentLang}
+          >
+            <ListItemIcon>
+              <Typography variant="body1" component="span" sx={{ fontSize: '1.4rem' }}>
+                {lang.flag}
+              </Typography>
+            </ListItemIcon>
+            <ListItemText primary={lang.name} />
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  );
+}

package/template/app/[lang]/components/MDXContent.tsx

@@ -0,0 +1,106 @@
+// app/[lang]/components/MDXContent.tsx
+// "use client";
+
+// import { MDXRemote } from "next-mdx-remote/rsc";
+// import rehypePrettyCode from "rehype-pretty-code";
+
+// import moonlightTheme from "@/public/assets/moonlight-ii.json" with { type: "json" };
+// import CodeBlock from "./CodeBlock";
+
+// const rehypePrettyCodeOptions = {
+//   keepBackground: false,
+//   theme: moonlightTheme,
+//   grid: false,
+// };
+
+// type Props = {
+//   source: string;
+//   dict?: Record<string, string>;
+// };
+
+// export default function MDXContent({ source, dict = {} }: Props) {
+//   return (
+//     <MDXRemote
+//       source={source}
+//       options={{
+//         mdxOptions: {
+//           rehypePlugins: [[rehypePrettyCode, rehypePrettyCodeOptions]],
+//         },
+//       }}
+//       components={{
+//         pre: (props: any) => <CodeBlock {...props} />,
+//         T: ({
+//           id,
+//           ...props
+//         }: { id: string } & React.HTMLAttributes<HTMLSpanElement>) => (
+//           <span {...props}>{dict[id] ?? id}</span>
+//         ),
+//       }}
+//     />
+//   );
+// }
+
+"use client";
+import { MDXRemote } from "next-mdx-remote/rsc";
+import rehypePrettyCode from "rehype-pretty-code";
+import remarkMath from "remark-math";
+import rehypeMathjax from "rehype-mathjax";
+import moonlightTheme from "@/public/assets/moonlight-ii.json" with { type: "json" };
+import CodeBlock from "./CodeBlock";
+import MathBlock from "@/app/[lang]/components/MathBlock";
+import React from "react";
+
+const rehypePrettyCodeOptions = {
+  keepBackground: false,
+  theme: moonlightTheme,
+  grid: false,
+};
+
+type Props = {
+  source: string;
+  dict?: Record<string, string>;
+};
+
+export default function MDXContent({ source, dict = {} }: Props) {
+  return (
+    <MDXRemote
+      source={source}
+      options={{
+        mdxOptions: {
+          remarkPlugins: [remarkMath],
+          rehypePlugins: [
+            [rehypePrettyCode, rehypePrettyCodeOptions],
+            rehypeMathjax,
+          ],
+        },
+      }}
+      components={{
+        pre: (props: any) => <CodeBlock {...props} />,
+        T: ({
+          id,
+          ...props
+        }: { id: string } & React.HTMLAttributes<HTMLSpanElement>) => (
+          <span {...props}>{dict[id] ?? id}</span>
+        ),
+        // INTERCEPT BLOCK MATH: Map standard display divs to your new MathBlock card
+        div: (props: any) => {
+          if (props.className?.includes("math-display")) {
+            return <MathBlock {...props} />;
+          }
+          return <div {...props} />;
+        },
+        // Intercept block-level formulas generated by MathJax using a dynamic element factory
+        // "mjx-container": (props: any) => {
+        //   // Only wrap standalone block equations (display="true"), keep inline formulas ($...$) un-wrapped
+        //   if (props.display === "true") {
+        //     return <MathBlock {...props} />;
+        //   }
+
+        //   // Dynamic rendering bypasses JSX.IntrinsicElements validation limits
+        //   return React.createElement("mjx-container", props);
+        // },
+        MathBlock,
+      }}
+    />
+  );
+}

package/template/app/[lang]/components/MathBlock.tsx

@@ -0,0 +1,340 @@
+// // "use client";
+
+// // import { useState } from "react";
+// // import { Paper, Box, Typography, IconButton, Tooltip } from "@mui/material";
+// // import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+// // import CheckIcon from "@mui/icons-material/Check";
+
+// // export default function MathBlock({ children, ...props }: any) {
+// //   const [copied, setCopied] = useState(false);
+
+// //   // Extract the raw LaTeX string provided automatically by rehype-mathjax
+// //   const rawLatex = props["data-tex"] || "";
+
+// //   const handleCopy = async () => {
+// //     if (rawLatex) {
+// //       await navigator.clipboard.writeText(rawLatex.trim());
+// //       setCopied(true);
+// //       setTimeout(() => setCopied(false), 2000);
+// //     }
+// //   };
+
+// //   return (
+// //     <Paper
+// //       elevation={0}
+// //       sx={{
+// //         my: 4,
+// //         width: "100% !important",
+// //         maxWidth: "100% !important",
+// //         overflow: "hidden !important",
+// //         border: 1,
+// //         borderColor: "divider",
+// //         borderRadius: 2,
+// //         backgroundColor: "#212126", // Matches your CodeBlock background style
+// //         boxSizing: "border-box",
+// //       }}
+// //     >
+// //       {/* Header */}
+// //       <Box
+// //         sx={{
+// //           px: 3,
+// //           py: 1.5,
+// //           bgcolor: "white",
+// //           borderBottom: 1,
+// //           borderColor: "divider",
+// //           display: "flex",
+// //           alignItems: "center",
+// //           gap: 1,
+// //         }}
+// //       >
+// //         <Typography
+// //           variant="caption"
+// //           sx={{
+// //             fontWeight: 700,
+// //             textTransform: "uppercase",
+// //             letterSpacing: "0.5px",
+// //             color: "text.secondary",
+// //             fontFamily: "monospace",
+// //           }}
+// //         >
+// //           Math Formula
+// //         </Typography>
+
+// //         <Tooltip title={copied ? "Copied LaTeX!" : "Copy LaTeX"}>
+// //           <IconButton size="small" onClick={handleCopy} sx={{ ml: "auto" }}>
+// //             {copied ? (
+// //               <CheckIcon fontSize="small" />
+// //             ) : (
+// //               <ContentCopyIcon fontSize="small" />
+// //             )}
+// //           </IconButton>
+// //         </Tooltip>
+// //       </Box>
+
+// //       {/* Render Output Area */}
+// //       <Box
+// //         sx={{
+// //           m: 0,
+// //           p: { xs: 3, sm: 4 },
+// //           width: "100% !important",
+// //           maxWidth: "100% !important",
+// //           overflowX: "auto",
+// //           overflowY: "hidden",
+// //           boxSizing: "border-box",
+// //           display: "flex",
+// //           justifyContent: "center",
+// //           alignItems: "center",
+// //           backgroundColor: "#212126 !important",
+// //         }}
+// //       >
+// //         {/* Pass down original attributes directly to native MathJax container */}
+// //         <mjx-container {...props}>{children}</mjx-container>
+// //       </Box>
+// //     </Paper>
+// //   );
+// // }
+
+// "use client";
+
+// import { useState, useRef } from "react";
+// import { Paper, Box, Typography, IconButton, Tooltip } from "@mui/material";
+// import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+// import CheckIcon from "@mui/icons-material/Check";
+
+// interface MathBlockProps {
+//   children?: React.ReactNode;
+//   title?: string;
+//   formula?: string; // Explicit property to safely carry formulas without MDX parsing errors
+// }
+
+// export default function MathBlock({
+//   children,
+//   title,
+//   formula,
+// }: MathBlockProps) {
+//   const [copied, setCopied] = useState(false);
+//   const containerRef = useRef<HTMLDivElement>(null);
+
+//   const handleCopy = async () => {
+//     let textToCopy = "";
+
+//     // 1. If explicit formula string prop is provided, copy that directly
+//     if (formula) {
+//       textToCopy = formula;
+//     }
+//     // 2. Otherwise, look inside the rendered elements to grab the hidden raw TeX data string
+//     else if (containerRef.current) {
+//       const mathjaxElement = containerRef.current.querySelector(
+//         "mjx-container[data-tex]",
+//       );
+//       textToCopy =
+//         mathjaxElement?.getAttribute("data-tex") ||
+//         containerRef.current.innerText;
+//     }
+
+//     // Clean up block markers if they were included inside a formula string parameter
+//     if (textToCopy) {
+//       textToCopy = textToCopy.replace(/^(\$\$|\$)|(\$\$|\$)$/g, "");
+//       await navigator.clipboard.writeText(textToCopy.trim());
+//       setCopied(true);
+//       setTimeout(() => setCopied(false), 2000);
+//     }
+//   };
+
+//   return (
+//     <Paper
+//       elevation={0}
+//       sx={{
+//         my: 4,
+//         width: "100% !important",
+//         maxWidth: "100% !important",
+//         overflow: "hidden !important",
+//         border: 1,
+//         borderColor: "divider",
+//         borderRadius: 2,
+//         backgroundColor: "#212126", // Matches your exact CodeBlock background color
+//         boxSizing: "border-box",
+//       }}
+//     >
+//       {/* Header */}
+//       <Box
+//         sx={{
+//           px: 3,
+//           py: 1.5,
+//           bgcolor: "white",
+//           borderBottom: 1,
+//           borderColor: "divider",
+//           display: "flex",
+//           alignItems: "center",
+//           gap: 1,
+//         }}
+//       >
+//         <Typography
+//           variant="caption"
+//           sx={{
+//             fontWeight: 700,
+//             textTransform: "uppercase",
+//             letterSpacing: "0.5px",
+//             color: "text.secondary",
+//             fontFamily: "monospace",
+//           }}
+//         >
+//           {title ? `MATH: ${title}` : "Math Formula"}
+//         </Typography>
+
+//         <Tooltip title={copied ? "Copied LaTeX!" : "Copy LaTeX"}>
+//           <IconButton size="small" onClick={handleCopy} sx={{ ml: "auto" }}>
+//             {copied ? (
+//               <CheckIcon fontSize="small" />
+//             ) : (
+//               <ContentCopyIcon fontSize="small" />
+//             )}
+//           </IconButton>
+//         </Tooltip>
+//       </Box>
+
+//       {/* Render Output Area */}
+//       <Box
+//         ref={containerRef}
+//         sx={{
+//           m: 0,
+//           p: { xs: 3, sm: 4 },
+//           width: "100% !important",
+//           maxWidth: "100% !important",
+//           overflowX: "auto",
+//           overflowY: "hidden",
+//           boxSizing: "border-box",
+//           display: "flex",
+//           justifyContent: "center",
+//           alignItems: "center",
+//           backgroundColor: "#212126 !important",
+//         }}
+//       >
+//         {formula ? formula : children}
+//       </Box>
+//     </Paper>
+//   );
+// }
+
+"use client";
+
+import { useState, useRef } from "react";
+import { Paper, Box, Typography, IconButton, Tooltip } from "@mui/material";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import CheckIcon from "@mui/icons-material/Check";
+
+interface MathBlockProps {
+  children?: React.ReactNode;
+  title?: string;
+  formula?: string; // Explicit property to safely carry formulas without MDX parsing errors
+}
+
+export default function MathBlock({
+  children,
+  title,
+  formula,
+}: MathBlockProps) {
+  const [copied, setCopied] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const handleCopy = async () => {
+    let textToCopy = "";
+
+    // 1. If explicit formula string prop is provided, copy that directly
+    if (formula) {
+      textToCopy = formula;
+    }
+    // 2. Otherwise, look inside the rendered elements to grab the hidden raw TeX data string
+    else if (containerRef.current) {
+      const mathjaxElement = containerRef.current.querySelector(
+        "mjx-container[data-tex]",
+      );
+      textToCopy =
+        mathjaxElement?.getAttribute("data-tex") ||
+        containerRef.current.innerText;
+    }
+
+    // Clean up block markers if they were included inside a formula string parameter
+    if (textToCopy) {
+      textToCopy = textToCopy.replace(/^(\$\$|\$)|(\$\$|\$)$/g, "");
+      await navigator.clipboard.writeText(textToCopy.trim());
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  return (
+    <Paper
+      elevation={0}
+      sx={{
+        my: 4,
+        width: "100% !important",
+        maxWidth: "100% !important",
+        overflow: "hidden !important",
+        border: 1,
+        borderColor: "divider",
+        borderRadius: 2,
+        backgroundColor: "#212126", // Matches your exact CodeBlock background color
+        boxSizing: "border-box",
+      }}
+    >
+      {/* Header */}
+      <Box
+        sx={{
+          px: 3,
+          py: 1.5,
+          bgcolor: "white",
+          borderBottom: 1,
+          borderColor: "divider",
+          display: "flex",
+          alignItems: "center",
+          gap: 1,
+        }}
+      >
+        <Typography
+          variant="caption"
+          sx={{
+            fontWeight: 700,
+            textTransform: "uppercase",
+            letterSpacing: "0.5px",
+            color: "text.secondary",
+            fontFamily: "monospace",
+          }}
+        >
+          {title ? `MATH: ${title}` : "Math Formula"}
+        </Typography>
+
+        <Tooltip title={copied ? "Copied LaTeX!" : "Copy LaTeX"}>
+          <IconButton size="small" onClick={handleCopy} sx={{ ml: "auto" }}>
+            {copied ? (
+              <CheckIcon fontSize="small" />
+            ) : (
+              <ContentCopyIcon fontSize="small" />
+            )}
+          </IconButton>
+        </Tooltip>
+      </Box>
+
+      {/* Render Output Area */}
+      <Box
+        ref={containerRef}
+        className="math-card-content" // Core hook linking this card's nested math to Moonlight syntax styling colors
+        sx={{
+          m: 0,
+          p: { xs: 3, sm: 4 },
+          width: "100% !important",
+          maxWidth: "100% !important",
+          overflowX: "auto",
+          overflowY: "hidden",
+          boxSizing: "border-box",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: "#212126 !important",
+        }}
+      >
+        {formula ? formula : children}
+      </Box>
+    </Paper>
+  );
+}

package/template/app/[lang]/components/MuiNextLink.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import { Link as MuiLink, type LinkProps as MuiLinkProps } from '@mui/material';
+import Link from 'next/link';
+import { forwardRef } from 'react';
+
+const MuiNextLink = forwardRef<HTMLAnchorElement, MuiLinkProps & { href: string }>(
+  (props, ref) => <MuiLink component={Link} ref={ref} {...props} />
+);
+
+export default MuiNextLink;