diff --git a/components/header.typ b/components/header.typ new file mode 100644 index 0000000..f154f73 --- /dev/null +++ b/components/header.typ @@ -0,0 +1,64 @@ +#import "../utilities/icon-with-text.typ": icon_with_text +#import "../utilities/localize.typ": localize + +#let header(data, language, include_links, image_size: 6em, margin_size: 1em) = { + let info_section = { + block( + // Set the height explicitly so it fills the container properly. + height: 100%, + stroke: (bottom: 1pt + black), + align( + horizon, + // Use a 2x2 grid for the name and personal information. + grid( + columns: (1fr, 1fr), + row-gutter: 0.5em, + heading(data.name), + ..("email", "home", "phone").map(info_key => icon_with_text( + icon: "../images/" + info_key + ".svg", + icon_alt_text: localize(data, info_key, language), + localize(data, info_key, language), + )), + ), + ), + ) + } + + let links_section = if include_links { + let link_keys = data.links.keys() + + // Use a block to explicitly grow the size to fill the container. + block(height: 100%, width: 100%, align( + horizon, + // Then use a grid to layout the links with equal spacing in between. + grid( + columns: link_keys.len(), + column-gutter: 0.5em, + // Render the any links with their icons. + ..link_keys.map(link_key => icon_with_text( + icon: "../images/" + link_key + ".svg", + icon_alt_text: localize(data, link_key, language), + link(data.links.at(link_key), localize(data, link_key, language)), + )), + ), + )) + } + + // Position the header image to the right of the main header content. + grid( + columns: (1fr, image_size), + grid( + // Space the rows out so the first is two-thirds of the image size and the + // second is the remaining third. + rows: (image_size * 67%, image_size * 33%), + info_section, + links_section, + ), + // Use a box to round off the corners of the image. + box( + clip: true, + radius: image_size / 4, + image("../" + data.paths.header_image, height: image_size), + ), + ) +}