Skip to content

Commit 73e6c20

Browse files
antfubotantfubot
authored
docs: show the devframe logo in the OG image (#435)
1 parent 1b2c23f commit 73e6c20

2 files changed

Lines changed: 136 additions & 1 deletion

File tree

‎docs/app/components/OgImage/OgImageDocs.satori.vue‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<script setup lang="ts">
2+
/**
3+
* Shadows the comark-docs layer's OG template to draw the devframe mark,
4+
* which the layer only ships for its own Comark sites.
5+
*
6+
* The mark is inlined: nuxt-og-image renders this through an island that only
7+
* registers OG templates, so a nested `<LogoMark />` would render nothing.
8+
*/
9+
defineOptions({
10+
inheritAttrs: false,
11+
})
12+
13+
const { title = '', description = '', headline = '' } = defineProps<{
14+
title?: string
15+
description?: string
16+
headline?: string
17+
}>()
18+
19+
const { seo, docs } = useAppConfig()
20+
const site = useSiteConfig()
21+
22+
const siteName = seo?.siteName || site.name || ''
23+
const host = site.url ? site.url.replace(/^https?:\/\//, '').replace(/\/$/, '') : ''
24+
const accent = docs?.ogImage?.accent || '#fafafa'
25+
</script>
26+
27+
<template>
28+
<div
29+
class="flex flex-col flex-1 min-h-full min-w-full"
30+
style="background: #000; position: relative; overflow: hidden"
31+
>
32+
<div
33+
:style="`
34+
position: absolute;
35+
inset: 0;
36+
background-image: radial-gradient(circle, ${withAlpha(accent, 0.03)} 1px, transparent 1px);
37+
background-size: 28px 28px;
38+
`"
39+
/>
40+
41+
<div
42+
class="flex items-center"
43+
style="position: absolute; z-index: 1; top: 72px; left: 80px"
44+
>
45+
<svg width="44" height="44" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Devframe">
46+
<path d="M238.464 40H66V236.007H104.577C220.688 236.007 232.79 158.437 232.79 121.733C232.79 108.867 243.38 108.867 243.38 121.733C251.318 236.701 356.35 245.457 365.527 246.223L365.542 246.224C374.619 246.981 382.561 251.521 365.542 254.548C253.592 264.765 243.758 364.282 243.38 375.634C243.002 386.986 235.438 399.851 232.79 375.634C222.957 274.603 144.289 257.954 104.577 257.954H66V460.772H238.464C358.356 460.772 452.152 371.472 452.152 251.521C452.152 131.571 356.465 40 238.464 40Z" fill="url(#og_devframe_fill)" />
47+
<defs>
48+
<radialGradient id="og_devframe_fill" cx="0" cy="0" r="1" gradientTransform="matrix(399.011 555.102 -568.423 408.982 -11.6221 -34.9218)" gradientUnits="userSpaceOnUse">
49+
<stop stop-color="#ADC77F" />
50+
<stop offset="0.71903" stop-color="#517158" />
51+
<stop offset="1" stop-color="#486954" />
52+
</radialGradient>
53+
</defs>
54+
</svg>
55+
<div
56+
style="
57+
font-family: 'Geist';
58+
font-size: 32px;
59+
font-weight: 600;
60+
color: #fafafa;
61+
letter-spacing: -0.02em;
62+
margin-left: 14px;
63+
"
64+
>
65+
{{ siteName }}
66+
</div>
67+
</div>
68+
69+
<div
70+
class="flex flex-col flex-1 justify-center min-h-0"
71+
style="position: relative; z-index: 1; padding: 50px 80px 0"
72+
>
73+
<div
74+
v-if="headline"
75+
:style="`
76+
font-family: 'Geist Mono';
77+
font-size: 16px;
78+
font-weight: 600;
79+
letter-spacing: 0.2em;
80+
text-transform: uppercase;
81+
color: ${accent};
82+
margin-bottom: 24px;
83+
`"
84+
>
85+
{{ headline }}
86+
</div>
87+
<div
88+
style="
89+
font-family: 'Geist';
90+
font-size: 76px;
91+
font-weight: 500;
92+
color: #fafafa;
93+
line-height: 1;
94+
letter-spacing: -0.035em;
95+
"
96+
>
97+
{{ title || siteName }}
98+
</div>
99+
100+
<div
101+
v-if="description"
102+
style="
103+
font-family: 'Geist';
104+
font-size: 28px;
105+
color: #a1a1aa;
106+
line-height: 1.5;
107+
margin-top: 24px;
108+
max-width: 700px;
109+
"
110+
>
111+
{{ truncate(description, 120) }}
112+
</div>
113+
</div>
114+
115+
<div
116+
v-if="host"
117+
class="flex shrink-0 items-center min-w-0"
118+
style="position: absolute; z-index: 1; bottom: 40px; left: 80px"
119+
>
120+
<div
121+
:style="`
122+
font-family: 'Geist Mono';
123+
font-size: 16px;
124+
font-weight: 500;
125+
line-height: 1;
126+
letter-spacing: 0.12em;
127+
color: ${accent};
128+
white-space: nowrap;
129+
`"
130+
>
131+
{{ host }}
132+
</div>
133+
</div>
134+
</div>
135+
</template>

‎knip.jsonc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
// Nuxt auto-registers `app/components` and `app/composables`; the files
4242
// here shadow same-named pieces of the comark-docs layer (AppHeaderBrand,
4343
// useFilteredNavigation, ...), so nothing imports them explicitly.
44-
"entry": ["app/components/*.vue", "app/composables/*.ts"],
44+
"entry": ["app/components/*.vue", "app/components/OgImage/*.vue", "app/composables/*.ts"],
4545
// `app/components/AssistantChat.vue` shadows the comark-docs layer's own
4646
// component and mirrors its imports verbatim (see the file header). These
4747
// packages are provided transitively by the `comark-docs` layer, not

0 commit comments

Comments
 (0)