From a78ab274f3b23fd0d86fb81a10727f31c34c29c0 Mon Sep 17 00:00:00 2001 From: Arkar Myat <52744892+Riley1101@users.noreply.github.com> Date: Fri, 4 Oct 2024 23:56:14 -0400 Subject: [PATCH] Feat/arkar dev UI (#136) * added design page * wip design page * update on themes and fonts --- app/(studio)/global.css | 3 - app/(studio)/layout.tsx | 2 +- app/(web)/about/page.tsx | 2 +- app/(web)/layout.tsx | 11 +- app/(web)/sitemap.ts | 8 +- components.json | 20 + .../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/pages/article/card/index.tsx | 1 + components/pages/article/categories/index.tsx | 6 +- components/pages/home/blog-card/index.tsx | 1 + components/ui/button.tsx | 57 +++ components/ui/card.tsx | 76 +++ components/ui/scroll-area.tsx | 48 ++ lib/utils.ts | 6 + package.json | 73 +-- pnpm-lock.yaml | 475 +++++++++++++++--- public/images/profile.jpg | Bin 0 -> 180641 bytes {app/(web) => styles}/globals.css | 59 +++ tailwind.config.js | 58 ++- tsconfig.json | 4 +- 25 files changed, 786 insertions(+), 141 deletions(-) delete mode 100644 app/(studio)/global.css create mode 100644 components.json create mode 100644 components/ui/button.tsx create mode 100644 components/ui/card.tsx create mode 100644 components/ui/scroll-area.tsx create mode 100644 lib/utils.ts create mode 100644 public/images/profile.jpg rename {app/(web) => styles}/globals.css (74%) 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)/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 bf619c2..186ad59 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 } from "next/font/google"; +import { Merriweather } 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 = Merriweather({ + weight: ["300", "400", "700", "900"], subsets: ["latin"], display: "swap", }); @@ -70,11 +71,11 @@ export default function RootLayout({ children: React.ReactNode; }) { return ( - + -

+
({ url: `https://arkar.space/articles/${article.slug}`, 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/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/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 ( +