wah.su/wahs.wah.su
1
0
Fork 0
mirror of https://github.com/wah-su/wahs.wah.su.git synced 2025-04-05 15:54:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add Header

Browse source
This commit is contained in:
Kentai Radiquum 2025-01-30 00:52:45 +05:00
parent 236246a83f
commit 0c3130e95f
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
7 changed files with 203 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/build.tsx
View file

@ -117,10 +117,10 @@ let html = renderToString(
<IndexPage
title="Wah-Collection"
environment={environment}
path="/"
head={{
description: "Home page of Wah-Collection by @radiquum",
image: "https://s3.tebi.io/wahs.wah.su/red_panda/1928. bqiKzsaDPlw.jpg",
path: "/",
url: process.env.WEB_URL as string,
preload: [
`${environment == "prod" ? process.env.WEB_URL : "."}/data/images.json`,

BIN
src/static/logo-1x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

52
src/static/logo.svg Normal file
View file

@ -0,0 +1,52 @@
<svg width="551" height="111" viewBox="0 0 551 111" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_33_157)">
<g clip-path="url(#clip1_33_157)">
<g clip-path="url(#clip2_33_157)">
<g clip-path="url(#clip3_33_157)">
<g clip-path="url(#clip4_33_157)">
<g clip-path="url(#clip5_33_157)">
<path d="M0 53.0013C0 23.7292 23.4314 0 52.3351 0C81.2393 0 104.67 23.7297 104.671 53.0013C104.671 82.2734 81.2393 106.003 52.3351 106.003C23.4309 106.003 0 82.2734 0 53.0013ZM52.3351 102.388C79.2679 102.388 101.101 80.277 101.101 53.0013C101.101 25.7256 79.2679 3.6147 52.3351 3.6147C25.4023 3.6147 3.56927 25.7261 3.56927 53.0013C3.56927 80.277 25.4027 102.388 52.3351 102.388Z" fill="#FE633D"/>
<path d="M52.3354 105.473C80.9503 105.473 104.147 81.9807 104.147 53.0015C104.147 24.0223 80.9503 0.530029 52.3354 0.530029C23.7204 0.530029 0.523438 24.0223 0.523438 53.0015C0.523438 81.9807 23.7204 105.473 52.3354 105.473Z" fill="#FE633D"/>
<g clip-path="url(#clip6_33_157)">
<g clip-path="url(#clip7_33_157)">
<path d="M81.0596 52.8843C81.0596 56.9643 77.8002 60.2633 73.7698 60.2633C69.7465 60.2633 66.4854 56.9643 66.4854 52.8843C66.4854 48.8099 73.1235 42.1573 77.1485 42.1573C81.1808 42.1573 81.0596 48.8099 81.0596 52.8843Z" fill="white"/>
<path d="M38.1869 52.8843C38.1869 56.9643 34.9276 60.2633 30.8962 60.2633C26.8721 60.2633 23.6136 56.9643 23.6136 52.8843C23.6136 48.8099 23.365 42.1573 27.3882 42.1573C31.4196 42.1573 38.1869 48.8099 38.1869 52.8843Z" fill="white"/>
<path d="M68.7905 38.1255C68.7905 42.2045 65.5312 45.5054 61.5025 45.5054C57.4775 45.5054 54.2163 42.2045 54.2163 38.1255C54.2163 34.052 57.4775 24.5085 61.5025 24.5085C65.5312 24.5076 68.7905 34.051 68.7905 38.1255Z" fill="white"/>
<path d="M70.3857 67.1504C72.3408 75.3085 64.095 81.7211 51.9507 81.4884C39.819 81.2547 31.7168 74.6539 33.846 66.7295C35.9716 58.8151 44.2165 52.3925 52.2658 52.3925C60.3239 52.3934 68.4315 59.0042 70.3857 67.1504Z" fill="white"/>
<path d="M50.3321 38.1255C50.3321 42.2045 47.0719 45.5054 43.0432 45.5054C39.0173 45.5054 35.7588 42.2045 35.7588 38.1255C35.7588 34.052 39.0173 24.5085 43.0432 24.5085C47.0719 24.5076 50.3321 34.051 50.3321 38.1255Z" fill="white"/>
</g>
</g>
</g>
</g>
<path d="M144.44 96.7675H134.078L120.47 37.3439H129.334L140.07 85.6414L150.682 43.5392H159.421L170.033 85.6414L180.769 37.3439H189.134L175.526 96.7675H165.289L154.927 55.171L144.44 96.7675ZM221.718 98.2847C214.56 98.2847 209.026 96.6157 205.114 93.2779C201.202 89.9569 199.246 85.3463 199.246 79.4461C199.246 73.7988 201.077 69.5001 204.739 66.55C208.401 63.5999 213.895 62.1248 221.219 62.1248H243.691V59.5961C243.691 54.1174 242.417 50.2148 239.87 47.8885C237.34 45.5789 233.037 44.4242 226.962 44.4242C219.138 44.4242 212.064 46.1521 205.738 49.6079L202.867 41.6427C210.024 37.7654 218.181 35.8267 227.336 35.8267C236.158 35.8267 242.584 37.6137 246.612 41.1875C250.657 44.7782 252.679 50.4508 252.679 58.2054V96.7675H245.938L244.814 90.4458C241.402 93.0588 237.781 95.0143 233.953 96.3123C230.124 97.6272 226.046 98.2847 221.718 98.2847ZM222.967 89.6872C230.79 89.6872 237.698 87.4114 243.691 82.8598V70.2165H220.969C216.724 70.2165 213.578 70.992 211.531 72.5429C209.5 74.1107 208.485 76.4117 208.485 79.4461C208.485 82.8177 209.691 85.3632 212.105 87.0827C214.519 88.819 218.139 89.6872 222.967 89.6872ZM283.516 96.7675H274.527V7H283.516V42.7806C289.825 38.1447 296.816 35.8267 304.49 35.8267C311.381 35.8267 316.599 37.6811 320.145 41.3898C323.674 45.0985 325.438 50.7037 325.438 58.2054V96.7675H316.475V59.5961C316.475 54.286 315.393 50.4255 313.229 48.0149C311.065 45.6211 307.644 44.4242 302.966 44.4242C299.637 44.4242 296.292 44.9889 292.929 46.1184C289.567 47.2647 286.429 48.9336 283.516 51.1251V96.7675ZM372.005 98.2847C369.425 98.2847 367.219 97.3575 365.388 95.5031C363.557 93.6488 362.642 91.4151 362.642 88.8022C362.642 86.2735 363.557 84.0567 365.388 82.1518C367.219 80.2637 369.425 79.3197 372.005 79.3197C374.585 79.3197 376.791 80.2637 378.622 82.1518C380.453 84.0567 381.368 86.2735 381.368 88.8022C381.368 91.4151 380.453 93.6488 378.622 95.5031C376.791 97.3575 374.585 98.2847 372.005 98.2847ZM444.29 98.2847C434.053 98.2847 424.897 95.8403 416.824 90.9515L420.445 83.2391C424.023 85.3463 427.852 86.9478 431.93 88.0436C436.008 89.1393 440.253 89.6872 444.664 89.6872C455.9 89.6872 461.518 86.4 461.518 79.8254C461.518 77.3811 460.769 75.5857 459.271 74.4394C457.773 73.3099 455.151 72.4923 451.406 71.9866L437.174 69.9637C431.098 69.0365 426.67 67.3676 423.89 64.9569C421.094 62.5631 419.695 59.0061 419.695 54.286C419.695 48.3858 421.843 43.8342 426.137 40.6312C430.415 37.4282 436.425 35.8267 444.165 35.8267C452.904 35.8267 461.144 37.8497 468.884 41.8955L465.638 49.7344C459.063 46.1942 451.822 44.4242 443.915 44.4242C433.844 44.4242 428.809 47.5007 428.809 53.6538C428.809 56.0139 429.558 57.7418 431.056 58.8376C432.554 59.9333 435.176 60.734 438.921 61.2398L453.154 63.2627C459.313 64.1056 463.765 65.7492 466.512 68.1936C469.259 70.638 470.632 74.3045 470.632 79.1933C470.632 85.3463 468.368 90.0665 463.84 93.3538C459.296 96.641 452.779 98.2847 444.29 98.2847ZM511.955 98.2847C505.13 98.2847 499.928 96.405 496.35 92.6457C492.771 88.9033 490.981 83.3234 490.981 75.906V37.3439H499.97V74.5153C499.97 79.8254 501.052 83.6774 503.216 86.0712C505.38 88.4819 508.792 89.6872 513.453 89.6872C516.866 89.6872 520.253 89.0972 523.616 87.9172C526.995 86.7371 530.099 85.0935 532.929 82.9863V37.3439H541.918V96.7675H535.176L534.177 90.4458C530.848 93.0588 527.328 95.0143 523.616 96.3123C519.92 97.6272 516.033 98.2847 511.955 98.2847Z" fill="#FF851B"/>
</g>
</g>
</g>
</g>
<defs>
<clipPath id="clip0_33_157">
<rect width="551" height="111" fill="white"/>
</clipPath>
<clipPath id="clip1_33_157">
<rect width="551" height="106" fill="white"/>
</clipPath>
<clipPath id="clip2_33_157">
<rect width="551" height="111" fill="white"/>
</clipPath>
<clipPath id="clip3_33_157">
<rect width="550.601" height="111" fill="white" transform="translate(0.398682)"/>
</clipPath>
<clipPath id="clip4_33_157">
<rect width="104.671" height="106.003" fill="white"/>
</clipPath>
<clipPath id="clip5_33_157">
<rect width="104.671" height="106.003" fill="white"/>
</clipPath>
<clipPath id="clip6_33_157">
<rect width="57.4493" height="56.986" fill="white" transform="translate(23.6106 24.5085)"/>
</clipPath>
<clipPath id="clip7_33_157">
<rect width="57.4493" height="56.986" fill="white" transform="translate(23.6106 24.5085)"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6.3 KiB

123
src/static/tailwind.css
View file

@ -530,6 +530,42 @@
.static {
position: static;
}
.sticky {
position: sticky;
}
.top-0 {
top: calc(var(--spacing) * 0);
}
.right-0 {
right: calc(var(--spacing) * 0);
}
.left-0 {
left: calc(var(--spacing) * 0);
}
.z-10 {
z-index: 10;
}
.container {
width: 100%;
@media (width >= 40rem) {
max-width: 40rem;
}
@media (width >= 48rem) {
max-width: 48rem;
}
@media (width >= 64rem) {
max-width: 64rem;
}
@media (width >= 80rem) {
max-width: 80rem;
}
@media (width >= 96rem) {
max-width: 96rem;
}
}
.mx-auto {
margin-inline: auto;
}
.block {
display: block;
}
@ -545,6 +581,12 @@
.table {
display: table;
}
.h-6 {
height: calc(var(--spacing) * 6);
}
.min-h-16 {
min-height: calc(var(--spacing) * 16);
}
.border-collapse {
border-collapse: collapse;
}
@ -557,13 +599,35 @@
.flex-wrap {
flex-wrap: wrap;
}
.items-center {
align-items: center;
}
.justify-between {
justify-content: space-between;
}
.gap-4 {
gap: calc(var(--spacing) * 4);
}
.gap-8 {
gap: calc(var(--spacing) * 8);
}
.rounded-b-lg {
border-bottom-right-radius: var(--radius-lg);
border-bottom-left-radius: var(--radius-lg);
}
.border {
border-style: var(--tw-border-style);
border-width: 1px;
}
.bg-\[\#1d1f3d\] {
background-color: #1d1f3d;
}
.px-8 {
padding-inline: calc(var(--spacing) * 8);
}
.py-4 {
padding-block: calc(var(--spacing) * 4);
}
.text-6xl {
font-size: var(--text-6xl);
line-height: var(--tw-leading, var(--text-6xl--line-height));
@ -572,6 +636,9 @@
font-size: var(--text-8xl);
line-height: var(--tw-leading, var(--text-8xl--line-height));
}
.text-\[\#f9ebeb\] {
color: #f9ebeb;
}
.text-green-400 {
color: var(--color-green-400);
}
@ -588,6 +655,62 @@
.filter {
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.sm\:h-10 {
@media (width >= 40rem) {
height: calc(var(--spacing) * 10);
}
}
.lg\:text-xl {
@media (width >= 64rem) {
font-size: var(--text-xl);
line-height: var(--tw-leading, var(--text-xl--line-height));
}
}
.dark\:bg-\[\#100000\] {
@media (prefers-color-scheme: dark) {
background-color: #100000;
}
}
.dark\:bg-\[\#150505\] {
@media (prefers-color-scheme: dark) {
background-color: #150505;
}
}
.dark\:bg-\[\#160606\] {
@media (prefers-color-scheme: dark) {
background-color: #160606;
}
}
.dark\:bg-orange-700 {
@media (prefers-color-scheme: dark) {
background-color: var(--color-orange-700);
}
}
.dark\:bg-orange-800 {
@media (prefers-color-scheme: dark) {
background-color: var(--color-orange-800);
}
}
.dark\:bg-orange-900 {
@media (prefers-color-scheme: dark) {
background-color: var(--color-orange-900);
}
}
.dark\:bg-orange-950 {
@media (prefers-color-scheme: dark) {
background-color: var(--color-orange-950);
}
}
.dark\:bg-slate-400 {
@media (prefers-color-scheme: dark) {
background-color: var(--color-slate-400);
}
}
.dark\:bg-slate-900 {
@media (prefers-color-scheme: dark) {
background-color: var(--color-slate-900);
}
}
}
@keyframes spin {
to {

2
src/templates/Components/Head.tsx
View file

@ -28,7 +28,7 @@ export default function head(props: {
<meta property="og:url" content={`${props.url}${props.path}`} />
{props.preload ? props.preload.map((item) => <link key={`preload_${item}`} rel="preload" href={item} as="fetch"></link>) : ""}
{props.dns ? props.dns.map((item) => <link key={`dns_${item}`} rel="dns-prefetch" href={item} />) : ""}
{/* <meta property="og:logo" content="<%- baseUrl %><%= path %>/static/images/logo-1x.png" /> */}
<meta property="og:logo" content={`${props.url}/static/logo-1x.png`} />
{props.environment == "dev" ? (
<script src="./static/dev/hotreload.js"></script>
) : (

19
src/templates/Components/Header.tsx Normal file
View file

@ -0,0 +1,19 @@
export default function Header(props: {path: string}) {
return (
<header className="sticky top-0 left-0 right-0 dark:bg-orange-950 text-[#f9ebeb] rounded-b-lg z-10">
<div className="container flex items-center justify-between gap-4 px-8 py-4 mx-auto min-h-16">
<a href="/">
<img
className="h-6 sm:h-10"
src="/static/logo.svg"
alt="index page"
/>
</a>
<div className="flex items-center gap-4">
<a href="/images/" className={`${props.path == "/images/" ? "underline" : ""} lg:text-xl`}>Images</a>
<a href="/videos/" className={`${props.path == "/videos/" ? "underline" : ""} lg:text-xl`}>Videos</a>
</div>
</div>
</header>
);
}

9
src/templates/index.tsx
View file

@ -1,11 +1,14 @@
import Head from "./Components/Head";
import Header from "./Components/Header";
export default function Index(props: {
environment: "prod" | "dev";
title: string;
path: string;
head: {
description: string;
image: string;
path: string;
url: string;
preload?: string[];
dns?: string[];
@ -16,9 +19,11 @@ export default function Index(props: {
<Head
environment={props.environment}
title={props.title}
path={props.path}
{...props.head}
/>
<body>
<body className="dark:bg-[#160606] text-[#f9ebeb]">
<Header path={props.path}/>
nothing yet . . .
</body>
</html>