chore: new options to theming

caiocampos · Nov 5, 2024 · 246e087 · 246e087
1 parent 166c308
commit 246e087
Show file tree

Hide file tree

Showing 13 changed files with 249 additions and 118 deletions.
diff --git a/.gitignore b/.gitignore
@@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+.env
+.env*
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start",
+    "start": "serve out",
     "lint": "next lint",
     "libretranslate": "docker compose --file libretranslate-docker-compose.yml up -d --build --wait",
     "libretranslate-stop": "docker compose --file libretranslate-docker-compose.yml down"

diff --git a/src/components/card.tsx b/src/components/card.tsx
@@ -1,7 +1,7 @@
 import { Fragment } from "react";
 import { RepositoryDataBase } from "@/intefaces/repository-data";
 import { LanguageBadge } from "./language-badge";
-import { languageDictionary } from "@/global";
+import { configuration, languageDictionary } from "@/global";
 import {
   CodeSquareIcon,
   LinkExternalIcon,
@@ -51,6 +51,29 @@ const getDescription = (description: string | null): JSX.Element => {
 
 interface CardProps extends RepositoryDataBase, TermTranslationAdapter {}
 
+const cardClassNames = [
+  "relative",
+  "2xl:w-1/5",
+  "xl:w-1/4",
+  "lg:w-1/3",
+  "md:w-1/2",
+  "sm:w-full",
+  "flex-auto",
+  "border",
+  "border-2",
+  `border-${configuration.main_color}-400`,
+  `dark:border-${configuration.main_color}-800`,
+  `hover:border-${configuration.main_color}-200`,
+  `dark:hover:border-${configuration.main_color}-600`,
+  "rounded-lg",
+  "shadow-sm",
+  `shadow-${configuration.main_color}-400`,
+  `dark:shadow-${configuration.main_color}-700`,
+  `bg-${configuration.main_color}-100/[.9]`,
+  `dark:bg-${configuration.main_color}-900/[.9]`,
+  "backdrop-blur-sm",
+].join(" ");
+
 export const Card = ({
   name,
   html_url,
@@ -64,7 +87,7 @@ export const Card = ({
   termTranslation,
 }: CardProps): JSX.Element => {
   return (
-    <div className="relative 2xl:w-1/5 xl:w-1/4 lg:w-1/3 md:w-1/2 sm:w-full flex-auto border border-2 border-slate-400 dark:border-slate-800 hover:border-slate-200 dark:hover:border-slate-600 rounded-lg shadow-sm shadow-slate-400 dark:shadow-slate-700 bg-slate-100/[.9] dark:bg-slate-900/[.9] backdrop-blur-sm">
+    <div className={cardClassNames}>
       <div className="absolute text-gray-900 dark:text-gray-100 text-right right-2 bottom-2">
         {homepage ? (
           <a href={homepage} className="mr-2" title={termTranslation.page}>

diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -5,19 +5,35 @@ interface FooterProps {
   disclaimer: string | null;
 }
 
-export const Footer = ({ disclaimer }: FooterProps): JSX.Element => {
-  return (
-    <a href={`https://github.com/${configuration.user_login}`}>
-      <div className="fixed left-0 -bottom-2 p-4 pb-6 text-white bg-slate-900/[.9] w-full text-center border-t border-slate-600 backdrop-blur-sm">
-        <div>
-          <MarkGithubIcon size="medium" />
-        </div>
-        <div>
-          <LogoGithubIcon size="small" />
+const footerClassNames = [
+  "fixed",
+  "left-0",
+  "-bottom-2",
+  "p-4",
+  "pb-6",
+  "text-white",
+  `bg-${configuration.main_color}-900/[.9]`,
+  "w-full",
+  "text-center",
+  "border-t",
+  `border-${configuration.main_color}-600`,
+  "backdrop-blur-sm",
+].join(" ");
+
+export const Footer = ({ disclaimer }: FooterProps): JSX.Element => (
+  <a href={`https://github.com/${configuration.user_login}`}>
+    <div className={footerClassNames}>
+      <div>
+        <MarkGithubIcon size="medium" />
+      </div>
+      <div>
+        <LogoGithubIcon size="small" />
+      </div>
+      <div className="absolute flex items-center h-full align-middle right-0 top-0">
+        <div className="max-w-32 p-2 sm:max-w-52 text-white text-sm sm:text-base">
+          {disclaimer}
         </div>
-        <div className="absolute flex items-center h-full align-middle right-0 top-0">
-          <div className="max-w-32 p-2 sm:max-w-52 text-white text-sm sm:text-base">{disclaimer}</div></div>
       </div>
-    </a>
-  );
-};
+    </div>
+  </a>
+);
diff --git a/src/components/search.tsx b/src/components/search.tsx
@@ -1,11 +1,64 @@
 import { useState } from "react";
 import { SearchIcon, XIcon } from "@primer/octicons-react";
 import { TermTranslationAdapter } from "@/intefaces/translation";
+import { configuration } from "@/global";
 
 interface SearchProps extends TermTranslationAdapter {
   onSearch(text: string): void;
 }
 
+const searchInputClassNames = [
+  "block",
+  "p-2.5",
+  "w-full",
+  "text-sm",
+  "text-gray-900",
+  "rounded-lg",
+  "border",
+  "border-gray-400",
+  "focus:ring-blue-500",
+  "focus:border-blue-500",
+  `bg-${configuration.main_color}-100/[.9]`,
+  `dark:bg-${configuration.main_color}-900/[.9]`,
+  "dark:border-gray-600",
+  "dark:placeholder-gray-400",
+  "dark:text-gray-100",
+  "dark:focus:border-blue-500",
+].join(" ");
+
+const searchClearButtonClassNames = [
+  "absolute",
+  "top-0",
+  "end-8",
+  "h-full",
+  "p-2.5",
+  "flex",
+  "items-center",
+  "pe-3",
+  "text-gray-400",
+  "dark:text-gray-400",
+].join(" ");
+
+const searchButtonClassNames = [
+  "absolute",
+  "top-0",
+  "end-0",
+  "h-full",
+  "p-2.5",
+  "text-sm",
+  "font-medium",
+  "text-white",
+  "rounded-e-lg",
+  "border",
+  `border-${configuration.search_color}-700`,
+  `bg-${configuration.search_color}-700`,
+  `hover:bg-${configuration.search_color}-800`,
+  `dark:bg-${configuration.search_color}-600`,
+  `dark:hover:bg-${configuration.search_color}-700`,
+  `active:bg-${configuration.search_color}-900`,
+  `dark:active:bg-${configuration.search_color}-800`,
+].join(" ");
+
 export const Search = ({
   onSearch,
   termTranslation,
@@ -23,14 +76,14 @@ export const Search = ({
         <div className="relative w-full">
           <input
             type="search"
-            className="block p-2.5 w-full text-sm text-gray-900 rounded-lg border border-gray-400 focus:ring-blue-500 focus:border-blue-500 bg-slate-100/[.9] dark:bg-slate-900/[.9] dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-100 dark:focus:border-blue-500"
+            className={searchInputClassNames}
             placeholder={termTranslation.search}
             onChange={(event) => setText(event.target.value)}
             value={text}
           />
           <button
             type="button"
-            className="absolute top-0 end-8 h-full p-2.5 flex items-center pe-3 text-gray-400 dark:text-gray-400"
+            className={searchClearButtonClassNames}
             onClick={() => {
               setText("");
               onSearch("");
@@ -40,7 +93,7 @@ export const Search = ({
           </button>
           <button
             type="button"
-            className="absolute top-0 end-0 h-full p-2.5 text-sm font-medium text-white rounded-e-lg border border-sky-700 bg-sky-700 hover:bg-sky-800 dark:bg-sky-600 dark:hover:bg-sky-700 active:bg-sky-900 dark:active:bg-sky-800"
+            className={searchButtonClassNames}
             onClick={() => onSearch(text)}
           >
             <SearchIcon size="small" />

diff --git a/src/config.json b/src/config.json
@@ -4,86 +4,6 @@
   "user_login": "caiocampos",
   "user_id": 20524962,
   "orgs_login": ["cao-ancap"],
-  "languages": [
-    {
-      "name": "C",
-      "image": "https://img.shields.io/badge/C-EEE?style=for-the-badge&logo=c&logoColor=00599C",
-      "link": "https://www.open-std.org/jtc1/sc22/wg14/"
-    },
-    {
-      "name": "C++",
-      "image": "https://img.shields.io/badge/C++-00599C?style=for-the-badge&logo=c%2B%2B&logoColor=white",
-      "link": "https://isocpp.org/"
-    },
-    {
-      "name": "C#",
-      "image": "https://img.shields.io/badge/C%23-239120?style=for-the-badge&logo=dotnet&logoColor=white",
-      "link": "https://dotnet.microsoft.com/languages/csharp"
-    },
-    {
-      "name": "CSS",
-      "image": "https://img.shields.io/badge/CSS3-1572B6.svg?&style=for-the-badge&logo=css3&logoColor=white",
-      "link": "https://w3.org/TR/CSS/#css"
-    },
-    {
-      "name": "Dart",
-      "image": "https://img.shields.io/badge/Dart-0175C2?style=for-the-badge&logo=dart&logoColor=white",
-      "link": "https://dart.dev/"
-    },
-    {
-      "name": "Go",
-      "image": "https://img.shields.io/badge/GOLANG-007D9C.svg?&style=for-the-badge&logo=go&logoColor=white",
-      "link": "https://golang.org/"
-    },
-    {
-      "name": "GDScript",
-      "image": "https://img.shields.io/badge/Godot-333639?style=for-the-badge&logo=godot-engine&logoColor=478CBF",
-      "link": "https://godotengine.org/"
-    },
-    {
-      "name": "HTML",
-      "image": "https://img.shields.io/badge/HTML5-E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white",
-      "link": "https://whatwg.org/"
-    },
-    {
-      "name": "Java",
-      "image": "https://img.shields.io/badge/JAVA-007396.svg?&style=for-the-badge&logo=openjdk&logoColor=white",
-      "link": "https://www.oracle.com/java/"
-    },
-    {
-      "name": "JavaScript",
-      "image": "https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E",
-      "link": "https://ecma-international.org/"
-    },
-    {
-      "name": "Lua",
-      "image": "https://img.shields.io/badge/Lua-2C2D72?style=for-the-badge&logo=lua&logoColor=white",
-      "link": "https://www.lua.org/"
-    },
-    {
-      "name": "PHP",
-      "image": "https://img.shields.io/badge/PHP-777BB4?style=for-the-badge&logo=php&logoColor=white",
-      "link": "https://www.php.net/"
-    },
-    {
-      "name": "Python",
-      "image": "https://img.shields.io/badge/PYTHON-1E415E.svg?&style=for-the-badge&logo=python&logoColor=FFE56B",
-      "link": "https://www.python.org/"
-    },
-    {
-      "name": "Rust",
-      "image": "https://img.shields.io/badge/Rust-000?style=for-the-badge&logo=rust&logoColor=white",
-      "link": "https://www.rust-lang.org/"
-    },
-    {
-      "name": "Shell",
-      "image": "https://img.shields.io/badge/Shell-000?style=for-the-badge&logo=gnu-bash&logoColor=white",
-      "link": "https://www.gnu.org/software/bash/"
-    },
-    {
-      "name": "TypeScript",
-      "image": "https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white",
-      "link": "https://www.typescriptlang.org/"
-    }
-  ]
+  "main_color": "slate",
+  "search_color": "sky"
 }
diff --git a/src/global.ts b/src/global.ts
@@ -1,16 +1,11 @@
-import {
-  Configuration,
-  ConfigurationData,
-  LanguageData,
-} from "./intefaces/config";
+import { Configuration, LanguageData } from "./intefaces/config";
 import Config from "./config.json";
+import Languages from "./languages.json";
 import { TermTranslation } from "./intefaces/translation";
 
-const configurationData: ConfigurationData = Config;
+const languages: LanguageData[] = Languages;
 
-const { languages, ...rest } = configurationData;
-
-export const configuration: Configuration = rest;
+export const configuration: Configuration = Config;
 
 export const languageDictionary = languages.reduce(
   (accumulator, currentValue) => {

diff --git a/src/intefaces/config.ts b/src/intefaces/config.ts
@@ -1,13 +1,11 @@
-export interface ConfigurationData extends Configuration {
-  languages: LanguageData[];
-}
-
 export interface Configuration {
   title: string;
   user_name: string;
   user_login: string;
   user_id: number;
   orgs_login?: string[] | null;
+  main_color: string;
+  search_color: string;
 }
 
 export interface LanguageData {