Skip to content

Commit a95ce1b

Browse files
GusevPMGusevPM
committed
Add og image and seo description
1 parent 29814d8 commit a95ce1b

5 files changed

Lines changed: 156 additions & 77 deletions

File tree

‎components/OgImage/ProposalImage.vue‎

Lines changed: 36 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,6 @@
22
/** Vendor */
33
import { DateTime } from "luxon"
44
5-
/** Services */
6-
import { comma, formatBytes } from "@/services/utils"
7-
85
defineOptions({
96
inheritAttrs: false,
107
})
@@ -22,10 +19,43 @@ const bgStyles = computed(() => {
2219
},
2320
}
2421
})
22+
23+
function truncateText(text = "", maxCharsPerLine = 30, maxLines = 2) {
24+
if (!text) return ""
25+
26+
const words = text.split(/\s+/)
27+
const lines = []
28+
let currentLine = ""
29+
30+
for (const word of words) {
31+
if ((currentLine + " " + word).trim().length <= maxCharsPerLine) {
32+
currentLine = (currentLine + " " + word).trim()
33+
} else {
34+
lines.push(currentLine)
35+
currentLine = word
36+
if (lines.length >= maxLines) break
37+
}
38+
}
39+
40+
if (lines.length < maxLines && currentLine) {
41+
lines.push(currentLine)
42+
}
43+
44+
if (lines.length > maxLines) {
45+
lines.length = maxLines
46+
}
47+
48+
// ellipsis
49+
if (lines.length === maxLines && words.join(" ").length > lines.join(" ").length) {
50+
lines[maxLines - 1] = lines[maxLines - 1].replace(/[.,;:!?-]*$/, "") + "…"
51+
}
52+
53+
return lines.join("\n")
54+
}
2555
</script>
2656

2757
<template>
28-
<div class="w-full h-full" :style="{ background: '#111111', padding: '100px', fontFamily: 'IBM+Plex+Mono', overflow: 'hidden' }">
58+
<div class="w-full h-full" :style="{ background: '#111111', padding: '100px', paddingBottom: '60px', fontFamily: 'IBM+Plex+Mono', overflow: 'hidden' }">
2959
<img src="/img/bg.png" width="1200" height="600" class="absolute" v-bind="bgStyles" />
3060

