Skip to content

Commit 1377ab5

Browse files
elijah-potterelijah-potter
authored
feat: create component library + use in relevant places (#2229)
1 parent da9e2ba commit 1377ab5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+2165
-825
lines changed

‎Dockerfile‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,11 @@ WORKDIR /usr/build/
2727
COPY . .
2828
COPY --from=wasm-build /usr/build/harper-wasm/pkg /usr/build/harper-wasm/pkg
2929

30-
RUN pnpm install --shamefully-hoist
30+
RUN pnpm install --engine-strict=false --shamefully-hoist
31+
32+
WORKDIR /usr/build/packages/components
33+
RUN pnpm install --engine-strict=false --shamefully-hoist
34+
RUN pnpm build
3135

3236
WORKDIR /usr/build/packages/harper.js
3337

@@ -37,7 +41,7 @@ WORKDIR /usr/build/packages/lint-framework
3741
RUN pnpm build
3842

3943
WORKDIR /usr/build/packages/web
40-
RUN pnpm install --shamefully-hoist
44+
RUN pnpm install --engine-strict=false --shamefully-hoist
4145
RUN pnpm build
4246

4347
FROM node:${NODE_VERSION}

‎justfile‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,15 @@ format:
33
cargo fmt
44
pnpm format
55

6+
# Build the shared component library
7+
build-components:
8+
#!/usr/bin/env bash
9+
set -eo pipefail
10+
11+
cd "{{justfile_directory()}}/packages/components"
12+
pnpm install --engine-strict=false
13+
pnpm build
14+
615
# Build the WebAssembly module
716
build-wasm:
817
#!/usr/bin/env bash
@@ -80,7 +89,7 @@ build-wp: build-harperjs
8089
pnpm plugin-zip
8190

8291
# Compile the website's dependencies and start a development server. Note that if you make changes to `harper-wasm`, you will have to re-run this command.
83-
dev-web: build-harperjs build-lint-framework
92+
dev-web: build-harperjs build-lint-framework build-components
8493
#!/usr/bin/env bash
8594
set -eo pipefail
8695

@@ -89,7 +98,7 @@ dev-web: build-harperjs build-lint-framework
8998
pnpm dev
9099

91100
# Build the Harper website.
92-
build-web: build-harperjs build-lint-framework
101+
build-web: build-harperjs build-lint-framework build-components
93102
#!/usr/bin/env bash
94103
set -eo pipefail
95104

@@ -110,7 +119,7 @@ build-obsidian: build-harperjs
110119
zip harper-obsidian-plugin.zip manifest.json main.js
111120

112121
# Build the Chrome extension.
113-
build-chrome-plugin: build-harperjs build-lint-framework
122+
build-chrome-plugin: build-harperjs build-lint-framework build-components
114123
#!/usr/bin/env bash
115124
set -eo pipefail
116125

@@ -120,7 +129,7 @@ build-chrome-plugin: build-harperjs build-lint-framework
120129
pnpm zip-for-chrome
121130

122131
# Start a development server for the Chrome extension.
123-
dev-chrome-plugin: build-harperjs build-lint-framework
132+
dev-chrome-plugin: build-harperjs build-lint-framework build-components
124133
#!/usr/bin/env bash
125134
set -eo pipefail
126135

@@ -130,7 +139,7 @@ dev-chrome-plugin: build-harperjs build-lint-framework
130139
pnpm dev
131140

132141
# Build the Firefox extension.
133-
build-firefox-plugin: build-harperjs build-lint-framework
142+
build-firefox-plugin: build-harperjs build-lint-framework build-components
134143
#!/usr/bin/env bash
135144
set -eo pipefail
136145

@@ -272,7 +281,7 @@ check-rust: auditdictionary
272281
# Perform format and type checking.
273282
check: check-rust check-js build-web
274283

275-
check-js: build-harperjs build-lint-framework
284+
check-js: build-harperjs build-lint-framework build-components
276285
#!/usr/bin/env bash
277286
set -eo pipefail
278287

‎packages/chrome-plugin/app.css‎

Lines changed: 75 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,88 @@
11
@import "tailwindcss";
2-
3-
@plugin "flowbite/plugin";
2+
@import "components/components.css";
43

54
@custom-variant dark (&:where(.dark, .dark *));
65

76
@theme {
8-
--color-primary-50: #fefee3;
9-
--color-primary-100: #e3eccf;
10-
--color-primary-200: #c9dabc;
11-
--color-primary-300: #afc8a9;
12-
--color-primary-400: #95b696;
13-
--color-primary-500: #7aa482;
14-
--color-primary-600: #60926f;
15-
--color-primary-700: #46805c;
16-
--color-primary-800: #2c6e49;
17-
--color-primary-900: #23583a;
18-
19-
--color-accent-peach: #ffc9b9;
20-
--color-accent-sand: #d68c45;
21-
}
7+
--font-sans: "Atkinson Hyperlegible", sans-serif;
8+
--font-serif: Domine, serif;
9+
10+
--color-primary-50: #fef4e7; /* honey bronze */
11+
--color-primary-100: #fce9cf;
12+
--color-primary-200: #f9d49f;
13+
--color-primary-300: #f7be6e;
14+
--color-primary-400: #f4a83e;
15+
--color-primary: #f1920e;
16+
--color-primary-600: #c1750b;
17+
--color-primary-700: #915808;
18+
--color-primary-800: #603b06;
19+
--color-primary-900: #301d03;
20+
--color-primary-950: #221402;
21+
22+
--color-accent-50: #fee7e9; /* hot fuchsia */
23+
--color-accent-100: #fccfd3;
24+
--color-accent-200: #f99fa6;
25+
--color-accent-300: #f76e7a;
26+
--color-accent-400: #f43e4d;
27+
--color-accent: #f10e21;
28+
--color-accent-600: #c10b1a;
29+
--color-accent-700: #910814;
30+
--color-accent-800: #60060d;
31+
--color-accent-900: #300307;
32+
--color-accent-950: #220205;
2233

23-
@source "./node_modules/flowbite-svelte/dist";
34+
--color-cream: #fef4e7; /* simple cream */
35+
--color-cream-100: #fce9cf;
36+
--color-cream-200: #f9d49f;
37+
--color-cream-300: #f7be6e;
38+
--color-cream-400: #f4a83e;
39+
--color-cream-500: #f1920e;
40+
--color-cream-600: #c1750b;
41+
--color-cream-700: #915808;
42+
--color-cream-800: #603b06;
43+
--color-cream-900: #301d03;
44+
--color-cream-950: #221402;
45+
46+
--color-champagne-mist-50: #fef4e7;
47+
--color-champagne-mist-100: #fce9cf;
48+
--color-champagne-mist-200: #fad49e;
49+
--color-champagne-mist-300: #f7be6e;
50+
--color-champagne-mist-400: #f5a83d;
51+
--color-champagne-mist-500: #f2930d;
52+
--color-champagne-mist-600: #c2750a;
53+
--color-champagne-mist-700: #915808;
54+
--color-champagne-mist-800: #613b05;
55+
--color-champagne-mist-900: #301d03;
56+
--color-champagne-mist-950: #221502;
57+
58+
--color-white: #fffdfa;
59+
--color-white-100: #fceacf;
60+
--color-white-200: #fad59e;
61+
--color-white-300: #f7c06e;
62+
--color-white-400: #f5ab3d;
63+
--color-white-500: #f2960d;
64+
--color-white-600: #c2780a;
65+
--color-white-700: #915a08;
66+
--color-white-800: #613c05;
67+
--color-white-900: #301e03;
68+
--color-white-950: #221502;
69+
}
2470

