@absolutejs/absolute 0.19.0-beta.177 → 0.19.0-beta.179
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.
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { Metadata, RobotsDirective } from '../../../types/metadata';
|
|
3
|
+
|
|
4
|
+
let {
|
|
5
|
+
title = 'AbsoluteJS',
|
|
6
|
+
description = 'A page created using AbsoluteJS',
|
|
7
|
+
icon = '/assets/ico/favicon.ico',
|
|
8
|
+
font,
|
|
9
|
+
cssPath,
|
|
10
|
+
canonical,
|
|
11
|
+
openGraph,
|
|
12
|
+
twitter,
|
|
13
|
+
robots,
|
|
14
|
+
meta
|
|
15
|
+
}: Metadata = $props();
|
|
16
|
+
|
|
17
|
+
const robotsContent = (r: RobotsDirective) => {
|
|
18
|
+
const directives: string[] = [];
|
|
19
|
+
if (r.index === false) directives.push('noindex');
|
|
20
|
+
if (r.index === true) directives.push('index');
|
|
21
|
+
if (r.follow === false) directives.push('nofollow');
|
|
22
|
+
if (r.follow === true) directives.push('follow');
|
|
23
|
+
if (r.noarchive) directives.push('noarchive');
|
|
24
|
+
if (r.nosnippet) directives.push('nosnippet');
|
|
25
|
+
if (r.noimageindex) directives.push('noimageindex');
|
|
26
|
+
if (r.maxSnippet !== undefined)
|
|
27
|
+
directives.push(`max-snippet:${r.maxSnippet}`);
|
|
28
|
+
if (r.maxImagePreview)
|
|
29
|
+
directives.push(`max-image-preview:${r.maxImagePreview}`);
|
|
30
|
+
if (r.maxVideoPreview !== undefined)
|
|
31
|
+
directives.push(`max-video-preview:${r.maxVideoPreview}`);
|
|
32
|
+
return directives.join(', ');
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
const cssPaths = $derived(
|
|
36
|
+
cssPath ? (Array.isArray(cssPath) ? cssPath : [cssPath]) : []
|
|
37
|
+
);
|
|
38
|
+
</script>
|
|
39
|
+
|
|
40
|
+
<svelte:head>
|
|
41
|
+
<meta charset="utf-8" />
|
|
42
|
+
<title>{title}</title>
|
|
43
|
+
<meta name="description" content={description} />
|
|
44
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
45
|
+
<link rel="icon" href={icon} />
|
|
46
|
+
|
|
47
|
+
{#if canonical}
|
|
48
|
+
<link rel="canonical" href={canonical} />
|
|
49
|
+
{/if}
|
|
50
|
+
|
|
51
|
+
{#if openGraph}
|
|
52
|
+
<meta property="og:title" content={openGraph.title ?? title} />
|
|
53
|
+
<meta
|
|
54
|
+
property="og:description"
|
|
55
|
+
content={openGraph.description ?? description}
|
|
56
|
+
/>
|
|
57
|
+
{#if openGraph.url}
|
|
58
|
+
<meta property="og:url" content={openGraph.url} />
|
|
59
|
+
{/if}
|
|
60
|
+
{#if openGraph.image}
|
|
61
|
+
<meta property="og:image" content={openGraph.image} />
|
|
62
|
+
{/if}
|
|
63
|
+
{#if openGraph.imageAlt}
|
|
64
|
+
<meta property="og:image:alt" content={openGraph.imageAlt} />
|
|
65
|
+
{/if}
|
|
66
|
+
{#if openGraph.imageWidth}
|
|
67
|
+
<meta
|
|
68
|
+
property="og:image:width"
|
|
69
|
+
content={String(openGraph.imageWidth)}
|
|
70
|
+
/>
|
|
71
|
+
{/if}
|
|
72
|
+
{#if openGraph.imageHeight}
|
|
73
|
+
<meta
|
|
74
|
+
property="og:image:height"
|
|
75
|
+
content={String(openGraph.imageHeight)}
|
|
76
|
+
/>
|
|
77
|
+
{/if}
|
|
78
|
+
{#if openGraph.type}
|
|
79
|
+
<meta property="og:type" content={openGraph.type} />
|
|
80
|
+
{/if}
|
|
81
|
+
{#if openGraph.siteName}
|
|
82
|
+
<meta property="og:site_name" content={openGraph.siteName} />
|
|
83
|
+
{/if}
|
|
84
|
+
{#if openGraph.locale}
|
|
85
|
+
<meta property="og:locale" content={openGraph.locale} />
|
|
86
|
+
{/if}
|
|
87
|
+
{/if}
|
|
88
|
+
|
|
89
|
+
{#if twitter}
|
|
90
|
+
{#if twitter.card}
|
|
91
|
+
<meta name="twitter:card" content={twitter.card} />
|
|
92
|
+
{/if}
|
|
93
|
+
<meta name="twitter:title" content={twitter.title ?? title} />
|
|
94
|
+
<meta
|
|
95
|
+
name="twitter:description"
|
|
96
|
+
content={twitter.description ?? description}
|
|
97
|
+
/>
|
|
98
|
+
{#if twitter.image}
|
|
99
|
+
<meta name="twitter:image" content={twitter.image} />
|
|
100
|
+
{/if}
|
|
101
|
+
{#if twitter.imageAlt}
|
|
102
|
+
<meta name="twitter:image:alt" content={twitter.imageAlt} />
|
|
103
|
+
{/if}
|
|
104
|
+
{#if twitter.site}
|
|
105
|
+
<meta name="twitter:site" content={twitter.site} />
|
|
106
|
+
{/if}
|
|
107
|
+
{#if twitter.creator}
|
|
108
|
+
<meta name="twitter:creator" content={twitter.creator} />
|
|
109
|
+
{/if}
|
|
110
|
+
{/if}
|
|
111
|
+
|
|
112
|
+
{#if robots}
|
|
113
|
+
{@const content = robotsContent(robots)}
|
|
114
|
+
{#if content}
|
|
115
|
+
<meta name="robots" {content} />
|
|
116
|
+
{/if}
|
|
117
|
+
{/if}
|
|
118
|
+
|
|
119
|
+
{#if meta}
|
|
120
|
+
{#each meta as tag}
|
|
121
|
+
{#if tag.property}
|
|
122
|
+
<meta property={tag.property} content={tag.content} />
|
|
123
|
+
{:else if tag.httpEquiv}
|
|
124
|
+
<meta http-equiv={tag.httpEquiv} content={tag.content} />
|
|
125
|
+
{:else if tag.name}
|
|
126
|
+
<meta name={tag.name} content={tag.content} />
|
|
127
|
+
{/if}
|
|
128
|
+
{/each}
|
|
129
|
+
{/if}
|
|
130
|
+
|
|
131
|
+
{#if font}
|
|
132
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
133
|
+
<link
|
|
134
|
+
rel="preconnect"
|
|
135
|
+
href="https://fonts.gstatic.com"
|
|
136
|
+
crossOrigin="anonymous"
|
|
137
|
+
/>
|
|
138
|
+
<link
|
|
139
|
+
href={`https://fonts.googleapis.com/css2?family=${font}:wght@100..900&display=swap`}
|
|
140
|
+
rel="stylesheet"
|
|
141
|
+
/>
|
|
142
|
+
{/if}
|
|
143
|
+
|
|
144
|
+
{#each cssPaths as path}
|
|
145
|
+
<link rel="stylesheet" href={path} type="text/css" />
|
|
146
|
+
{/each}
|
|
147
|
+
</svelte:head>
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { ImageProps } from '../../../types/image';
|
|
3
|
+
import {
|
|
4
|
+
DEFAULT_QUALITY,
|
|
5
|
+
buildOptimizedUrl,
|
|
6
|
+
generateBlurSvg,
|
|
7
|
+
generateSrcSet
|
|
8
|
+
} from '../../utils/imageProcessing';
|
|
9
|
+
|
|
10
|
+
let {
|
|
11
|
+
src,
|
|
12
|
+
alt,
|
|
13
|
+
width,
|
|
14
|
+
height,
|
|
15
|
+
fill,
|
|
16
|
+
quality = DEFAULT_QUALITY,
|
|
17
|
+
sizes,
|
|
18
|
+
loader,
|
|
19
|
+
unoptimized,
|
|
20
|
+
loading,
|
|
21
|
+
priority,
|
|
22
|
+
placeholder,
|
|
23
|
+
blurDataURL,
|
|
24
|
+
className,
|
|
25
|
+
style,
|
|
26
|
+
onLoad,
|
|
27
|
+
onError,
|
|
28
|
+
crossOrigin,
|
|
29
|
+
referrerPolicy,
|
|
30
|
+
fetchPriority,
|
|
31
|
+
overrideSrc
|
|
32
|
+
}: ImageProps = $props();
|
|
33
|
+
|
|
34
|
+
const resolvedSrc = $derived.by(() => {
|
|
35
|
+
if (overrideSrc) return overrideSrc;
|
|
36
|
+
if (unoptimized) return src;
|
|
37
|
+
if (loader) return loader({ src, width: width ?? 0, quality });
|
|
38
|
+
if (!width) return buildOptimizedUrl(src, 0, quality);
|
|
39
|
+
return buildOptimizedUrl(src, width, quality);
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
const srcSet = $derived(
|
|
43
|
+
unoptimized
|
|
44
|
+
? undefined
|
|
45
|
+
: generateSrcSet(src, width, sizes, undefined, loader ?? undefined)
|
|
46
|
+
);
|
|
47
|
+
|
|
48
|
+
const resolvedSizes = $derived(sizes ?? (fill ? '100vw' : undefined));
|
|
49
|
+
|
|
50
|
+
const resolvedLoading = $derived(priority ? 'eager' : (loading ?? 'lazy'));
|
|
51
|
+
|
|
52
|
+
const resolvedFetchPriority = $derived(priority ? 'high' : fetchPriority);
|
|
53
|
+
|
|
54
|
+
const hasBlur = $derived(
|
|
55
|
+
placeholder === 'blur' ||
|
|
56
|
+
(typeof placeholder === 'string' &&
|
|
57
|
+
placeholder !== 'empty' &&
|
|
58
|
+
placeholder.startsWith('data:'))
|
|
59
|
+
);
|
|
60
|
+
|
|
61
|
+
const blurBackground = $derived.by(() => {
|
|
62
|
+
if (!hasBlur) return undefined;
|
|
63
|
+
if (
|
|
64
|
+
typeof placeholder === 'string' &&
|
|
65
|
+
placeholder !== 'blur' &&
|
|
66
|
+
placeholder.startsWith('data:')
|
|
67
|
+
) {
|
|
68
|
+
return generateBlurSvg(placeholder);
|
|
69
|
+
}
|
|
70
|
+
if (blurDataURL) return generateBlurSvg(blurDataURL);
|
|
71
|
+
return undefined;
|
|
72
|
+
});
|
|
73
|
+
|
|
74
|
+
const imgStyle = $derived.by(() => {
|
|
75
|
+
const base: Record<string, string | number> = {
|
|
76
|
+
...(style ?? {}),
|
|
77
|
+
color: 'transparent'
|
|
78
|
+
};
|
|
79
|
+
if (blurBackground) {
|
|
80
|
+
base.backgroundImage = blurBackground;
|
|
81
|
+
base.backgroundSize = 'cover';
|
|
82
|
+
base.backgroundPosition = 'center';
|
|
83
|
+
base.backgroundRepeat = 'no-repeat';
|
|
84
|
+
}
|
|
85
|
+
if (fill) {
|
|
86
|
+
base.position = 'absolute';
|
|
87
|
+
base.height = '100%';
|
|
88
|
+
base.width = '100%';
|
|
89
|
+
base.inset = 0;
|
|
90
|
+
base.objectFit = 'cover';
|
|
91
|
+
}
|
|
92
|
+
return Object.entries(base)
|
|
93
|
+
.map(([k, v]) => `${k.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)}:${v}`)
|
|
94
|
+
.join(';');
|
|
95
|
+
});
|
|
96
|
+
|
|
97
|
+
const handleLoad = (e: Event) => {
|
|
98
|
+
if (blurBackground) {
|
|
99
|
+
(e.target as HTMLImageElement).style.backgroundImage = 'none';
|
|
100
|
+
}
|
|
101
|
+
if (onLoad) (onLoad as (event: Event) => void)(e);
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
const handleError = (e: Event) => {
|
|
105
|
+
if (onError) (onError as (event: Event) => void)(e);
|
|
106
|
+
};
|
|
107
|
+
</script>
|
|
108
|
+
|
|
109
|
+
{#if priority}
|
|
110
|
+
<svelte:head>
|
|
111
|
+
<link
|
|
112
|
+
rel="preload"
|
|
113
|
+
as="image"
|
|
114
|
+
href={resolvedSrc}
|
|
115
|
+
imagesrcset={srcSet}
|
|
116
|
+
imagesizes={resolvedSizes}
|
|
117
|
+
crossorigin={crossOrigin}
|
|
118
|
+
/>
|
|
119
|
+
</svelte:head>
|
|
120
|
+
{/if}
|
|
121
|
+
|
|
122
|
+
{#if fill}
|
|
123
|
+
<span style="position:relative;overflow:hidden;display:block;width:100%;height:100%">
|
|
124
|
+
<img
|
|
125
|
+
{alt}
|
|
126
|
+
src={resolvedSrc}
|
|
127
|
+
srcset={srcSet}
|
|
128
|
+
sizes={resolvedSizes}
|
|
129
|
+
loading={resolvedLoading}
|
|
130
|
+
class={className}
|
|
131
|
+
style={imgStyle}
|
|
132
|
+
crossorigin={crossOrigin}
|
|
133
|
+
referrerpolicy={referrerPolicy}
|
|
134
|
+
fetchpriority={resolvedFetchPriority}
|
|
135
|
+
decoding="async"
|
|
136
|
+
onload={handleLoad}
|
|
137
|
+
onerror={handleError}
|
|
138
|
+
/>
|
|
139
|
+
</span>
|
|
140
|
+
{:else}
|
|
141
|
+
<img
|
|
142
|
+
{alt}
|
|
143
|
+
src={resolvedSrc}
|
|
144
|
+
srcset={srcSet}
|
|
145
|
+
sizes={resolvedSizes}
|
|
146
|
+
{width}
|
|
147
|
+
{height}
|
|
148
|
+
loading={resolvedLoading}
|
|
149
|
+
class={className}
|
|
150
|
+
style={imgStyle}
|
|
151
|
+
crossorigin={crossOrigin}
|
|
152
|
+
referrerpolicy={referrerPolicy}
|
|
153
|
+
fetchpriority={resolvedFetchPriority}
|
|
154
|
+
decoding="async"
|
|
155
|
+
onload={handleLoad}
|
|
156
|
+
onerror={handleError}
|
|
157
|
+
/>
|
|
158
|
+
{/if}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { JsonLdSchema, WithContext } from '../../../types/jsonLd';
|
|
3
|
+
|
|
4
|
+
let { schema }: { schema: JsonLdSchema | JsonLdSchema[] } = $props();
|
|
5
|
+
|
|
6
|
+
const data = $derived<
|
|
7
|
+
WithContext<JsonLdSchema> | WithContext<JsonLdSchema>[]
|
|
8
|
+
>(
|
|
9
|
+
Array.isArray(schema)
|
|
10
|
+
? schema.map((s) => ({
|
|
11
|
+
'@context': 'https://schema.org' as const,
|
|
12
|
+
...s
|
|
13
|
+
}))
|
|
14
|
+
: { '@context': 'https://schema.org' as const, ...schema }
|
|
15
|
+
);
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<svelte:head>
|
|
19
|
+
{@html `<script type="application/ld+json">${JSON.stringify(data)}</script>`}
|
|
20
|
+
</svelte:head>
|
package/package.json
CHANGED
|
@@ -78,13 +78,22 @@
|
|
|
78
78
|
"types": "./dist/src/svelte/index.d.ts"
|
|
79
79
|
},
|
|
80
80
|
"./svelte/components/Head.svelte": {
|
|
81
|
-
"import": "./
|
|
81
|
+
"import": "./dist/svelte/components/Head.svelte"
|
|
82
|
+
},
|
|
83
|
+
"./svelte/components/Head.js": {
|
|
84
|
+
"import": "./dist/svelte/components/Head.svelte"
|
|
82
85
|
},
|
|
83
86
|
"./svelte/components/Image.svelte": {
|
|
84
|
-
"import": "./
|
|
87
|
+
"import": "./dist/svelte/components/Image.svelte"
|
|
88
|
+
},
|
|
89
|
+
"./svelte/components/Image.js": {
|
|
90
|
+
"import": "./dist/svelte/components/Image.svelte"
|
|
85
91
|
},
|
|
86
92
|
"./svelte/components/JsonLd.svelte": {
|
|
87
|
-
"import": "./
|
|
93
|
+
"import": "./dist/svelte/components/JsonLd.svelte"
|
|
94
|
+
},
|
|
95
|
+
"./svelte/components/JsonLd.js": {
|
|
96
|
+
"import": "./dist/svelte/components/JsonLd.svelte"
|
|
88
97
|
},
|
|
89
98
|
"./vue": {
|
|
90
99
|
"import": "./dist/vue/index.js",
|
|
@@ -175,7 +184,7 @@
|
|
|
175
184
|
"url": "git+https://github.com/absolutejs/absolutejs.git"
|
|
176
185
|
},
|
|
177
186
|
"scripts": {
|
|
178
|
-
"build": "rm -rf dist && bun build src/index.ts src/build.ts src/angular/index.ts src/angular/components/index.ts src/react/index.ts src/react/hooks/index.ts src/svelte/index.ts src/vue/index.ts src/vue/components/index.ts --outdir dist --sourcemap --target=bun --external react --external react-dom --external vue --external @vue/compiler-sfc --external vue/server-renderer --external svelte --external svelte/compiler --external svelte/server --external elysia --external @elysiajs/static --external @angular/compiler-cli --external @angular/core --external @angular/common --external @angular/platform-browser --external @angular/platform-server --external @angular/ssr --external zone.js --external debug --external sharp --external @absolutejs/native-linux-x64 --external @absolutejs/native-linux-arm64 --external @absolutejs/native-darwin-x64 --external @absolutejs/native-darwin-arm64 && bun build src/cli/index.ts --outfile dist/cli/index.js --target=bun && tsc --emitDeclarationOnly --project tsconfig.build.json && mkdir -p dist/dev && cp -r src/dev/client dist/dev/client",
|
|
187
|
+
"build": "rm -rf dist && bun build src/index.ts src/build.ts src/angular/index.ts src/angular/components/index.ts src/react/index.ts src/react/hooks/index.ts src/svelte/index.ts src/vue/index.ts src/vue/components/index.ts --outdir dist --sourcemap --target=bun --external react --external react-dom --external vue --external @vue/compiler-sfc --external vue/server-renderer --external svelte --external svelte/compiler --external svelte/server --external elysia --external @elysiajs/static --external @angular/compiler-cli --external @angular/core --external @angular/common --external @angular/platform-browser --external @angular/platform-server --external @angular/ssr --external zone.js --external debug --external sharp --external @absolutejs/native-linux-x64 --external @absolutejs/native-linux-arm64 --external @absolutejs/native-darwin-x64 --external @absolutejs/native-darwin-arm64 && bun build src/cli/index.ts --outfile dist/cli/index.js --target=bun && tsc --emitDeclarationOnly --project tsconfig.build.json && mkdir -p dist/dev && cp -r src/dev/client dist/dev/client && mkdir -p dist/svelte/components && cp src/svelte/components/*.svelte dist/svelte/components/",
|
|
179
188
|
"build:native": "./native/build.sh",
|
|
180
189
|
"db:push": "drizzle-kit push",
|
|
181
190
|
"db:studio": "drizzle-kit studio",
|
|
@@ -189,5 +198,5 @@
|
|
|
189
198
|
"typecheck": "bun run vue-tsc --noEmit"
|
|
190
199
|
},
|
|
191
200
|
"types": "./dist/src/index.d.ts",
|
|
192
|
-
"version": "0.19.0-beta.
|
|
201
|
+
"version": "0.19.0-beta.179"
|
|
193
202
|
}
|