Skip to content

Optimize installation of packages for direct git links #57

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JannikStreek merged 5 commits into from
Dec 17, 2025
Merged

Optimize installation of packages for direct git links #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
eaaf652
add prepare command to oer-finder-plugin package to support direct gi…
JannikStreek Dec 17, 2025
ec57eb0
add prepare command to oer-finder-plugin package to support direct gi…
JannikStreek Dec 17, 2025
21f8477
update docs and make input background configurable
JannikStreek Dec 17, 2025
e46cfa2
add more customization options for colors
JannikStreek Dec 17, 2025
7c104fc
final doc adjustment
JannikStreek Dec 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 39 additions & 10 deletions docs/client-packages.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,32 @@ The OER Aggregator provides two packages for integrating OER resources into your
The `@edufeed-org/oer-finder-api-client` package provides a type-safe TypeScript client for interacting with the OER Aggregator API. It's automatically generated from the OpenAPI specification, ensuring type safety and up-to-date API compatibility.

### Installation
You can add the plugin either by using the already built version from GitHub's package registry (recommended) or hard link the package from git:

```bash
npm install github:edufeed-org/oer-finder-plugin#packages/oer-finder-api-client
# or
yarn add github:edufeed-org/oer-finder-plugin#packages/oer-finder-api-client
# or
pnpm add github:edufeed-org/oer-finder-plugin#packages/oer-finder-api-client
@edufeed-org:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
```
Then, configure an env variable `GITHUB_TOKEN` and run:

```pnpm add @edufeed-org/oer-finder-api-client```

OR

```bash
@edufeed-org:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
pnpm add "@edufeed-org/oer-finder-api-client": "github:edufeed-org/oer-finder-plugin#main&path:packages/oer-finder-api-client"
```

You might also need to add this to your pnpm config in package.json:

```bash
"pnpm": {
"onlyBuiltDependencies": [
"@edufeed-org/oer-finder-api-client"
]
}
```
Then, configure an env variable `GITHUB_TOKEN` and run:

```pnpm add @edufeed-org/oer-finder-plugin-api-client```

### Basic Usage

Expand Down Expand Up @@ -140,7 +148,7 @@ The `@edufeed-org/oer-finder-plugin` package provides web components for integra

### Installation

Add a .npmrc file to your project with this content:
You can add the plugin either by using the already built version from GitHub's package registry (recommended) or hard link the package from git:

```bash
@edufeed-org:registry=https://npm.pkg.github.com
Expand All @@ -150,6 +158,27 @@ Then, configure an env variable `GITHUB_TOKEN` and run:

```pnpm add @edufeed-org/oer-finder-plugin```

OR

```bash
pnpm add "@edufeed-org/oer-finder-plugin": "github:edufeed-org/oer-finder-plugin#main&path:packages/oer-finder-plugin",
```

And add an overwrite for the api client, otherwise the workspace reference will fail:


```bash
"pnpm": {
"overrides": {
"@edufeed-org/oer-finder-api-client": "github:edufeed-org/oer-finder-plugin#main&path:packages/oer-finder-api-client"
},
"onlyBuiltDependencies": [
"@edufeed-org/oer-finder-plugin",
"@edufeed-org/oer-finder-api-client"
],
}
```


### Available Components

Expand Down
3 changes: 2 additions & 1 deletion packages/oer-finder-api-client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@
"build": "pnpm run generate:types && vite build && tsc --emitDeclarationOnly && pnpm run postbuild",
"build:full": "pnpm run generate && vite build && tsc --emitDeclarationOnly && pnpm run postbuild",
"postbuild": "cp dist/src/index.d.ts dist/index.d.ts && cp dist/src/index.d.ts.map dist/index.d.ts.map 2>/dev/null || true",
"type-check": "tsc --noEmit"
"type-check": "tsc --noEmit",
"prepare": "pnpm build"
},
"dependencies": {
"openapi-fetch": "^0.13.3"
Expand Down
40 changes: 39 additions & 1 deletion packages/oer-finder-plugin/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,6 +196,7 @@ oer-list oer-card {
/* Background colors */
--background-card: #ffffff;
--background-form: #f8f9fa;
--background-input: #ffffff;

/* Text colors */
--text-primary: #2d3748;
Expand All @@ -212,25 +213,62 @@ oer-list oer-card {
| `--primary-hover-color` | Hover state for primary elements | `#5568d3` |
| `--secondary-color` | Secondary accent color (gradients) | `#764ba2` |
| `--background-card` | Card background color | `#ffffff` |
| `--background-form` | Form/input background color | `#f8f9fa` |
| `--background-form` | Form container background color | `#f8f9fa` |
| `--background-input` | Input and select element background color | `#ffffff` |
| `--background-muted` | Muted background (e.g., thumbnail placeholder) | `#f5f5f5` |
| `--text-primary` | Main text color | `#2d3748` |
| `--text-secondary` | Secondary text color | `#4a5568` |
| `--text-muted` | Muted/disabled text color | `#718096` |
| `--text-disabled` | Disabled element text color | `rgba(0, 0, 0, 0.3)` |
| `--border-color` | Border color for containers and cards | `rgba(0, 0, 0, 0.1)` |
| `--border-color-subtle` | Subtle border color for separators | `rgba(0, 0, 0, 0.05)` |
| `--input-border-color` | Border color for input/select elements | `rgba(0, 0, 0, 0.15)` |
| `--button-secondary-bg` | Background for secondary buttons | `rgba(0, 0, 0, 0.05)` |
| `--button-secondary-hover-bg` | Hover background for secondary buttons | `rgba(0, 0, 0, 0.1)` |
| `--shadow-color` | Box shadow color for cards | `rgba(0, 0, 0, 0.05)` |
| `--shadow-color-hover` | Hover box shadow color for cards | `rgba(0, 0, 0, 0.15)` |
| `--spinner-track-color` | Loading spinner track color | `#f3f3f3` |
| `--error-color` | Error message text color | `#d32f2f` |

