-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* dark logo & favicon * more dark theme * more dark theme * finished with dark mode, separated meta and seo stuff into components
- Loading branch information
Mordechai Dror
authored
Dec 13, 2023
1 parent
ed28a6d
commit c9a4bda
Showing
46 changed files
with
681 additions
and
313 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,8 @@ | ||
| /// <reference path="../.astro/types.d.ts" /> | ||
| /// <reference types="astro/client" /> | ||
|
|
||
| declare module React { | ||
| interface CSSProperties { | ||
| [key: `--${string}`]: string | number; | ||
| } | ||
| } |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,76 +1,10 @@ | ||
| export class Theme { | ||
| private static readonly colorToBackground: Record<ThemeColor, string> = { | ||
| orange: 'bg-orange-500', | ||
| violet: 'bg-violet-500', | ||
| red: 'bg-red-500', | ||
| amber: 'bg-amber-500', | ||
| yellow: 'bg-yellow-500', | ||
| lime: 'bg-lime-500', | ||
| green: 'bg-green-500', | ||
| emerald: 'bg-emerald-500', | ||
| teal: 'bg-violet-500', | ||
| cyan: 'bg-cyan-500', | ||
| blue: 'bg-blue-500', | ||
| indigo: 'bg-indigo-500', | ||
| purple: 'bg-purple-500', | ||
| fushia: 'bg-fushia-500', | ||
| pink: 'bg-pink-500', | ||
| rose: 'bg-rose-500', | ||
| }; | ||
|
|
||
| private static readonly colorToText: Record<ThemeColor, string> = { | ||
| orange: 'text-orange-500', | ||
| violet: 'text-violet-500', | ||
| red: 'text-red-500', | ||
| amber: 'text-amber-500', | ||
| yellow: 'text-yellow-500', | ||
| lime: 'text-lime-500', | ||
| green: 'text-green-500', | ||
| emerald: 'text-emerald-500', | ||
| teal: 'text-violet-500', | ||
| cyan: 'text-cyan-500', | ||
| blue: 'text-blue-500', | ||
| indigo: 'text-indigo-500', | ||
| purple: 'text-purple-500', | ||
| fushia: 'text-fushia-500', | ||
| pink: 'text-pink-500', | ||
| rose: 'text-rose-500', | ||
| }; | ||
|
|
||
| constructor( | ||
| public readonly primary: ThemeColor, | ||
| public readonly secondary: ThemeColor, | ||
| ) {} | ||
|
|
||
| get backgroundTop(): string { | ||
| return Theme.colorToBackground[this.primary]; | ||
| } | ||
|
|
||
| get backgroundBottom(): string { | ||
| return Theme.colorToBackground[this.secondary]; | ||
| } | ||
|
|
||
| get text(): string { | ||
| return Theme.colorToText[this.primary]; | ||
| } | ||
| readonly background = 'bg-slate-50 dark:bg-slate-900'; | ||
| readonly text = 'text-slate-800 dark:text-slate-100'; | ||
| readonly border = 'border-slate-300 dark:border-slate-600'; | ||
| readonly link = 'text-slate-500 hover:text-cyan-500'; | ||
| readonly linkDecoration = | ||
| ' hover:underline underline-offset-4 decoration-4 decoration-dotted decoration-cyan-500'; | ||
| } | ||
|
|
||
| export type ThemeColor = | ||
| | 'orange' | ||
| | 'violet' | ||
| | 'red' | ||
| | 'amber' | ||
| | 'yellow' | ||
| | 'lime' | ||
| | 'green' | ||
| | 'emerald' | ||
| | 'teal' | ||
| | 'cyan' | ||
| | 'blue' | ||
| | 'indigo' | ||
| | 'purple' | ||
| | 'fushia' | ||
| | 'pink' | ||
| | 'rose'; | ||
|
|
||
| export const THEME = new Theme('cyan', 'lime'); | ||
| export const THEME = new Theme(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import classNames from 'classnames'; | ||
| import type { PropsWithChildren, ReactElement } from 'react'; | ||
| import { THEME } from '../../Theme.ts'; | ||
|
|
||
| export function Badge({ | ||
| hashValue = '', | ||
| children, | ||
| }: PropsWithChildren<BadgeProps>): ReactElement { | ||
| const colors = hashToColor(hashValue); | ||
| return ( | ||
| <span | ||
| className={classNames( | ||
| THEME.text, | ||
| 'inline-flex items-center rounded-full text-xs px-2.5 py-0.5 font-semibold', | ||
| ...colors, | ||
| )}> | ||
| {children} | ||
| </span> | ||
| ); | ||
| } | ||
|
|
||
| export interface BadgeProps { | ||
| hashValue?: string; | ||
| } | ||
|
|
||
| function hashToColor(value: string): readonly [string, string] { | ||
| const hash = value | ||
| .split('') | ||
| .map((char) => char.charCodeAt(0)) | ||
| .reduce((prev, curr) => prev + curr, 0); | ||
|
|
||
| return COLORS[hash % COLORS.length]; | ||
| } | ||
|
|
||
| const COLORS = [ | ||
| ['bg-slate-100', 'dark:bg-slate-800'], | ||
| ['bg-gray-100', 'dark:bg-gray-800'], | ||
| ['bg-zinc-100', 'dark:bg-zinc-800'], | ||
| ['bg-neutral-100', 'dark:bg-neutral-800'], | ||
| ['bg-stone-100', 'dark:bg-stone-800'], | ||
| ['bg-red-100', 'dark:bg-red-800'], | ||
| ['bg-orange-100', 'dark:bg-orange-800'], | ||
| ['bg-amber-100', 'dark:bg-amber-800'], | ||
| ['bg-yellow-100', 'dark:bg-yellow-800'], | ||
| ['bg-lime-100', 'dark:bg-lime-800'], | ||
| ['bg-green-100', 'dark:bg-green-800'], | ||
| ['bg-emerald-100', 'dark:bg-emerald-800'], | ||
| ['bg-teal-100', 'dark:bg-teal-800'], | ||
| ['bg-cyan-100', 'dark:bg-cyan-800'], | ||
| ['bg-sky-100', 'dark:bg-sky-800'], | ||
| ['bg-blue-100', 'dark:bg-blue-800'], | ||
| ['bg-indigo-100', 'dark:bg-indigo-800'], | ||
| ['bg-violet-100', 'dark:bg-violet-800'], | ||
| ['bg-purple-100', 'dark:bg-purple-800'], | ||
| ['bg-fuchsia-100', 'dark:bg-fuchsia-800'], | ||
| ['bg-pink-100', 'dark:bg-pink-800'], | ||
| ['bg-rose-100', 'dark:bg-rose-800'], | ||
| ] as const; |
Oops, something went wrong.