2571
code {
26-
@apply bg-primary-100 rounded p-1;
72+
@apply bg-primary-100 rounded p-1 dark:text-black;
2773
}
2874

29-
body {
30-
@apply min-h-screen bg-white text-gray-900 transition-colors duration-150;
75+
#app {
76+
@apply min-h-screen bg-white text-black dark:bg-black dark:text-white transition-colors duration-150;
77+
78+
font-family:
79+
Atkinson Hyperlegible,
80+
sans-serif;
3181
}
3282

33-
.dark body,
34-
body.dark {
35-
@apply bg-slate-950 text-slate-100;
83+
h1,
84+
h2,
85+
h3,
86+
h4 {
87+
font-family: Domine, serif;
3688
}

‎packages/chrome-plugin/options.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,18 @@
66
<link rel="icon" href="/logo.png" />
77
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
88
<title>Harper Settings</title>
9+
10+
<link rel="preconnect" href="https://fonts.googleapis.com" />
11+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
12+
<link
13+
href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Domine:wght@400..700&display=swap"
14+
rel="stylesheet"
15+
/>
16+
17+
<link
18+
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap"
19+
rel="stylesheet"
20+
/>
921
</head>
1022

1123
<body>

‎packages/chrome-plugin/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@
3232
"@types/lodash-es": "^4.17.12",
3333
"@types/node": "catalog:",
3434
"flowbite": "^3.1.2",
35-
"flowbite-svelte": "^0.44.18",
3635
"gulp": "^5.0.0",
3736
"gulp-zip": "^6.0.0",
3837
"http-server": "^14.1.1",
@@ -51,6 +50,7 @@
5150
"dependencies": {
5251
"@fortawesome/free-solid-svg-icons": "^7.1.0",
5352
"@webcomponents/custom-elements": "^1.6.0",
53+
"components": "workspace:*",
5454
"harper.js": "workspace:*",
5555
"lint-framework": "workspace:*",
5656
"lodash-es": "^4.17.21",

‎packages/chrome-plugin/popup.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,18 @@
55
<meta charset="UTF-8" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Harper: The Private Grammar Checker</title>
8+
9+
<link rel="preconnect" href="https://fonts.googleapis.com" />
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11+
<link
12+
href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Domine:wght@400..700&display=swap"
13+
rel="stylesheet"
14+
/>
15+
16+
<link
17+
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap"
18+
rel="stylesheet"
19+
/>
820
</head>
921

1022
<body>

‎packages/chrome-plugin/src/manifest.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,15 @@ export function makeExtensionCSP(isDev: boolean): string {
1515
const scriptSrc = ["'self'", "'wasm-unsafe-eval'"]; // minimum, cannot add more
1616
const objectSrc = ["'self'"]; // standard
1717
const connectSrc = ["'self'"]; // WebSocket goes here
18+
const styleSrc = ["'self'", "'unsafe-inline'", 'https://fonts.googleapis.com'];
19+
const fontSrc = ["'self'", 'https://fonts.gstatic.com', 'data:'];
1820

1921
if (isDev) {
2022
// `ws://` and `http://` use the same host:port → list both
2123
connectSrc.push('http://localhost:5173', 'ws://localhost:5173');
2224
// include the 127.0.0.1 loopback in case you switch hosts
2325
connectSrc.push('http://127.0.0.1:*', 'ws://127.0.0.1:*');
26+
styleSrc.push('http://localhost:5173', 'http://127.0.0.1:*');
2427
}
2528

2629
connectSrc.push('https://writewithharper.com');
@@ -30,6 +33,8 @@ export function makeExtensionCSP(isDev: boolean): string {
3033
`script-src ${scriptSrc.join(' ')}`,
3134
`object-src ${objectSrc.join(' ')}`,
3235
`connect-src ${connectSrc.join(' ')}`,
36+
`style-src ${styleSrc.join(' ')}`,
37+
`font-src ${fontSrc.join(' ')}`,
3338
].join('; ')};`;
3439
}
3540

0 commit comments

Comments
 (0)