22/** Vendor */
33import { DateTime } from " luxon"
44
5- /** Services */
6- import { comma , formatBytes } from " @/services/utils"
7-
85defineOptions ({
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+ }
2555script >
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)' }" span >
43- <span :style =" { fontSize: '50px', color: 'rgba(255,255,255, 0.3)' }" 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)' }" span >
0 commit comments