From f1f7b999f500a1fa12570ad285ea68140d2586cf Mon Sep 17 00:00:00 2001 From: Trang Doan Date: Mon, 14 Apr 2025 14:53:35 -0400 Subject: [PATCH 1/6] Update Obsidian app to integrate Tailwind CSS with PostCSS and Autoprefixer support - Added Tailwind CSS, PostCSS, and Autoprefixer to package dependencies - Configured styles.css to include Tailwind directives - Enhanced compile script to process styles using PostCSS with Tailwind and Autoprefixer --- apps/obsidian/package.json | 8 ++++-- apps/obsidian/postcss.config.js | 6 ++++ apps/obsidian/scripts/compile.ts | 47 ++++++++++++++++++++++++++------ apps/obsidian/styles.css | 4 +++ apps/obsidian/tailwind.config.ts | 7 +++++ package-lock.json | 5 +++- 6 files changed, 65 insertions(+), 12 deletions(-) create mode 100644 apps/obsidian/postcss.config.js create mode 100644 apps/obsidian/tailwind.config.ts diff --git a/apps/obsidian/package.json b/apps/obsidian/package.json index 506f90ab7..4a2aca762 100644 --- a/apps/obsidian/package.json +++ b/apps/obsidian/package.json @@ -12,6 +12,7 @@ "author": "", "license": "MIT", "devDependencies": { + "@repo/tailwind-config": "*", "@types/node": "^16.11.6", "@typescript-eslint/eslint-plugin": "5.29.0", "@typescript-eslint/parser": "5.29.0", @@ -20,10 +21,13 @@ "obsidian": "^1.7.2", "tslib": "2.4.0", "tsx": "^4.19.2", - "typescript": "4.7.4" + "typescript": "4.7.4", + "tailwindcss": "^3.3.0", + "postcss": "^8.4.24", + "autoprefixer": "^10.4.14" }, "dependencies": { "react": "^19.0.0", "react-dom": "^19.0.0" } -} +} \ No newline at end of file diff --git a/apps/obsidian/postcss.config.js b/apps/obsidian/postcss.config.js new file mode 100644 index 000000000..12a703d90 --- /dev/null +++ b/apps/obsidian/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/apps/obsidian/scripts/compile.ts b/apps/obsidian/scripts/compile.ts index b41e4e609..04ea91aee 100644 --- a/apps/obsidian/scripts/compile.ts +++ b/apps/obsidian/scripts/compile.ts @@ -4,6 +4,9 @@ import path from "path"; import { z } from "zod"; import builtins from "builtin-modules"; import dotenv from "dotenv"; +import postcss from "postcss"; +import tailwindcss from "tailwindcss"; +import autoprefixer from "autoprefixer"; dotenv.config(); @@ -110,15 +113,41 @@ export const compile = ({ name: "combineStyles", setup(build) { build.onEnd(async () => { - const styleFiles = fs - .readdirSync(stylesDir) - .filter((file) => file.endsWith(".css")); - const combinedStyles = styleFiles - .map((file) => - fs.readFileSync(path.join(stylesDir, file), "utf8"), - ) - .join("\n"); - fs.writeFileSync(outputStylesFile, combinedStyles); + const rootStylesPath = path.join(root, "styles.css"); + if (fs.existsSync(rootStylesPath)) { + const css = fs.readFileSync(rootStylesPath, "utf8"); + const result = await postcss([ + tailwindcss(path.join(root, "tailwind.config.ts")), + autoprefixer(), + ]).process(css, { from: rootStylesPath, to: outputStylesFile }); + + let additionalStyles = ""; + if (fs.existsSync(stylesDir)) { + const styleFiles = fs + .readdirSync(stylesDir) + .filter((file) => file.endsWith(".css")); + additionalStyles = styleFiles + .map((file) => + fs.readFileSync(path.join(stylesDir, file), "utf8"), + ) + .join("\n"); + } + + fs.writeFileSync( + outputStylesFile, + result.css + "\n" + additionalStyles, + ); + } else if (fs.existsSync(stylesDir)) { + const styleFiles = fs + .readdirSync(stylesDir) + .filter((file) => file.endsWith(".css")); + const combinedStyles = styleFiles + .map((file) => + fs.readFileSync(path.join(stylesDir, file), "utf8"), + ) + .join("\n"); + fs.writeFileSync(outputStylesFile, combinedStyles); + } }); }, }, diff --git a/apps/obsidian/styles.css b/apps/obsidian/styles.css index 007500fb2..9751d9a61 100644 --- a/apps/obsidian/styles.css +++ b/apps/obsidian/styles.css @@ -1,3 +1,7 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + .discourse-relations .relationship-visualization { transition: all 0.2s ease; } diff --git a/apps/obsidian/tailwind.config.ts b/apps/obsidian/tailwind.config.ts new file mode 100644 index 000000000..bed0cbe02 --- /dev/null +++ b/apps/obsidian/tailwind.config.ts @@ -0,0 +1,7 @@ +import type { Config } from "tailwindcss"; + +const config: Pick = { + content: ["./src/**/*.{js,jsx,ts,tsx}"], +}; + +export default config; diff --git a/package-lock.json b/package-lock.json index 3894d64d6..1c1309a65 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,9 +34,12 @@ "@types/node": "^16.11.6", "@typescript-eslint/eslint-plugin": "5.29.0", "@typescript-eslint/parser": "5.29.0", + "autoprefixer": "^10.4.14", "builtin-modules": "3.3.0", "esbuild": "0.17.3", "obsidian": "^1.7.2", + "postcss": "^8.4.24", + "tailwindcss": "^3.3.0", "tslib": "2.4.0", "tsx": "^4.19.2", "typescript": "4.7.4" @@ -19997,4 +20000,4 @@ "license": "MIT" } } -} +} \ No newline at end of file From 873047a21188dded17138c1b5e88cd4251f763fa Mon Sep 17 00:00:00 2001 From: Trang Doan Date: Mon, 14 Apr 2025 15:33:28 -0400 Subject: [PATCH 2/6] delete irrelevant package --- apps/obsidian/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/obsidian/package.json b/apps/obsidian/package.json index 4a2aca762..0620a5dd1 100644 --- a/apps/obsidian/package.json +++ b/apps/obsidian/package.json @@ -12,7 +12,6 @@ "author": "", "license": "MIT", "devDependencies": { - "@repo/tailwind-config": "*", "@types/node": "^16.11.6", "@typescript-eslint/eslint-plugin": "5.29.0", "@typescript-eslint/parser": "5.29.0", From e0c7e9faef072bf8cae2eccbaa83832c1570db6a Mon Sep 17 00:00:00 2001 From: Trang Doan Date: Mon, 14 Apr 2025 22:20:28 -0400 Subject: [PATCH 3/6] changing all styles to tailwindcss --- apps/obsidian/package.json | 13 +- .../src/components/DiscourseContextView.tsx | 29 +--- .../src/components/DropdownSelect.tsx | 11 +- .../src/components/NodeTypeSettings.tsx | 32 ++-- .../src/components/RelationshipSection.tsx | 151 ++++-------------- .../src/components/RelationshipSettings.tsx | 89 +++-------- .../components/RelationshipTypeSettings.tsx | 24 ++- apps/obsidian/src/components/SearchBar.tsx | 33 +--- apps/obsidian/src/components/Settings.tsx | 69 ++------ apps/obsidian/styles.css | 22 ++- apps/obsidian/tailwind.config.ts | 35 +++- package-lock.json | 88 +++++----- 12 files changed, 203 insertions(+), 393 deletions(-) diff --git a/apps/obsidian/package.json b/apps/obsidian/package.json index 0620a5dd1..5a3ffc497 100644 --- a/apps/obsidian/package.json +++ b/apps/obsidian/package.json @@ -15,18 +15,19 @@ "@types/node": "^16.11.6", "@typescript-eslint/eslint-plugin": "5.29.0", "@typescript-eslint/parser": "5.29.0", + "autoprefixer": "^10.4.21", "builtin-modules": "3.3.0", "esbuild": "0.17.3", "obsidian": "^1.7.2", + "postcss": "^8.5.3", + "tailwindcss": "^3.4.17", "tslib": "2.4.0", "tsx": "^4.19.2", - "typescript": "4.7.4", - "tailwindcss": "^3.3.0", - "postcss": "^8.4.24", - "autoprefixer": "^10.4.14" + "typescript": "4.7.4" }, "dependencies": { "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "tailwindcss-animate": "^1.0.7" } -} \ No newline at end of file +} diff --git a/apps/obsidian/src/components/DiscourseContextView.tsx b/apps/obsidian/src/components/DiscourseContextView.tsx index 1ffc0df24..3e4140ab7 100644 --- a/apps/obsidian/src/components/DiscourseContextView.tsx +++ b/apps/obsidian/src/components/DiscourseContextView.tsx @@ -51,36 +51,23 @@ const DiscourseContext = ({ activeFile }: DiscourseContextProps) => { } return ( <> -
-
+
+
{nodeType.name || "Unnamed Node Type"}
{nodeType.format && ( -
- Content: +
+ Content: {extractContentFromTitle(nodeType.format, activeFile.basename)}
)}
-
-
+
+

Relationships -

+
@@ -89,7 +76,7 @@ const DiscourseContext = ({ activeFile }: DiscourseContextProps) => { return (
-

Discourse Context

+

Discourse Context

{renderContent()}
); diff --git a/apps/obsidian/src/components/DropdownSelect.tsx b/apps/obsidian/src/components/DropdownSelect.tsx index f8d0de40f..e5d870576 100644 --- a/apps/obsidian/src/components/DropdownSelect.tsx +++ b/apps/obsidian/src/components/DropdownSelect.tsx @@ -70,16 +70,7 @@ const DropdownSelect = ({ }; }, []); - return ( -
- ); + return
; }; export default DropdownSelect; diff --git a/apps/obsidian/src/components/NodeTypeSettings.tsx b/apps/obsidian/src/components/NodeTypeSettings.tsx index c81c967c1..d3190e490 100644 --- a/apps/obsidian/src/components/NodeTypeSettings.tsx +++ b/apps/obsidian/src/components/NodeTypeSettings.tsx @@ -131,10 +131,8 @@ const NodeTypeSettings = () => {

Node Types

{nodeTypes.map((nodeType, index) => (
-
-
+
+
{ onChange={(e) => handleNodeTypeChange(index, "name", e.target.value) } - style={{ flex: 1 }} + className="flex-2" /> { onChange={(e) => handleNodeTypeChange(index, "format", e.target.value) } - style={{ flex: 2 }} + className="flex-1" />
{formatErrors[index] && ( -
+
{formatErrors[index]}
)} @@ -175,11 +167,13 @@ const NodeTypeSettings = () => {
))}
-
- +
+
{hasUnsavedChanges && ( -
- You have unsaved changes -
+
You have unsaved changes
)}
); diff --git a/apps/obsidian/src/components/RelationshipSection.tsx b/apps/obsidian/src/components/RelationshipSection.tsx index 79597b806..e8b952603 100644 --- a/apps/obsidian/src/components/RelationshipSection.tsx +++ b/apps/obsidian/src/components/RelationshipSection.tsx @@ -245,17 +245,7 @@ const AddRelationship = ({ activeFile }: RelationshipSectionProps) => { if (!isAddingRelation) { return ( @@ -139,11 +137,13 @@ const RelationshipTypeSettings = () => {
))}
-
- +
+
{hasUnsavedChanges && ( -
- You have unsaved changes -
+
You have unsaved changes
)}
); diff --git a/apps/obsidian/src/components/SearchBar.tsx b/apps/obsidian/src/components/SearchBar.tsx index 258b86787..32532fd10 100644 --- a/apps/obsidian/src/components/SearchBar.tsx +++ b/apps/obsidian/src/components/SearchBar.tsx @@ -115,42 +115,23 @@ const SearchBar = ({ }, [onSelect]); return ( -
+
{selected && !disabled && ( diff --git a/apps/obsidian/styles.css b/apps/obsidian/styles.css index 9751d9a61..05a488088 100644 --- a/apps/obsidian/styles.css +++ b/apps/obsidian/styles.css @@ -2,11 +2,21 @@ @tailwind components; @tailwind utilities; -.discourse-relations .relationship-visualization { - transition: all 0.2s ease; -} -.discourse-relations .relationship-visualization:hover { - background: var(--background-modifier-hover); - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +@layer base { + h1 { + @apply text-3xl font-bold mb-4; + } + h2 { + @apply text-2xl font-bold mb-3; + } + h3 { + @apply text-xl font-semibold mb-2; + } + h4 { + @apply text-lg font-bold mb-2; + } } +.accent-border-bottom { + border-bottom: 2px solid var(--interactive-accent) !important; +} \ No newline at end of file diff --git a/apps/obsidian/tailwind.config.ts b/apps/obsidian/tailwind.config.ts index bed0cbe02..de3ede3c4 100644 --- a/apps/obsidian/tailwind.config.ts +++ b/apps/obsidian/tailwind.config.ts @@ -1,7 +1,40 @@ import type { Config } from "tailwindcss"; -const config: Pick = { +const config: Pick = { content: ["./src/**/*.{js,jsx,ts,tsx}"], + theme: { + extend: { + // Map Obsidian CSS variables to Tailwind classes + colors: { + // Background colors + primary: "var(--background-primary)", + secondary: "var(--background-secondary)", + tertiary: "var(--background-tertiary)", + + // Text colors + normal: "var(--text-normal)", + muted: "var(--text-muted)", + "accent-text": "var(--text-accent)", + error: "var(--text-error)", + "on-accent": "var(--text-on-accent)", + + // Interactive elements + accent: { + DEFAULT: "var(--interactive-accent)", + hover: "var(--interactive-accent-hover)", + }, + + // Modifiers + "modifier-border": "var(--background-modifier-border)", + "modifier-form-field": "var(--background-modifier-form-field)", + "modifier-error": "var(--background-modifier-error)", + "modifier-hover": "var(--background-modifier-hover)", + }, + borderColor: { + DEFAULT: "var(--background-modifier-border)", + }, + }, + }, }; export default config; diff --git a/package-lock.json b/package-lock.json index 1c1309a65..be1978d34 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,18 +28,19 @@ "license": "MIT", "dependencies": { "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "@types/node": "^16.11.6", "@typescript-eslint/eslint-plugin": "5.29.0", "@typescript-eslint/parser": "5.29.0", - "autoprefixer": "^10.4.14", + "autoprefixer": "^10.4.21", "builtin-modules": "3.3.0", "esbuild": "0.17.3", "obsidian": "^1.7.2", - "postcss": "^8.4.24", - "tailwindcss": "^3.3.0", + "postcss": "^8.5.3", + "tailwindcss": "^3.4.17", "tslib": "2.4.0", "tsx": "^4.19.2", "typescript": "4.7.4" @@ -10270,9 +10271,9 @@ } }, "node_modules/autoprefixer": { - "version": "10.4.20", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz", - "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==", + "version": "10.4.21", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz", + "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==", "dev": true, "funding": [ { @@ -10288,13 +10289,12 @@ "url": "https://github.com/sponsors/ai" } ], - "license": "MIT", "dependencies": { - "browserslist": "^4.23.3", - "caniuse-lite": "^1.0.30001646", + "browserslist": "^4.24.4", + "caniuse-lite": "^1.0.30001702", "fraction.js": "^4.3.7", "normalize-range": "^0.1.2", - "picocolors": "^1.0.1", + "picocolors": "^1.1.1", "postcss-value-parser": "^4.2.0" }, "bin": { @@ -10439,9 +10439,9 @@ } }, "node_modules/browserslist": { - "version": "4.24.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.2.tgz", - "integrity": "sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz", + "integrity": "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==", "dev": true, "funding": [ { @@ -10457,11 +10457,10 @@ "url": "https://github.com/sponsors/ai" } ], - "license": "MIT", "dependencies": { - "caniuse-lite": "^1.0.30001669", - "electron-to-chromium": "^1.5.41", - "node-releases": "^2.0.18", + "caniuse-lite": "^1.0.30001688", + "electron-to-chromium": "^1.5.73", + "node-releases": "^2.0.19", "update-browserslist-db": "^1.1.1" }, "bin": { @@ -10590,9 +10589,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001680", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001680.tgz", - "integrity": "sha512-rPQy70G6AGUMnbwS1z6Xg+RkHYPAi18ihs47GH0jcxIG7wArmPgY3XbS2sRdBbxJljp3thdT8BIqv9ccCypiPA==", + "version": "1.0.30001713", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001713.tgz", + "integrity": "sha512-wCIWIg+A4Xr7NfhTuHdX+/FKh3+Op3LBbSp2N5Pfx6T/LhdQy3GTyoTg48BReaW/MyMNZAkTadsBtai3ldWK0Q==", "funding": [ { "type": "opencollective", @@ -10606,8 +10605,7 @@ "type": "github", "url": "https://github.com/sponsors/ai" } - ], - "license": "CC-BY-4.0" + ] }, "node_modules/ccount": { "version": "2.0.1", @@ -11474,11 +11472,10 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.5.63", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.63.tgz", - "integrity": "sha512-ddeXKuY9BHo/mw145axlyWjlJ1UBt4WK3AlvkT7W2AbqfRQoacVoRUCF6wL3uIx/8wT9oLKXzI+rFqHHscByaA==", - "dev": true, - "license": "ISC" + "version": "1.5.137", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.137.tgz", + "integrity": "sha512-/QSJaU2JyIuTbbABAo/crOs+SuAZLS+fVVS10PVrIT9hrRkmZl8Hb0xPSkKRUUWHQtYzXHpQUW3Dy5hwMzGZkA==", + "dev": true }, "node_modules/emoji-regex": { "version": "9.2.2", @@ -15906,16 +15903,15 @@ } }, "node_modules/nanoid": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", - "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "version": "3.3.11", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz", + "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==", "funding": [ { "type": "github", "url": "https://github.com/sponsors/ai" } ], - "license": "MIT", "bin": { "nanoid": "bin/nanoid.cjs" }, @@ -16204,11 +16200,10 @@ "license": "0BSD" }, "node_modules/node-releases": { - "version": "2.0.18", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz", - "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==", - "dev": true, - "license": "MIT" + "version": "2.0.19", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz", + "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==", + "dev": true }, "node_modules/nopt": { "version": "7.2.1", @@ -16893,9 +16888,9 @@ } }, "node_modules/postcss": { - "version": "8.4.49", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz", - "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==", + "version": "8.5.3", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz", + "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==", "funding": [ { "type": "opencollective", @@ -16910,9 +16905,8 @@ "url": "https://github.com/sponsors/ai" } ], - "license": "MIT", "dependencies": { - "nanoid": "^3.3.7", + "nanoid": "^3.3.8", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" }, @@ -18731,10 +18725,9 @@ } }, "node_modules/tailwindcss": { - "version": "3.4.16", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.16.tgz", - "integrity": "sha512-TI4Cyx7gDiZ6r44ewaJmt0o6BrMCT5aK5e0rmJ/G9Xq3w7CX/5VXl/zIPEJZFUK5VEqwByyhqNPycPlvcK4ZNw==", - "license": "MIT", + "version": "3.4.17", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz", + "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==", "dependencies": { "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", @@ -18771,7 +18764,6 @@ "version": "1.0.7", "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz", "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==", - "license": "MIT", "peerDependencies": { "tailwindcss": ">=3.0.0 || insiders" } @@ -20000,4 +19992,4 @@ "license": "MIT" } } -} \ No newline at end of file +} From 4bd69301f8a1688b8850fb9167b8814ff01cc30f Mon Sep 17 00:00:00 2001 From: Trang Doan Date: Mon, 14 Apr 2025 14:53:35 -0400 Subject: [PATCH 4/6] Update Obsidian app to integrate Tailwind CSS with PostCSS and Autoprefixer support - Added Tailwind CSS, PostCSS, and Autoprefixer to package dependencies - Configured styles.css to include Tailwind directives - Enhanced compile script to process styles using PostCSS with Tailwind and Autoprefixer --- apps/obsidian/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/obsidian/package.json b/apps/obsidian/package.json index 0620a5dd1..4a2aca762 100644 --- a/apps/obsidian/package.json +++ b/apps/obsidian/package.json @@ -12,6 +12,7 @@ "author": "", "license": "MIT", "devDependencies": { + "@repo/tailwind-config": "*", "@types/node": "^16.11.6", "@typescript-eslint/eslint-plugin": "5.29.0", "@typescript-eslint/parser": "5.29.0", From 7fa856bf0d99af1d0947fee0113f0bbd74ff2f94 Mon Sep 17 00:00:00 2001 From: Trang Doan Date: Mon, 14 Apr 2025 15:33:28 -0400 Subject: [PATCH 5/6] delete irrelevant package --- apps/obsidian/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/obsidian/package.json b/apps/obsidian/package.json index 4a2aca762..0620a5dd1 100644 --- a/apps/obsidian/package.json +++ b/apps/obsidian/package.json @@ -12,7 +12,6 @@ "author": "", "license": "MIT", "devDependencies": { - "@repo/tailwind-config": "*", "@types/node": "^16.11.6", "@typescript-eslint/eslint-plugin": "5.29.0", "@typescript-eslint/parser": "5.29.0", From bd7c12f919329b752fada8f019b3b3a83804c373 Mon Sep 17 00:00:00 2001 From: Trang Doan Date: Mon, 14 Apr 2025 22:20:28 -0400 Subject: [PATCH 6/6] changing all styles to tailwindcss --- apps/obsidian/package.json | 13 +- .../src/components/DiscourseContextView.tsx | 29 +--- .../src/components/DropdownSelect.tsx | 11 +- .../src/components/NodeTypeSettings.tsx | 32 ++-- .../src/components/RelationshipSection.tsx | 151 ++++-------------- .../src/components/RelationshipSettings.tsx | 89 +++-------- .../components/RelationshipTypeSettings.tsx | 24 ++- apps/obsidian/src/components/SearchBar.tsx | 33 +--- apps/obsidian/src/components/Settings.tsx | 69 ++------ apps/obsidian/styles.css | 22 ++- apps/obsidian/tailwind.config.ts | 35 +++- package-lock.json | 88 +++++----- 12 files changed, 203 insertions(+), 393 deletions(-) diff --git a/apps/obsidian/package.json b/apps/obsidian/package.json index 0620a5dd1..5a3ffc497 100644 --- a/apps/obsidian/package.json +++ b/apps/obsidian/package.json @@ -15,18 +15,19 @@ "@types/node": "^16.11.6", "@typescript-eslint/eslint-plugin": "5.29.0", "@typescript-eslint/parser": "5.29.0", + "autoprefixer": "^10.4.21", "builtin-modules": "3.3.0", "esbuild": "0.17.3", "obsidian": "^1.7.2", + "postcss": "^8.5.3", + "tailwindcss": "^3.4.17", "tslib": "2.4.0", "tsx": "^4.19.2", - "typescript": "4.7.4", - "tailwindcss": "^3.3.0", - "postcss": "^8.4.24", - "autoprefixer": "^10.4.14" + "typescript": "4.7.4" }, "dependencies": { "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "tailwindcss-animate": "^1.0.7" } -} \ No newline at end of file +} diff --git a/apps/obsidian/src/components/DiscourseContextView.tsx b/apps/obsidian/src/components/DiscourseContextView.tsx index 1ffc0df24..3e4140ab7 100644 --- a/apps/obsidian/src/components/DiscourseContextView.tsx +++ b/apps/obsidian/src/components/DiscourseContextView.tsx @@ -51,36 +51,23 @@ const DiscourseContext = ({ activeFile }: DiscourseContextProps) => { } return ( <> -
-
+
+
{nodeType.name || "Unnamed Node Type"}
{nodeType.format && ( -
- Content: +
+ Content: {extractContentFromTitle(nodeType.format, activeFile.basename)}
)}
-
-
+
+

Relationships -

+
@@ -89,7 +76,7 @@ const DiscourseContext = ({ activeFile }: DiscourseContextProps) => { return (
-

Discourse Context

+

Discourse Context

{renderContent()}
); diff --git a/apps/obsidian/src/components/DropdownSelect.tsx b/apps/obsidian/src/components/DropdownSelect.tsx index f8d0de40f..e5d870576 100644 --- a/apps/obsidian/src/components/DropdownSelect.tsx +++ b/apps/obsidian/src/components/DropdownSelect.tsx @@ -70,16 +70,7 @@ const DropdownSelect = ({ }; }, []); - return ( -
- ); + return
; }; export default DropdownSelect; diff --git a/apps/obsidian/src/components/NodeTypeSettings.tsx b/apps/obsidian/src/components/NodeTypeSettings.tsx index c81c967c1..d3190e490 100644 --- a/apps/obsidian/src/components/NodeTypeSettings.tsx +++ b/apps/obsidian/src/components/NodeTypeSettings.tsx @@ -131,10 +131,8 @@ const NodeTypeSettings = () => {

Node Types

{nodeTypes.map((nodeType, index) => (
-
-
+
+
{ onChange={(e) => handleNodeTypeChange(index, "name", e.target.value) } - style={{ flex: 1 }} + className="flex-2" /> { onChange={(e) => handleNodeTypeChange(index, "format", e.target.value) } - style={{ flex: 2 }} + className="flex-1" />
{formatErrors[index] && ( -
+
{formatErrors[index]}
)} @@ -175,11 +167,13 @@ const NodeTypeSettings = () => {
))}
-
- +
+
{hasUnsavedChanges && ( -
- You have unsaved changes -
+
You have unsaved changes
)}
); diff --git a/apps/obsidian/src/components/RelationshipSection.tsx b/apps/obsidian/src/components/RelationshipSection.tsx index 11a392ef1..bb71bc8a3 100644 --- a/apps/obsidian/src/components/RelationshipSection.tsx +++ b/apps/obsidian/src/components/RelationshipSection.tsx @@ -246,17 +246,7 @@ const AddRelationship = ({ activeFile }: RelationshipSectionProps) => { if (!isAddingRelation) { return ( @@ -139,11 +137,13 @@ const RelationshipTypeSettings = () => {
))}
-
- +
+
{hasUnsavedChanges && ( -
- You have unsaved changes -
+
You have unsaved changes
)}
); diff --git a/apps/obsidian/src/components/SearchBar.tsx b/apps/obsidian/src/components/SearchBar.tsx index 258b86787..32532fd10 100644 --- a/apps/obsidian/src/components/SearchBar.tsx +++ b/apps/obsidian/src/components/SearchBar.tsx @@ -115,42 +115,23 @@ const SearchBar = ({ }, [onSelect]); return ( -
+
{selected && !disabled && ( diff --git a/apps/obsidian/styles.css b/apps/obsidian/styles.css index 9751d9a61..05a488088 100644 --- a/apps/obsidian/styles.css +++ b/apps/obsidian/styles.css @@ -2,11 +2,21 @@ @tailwind components; @tailwind utilities; -.discourse-relations .relationship-visualization { - transition: all 0.2s ease; -} -.discourse-relations .relationship-visualization:hover { - background: var(--background-modifier-hover); - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +@layer base { + h1 { + @apply text-3xl font-bold mb-4; + } + h2 { + @apply text-2xl font-bold mb-3; + } + h3 { + @apply text-xl font-semibold mb-2; + } + h4 { + @apply text-lg font-bold mb-2; + } } +.accent-border-bottom { + border-bottom: 2px solid var(--interactive-accent) !important; +} \ No newline at end of file diff --git a/apps/obsidian/tailwind.config.ts b/apps/obsidian/tailwind.config.ts index bed0cbe02..de3ede3c4 100644 --- a/apps/obsidian/tailwind.config.ts +++ b/apps/obsidian/tailwind.config.ts @@ -1,7 +1,40 @@ import type { Config } from "tailwindcss"; -const config: Pick = { +const config: Pick = { content: ["./src/**/*.{js,jsx,ts,tsx}"], + theme: { + extend: { + // Map Obsidian CSS variables to Tailwind classes + colors: { + // Background colors + primary: "var(--background-primary)", + secondary: "var(--background-secondary)", + tertiary: "var(--background-tertiary)", + + // Text colors + normal: "var(--text-normal)", + muted: "var(--text-muted)", + "accent-text": "var(--text-accent)", + error: "var(--text-error)", + "on-accent": "var(--text-on-accent)", + + // Interactive elements + accent: { + DEFAULT: "var(--interactive-accent)", + hover: "var(--interactive-accent-hover)", + }, + + // Modifiers + "modifier-border": "var(--background-modifier-border)", + "modifier-form-field": "var(--background-modifier-form-field)", + "modifier-error": "var(--background-modifier-error)", + "modifier-hover": "var(--background-modifier-hover)", + }, + borderColor: { + DEFAULT: "var(--background-modifier-border)", + }, + }, + }, }; export default config; diff --git a/package-lock.json b/package-lock.json index 1c1309a65..be1978d34 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,18 +28,19 @@ "license": "MIT", "dependencies": { "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "@types/node": "^16.11.6", "@typescript-eslint/eslint-plugin": "5.29.0", "@typescript-eslint/parser": "5.29.0", - "autoprefixer": "^10.4.14", + "autoprefixer": "^10.4.21", "builtin-modules": "3.3.0", "esbuild": "0.17.3", "obsidian": "^1.7.2", - "postcss": "^8.4.24", - "tailwindcss": "^3.3.0", + "postcss": "^8.5.3", + "tailwindcss": "^3.4.17", "tslib": "2.4.0", "tsx": "^4.19.2", "typescript": "4.7.4" @@ -10270,9 +10271,9 @@ } }, "node_modules/autoprefixer": { - "version": "10.4.20", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz", - "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==", + "version": "10.4.21", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz", + "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==", "dev": true, "funding": [ { @@ -10288,13 +10289,12 @@ "url": "https://github.com/sponsors/ai" } ], - "license": "MIT", "dependencies": { - "browserslist": "^4.23.3", - "caniuse-lite": "^1.0.30001646", + "browserslist": "^4.24.4", + "caniuse-lite": "^1.0.30001702", "fraction.js": "^4.3.7", "normalize-range": "^0.1.2", - "picocolors": "^1.0.1", + "picocolors": "^1.1.1", "postcss-value-parser": "^4.2.0" }, "bin": { @@ -10439,9 +10439,9 @@ } }, "node_modules/browserslist": { - "version": "4.24.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.2.tgz", - "integrity": "sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz", + "integrity": "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==", "dev": true, "funding": [ { @@ -10457,11 +10457,10 @@ "url": "https://github.com/sponsors/ai" } ], - "license": "MIT", "dependencies": { - "caniuse-lite": "^1.0.30001669", - "electron-to-chromium": "^1.5.41", - "node-releases": "^2.0.18", + "caniuse-lite": "^1.0.30001688", + "electron-to-chromium": "^1.5.73", + "node-releases": "^2.0.19", "update-browserslist-db": "^1.1.1" }, "bin": { @@ -10590,9 +10589,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001680", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001680.tgz", - "integrity": "sha512-rPQy70G6AGUMnbwS1z6Xg+RkHYPAi18ihs47GH0jcxIG7wArmPgY3XbS2sRdBbxJljp3thdT8BIqv9ccCypiPA==", + "version": "1.0.30001713", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001713.tgz", + "integrity": "sha512-wCIWIg+A4Xr7NfhTuHdX+/FKh3+Op3LBbSp2N5Pfx6T/LhdQy3GTyoTg48BReaW/MyMNZAkTadsBtai3ldWK0Q==", "funding": [ { "type": "opencollective", @@ -10606,8 +10605,7 @@ "type": "github", "url": "https://github.com/sponsors/ai" } - ], - "license": "CC-BY-4.0" + ] }, "node_modules/ccount": { "version": "2.0.1", @@ -11474,11 +11472,10 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.5.63", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.63.tgz", - "integrity": "sha512-ddeXKuY9BHo/mw145axlyWjlJ1UBt4WK3AlvkT7W2AbqfRQoacVoRUCF6wL3uIx/8wT9oLKXzI+rFqHHscByaA==", - "dev": true, - "license": "ISC" + "version": "1.5.137", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.137.tgz", + "integrity": "sha512-/QSJaU2JyIuTbbABAo/crOs+SuAZLS+fVVS10PVrIT9hrRkmZl8Hb0xPSkKRUUWHQtYzXHpQUW3Dy5hwMzGZkA==", + "dev": true }, "node_modules/emoji-regex": { "version": "9.2.2", @@ -15906,16 +15903,15 @@ } }, "node_modules/nanoid": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", - "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "version": "3.3.11", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz", + "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==", "funding": [ { "type": "github", "url": "https://github.com/sponsors/ai" } ], - "license": "MIT", "bin": { "nanoid": "bin/nanoid.cjs" }, @@ -16204,11 +16200,10 @@ "license": "0BSD" }, "node_modules/node-releases": { - "version": "2.0.18", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz", - "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==", - "dev": true, - "license": "MIT" + "version": "2.0.19", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz", + "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==", + "dev": true }, "node_modules/nopt": { "version": "7.2.1", @@ -16893,9 +16888,9 @@ } }, "node_modules/postcss": { - "version": "8.4.49", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz", - "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==", + "version": "8.5.3", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz", + "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==", "funding": [ { "type": "opencollective", @@ -16910,9 +16905,8 @@ "url": "https://github.com/sponsors/ai" } ], - "license": "MIT", "dependencies": { - "nanoid": "^3.3.7", + "nanoid": "^3.3.8", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" }, @@ -18731,10 +18725,9 @@ } }, "node_modules/tailwindcss": { - "version": "3.4.16", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.16.tgz", - "integrity": "sha512-TI4Cyx7gDiZ6r44ewaJmt0o6BrMCT5aK5e0rmJ/G9Xq3w7CX/5VXl/zIPEJZFUK5VEqwByyhqNPycPlvcK4ZNw==", - "license": "MIT", + "version": "3.4.17", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz", + "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==", "dependencies": { "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", @@ -18771,7 +18764,6 @@ "version": "1.0.7", "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz", "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==", - "license": "MIT", "peerDependencies": { "tailwindcss": ">=3.0.0 || insiders" } @@ -20000,4 +19992,4 @@ "license": "MIT" } } -} \ No newline at end of file +}