Feat/sat image snapshot

[jdromero88]

<csis-satellite-snapshot> Web Component

What this component does

csis-satellite-snapshot is a reusable website component that displays a satellite snapshot feature on a page.

This component can be customized by changing the values inside the tag. You do not need to understand programming to update colors, text sizes, alignment, or border styles. It is usually safest to copy an existing example and only change the parts you need.

A web component that displays a satellite image gallery with an interactive timeline. Users can navigate through images chronologically using the timeline scrubber or the previous/next buttons.

Usage

<csis-satellite-snapshot
  data-url="https://example.com/data.csv"
  btn-color="#ccc"
  title-color="#000"
/>

Data Format

The component expects a CSV file at the provided data-url with the following columns:

Column	Type	Description
id	number	Unique identifier for the entry
date	string	Date in YYYY-MM-DD format
title	string	Title displayed in the content box
description	string	Description text (supports HTML)
image	string	URL of the satellite image
image_alt	string	Alt text for the image

Rows are automatically sorted chronologically and invalid/missing dates are filtered out.

Attributes

Data

Attribute	Type	Default	Description
data-url	string	""	URL of the CSV data file (required)

Navigation Buttons

Attribute	Type	Default	Description
btn-color	string	#ccc	Button text color
btn-bg-color	string	#fff	Button background color
btn-border-color	string	#DD3D3D	Button border color
btn-border-thickness	string	1px	Button border thickness
btn-svg-color	string	#DD3D3D	Button icon color
btn-hover-color	string	hsl(0 0% 50% / 0.05)	Button text color on hover
btn-bg-hover-color	string	white	Button background color on hover

Timeline

Attribute	Type	Default	Description
timeline-line-color	string	#d9d9d9	Color of the horizontal timeline line
timeline-circle-size	string	1rem	Size of the timeline dots (clamped between 10px and 30px)
timeline-circle-color	string	#d9d9d9	Fill color of the timeline dots
timeline-circle-border-color	string	#d9d9d9	Border color of unselected timeline dots
timeline-circle-selected-border-color	string	#d9d9d9	Border color of the selected timeline dot
timeline-year-color	string	#fff	Color of the year labels and tick marks
tooltip-font-size	string	.8rem	Font size of the date tooltip

Content Box

Attribute	Type	Default	Description
box-font-url	string	""	URL of a Google Fonts or external stylesheet to load
box-font-family	string	'IBM Plex Sans', system-ui, sans-serif	Font family for the content box
title-color	string	#000	Title text color
title-font-size	string	1.5rem	Title font size
title-alignment	string	left	Title text alignment (left, center, right)
date-font-color	string	#000	Date text color
date-font-size	string	1rem	Date font size
date-alignment	string	left	Date text alignment (left, center, right)
description-font-color	string	#000	Description text color
description-font-size	string	1rem	Description font size
description-alignment	string	left	Description text alignment (left, center, right)
text-box-background-color	string	white	Content box background color
text-box-border-color	string	red	Content box border color
text-box-border-thickness	string	2px	Content box border thickness
text-box-border-radius	string	15px	Content box border radius

Timeline Behavior

• Dots are spaced proportionally based on the time between entries — larger gaps in the data produce larger gaps on the timeline.
• A year tick mark and label appear at the first entry of each new year, making it easy to orient within a long timeline.
• The timeline auto-scrolls to keep the selected item centered.
• Hovering or focusing a dot shows a tooltip with the exact date.

Responsive Behavior

On viewports 700px and below, the layout adjusts to a mobile-friendly gallery:

• The image area switches to a proportional 50vw height.
• The timeline moves above the navigation buttons.
• The Prev/Next buttons are placed side by side, horizontally centered below the timeline.

Example

<csis-satellite-snapshot
  data-url="https://example.com/satellite-data.csv"
  timeline-line-color="#444"
  timeline-circle-color="#fff"
  timeline-circle-border-color="#999"
  timeline-circle-selected-border-color="#DD3D3D"
  timeline-year-color="#999"
  title-color="#fff"
  title-font-size="1.25rem"
  date-font-color="#aaa"
  description-font-color="#eee"
  text-box-background-color="#1a1a1a"
  text-box-border-color="transparent"
  box-font-url="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap"
  box-font-family="'IBM Plex Sans', sans-serif"
/>