feat: timeline option for not parsing text
This commit is contained in:
parent
a06cea5783
commit
c6659d6a46
1 changed files with 16 additions and 4 deletions
|
@ -15,8 +15,14 @@ import TimeLineItem from "./TimeLineItem.astro";
|
||||||
import { parse } from "ultrahtml";
|
import { parse } from "ultrahtml";
|
||||||
import {querySelectorAll} from 'ultrahtml/selector'
|
import {querySelectorAll} from 'ultrahtml/selector'
|
||||||
|
|
||||||
|
interface TimelineItem {
|
||||||
|
date: string;
|
||||||
|
title: string;
|
||||||
|
descriptionHTML: string;
|
||||||
|
}
|
||||||
|
|
||||||
/* These code has a lot of children LoL */
|
/* These code has a lot of children LoL */
|
||||||
function parseTimeLineContent(content: string) {
|
function parseTimeLineContent(content: string): TimelineItem[] {
|
||||||
if (!content) return [];
|
if (!content) return [];
|
||||||
const html = parse(content);
|
const html = parse(content);
|
||||||
|
|
||||||
|
@ -47,18 +53,24 @@ function parseTimeLineContent(content: string) {
|
||||||
return items;
|
return items;
|
||||||
}
|
}
|
||||||
|
|
||||||
const renderedHTML = await Astro.slots.render('default');
|
let timelineItems: TimelineItem[] = []
|
||||||
const timelineItems = parseTimeLineContent(renderedHTML);
|
|
||||||
|
|
||||||
|
const { parseFromText = true } = Astro.props;
|
||||||
|
|
||||||
|
if (parseFromText) {
|
||||||
|
const renderedHTML = await Astro.slots.render('default');
|
||||||
|
timelineItems = parseTimeLineContent(renderedHTML);
|
||||||
|
}
|
||||||
---
|
---
|
||||||
<ol class="timeline">
|
<ol class="timeline">
|
||||||
{timelineItems.map(item => (
|
{parseFromText && timelineItems.map(item => (
|
||||||
<li>
|
<li>
|
||||||
<TimeLineItem date={item.date} title={item.title}>
|
<TimeLineItem date={item.date} title={item.title}>
|
||||||
<Fragment set:html={item.descriptionHTML} />
|
<Fragment set:html={item.descriptionHTML} />
|
||||||
</TimeLineItem>
|
</TimeLineItem>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
|
{!parseFromText && <slot/>}
|
||||||
</ol>
|
</ol>
|
||||||
<style>
|
<style>
|
||||||
ol.timeline {
|
ol.timeline {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue