This repository has been archived by the owner on Jul 18, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: init TailwindCSS & MDX components
- Loading branch information
Showing
19 changed files
with
4,870 additions
and
842 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,4 +4,4 @@ node_modules | |
| /server/build | ||
| /public/build | ||
| /build | ||
| /app/styles/windicss | ||
| /app/styles | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| import * as React from "react"; | ||
| import clsx from "clsx"; | ||
|
|
||
| type TitleProps = { | ||
| variant?: "primary" | "secondary"; | ||
| as?: React.ElementType; | ||
| className?: string; | ||
| id?: string; | ||
| } & ( | ||
| | { children: React.ReactNode } | ||
| | { | ||
| dangerouslySetInnerHTML: { | ||
| __html: string; | ||
| }; | ||
| } | ||
| ); | ||
|
|
||
| const fontSize = { | ||
| h1: "leading-tight text-4xl md:text-5xl", | ||
| h2: "leading-tight text-3xl md:text-4xl", | ||
| h3: "text-2xl font-medium md:text-3xl", | ||
| h4: "text-xl font-medium md:text-2xl", | ||
| h5: "text-lg font-medium md:text-xl", | ||
| h6: "text-lg font-medium", | ||
| }; | ||
|
|
||
| const titleColors = { | ||
| primary: "text-black dark:text-white", | ||
| secondary: "text-gray-400 dark:text-blueGray-500", | ||
| }; | ||
|
|
||
| function Title({ | ||
| variant = "primary", | ||
| size, | ||
| as, | ||
| className, | ||
| ...rest | ||
| }: TitleProps & { size: keyof typeof fontSize }) { | ||
| const Tag = as ?? size; | ||
| return ( | ||
| <Tag | ||
| className={clsx(fontSize[size], titleColors[variant], className)} | ||
| {...rest} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| function H1(props: TitleProps) { | ||
| return <Title {...props} size="h1" />; | ||
| } | ||
|
|
||
| function H2(props: TitleProps) { | ||
| return <Title {...props} size="h2" />; | ||
| } | ||
|
|
||
| function H3(props: TitleProps) { | ||
| return <Title {...props} size="h3" />; | ||
| } | ||
|
|
||
| function H4(props: TitleProps) { | ||
| return <Title {...props} size="h4" />; | ||
| } | ||
|
|
||
| function H5(props: TitleProps) { | ||
| return <Title {...props} size="h5" />; | ||
| } | ||
|
|
||
| function H6(props: TitleProps) { | ||
| return <Title {...props} size="h6" />; | ||
| } | ||
|
|
||
| type ParagraphProps = { | ||
| className?: string; | ||
| prose?: boolean; | ||
| textColorClassName?: string; | ||
| as?: React.ElementType; | ||
| } & ( | ||
| | { children: React.ReactNode } | ||
| | { dangerouslySetInnerHTML: { __html: string } } | ||
| ); | ||
|
|
||
| // from mdx-bundler readme | ||
| // const Paragraph: FC = (props) => { | ||
| // if (typeof props.children !== "string" && props?.children?.type === "img") { | ||
| // return <>{props.children}</>; | ||
| // } | ||
|
|
||
| // return <p className="mt-6" {...props} />; | ||
| // }; | ||
|
|
||
| // from kentcdodds.com | ||
| function Paragraph({ | ||
| className, | ||
| prose = true, | ||
| as = "p", | ||
| textColorClassName = "text-secondary", | ||
| ...rest | ||
| }: ParagraphProps) { | ||
| return React.createElement(as, { | ||
| className: clsx("max-w-full text-lg", textColorClassName, className, { | ||
| "prose prose-light dark:prose-dark": prose, | ||
| }), | ||
| ...rest, | ||
| }); | ||
| } | ||
|
|
||
| export { H1, H2, H3, H4, H5, H6, Paragraph }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| import fs from "fs/promises"; | ||
| import { join } from "path"; | ||
| import slugify from "@sindresorhus/slugify"; | ||
| import { Processor } from "windicss/lib"; | ||
| import { HTMLParser } from "windicss/utils/parser"; | ||
|
|
||
| type IGenerateStyles = { | ||
| url: URL; | ||
| html: string; | ||
| minify?: boolean; | ||
| }; | ||
|
|
||
| export async function generateStyles({ | ||
| url, | ||
| html, | ||
| minify = false, | ||
| }: IGenerateStyles) { | ||
| // Get windi processor | ||
| const processor = new Processor(); | ||
|
|
||
| // Parse all classes and put into one line to simplify operations | ||
| const htmlClasses = new HTMLParser(html) | ||
| .parseClasses() | ||
| .map((i) => i.result) | ||
| .join(" "); | ||
|
|
||
| // Generate preflight based on the html we input | ||
| // const preflightSheet = processor.preflight(html); | ||
|
|
||
| // Process the html classes to an interpreted style sheet | ||
| const interpretedSheet = processor.interpret(htmlClasses).styleSheet; | ||
|
|
||
| // Build styles | ||
| // const APPEND = false; | ||
| // const styles = interpretedSheet.extend(preflightSheet, APPEND).build(minify); | ||
| const styles = interpretedSheet.build(minify); | ||
|
|
||
| const cssFileName = url.pathname === "/" ? "index" : slugify(url.pathname); | ||
| const cssPath = join( | ||
| process.cwd(), | ||
| "app", | ||
| "styles", | ||
| "windicss", | ||
| `${cssFileName}.css`, | ||
| ); | ||
| await fs.writeFile(cssPath, styles); | ||
|
|
||
| return styles; | ||
| } | ||
|
|
||
| export async function generatePreflightStyles({ | ||
| minify = false, | ||
| }: { | ||
| minify: boolean; | ||
| }) { | ||
| // Get windi processor | ||
| const processor = new Processor(); | ||
|
|
||
| // Generate preflight based on the html we input | ||
| const preflightSheet = processor.preflight(); | ||
| // Build styles | ||
| const styles = preflightSheet.build(minify); | ||
|
|
||
| const cssPath = join( | ||
| process.cwd(), | ||
| "app", | ||
| "styles", | ||
| "windicss", | ||
| "preflight.css", | ||
| ); | ||
| await fs.writeFile(cssPath, styles); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.