From 8e90e64af6c2c7dea9f88359266078b29c267c6d Mon Sep 17 00:00:00 2001 From: Arkar Myat Date: Wed, 2 Oct 2024 14:31:37 -0400 Subject: [PATCH 1/3] added design page --- app/(design)/design/page.tsx | 9 +++ app/(design)/globals.css | 67 ++++++++++++++++++ app/(design)/layout.tsx | 15 ++++ app/(web)/layout.tsx | 7 +- components.json | 20 ++++++ components/design/Typography.tsx | 117 +++++++++++++++++++++++++++++++ components/ui/button.tsx | 57 +++++++++++++++ lib/utils.ts | 6 ++ package.json | 9 ++- pnpm-lock.yaml | 103 +++++++++++++++++++++++++++ tailwind.config.js | 56 +++++++++++++-- tsconfig.json | 3 +- 12 files changed, 458 insertions(+), 11 deletions(-) create mode 100644 app/(design)/design/page.tsx create mode 100644 app/(design)/globals.css create mode 100644 app/(design)/layout.tsx create mode 100644 components.json create mode 100644 components/design/Typography.tsx create mode 100644 components/ui/button.tsx create mode 100644 lib/utils.ts diff --git a/app/(design)/design/page.tsx b/app/(design)/design/page.tsx new file mode 100644 index 0000000..b3bacc4 --- /dev/null +++ b/app/(design)/design/page.tsx @@ -0,0 +1,9 @@ +import { TypographyDemo } from "@/components/design/Typography"; + +export default function Page() { + return ( +
+ +
+ ) +} diff --git a/app/(design)/globals.css b/app/(design)/globals.css new file mode 100644 index 0000000..7c57e2f --- /dev/null +++ b/app/(design)/globals.css @@ -0,0 +1,67 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 0 0% 3.9%; + --card: 0 0% 100%; + --card-foreground: 0 0% 3.9%; + --popover: 0 0% 100%; + --popover-foreground: 0 0% 3.9%; + --primary: 0 0% 9%; + --primary-foreground: 0 0% 98%; + --secondary: 0 0% 96.1%; + --secondary-foreground: 0 0% 9%; + --muted: 0 0% 96.1%; + --muted-foreground: 0 0% 45.1%; + --accent: 0 0% 96.1%; + --accent-foreground: 0 0% 9%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 89.8%; + --input: 0 0% 89.8%; + --ring: 0 0% 3.9%; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; + --radius: 0.5rem + } + .dark { + --background: 0 0% 3.9%; + --foreground: 0 0% 98%; + --card: 0 0% 3.9%; + --card-foreground: 0 0% 98%; + --popover: 0 0% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 0 0% 98%; + --primary-foreground: 0 0% 9%; + --secondary: 0 0% 14.9%; + --secondary-foreground: 0 0% 98%; + --muted: 0 0% 14.9%; + --muted-foreground: 0 0% 63.9%; + --accent: 0 0% 14.9%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 14.9%; + --input: 0 0% 14.9%; + --ring: 0 0% 83.1%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55% + } +} +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} diff --git a/app/(design)/layout.tsx b/app/(design)/layout.tsx new file mode 100644 index 0000000..aa01e9b --- /dev/null +++ b/app/(design)/layout.tsx @@ -0,0 +1,15 @@ +import React from "react"; +import './globals.css'; + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + + {children} + + ); +} diff --git a/app/(web)/layout.tsx b/app/(web)/layout.tsx index bf619c2..4ad50b0 100644 --- a/app/(web)/layout.tsx +++ b/app/(web)/layout.tsx @@ -7,7 +7,7 @@ import NavAside from "@/components/common/nav-aside"; import React from "react"; import type { Metadata } from "next"; import { AnalyticsWrapper } from "@/components/common/analytics"; -import { Inter } from "next/font/google"; +import { Inter, Ubuntu } from "next/font/google"; import { getOpenGraph, getTwitterCard, metaData } from "@/utils/metadata"; import { CSPostHogProvider } from "@/components/providers/PostHogProvider"; @@ -59,7 +59,8 @@ export const metadata: Metadata = { ), }; -const inter = Inter({ +const ubuntu = Ubuntu({ + weight: ["300", "400", "500", "700"], subsets: ["latin"], display: "swap", }); @@ -70,7 +71,7 @@ export default function RootLayout({ children: React.ReactNode; }) { return ( - + diff --git a/components.json b/components.json new file mode 100644 index 0000000..3810e5e --- /dev/null +++ b/components.json @@ -0,0 +1,20 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "new-york", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "tailwind.config.js", + "css": "app/(studio)/global.css", + "baseColor": "neutral", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + } +} \ No newline at end of file diff --git a/components/design/Typography.tsx b/components/design/Typography.tsx new file mode 100644 index 0000000..09f4a84 --- /dev/null +++ b/components/design/Typography.tsx @@ -0,0 +1,117 @@ +import NextLink from "next/link"; + +export function H1() { + return ( +

+ The Joke Tax Chronicles +

+ ); +} + +export function H2() { + return ( +

+ The King's Plan +

+ ); +} + +export function H3() { + return ( +

+ The Joke Tax +

+ ); +} + +export function H4() { + return ( +

+ The Joke Tax +

+ ); +} + +export function Paragraph() { + return ( +

+ As a result, people stopped telling jokes, and the kingdom fell into a + gloom. But there was one person who refused to let the king's foolishness + get him down: a court jester named Jokester. +

+ ); +} + +export function Link() { + return ( + + a brilliant plan + + ); +} + +export function Blockqoute() { + return ( +
+ "After all," he said, "everyone enjoys a good joke, so it's only fair that + they should pay for the privilege." +
+ ); +} + +export function UnorderedList() { + return ( + + ); +} + +export function Table() { + return ( + + + + + + + + + + + + + + + + + + + + + +
+ King's Treasury + + People's happiness +
+ Empty + + Overflowing +
+ Modest + + Satisfied +
+ Full + + Ecstatic +
+ ); +} + diff --git a/components/ui/button.tsx b/components/ui/button.tsx new file mode 100644 index 0000000..0270f64 --- /dev/null +++ b/components/ui/button.tsx @@ -0,0 +1,57 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const buttonVariants = cva( + "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", + { + variants: { + variant: { + default: + "bg-primary text-primary-foreground shadow hover:bg-primary/90", + destructive: + "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90", + outline: + "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground", + secondary: + "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80", + ghost: "hover:bg-accent hover:text-accent-foreground", + link: "text-primary underline-offset-4 hover:underline", + }, + size: { + default: "h-9 px-4 py-2", + sm: "h-8 rounded-md px-3 text-xs", + lg: "h-10 rounded-md px-8", + icon: "h-9 w-9", + }, + }, + defaultVariants: { + variant: "default", + size: "default", + }, + } +) + +export interface ButtonProps + extends React.ButtonHTMLAttributes, + VariantProps { + asChild?: boolean +} + +const Button = React.forwardRef( + ({ className, variant, size, asChild = false, ...props }, ref) => { + const Comp = asChild ? Slot : "button" + return ( + + ) + } +) +Button.displayName = "Button" + +export { Button, buttonVariants } diff --git a/lib/utils.ts b/lib/utils.ts new file mode 100644 index 0000000..bd0c391 --- /dev/null +++ b/lib/utils.ts @@ -0,0 +1,6 @@ +import { clsx, type ClassValue } from "clsx" +import { twMerge } from "tailwind-merge" + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)) +} diff --git a/package.json b/package.json index 93dc6a2..c0c7a10 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,9 @@ "@liveblocks/react": "^1.8.2", "@portabletext/react": "^2.0.3", "@radix-ui/react-dialog": "^1.0.5", + "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-popover": "^1.0.7", + "@radix-ui/react-slot": "^1.1.0", "@react-three/drei": "^9.88.17", "@react-three/fiber": "^8.15.11", "@sanity/asset-utils": "^1.3.0", @@ -43,7 +45,9 @@ "@vercel/postgres": "^0.3.2", "algoliasearch": "^4.20.0", "chart.js": "^4.4.0", + "class-variance-authority": "^0.7.0", "classnames": "^2.3.2", + "clsx": "^2.1.1", "cmdk": "^0.1.22", "dateformat": "^5.0.3", "dracula-prism": "^2.1.13", @@ -52,6 +56,7 @@ "form-data": "^4.0.0", "friendly-challenge": "^0.9.14", "html-to-text": "^9.0.5", + "lucide-react": "^0.447.0", "mailgun.js": "^8.2.2", "mastodon-api": "^1.3.0", "net": "^1.0.2", @@ -73,7 +78,9 @@ "sanity-plugin-graph-view": "^2.0.1", "sanity-plugin-latex-input": "^2.0.4", "sharp": "^0.33.2", - "styled-components": "^6.1.9" + "styled-components": "^6.1.9", + "tailwind-merge": "^2.5.2", + "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "@faker-js/faker": "^8.3.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 101b206..77d7b3a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -32,9 +32,15 @@ importers: '@radix-ui/react-dialog': specifier: ^1.0.5 version: 1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.57)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-icons': + specifier: ^1.3.0 + version: 1.3.0(react@18.3.1) '@radix-ui/react-popover': specifier: ^1.0.7 version: 1.0.7(@types/react-dom@18.2.19)(@types/react@18.2.57)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-slot': + specifier: ^1.1.0 + version: 1.1.0(@types/react@18.2.57)(react@18.3.1) '@react-three/drei': specifier: ^9.88.17 version: 9.99.0(@react-three/fiber@8.15.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(three@0.159.0))(@types/react@18.2.57)(@types/three@0.149.0)(immer@10.0.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(three@0.159.0) @@ -104,9 +110,15 @@ importers: chart.js: specifier: ^4.4.0 version: 4.4.1 + class-variance-authority: + specifier: ^0.7.0 + version: 0.7.0 classnames: specifier: ^2.3.2 version: 2.5.1 + clsx: + specifier: ^2.1.1 + version: 2.1.1 cmdk: specifier: ^0.1.22 version: 0.1.22(@types/react@18.2.57)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -131,6 +143,9 @@ importers: html-to-text: specifier: ^9.0.5 version: 9.0.5 + lucide-react: + specifier: ^0.447.0 + version: 0.447.0(react@18.3.1) mailgun.js: specifier: ^8.2.2 version: 8.2.2 @@ -197,6 +212,12 @@ importers: styled-components: specifier: ^6.1.9 version: 6.1.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + tailwind-merge: + specifier: ^2.5.2 + version: 2.5.2 + tailwindcss-animate: + specifier: ^1.0.7 + version: 1.0.7(tailwindcss@3.4.1) devDependencies: '@faker-js/faker': specifier: ^8.3.1 @@ -2099,6 +2120,15 @@ packages: '@types/react': optional: true + '@radix-ui/react-compose-refs@1.1.0': + resolution: {integrity: sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@radix-ui/react-context@1.0.0': resolution: {integrity: sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==} peerDependencies: @@ -2184,6 +2214,11 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-icons@1.3.0': + resolution: {integrity: sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==} + peerDependencies: + react: ^16.x || ^17.x || ^18.x + '@radix-ui/react-id@1.0.0': resolution: {integrity: sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==} peerDependencies: @@ -2295,6 +2330,15 @@ packages: '@types/react': optional: true + '@radix-ui/react-slot@1.1.0': + resolution: {integrity: sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@radix-ui/react-use-callback-ref@1.0.0': resolution: {integrity: sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==} peerDependencies: @@ -3679,6 +3723,9 @@ packages: cjs-module-lexer@1.2.3: resolution: {integrity: sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==} + class-variance-authority@0.7.0: + resolution: {integrity: sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==} + classnames@2.5.1: resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==} @@ -3726,6 +3773,14 @@ packages: resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==} engines: {node: '>=0.8'} + clsx@2.0.0: + resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==} + engines: {node: '>=6'} + + clsx@2.1.1: + resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} + engines: {node: '>=6'} + cmdk@0.1.22: resolution: {integrity: sha512-F0ffliBO/U6SXKGRud9AjsNuINvfF+d9BVUgi/y2+v3TSBHVOmIXl43CWLEyEEIOwc2DTnlXvIQenhGAEpwW0Q==} peerDependencies: @@ -6018,6 +6073,11 @@ packages: resolution: {integrity: sha512-ERJq3FOzJTxBbFjZ7iDs+NiK4VI9Wz+RdrrAB8dio1oV+YvdPzUEE4QNiT2VD51DkIbCYRUUzCRkssXCHqSnKQ==} engines: {node: 14 || >=16.14} + lucide-react@0.447.0: + resolution: {integrity: sha512-SZ//hQmvi+kDKrNepArVkYK7/jfeZ5uFNEnYmd45RKZcbGD78KLnrcNXmgeg6m+xNHFvTG+CblszXCy4n6DN4w==} + peerDependencies: + react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc + lz-string@1.5.0: resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==} hasBin: true @@ -7695,6 +7755,14 @@ packages: table@3.8.3: resolution: {integrity: sha512-RZuzIOtzFbprLCE0AXhkI0Xi42ZJLZhCC+qkwuMLf/Vjz3maWpA8gz1qMdbmNoI9cOROT2Am/DxeRyXenrL11g==} + tailwind-merge@2.5.2: + resolution: {integrity: sha512-kjEBm+pvD+6eAwzJL2Bi+02/9LFLal1Gs61+QB7HvTfQQ0aXwC5LGT8PEt1gS0CWKktKe6ysPTAy3cBC5MeiIg==} + + tailwindcss-animate@1.0.7: + resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==} + peerDependencies: + tailwindcss: '>=3.0.0 || insiders' + tailwindcss@3.4.1: resolution: {integrity: sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==} engines: {node: '>=14.0.0'} @@ -10635,6 +10703,12 @@ snapshots: optionalDependencies: '@types/react': 18.2.57 + '@radix-ui/react-compose-refs@1.1.0(@types/react@18.2.57)(react@18.3.1)': + dependencies: + react: 18.3.1 + optionalDependencies: + '@types/react': 18.2.57 + '@radix-ui/react-context@1.0.0(react@18.3.1)': dependencies: '@babel/runtime': 7.23.9 @@ -10750,6 +10824,10 @@ snapshots: '@types/react': 18.2.57 '@types/react-dom': 18.2.19 + '@radix-ui/react-icons@1.3.0(react@18.3.1)': + dependencies: + react: 18.3.1 + '@radix-ui/react-id@1.0.0(react@18.3.1)': dependencies: '@babel/runtime': 7.23.9 @@ -10874,6 +10952,13 @@ snapshots: optionalDependencies: '@types/react': 18.2.57 + '@radix-ui/react-slot@1.1.0(@types/react@18.2.57)(react@18.3.1)': + dependencies: + '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.57)(react@18.3.1) + react: 18.3.1 + optionalDependencies: + '@types/react': 18.2.57 + '@radix-ui/react-use-callback-ref@1.0.0(react@18.3.1)': dependencies: '@babel/runtime': 7.23.9 @@ -12729,6 +12814,10 @@ snapshots: cjs-module-lexer@1.2.3: {} + class-variance-authority@0.7.0: + dependencies: + clsx: 2.0.0 + classnames@2.5.1: {} clean-css@5.3.3: @@ -12771,6 +12860,10 @@ snapshots: clone@1.0.4: {} + clsx@2.0.0: {} + + clsx@2.1.1: {} + cmdk@0.1.22(@types/react@18.2.57)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: '@radix-ui/react-dialog': 1.0.0(@types/react@18.2.57)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -15659,6 +15752,10 @@ snapshots: lru-cache@9.1.2: {} + lucide-react@0.447.0(react@18.3.1): + dependencies: + react: 18.3.1 + lz-string@1.5.0: {} maath@0.10.7(@types/three@0.149.0)(three@0.159.0): @@ -17590,6 +17687,12 @@ snapshots: slice-ansi: 0.0.4 string-width: 2.1.1 + tailwind-merge@2.5.2: {} + + tailwindcss-animate@1.0.7(tailwindcss@3.4.1): + dependencies: + tailwindcss: 3.4.1 + tailwindcss@3.4.1: dependencies: '@alloc/quick-lru': 5.2.0 diff --git a/tailwind.config.js b/tailwind.config.js index c33d7d1..c6de1ed 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,5 +1,6 @@ /** @type {import('tailwindcss').Config} */ module.exports = { + darkMode: ["class"], content: [ "./app/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}", @@ -7,9 +8,6 @@ module.exports = { ], theme: { extend: { - gridTemplateColumns: { - fluid: "repeat(auto-fill, minmax(200px, 1fr))", - }, gridTemplateColumns: { dashboard: "200px auto 300px", }, @@ -24,14 +22,60 @@ module.exports = { "theme-accent": "#88ced3", "theme-accent-opaque": "#88ced309", "theme-body": "#cbd5e1", + background: "hsl(var(--background))", + foreground: "hsl(var(--foreground))", + card: { + DEFAULT: "hsl(var(--card))", + foreground: "hsl(var(--card-foreground))", + }, + popover: { + DEFAULT: "hsl(var(--popover))", + foreground: "hsl(var(--popover-foreground))", + }, + primary: { + DEFAULT: "hsl(var(--primary))", + foreground: "hsl(var(--primary-foreground))", + }, + secondary: { + DEFAULT: "hsl(var(--secondary))", + foreground: "hsl(var(--secondary-foreground))", + }, + muted: { + DEFAULT: "hsl(var(--muted))", + foreground: "hsl(var(--muted-foreground))", + }, + accent: { + DEFAULT: "hsl(var(--accent))", + foreground: "hsl(var(--accent-foreground))", + }, + destructive: { + DEFAULT: "hsl(var(--destructive))", + foreground: "hsl(var(--destructive-foreground))", + }, + border: "hsl(var(--border))", + input: "hsl(var(--input))", + ring: "hsl(var(--ring))", + chart: { + 1: "hsl(var(--chart-1))", + 2: "hsl(var(--chart-2))", + 3: "hsl(var(--chart-3))", + 4: "hsl(var(--chart-4))", + 5: "hsl(var(--chart-5))", + }, }, fontFamily: { - theme: ["Inter", "sans-serif"], + theme: ["Ubuntu", "Inter", "sans-serif"], + design: ["Ubuntu", "Inter", "sans-serif"], + }, + borderRadius: { + lg: "var(--radius)", + md: "calc(var(--radius) - 2px)", + sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [ - // require("@tailwindcss/line-clamp"), - require("@tailwindcss/container-queries"), // require("@tailwindcss/typography"), + require("@tailwindcss/container-queries"), + require("tailwindcss-animate"), ], }; diff --git a/tsconfig.json b/tsconfig.json index 9d7f441..77e3642 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -24,7 +24,8 @@ "forceConsistentCasingInFileNames": true, "experimentalDecorators": true, "paths": { - "@/*": ["./*"] + "@/*": ["./*"], + "@design": ["./components/design/*"] }, "plugins": [ { From 3b80e1a3bb79c746f64f6489727d3854ee7f63a0 Mon Sep 17 00:00:00 2001 From: Arkar Myat Date: Wed, 2 Oct 2024 16:16:36 -0400 Subject: [PATCH 2/3] wip design page --- app/(design)/design/page.tsx | 19 ++++-- app/(design)/globals.css | 67 --------------------- app/(design)/layout.tsx | 4 +- app/(studio)/global.css | 3 - app/(studio)/layout.tsx | 2 +- app/(web)/layout.tsx | 4 +- components/design/Header.tsx | 12 ++++ components/design/Typography.tsx | 96 +++++++++++++++++++++---------- {app/(web) => styles}/globals.css | 68 ++++++++++++++++++++++ tailwind.config.js | 2 + tsconfig.json | 3 +- 11 files changed, 169 insertions(+), 111 deletions(-) delete mode 100644 app/(design)/globals.css delete mode 100644 app/(studio)/global.css create mode 100644 components/design/Header.tsx rename {app/(web) => styles}/globals.css (72%) diff --git a/app/(design)/design/page.tsx b/app/(design)/design/page.tsx index b3bacc4..7d8b4fb 100644 --- a/app/(design)/design/page.tsx +++ b/app/(design)/design/page.tsx @@ -1,9 +1,20 @@ -import { TypographyDemo } from "@/components/design/Typography"; +import { H2, Paragraph } from "@design/Typography"; +import { Header } from "@design/Header"; export default function Page() { return ( -
- +
+
+
+
+
+

Design System

+ + Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum atque + aliquid omnis odit voluptate a repellendus possimus. + +
+
- ) + ); } diff --git a/app/(design)/globals.css b/app/(design)/globals.css deleted file mode 100644 index 7c57e2f..0000000 --- a/app/(design)/globals.css +++ /dev/null @@ -1,67 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -@layer base { - :root { - --background: 0 0% 100%; - --foreground: 0 0% 3.9%; - --card: 0 0% 100%; - --card-foreground: 0 0% 3.9%; - --popover: 0 0% 100%; - --popover-foreground: 0 0% 3.9%; - --primary: 0 0% 9%; - --primary-foreground: 0 0% 98%; - --secondary: 0 0% 96.1%; - --secondary-foreground: 0 0% 9%; - --muted: 0 0% 96.1%; - --muted-foreground: 0 0% 45.1%; - --accent: 0 0% 96.1%; - --accent-foreground: 0 0% 9%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 0 0% 98%; - --border: 0 0% 89.8%; - --input: 0 0% 89.8%; - --ring: 0 0% 3.9%; - --chart-1: 12 76% 61%; - --chart-2: 173 58% 39%; - --chart-3: 197 37% 24%; - --chart-4: 43 74% 66%; - --chart-5: 27 87% 67%; - --radius: 0.5rem - } - .dark { - --background: 0 0% 3.9%; - --foreground: 0 0% 98%; - --card: 0 0% 3.9%; - --card-foreground: 0 0% 98%; - --popover: 0 0% 3.9%; - --popover-foreground: 0 0% 98%; - --primary: 0 0% 98%; - --primary-foreground: 0 0% 9%; - --secondary: 0 0% 14.9%; - --secondary-foreground: 0 0% 98%; - --muted: 0 0% 14.9%; - --muted-foreground: 0 0% 63.9%; - --accent: 0 0% 14.9%; - --accent-foreground: 0 0% 98%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 0 0% 98%; - --border: 0 0% 14.9%; - --input: 0 0% 14.9%; - --ring: 0 0% 83.1%; - --chart-1: 220 70% 50%; - --chart-2: 160 60% 45%; - --chart-3: 30 80% 55%; - --chart-4: 280 65% 60%; - --chart-5: 340 75% 55% - } -} -@layer base { - * { - @apply border-border; - } - body { - @apply bg-background text-foreground; - } -} diff --git a/app/(design)/layout.tsx b/app/(design)/layout.tsx index aa01e9b..cb9f270 100644 --- a/app/(design)/layout.tsx +++ b/app/(design)/layout.tsx @@ -1,5 +1,5 @@ import React from "react"; -import './globals.css'; +import "@styles/globals.css"; export default function RootLayout({ children, @@ -9,7 +9,7 @@ export default function RootLayout({ return ( - {children} + {children} ); } diff --git a/app/(studio)/global.css b/app/(studio)/global.css deleted file mode 100644 index b5c61c9..0000000 --- a/app/(studio)/global.css +++ /dev/null @@ -1,3 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; diff --git a/app/(studio)/layout.tsx b/app/(studio)/layout.tsx index a9c43e5..6e62828 100644 --- a/app/(studio)/layout.tsx +++ b/app/(studio)/layout.tsx @@ -1,5 +1,5 @@ -import "./global.css"; import React from "react"; + export default function RootLayout({ children, }: { diff --git a/app/(web)/layout.tsx b/app/(web)/layout.tsx index 4ad50b0..b0e7f7c 100644 --- a/app/(web)/layout.tsx +++ b/app/(web)/layout.tsx @@ -1,4 +1,4 @@ -import "./globals.css"; +import "@styles/globals.css"; import "dracula-prism/dist/css/dracula-prism.min.css"; import "katex/dist/katex.min.css"; import GradientMesh from "@/components/common/gradient-mesh"; @@ -7,7 +7,7 @@ import NavAside from "@/components/common/nav-aside"; import React from "react"; import type { Metadata } from "next"; import { AnalyticsWrapper } from "@/components/common/analytics"; -import { Inter, Ubuntu } from "next/font/google"; +import { Ubuntu } from "next/font/google"; import { getOpenGraph, getTwitterCard, metaData } from "@/utils/metadata"; import { CSPostHogProvider } from "@/components/providers/PostHogProvider"; diff --git a/components/design/Header.tsx b/components/design/Header.tsx new file mode 100644 index 0000000..98856f0 --- /dev/null +++ b/components/design/Header.tsx @@ -0,0 +1,12 @@ +import React from "react"; +import { Link } from "./Typography"; + +type Props = {}; + +export function Header({}: Props) { + return ( +
+ Arkar Myat +
+ ); +} diff --git a/components/design/Typography.tsx b/components/design/Typography.tsx index 09f4a84..8158e84 100644 --- a/components/design/Typography.tsx +++ b/components/design/Typography.tsx @@ -1,64 +1,99 @@ import NextLink from "next/link"; +import { cn } from "@/lib/utils"; -export function H1() { +interface TypographyProps { + children: React.ReactNode; + className?: string; +} + +export function H1(props: TypographyProps) { + let { children, className } = props; return ( -

- The Joke Tax Chronicles +

+ {children}

); } -export function H2() { +export function H2(props: TypographyProps) { + let { children, className } = props; return ( -

- The King's Plan +

+ {children}

); } -export function H3() { +export function H3(props: TypographyProps) { + let { children, className } = props; return ( -

- The Joke Tax +

+ {children}

); } -export function H4() { +export function H4(props: TypographyProps) { + let { children, className } = props; return ( -

- The Joke Tax -

+

+ {children} +

); } -export function Paragraph() { +export function Paragraph(props: TypographyProps) { + let { children, className } = props; return ( -

- As a result, people stopped telling jokes, and the kingdom fell into a - gloom. But there was one person who refused to let the king's foolishness - get him down: a court jester named Jokester. +

+ {children}

); } -export function Link() { +export function Blockqoute({ children }: TypographyProps) { return ( - - a brilliant plan - +
{children}
); } -export function Blockqoute() { +interface LinkProps { } + +export function Link(props: React.AnchorHTMLAttributes) { + const { children, className, ...rest } = props; return ( -
- "After all," he said, "everyone enjoys a good joke, so it's only fair that - they should pay for the privilege." -
+ + {children} + ); } @@ -114,4 +149,3 @@ export function Table() { ); } - diff --git a/app/(web)/globals.css b/styles/globals.css similarity index 72% rename from app/(web)/globals.css rename to styles/globals.css index 5fc4a72..a73d1d3 100644 --- a/app/(web)/globals.css +++ b/styles/globals.css @@ -2,6 +2,70 @@ @tailwind components; @tailwind utilities; +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 0 0% 3.9%; + --card: 0 0% 100%; + --card-foreground: 0 0% 3.9%; + --popover: 0 0% 100%; + --popover-foreground: 0 0% 3.9%; + --primary: 0 0% 9%; + --primary-foreground: 0 0% 98%; + --secondary: 0 0% 96.1%; + --secondary-foreground: 0 0% 9%; + --muted: 0 0% 96.1%; + --muted-foreground: 0 0% 45.1%; + --accent: 0 0% 96.1%; + --accent-foreground: 0 0% 9%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 89.8%; + --input: 0 0% 89.8%; + --ring: 0 0% 3.9%; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; + --radius: 0.5rem; + } + .dark { + --background: 0 0% 3.9%; + --foreground: 0 0% 98%; + --card: 0 0% 3.9%; + --card-foreground: 0 0% 98%; + --popover: 0 0% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 0 0% 98%; + --primary-foreground: 0 0% 9%; + --secondary: 0 0% 14.9%; + --secondary-foreground: 0 0% 98%; + --muted: 0 0% 14.9%; + --muted-foreground: 0 0% 63.9%; + --accent: 0 0% 14.9%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 14.9%; + --input: 0 0% 14.9%; + --ring: 0 0% 83.1%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; + } +} +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} + @layer utilities { .page-container { @apply w-full grid grid-cols-1 lg:grid-cols-[2.5fr_1fr] md:max-w-[800px] lg:max-w-[1140px]; @@ -15,6 +79,10 @@ .title { font-size: clamp(2.5rem, 5vw, 3rem); } + + .box { + @apply p-4 md:p-8 lg:p-12; + } } ::-moz-selection { @apply bg-gray-700; diff --git a/tailwind.config.js b/tailwind.config.js index c6de1ed..5045982 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -22,8 +22,10 @@ module.exports = { "theme-accent": "#88ced3", "theme-accent-opaque": "#88ced309", "theme-body": "#cbd5e1", + background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", + card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", diff --git a/tsconfig.json b/tsconfig.json index 77e3642..54fd5a3 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -25,7 +25,8 @@ "experimentalDecorators": true, "paths": { "@/*": ["./*"], - "@design": ["./components/design/*"] + "@design/*": ["./components/design/*"], + "@styles/*": ["./styles/*"] }, "plugins": [ { From 1066049d6b65d8ccff5e74ff7fa031e9a6aaf60b Mon Sep 17 00:00:00 2001 From: Arkar Myat Date: Fri, 4 Oct 2024 23:21:44 -0400 Subject: [PATCH 3/3] update on themes and fonts --- app/(design)/design/page.tsx | 20 - app/(design)/layout.tsx | 15 - app/(web)/about/page.tsx | 2 +- app/(web)/layout.tsx | 8 +- app/(web)/sitemap.ts | 8 +- .../common/article-serie-card/index.tsx | 1 + components/common/header/index.tsx | 4 +- components/common/link/index.tsx | 3 +- components/common/nav-aside/index.tsx | 7 +- components/common/project-card/index.tsx | 1 + components/common/toc/index.tsx | 1 + components/design/Header.tsx | 12 - components/design/Typography.tsx | 151 ------- components/pages/article/card/index.tsx | 1 + components/pages/article/categories/index.tsx | 6 +- components/pages/home/blog-card/index.tsx | 1 + components/ui/card.tsx | 76 ++++ components/ui/scroll-area.tsx | 48 +++ package.json | 64 +-- pnpm-lock.yaml | 372 ++++++++++++++---- public/images/profile.jpg | Bin 0 -> 180641 bytes styles/globals.css | 89 ++--- tailwind.config.js | 2 +- 23 files changed, 516 insertions(+), 376 deletions(-) delete mode 100644 app/(design)/design/page.tsx delete mode 100644 app/(design)/layout.tsx delete mode 100644 components/design/Header.tsx delete mode 100644 components/design/Typography.tsx create mode 100644 components/ui/card.tsx create mode 100644 components/ui/scroll-area.tsx create mode 100644 public/images/profile.jpg diff --git a/app/(design)/design/page.tsx b/app/(design)/design/page.tsx deleted file mode 100644 index 7d8b4fb..0000000 --- a/app/(design)/design/page.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { H2, Paragraph } from "@design/Typography"; -import { Header } from "@design/Header"; - -export default function Page() { - return ( -
-
-
-
-
-

Design System

- - Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum atque - aliquid omnis odit voluptate a repellendus possimus. - -
-
-
- ); -} diff --git a/app/(design)/layout.tsx b/app/(design)/layout.tsx deleted file mode 100644 index cb9f270..0000000 --- a/app/(design)/layout.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from "react"; -import "@styles/globals.css"; - -export default function RootLayout({ - children, -}: { - children: React.ReactNode; -}) { - return ( - - - {children} - - ); -} diff --git a/app/(web)/about/page.tsx b/app/(web)/about/page.tsx index 91db3ca..c154411 100644 --- a/app/(web)/about/page.tsx +++ b/app/(web)/about/page.tsx @@ -46,7 +46,7 @@ function AboutPage() { src="/images/profile.png" alt="My profile" className="object-cover float-none md:float-left w-[200px] rounded-full aspect-square m-8" - width={800} + width={600} height={600} />

diff --git a/app/(web)/layout.tsx b/app/(web)/layout.tsx index b0e7f7c..186ad59 100644 --- a/app/(web)/layout.tsx +++ b/app/(web)/layout.tsx @@ -7,7 +7,7 @@ import NavAside from "@/components/common/nav-aside"; import React from "react"; import type { Metadata } from "next"; import { AnalyticsWrapper } from "@/components/common/analytics"; -import { Ubuntu } from "next/font/google"; +import { Merriweather } from "next/font/google"; import { getOpenGraph, getTwitterCard, metaData } from "@/utils/metadata"; import { CSPostHogProvider } from "@/components/providers/PostHogProvider"; @@ -59,8 +59,8 @@ export const metadata: Metadata = { ), }; -const ubuntu = Ubuntu({ - weight: ["300", "400", "500", "700"], +const ubuntu = Merriweather({ + weight: ["300", "400", "700", "900"], subsets: ["latin"], display: "swap", }); @@ -75,7 +75,7 @@ export default function RootLayout({ -

+
({ url: `https://arkar.space/articles/${article.slug}`, diff --git a/components/common/article-serie-card/index.tsx b/components/common/article-serie-card/index.tsx index 22f2248..3a5abb1 100644 --- a/components/common/article-serie-card/index.tsx +++ b/components/common/article-serie-card/index.tsx @@ -19,6 +19,7 @@ export function ArticleSerieCard({ article }: { article: ArticlCardType }) { return ( { return (
- + Arkar Myat diff --git a/components/common/link/index.tsx b/components/common/link/index.tsx index eaa1ca3..c45a0a3 100644 --- a/components/common/link/index.tsx +++ b/components/common/link/index.tsx @@ -27,10 +27,11 @@ function NavIconLink({ children, icon, href, target }: Props) { onClick={navigate} target={target} href={href} + aria-label={`Go to ${children}`} className={cx( `text-sm flex cursor-pointer items-center hover:text-theme-accent py-3 hover:bg-theme-primary duration-300 hover:border-theme-primary hover:border-opacity-5 hover:bg-opacity-5 transition-all - border border-transparent px-4 rounded-full`, + border border-transparent px-4 rounded-theme`, { "bg-theme-primary/5 border-opacity-5 border-theme-primary text-theme-accent": `/${selected}` === href || (selected === null && href === "/"), diff --git a/components/common/nav-aside/index.tsx b/components/common/nav-aside/index.tsx index 44fe275..fa918f0 100644 --- a/components/common/nav-aside/index.tsx +++ b/components/common/nav-aside/index.tsx @@ -14,7 +14,7 @@ import { LinkedIn, Mastaodon, } from "@/components/common/icons"; -import CommandMenu from "@/components/common/cmdk"; + export type Nav = { id: number; name: string; @@ -88,10 +88,7 @@ function NavASide() { "z-[20] transition-all flex-col pt-0 lg:pt-[8em] col-start-1 gap-4 lg:pointer-events-auto lg:flex", )} > -
- -
-
+
{navs.map((nav) => ( diff --git a/components/common/project-card/index.tsx b/components/common/project-card/index.tsx index ad20067..94fb3d8 100644 --- a/components/common/project-card/index.tsx +++ b/components/common/project-card/index.tsx @@ -10,6 +10,7 @@ type Props = { export function ProjectCard({ data }: Props) { return ( diff --git a/components/common/toc/index.tsx b/components/common/toc/index.tsx index 0dd4554..99b6fe1 100644 --- a/components/common/toc/index.tsx +++ b/components/common/toc/index.tsx @@ -45,6 +45,7 @@ export default function TableOfContents({ value }: Props) { {e} diff --git a/components/design/Header.tsx b/components/design/Header.tsx deleted file mode 100644 index 98856f0..0000000 --- a/components/design/Header.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from "react"; -import { Link } from "./Typography"; - -type Props = {}; - -export function Header({}: Props) { - return ( -
- Arkar Myat -
- ); -} diff --git a/components/design/Typography.tsx b/components/design/Typography.tsx deleted file mode 100644 index 8158e84..0000000 --- a/components/design/Typography.tsx +++ /dev/null @@ -1,151 +0,0 @@ -import NextLink from "next/link"; -import { cn } from "@/lib/utils"; - -interface TypographyProps { - children: React.ReactNode; - className?: string; -} - -export function H1(props: TypographyProps) { - let { children, className } = props; - return ( -

- {children} -

- ); -} - -export function H2(props: TypographyProps) { - let { children, className } = props; - return ( -

- {children} -

- ); -} - -export function H3(props: TypographyProps) { - let { children, className } = props; - return ( -

- {children} -

- ); -} - -export function H4(props: TypographyProps) { - let { children, className } = props; - return ( -

- {children} -

- ); -} - -export function Paragraph(props: TypographyProps) { - let { children, className } = props; - return ( -

- {children} -

- ); -} - -export function Blockqoute({ children }: TypographyProps) { - return ( -
{children}
- ); -} - -interface LinkProps { } - -export function Link(props: React.AnchorHTMLAttributes) { - const { children, className, ...rest } = props; - return ( - - {children} - - ); -} - -export function UnorderedList() { - return ( -
    -
  • 1st level of puns: 5 gold coins
    • -
  • 2nd level of jokes: 10 gold coins
    • -
  • 3rd level of one-liners : 20 gold coins
    • -
- ); -} - -export function Table() { - return ( - - - - - - - - - - - - - - - - - - - - - -
- King's Treasury - - People's happiness -
- Empty - - Overflowing -
- Modest - - Satisfied -
- Full - - Ecstatic -
- ); -} diff --git a/components/pages/article/card/index.tsx b/components/pages/article/card/index.tsx index 6338538..c855e90 100644 --- a/components/pages/article/card/index.tsx +++ b/components/pages/article/card/index.tsx @@ -23,6 +23,7 @@ export default function ArticleCard({ } return ( +