@ewanc26/ui 0.1.7 → 0.1.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -54
- package/dist/helper/metaTags.d.ts +12 -0
- package/dist/helper/metaTags.d.ts.map +1 -0
- package/dist/helper/metaTags.js +43 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/package.json +11 -11
- package/src/lib/helper/metaTags.ts +55 -0
- package/src/lib/index.ts +1 -0
package/README.md
CHANGED
|
@@ -1,64 +1,12 @@
|
|
|
1
1
|
# @ewanc26/ui
|
|
2
2
|
|
|
3
|
-
Svelte UI component library
|
|
4
|
-
|
|
5
|
-
## Installation
|
|
3
|
+
Svelte UI component library — layout components, cards, UI primitives, SEO helpers, stores, and a multi-theme configuration system.
|
|
6
4
|
|
|
7
5
|
```bash
|
|
8
6
|
pnpm add @ewanc26/ui
|
|
9
7
|
```
|
|
10
8
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
## What's Exported
|
|
14
|
-
|
|
15
|
-
### Components
|
|
16
|
-
|
|
17
|
-
| Group | Components |
|
|
18
|
-
|-------|------------|
|
|
19
|
-
| Layout toggles | `ThemeToggle`, `WolfToggle` |
|
|
20
|
-
| Layout main | `DynamicLinks`, `ScrollToTop` |
|
|
21
|
-
| Cards | `ProfileCard`, `PostCard`, `BlueskyPostCard`, `LinkCard`, `MusicStatusCard`, `KibunStatusCard`, `TangledRepoCard` |
|
|
22
|
-
| UI primitives | `Card`, `InternalCard`, `Dropdown`, `Pagination`, `SearchBar`, `Tabs`, `PostsGroupedView`, `DocumentCard`, `BlogPostCard` |
|
|
23
|
-
| SEO | `MetaTags` |
|
|
24
|
-
|
|
25
|
-
### Stores
|
|
26
|
-
|
|
27
|
-
| Store | Type | Description |
|
|
28
|
-
|-------|------|-------------|
|
|
29
|
-
| `wolfMode` | `Writable<boolean>` | Wolf mode text transformation |
|
|
30
|
-
| `colorTheme` | `Writable<ColorTheme>` | Active colour theme |
|
|
31
|
-
| `colorThemeDropdownOpen` | `Writable<boolean>` | Theme picker open state |
|
|
32
|
-
| `happyMacStore` | `Writable<boolean>` | Happy Mac easter egg |
|
|
33
|
-
|
|
34
|
-
### Theme Configuration
|
|
35
|
-
|
|
36
|
-
12 themes across four categories (neutral, warm, cool, vibrant) using OKLCH colour values. Default: `slate`.
|
|
37
|
-
|
|
38
|
-
```typescript
|
|
39
|
-
import { THEMES, DEFAULT_THEME, getTheme, getThemesByCategory, CATEGORY_LABELS } from '@ewanc26/ui';
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
### Helpers
|
|
43
|
-
|
|
44
|
-
```typescript
|
|
45
|
-
import { getPostBadges, getBadgeClasses } from '@ewanc26/ui';
|
|
46
|
-
import { filterPosts, groupPostsByDate, getSortedMonths, getSortedYears, getAllTags } from '@ewanc26/ui';
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
### Types
|
|
50
|
-
|
|
51
|
-
```typescript
|
|
52
|
-
import type { SiteMetadata, NavItem, ColorTheme, ThemeDefinition, PostBadge, MonthData, GroupedPosts } from '@ewanc26/ui';
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
## Build
|
|
56
|
-
|
|
57
|
-
```bash
|
|
58
|
-
pnpm build # svelte-package
|
|
59
|
-
pnpm dev # svelte-package --watch
|
|
60
|
-
pnpm check # svelte-check
|
|
61
|
-
```
|
|
9
|
+
Full documentation at **[docs.ewancroft.uk](https://docs.ewancroft.uk/projects/ui)**.
|
|
62
10
|
|
|
63
11
|
## Licence
|
|
64
12
|
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { SiteMetadata } from '../types/index.js';
|
|
2
|
+
/**
|
|
3
|
+
* Generates an array of meta tag objects for use in a Svelte <svelte:head>.
|
|
4
|
+
* Falls back to site defaults if a property is missing from `meta`.
|
|
5
|
+
*/
|
|
6
|
+
export declare function generateMetaTags(meta: SiteMetadata, defaults: SiteMetadata): Array<Record<string, string>>;
|
|
7
|
+
/**
|
|
8
|
+
* Merges a defaults SiteMetadata object with optional overrides.
|
|
9
|
+
* Use this to build per-page metadata from site-wide defaults.
|
|
10
|
+
*/
|
|
11
|
+
export declare function createSiteMeta(defaults: SiteMetadata, overrides?: Partial<SiteMetadata>): SiteMetadata;
|
|
12
|
+
//# sourceMappingURL=metaTags.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"metaTags.d.ts","sourceRoot":"","sources":["../../src/lib/helper/metaTags.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD;;;GAGG;AACH,wBAAgB,gBAAgB,CAC/B,IAAI,EAAE,YAAY,EAClB,QAAQ,EAAE,YAAY,GACpB,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAkC/B;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAC7B,QAAQ,EAAE,YAAY,EACtB,SAAS,GAAE,OAAO,CAAC,YAAY,CAAM,GACnC,YAAY,CAEd"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Generates an array of meta tag objects for use in a Svelte <svelte:head>.
|
|
3
|
+
* Falls back to site defaults if a property is missing from `meta`.
|
|
4
|
+
*/
|
|
5
|
+
export function generateMetaTags(meta, defaults) {
|
|
6
|
+
const finalMeta = {
|
|
7
|
+
title: meta.title || defaults.title,
|
|
8
|
+
description: meta.description || defaults.description,
|
|
9
|
+
keywords: meta.keywords || defaults.keywords,
|
|
10
|
+
url: meta.url || defaults.url,
|
|
11
|
+
image: meta.image || defaults.image,
|
|
12
|
+
imageWidth: meta.imageWidth || defaults.imageWidth,
|
|
13
|
+
imageHeight: meta.imageHeight || defaults.imageHeight
|
|
14
|
+
};
|
|
15
|
+
return [
|
|
16
|
+
{ name: 'description', content: finalMeta.description },
|
|
17
|
+
{ name: 'keywords', content: finalMeta.keywords },
|
|
18
|
+
{ property: 'og:type', content: 'website' },
|
|
19
|
+
{ property: 'og:url', content: finalMeta.url },
|
|
20
|
+
{ property: 'og:title', content: finalMeta.title },
|
|
21
|
+
{ property: 'og:description', content: finalMeta.description },
|
|
22
|
+
{ property: 'og:site_name', content: defaults.title },
|
|
23
|
+
{ property: 'og:image', content: finalMeta.image },
|
|
24
|
+
...(finalMeta.imageWidth
|
|
25
|
+
? [{ property: 'og:image:width', content: finalMeta.imageWidth.toString() }]
|
|
26
|
+
: []),
|
|
27
|
+
...(finalMeta.imageHeight
|
|
28
|
+
? [{ property: 'og:image:height', content: finalMeta.imageHeight.toString() }]
|
|
29
|
+
: []),
|
|
30
|
+
{ name: 'twitter:card', content: 'summary_large_image' },
|
|
31
|
+
{ name: 'twitter:url', content: finalMeta.url },
|
|
32
|
+
{ name: 'twitter:title', content: finalMeta.title },
|
|
33
|
+
{ name: 'twitter:description', content: finalMeta.description },
|
|
34
|
+
{ name: 'twitter:image', content: finalMeta.image }
|
|
35
|
+
];
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* Merges a defaults SiteMetadata object with optional overrides.
|
|
39
|
+
* Use this to build per-page metadata from site-wide defaults.
|
|
40
|
+
*/
|
|
41
|
+
export function createSiteMeta(defaults, overrides = {}) {
|
|
42
|
+
return { ...defaults, ...overrides };
|
|
43
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ export { filterPosts, groupPostsByDate, getSortedMonths, getSortedYears, getAllT
|
|
|
7
7
|
export type { MonthData, GroupedPosts } from './helper/posts.js';
|
|
8
8
|
export { getPostBadges, getBadgeClasses } from './helper/badges.js';
|
|
9
9
|
export type { PostBadge } from './helper/badges.js';
|
|
10
|
+
export { generateMetaTags, createSiteMeta } from './helper/metaTags.js';
|
|
10
11
|
export { default as ThemeToggle } from './components/layout/ThemeToggle.svelte';
|
|
11
12
|
export { default as WolfToggle } from './components/layout/WolfToggle.svelte';
|
|
12
13
|
export { DynamicLinks, ScrollToTop, TangledRepos } from './components/layout/main/index.js';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,sBAAsB,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAChG,YAAY,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,eAAe,EAAE,mBAAmB,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAClH,YAAY,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAGjE,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAG9D,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,eAAe,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/G,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACpE,YAAY,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,sBAAsB,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAChG,YAAY,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,eAAe,EAAE,mBAAmB,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAClH,YAAY,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAGjE,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAG9D,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,eAAe,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/G,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACpE,YAAY,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGxE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAG9E,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAG5F,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AAG7J,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGrD,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,EAAE,gBAAgB,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -5,6 +5,7 @@ export { THEMES, DEFAULT_THEME, CATEGORY_LABELS, getThemesByCategory, getTheme }
|
|
|
5
5
|
// ─── Helper ───────────────────────────────────────────────────────────────────
|
|
6
6
|
export { filterPosts, groupPostsByDate, getSortedMonths, getSortedYears, getAllTags } from './helper/posts.js';
|
|
7
7
|
export { getPostBadges, getBadgeClasses } from './helper/badges.js';
|
|
8
|
+
export { generateMetaTags, createSiteMeta } from './helper/metaTags.js';
|
|
8
9
|
// ─── Layout toggles ───────────────────────────────────────────────────────────
|
|
9
10
|
export { default as ThemeToggle } from './components/layout/ThemeToggle.svelte';
|
|
10
11
|
export { default as WolfToggle } from './components/layout/WolfToggle.svelte';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ewanc26/ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.9",
|
|
4
4
|
"description": "Svelte UI component library extracted from ewancroft.uk — pluggable layout, UI primitives, stores, and SEO components.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -24,28 +24,28 @@
|
|
|
24
24
|
"dist",
|
|
25
25
|
"src"
|
|
26
26
|
],
|
|
27
|
-
"scripts": {
|
|
28
|
-
"build": "svelte-package -i src/lib -o dist",
|
|
29
|
-
"dev": "svelte-package -i src/lib -o dist --watch",
|
|
30
|
-
"check": "svelte-check --tsconfig ./tsconfig.json"
|
|
31
|
-
},
|
|
32
27
|
"peerDependencies": {
|
|
33
28
|
"@sveltejs/kit": ">=2.8.3",
|
|
34
29
|
"svelte": ">=5.0.0",
|
|
35
30
|
"tailwindcss": ">=4.0.0"
|
|
36
31
|
},
|
|
37
32
|
"dependencies": {
|
|
38
|
-
"@lucide/svelte": "^0.
|
|
33
|
+
"@lucide/svelte": "^0.577.0"
|
|
39
34
|
},
|
|
40
35
|
"optionalDependencies": {
|
|
41
36
|
"@ewanc26/atproto": ">=0.2.2"
|
|
42
37
|
},
|
|
43
38
|
"devDependencies": {
|
|
44
|
-
"@sveltejs/kit": "^2.
|
|
39
|
+
"@sveltejs/kit": "^2.55.0",
|
|
45
40
|
"@sveltejs/package": "^2.3.10",
|
|
46
41
|
"@sveltejs/vite-plugin-svelte": "^6.2.1",
|
|
47
|
-
"svelte": "^5.
|
|
48
|
-
"svelte-check": "^4.
|
|
42
|
+
"svelte": "^5.53.11",
|
|
43
|
+
"svelte-check": "^4.4.5",
|
|
49
44
|
"typescript": "^5.9.3"
|
|
45
|
+
},
|
|
46
|
+
"scripts": {
|
|
47
|
+
"build": "svelte-package -i src/lib -o dist",
|
|
48
|
+
"dev": "svelte-package -i src/lib -o dist --watch",
|
|
49
|
+
"check": "svelte-check --tsconfig ./tsconfig.json"
|
|
50
50
|
}
|
|
51
|
-
}
|
|
51
|
+
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import type { SiteMetadata } from '../types/index.js';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Generates an array of meta tag objects for use in a Svelte <svelte:head>.
|
|
5
|
+
* Falls back to site defaults if a property is missing from `meta`.
|
|
6
|
+
*/
|
|
7
|
+
export function generateMetaTags(
|
|
8
|
+
meta: SiteMetadata,
|
|
9
|
+
defaults: SiteMetadata
|
|
10
|
+
): Array<Record<string, string>> {
|
|
11
|
+
const finalMeta: SiteMetadata = {
|
|
12
|
+
title: meta.title || defaults.title,
|
|
13
|
+
description: meta.description || defaults.description,
|
|
14
|
+
keywords: meta.keywords || defaults.keywords,
|
|
15
|
+
url: meta.url || defaults.url,
|
|
16
|
+
image: meta.image || defaults.image,
|
|
17
|
+
imageWidth: meta.imageWidth || defaults.imageWidth,
|
|
18
|
+
imageHeight: meta.imageHeight || defaults.imageHeight
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
return [
|
|
22
|
+
{ name: 'description', content: finalMeta.description },
|
|
23
|
+
{ name: 'keywords', content: finalMeta.keywords },
|
|
24
|
+
|
|
25
|
+
{ property: 'og:type', content: 'website' },
|
|
26
|
+
{ property: 'og:url', content: finalMeta.url },
|
|
27
|
+
{ property: 'og:title', content: finalMeta.title },
|
|
28
|
+
{ property: 'og:description', content: finalMeta.description },
|
|
29
|
+
{ property: 'og:site_name', content: defaults.title },
|
|
30
|
+
{ property: 'og:image', content: finalMeta.image },
|
|
31
|
+
...(finalMeta.imageWidth
|
|
32
|
+
? [{ property: 'og:image:width', content: finalMeta.imageWidth.toString() }]
|
|
33
|
+
: []),
|
|
34
|
+
...(finalMeta.imageHeight
|
|
35
|
+
? [{ property: 'og:image:height', content: finalMeta.imageHeight.toString() }]
|
|
36
|
+
: []),
|
|
37
|
+
|
|
38
|
+
{ name: 'twitter:card', content: 'summary_large_image' },
|
|
39
|
+
{ name: 'twitter:url', content: finalMeta.url },
|
|
40
|
+
{ name: 'twitter:title', content: finalMeta.title },
|
|
41
|
+
{ name: 'twitter:description', content: finalMeta.description },
|
|
42
|
+
{ name: 'twitter:image', content: finalMeta.image }
|
|
43
|
+
];
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* Merges a defaults SiteMetadata object with optional overrides.
|
|
48
|
+
* Use this to build per-page metadata from site-wide defaults.
|
|
49
|
+
*/
|
|
50
|
+
export function createSiteMeta(
|
|
51
|
+
defaults: SiteMetadata,
|
|
52
|
+
overrides: Partial<SiteMetadata> = {}
|
|
53
|
+
): SiteMetadata {
|
|
54
|
+
return { ...defaults, ...overrides };
|
|
55
|
+
}
|
package/src/lib/index.ts
CHANGED
|
@@ -14,6 +14,7 @@ export { filterPosts, groupPostsByDate, getSortedMonths, getSortedYears, getAllT
|
|
|
14
14
|
export type { MonthData, GroupedPosts } from './helper/posts.js';
|
|
15
15
|
export { getPostBadges, getBadgeClasses } from './helper/badges.js';
|
|
16
16
|
export type { PostBadge } from './helper/badges.js';
|
|
17
|
+
export { generateMetaTags, createSiteMeta } from './helper/metaTags.js';
|
|
17
18
|
|
|
18
19
|
// ─── Layout toggles ───────────────────────────────────────────────────────────
|
|
19
20
|
export { default as ThemeToggle } from './components/layout/ThemeToggle.svelte';
|