REMOVE: RichText

Removed all traces of RichText implementation in Favor of NuxtContent
This commit is contained in:
webfussel 2025-06-10 07:48:21 +02:00
parent 73f09ad76e
commit 4e953392fc
23 changed files with 38 additions and 412 deletions

View file

@ -1,13 +1,13 @@
<template>
<section id="skills_easy" class="Skills content">
<h2>Jetzt mal ganz konkret.</h2>
<h3>In diesem Abschnitt ganz <span class="highlight">ohne Technik-Blabla</span>.</h3>
<h3>In diesem Abschnitt ganz <Highlight>ohne Technik-Blabla</Highlight>.</h3>
<div class="skill-container flex-col margin-top gap-default">
<ContentRenderer v-for="skill in skills" :key="skill.id" :value="skill" :style="{ display: 'contents' }" />
</div>
<div class="bottom flex-col margin-top gap-default">
<h3>Verwirkliche jetzt dein Webprojekt.</h3>
<Button href="/booking" class="cta">
<Button href="/booking/" class="cta">
<Icon name="ph:chat-circle-text-duotone" size="1.5em" mode="svg" />
Lass mal reden
</Button>
@ -16,246 +16,5 @@
</template>
<script setup lang="ts">
import type { RichText } from '@/components/RichText/Types'
type Skill = {
img: string
title: string
text: RichText[]
}
const getExplanationImage = (img : string) => getImage('/img/explanations/', img)
// const skills : Skill[] = [
// {
// img: 'components',
// title: 'Das, was du sehen kannst',
// text: [
// {
// type: 'p',
// children: [
// {
// type: 'plain',
// content: 'Die meisten Anwendungen haben eine grafische Benutzeroberfläche - die so genannte GUI. Wenn etwas graphisch ist, ' +
// 'dann bedeutet das auch natürlich, dass es sinnvoll dargestellt werden muss. Dafür verwenden wir kleine Bausteine, die wir Komponenten nennen.',
// }
// ]
// },
// {
// type: 'p',
// children: [
// {
// type: 'plain',
// content: 'Grundsätzlich lassen sich komplette Anwendungen und auch einfache Webseiten ziemlich cool über Komponenten aufbauen, sodass wir wiederkehrende Elemente ' +
// 'wie Buttons, Textabschnitte, Links oder Teaser immer wieder verwenden können - selbst wenn sich diese in ihren Details wie Farben oder Icons unterscheiden.',
// }
// ]
// },
// {
// type: 'p',
// children: [
// {
// type: 'plain',
// content: 'Diese Komponenten so zu entwickeln, dass sie wirklich flexibel sind und auch perfekt mit dem Design übereinstimmen ist gar nicht so einfach, denn oft sollten sie ' +
// 'auch mehr können als im Design kurzfristig ersichtlich ist.',
// }
// ]
// },
// {
// type: 'p',
// css: 'place-bottom bold',
// children: [
// {
// type: 'plain',
// content: 'Diese Voraussicht, für den Fall der Fälle vorzusorgen:',
// },
// {
// type: 'br',
// },
// {
// type: 'plain',
// content: 'Die gibt\'s bei mir dazu.',
// },
// {
// type: 'br',
// },
// {
// type: 'span',
// css: 'highlight',
// content: 'Fussel-Ehrenwort.'
// }
// ]
// },
// ],
// }, {
// img: 'cms',
// title: 'Da, wo du eintragen kannst',
// text: [
// {
// type: 'p',
// children: [
// {
// type: 'plain',
// content: 'In vielen Fällen ist es natürlich praktisch, wenn du einfach Inhalte einer Seite auf das ändern kannst, was gerade aktuell ist, ohne auf andere angewiesen zu sein.'
// + 'Damit das reibungslos möglich ist, entwickle ich dir gerne eine Anwendung oder Homepage, deren Inhalte du komplett selbst auf dem neuesten Stand halten kannst - und zwar '
// + 'mit einem sogenannten CMS - ein ',
// },
// {
// type: 'span',
// css: 'highlight',
// content: 'C'
// },
// {
// type: 'plain',
// content: 'ontent '
// },
// {
// type: 'span',
// css: 'highlight',
// content: 'M'
// },
// {
// type: 'plain',
// content: 'anagement '
// },
// {
// type: 'span',
// css: 'highlight',
// content: 'S'
// },
// {
// type: 'plain',
// content: 'ystem.'
// },
// ]
// },
// {
// type: 'p',
// children: [
// {
// type: 'plain',
// content: 'Für CMS setze ich in erster Linie auf die cloudbasierte Lösung ',
// },
// {
// type: 'a',
// target: '_blank',
// css: 'text',
// href: 'https://www.storyblok.com',
// content: 'Storyblok'
// },
// {
// type: 'plain',
// content: '. Dies stellt für die Meisten eine kostenlose bis kostengünstige Lösung dar ohne viel technisches Wissen mitbringen zu müssen.',
// }
// ]
// },
// {
// type: 'p',
// children: [
// {
// type: 'plain',
// content: 'Falls du aber nicht möchtest, dass deine Daten auf irgendeinem Fremden server liegen - was ich durchaus verstehen kann! - dann gibt es auch die Möglichkeit mit ',
// },
// {
// type: 'a',
// target: '_blank',
// css: 'text',
// href: 'https://www.strapi.io',
// content: 'Strapi'
// },
// {
// type: 'plain',
// content: ' selbst das eigene CMS zu hosten. Das musst du dann aber allerdings selbst erledigen oder ich erledige das für dich für einen Aufpreis.',
// }
// ]
// },
// {
// type: 'p',
// css: 'place-bottom bold',
// children: [
// {
// type: 'plain',
// content: 'Nie wieder jemand anderen Fragen zu müssen, um deine Website auf dem neuesten Stand zu halten.',
// },
// {
// type: 'br',
// },
// {
// type: 'span',
// css: 'highlight',
// content: 'Mit Fussel-Garantie.'
// }
// ]
// },
// ],
// }, {
// img: 'result',
// title: 'Was dabei am Ende rauskommt',
// text: [
// {
// type: 'p',
// children: [
// {
// type: 'plain',
// content: 'Grundsätzlich lässt sich das ganz einfach zusammenfassen: ',
// },
// {
// type: 'span',
// css: 'highlight',
// content: 'Dein persönlicher Webauftritt.',
// }
// ]
// },
// {
// type: 'p',
// children: [
// {
// type: 'plain',
// content: 'Ob du nun etwas kleineres brauchst, um ein paar Hobbies zu zeigen. Oder vielleicht etwas größeres, weil du dir ein eigenes Business aufbauen willst. Eventuell ein eigener Blog, eine komplette Applikation oder '
// + 'die Möglichkeit für andere Leute deine Daten bereit zu stellen. All das, das kann ich dir mit meinen Fähigkeiten und meiner Erfahrung bieten.'
// }
// ]
// },
// {
// type: 'p',
// children: [
// {
// type: 'plain',
// content: 'Erkunde einfach meine ',
// },
// {
// type: 'a',
// href: '/references',
// content: 'Referenzen'
// },
// {
// type: 'plain',
// content: ' und dir wird auffallen, dass diese äußerst durchmischt und bunt sind. So individuell wie die Projekte meiner bisherigen Kunden wird auch dein Projekt behandelt. Und auch, wenn '
// + 'du glaubst, dass die Referenzen nicht zu deinem Projekt passen, werden wir deine ganz individuelle Lösung gemeinsam erarbeiten.'
// }
// ]
// },
// {
// type: 'p',
// css: 'place-bottom bold',
// children: [
// {
// type: 'plain',
// content: 'Denn jedes Projekt ist etwas eigenes und besonderes.',
// },
// {
// type: 'br',
// },
// {
// type: 'span',
// css: 'highlight',
// content: 'Auch deins.'
// }
// ]
// },
// ],
// }
// ]
const skills = await queryCollection('skills').all()
</script>