Skip to content

Commit

Permalink
feat: shadcn-ui
Browse files Browse the repository at this point in the history
Signed-off-by: Dup4 <lyuzhi.pan@gmail.com>
  • Loading branch information
Dup4 committed Jul 8, 2023
1 parent d192aec commit 7fe6907
Show file tree
Hide file tree
Showing 30 changed files with 633 additions and 932 deletions.
16 changes: 16 additions & 0 deletions examples/mathjax-render-react-example/components.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"rsc": false,
"tsx": true,
"tailwind": {
"config": "tailwind.config.js",
"css": "src/styles/globals.css",
"baseColor": "zinc",
"cssVariables": true
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils"
}
}
6 changes: 1 addition & 5 deletions examples/mathjax-render-react-example/next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,7 @@

const nextConfig = {
reactStrictMode: true,
// experimental: {
// fontLoaders: [
// { loader: "@next/font/google", options: { subsets: ["latin"] } },
// ],
// },
transpilePackages: ["mathjax-render", "mathjax-render-react"],
};

module.exports = nextConfig;
22 changes: 14 additions & 8 deletions examples/mathjax-render-react-example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,33 +8,39 @@
"lint": "next lint"
},
"dependencies": {
"@nextui-org/react": "1.0.0-beta.13",
"@tailwindcss/typography": "^0.5.9",
"@vercel/analytics": "^0.1.11",
"class-variance-authority": "^0.6.1",
"classnames": "^2.3.2",
"clsx": "^1.2.1",
"lucide-react": "^0.258.0",
"mathjax-render": "workspace:*",
"mathjax-render-react": "workspace:*",
"next": "^13.4.5",
"next": "^13.4.9",
"next-themes": "^0.2.1",
"nextjs-toploader": "^1.4.2",
"nprogress": "^0.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"tailwind-merge": "^1.13.2",
"tailwindcss": "^3.3.2",
"tailwindcss-animate": "^1.0.6",
"use-delayed-render": "^0.0.7"
},
"devDependencies": {
"@babel/core": "^7.22.5",
"@babel/preset-env": "^7.22.5",
"@next/codemod": "^13.4.5",
"@babel/core": "^7.22.8",
"@babel/preset-env": "^7.22.7",
"@next/codemod": "^13.4.9",
"@types/node": "17.0.39",
"@types/nprogress": "^0.2.0",
"@types/react": "^18.2.12",
"@types/react-dom": "^18.2.5",
"@types/react": "^18.2.14",
"@types/react-dom": "^18.2.6",
"autoprefixer": "^10.4.14",
"eslint": "8.26.0",
"eslint-config-next": "13.0.0",
"eslint-config-prettier": "^8.8.0",
"postcss": "^8.4.24",
"postcss": "^8.4.25",
"shadcn-ui": "^0.3.0",
"typescript": "4.7.3"
}
}
4 changes: 2 additions & 2 deletions examples/mathjax-render-react-example/postcss.config.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
autoprefixer: {},
},
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { NextResponse } from "next/server";

export function GET() {
const data = {
msg: "hello",
};

return NextResponse.json(data);
}
14 changes: 14 additions & 0 deletions examples/mathjax-render-react-example/src/app/api/tex/route.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { NextRequest } from "next/server";

import { Tex2SVG } from "mathjax-render";

export function GET(req: NextRequest) {
const { searchParams } = new URL(req.url);
const tex = searchParams.get("tex") ?? "";
const svg = Tex2SVG(tex, true);

return new Response(svg, {
status: 200,
headers: { "Content-Type": "image/svg+xml" },
});
}
30 changes: 30 additions & 0 deletions examples/mathjax-render-react-example/src/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React from "react";

import { Analytics } from "@vercel/analytics/react";

import { ThemeProvider } from "@/components/theme-provider";

import NextTopLoader from "nextjs-toploader";

import "@/styles/globals.css";

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<html lang="en" suppressHydrationWarning>
<head />
<body>
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
<NextTopLoader />
{children}
<Analytics />
</ThemeProvider>
</body>
</html>
</>
);
}
31 changes: 31 additions & 0 deletions examples/mathjax-render-react-example/src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
"use client";

import React, { ChangeEventHandler, useState, useCallback } from "react";

import { Textarea } from "@/components/ui/textarea";
import { Container } from "@components/Container";
import { MathJaxNode } from "@/components/mathjaxNode";

export default function Page() {
const [texValue, setTexValue] = useState("");

const handleTextareaChange: ChangeEventHandler<HTMLTextAreaElement> =
useCallback((event) => {
setTexValue(event.target.value);
}, []);

return (
<Container>
<div className="flex flex-1 flex-col justify-center items-center gap-y-8">
<Textarea
className="w-1/2"
rows={8}
cols={8}
value={texValue}
onChange={handleTextareaChange}
/>
<MathJaxNode tex={texValue} display={true}></MathJaxNode>
</div>
</Container>
);
}
20 changes: 20 additions & 0 deletions examples/mathjax-render-react-example/src/app/reference/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { Container } from "@/components/Container";
import { MathJaxNode } from "@/components/mathjaxNode";

import { getTexList } from "@/lib/texList";

