Skip to content

Commit

Permalink
Feat/arkar dev UI (#136)
Browse files Browse the repository at this point in the history
* added design page

* wip design page

* update on themes and fonts
  • Loading branch information
Riley1101 authored Oct 5, 2024
1 parent e8527f5 commit a78ab27
Show file tree
Hide file tree
Showing 25 changed files with 786 additions and 141 deletions.
3 changes: 0 additions & 3 deletions app/(studio)/global.css

This file was deleted.

2 changes: 1 addition & 1 deletion app/(studio)/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import "./global.css";
import React from "react";

export default function RootLayout({
children,
}: {
Expand Down
2 changes: 1 addition & 1 deletion app/(web)/about/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
<p>
Expand Down
11 changes: 6 additions & 5 deletions app/(web)/layout.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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";

Expand Down Expand Up @@ -59,7 +59,8 @@ export const metadata: Metadata = {
),
};

const inter = Inter({
const ubuntu = Merriweather({
weight: ["300", "400", "700", "900"],
subsets: ["latin"],
display: "swap",
});
Expand All @@ -70,11 +71,11 @@ export default function RootLayout({
children: React.ReactNode;
}) {
return (
<html lang="en" className={inter.className}>
<html lang="en" className={ubuntu.className}>
<head />
<CSPostHogProvider>
<body className="overflow-hidden bg-[#121212]">
<div className="w-full overflow-hidden md:px-[10%] lg:pr-[0%] max-h-dvh bg-[#33161600]">
<div className="w-full overflow-hidden md:px-[15%] lg:pr-[0%] max-h-dvh bg-[#33161600]">
<Header />
<div
className="row-start-2 md:row-start-1 col-start-2 grid grid-cols-1
Expand Down
8 changes: 4 additions & 4 deletions app/(web)/sitemap.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,23 +12,23 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
{
url: "https://arkar.space/about",
lastModified: new Date(),
priority: 0.8,
priority: 1,
},
{
url: "https://arkar.space/articles",
lastModified: new Date(),
priority: 0.8,
priority: 1,
},

{
url: "https://arkar.space/snippets",
lastModified: new Date(),
priority: 0.8,
priority: 1,
},
{
url: "https://arkar.space/videos",
lastModified: new Date(),
priority: 0.8,
priority: 1,
},
...articles.map((article) => ({
url: `https://arkar.space/articles/${article.slug}`,
Expand Down
20 changes: 20 additions & 0 deletions components.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
1 change: 1 addition & 0 deletions components/common/article-serie-card/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export function ArticleSerieCard({ article }: { article: ArticlCardType }) {
return (
<Link
onClick={navigate}
aria-lable={`Learn more about ${article.title}`}
href={`/articles/${article.slug}`}
className={cx(
"p-4 shrink-0 h-[260px] flex flex-col w-[220px] hover:ml-[-70px] hover:rotate-6 hover:-translate-y-2 first:hover:translate-y-0 first:hover:ml-[100px] hover:translate-x-[-80px] hover:mr-[50px] first:hover:mr-[40px] first:ml-0 card-glass-box ml-[-100px] origin-center shadow border gap-4 relative transition-all group border-theme-accent duration-200 will-change-transform rounded-md cursor-pointer hover:border-theme-accent border-opacity-20 hover:border-opacity-20",
Expand Down
4 changes: 2 additions & 2 deletions components/common/header/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@ const Header = () => {
return (
<header
className="bg-gray-900 bg-clip-padding backdrop-filter
backdrop-blur-lg bg-opacity-[0.15] border-gray-800 justify-between border-b flex items-center px-4 md:px-[10%]
backdrop-blur-lg bg-opacity-[0.15] border-gray-800 justify-between border-b flex items-center px-4 md:px-[15%]
absolute top-0 left-0 h-[3.5em] z-[99999] w-full"
>
<Link href="/" className="font-bold text-theme-body">
<Link href="/" className="font-bold text-theme-body" aria-label="Logo of Arkar Myat's website">
Arkar Myat
</Link>
<NavModal visible={visible} toggle={toggle} />
Expand Down
3 changes: 2 additions & 1 deletion components/common/link/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 === "/"),
Expand Down
7 changes: 2 additions & 5 deletions components/common/nav-aside/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
LinkedIn,
Mastaodon,
} from "@/components/common/icons";
import CommandMenu from "@/components/common/cmdk";

export type Nav = {
id: number;
name: string;
Expand Down Expand Up @@ -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",
)}
>
<div className="hidden lg:block">
<CommandMenu />
</div>
<div className="flex flex-col gap-2 p-4 border rounded-md glass-box border-theme-accent-opaque">
<div className="flex flex-col gap-2 p-4 border rounded-md glass-box ">
<div className="flex flex-col gap-2 ">
{navs.map((nav) => (
<NavIconLink key={nav.id} href={nav.href} icon={nav.icon}>
Expand Down
1 change: 1 addition & 0 deletions components/common/project-card/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ type Props = {
export function ProjectCard({ data }: Props) {
return (
<Link
aria-label={`Read more about project on ${data.title}`}
href={`/projects/${data.slug}`}
className="border-theme-primary border-opacity-10 transition-all duration-300 relative border hover:border-opacity-[0.2] hover:border-theme-primary group overflow-hidden rounded-lg cursor-pointer min-h-[200px] p-4 flex flex-col justify-between"
>
Expand Down
1 change: 1 addition & 0 deletions components/common/toc/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ export default function TableOfContents({ value }: Props) {
<Link
href={`#${toUrl([e])}`}
className="cursor-pointer"
aria-label={`Go to section about ${e}`}
onClick={handleScroll}
>
{e}
Expand Down
1 change: 1 addition & 0 deletions components/pages/article/card/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export default function ArticleCard({
}
return (
<Link
aria-label={`Read article titled ${title}`}
onClick={navigate}
href={`/articles/${slug}`}
className={cx(
Expand Down
6 changes: 3 additions & 3 deletions components/pages/article/categories/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,12 @@ export function Categories({ categories }: Props) {

if (!categories) return null;
return (
<div className="border p-4 border-theme-accent-opaque glass-box rounded-md sticky top-10 md:top-20">
<div className="border p-4 border-theme-accent-opaque glass-box rounded-theme sticky top-10 md:top-20">
<div className="flex max-h-max py-2 md:py-0 gap-2 md:flex-wrap overflow-x-auto">
<button
onClick={() => handleFilter("All")}
className={cx(
`text-sm flex cursor-pointer items-center hover:text-theme-accent py-2 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`,
`text-sm flex cursor-pointer items-center hover:text-theme-accent py-2 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-theme`,
{
"bg-theme-primary bg-opacity-5 border-opacity-5 border-theme-primary text-theme-accent":
params.get("category") === "All" || !params.get("category"),
Expand All @@ -57,7 +57,7 @@ export function Categories({ categories }: Props) {
onClick={() => handleFilter(item.title)}
key={item._id}
className={cx(
`text-sm min-w-max cursor-pointer hover:text-theme-accent py-2 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`,
`text-sm min-w-max cursor-pointer hover:text-theme-accent py-2 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-theme`,
{
"bg-theme-primary bg-opacity-5 border-opacity-5 border-theme-primary text-theme-accent":
params.get("category") === item.title,
Expand Down
1 change: 1 addition & 0 deletions components/pages/home/blog-card/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export default function HomeBlogCard({
onMouseLeave={() => {
blob.current?.classList.add("hidden");
}}
aria-label={`Read article about ${title}`}
ref={container}
onMouseMove={handleMouseMove}
href={`/articles/${slug}`}
Expand Down
57 changes: 57 additions & 0 deletions components/ui/button.tsx
Original file line number Diff line number Diff line change
@@ -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<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button"
return (
<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}
/>
)
}
)
Button.displayName = "Button"

export { Button, buttonVariants }
76 changes: 76 additions & 0 deletions components/ui/card.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import * as React from "react"

import { cn } from "@/lib/utils"

const Card = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
"rounded-xl border bg-card text-card-foreground shadow",
className
)}
{...props}
/>
))
Card.displayName = "Card"

const CardHeader = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex flex-col space-y-1.5 p-6", className)}
{...props}
/>
))
CardHeader.displayName = "CardHeader"

const CardTitle = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
<h3
ref={ref}
className={cn("font-semibold leading-none tracking-tight", className)}
{...props}
/>
))
CardTitle.displayName = "CardTitle"

const CardDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
<p
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
CardDescription.displayName = "CardDescription"

const CardContent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
))
CardContent.displayName = "CardContent"

const CardFooter = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex items-center p-6 pt-0", className)}
{...props}
/>
))
CardFooter.displayName = "CardFooter"

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
Loading

0 comments on commit a78ab27

Please sign in to comment.