3161
<div :style="{ height: '100%', display: 'flex', flexDirection: 'column', gap: '32px' }">
@@ -39,8 +69,8 @@ const bgStyles = computed(() => {
3969
</span>
4070
</div>
4171

42-
<span :style="{ fontSize: '50px', color: 'rgba(255,255,255, 0.9)' }"> {{ proposal.title }} </span>
43-
<span :style="{ fontSize: '50px', color: 'rgba(255,255,255, 0.3)' }"> {{ proposal.description }} </span>
72+
<span :style="{ fontSize: '50px', color: 'rgba(255,255,255, 0.9)', whiteSpace: 'pre-line', }"> {{ truncateText(proposal.title) }} </span>
73+
<span :style="{ fontSize: '50px', color: 'rgba(255,255,255, 0.3)', whiteSpace: 'pre-line', }"> {{ truncateText(proposal.description) }} </span>
4474

4575
<div>
4676
<span :style="{ fontSize: '32px', color: 'rgba(255,255,255, 0.3)' }">Yes: </span>

‎components/OgImage/UpgradeImage.vue‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<script setup>
2+
/** Services */
3+
import { abbreviate } from "@/services/utils"
4+
5+
defineOptions({
6+
inheritAttrs: false,
7+
})
8+
9+
const props = defineProps({
10+
title: String,
11+
upgrade: Object,
12+
})
13+
14+
const bgStyles = computed(() => {
15+
return {
16+
style: {
17+
filter: "grayscale(1)",
18+
opacity: "0.05",
19+
},
20+
}
21+
})
22+
</script>
23+
24+
<template>
25+
<div class="w-full h-full" :style="{ background: '#111111', padding: '100px 50px', fontFamily: 'IBM+Plex+Mono', overflow: 'hidden' }">
26+
<img src="/img/bg.png" width="1200" height="600" class="absolute" v-bind="bgStyles" />
27+
28+
<div :style="{ height: '100%', display: 'flex', flexDirection: 'column', gap: '50px' }">
29+
<div :style="{ display: 'flex', alignItems: 'center' }">
30+
<span :style="{ fontSize: '60px', color: 'rgba(255,255,255, 0.9)' }">upgrade</span>
31+
<span :style="{ fontSize: '60px', color: 'rgba(255,255,255, 0.3)' }">('</span>
32+
<span :style="{ fontSize: '40px', color: '#FF8351' }"> Version {{ upgrade?.version }} </span>
33+
<span :style="{ fontSize: '60px', color: 'rgba(255,255,255, 0.3)' }">')</span>
34+
</div>
35+
36+
<div :style="{ display: 'flex', gap: '12px' }">
37+
<span :style="{ fontSize: '40px', color: 'rgba(255,255,255, 0.3)', paddingRight: '16px' }">Status: </span>
38+
<span :style="{ fontSize: '40px', color: 'rgba(255,255,255, 0.6)' }">
39+
{{
40+
upgrade.tx_hash
41+
? 'Applied'
42+
: upgrade?.votedShare > 83.33
43+
? 'Ready for Upgrade'
44+
: 'In Progress'
45+
}}
46+
</span>
47+
</div>
48+
49+
<div :style="{ display: 'flex' }">
50+
<span :style="{ fontSize: '40px', color: 'rgba(255,255,255, 0.3)', paddingRight: '16px' }">Total Stake: </span>
51+
<span :style="{ fontSize: '40px', color: 'rgba(255,255,255, 0.6)' }">{{ abbreviate(upgrade?.voting_power) }} TIA</span>
52+
</div>
53+
54+
<div :style="{ display: 'flex', gap: '12px' }">
55+
<span :style="{ fontSize: '40px', color: 'rgba(255,255,255, 0.3)', paddingRight: '16px' }">Total Voted: </span>
56+
<span :style="{ fontSize: '40px', color: 'rgba(255,255,255, 0.6)' }">{{ abbreviate(upgrade?.voted_power) }} TIA</span>
57+
</div>
58+
</div>
59+
</div>
60+
</template>

‎components/modules/upgrade/UpgradeOverview.vue‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,8 @@ import { capitilize, comma, isValidQueryParam, roundTo } from "@/services/utils"
2121
import { fetchSignals } from "@/services/api/validator"
2222
2323
/** Store */
24-
import { useAppStore } from "@/store/app.store"
2524
import { useCacheStore } from "@/store/cache.store"
2625
import { useModalsStore } from "@/store/modals.store"
27-
const appStore = useAppStore()
2826
const cacheStore = useCacheStore()
2927
const modalsStore = useModalsStore()
3028
@@ -49,8 +47,6 @@ const activeTab = ref(preselectedTab)
4947
5048
const isRefetching = ref(false)
5149
const signals = ref([])
52-
const totalStake = computed(() => (props.upgrade?.voting_power && props.upgrade?.voting_power !== "0") ? props.upgrade.voting_power : appStore.lastHead?.total_voting_power)
53-
const votingShare = computed(() => parseFloat(props.upgrade.voted_power) * 100 / parseFloat(totalStake.value))
5450
5551
const limit = 10
5652
const page = ref(route.query.page && isValidQueryParam(route.query.page) ? parseInt(route.query.page) : 1)
@@ -181,9 +177,9 @@ onMounted(() => {
181177
<Icon name="check-circle" size="14" color="brand" />
182178
<Text size="13" weight="600" color="primary">Applied</Text>
183179
</Flex>
184-
<Flex v-else-if="votingShare > 83.3" align="center" gap="6">
180+
<Flex v-else-if="upgrade.votedShare > 83.3" align="center" gap="6">
185181
<Icon name="zap-circle" size="14" color="brand" />
186-
<Text size="13" weight="600" color="primary">Ready for upgrade</Text>
182+
<Text size="13" weight="600" color="primary">Ready for Upgrade</Text>
187183
</Flex>
188184
<Flex v-else align="center" gap="6">
189185
<Icon name="zap-circle" size="14" color="tertiary" />
@@ -227,7 +223,7 @@ onMounted(() => {
227223
</Tooltip>
228224
229225
<Text size="12" weight="600" color="primary">
230-
<Text :color="votingShare > 83.3 ? 'brand' : 'tertiary'"> {{ roundTo(votingShare, 2) }}% </Text> / 83.3%
226+
<Text :color="upgrade.votedShare > 83.3 ? 'brand' : 'tertiary'"> {{ roundTo(upgrade.votedShare, 2) }}% </Text> / 83.3%
231227
</Text>
232228
</Flex>
233229
<Flex align="center" gap="4" :class="$style.voting_wrapper">
@@ -236,7 +232,7 @@ onMounted(() => {
236232
<div
237233
:style="{
238234
background: 'var(--brand)',
239-
width: `${Math.max(2, roundTo(votingShare, 0, 'ceil'))}%`
235+
width: `${Math.max(2, roundTo(upgrade.votedShare, 0, 'ceil'))}%`
240236
}"
241237
:class="$style.voting_bar"
242238
/>
@@ -258,7 +254,7 @@ onMounted(() => {
258254
</template>
259255
</Tooltip>
260256
</Flex>
261-
<AmountInCurrency :amount="{ value: totalStake, unit: 'TIA' }" />
257+
<AmountInCurrency :amount="{ value: upgrade?.voting_power, unit: 'TIA' }" />
262258
</Flex>
263259
<Flex align="center" justify="between">
264260
<Text size="12" weight="600" color="tertiary">Total Voted</Text>
@@ -425,7 +421,7 @@ onMounted(() => {
425421
426422
<Flex direction="column" justify="center" gap="8" :class="[$style.table, isRefetching && $style.disabled]">
427423
<template v-if="activeTab === 'signals'">
428-
<SignalsTable v-if="signals.length" :signals="signals" :totalStake="totalStake" />
424+
<SignalsTable v-if="signals.length" :signals="signals" :totalStake="upgrade?.voting_power" />
429425
430426
<Flex v-else align="center" justify="center" direction="column" gap="8" wide :class="$style.empty">
431427
<Text size="13" weight="600" color="secondary" align="center"> No signals </Text>

‎pages/proposal/[id].vue‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -23,28 +23,12 @@ if (isValidId(route.params.id, "proposal")) {
2323
2424
if (!rawProposal.value) {
2525
throw createError({ statusCode: 404, statusMessage: `Proposal ${route.params.id} not found` })
26-
// navigateTo({
27-
// path: "/",
28-
// query: {
29-
// error: "not_found",
30-
// target: "proposal",
31-
// id: route.params.id,
32-
// },
33-
// })
3426
} else {
3527
proposal.value = rawProposal.value
3628
cacheStore.current.proposal = proposal.value
3729
}
3830
} else {
3931
throw createError({ statusCode: 404, statusMessage: `Proposal ${route.params.id} not found` })
40-
// navigateTo({
41-
// path: "/",
42-
// query: {
43-
// error: "not_found",
44-
// target: "proposal",
45-
// id: route.params.id,
46-
// },
47-
// })
4832
}
4933
5034
defineOgImageComponent("ProposalImage", {
@@ -108,7 +92,7 @@ useHead({
10892
10993
<Flex v-if="proposal" direction="column" gap="40">
11094
<ProposalOverview :proposal />
111-
<ProposalChanges :proposal v-if="proposal.type === 'param_changed'" />
95+
<ProposalChanges v-if="proposal.type === 'param_changed'" :proposal />
11296
<ProposalDescription :proposal />
11397
</Flex>
11498
</Flex>

‎pages/upgrade/[version].vue‎

Lines changed: 53 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import UpgradeOverview from "@/components/modules/upgrade/UpgradeOverview.vue"
66
import { isValidId } from "@/services/utils"
77
88
/** API */
9+
import { fetchHead } from "@/services/api/main"
910
import { fetchValidatorsUpgradeByVersion } from "@/services/api/validator"
1011
1112
/** Store */
@@ -21,6 +22,14 @@ if (isValidId(route.params.version, "upgrade_version")) {
2122
2223
if (data.value) {
2324
upgrade.value = data.value
25+
if (!upgrade.value.tx_hash) {
26+
const head = await fetchHead()
27+
if (head) {
28+
upgrade.value.voting_power = head.total_voting_power
29+
}
30+
}
31+
32+
upgrade.value.votedShare = parseFloat(upgrade.value.voted_power) * 100 / parseFloat(upgrade.value.voting_power)
2433
cacheStore.current.upgrade = upgrade.value
2534
} else {
2635
throw createError({ statusCode: 404, statusMessage: `Upgrade to version ${route.params.version} not found` })
@@ -29,51 +38,51 @@ if (isValidId(route.params.version, "upgrade_version")) {
2938
throw createError({ statusCode: 404, statusMessage: `Upgrade to version ${route.params.version} not found` })
3039
}
3140
32-
// defineOgImageComponent("ValidatorImage", {
33-
// title: "Validator",
34-
// validator: validator.value,
35-
// cacheKey: `${validator.value?.moniker || validator.value?.address?.hash}`,
36-
// })
41+
defineOgImageComponent("UpgradeImage", {
42+
title: "Upgrade",
43+
upgrade: upgrade.value,
44+
cacheKey: `${upgrade.value?.version}`,
45+
})
3746
38-
// useHead({
39-
// title: `Validator ${validator.value?.moniker} - Celenium`,
40-
// link: [
41-
// {
42-
// rel: "canonical",
43-
// href: `${useRequestURL().origin}${useRequestURL().pathname}`,
44-
// },
45-
// ],
46-
// meta: [
47-
// {
48-
// name: "description",
49-
// content: `Validator ${validator.value?.moniker} blocks, metadata, uptime, rates, social links, contacts and other data.`,
50-
// },
51-
// {
52-
// property: "og:title",
53-
// content: `Validator ${validator.value?.moniker} - Celenium`,
54-
// },
55-
// {
56-
// property: "og:description",
57-
// content: `Validator ${validator.value?.moniker} blocks, metadata, uptime, rates, social links, contacts and other data.`,
58-
// },
59-
// {
60-
// property: "og:url",
61-
// content: `${useRequestURL().origin}${useRequestURL().pathname}`,
62-
// },
63-
// {
64-
// name: "twitter:title",
65-
// content: `Validator ${validator.value?.moniker} - Celenium`,
66-
// },
67-
// {
68-
// name: "twitter:description",
69-
// content: `Validator ${validator.value?.moniker} blocks, metadata, uptime, rates, social links, contacts and other data.`,
70-
// },
71-
// {
72-
// name: "twitter:card",
73-
// content: "summary_large_image",
74-
// },
75-
// ],
76-
// })
47+
useHead({
48+
title: `Celestia Node Upgrade to version ${upgrade.value?.version} - Celenium`,
49+
link: [
50+
{
51+
rel: "canonical",
52+
href: `${useRequestURL().origin}${useRequestURL().pathname}`,
53+
},
54+
],
55+
meta: [
56+
{
57+
name: "description",
58+
content: `Upgrade v${upgrade.value?.version} signals, metadata, stake, voting, progress and other data.`,
59+
},
60+
{
61+
property: "og:title",
62+
content: `Celestia Node Upgrade to version ${upgrade.value?.version} - Celenium`,
63+
},
64+
{
65+
property: "og:description",
66+
content: `Upgrade v${upgrade.value?.version} signals, metadata, stake, voting, progress and other data.`,
67+
},
68+
{
69+
property: "og:url",
70+
content: `${useRequestURL().origin}${useRequestURL().pathname}`,
71+
},
72+
{
73+
name: "twitter:title",
74+
content: `Celestia Node Upgrade to version ${upgrade.value?.version} - Celenium`,
75+
},
76+
{
77+
name: "twitter:description",
78+
content: `Upgrade v${upgrade.value?.version} signals, metadata, stake, voting, progress and other data.`,
79+
},
80+
{
81+
name: "twitter:card",
82+
content: "summary_large_image",
83+
},
84+
],
85+
})
7786
</script>
7887
7988
<template>

0 commit comments

Comments
 (0)