ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(course): make coursesNo and reward description optional; render landing HTML safely

Browse Source 
- Allow coursesNo to be omitted in instructor metadata (not required)
- Allow reward description to be omitted when reward object is present
- Replace raw {@html} with SafeHtmlContent in course-pricing,
  course-info-blocks, and embed landing-page components
This commit is contained in:
Rotimi Best
2026-06-16 02:57:23 +01:00
parent 38d912a0b1
commit 2350315321
4 changed files with 14 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/custom/org-landing-page/course-info-blocks.svelte
+6 -5
View File
@@ -3,6 +3,7 @@
import { courseLandingTokens } from './course-landing-page.tokens';
import EditableLandingSection from './editable-section.svelte';
import AwardIcon from '@lucide/svelte/icons/award';
import SafeHtmlContent from '../safe-html-content/safe-html-content.svelte';
interface Props {
variant: OrgLandingPageTheme;
@@ -79,7 +80,7 @@
<article id={block.id} class={t.infoBlock}>
<span class={t.infoBlockEyebrow}>{block.eyebrow}</span>
<h2 class={t.infoBlockHeading}>{block.heading}</h2>
<div class={t.infoBlockBody}>{@html block.html}</div>
<div class={t.infoBlockBody}><SafeHtmlContent content={block.html} /></div>
</article>
</EditableLandingSection>
{/each}
@@ -91,7 +92,7 @@
<article id={block.id} class={t.infoBlock}>
<span class={t.infoBlockEyebrow}>{block.eyebrow}</span>
<h2 class={t.infoBlockHeading}>{block.heading}</h2>
<div class={t.infoBlockBody}>{@html block.html}</div>
<div class={t.infoBlockBody}><SafeHtmlContent content={block.html} /></div>
</article>
</EditableLandingSection>
{/each}
@@ -114,7 +115,7 @@
</div>
<div class="ui:p-6">
<h2 class={`${t.infoBlockHeading} ui:mb-3`}>{block.heading}</h2>
<div class={t.infoBlockBody}>{@html block.html}</div>
<div class={t.infoBlockBody}><SafeHtmlContent content={block.html} /></div>
</div>
</article>
</EditableLandingSection>
@@ -138,7 +139,7 @@
</div>
<div>
<h2 class={`${t.infoBlockHeading} ui:mb-4`}>{block.heading}</h2>
<div class={t.infoBlockBody}>{@html block.html}</div>
<div class={t.infoBlockBody}><SafeHtmlContent content={block.html} /></div>
</div>
</article>
</EditableLandingSection>
@@ -153,7 +154,7 @@
<span class={t.infoBlockEyebrow}>{block.eyebrow}</span>
<h2 class={`${t.infoBlockHeading} ui:mt-2`}>{block.heading}</h2>
</div>
<div class={t.infoBlockBody}>{@html block.html}</div>
<div class={t.infoBlockBody}><SafeHtmlContent content={block.html} /></div>
</article>
</EditableLandingSection>
{/each}
packages/ui/src/custom/org-landing-page/course-pricing.svelte
+2 -1
View File
@@ -5,6 +5,7 @@
import LandingButton from './landing-button.svelte';
import CheckIcon from '@lucide/svelte/icons/check';
import GiftIcon from '@lucide/svelte/icons/gift';
import SafeHtmlContent from '../safe-html-content/safe-html-content.svelte';
interface Props {
variant: OrgLandingPageTheme;
@@ -80,7 +81,7 @@
<GiftIcon class="ui:size-4 ui:text-[var(--landing-accent)]" />
<span class={t.pricingRewardLabel}>{labels?.pricingRewardLabel ?? 'Bonus'}</span>
</div>
<p>{pricing.reward.description}</p>
<div><SafeHtmlContent content={pricing.reward.description} /></div>
</div>
{/if}
</div>
packages/ui/src/custom/org-landing-page/embed.svelte
+4 -3
View File
@@ -2,6 +2,7 @@
import type { OrgLandingPageLabels, OrgLandingPageTheme, LandingPageEmbed } from './types';
import SecondaryActionButton from './secondary-action-button.svelte';
import EditableLandingSection from './editable-section.svelte';
import SafeHtmlContent from '../safe-html-content/safe-html-content.svelte';
let {
embed,
@@ -51,7 +52,7 @@
style="border: 1px solid #262a35; background: #0f1218; box-shadow: 0 30px 90px -30px rgba(0,0,0,0.7);"
>
<div class="ui:p-5 ui:overflow-x-auto" style="color: #e9eaed;">
{@html embed.code}
<SafeHtmlContent content={embed.code} />
</div>
</div>
{/if}
@@ -76,7 +77,7 @@
{/if}
{#if embed.code}
<div class="ui:flex ui:w-full ui:justify-center">
{@html embed.code}
<SafeHtmlContent content={embed.code} />
</div>
{/if}
</div>
@@ -95,7 +96,7 @@
{/if}
{#if embed.code}
<div class="ui:flex ui:w-full ui:justify-center">
{@html embed.code}
<SafeHtmlContent content={embed.code} />
</div>
{/if}
</div>
packages/utils/src/validation/course/course.ts
+2 -2
View File
@@ -285,7 +285,7 @@ export type TCourseCreate = z.infer<typeof ZCourseCreate>;
export const ZCourseReward = z.object({
show: z.boolean(),
description: z.string()
description: z.string().optional()
});
const METADATA_NULLABLE_STRING_KEYS = ['requirements', 'description', 'goals', 'videoUrl', 'paymentLink'] as const;
@@ -320,7 +320,7 @@ function preprocessCourseMetadata(value: unknown): unknown {
export const ZCourseInstructor = z.object({
name: z.string(),
role: z.string(),
coursesNo: z.coerce.number(),
coursesNo: z.coerce.number().optional(),
description: z.string(),
imgUrl: z.string()
});