103 lines
2.8 KiB
TypeScript
103 lines
2.8 KiB
TypeScript
import {
|
|
ARTISTS_OR_CREATORS,
|
|
BANNER_WELCOME,
|
|
HOME_BACKGROUND_IMAGE,
|
|
HOME_LOGO_PATH,
|
|
HOME_MASCOT_PATH,
|
|
HOME_WELCOME_CREDITS,
|
|
SITE_NAME,
|
|
} from "#env/env-vars";
|
|
import { AVAILABLE_PAYSITE_LIST } from "#env/derived-vars";
|
|
import { PageSkeleton } from "#components/pages";
|
|
import { KemonoLink } from "#components/links";
|
|
|
|
export function HomePage() {
|
|
const title = "Welcome";
|
|
|
|
return (
|
|
<PageSkeleton name="home" title={title}>
|
|
{!BANNER_WELCOME ? undefined : (
|
|
<div dangerouslySetInnerHTML={{ __html: atob(BANNER_WELCOME) }} />
|
|
)}
|
|
|
|
<div className="jumbo-welcome">
|
|
<div
|
|
className="jumbo-welcome-background"
|
|
style={
|
|
!HOME_BACKGROUND_IMAGE
|
|
? undefined
|
|
: {
|
|
backgroundImage: `url('${HOME_BACKGROUND_IMAGE}')`,
|
|
}
|
|
}
|
|
></div>
|
|
|
|
{!HOME_MASCOT_PATH ? undefined : (
|
|
<div className="jumbo-welcome-mascot">
|
|
<div>
|
|
<img src={HOME_MASCOT_PATH} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<Description />
|
|
</div>
|
|
|
|
{BUNDLER_ENV_HOME_ANNOUNCEMENTS?.map((announcement) => (
|
|
<div className="jumbo-announcement">
|
|
<div className="announcement-title-container">
|
|
<h3>{announcement.title}</h3>
|
|
<div className="date">{announcement.date}</div>
|
|
</div>
|
|
<p
|
|
className="announcement-text"
|
|
dangerouslySetInnerHTML={{ __html: announcement.content }}
|
|
/>
|
|
</div>
|
|
))}
|
|
</PageSkeleton>
|
|
);
|
|
}
|
|
|
|
function Description() {
|
|
return (
|
|
<div className="jumbo-welcome-description">
|
|
{!HOME_LOGO_PATH ? undefined : (
|
|
<div className="jumbo-welcome-description-header">
|
|
<img src={HOME_LOGO_PATH} width="50px" height="50px" />
|
|
</div>
|
|
)}
|
|
|
|
<p>
|
|
<strong>{SITE_NAME}</strong> is a public archiver for:
|
|
</p>
|
|
|
|
<ul>
|
|
{AVAILABLE_PAYSITE_LIST.map((paysite, index) => (
|
|
<li key={index}>{paysite.title}</li>
|
|
))}
|
|
</ul>
|
|
|
|
<p>
|
|
Contributors here upload content and share it here for easy searching
|
|
and organization. To get started viewing content, either search for
|
|
creators on the{" "}
|
|
<KemonoLink url="/artists">
|
|
{ARTISTS_OR_CREATORS.toLowerCase()} page
|
|
</KemonoLink>
|
|
, or search for content on the{" "}
|
|
<KemonoLink url="/posts">posts page</KemonoLink>. If you want to
|
|
contribute content, head over to the{" "}
|
|
<KemonoLink url="/importer">import page</KemonoLink>.
|
|
</p>
|
|
|
|
{!HOME_WELCOME_CREDITS ? undefined : (
|
|
<div
|
|
className="jumbo-welcome-credits"
|
|
dangerouslySetInnerHTML={{ __html: atob(HOME_WELCOME_CREDITS) }}
|
|
></div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|