Skip to content

Commit 5f55b59

Browse files
matiasfhamatiasfha
committed
fix: patch update, add support for CldOgImage, remove non-released components. Updated documentation
1 parent 6c0c525 commit 5f55b59

File tree

10 files changed

+289
-36
lines changed

10 files changed

+289
-36
lines changed

‎docs/mdsvex.config.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { defineMDSveXConfig as defineConfig } from 'mdsvex';
2+
import path from 'node:path'
23

34
const config = defineConfig({
45
extensions: ['.svelte.md', '.md', '.svx'],
@@ -8,7 +9,8 @@ const config = defineConfig({
89
},
910

1011
remarkPlugins: [],
11-
rehypePlugins: []
12+
rehypePlugins: [],
13+
layout: './src/lib/components/Layout.svelte'
1214
});
1315

1416
export default config;

‎docs/src/lib/components/Layout.svelte

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,66 @@
11
<script>
2+
import { page } from '$app/stores';
3+
import { CldOgImage } from 'svelte-cloudinary';
24
export let title;
35
export let parent;
6+
const renderTitle = title.replace('/', ' ');
47
</script>
58

9+
<svelte:head>
10+
<title>{renderTitle} - Svelte Cloudinary</title>
11+
<meta name="og:title" content={`${renderTitle} - Svelte Cloudinary`} />
12+
<meta name="og:url" content={$page.url.href} />
13+
</svelte:head>
14+
15+
<CldOgImage
16+
src={`images/next-cloudinary-social-background`}
17+
title={renderTitle}
18+
twitterTitle={renderTitle}
19+
overlays={[
20+
{
21+
width: 2000,
22+
crop: 'fit',
23+
position: {
24+
y: -160
25+
},
26+
text: {
27+
color: 'white',
28+
fontFamily: 'Source Sans Pro',
29+
fontSize: 200,
30+
fontWeight: 'black',
31+
text: renderTitle,
32+
alignment: 'center',
33+
lineSpacing: -50
34+
}
35+
},
36+
{
37+
publicId: 'images/cloudinary-white',
38+
position: {
39+
x: -200,
40+
y: 180
41+
}
42+
},
43+
{
44+
publicId: 'images/nextjs-white',
45+
position: {
46+
x: 350,
47+
y: 180
48+
}
49+
},
50+
{
51+
position: {
52+
y: 320
53+
},
54+
text: {
55+
color: 'white',
56+
fontFamily: 'Source Sans Pro',
57+
fontSize: 60,
58+
fontWeight: 'bold',
59+
text: 'svelte-cloudinary.vercel.app'
60+
}
61+
}
62+
]}
63+
/>
664
<ul
765
class="breadcrumb mt-2.5 flex items-center gap-1 overflow-hidden text-sm text-gray-500 contrast-more:text-current"
866
>

‎docs/src/routes/+layout.svelte

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,6 @@
22
import '../app.postcss';
33
/** @type {import('./$types').LayoutData} */
44
export let data;
5-
const groups = data.components.reduce((acc, current) => {
6-
if (acc[current.component] === undefined) {
7-
acc[current.component] = [];
8-
}
9-
acc[current.component].push(current);
10-
return acc;
11-
}, {});
125
</script>
136

147
<div class="sticky top-0 z-20 w-full bg-transparent">
@@ -84,12 +77,12 @@
8477
<input type="checkbox" />
8578
<div class="collapse-title p-0 m-0 section-title hover:text-gray-600 hover:bg-gray-200/80">Components</div>
8679
<ul class="collapse-content">
87-
{#each Object.keys(groups) as group}
80+
{#each Object.keys(data.components) as group, index}
8881
<li class="collapse collapse-arrow">
8982
<input type="checkbox" />
9083
<div class="collapse-title p-0 m-0 section-title hover:text-gray-600 hover:bg-gray-200/80">{group}</div>
9184
<ul class="flex flex-col gap-1 md:flex collapse-content">
92-
{#each groups[group] as item}
85+
{#each data.components[group] as item}
9386
<li
9487
class="flex flex-col gap-1 h-12 hover:bg-gray-200/80 justify-center px-2 rounded"
9588
>

‎docs/src/routes/+layout.ts

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@ async function loadContent(): Promise<Data> {
3939
.then((p) => {
4040
return p.sort((a, b) => a.order - b.order);
4141
});
42-
4342
const groups = pages.reduce(
4443
(acc, current) => {
4544
if (current.slug.includes('components')) {
@@ -51,17 +50,17 @@ async function loadContent(): Promise<Data> {
5150
path: current.path,
5251
slug: current.slug
5352
};
54-
// if (acc.components[group] == undefined) {
55-
// acc.components[group] = { docs: [] };
56-
// }
57-
// acc.components[group].docs.push(item);
58-
acc.components.push(item)
53+
if (acc.components[group] == undefined) {
54+
acc.components[group] = [];
55+
}
56+
acc.components[group].push(item);
57+
// acc.components.push(item)
5958
return acc;
6059
}
6160
acc.base.push(current);
6261
return acc;
6362
},
64-
{ components: [], base: [] }
63+
{ components: {}, base: [] }
6564
);
6665
return groups;
6766
}

‎docs/src/routes/components/CldImage/examples/+page.svx

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,12 @@ title: CldImage/Examples
33
order: 3
44
---
55
<script>
6-
import ImageGrid from '$lib/components/ImageGrid.svelte';
6+
import ImageGrid frm '$lib/components/ImageGrid.svelte';
77
import Callout from '$lib/components/Callout.svelte'
88
import { CldImage } from 'svelte-cloudinary'
99
</script>
1010

1111

12-
<svelte:head>
13-
<title>CldImage Examples - Svelte Cloudinary</title>
14-
<meta name="og:title" content="CldImage Examples - Svelte Cloudinary" />
15-
<meta name="og:url" content={`https://svelte-cloudinary.vercel.app/components/cldimage/examples`} />
16-
</svelte:head>
17-
18-
1912
# CldImage Examples
2013

2114
## Effects

‎docs/src/routes/components/CldOgImage/configuration/+page.svx

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
---
2+
title: CldOgImage/Configuration
3+
order: 2
4+
---
5+
6+
<script>
7+
import Callout from '$lib/components/Callout.svelte'
8+
import { CldOgImage, CldImage } from 'svelte-cloudinary'
9+
</script>
10+
11+
12+
# CldOgImage Configuration
13+
14+
The CldOgImage component is built on top of the same APIs used for CldImage, giving you the ability to apply the same transformations to your social cards as you can any image.
15+
16+
See [CldImage](/components/cldimage/configuration) for all image transformations.
17+
18+
## General Props
19+
20+
| Prop Name | Type | Example |
21+
|--------------------|--------|------------------------------|
22+
| alt | string | `"Svelte Cloudinary"` |
23+
| excludeTags | array | `['twitter:title']` |
24+
| keys | object | `{'og:image': 'my-og-image'}`|
25+
| twitterTitle | string | `"Svelte Cloudinary"` |
26+
27+
## Image Size
28+
29+
By default, the image canvas is based upon 2400x1254, but resized down to 1200x627, meaning, you can design the image as if it were a 2400x1254 image, but the resulting image will be sized down to 1200x627 to avoid an overly large image.
30+
31+
627 (with a canvas of 1254) is used to satisfy the 1.91:1 ratio requirement and minimum size [requirement from linkedin](https://www.linkedin.com/help/linkedin/answer/a521928/make-your-website-shareable-on-linkedin).
32+
33+
The resizing mechanism provides backwards compatibility for existing usage as well as a way to maintain a consistent "canvas" size when designing a social image card.
34+
35+
You can use the `width` and the `height` to control the canvas and `widthResize` to change the final size the image is scaled to.
36+
37+
The height is ultimately calculated using the `width` value and the `widthResize` values to maintain the correct ratio.
38+
39+
## Image Format
40+
41+
While Cloudinary's `f_auto` parameter (format of auto) is great for websites and mobile apps, having more control over the format helps to reduce initial encoding time, which is more critical for a social network to recognize the image and load it on first share.
42+
43+
The default format for most use cases is then jpg, as webp does not have broad support (likely nor does AVIF).
44+
45+
Read more about webp support: https://www.ctrl.blog/entry/webp-ogp.html
46+
47+
However, Twitter does support webp, so we're able to customize the format using the Twitter specific tag, and generally a separate webp version for that platform to optimize where we can.
48+
49+
## Excluding Tags
50+
51+
The `summary_large_image` Twitter card type requires the inclusion of a `twitter:title` card. Because of this, the component includes it by default for simplified use along with a prop to change the value.
52+
53+
<Callout emoji={false}>
54+
Learn more about <a href="https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image">summary_large_image</a>
55+
</Callout>
56+
57+
To exclude this tag to manage it on your own, use the `excludeTags` prop:
58+
59+
```jsx
60+
excludeTags={['twitter:title']}
61+
```
62+
63+
## Keys
64+
65+
By default, CldOgImage includes static keys on each meta tag rendered to help avoid duplication in the DOM.
66+
67+
To allow customization and control in the event you want to minimize duplication with existing meta tags, you can specify custom keys for each tag.
68+
69+
For instance, by default `og:image` tag will effectively render with:
70+
71+
```jsx
72+
<meta key="og-image" property="og:image" content="..." />
73+
```
74+
75+
Where if you pass in the `keys` prop with the following:
76+
77+
```jsx
78+
keys={{'og:image': 'my-og-image'}}
79+
```
80+
81+
The tag will render with:
82+
83+
```jsx
84+
<meta key="my-og-image" property="og:image" content="..." />
85+
```

‎docs/src/routes/components/CldOgImage/usage/+page.svx

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
---
2+
title: CldOgImage/Basic Usage
3+
order: 1
4+
---
5+
6+
<script>
7+
import Callout from '$lib/components/Callout.svelte'
8+
import { CldOgImage, CldImage } from 'svelte-cloudinary'
9+
</script>
10+
11+
<CldOgImage
12+
src={`images/turtle`}
13+
title="CldOgImage"
14+
twitterTitle="Getting Started with CldOgImage"
15+
/>
16+
17+
# Getting Started with CldOgImage
18+
19+
The CldOgImage Component give you the ability to use the same CldImage API to easily generate Open Graph images (or social cards) inside of SvelteKit
20+
21+
## Basic Usage
22+
23+
The basic required prop is `src`:
24+
25+
```jsx
26+
import { CldOgImage } from 'svelte-cloudinary';
27+
28+
<CldOgImage
29+
src="<Public ID>"
30+
/>
31+
```
32+
33+
Place the CldOgImage component anywhere in your svelte component (like in a +page.svelte for SvelteKit users).
34+
35+
36+
The resulting HTML will be applied to the Head of the document:
37+
38+
```html
39+
<meta property="og:image" content="https://res.cloudinary.com/colbycloud-next-cloudinary/image/upload/c_fill,w_2400,h_1254,g_center/c_scale,w_1200/f_jpg/q_auto/v1/images/galaxy" />
40+
<meta property="og:image:secure_url" content="https://res.cloudinary.com/colbycloud-next-cloudinary/image/upload/c_fill,w_2400,h_1254,g_center/c_scale,w_1200/f_jpg/q_auto/v1/images/galaxy" />
41+
<meta property="og:image:width" content="1200" />
42+
<meta property="og:image:height" content="627" />
43+
<meta property="twitter:title" content=" " />
44+
<meta property="twitter:card" content="summary_large_image" />
45+
<meta property="twitter:image" content="https://res.cloudinary.com/colbycloud-next-cloudinary/image/upload/c_fill,w_2400,h_1254,g_center/c_scale,w_1200/f_webp/q_auto/v1/images/galaxy" />
46+
```
47+
48+
<p className="nx-mt-6">
49+
<CldImage
50+
width="1200"
51+
height="627"
52+
src={`images/turtle`}
53+
crop="fill"
54+
sizes="100vw"
55+
alt="Turtle in the ocean"
56+
/>
57+
</p>
58+
59+
<Callout emoji={false}>
60+
CldOgImage does not render an `&lt;img&gt;` tag, meaning it can't be visually embedded on a page. This example makes use of the `&lt;CldImage&gt` tag to showcase what's possible.
61+
</Callout>
62+
63+
## Transformations
64+
65+
You can further take advantage of Cloudinary features like background removal and overlays by adding additional props.
66+
67+
The CldOgImage component uses the same API as [CldImage](/components/CldImage/configuration), meaning you can use the same transformations and effects.
68+
69+
```jsx
70+
<CldOgImage
71+
src="<Public ID>"
72+
tint="100:0762a0"
73+
removeBackground
74+
opacity="40"
75+
overlays={[{
76+
text: {
77+
color: 'white',
78+
fontFamily: 'Source Sans Pro',
79+
fontSize: 200,
80+
fontWeight: 'bold',
81+
text: '<Text>'
82+
}
83+
}]}
84+
underlay="<Public ID>"
85+
alt="<Description>"
86+
twitterTitle="<Title>"
87+
/>
88+
```
89+
90+
<p className="nx-mt-6">
91+
<CldImage
92+
width="1200"
93+
height="627"
94+
src={`images/turtle`}
95+
crop="fill"
96+
tint="100:0762a0"
97+
removeBackground
98+
opacity="40"
99+
overlays={[{
100+
text: {
101+
color: 'white',
102+
fontFamily: 'Source Sans Pro',
103+
fontSize: 80,
104+
fontWeight: 'bold',
105+
text: 'Next Cloudinary'
106+
}
107+
}]}
108+
underlay={`images/galaxy`}
109+
sizes="100vw"
110+
alt="Turtle in the ocean"
111+
/>
112+
</p>
113+
114+
<Callout emoji={false}>
115+
CldOgImage does not render an `&lt;img&gt;` tag, meaning it can't be visually embedded on a page. This example makes use of the `&lt;CldImage&gt` tag to showcase what's possible.
116+
</Callout>
117+
118+
119+
## Learn More about CldOgImage
120+
* [Configuration](/components/CldOgImage/configuration)
121+
* [Examples](/components/CldOgImage/examples)

‎svelte-cloudinary/src/lib/components/CldImage.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@
3030
const imageProps = {
3131
alt,
3232
src,
33-
width,
34-
height
33+
width: typeof width === 'string' ? parseInt(width) : width,
34+
height: typeof height === 'string' ? parseInt(height) : height,
3535
} as $$Props;
3636
3737
(Object.keys($$props) as Array<keyof $$Props>)

0 commit comments

Comments
 (0)