Merge pull request #5 from HealthSamurai/single-css-file

Build a single hs_ui.css stylesheet
HealthSamurai · Dec 23, 2024 · 2df6db1 · 2df6db1
2 parents 8869c93 + f902e6c
commit 2df6db1
Show file tree

Hide file tree

Showing 22 changed files with 158 additions and 7,154 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,4 +4,4 @@ _site
 node_modules
 resources/public/js/storybook
 resources/public/js/components
-resources/public/css/tailwind.css
+resources/public/css/hs_ui.css
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -1,6 +1,3 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="font/JetBrainsMono/JetBrainsMono.css" rel="stylesheet">
-<link href="font/Inter/inter.css" rel="stylesheet">
-<link href="font/Metropolis/style.css" rel="stylesheet">
-<link rel="stylesheet" href="css/tailwind.css">
+<link rel="stylesheet" href="css/hs_ui.css">
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,7 +1,7 @@
 import { themes } from '@storybook/theming';
 
 // Uncomment the line below to enable hot-reloading
-// import '../resources/public/css/tailwind.css'
+// import '../resources/public/css/hs_ui.css'
 
 export const parameters = {
   darkMode: {

diff --git a/Makefile b/Makefile
@@ -1,5 +1,5 @@
-TAILWIND_INPUT=tailwind.css
-TAILWIND_OUTPUT=resources/public/css/tailwind.css
+CSS_INPUT=tailwind.css
+CSS_OUTPUT=resources/public/css/hs_ui.css
 
 .PHONY: npm-install
 npm-install:
@@ -17,15 +17,15 @@ deinit:
 	rm -rf .shadow-cljs
 	rm -rf resources/public/js/storybook
 	rm -rf resources/public/js/components
-	rm -rf "$(TAILWIND_OUTPUT)"
+	rm -rf "$(CSS_OUTPUT)"
 
 .PHONY: tailwind-watch
 tailwind-watch:
-	npx tailwindcss -i "$(TAILWIND_INPUT)" -o "$(TAILWIND_OUTPUT)" --watch
+	npx tailwindcss -i "$(CSS_INPUT)" -o "$(CSS_OUTPUT)" --watch
 
 .PHONY: tailwind-release
 tailwind-release:
-	npx tailwindcss -i "$(TAILWIND_INPUT)" -o "$(TAILWIND_OUTPUT)"
+	npx tailwindcss -i "$(CSS_INPUT)" -o "$(CSS_OUTPUT)"
 
 .PHONY: shadow-watch
 shadow-watch:

diff --git a/README.md b/README.md
@@ -11,6 +11,26 @@
   </p>
 </p>
 
+# Usage
+Add the library to deps.edn
+```
+{:extra-deps {...
+              healthsamurai/hs-ui {:local/root "libs/hs_ui"}
+              ...}}
+```
+
+And then add the following line to your HTML template:
+```html
+<head>
+...
+  <link rel="stylesheet" href="css/hs_ui.css">
+...
+</head>
+```
+
+The value of href may differ, it depends on how your HTTP server is
+configured. The actual file path in hs_ui is
+resources/public/hs_ui.css
 
 # Storybook
 ```sh
@@ -22,4 +42,3 @@ make story
 make init
 make dev
 ```
-
diff --git a/resources/public/font/Inter/inter.css → resources/public/css/inter_font.css b/resources/public/font/Inter/inter.css → resources/public/css/inter_font.css
@@ -3,152 +3,152 @@
   font-style:  normal;
   font-weight: 100;
   font-display: swap;
-  src: url("Inter-Thin.woff2?v=3.19") format("woff2"),
-       url("Inter-Thin.woff?v=3.19") format("woff");
+  src: url("../font/Inter/Inter-Thin.woff2?v=3.19") format("woff2"),
+       url("../font/Inter/Inter-Thin.woff?v=3.19") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 100;
   font-display: swap;
-  src: url("Inter-ThinItalic.woff2?v=3.19") format("woff2"),
-       url("Inter-ThinItalic.woff?v=3.19") format("woff");
+  src: url("../font/Inter/Inter-ThinItalic.woff2?v=3.19") format("woff2"),
+       url("../font/Inter/Inter-ThinItalic.woff?v=3.19") format("woff");
 }
 
 @font-face {
   font-family: 'Inter';
   font-style:  normal;
   font-weight: 200;
   font-display: swap;
-  src: url("Inter-ExtraLight.woff2?v=3.19") format("woff2"),
-       url("Inter-ExtraLight.woff?v=3.19") format("woff");
+  src: url("../font/Inter/Inter-ExtraLight.woff2?v=3.19") format("woff2"),
+       url("../font/Inter/Inter-ExtraLight.woff?v=3.19") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 200;
   font-display: swap;
-  src: url("Inter-ExtraLightItalic.woff2?v=3.19") format("woff2"),
-       url("Inter-ExtraLightItalic.woff?v=3.19") format("woff");
+  src: url("../font/Inter/Inter-ExtraLightItalic.woff2?v=3.19") format("woff2"),
+       url("../font/Inter/Inter-ExtraLightItalic.woff?v=3.19") format("woff");
 }
 
 @font-face {
   font-family: 'Inter';
   font-style:  normal;
   font-weight: 300;
   font-display: swap;
-  src: url("Inter-Light.woff2?v=3.19") format("woff2"),
-       url("Inter-Light.woff?v=3.19") format("woff");
+  src: url("../font/Inter/Inter-Light.woff2?v=3.19") format("woff2"),
+       url("../font/Inter/Inter-Light.woff?v=3.19") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 300;
   font-display: swap;
-  src: url("Inter-LightItalic.woff2?v=3.19") format("woff2"),
-       url("Inter-LightItalic.woff?v=3.19") format("woff");
+  src: url("../font/Inter/Inter-LightItalic.woff2?v=3.19") format("woff2"),
+       url("../font/Inter/Inter-LightItalic.woff?v=3.19") format("woff");
 }
 
 @font-face {
   font-family: 'Inter';
   font-style:  normal;
   font-weight: 400;
   font-display: swap;
-  src: url("Inter-Regular.woff2?v=3.19") format("woff2"),
-       url("Inter-Regular.woff?v=3.19") format("woff");
+  src: url("../font/Inter/Inter-Regular.woff2?v=3.19") format("woff2"),
+       url("../font/Inter/Inter-Regular.woff?v=3.19") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 400;
   font-display: swap;
-  src: url("Inter-Italic.woff2?v=3.19") format("woff2"),
-       url("Inter-Italic.woff?v=3.19") format("woff");
+  src: url("../font/Inter/Inter-Italic.woff2?v=3.19") format("woff2"),
+       url("../font/Inter/Inter-Italic.woff?v=3.19") format("woff");
 }
 
 @font-face {
   font-family: 'Inter';
   font-style:  normal;
   font-weight: 500;
   font-display: swap;
-  src: url("Inter-Medium.woff2?v=3.19") format("woff2"),
-       url("Inter-Medium.woff?v=3.19") format("woff");
+  src: url("../font/Inter/Inter-Medium.woff2?v=3.19") format("woff2"),
+       url("../font/Inter/Inter-Medium.woff?v=3.19") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 500;
   font-display: swap;
-  src: url("Inter-MediumItalic.woff2?v=3.19") format("woff2"),
-       url("Inter-MediumItalic.woff?v=3.19") format("woff");
+  src: url("../font/Inter/Inter-MediumItalic.woff2?v=3.19") format("woff2"),
+       url("../font/Inter/Inter-MediumItalic.woff?v=3.19") format("woff");
 }
 
 @font-face {
   font-family: 'Inter';
   font-style:  normal;
   font-weight: 600;
   font-display: swap;
-  src: url("Inter-SemiBold.woff2?v=3.19") format("woff2"),
-       url("Inter-SemiBold.woff?v=3.19") format("woff");
+  src: url("../font/Inter/Inter-SemiBold.woff2?v=3.19") format("woff2"),
+       url("../font/Inter/Inter-SemiBold.woff?v=3.19") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 600;
   font-display: swap;
-  src: url("Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"),
-       url("Inter-SemiBoldItalic.woff?v=3.19") format("woff");
+  src: url("../font/Inter/Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"),
+       url("../font/Inter/Inter-SemiBoldItalic.woff?v=3.19") format("woff");
 }
 
 @font-face {
   font-family: 'Inter';
   font-style:  normal;
   font-weight: 700;
   font-display: swap;
-  src: url("Inter-Bold.woff2?v=3.19") format("woff2"),
-       url("Inter-Bold.woff?v=3.19") format("woff");
+  src: url("../font/Inter/Inter-Bold.woff2?v=3.19") format("woff2"),
+       url("../font/Inter/Inter-Bold.woff?v=3.19") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 700;
   font-display: swap;
-  src: url("Inter-BoldItalic.woff2?v=3.19") format("woff2"),
-       url("Inter-BoldItalic.woff?v=3.19") format("woff");
+  src: url("../font/Inter/Inter-BoldItalic.woff2?v=3.19") format("woff2"),
+       url("../font/Inter/Inter-BoldItalic.woff?v=3.19") format("woff");
 }
 
 @font-face {
   font-family: 'Inter';
   font-style:  normal;
   font-weight: 800;
   font-display: swap;
-  src: url("Inter-ExtraBold.woff2?v=3.19") format("woff2"),
-       url("Inter-ExtraBold.woff?v=3.19") format("woff");
+  src: url("../font/Inter/Inter-ExtraBold.woff2?v=3.19") format("woff2"),
+       url("../font/Inter/Inter-ExtraBold.woff?v=3.19") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 800;
   font-display: swap;
-  src: url("Inter-ExtraBoldItalic.woff2?v=3.19") format("woff2"),
-       url("Inter-ExtraBoldItalic.woff?v=3.19") format("woff");
+  src: url("../font/Inter/Inter-ExtraBoldItalic.woff2?v=3.19") format("woff2"),
+       url("../font/Inter/Inter-ExtraBoldItalic.woff?v=3.19") format("woff");
 }
 
 @font-face {
   font-family: 'Inter';
   font-style:  normal;
   font-weight: 900;
   font-display: swap;
-  src: url("Inter-Black.woff2?v=3.19") format("woff2"),
-       url("Inter-Black.woff?v=3.19") format("woff");
+  src: url("../font/Inter/Inter-Black.woff2?v=3.19") format("woff2"),
+       url("../font/Inter/Inter-Black.woff?v=3.19") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 900;
   font-display: swap;
-  src: url("Inter-BlackItalic.woff2?v=3.19") format("woff2"),
-       url("Inter-BlackItalic.woff?v=3.19") format("woff");
+  src: url("../font/Inter/Inter-BlackItalic.woff2?v=3.19") format("woff2"),
+       url("../font/Inter/Inter-BlackItalic.woff?v=3.19") format("woff");
 }
 
 /* -------------------------------------------------------
@@ -166,15 +166,15 @@ Usage:
   font-display: swap;
   font-style: normal;
   font-named-instance: 'Regular';
-  src: url("Inter-roman.var.woff2?v=3.19") format("woff2");
+  src: url("../font/Inter/Inter-roman.var.woff2?v=3.19") format("woff2");
 }
 @font-face {
   font-family: 'Inter var';
   font-weight: 100 900;
   font-display: swap;
   font-style: italic;
   font-named-instance: 'Italic';
-  src: url("Inter-italic.var.woff2?v=3.19") format("woff2");
+  src: url("../font/Inter/Inter-italic.var.woff2?v=3.19") format("woff2");
 }
 
 
@@ -196,5 +196,5 @@ explicitly, e.g.
   font-weight: 100 900;
   font-display: swap;
   font-style: oblique 0deg 10deg;
-  src: url("Inter.var.woff2?v=3.19") format("woff2");
+  src: url("../font/Inter/Inter.var.woff2?v=3.19") format("woff2");
 }