Update

.github/workflows/main.yaml

@@ -0,0 +1,93 @@
+# Sample workflow for building and deploying a Next.js site to GitHub Pages
+#
+# To get started with Next.js see: https://nextjs.org/docs/getting-started
+#
+name: Deploy to Github Pages
+
+on:
+ # Runs on pushes targeting the default branch
+ push:
+ branches: ['main']
+
+ # Allows you to run this workflow manually from the Actions tab
+ workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+ contents: read
+ pages: write
+ id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+ group: 'pages'
+ cancel-in-progress: false
+
+jobs:
+ # Build job
+ build:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v4
+ - name: Detect package manager
+ id: detect-package-manager
+ run: |
+ if [ -f "${{ github.workspace }}/yarn.lock" ]; then
+ echo "manager=yarn" >> $GITHUB_OUTPUT
+ echo "command=install" >> $GITHUB_OUTPUT
+ echo "runner=yarn" >> $GITHUB_OUTPUT
+ exit 0
+ elif [ -f "${{ github.workspace }}/package.json" ]; then
+ echo "manager=npm" >> $GITHUB_OUTPUT
+ echo "command=ci" >> $GITHUB_OUTPUT
+ echo "runner=npx --no-install" >> $GITHUB_OUTPUT
+ exit 0
+ else
+ echo "Unable to determine package manager"
+ exit 1
+ fi
+ - name: Setup Node
+ uses: actions/setup-node@v4
+ with:
+ node-version: '20'
+ cache: ${{ steps.detect-package-manager.outputs.manager }}
+ - name: Setup Pages
+ uses: actions/configure-pages@v4
+ with:
+ # Automatically inject basePath in your Next.js configuration file and disable
+ # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
+ #
+ # You may remove this line if you want to manage the configuration yourself.
+ static_site_generator: next
+ - name: Restore cache
+ uses: actions/cache@v4
+ with:
+ path: |
+ .next/cache
+ # Generate a new cache whenever packages or source files change.
+ key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+ # If source files changed but packages didn't, rebuild from a prior cache.
+ restore-keys: |
+ ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+ - name: Install dependencies
+ run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+ - name: Build with Next.js
+ run: ${{ steps.detect-package-manager.outputs.runner }} next build
+ - name: Upload artifact
+ uses: actions/upload-pages-artifact@v3
+ with:
+ path: ./out
+
+ # Deployment job
+ deploy:
+ environment:
+ name: github-pages
+ url: ${{ steps.deployment.outputs.page_url }}
+ runs-on: ubuntu-latest
+ needs: build
+ steps:
+ - name: Deploy to GitHub Pages
+ id: deployment
+ uses: actions/deploy-pages@v4

README.md

@@ -1,36 +1,3 @@
-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).
+# HueHueHue
 
-## 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.
+Color tools

app/globals.css

@@ -1,33 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-:root {
- --foreground-rgb: 0, 0, 0;
- --background-start-rgb: 214, 219, 220;
- --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --foreground-rgb: 255, 255, 255;
- --background-start-rgb: 0, 0, 0;
- --background-end-rgb: 0, 0, 0;
- }
-}
-
-body {
- color: rgb(var(--foreground-rgb));
- background: linear-gradient(
- to bottom,
- transparent,
- rgb(var(--background-end-rgb))
- )
- rgb(var(--background-start-rgb));
-}
-
-@layer utilities {
- .text-balance {
- text-wrap: balance;
- }
-}

