webfussel/wf4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ADD: richtext system

Browse source 
Added richtext system for better card content.
This commit is contained in:
webfussel 2025-02-21 14:31:35 +01:00
parent a325d52052
commit 932796aef1
2 changed files with 33 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

12
app/assets/css/global.css
View file

@ -98,6 +98,7 @@ a {
a.text {
color: var(--color-orange);
text-decoration: underline;
&:hover {
color: var(--color-orange-light);
@ -185,6 +186,17 @@ span.chip {
}
}
.inline-flex-row {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: .2em;
&.reverse {
flex-direction: row-reverse;
}
}
.flex-col {
display: flex;
flex-direction: column;

25
app/components/SkillsEasy.vue
View file

@ -8,15 +8,20 @@
<div class="flex-col gap-default">
<h3>{{skill.title}}</h3>
<main class="flex-col gap-sm">
<component v-for="({type, children, content, ...rest}, textIndex) in skill.text" :is="type" v-bind="rest">
<component v-for="({type, content, ...rest}) in skill.text" :is="type" v-bind="rest">
{{ content}}
<template v-if="children">
<template v-for="({type, content, ...rest}, childIndex) in children" :key="childIndex">
<template v-if="'children' in rest && rest.children">
<template v-for="({type, content, ...childRest}, childIndex) in rest.children" :key="childIndex">
<template v-if="type === 'text'">
{{ content }}
</template>
<template v-else-if="type === 'a'">
<component :is="type" v-bind="childRest" class="inline-flex-row">
{{ content}} <Icon v-if="'icon' in childRest && childRest.icon" :name="childRest.icon.name" mode="svg" :class="childRest.icon.position === 'end' && 'reverse'" />
</component>
</template>
<template v-else>
<component :is="type" v-bind="rest">
<component :is="type" v-bind="childRest">
{{ content}}
</component>
</template>
@ -47,6 +52,10 @@ type RichTextLink = {
type: 'a'
content: string
href: string
icon ?: {
name: string
position : 'start' | 'end'
}
target ?: string
class ?: string
}
@ -140,6 +149,10 @@ const skills : Skill[] = [
target: '_blank',
class: 'text',
href: 'https://www.storyblok.com',
icon: {
name: 'ph:arrow-square-out-duotone',
position: 'end',
},
content: 'Storyblok'
},
{
@ -157,6 +170,10 @@ const skills : Skill[] = [
target: '_blank',
class: 'text',
href: 'https://www.strapi.io',
icon: {
name: 'ph:arrow-square-out-duotone',
position: 'end',
},
content: 'Strapi'
},
{