Skip to content

Commit 3c4fc23

Browse files
HugoRCDHugoRCD
authored
feat(docs): update OG images (#40)
1 parent a25479a commit 3c4fc23

9 files changed

Lines changed: 98 additions & 10 deletions

File tree

‎docs/app/components/og-image/OgImageDocs.vue‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<script setup lang="ts">
2+
defineOptions({
3+
inheritAttrs: false,
4+
})
5+
6+
const { headline = '' } = defineProps<{
7+
title?: string
8+
description?: string
9+
headline?: string
10+
}>()
11+
12+
function truncate(str: string, max: number) {
13+
if (!str || str.length <= max) return str
14+
const cut = str.lastIndexOf(' ', max)
15+
return `${str.slice(0, cut > 0 ? cut : max)}…`
16+
}
17+
</script>
18+
19+
<template>
20+
<div class="flex flex-row size-full">
21+
<div
22+
class="flex flex-col items-center justify-between"
23+
style="width:200px;background:#eab308;padding:48px 0;"
24+
>
25+
<div style="flex:1;display:flex;align-items:center;justify-content:center;">
26+
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="62" viewBox="0 0 208 128" fill="none">
27+
<path stroke="#09090b" stroke-width="8" d="M199 9v110H9V9h190Z" />
28+
<path fill="#09090b" d="M128 51.25V32h19.937v19.25H128ZM128 96V76.75h19.937V96H128ZM158.063 51.25V32H178v19.25h-19.937Zm0 44.75V76.75H178V96h-19.937ZM30 98V30h20l20 25 20-25h20v68H90V59L70 84 50 59v39H30Z" />
29+
</svg>
30+
</div>
31+
<div style="font-family:'Geist Mono';font-size:11px;font-weight:600;color:#09090b;letter-spacing:0.12em;opacity:0.5;">
32+
comark.dev
33+
</div>
34+
</div>
35+
36+
<div
37+
class="flex flex-col flex-1"
38+
style="background:#09090b;position:relative;overflow:hidden;"
39+
>
40+
<div
41+
style="position:absolute;inset:0;background-image:radial-gradient(circle, rgba(234,179,8,0.03) 1px, transparent 1px);background-size:28px 28px;"
42+
/>
43+
44+
<div class="flex flex-col flex-1 justify-center" style="position:relative;z-index:1;padding:48px 56px;">
45+
<div
46+
v-if="headline"
47+
style="font-family:'Geist Mono';font-size:13px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:#eab308;margin-bottom:24px;"
48+
>
49+
{{ headline }}
50+
</div>
51+
52+
<div
53+
style="font-family:'Geist';font-size:72px;font-weight:800;color:#fafafa;line-height:1;letter-spacing:-0.035em;"
54+
>
55+
{{ title || 'Comark' }}
56+
</div>
57+
58+
<div
59+
v-if="description"
60+
style="font-family:'Geist';font-size:24px;color:#a1a1aa;line-height:1.5;margin-top:24px;max-width:700px;"
61+
>
62+
{{ truncate(description, 120) }}
63+
</div>
64+
</div>
65+
66+
<div style="position:relative;z-index:1;padding:0 56px 36px;">
67+
<div style="display:flex;align-items:center;gap:16px;">
68+
<div style="flex:1;height:1px;background:rgba(234,179,8,0.15);" />
69+
<div style="font-family:'Geist Mono';font-size:13px;font-weight:500;letter-spacing:0.12em;color:rgba(234,179,8,0.6);">
70+
COMPONENTS IN MARKDOWN
71+
</div>
72+
</div>
73+
</div>
74+
</div>
75+
</div>
76+
</template>

‎docs/app/pages/examples/[...slug].vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,9 @@ useSeoMeta({
6060
title: `${page.value?.title || exampleName.value} Example`,
6161
description: page.value?.description,
6262
})
63+
defineOgImageComponent('Docs', {
64+
headline: 'Examples',
65+
})
6366
</script>
6467

6568
<template>

‎docs/app/pages/examples/index.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,9 @@ useSeoMeta({
3333
title,
3434
description,
3535
})
36+
defineOgImageComponent('Docs', {
37+
headline: 'Examples',
38+
})
3639
</script>
3740

3841
<template>

‎docs/app/pages/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const { data: page } = await useAsyncData('index', () =>
1010
useSeoMeta({
1111
title: 'Comark - Components in Markdown',
1212
description: 'Fast, streaming-ready markdown parser with Vue and React component support. Parse Comark content from strings or streams with TypeScript support.',
13-
ogImage: '/social-card.png',
13+
ogImage: '/social-card.jpg',
1414
})
1515
1616
useHead({

‎docs/app/pages/play.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
definePageMeta({
33
footer: false,
44
})
5+
defineOgImageComponent('Docs', {
6+
headline: 'Playground',
7+
})
58
</script>
69

710
<template>

‎docs/app/pages/stream.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ import resolveComponent from '../utils/components-manifest'
88
definePageMeta({
99
footer: false,
1010
})
11+
defineOgImageComponent('Docs', {
12+
headline: 'Streaming',
13+
})
1114
1215
const { state, startStream, isStreaming, reset: resetStream } = useMDCStream({
1316
onChunk: (_chunk: string) => {

‎docs/app/pages/test.vue‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const markdown = ref(`
88
seo:
99
title: Big Markdown Example — Components, Code, Lists, Tables!
1010
description: Showcase of Markdown, MDC components, code blocks, lists, tables, and more using Comark.
11-
ogImage: '/social-card.png'
11+
ogImage: '/social-card.jpg'
1212
---
1313
1414
# Comark Playground
@@ -17,7 +17,7 @@ Try out a large markdown sample mixing **all the features**!
1717
1818
::u-alert{type="info"}
1919
#title
20-
This is an info alert!
20+
This is an info alert!
2121
You can put markdown **inside** MDC components.
2222
::
2323
@@ -39,12 +39,12 @@ You can put markdown **inside** MDC components.
3939
4040
## Headings
4141
42-
# h1
43-
## h2
44-
### h3
45-
#### h4
46-
##### h5
47-
###### h6
42+
# h1
43+
## h2
44+
### h3
45+
#### h4
46+
##### h5
47+
###### h6
4848
4949
---
5050
@@ -104,7 +104,7 @@ x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}
104104
105105
- Bullet item 1
106106
- Bullet item 2
107-
- Nested _item_
107+
- Nested _item_
108108
- Bullet: **Markdown works!**
109109
1. Numbered one
110110
2. Numbered two

‎docs/public/social-card.jpg‎

256 KB
Loading

‎docs/public/social-card.png‎

-120 KB
Binary file not shown.

0 commit comments

Comments
 (0)