diff --git a/web/src/components/general/BgPig.tsx b/web/src/components/general/BgPig.tsx index 1a29640..af6d6ea 100644 --- a/web/src/components/general/BgPig.tsx +++ b/web/src/components/general/BgPig.tsx @@ -1,17 +1,8 @@ "use client"; import { PIG_NAMES } from "@/lib/common"; +import { Illustration } from "./Illustration"; +import { PIG_FILES } from "./graphics/pigs"; import styles from "./pig.module.scss"; -import { ChillPig } from "./pigs/simple/ChillPig"; -import { DancePig } from "./pigs/simple/DancePig"; -import { DrinkPig } from "./pigs/simple/DrinkPig"; -import { GuardPig } from "./pigs/simple/GuardPig"; -import { KeyPig } from "./pigs/simple/KeyPig"; -import { ListenPig } from "./pigs/simple/ListenPig"; -import { LogoPig } from "./pigs/simple/LogoPig"; -import { MusicPig } from "./pigs/simple/MusicPig"; -import { PeekPig } from "./pigs/simple/PeekPig"; -import { PointPig } from "./pigs/simple/PointPig"; -import { StudentPig } from "./pigs/simple/StudentPig"; import { useInView } from "react-intersection-observer"; export const BgPig = ({ @@ -34,17 +25,7 @@ export const BgPig = ({ style={{ "--color-pig": color } as React.CSSProperties} data-inview={IsInView} > - {type === "logo" && } - {type === "music" && } - {type === "drink" && } - {type === "dance" && } - {type === "point" && } - {type === "student" && } - {type === "listen" && } - {type === "guard" && } - {type === "key" && } - {type === "chill" && } - {type === "peek" && } +
diff --git a/web/src/components/general/Icon.tsx b/web/src/components/general/Icon.tsx index fbfcb1e..75c61b9 100644 --- a/web/src/components/general/Icon.tsx +++ b/web/src/components/general/Icon.tsx @@ -1,3 +1,5 @@ +import { Illustration } from "./Illustration"; +import { DECORATIVE_ICON_FILES } from "./graphics/icons"; import styles from "./icon.module.scss"; export function Icon({ @@ -115,299 +117,10 @@ export function DecorativeIcon({ }: { type: string }) { + const file = DECORATIVE_ICON_FILES[type]; return (
- {type === "pigHeadLogo" && - - - - - } - - {type === "key" && ( - - - - - - - - - - - - )} - - {type === "ticket" && ( - - - - - - - - - )} - - {type === "shield" && ( - - - - - - - - - - - - - )} - - {type === "bottle" && ( - - - - - - )} - - {type === "lostProperty" && ( - - - - - - - - - - - - - - - )} - - {type === "pigsty" && ( - - - - - - - - - - - - - - - - - - - - - - - - - - )} - - {type === "wheelchair" && ( - - - - - - - - - - - - - - - - - - - )} - - {type === "clock" && ( - - - - - - - - - - - - - - - - - - - - - - - - - - )} - - {type === "parking" && ( - - - - - - - - - - )} - - {type === "coins" && ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - )} - - {type === "studioMole" && ( - - - - - - - - - - - - - - - - - - )} - - {type === "studioCalendar" && ( - - - - - - - - - - - - - - )} - - {type === "studioDisco" && ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - )} - - {type === "studioGuitar" && ( - - - - - - - - )} - - {type === "studioNote" && ( - - - - )} - - {type === "email" && ( - - - - )} + {file && }
); } diff --git a/web/src/components/general/Illustration.tsx b/web/src/components/general/Illustration.tsx new file mode 100644 index 0000000..e2d6c8f --- /dev/null +++ b/web/src/components/general/Illustration.tsx @@ -0,0 +1,23 @@ +export type SvgFile = { src: string; width: number; height: number }; + +// Draws artwork that lives in its own SVG file (see ./graphics). Inline, the +// path data would travel with every page; as a file it is fetched once and +// cached. `` still lets the page set the colour through `currentColor`. +// `part` is the id of the group to draw +export function Illustration({ + file, + part = "art", +}: { + file: SvgFile; + part?: string; +}) { + return ( + + + + ); +} diff --git a/web/src/components/general/Logo.tsx b/web/src/components/general/Logo.tsx index b83ac1d..cecdf17 100644 --- a/web/src/components/general/Logo.tsx +++ b/web/src/components/general/Logo.tsx @@ -1,7 +1,15 @@ "use client"; +import { Illustration, type SvgFile } from "./Illustration"; +import logoIcon from "./graphics/logo-icon.svg"; +import logo from "./graphics/logo.svg"; import styles from "./logo.module.scss"; import { usePathname } from "next/navigation"; +// The artwork is kept in files so it is cached instead of sent with every +// page; only the seasonal extras are drawn inline +const logoFile: SvgFile = logo; +const logoIconFile: SvgFile = logoIcon; + export const Logo = ({ christmas, studentHat, @@ -17,90 +25,8 @@ export const Logo = ({ className={`${styles.logo} ${styles.main} ${isIndexPage && styles.index}`} > - {/* Start letters */} - - - - - - - - - - - - {/* End letters */} - {/* Start pig without hat */} - {!studentHat && ( - <> - - - - - - - - - - )} - {/* End pig without hat */} + + {!studentHat && } {/* Start pig with hat (DNS-ikon-svart) */} {/* original viewBox="0 0 613.2 730.27", scaled to 271px height */} {studentHat && ( @@ -255,24 +181,7 @@ export const LogoIcon = ({ }) => { return (
- - - - - - + {christmas && ( { return (
- {type === "logo" && } - {type === "music" && } - {type === "drink" && } - {type === "dance" && } - {type === "point" && } - {type === "student" && } - {type === "listen" && } - {type === "guard" && } - {type === "key" && } - {type === "chill" && } - {type === "peek" && } +
); }; diff --git a/web/src/components/general/graphics/icons/bottle.svg b/web/src/components/general/graphics/icons/bottle.svg new file mode 100644 index 0000000..cb6adf7 --- /dev/null +++ b/web/src/components/general/graphics/icons/bottle.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/web/src/components/general/graphics/icons/clock.svg b/web/src/components/general/graphics/icons/clock.svg new file mode 100644 index 0000000..ce377ab --- /dev/null +++ b/web/src/components/general/graphics/icons/clock.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/components/general/graphics/icons/coins.svg b/web/src/components/general/graphics/icons/coins.svg new file mode 100644 index 0000000..f0f9774 --- /dev/null +++ b/web/src/components/general/graphics/icons/coins.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/components/general/graphics/icons/email.svg b/web/src/components/general/graphics/icons/email.svg new file mode 100644 index 0000000..2def5bc --- /dev/null +++ b/web/src/components/general/graphics/icons/email.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/web/src/components/general/graphics/icons/index.ts b/web/src/components/general/graphics/icons/index.ts new file mode 100644 index 0000000..0a083d4 --- /dev/null +++ b/web/src/components/general/graphics/icons/index.ts @@ -0,0 +1,38 @@ +import pigHeadLogo from "./pigHeadLogo.svg"; +import key from "./key.svg"; +import ticket from "./ticket.svg"; +import shield from "./shield.svg"; +import bottle from "./bottle.svg"; +import lostProperty from "./lostProperty.svg"; +import pigsty from "./pigsty.svg"; +import wheelchair from "./wheelchair.svg"; +import clock from "./clock.svg"; +import parking from "./parking.svg"; +import coins from "./coins.svg"; +import studioMole from "./studioMole.svg"; +import studioCalendar from "./studioCalendar.svg"; +import studioDisco from "./studioDisco.svg"; +import studioGuitar from "./studioGuitar.svg"; +import studioNote from "./studioNote.svg"; +import email from "./email.svg"; +import type { SvgFile } from "../../Illustration"; + +export const DECORATIVE_ICON_FILES: Record = { + pigHeadLogo, + key, + ticket, + shield, + bottle, + lostProperty, + pigsty, + wheelchair, + clock, + parking, + coins, + studioMole, + studioCalendar, + studioDisco, + studioGuitar, + studioNote, + email, +}; diff --git a/web/src/components/general/graphics/icons/key.svg b/web/src/components/general/graphics/icons/key.svg new file mode 100644 index 0000000..b5ce8d9 --- /dev/null +++ b/web/src/components/general/graphics/icons/key.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/web/src/components/general/graphics/icons/lostProperty.svg b/web/src/components/general/graphics/icons/lostProperty.svg new file mode 100644 index 0000000..b7cae93 --- /dev/null +++ b/web/src/components/general/graphics/icons/lostProperty.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/web/src/components/general/graphics/icons/parking.svg b/web/src/components/general/graphics/icons/parking.svg new file mode 100644 index 0000000..35ebfb8 --- /dev/null +++ b/web/src/components/general/graphics/icons/parking.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/web/src/components/general/graphics/icons/pigHeadLogo.svg b/web/src/components/general/graphics/icons/pigHeadLogo.svg new file mode 100644 index 0000000..e125678 --- /dev/null +++ b/web/src/components/general/graphics/icons/pigHeadLogo.svg @@ -0,0 +1,20 @@ + + + + + + + + diff --git a/web/src/components/general/graphics/icons/pigsty.svg b/web/src/components/general/graphics/icons/pigsty.svg new file mode 100644 index 0000000..914b814 --- /dev/null +++ b/web/src/components/general/graphics/icons/pigsty.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/components/general/graphics/icons/shield.svg b/web/src/components/general/graphics/icons/shield.svg new file mode 100644 index 0000000..155eb50 --- /dev/null +++ b/web/src/components/general/graphics/icons/shield.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/web/src/components/general/graphics/icons/studioCalendar.svg b/web/src/components/general/graphics/icons/studioCalendar.svg new file mode 100644 index 0000000..84783d2 --- /dev/null +++ b/web/src/components/general/graphics/icons/studioCalendar.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/web/src/components/general/graphics/icons/studioDisco.svg b/web/src/components/general/graphics/icons/studioDisco.svg new file mode 100644 index 0000000..380281a --- /dev/null +++ b/web/src/components/general/graphics/icons/studioDisco.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/components/general/graphics/icons/studioGuitar.svg b/web/src/components/general/graphics/icons/studioGuitar.svg new file mode 100644 index 0000000..c4c58a6 --- /dev/null +++ b/web/src/components/general/graphics/icons/studioGuitar.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/web/src/components/general/graphics/icons/studioMole.svg b/web/src/components/general/graphics/icons/studioMole.svg new file mode 100644 index 0000000..322ac95 --- /dev/null +++ b/web/src/components/general/graphics/icons/studioMole.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/web/src/components/general/graphics/icons/studioNote.svg b/web/src/components/general/graphics/icons/studioNote.svg new file mode 100644 index 0000000..bd500fc --- /dev/null +++ b/web/src/components/general/graphics/icons/studioNote.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/web/src/components/general/graphics/icons/ticket.svg b/web/src/components/general/graphics/icons/ticket.svg new file mode 100644 index 0000000..7effb82 --- /dev/null +++ b/web/src/components/general/graphics/icons/ticket.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/web/src/components/general/graphics/icons/wheelchair.svg b/web/src/components/general/graphics/icons/wheelchair.svg new file mode 100644 index 0000000..5000d8f --- /dev/null +++ b/web/src/components/general/graphics/icons/wheelchair.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/components/general/graphics/logo-icon.svg b/web/src/components/general/graphics/logo-icon.svg new file mode 100644 index 0000000..e125678 --- /dev/null +++ b/web/src/components/general/graphics/logo-icon.svg @@ -0,0 +1,20 @@ + + + + + + + + diff --git a/web/src/components/general/graphics/logo.svg b/web/src/components/general/graphics/logo.svg new file mode 100644 index 0000000..397b644 --- /dev/null +++ b/web/src/components/general/graphics/logo.svg @@ -0,0 +1,82 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/components/general/pigs/simple/ChillPig.tsx b/web/src/components/general/graphics/pigs/chill.svg similarity index 99% rename from web/src/components/general/pigs/simple/ChillPig.tsx rename to web/src/components/general/graphics/pigs/chill.svg index 1bd1ea2..663265b 100644 --- a/web/src/components/general/pigs/simple/ChillPig.tsx +++ b/web/src/components/general/graphics/pigs/chill.svg @@ -1,7 +1,6 @@ -export const ChillPig = () => { - return ( - - + + + { /> - - ); -}; + + diff --git a/web/src/components/general/pigs/simple/DancePig.tsx b/web/src/components/general/graphics/pigs/dance.svg similarity index 99% rename from web/src/components/general/pigs/simple/DancePig.tsx rename to web/src/components/general/graphics/pigs/dance.svg index 6263f80..4136d34 100644 --- a/web/src/components/general/pigs/simple/DancePig.tsx +++ b/web/src/components/general/graphics/pigs/dance.svg @@ -1,7 +1,6 @@ -export const DancePig = () => { - return ( - - + + + { /> - - ); -}; + + diff --git a/web/src/components/general/pigs/simple/DrinkPig.tsx b/web/src/components/general/graphics/pigs/drink.svg similarity index 99% rename from web/src/components/general/pigs/simple/DrinkPig.tsx rename to web/src/components/general/graphics/pigs/drink.svg index 382e49b..2c889f8 100644 --- a/web/src/components/general/pigs/simple/DrinkPig.tsx +++ b/web/src/components/general/graphics/pigs/drink.svg @@ -1,7 +1,6 @@ -export const DrinkPig = () => { - return ( - - + + + { /> - - ); -}; + + diff --git a/web/src/components/general/pigs/simple/GuardPig.tsx b/web/src/components/general/graphics/pigs/guard.svg similarity index 99% rename from web/src/components/general/pigs/simple/GuardPig.tsx rename to web/src/components/general/graphics/pigs/guard.svg index 3fe4df3..b904823 100644 --- a/web/src/components/general/pigs/simple/GuardPig.tsx +++ b/web/src/components/general/graphics/pigs/guard.svg @@ -1,7 +1,6 @@ -export const GuardPig = () => { - return ( - - + + + { /> - - ); -}; + + diff --git a/web/src/components/general/graphics/pigs/index.ts b/web/src/components/general/graphics/pigs/index.ts new file mode 100644 index 0000000..7c14fc1 --- /dev/null +++ b/web/src/components/general/graphics/pigs/index.ts @@ -0,0 +1,26 @@ +import chill from "./chill.svg"; +import dance from "./dance.svg"; +import drink from "./drink.svg"; +import guard from "./guard.svg"; +import key from "./key.svg"; +import listen from "./listen.svg"; +import logo from "./logo.svg"; +import music from "./music.svg"; +import peek from "./peek.svg"; +import point from "./point.svg"; +import student from "./student.svg"; +import type { SvgFile } from "../../Illustration"; + +export const PIG_FILES: Record = { + chill, + dance, + drink, + guard, + key, + listen, + logo, + music, + peek, + point, + student, +}; diff --git a/web/src/components/general/pigs/simple/KeyPig.tsx b/web/src/components/general/graphics/pigs/key.svg similarity index 99% rename from web/src/components/general/pigs/simple/KeyPig.tsx rename to web/src/components/general/graphics/pigs/key.svg index 6cb96aa..21b06c8 100644 --- a/web/src/components/general/pigs/simple/KeyPig.tsx +++ b/web/src/components/general/graphics/pigs/key.svg @@ -1,7 +1,6 @@ -export const KeyPig = () => { - return ( - - + + + { /> - - ); -}; + + diff --git a/web/src/components/general/pigs/simple/ListenPig.tsx b/web/src/components/general/graphics/pigs/listen.svg similarity index 99% rename from web/src/components/general/pigs/simple/ListenPig.tsx rename to web/src/components/general/graphics/pigs/listen.svg index 0d7354b..f37a832 100644 --- a/web/src/components/general/pigs/simple/ListenPig.tsx +++ b/web/src/components/general/graphics/pigs/listen.svg @@ -1,7 +1,6 @@ -export const ListenPig = () => { - return ( - - + + + { /> - - ); -}; + + diff --git a/web/src/components/general/pigs/simple/LogoPig.tsx b/web/src/components/general/graphics/pigs/logo.svg similarity index 99% rename from web/src/components/general/pigs/simple/LogoPig.tsx rename to web/src/components/general/graphics/pigs/logo.svg index 9277fbe..46de2e1 100644 --- a/web/src/components/general/pigs/simple/LogoPig.tsx +++ b/web/src/components/general/graphics/pigs/logo.svg @@ -1,7 +1,6 @@ -export const LogoPig = () => { - return ( - - + + + { /> - - ); -}; + + diff --git a/web/src/components/general/pigs/simple/MusicPig.tsx b/web/src/components/general/graphics/pigs/music.svg similarity index 99% rename from web/src/components/general/pigs/simple/MusicPig.tsx rename to web/src/components/general/graphics/pigs/music.svg index 641acc2..86ea618 100644 --- a/web/src/components/general/pigs/simple/MusicPig.tsx +++ b/web/src/components/general/graphics/pigs/music.svg @@ -1,7 +1,6 @@ -export const MusicPig = () => { - return ( - - + + + { /> - - ); -}; + + diff --git a/web/src/components/general/pigs/simple/PeekPig.tsx b/web/src/components/general/graphics/pigs/peek.svg similarity index 99% rename from web/src/components/general/pigs/simple/PeekPig.tsx rename to web/src/components/general/graphics/pigs/peek.svg index 363d5b6..bab1358 100644 --- a/web/src/components/general/pigs/simple/PeekPig.tsx +++ b/web/src/components/general/graphics/pigs/peek.svg @@ -1,7 +1,6 @@ -export const PeekPig = () => { - return ( - - + + + { /> - - ); -}; + + diff --git a/web/src/components/general/pigs/simple/PointPig.tsx b/web/src/components/general/graphics/pigs/point.svg similarity index 99% rename from web/src/components/general/pigs/simple/PointPig.tsx rename to web/src/components/general/graphics/pigs/point.svg index 65f694a..daefc63 100644 --- a/web/src/components/general/pigs/simple/PointPig.tsx +++ b/web/src/components/general/graphics/pigs/point.svg @@ -1,7 +1,6 @@ -export const PointPig = () => { - return ( - - + + + { /> - - ); -}; + + diff --git a/web/src/components/general/pigs/simple/StudentPig.tsx b/web/src/components/general/graphics/pigs/student.svg similarity index 99% rename from web/src/components/general/pigs/simple/StudentPig.tsx rename to web/src/components/general/graphics/pigs/student.svg index 4d47185..ed554a9 100644 --- a/web/src/components/general/pigs/simple/StudentPig.tsx +++ b/web/src/components/general/graphics/pigs/student.svg @@ -1,7 +1,6 @@ -export const StudentPig = () => { - return ( - - + + + { /> - - ); -}; + +