chore: cleaner setup

configs/config-tailwind/classNames.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export const classNames = (...inputs: ClassValue[]): string => {
+  return twMerge(clsx(inputs))
+}

configs/config-tailwind/eslint.config.js

@@ -0,0 +1,13 @@
+import typescriptESLint from "typescript-eslint"
+import config from "@repo/config-eslint"
+
+export default typescriptESLint.config(...config, {
+  files: ["**/*.ts", "**/*.tsx"],
+  languageOptions: {
+    parser: typescriptESLint.parser,
+    parserOptions: {
+      projectService: true,
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})

configs/config-tailwind/index.d.ts

@@ -0,0 +1,3 @@
+import type { Config } from "tailwindcss"
+
+export default Config

configs/config-tailwind/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@repo/config-tailwind",
+  "version": "0.0.0-develop",
+  "private": true,
+  "type": "module",
+  "main": "./tailwind.config.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./tailwind.config.js",
+      "require": "./tailwind.config.js",
+      "default": "./tailwind.config.js"
+    },
+    "./classNames": "./classNames.ts",
+    "./styles.css": "./styles.css"
+  },
+  "dependencies": {
+    "@fontsource/montserrat": "catalog:",
+    "clsx": "catalog:",
+    "tailwind-merge": "catalog:"
+  },
+  "devDependencies": {
+    "@repo/config-eslint": "workspace:*",
+    "@repo/config-typescript": "workspace:*",
+    "@tailwindcss/typography": "catalog:",
+    "typescript-eslint": "catalog:",
+    "eslint": "catalog:",
+    "postcss": "catalog:",
+    "tailwindcss": "catalog:"
+  }
+}

configs/config-tailwind/postcss.config.js

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+}
+
+export default config

configs/config-tailwind/styles.css