app/htmlcolors/page.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import { useRef, useState } from 'react';
+import TinyColor from 'tinycolor2';
+
+const colors = Object.keys(TinyColor.names)
+ .filter((_) => !_.endsWith('grey'))
+ .map((color) => TinyColor(color));
+
+function ColorBlock({ color, onColorClick }: { color: TinyColor.Instance; onColorClick: Function }) {
+ return (
+ <li
+ className="p-2 h-32 w-1/4 lg:w-1/6"
+ style={{ backgroundColor: color.toHex8String() }}
+ key={color.toHex8String()}
+ >
+ <button
+ className="w-full h-full text-left items-start inline-flex "
+ style={{ color: TinyColor(color).isLight() ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)' }}
+ onClick={() => onColorClick(color.getOriginalInput() as string)}
+ >
+ {color.getOriginalInput() as string}
+ </button>
+ </li>
+ );
+}
+
+export default function Page() {
+ const [sort, setSort] = useState('alphabetically');
+ const [helperText, setHelperText] = useState('Click the color to copy its name to clipboard');
+ const ref = useRef<ReturnType<typeof setTimeout>>();
+
+ function handleColorClick(colorName: string) {
+ void navigator.clipboard.writeText(colorName);
+
+ setHelperText(`Color "${colorName}" copied to clipboard!`);
+
+ clearTimeout(ref.current);
+ ref.current = setTimeout(() => {
+ setHelperText('Click the color to copy its name to clipboard');
+ }, 1000);
+ }
+
+ return (
+ <div>
+ <div className="flex mb-2 gap-2 items-baseline px-2">
+ Sorted by
+ <button
+ className="px-2 py-1 bg-slate-200 rounded hover:bg-slate-300 active:bg-slate-400"
+ onClick={() => setSort('alphabetically')}
+ >
+ Name
+ </button>
+ <button
+ className="px-2 py-1 bg-slate-200 rounded hover:bg-slate-300 active:bg-slate-400 "
+ onClick={() => setSort('hue')}
+ >
+ Hue
+ </button>
+ <button
+ className="px-2 py-1 bg-slate-200 rounded hover:bg-slate-300 active:bg-slate-400 "
+ onClick={() => setSort('lightness')}
+ >
+ Lightness
+ </button>
+ {helperText}
+ </div>
+
+ <ul className="flex flex-wrap">
+ {sort === 'alphabetically' &&
+ colors
+ .sort((a, b) => (a.getOriginalInput() as string).localeCompare(b.getOriginalInput() as string))
+ .map((color) => (
+ <ColorBlock key={color.getOriginalInput() as string} color={color} onColorClick={handleColorClick} />
+ ))}
+
+ {sort === 'hue' &&
+ colors
+ .sort((a, b) => b.toHsl().s - a.toHsl().s)
+ .sort((a, b) => b.toHsl().h - a.toHsl().h)
+ .map((color) => (
+ <ColorBlock key={color.getOriginalInput() as string} color={color} onColorClick={handleColorClick} />
+ ))}
+
+ {sort === 'lightness' &&
+ colors
+ .sort((a, b) => b.toHsl().l - a.toHsl().l)
+ .map((color) => (
+ <ColorBlock key={color.getOriginalInput() as string} color={color} onColorClick={handleColorClick} />
+ ))}
+ </ul>
+ </div>
+ );
+}

app/layout.tsx

@@ -1,12 +1,12 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
+import type { Metadata } from 'next';
+import { Rubik } from 'next/font/google';
+import './globals.css';
 
-const inter = Inter({ subsets: ["latin"] });
+const font = Rubik({ subsets: ['latin'], weight: '400' });
 
 export const metadata: Metadata = {
- title: "Create Next App",
- description: "Generated by create next app",
+ title: 'Color Buddy',
+ description: 'Generated by create next app',
 };
 
 export default function RootLayout({
@@ -16,7 +16,23 @@ export default function RootLayout({
 }>) {
  return (
  <html lang="en">
- <body className={inter.className}>{children}</body>
+ <body className={font.className}>
+ <nav className="p-2">
+ <ul className="flex gap-2 items-baseline text-lg">
+ <li>
+ <a href="/htmlcolors">HTML Colors</a>
+ </li>
+ <li>
+ <span className="text-slate-300">Color Converter</span>
+ </li>
+ <li className="ml-auto text-sm underline">
+ <a href="https://github.com/hahahackers/color-buddy">View source code on GitHub</a>
+ </li>
+ </ul>
+ </nav>
+
+ {children}
+ </body>
  </html>
  );
 }