### Dark Theme Example

```css
oer-search,
oer-list,
oer-list oer-card {
/* Primary colors */
--primary-color: #7c3aed;
--primary-hover-color: #6d28d9;
--secondary-color: #8b5cf6;

/* Background colors */
--background-card: #2d3748;
--background-form: #374151;
--background-input: #1f2937;
--background-muted: #4a5568;

/* Text colors */
--text-primary: #f7fafc;
--text-secondary: #e2e8f0;
--text-muted: #a0aec0;
--text-disabled: rgba(255, 255, 255, 0.3);

/* Border colors (use light tints for dark backgrounds) */
--border-color: rgba(255, 255, 255, 0.1);
--border-color-subtle: rgba(255, 255, 255, 0.05);
--input-border-color: rgba(255, 255, 255, 0.15);

/* Button colors */
--button-secondary-bg: rgba(255, 255, 255, 0.1);
--button-secondary-hover-bg: rgba(255, 255, 255, 0.15);

/* Shadow colors (use darker shadows or light glows) */
--shadow-color: rgba(0, 0, 0, 0.3);
--shadow-color-hover: rgba(0, 0, 0, 0.5);

/* Utility colors */
--spinner-track-color: #4a5568;
--error-color: #fc8181;
}
```

Expand Down
1 change: 1 addition & 0 deletions packages/oer-finder-plugin/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
],
"scripts": {
"build": "vite build && tsc --emitDeclarationOnly",
"prepare": "pnpm build",
"type-check": "tsc --noEmit",
"test": "vitest run",
"test:watch": "vitest",
Expand Down
1 change: 1 addition & 0 deletions packages/oer-finder-plugin/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
* --secondary-color: #764ba2;
* --background-card: #ffffff;
* --background-form: #f8f9fa;
* --background-input: #ffffff;
* --text-primary: #2d3748;
* --text-secondary: #4a5568;
* --text-muted: #718096;
Expand Down
12 changes: 6 additions & 6 deletions packages/oer-finder-plugin/src/oer-card/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@ export const styles = css`
}

.card {
border: 1px solid rgba(0, 0, 0, 0.1);
border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
border-radius: 8px;
overflow: hidden;
background: var(--background-card);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
box-shadow: 0 2px 4px var(--shadow-color, rgba(0, 0, 0, 0.05));
transition:
box-shadow 0.3s ease,
transform 0.3s ease;
Expand All @@ -22,15 +22,15 @@ export const styles = css`
}

.card:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
box-shadow: 0 8px 16px var(--shadow-color-hover, rgba(0, 0, 0, 0.15));
transform: translateY(-2px);
}

.thumbnail-container {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #f5f5f5;
background: var(--background-muted, #f5f5f5);
position: relative;
cursor: pointer;
}
Expand Down Expand Up @@ -119,7 +119,7 @@ export const styles = css`
}

.keyword {
background: rgba(0, 0, 0, 0.05);
background: var(--button-secondary-bg, rgba(0, 0, 0, 0.05));
padding: 4px 8px;
border-radius: 4px;
font-size: 11px;
Expand All @@ -132,7 +132,7 @@ export const styles = css`
line-height: 1.4;
margin-top: 4px;
padding-top: 8px;
border-top: 1px solid rgba(0, 0, 0, 0.05);
border-top: 1px solid var(--border-color-subtle, rgba(0, 0, 0, 0.05));
}

