778beddb5e
Summary: migrate notice-board component Ref T2920 Reviewers: #testers, kuba-orlik Reviewed By: #testers, kuba-orlik Subscribers: kuba-orlik, jenkins-user Maniphest Tasks: T2920 Differential Revision: https://hub.sealcode.org/D1601
105 lines
2.6 KiB
TypeScript
105 lines
2.6 KiB
TypeScript
import { TempstreamJSX } from "tempstream";
|
|
import type { ComponentToHTMLArgs } from "@sealcode/jdd";
|
|
import { Component, ComponentArguments } from "@sealcode/jdd";
|
|
import TelegramIcon from "./icons/telegram.svg";
|
|
import EmailIcon from "./icons/email.svg";
|
|
import ForumIcon from "./icons/forum.svg";
|
|
import IRCIcon from "./icons/irc.svg";
|
|
|
|
const component_arguments = {
|
|
title: new ComponentArguments.ShortText(),
|
|
image: new ComponentArguments.Image(),
|
|
leftheader: new ComponentArguments.ShortText(),
|
|
rightheader: new ComponentArguments.ShortText(),
|
|
links: new ComponentArguments.List(
|
|
new ComponentArguments.Structured({
|
|
href: new ComponentArguments.ShortText(),
|
|
name: new ComponentArguments.ShortText(),
|
|
icon: new ComponentArguments.Enum(["Telegram", "Forum", "Email", "IRC"]),
|
|
title: new ComponentArguments.ShortText(),
|
|
})
|
|
),
|
|
} as const;
|
|
|
|
const iconNameToIcon: Record<string, string | undefined> = {
|
|
Telegram: TelegramIcon.url,
|
|
Email: EmailIcon.url,
|
|
Forum: ForumIcon.url,
|
|
IRC: IRCIcon.url,
|
|
};
|
|
|
|
const renderContact = ({
|
|
href,
|
|
name,
|
|
icon,
|
|
title,
|
|
}: {
|
|
href: string;
|
|
name: string;
|
|
icon: string;
|
|
title: string;
|
|
}) => {
|
|
const icon_url = iconNameToIcon[icon];
|
|
if (!icon_url) {
|
|
return " ";
|
|
}
|
|
return (
|
|
<div class="notice-board__contact">
|
|
<a
|
|
class="notice-board__contact-icon"
|
|
href={href}
|
|
{...(title ? { title } : {})}
|
|
>
|
|
<img src={icon_url} alt={name} width="55" height="55" />
|
|
<span>{name}</span>
|
|
</a>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export class NoticeBoard extends Component<typeof component_arguments> {
|
|
getArguments() {
|
|
return component_arguments;
|
|
}
|
|
|
|
async toHTML({
|
|
args: { title, image, links, rightheader, leftheader },
|
|
classes,
|
|
jdd_context: { render_markdown, render_image, language },
|
|
}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
|
|
return (
|
|
<section class={["nb-root", ...classes]}>
|
|
<div class="notice-board">
|
|
{title && (
|
|
<div
|
|
class="notice-board__anchor-point"
|
|
id={render_markdown(language, title)}
|
|
></div>
|
|
)}
|
|
<div class="notice-board__background">
|
|
{render_image(image, {
|
|
resolutions: [800, 1000, 1200, 1500, 2000],
|
|
sizesAttr: "100vw",
|
|
alt: "",
|
|
})}
|
|
</div>
|
|
<div class="notice-board__body">
|
|
<div class="notice-board__body-inner">
|
|
<h2 class="notice-board__header-main">
|
|
{render_markdown(language, leftheader)}
|
|
</h2>
|
|
|
|
<h3 class="notice-board__header-minor">
|
|
{render_markdown(language, rightheader)}
|
|
</h3>
|
|
<address class="notice-board__contacts">
|
|
{links.map(renderContact)}
|
|
</address>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
}
|