Skip to content

Commit

Permalink
fix: add "use client" & Next.js example (#6)
Browse files Browse the repository at this point in the history
- Added support for Server Components by adding "use client"
- Added Next.js example
  • Loading branch information
moritzjacobs authored Jan 16, 2024
1 parent 90a9a1f commit 6e8be2d
Show file tree
Hide file tree
Showing 21 changed files with 13,663 additions and 13,249 deletions.
2 changes: 1 addition & 1 deletion apps/docs/app/components/clipboardable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const Clipboardable: React.FC<{
type="button"
aria-live="polite"
aria-label={copied ? "Copied!" : "Copy to clipboard"}
className="absolute right-2 top-[0.75rem] w-7 aspect-square rounded-md flex justify-center items-center bg-slate-600"
className="absolute right-2 top-[0.75rem] w-7 h-7 rounded-md flex justify-center items-center bg-slate-600"
onClick={() => {
navigator.clipboard.writeText(content);
setCopied(true);
Expand Down
2 changes: 2 additions & 0 deletions apps/docs/app/components/ribbon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ export const Ribbon = () => {
href="https://github.com/peerigon/uberschrift/"
className={className}
aria-label="View source on GitHub"
target="_blank"
rel="noreferrer"
>
<SvgSprite
className="inline-block w-6 h-6 lg:mr-3"
Expand Down
22 changes: 11 additions & 11 deletions apps/docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,27 +12,27 @@
"test:types": "tsc"
},
"dependencies": {
"@remix-run/css-bundle": "^2.4.1",
"@remix-run/node": "^2.4.1",
"@remix-run/react": "^2.4.1",
"@remix-run/serve": "^2.4.1",
"@remix-run/css-bundle": "^2.5.0",
"@remix-run/node": "^2.5.0",
"@remix-run/react": "^2.5.0",
"@remix-run/serve": "^2.5.0",
"@tailwindcss/typography": "^0.5.10",
"clsx": "^2.1.0",
"isbot": "^3.8.0",
"isbot": "^4.4.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rehype-highlight": "^7.0.0",
"uberschrift": "*"
},
"devDependencies": {
"@remix-run/dev": "^2.4.1",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^6.7.4",
"eslint": "^8.38.0",
"@remix-run/dev": "^2.5.0",
"@types/react": "^18.2.48",
"@types/react-dom": "^18.2.18",
"@typescript-eslint/eslint-plugin": "^6.19.0",
"eslint": "^8.56.0",
"npm-run-all": "^4.1.5",
"tailwindcss": "^3.4.1",
"typescript": "^5.1.6"
"typescript": "^5.3.3"
},
"engines": {
"node": ">=20"
Expand Down
1 change: 1 addition & 0 deletions apps/nextjs-example/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
.next
36 changes: 36 additions & 0 deletions apps/nextjs-example/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
4 changes: 4 additions & 0 deletions apps/nextjs-example/next.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
/** @type {import('next').NextConfig} */
const nextConfig = {};

module.exports = nextConfig;
29 changes: 29 additions & 0 deletions apps/nextjs-example/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{
"name": "nextjs-example",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@tailwindcss/typography": "^0.5.10",
"next": "14.0.4",
"react": "^18",
"react-dom": "^18",
"uberschrift": "*"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"@uberschrift/eslint-config": "*",
"@uberschrift/tsconfig": "*",
"autoprefixer": "^10.4.16",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}
}
6 changes: 6 additions & 0 deletions apps/nextjs-example/postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
3 changes: 3 additions & 0 deletions apps/nextjs-example/src/app/globals.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
19 changes: 19 additions & 0 deletions apps/nextjs-example/src/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import type { Metadata } from "next";
import "./globals.css";

export const metadata: Metadata = {
title: "uberschrift Next.js example",
description: "Base on create next app",
};

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
49 changes: 49 additions & 0 deletions apps/nextjs-example/src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import { SubComponent } from "@/sub-component";
import { Hx, HxBoundary } from "uberschrift";

const App = () => {
return (
<main className="prose max-w-screen-lg m-auto py-8">
<Hx>Vite — Main Title (h1)</Hx>

<HxBoundary>
<p>
Lorem ipsum dolor sit amet convallis dictumst duis risus
nulla aliqua tortor.
</p>

<Hx>Chapter 1 (h2)</Hx>

<p>
Senectus netus aliquet nunc egestas habitasse sapien morbi
eu sagittis adipiscing. Maecenas diam tellus nulla ac
incididunt molestie libero.
</p>

<HxBoundary>
<Hx>Chapter 1.1 (h3)</Hx>
<p>
Lorem ipsum dolor sit amet pulvinar venenatis eiusmod
feugiat dapibus duis. Aenean fusce nunc hendrerit mollis
senectus consectetur magna fames at convallis.
</p>

<SubComponent />

<p>Lorem ipsum dolor sit amet ac consequat netus mi.</p>
</HxBoundary>

<Hx>Chapter 2 (h2)</Hx>

<p>
Urna senectus lobortis risus consequat laoreet quam volutpat
convallis. Fermentum ullamcorper duis vel consequat
incididunt donec nisl vestibulum. Auctor egestas pretium
erat arcu adipiscing eros et libero nunc.
</p>
</HxBoundary>
</main>
);
};

export default App;
13 changes: 13 additions & 0 deletions apps/nextjs-example/src/sub-component.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
"use client";

import { useHx } from "uberschrift";

export const SubComponent = () => {
const { Element, level } = useHx();

return (
<Element>
This is an {Element} (level = {level})
</Element>
);
};
13 changes: 13 additions & 0 deletions apps/nextjs-example/tailwind.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import type { Config } from "tailwindcss";
import typography from "@tailwindcss/typography";

const config: Config = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],

plugins: [typography],
};
export default config;
29 changes: 29 additions & 0 deletions apps/nextjs-example/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{
"extends": "@uberschrift/tsconfig/base.json",
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts"
],
"exclude": [
"node_modules"
],
"compilerOptions": {
"noEmit": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": [
"./src/*"
]
},
"allowJs": true,
"incremental": true,
"esModuleInterop": true,
"jsx": "preserve"
}
}
12 changes: 5 additions & 7 deletions apps/vite-chakra-ui-example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,14 @@
"uberschrift": "*"
},
"devDependencies": {
"@types/react": "^18.2.43",
"@types/react-dom": "^18.2.17",
"@typescript-eslint/eslint-plugin": "^6.14.0",
"@typescript-eslint/parser": "^6.14.0",
"@types/react": "^18.2.48",
"@types/react-dom": "^18.2.18",
"@uberschrift/eslint-config": "*",
"@uberschrift/tsconfig": "*",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.55.0",
"eslint": "^8.56.0",
"npm-run-all": "^4.1.5",
"typescript": "^5.2.2",
"vite": "^5.0.8"
"typescript": "^5.3.3",
"vite": "^5.0.11"
}
}
12 changes: 5 additions & 7 deletions apps/vite-example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,18 +18,16 @@
"uberschrift": "*"
},
"devDependencies": {
"@types/react": "^18.2.43",
"@types/react-dom": "^18.2.17",
"@typescript-eslint/eslint-plugin": "^6.14.0",
"@typescript-eslint/parser": "^6.14.0",
"@types/react": "^18.2.48",
"@types/react-dom": "^18.2.18",
"@uberschrift/eslint-config": "*",
"@uberschrift/tsconfig": "*",
"@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.16",
"eslint": "^8.55.0",
"eslint": "^8.56.0",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.33",
"typescript": "^5.2.2",
"vite": "^5.0.8"
"typescript": "^5.3.3",
"vite": "^5.0.11"
}
}
12 changes: 5 additions & 7 deletions apps/vite-mui-example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,14 @@
"uberschrift": "*"
},
"devDependencies": {
"@types/react": "^18.2.43",
"@types/react-dom": "^18.2.17",
"@typescript-eslint/eslint-plugin": "^6.14.0",
"@typescript-eslint/parser": "^6.14.0",
"@types/react": "^18.2.48",
"@types/react-dom": "^18.2.18",
"@uberschrift/eslint-config": "*",
"@uberschrift/tsconfig": "*",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.55.0",
"eslint": "^8.56.0",
"npm-run-all": "^4.1.5",
"typescript": "^5.2.2",
"vite": "^5.0.8"
"typescript": "^5.3.3",
"vite": "^5.0.11"
}
}
Loading

0 comments on commit 6e8be2d

Please sign in to comment.