export default function Page() {
const texList = getTexList();

return (
<Container>
<div className="flex flex-1 flex-col justify-center items-center">
{texList.map((tex, index) => (
<div key={index}>
<MathJaxNode tex={tex} display={true}></MathJaxNode>
</div>
))}
</div>
</Container>
);
}
39 changes: 22 additions & 17 deletions examples/mathjax-render-react-example/src/components/Container.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,22 @@
"use client";

import React, { useState, useEffect } from "react";

import Head from "next/head";
import Link from "next/link";
import { useRouter } from "next/router";
import { useState, useEffect } from "react";
import { usePathname } from "next/navigation";
import { useTheme } from "next-themes";
import cn from "classnames";

import { cn } from "@/lib/utils";
import { DOMAIN } from "@/lib/constant";

import Footer from "@components/Footer";
import MobileMenu from "@components/MobileMenu";

// eslint-disable-next-line @typescript-eslint/no-explicit-any
function NavItem({ href, text }: any) {
const router = useRouter();
const isActive = router.asPath === href;
const pathname = usePathname();
const isActive = pathname == href;

return (
<Link
Expand All @@ -28,17 +33,15 @@ function NavItem({ href, text }: any) {
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export default function Container(props: any) {
const Container: React.FC<any> = (props: any) => {
const [mounted, setMounted] = useState(false);
const { resolvedTheme, setTheme } = useTheme();

// After mounting, we have access to the theme
useEffect(() => setMounted(true), []);

const hostName = "https://mathjax-render.vercel.app";

const { children, ...customMeta } = props;
const router = useRouter();
const pathname = usePathname();
const meta = {
title: "MathJax Render",
description: `Mathjax Render.`,
Expand All @@ -48,13 +51,13 @@ export default function Container(props: any) {
};

return (
<div className="bg-gray-50 dark:bg-gray-900">
<div className="bg-gray-50 dark:bg-gray-900 flex flex-col min-h-screen">
<Head>
<title>{meta.title}</title>
<meta name="robots" content="follow, index" />
<meta content={meta.description} name="description" />
<meta property="og:url" content={`${hostName}${router.asPath}`} />
<link rel="canonical" href={`${hostName}${router.asPath}`} />
<meta property="og:url" content={`${DOMAIN}${pathname}`} />
<link rel="canonical" href={`${DOMAIN}${pathname}`} />
<meta property="og:type" content={meta.type} />
<meta property="og:site_name" content="MathJax Render" />
<meta property="og:description" content={meta.description} />
Expand Down Expand Up @@ -104,12 +107,14 @@ export default function Container(props: any) {
</nav>
</div>

<main
id="skip"
className="flex flex-col justify-center px-8 bg-gray-50 dark:bg-gray-900">
<main id="skip" className="flex flex-1">
{children}
<Footer />
</main>

<Footer />
</div>
);
}
};

export { Container };
export default Container;
16 changes: 9 additions & 7 deletions examples/mathjax-render-react-example/src/components/Footer.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import Link from "next/link";
import ImageWithTheme from "./ImageWithTheme";

import { GITHUB_URL } from "@lib/constant";

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const ExternalLink = ({ href, children }: any) => (
<a
Expand All @@ -17,28 +19,28 @@ export default function Footer() {
<>
<footer className="flex flex-col justify-center items-start max-w-2xl mx-auto w-full mb-8">
<hr className="w-full border-1 border-gray-200 dark:border-gray-800 mb-8" />

<div className="w-full max-w-2xl grid grid-cols-1 gap-4 pb-16 sm:grid-cols-3">
<div className="flex flex-col space-y-4">
<div className="flex flex-col items-center">
<Link
href="/"
className="text-gray-500 hover:text-gray-600 transition">
Home
</Link>
</div>
<div className="flex flex-col space-y-4">
<ExternalLink href="https://github.com/Dup4/mathjax-render">
GitHub
</ExternalLink>
<div className="flex flex-col items-center">
<ExternalLink href={GITHUB_URL}>GitHub</ExternalLink>
</div>
<div className="flex flex-col space-y-4">
<div className="flex flex-col items-center">
<Link
href="/reference"
className="text-gray-500 hover:text-gray-600 transition">
Reference
</Link>
</div>
</div>
<div>

<div className="flex justify-center items-center w-full">
<a
href="https://vercel.com"
target="_blank"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
"use client";

import { useState, useEffect } from "react";

import cn from "classnames";
import Link from "next/link";
import useDelayedRender from "use-delayed-render";
import { useState, useEffect } from "react";

import styles from "@styles/mobile-menu.module.css";

Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
"use client";

import React from "react";
import dynamic from "next/dynamic";

import { MathJaxNodeProps } from "mathjax-render-react";

const MathJaxNode = dynamic(
async () => (await import("mathjax-render-react")).MathJaxNode,
{
ssr: false,
},
);
) as unknown as React.FC<MathJaxNodeProps>;

export { MathJaxNode };
export default MathJaxNode;
36 changes: 0 additions & 36 deletions examples/mathjax-render-react-example/src/components/nprogress.tsx

This file was deleted.

0 comments on commit 7fe6907

Please sign in to comment.