Applied-Software/ghostty
5
0
Fork 0
mirror of https://github.com/ghostty-org/ghostty.git synced 2025-08-02 14:57:31 +03:00
Code Issues Packages Projects Releases Wiki Activity

website: add mdx, typography styling

Browse Source
This commit is contained in:
Mitchell Hashimoto
2023-10-05 15:06:57 -07:00
parent 88cf2eb317
commit c889b814a0
10 changed files with 6972 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
website/app/layout.tsx
View File

@ -1,8 +1,19 @@
import "./globals.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { Inter, JetBrains_Mono } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });
const inter = Inter({
subsets: ["latin"],
display: "swap",
variable: "--font-inter",
});
const jetbrains_mono = JetBrains_Mono({
subsets: ["latin"],
display: "swap",
weight: ["100", "600"],
variable: "--font-jetbrains-mono",
});
export const metadata: Metadata = {
title: "Ghostty",
@ -16,7 +27,9 @@ export default function RootLayout({
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
<body className={`${inter.className} ${jetbrains_mono.variable}`}>
{children}
</body>
</html>
);
}

13
website/app/vt/layout.tsx Normal file
View File

@ -0,0 +1,13 @@
import "@/styles/code.css";
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<div className="flex justify-center font-mono mt-8">
<div className="flex-1"></div>
<div className="w-1/2 max-w-[800px] prose prose-h1:text-base prose-h1:font-bold prose-h2:text-base prose-h2:font-bold prose-p:text-base prose-h1:m-0 prose-h1:mb-1.5 prose-h2:m-0 prose-h2:mb-1.5 prose-invert">
{children}
</div>
<div className="flex-1"></div>
</div>
);
}

11
website/app/vt/page.mdx Normal file
View File

@ -0,0 +1,11 @@
# Foo
## Bar
Hello[^1]
```javascript
const x = 42;
```
[^1]: Goodbye

7
website/mdx-components.tsx Normal file
View File

@ -0,0 +1,7 @@
import type { MDXComponents } from "mdx/types";
export function useMDXComponents(components: MDXComponents): MDXComponents {
return {
...components,
};
}

4
website/next.config.js
View File

@ -1,4 +0,0 @@
/** @type {import('next').NextConfig} */
const nextConfig = {};
module.exports = nextConfig;

26
website/next.config.mjs Normal file
View File

@ -0,0 +1,26 @@
import remarkGfm from "remark-gfm";
import rehypePrettyCode from "rehype-pretty-code";
import createMDX from "@next/mdx";
/** @type {import('next').NextConfig} */
const nextConfig = {
pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
};
/** @type {import('rehype-pretty-code').Options} */
const prettyCodeOptions = {
theme: {
dark: "one-dark-pro",
light: "one-dark-pro", // todo: when we support light mode
},
};
const withMDX = createMDX({
// Add markdown plugins here, as desired
options: {
remarkPlugins: [remarkGfm],
rehypePlugins: [[rehypePrettyCode, prettyCodeOptions]],
},
});
export default withMDX(nextConfig);

6912
website/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

16
website/package.json
View File

@ -9,19 +9,27 @@
"lint": "next lint"
},
"dependencies": {
"@mdx-js/loader": "^2.3.0",
"@mdx-js/react": "^2.3.0",
"@next/mdx": "^13.5.4",
"@types/mdx": "^2.0.8",
"next": "13.5.4",
"react": "^18",
"react-dom": "^18",
"next": "13.5.4"
"rehype-pretty-code": "^0.10.1",
"remark-gfm": "^4.0.0",
"shiki": "^0.14.4"
},
"devDependencies": {
"typescript": "^5",
"@tailwindcss/typography": "^0.5.10",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10",
"eslint": "^8",
"eslint-config-next": "13.5.4",
"postcss": "^8",
"tailwindcss": "^3",
"eslint": "^8",
"eslint-config-next": "13.5.4"
"typescript": "^5"
}
}

13
website/styles/code.css Normal file
View File

@ -0,0 +1,13 @@
@media (prefers-color-scheme: dark) {
pre[data-theme="light"],
code[data-theme="light"] {
display: none;
}
}
@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
pre[data-theme="dark"],
code[data-theme="dark"] {
display: none;
}
}

10
website/tailwind.config.ts
View File

@ -1,4 +1,5 @@
import type { Config } from "tailwindcss";
import tailwindTypography from "@tailwindcss/typography";
const config: Config = {
content: [
@ -8,13 +9,12 @@ const config: Config = {
],
theme: {
extend: {
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
fontFamily: {
sans: ["var(--font-inter)"],
mono: ["var(--font-jetbrains-mono)"],
},
},
},
plugins: [],
plugins: [tailwindTypography],
};
export default config;