.no-data {
Expand Down
4 changes: 2 additions & 2 deletions packages/oer-finder-plugin/src/oer-list/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export const styles = css`
display: inline-block;
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border: 4px solid var(--spinner-track-color, #f3f3f3);
border-top: 4px solid var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
Expand All @@ -72,7 +72,7 @@ export const styles = css`
.error {
text-align: center;
padding: 48px 24px;
color: #d32f2f;
color: var(--error-color, #d32f2f);
}

.error-icon {
Expand Down
20 changes: 10 additions & 10 deletions packages/oer-finder-plugin/src/oer-search/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export const styles = css`

.search-container {
background: var(--background-form);
border: 1px solid rgba(0, 0, 0, 0.1);
border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
border-radius: 8px;
padding: 24px;
margin-bottom: 24px;
Expand Down Expand Up @@ -65,13 +65,13 @@ export const styles = css`
select {
width: 100%;
padding: 10px 12px;
border: 1px solid rgba(0, 0, 0, 0.15);
border: 1px solid var(--input-border-color, rgba(0, 0, 0, 0.15));
border-radius: 6px;
font-size: 14px;
font-family: inherit;
transition: border-color 0.2s ease;
box-sizing: border-box;
background: white;
background: var(--background-input, white);
color: var(--text-primary);
}

Expand Down Expand Up @@ -114,13 +114,13 @@ export const styles = css`
}

.clear-button {
background: rgba(0, 0, 0, 0.05);
background: var(--button-secondary-bg, rgba(0, 0, 0, 0.05));
color: var(--text-secondary);
flex: 0 0 auto;
}

.clear-button:hover {
background: rgba(0, 0, 0, 0.1);
background: var(--button-secondary-hover-bg, rgba(0, 0, 0, 0.1));
}

.pagination {
Expand All @@ -129,7 +129,7 @@ export const styles = css`
align-items: center;
padding: 16px;
background: var(--background-form);
border: 1px solid rgba(0, 0, 0, 0.1);
border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
border-radius: 8px;
margin-top: 24px;
gap: 12px;
Expand All @@ -155,19 +155,19 @@ export const styles = css`

.page-button {
padding: 8px 12px;
background: rgba(0, 0, 0, 0.05);
background: var(--button-secondary-bg, rgba(0, 0, 0, 0.05));
color: var(--text-primary);
min-width: 40px;
flex-shrink: 0;
}

.page-button:hover:not(:disabled) {
background: rgba(0, 0, 0, 0.1);
background: var(--button-secondary-hover-bg, rgba(0, 0, 0, 0.1));
}

.page-button:disabled {
background: rgba(0, 0, 0, 0.05);
color: rgba(0, 0, 0, 0.3);
background: var(--button-secondary-bg, rgba(0, 0, 0, 0.05));
color: var(--text-disabled, rgba(0, 0, 0, 0.3));
cursor: not-allowed;
}

Expand Down
10 changes: 5 additions & 5 deletions packages/oer-finder-plugin/src/pagination/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export const styles = css`
align-items: center;
padding: 16px;
background: var(--background-form);
border: 1px solid rgba(0, 0, 0, 0.1);
border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
border-radius: 8px;
gap: 12px;
flex-wrap: wrap;
Expand All @@ -37,7 +37,7 @@ export const styles = css`

.page-button {
padding: 8px 12px;
background: rgba(0, 0, 0, 0.05);
background: var(--button-secondary-bg, rgba(0, 0, 0, 0.05));
color: var(--text-primary);
min-width: 40px;
flex-shrink: 0;
Expand All @@ -51,12 +51,12 @@ export const styles = css`
}

.page-button:hover:not(:disabled) {
background: rgba(0, 0, 0, 0.1);
background: var(--button-secondary-hover-bg, rgba(0, 0, 0, 0.1));
}

.page-button:disabled {
background: rgba(0, 0, 0, 0.05);
color: rgba(0, 0, 0, 0.3);
background: var(--button-secondary-bg, rgba(0, 0, 0, 0.05));
color: var(--text-disabled, rgba(0, 0, 0, 0.3));
cursor: not-allowed;
}

Expand Down