waveterm/waveterm-docs
0
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm-docs.git synced 2026-08-05 13:45:23 -07:00
Code Issues Packages Projects Releases Wiki Activity

attempt to add icon in background of social card

Browse Source
This commit is contained in:
Evan Simkowitz
2024-10-09 14:21:52 -04:00
parent 58ddb92375
commit 8dbb1f66a3
3 changed files with 44 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/image-renderers.ts
+29 -2
View File
@@ -17,6 +17,7 @@ const titleElement = ({ children }) =>
margin: "25px 225px 10px 0px",
color: "#e3e3e3",
wordBreak: "break-word",
zIndex: 2,
},
},
children
@@ -37,6 +38,7 @@ const headerElement = (header: string, svg: ReactNode) =>
display: "flex",
alignItems: "center",
marginTop: "50px",
zIndex: 2,
},
},
svg,
@@ -67,9 +69,25 @@ const rootDivStyle: React.CSSProperties = {
backgroundColor: "#1b1b1d",
color: "#e3e3e3",
borderBottom: "2rem solid #58c142",
zIndex: "2 !important",
};
const bookIcon = join(__dirname, "../../static/img/book-open-cover-regular.svg");
const bookIconBase64 = `data:image/svg+xml;base64,${readFileSync(bookIcon).toString("base64")}`;
const bookIconElement = React.createElement("div", {
style: {
position: "absolute",
bottom: "-100px",
right: "-100px",
height: "500px",
width: "500px",
backgroundColor: "#58c142bb",
zIndex: 1,
// background: `url('${bookIconBase64}')`,
mask: `url('${bookIconBase64}')`,
WebkitMask: `url('${bookIconBase64}')`,
},
});
export const docOgRenderer: ImageRenderer<DocsPageData> = async (data, context) => {
const element = React.createElement(
"div",
@@ -77,7 +95,16 @@ export const docOgRenderer: ImageRenderer<DocsPageData> = async (data, context)
waveLogoElement,
headerElement("Documentation", null),
React.createElement(titleElement, null, data.metadata.title),
React.createElement("div", null, data.metadata.description.replace("&mdash;", "-"))
React.createElement(
"div",
{
style: {
zIndex: 2,
},
},
data.metadata.description.replace("&mdash;", "-")
),
bookIconElement
);
return [element, await imageGeneratorOptions()];
static/img/book-open-cover-regular.svg
+5
View File
@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" stroke="white">
<!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.-->
<path
d="M512 337.2l0-284.8L344 77l0 296 168-35.8zM296 373l0-296L128 52.4l0 284.8L296 373zM523.4 2.2C542.7-.7 560 14.3 560 33.8l0 316.3c0 15.1-10.6 28.1-25.3 31.3l-201.3 43c-8.8 1.9-17.9 1.9-26.7 0l-201.3-43C90.6 378.3 80 365.2 80 350.1L80 33.8C80 14.3 97.3-.7 116.6 2.2L320 32 523.4 2.2zM38.3 23.7l10.2 2c-.3 2.7-.5 5.4-.5 8.1l0 40.7 0 267.6 0 66.7 265.8 54.5c2 .4 4.1 .6 6.2 .6s4.2-.2 6.2-.6L592 408.8l0-66.7 0-267.6 0-40.7c0-2.8-.2-5.5-.5-8.1l10.2-2C621.5 19.7 640 34.8 640 55l0 366.9c0 15.2-10.7 28.3-25.6 31.3L335.8 510.4c-5.2 1.1-10.5 1.6-15.8 1.6s-10.6-.5-15.8-1.6L25.6 453.2C10.7 450.2 0 437.1 0 421.9L0 55C0 34.8 18.5 19.7 38.3 23.7z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 902 B

yarn.lock
+10 -71
View File
@@ -3732,7 +3732,7 @@ __metadata:
"@waveterm/docusaurus-og@https://github.com/wavetermdev/docusaurus-og":
version: 1.0.0-alpha.132
resolution: "@waveterm/docusaurus-og@https://github.com/wavetermdev/docusaurus-og.git#commit=1cc17b16b5cba9ce1a4e4634877f4bea42da9824"
resolution: "@waveterm/docusaurus-og@https://github.com/wavetermdev/docusaurus-og.git#commit=b3c4a9071b72d72bfc7ad23c58853a0894b63cde"
dependencies:
"@docusaurus/core": "npm:^3.4.0"
"@docusaurus/module-type-aliases": "npm:^3.4.0"
@@ -3747,8 +3747,8 @@ __metadata:
lodash: "npm:^4.17.21"
node-html-parser: "npm:^6.1.5"
object-hash: "npm:^3.0.0"
satori: "npm:^0.10.13"
checksum: 10c0/1b67f2464bde5821c5eb475a5be572d2a7601dbc1a832ccf9817cbacdbfc4da87bdc22813eb4d6119707b0b9c117f035f18bbb7e39d79fbd588283b4175e0d34
satori: "npm:^0.1"
checksum: 10c0/eaa141f979c4df21fad374328a0d6177a9716ecd8f6f8fda84d3b0782bcfcb49f7170e364d86d0ea4a686d886ca2be8b0dfd300ad03fc7982cda9edf2b582b5a
languageName: node
linkType: hard
@@ -4349,13 +4349,6 @@ __metadata:
languageName: node
linkType: hard
"base64-js@npm:0.0.8":
version: 0.0.8
resolution: "base64-js@npm:0.0.8"
checksum: 10c0/60f02a9fdbbbb251c0a1064834d4062f5a3c4237edd9f0313282d75980a80ce303316795f7a80c8e240e524169644d88445ec0697b03f81ab9f4458090979375
languageName: node
linkType: hard
"base64-js@npm:^1.3.1":
version: 1.5.1
resolution: "base64-js@npm:1.5.1"
@@ -4925,7 +4918,7 @@ __metadata:
languageName: node
linkType: hard
"color-name@npm:^1.0.0, color-name@npm:^1.1.4, color-name@npm:~1.1.4":
"color-name@npm:^1.0.0, color-name@npm:~1.1.4":
version: 1.1.4
resolution: "color-name@npm:1.1.4"
checksum: 10c0/a1a3f914156960902f46f7f56bc62effc6c94e84b2cae157a526b1c1f74b677a47ec602bf68a61abfa2b42d15b7c5651c6dbe72a43af720bc588dff885b10f95
@@ -7306,13 +7299,6 @@ __metadata:
languageName: node
linkType: hard
"hex-rgb@npm:^4.1.0":
version: 4.3.0
resolution: "hex-rgb@npm:4.3.0"
checksum: 10c0/ce2c2ff260d9e0686bead74e3318c1684d8a2da856da30ed90535442f705fb4f5cd93ffe70274e2534a7319a99cda6a6617f23d4f163b72867f406e25ea30cb4
languageName: node
linkType: hard
"history@npm:^4.9.0":
version: 4.10.1
resolution: "history@npm:4.10.1"
@@ -8355,16 +8341,6 @@ __metadata:
languageName: node
linkType: hard
"linebreak@npm:^1.1.0":
version: 1.1.0
resolution: "linebreak@npm:1.1.0"
dependencies:
base64-js: "npm:0.0.8"
unicode-trie: "npm:^2.0.0"
checksum: 10c0/b350c90d7b10db30345ed56cdb869548110ce73ccdc4337100eaee50755eed78e9823490e6f2d7ed0adde14f7ed2a12d8583015e072c54f34dc70b316fde133d
languageName: node
linkType: hard
"lines-and-columns@npm:^1.1.6":
version: 1.2.4
resolution: "lines-and-columns@npm:1.2.4"
@@ -10140,13 +10116,6 @@ __metadata:
languageName: node
linkType: hard
"pako@npm:^0.2.5":
version: 0.2.9
resolution: "pako@npm:0.2.9"
checksum: 10c0/79c1806ebcf325b60ae599e4d7227c2e346d7b829dc20f5cf24cef07c934079dc3a61c5b3c8278a2f7a190c4a613e343ea11e5302dbe252efd11712df4b6b041
languageName: node
linkType: hard
"param-case@npm:^3.0.4":
version: 3.0.4
resolution: "param-case@npm:3.0.4"
@@ -10166,16 +10135,6 @@ __metadata:
languageName: node
linkType: hard
"parse-css-color@npm:^0.2.1":
version: 0.2.1
resolution: "parse-css-color@npm:0.2.1"
dependencies:
color-name: "npm:^1.1.4"
hex-rgb: "npm:^4.1.0"
checksum: 10c0/558f1d9874295a618717b88633fb15343fd4d2952c21b274c77503f251c1ed18086df6cec422b6ca67c8f8f0511baf327fae232d4ed12d55cf116695346161d3
languageName: node
linkType: hard
"parse-entities@npm:^2.0.0":
version: 2.0.0
resolution: "parse-entities@npm:2.0.0"
@@ -12267,21 +12226,18 @@ __metadata:
languageName: node
linkType: hard
"satori@npm:^0.10.13":
version: 0.10.14
resolution: "satori@npm:0.10.14"
"satori@npm:^0.1":
version: 0.1.2
resolution: "satori@npm:0.1.2"
dependencies:
"@shuding/opentype.js": "npm:1.4.0-beta.0"
css-background-parser: "npm:^0.1.0"
css-box-shadow: "npm:1.0.0-3"
css-to-react-native: "npm:^3.0.0"
emoji-regex: "npm:^10.2.1"
escape-html: "npm:^1.0.3"
linebreak: "npm:^1.1.0"
parse-css-color: "npm:^0.2.1"
postcss-value-parser: "npm:^4.2.0"
yoga-wasm-web: "npm:^0.3.3"
checksum: 10c0/874e7c869bf33e4d2337fc15a47a3ff97dc592370c2a599e0ad08ac87ba6b4b2800549adae81bbd7c12b773a5cf91ca726be543b7c43a132cab173d0e49e85c2
yoga-wasm-web: "npm:^0.3.0"
checksum: 10c0/9842dc2513d3b48e8b5fb8dcb528a7547ad4b78231827920a1dfafecfac3c607d44e4119535ce4b617a09d9959b526635969708c137d68473c5678f1929b5fa7
languageName: node
linkType: hard
@@ -13258,13 +13214,6 @@ __metadata:
languageName: node
linkType: hard
"tiny-inflate@npm:^1.0.0":
version: 1.0.3
resolution: "tiny-inflate@npm:1.0.3"
checksum: 10c0/fab687537254f6ec44c9a2e880048fe70da3542aba28f73cda3e74c95cabf342a339372f2a6c032e322324f01accc03ca26c04ba2bad9b3eb8cf3ee99bba7f9b
languageName: node
linkType: hard
"tiny-invariant@npm:^1.0.2":
version: 1.3.3
resolution: "tiny-invariant@npm:1.3.3"
@@ -13483,16 +13432,6 @@ __metadata:
languageName: node
linkType: hard
"unicode-trie@npm:^2.0.0":
version: 2.0.0
resolution: "unicode-trie@npm:2.0.0"
dependencies:
pako: "npm:^0.2.5"
tiny-inflate: "npm:^1.0.0"
checksum: 10c0/2422368645249f315640a1c9e9506046aa7738fc9c5d59e15c207cdd6ec66101c35b0b9f75dc3ac28fe7be19aaf1efc898bbea074fa1e8e295ef736aeb7904bb
languageName: node
linkType: hard
"unified-args@npm:^11.0.0":
version: 11.0.1
resolution: "unified-args@npm:11.0.1"
@@ -14390,7 +14329,7 @@ __metadata:
languageName: node
linkType: hard
"yoga-wasm-web@npm:^0.3.3":
"yoga-wasm-web@npm:^0.3.0":
version: 0.3.3
resolution: "yoga-wasm-web@npm:0.3.3"
checksum: 10c0/d46ae3a436409e89eb0ea3b8c7624dafaf2c846d9038fdf8aa0cc839f73a2577b679bdc22997596177de74c580a6cdc3206c98fd2acd91b66f85462d9d9d260a