@@ -0,0 +1,304 @@
+@import "@fontsource/montserrat/400.css";
+@import "@fontsource/montserrat/500.css";
+@import "@fontsource/montserrat/600.css";
+@import "@fontsource/montserrat/700.css";
+@import "@fontsource/montserrat/800.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  [type="search"]::-webkit-search-decoration,
+  [type="search"]::-webkit-search-cancel-button {
+    appearance: none;
+  }
+
+  b,
+  strong {
+    @apply font-semibold;
+  }
+
+  i,
+  em {
+    @apply italic;
+  }
+
+  u {
+    @apply underline;
+  }
+
+  s {
+    @apply line-through;
+  }
+
+  abbr[title] {
+    @apply underline decoration-dotted underline-offset-2;
+  }
+
+  q,
+  blockquote {
+    @apply italic tracking-wider;
+  }
+  blockquote {
+    @apply border-gray-lighter border-l-4 pl-3 italic;
+  }
+
+  kbd {
+    @apply bg-gray-lighter rounded-md px-2 dark:text-black;
+  }
+
+  mark {
+    @apply bg-yellow rounded-md px-2;
+  }
+
+  ol {
+    @apply list-inside list-decimal;
+  }
+
+  ul {
+    @apply list-inside list-disc;
+  }
+
+  dfn {
+    @apply font-semibold italic;
+    cursor: help;
+  }
+}
+
+body {
+  @apply bg-background dark:bg-background-dark font-sans text-black dark:text-white;
+}
+
+@keyframes ripple {
+  to {
+    opacity: 0;
+    transform: scale(2);
+  }
+}
+
+.break-wrap-words {
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
+.text-base {
+  @apply leading-8;
+}
+
+.prose {
+  @apply dark:text-gray-lighter !max-w-5xl scroll-smooth text-black;
+}
+
+.prose p {
+  @apply text-justify;
+}
+
+.prose ul,
+.prose ol {
+  @apply list-outside;
+}
+
+.prose [id]::before {
+  content: "";
+  display: block;
+  height: 90px;
+  margin-top: -90px;
+  visibility: hidden;
+}
+
+.prose a {
+  @apply text-primary dark:text-primary-dark !font-semibold;
+}
+
+.prose strong {
+  @apply dark:text-gray-lighter text-black;
+}
+
+.prose h2,
+.prose h3,
+.prose h4,
+.prose h5,
+.prose h6 {
+  @apply mt-1;
+}
+
+.prose code {
+  color: #ce9178;
+}
+.prose :where(code):not(:where([class~="not-prose"] *))::before,
+.prose :where(code):not(:where([class~="not-prose"] *))::after {
+  content: "";
+}
+.shiki {
+  white-space: pre-wrap !important;
+}
+html.dark .shiki,
+html.dark .shiki span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
+  font-style: var(--shiki-dark-font-style) !important;
+  font-weight: var(--shiki-dark-font-weight) !important;
+  text-decoration: var(--shiki-dark-text-decoration) !important;
+}
+
+code {
+  counter-reset: step;
+  counter-increment: step 0;
+}
+code .line::before {
+  content: counter(step);
+  counter-increment: step;
+  margin-right: 1rem;
+  text-align: right;
+  color: rgba(133, 133, 133, 0.8);
+  word-wrap: normal;
+  word-break: normal;
+}
+
+.katex .base {
+  display: inline !important;
+  white-space: normal !important;
+  width: 100% !important;
+}
+
+.curriculum-vitae {
+  background: #f0f0f0;
+  color: #333;
+  font-family: Arial, sans-serif;
+
+  hr {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    border: 0;
+    border-top: 1px solid #eee;
+  }
+  a {
+    color: #337ab7;
+    text-decoration: none;
+  }
+  a:focus,
+  a:hover {
+    color: #23527c;
+    text-decoration: underline;
+  }
+  .link-disguise {
+    color: inherit;
+  }
+  .link-disguise:hover {
+    color: inherit;
+  }
+  .h1,
+  .h2,
+  .h3 {
+    margin-top: 20px;
+    margin-bottom: 10px;
+  }
+  .h4,
+  .h5,
+  .h6 {
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+  .h1,
+  .h2,
+  .h3,
+  .h4,
+  .h5,
+  .h6 {
+    font-family: inherit;
+    line-height: 1.1;
+    color: inherit;
+  }
+  .h3 {
+    font-size: 24px;
+  }
+  .h4 {
+    font-size: 18px;
+  }
+  .h5 {
+    font-size: 14px;
+  }
+  .text-muted {
+    color: #414141;
+  }
+  .list-unstyled {
+    padding-left: 0;
+    list-style: none;
+  }
+
+  .card-wrapper {
+    float: none !important;
+    padding: 5px;
+  }
+
+  .card {
+    background: white;
+    border-radius: 3px;
+    padding: 10px 0;
+  }
+  .profile-pic {
+    padding: 10px 0;
+  }
+  .profile-pic img {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    vertical-align: middle;
+    border: 0;
+  }
+  .social-links {
+    line-height: 2.5;
+  }
+
+  .background-details .detail {
+    display: table;
+  }
+  .background-details .detail .icon,
+  .background-details .detail .info {
+    display: table-cell;
+  }
+  .background-details .detail .icon {
+    color: #707070;
+  }
+  .background-details .detail .icon {
+    min-width: 45px;
+    max-width: 45px;
+    text-align: center;
+  }
+  .icon img {
+    width: 20px;
+    height: 20px;
+  }
+  .background-details .detail .mobile-title {
+    display: none;
+  }
+  .card-nested {
+    min-height: 0;
+  }
+
+  .labels {
+    line-height: 2;
+  }
+  .label {
+    display: inline;
+    padding: 0.2em 0.6em 0.3em;
+    font-size: 75%;
+    font-weight: 600;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: 0.25em;
+  }
+  .label-keyword {
+    display: inline-block;
+    font-size: 0.9em;
+    padding: 5px;
+    border: 1px solid #357ebd;
+    margin-right: 5px;
+  }
+  .label-keyword p {
+    margin: 0;
+  }
+}

configs/config-tailwind/tailwind.config.js

@@ -0,0 +1,51 @@
+import typographyPlugin from "@tailwindcss/typography"
+
+/** @type {Omit<import('tailwindcss').Config, "content">} */
+const config = {
+  darkMode: "selector",
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          DEFAULT: "#0056b3",
+          dark: "#00aeff",
+        },
+        background: {
+          DEFAULT: "#fff",
+          dark: "#181818",
+        },
+        "gray-lighter": "#d1d5db",
+        "gray-darker": {
+          DEFAULT: "#4b5563",
+          dark: "#9ca3af",
+        },
+        yellow: "#fef08a",
+      },
+      boxShadow: {
+        dark: "0px 0px 2px 2px rgba(0, 0, 0, 0.25)",
+        light: "0px 0px 2px 2px rgba(0, 0, 0, 0.10)",
+        darkFlag: "0px 1px 10px hsla(0, 0%, 100%, 0.2)",
+        lightFlag: "0px 1px 10px rgba(0, 0, 0, 0.25)",
+      },
+      fontFamily: {
+        sans: ["Montserrat", "sans-serif"],
+      },
+      typography: {
+        DEFAULT: {
+          css: {
+            a: {
+              textDecoration: "none",
+              "&:hover": {
+                textDecoration: "underline",
+                fontWeight: 400,
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+  plugins: [typographyPlugin],
+}
+
+export default config

configs/config-tailwind/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@repo/config-typescript/tsconfig.json",
+  "compilerOptions": {
+    "lib": ["ESNext"]
+  }
+}