rehype-og-card 0.1.1 → 0.2.0

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.
Files changed (3) hide show
  1. package/README.md +15 -13
  2. package/dist/util.js +30 -28
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -58,24 +58,26 @@ https://blog.google/products/android/world-emoji-day-2024/
58
58
  main();
59
59
  ```
60
60
 
61
- Output:
61
+ Output (formatted for readability):
62
62
 
63
63
  ```html
64
64
  <p>this is a link: https://blog.google/products/android/world-emoji-day-2024/</p>
65
65
  <p><code>https://blog.google/products/android/world-emoji-day-2024/</code></p>
66
- <p><a class="rlc-container" href="https://blog.google/products/android/world-emoji-day-2024/">
67
- <div class="rlc-info">
68
- <div class="rlc-title">10 fun facts about emoji for World Emoji Day</div>
69
- <div class="rlc-description">Celebrate World Emoji Day with Google, and check out what’s new for Emoji Kitchen.</div>
70
- <div class="rlc-url-container">
71
- <img class="rlc-favicon" loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=blog.google" alt="favicon" width="16" height="16">
72
- <span class="rlc-url">blog.google</span>
66
+ <p><div class="og-card-container">
67
+ <a href="https://blog.google/products/android/world-emoji-day-2024/">
68
+ <div class="og-card-info">
69
+ <div class="og-card-title">10 fun facts about emoji for World Emoji Day</div>
70
+ <div class="og-card-description">Celebrate World Emoji Day with Google, and check out what’s new for Emoji Kitchen.</div>
71
+ <div class="og-card-url-container">
72
+ <img class="og-card-favicon" alt="favicon" decoding="async" height="16" loading="lazy" src="https://www.google.com/s2/favicons?domain=blog.google" width="16">
73
+ <span class="og-card-url">blog.google</span>
74
+ </div>
73
75
  </div>
74
- </div>
75
- <div class="rlc-image-container">
76
- <img class="rlc-image" loading="lazy" decoding="async" src="https://storage.googleapis.com/gweb-uniblog-publish-prod/images/world_emoji_day_v2_1.width-1300.png" alt="https://storage.googleapis.com/gweb-uniblog-publish-prod/images/world_emoji_day_v2_1.width-1300.png">
77
- </div>
78
- </a></p>
76
+ <div class="og-card-image-container">
77
+ <img class="og-card-image" alt="https://storage.googleapis.com/gweb-uniblog-publish-prod/images/world_emoji_day_v2_1.width-1300.png" decoding="async" loading="lazy" src="https://storage.googleapis.com/gweb-uniblog-publish-prod/images/world_emoji_day_v2_1.width-1300.png">
78
+ </div>
79
+ </a>
80
+ </div></p>
79
81
  <p><a href="https://blog.google/products/android/world-emoji-day-2024/">https://blog.google/products/android/world-emoji-day-2024/</a></p>
80
82
  <p><a href="https://blog.google/products/android/world-emoji-day-2024/">Google blog</a></p>
81
83
  ```
package/dist/util.js CHANGED
@@ -85,34 +85,36 @@ const getOGData = (url, userAgent) => __awaiter(void 0, void 0, void 0, function
85
85
  * @returns OG card element.
86
86
  */
87
87
  const createOGCard = (data, options) => {
88
- const card = h("a.rlc-container", { href: data.url }, [
89
- h("div.rlc-info", [
90
- h("div.rlc-title", data.title),
91
- data.description ? h("div.rlc-description", data.description) : null,
92
- h("div.rlc-url-container", [
93
- h("img.rlc-favicon", {
94
- alt: "favicon",
95
- decoding: options.decoding,
96
- height: 16,
97
- loading: options.loading,
98
- src: data.faviconURL,
99
- width: 16
100
- }),
101
- h("span.rlc-url", data.displayURL)
102
- ])
103
- ]),
104
- data.OGImageURL
105
- ? h("div.rlc-image-container", [
106
- h("img.rlc-image", {
107
- alt: data.OGImageAlt || data.OGImageURL,
108
- decoding: options.decoding,
109
- height: data.OGImageHeight,
110
- loading: options.loading,
111
- src: data.OGImageURL,
112
- width: data.OGImageWidth
113
- })
114
- ])
115
- : null
88
+ const card = h("div.og-card-container", [
89
+ h("a", { href: data.url }, [
90
+ h("div.og-card-info", [
91
+ h("div.og-card-title", data.title),
92
+ data.description ? h("div.og-card-description", data.description) : null,
93
+ h("div.og-card-url-container", [
94
+ h("img.og-card-favicon", {
95
+ alt: "favicon",
96
+ decoding: options.decoding,
97
+ height: 16,
98
+ loading: options.loading,
99
+ src: data.faviconURL,
100
+ width: 16
101
+ }),
102
+ h("span.og-card-url", data.displayURL)
103
+ ])
104
+ ]),
105
+ data.OGImageURL
106
+ ? h("div.og-card-image-container", [
107
+ h("img.og-card-image", {
108
+ alt: data.OGImageAlt || data.OGImageURL,
109
+ decoding: options.decoding,
110
+ height: data.OGImageHeight,
111
+ loading: options.loading,
112
+ src: data.OGImageURL,
113
+ width: data.OGImageWidth
114
+ })
115
+ ])
116
+ : null
117
+ ])
116
118
  ]);
117
119
  return card;
118
120
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "rehype-og-card",
3
- "version": "0.1.1",
3
+ "version": "0.2.0",
4
4
  "description": "Rehype plugin to convert text links to link cards",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",