atproto explorer pdsls.dev
atproto tool

add custom headers

juli.ee b185d7e3 4b888b68

verified
Changed files
+15 -23
public
src
components
public/headers/bridge.jpg

This is a binary file and will not be displayed.

public/headers/bunny.jpg

This is a binary file and will not be displayed.

public/headers/city.webp

This is a binary file and will not be displayed.

public/headers/puppy.jpg

This is a binary file and will not be displayed.

public/headers/water.webp

This is a binary file and will not be displayed.

+1 -19
src/components/navbar.tsx
···
export const [cid, setCID] = createSignal<string>();
export const [isLabeler, setIsLabeler] = createSignal(false);
-
const swapIcons: Record<string, string> = {
-
"did:plc:vwzwgnygau7ed7b7wt5ux7y2": "lucide--microchip",
-
"did:plc:oisofpd7lj26yvgiivf3lxsi": "lucide--bone",
-
"did:plc:uu5axsmbm2or2dngy4gwchec": "lucide--train-track",
-
"did:plc:7x6rtuenkuvxq3zsvffp2ide": "lucide--rabbit",
-
"did:plc:ia76kvnndjutgedggx2ibrem": "lucide--rabbit",
-
"did:plc:hvakvedv6byxhufjl23mfmsd": "lucide--rat",
-
"did:plc:ezhjhbzqt32bqprrn6qjlkri": "lucide--film",
-
"did:plc:6v6jqsy7swpzuu53rmzaybjy": "lucide--fish",
-
"did:plc:hx53snho72xoj7zqt5uice4u": "lucide--rose",
-
"did:plc:wzsilnxf24ehtmmc3gssy5bu": "lucide--music-2",
-
"did:plc:bnqkww7bjxaacajzvu5gswdf": "lucide--gem",
-
"did:plc:hdhoaan3xa3jiuq4fg4mefid": "lucide--sparkles",
-
};
-
const NavBar = (props: { params: Params }) => {
const location = useLocation();
const [handle, setHandle] = createSignal(props.params.repo);
···
}}
>
<span
-
class={
-
`iconify shrink-0 text-base transition-transform duration-400 ${showHandle() ? "rotate-y-180" : ""} ` +
-
(swapIcons[props.params.repo] ?? "lucide--arrow-left-right")
-
}
+
class={`iconify shrink-0 text-base transition-transform duration-400 ${showHandle() ? "rotate-y-180" : ""} lucide--arrow-left-right`}
></span>
</button>
</Tooltip>
+14 -4
src/layout.tsx
···
text?: string;
}>({ show: false });
+
const headers: Record<string, string> = {
+
"did:plc:ia76kvnndjutgedggx2ibrem": "bunny.jpg",
+
"did:plc:oisofpd7lj26yvgiivf3lxsi": "puppy.jpg",
+
"did:plc:vwzwgnygau7ed7b7wt5ux7y2": "water.webp",
+
"did:plc:uu5axsmbm2or2dngy4gwchec": "city.webp",
+
"did:plc:hx53snho72xoj7zqt5uice4u": "bridge.jpg",
+
};
+
const Layout = (props: RouteSectionProps<unknown>) => {
const location = useLocation();
const navigate = useNavigate();
···
</Show>
</MetaProvider>
<header
-
classList={{
-
"dark:shadow-dark-800 dark:bg-dark-300 mb-4 flex w-full items-center justify-between rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-2 shadow-xs dark:border-neutral-700": true,
-
"bg-[linear-gradient(to_left,transparent_0%,#fafafa_80%),linear-gradient(to_bottom,#5BCEFA90_0%,#5BCEFA90_20%,#F5A9B890_20%,#F5A9B890_40%,#FFFFFF90_40%,#FFFFFF90_60%,#F5A9B890_60%,#F5A9B890_80%,#5BCEFA90_80%,#5BCEFA90_100%)] dark:bg-[linear-gradient(to_left,transparent_0%,#2d2d2d_80%),linear-gradient(to_bottom,#5BCEFA90_0%,#5BCEFA90_20%,#F5A9B890_20%,#F5A9B890_40%,#FFFFFF90_40%,#FFFFFF90_60%,#F5A9B890_60%,#F5A9B890_80%,#5BCEFA90_80%,#5BCEFA90_100%)]":
-
localStorage.getItem("hrt") === "true",
+
class={`dark:shadow-dark-800 dark:bg-dark-300 mb-4 flex w-full items-center justify-between rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 bg-cover bg-center bg-no-repeat p-2 shadow-xs [--header-bg:#fafafa] dark:border-neutral-700 dark:[--header-bg:#2d2d2d] ${localStorage.getItem("hrt") === "true" ? "bg-[linear-gradient(to_left,transparent_0%,var(--header-bg)_80%),linear-gradient(to_bottom,#5BCEFA90_0%,#5BCEFA90_20%,#F5A9B890_20%,#F5A9B890_40%,#FFFFFF90_40%,#FFFFFF90_60%,#F5A9B890_60%,#F5A9B890_80%,#5BCEFA90_80%,#5BCEFA90_100%)]" : ""}`}
+
style={{
+
"background-image":
+
props.params.repo in headers ?
+
`linear-gradient(to left, transparent 0%, var(--header-bg) 80%), url(/headers/${headers[props.params.repo]})`
+
: undefined,
}}
>
<A