mirror of
https://github.com/tabler/tabler.git
synced 2026-08-07 20:02:23 +04:00
Migrate preview and docs packages from Eleventy to Astro (#2694)
Co-authored-by: Bartek <xbartoszdobija@gmail.com>
This commit is contained in:
Paweł Kuna
GitHub
@@ -0,0 +1,217 @@
|
||||
---
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import freeIllustrations from '@data/free-illustrations.json';
|
||||
import illustrationsList from '@data/illustrations.json';
|
||||
import siteData from '@data/site.json';
|
||||
import { addPageScript } from '@shared/lib/page-scripts';
|
||||
|
||||
const autodark = (freeIllustrations as { autodark: Record<string, string> }).autodark;
|
||||
const autodarkEntries = Object.entries(autodark);
|
||||
|
||||
// first-illustration: the Liquid loop overwrites each pass → last value wins.
|
||||
const firstIllustration = autodarkEntries.length
|
||||
? autodarkEntries[autodarkEntries.length - 1][1]
|
||||
: '';
|
||||
|
||||
// Page-local transform: replace: '<svg ' , '<svg class="w-100 h-auto" '
|
||||
const withClass = (svg: string) => svg.replaceAll('<svg ', '<svg class="w-100 h-auto" ');
|
||||
|
||||
const colors = siteData.colors as Record<string, { hex: string; class: string; prop: string }>;
|
||||
const skinColors = siteData.skinColors as Record<string, { hex: string; class: string }>;
|
||||
const colorEntries = Object.values(colors);
|
||||
const skinEntries = Object.values(skinColors);
|
||||
|
||||
// skinColor = site.skinColors | first → the first value object (Rose).
|
||||
const skinFirst = skinEntries[0];
|
||||
const buyLink = (siteData.illustrations as { buy_link: string }).buy_link;
|
||||
|
||||
// {{ illustrations | size | minus: 4 }}
|
||||
const moreCount = illustrationsList.length - 4;
|
||||
|
||||
// {% capture_script %} — build the illustrations JS map from the same data.
|
||||
// skin_color / color[1].prop resolve to empty in Liquid → literal "var()".
|
||||
const illustrationsJs = autodarkEntries
|
||||
.map(([key, svg]) => ` "${key}": {\n svg: '${withClass(svg)}',\n },`)
|
||||
.join('\n \n');
|
||||
|
||||
addPageScript(`<script>
|
||||
let skinColor = "var()",
|
||||
primaryColor = "var()";
|
||||
|
||||
const illustrations = {
|
||||
|
||||
${illustrationsJs}
|
||||
|
||||
}
|
||||
|
||||
const selectIllustrations = document.querySelectorAll(".js-select-illustration"),
|
||||
currentIllustration = document.getElementById("current-illustration"),
|
||||
currentIllustrationCode = document.getElementById("current-illustration-code");
|
||||
|
||||
document.querySelectorAll(".js-select-illustration").forEach((elem) => {
|
||||
elem.addEventListener("change", (e) => {
|
||||
const selectedId = e.target.value,
|
||||
selectedIllustration = illustrations[selectedId]
|
||||
|
||||
currentIllustration.innerHTML = selectedIllustration.svg
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
document.querySelectorAll(".js-select-color").forEach((elem) => {
|
||||
elem.addEventListener("change", (e) => {
|
||||
primaryColor = e.target.value
|
||||
document.getElementById("current-illustration-style").style.setProperty("--tblr-illustrations-primary", primaryColor)
|
||||
})
|
||||
})
|
||||
|
||||
document.querySelectorAll(".js-select-skin-color").forEach((elem) => {
|
||||
elem.addEventListener("change", (e) => {
|
||||
skinColor = e.target.value
|
||||
document.getElementById("current-illustration-style").style.setProperty("--tblr-illustrations-skin", skinColor)
|
||||
})
|
||||
})
|
||||
</script>`);
|
||||
---
|
||||
|
||||
<DefaultLayout
|
||||
title="SVG Illustrations"
|
||||
pageHeader="SVG Illustrations"
|
||||
pageMenu="addons.illustrations"
|
||||
>
|
||||
<div
|
||||
class="mb-7"
|
||||
style={`--tblr-illustrations-primary: var(--tblr-color-primary); --tblr-illustrations-skin: ${skinFirst.hex};`}
|
||||
id="current-illustration-style"
|
||||
>
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="row row-cards row-deck g-4">
|
||||
<div class="col-md-7">
|
||||
<div class="card">
|
||||
<div class="card-body d-flex align-items-center">
|
||||
<div id="current-illustration" set:html={withClass(firstIllustration)} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="form-label">Primary color</div>
|
||||
<div class="row g-2">
|
||||
<div class="col-auto">
|
||||
<label class="form-colorinput">
|
||||
<input name="color" type="radio" value="var(--tblr-color-primary)" class="form-colorinput-input js-select-color" checked />
|
||||
<span class="form-colorinput-color bg-primary"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<label class="form-colorinput">
|
||||
<input name="color" type="radio" value="var(--tblr-bg-surface-inverted)" class="form-colorinput-input js-select-color" />
|
||||
<span class="form-colorinput-color bg-inverted"></span>
|
||||
</label>
|
||||
</div>
|
||||
{
|
||||
colorEntries.map((color) => (
|
||||
<div class="col-auto">
|
||||
<label class="form-colorinput">
|
||||
<input name="color" type="radio" value={color.hex} class="form-colorinput-input js-select-color" />
|
||||
<span class={`form-colorinput-color bg-${color.class}`} />
|
||||
</label>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="form-label mt-4">Skin color</div>
|
||||
<div class="row g-2">
|
||||
{
|
||||
skinEntries.map((color, i) => (
|
||||
<div class="col-auto">
|
||||
<label class="form-colorinput">
|
||||
<input name="skin-color" type="radio" value={color.hex} class="form-colorinput-input js-select-skin-color" checked={i === 0} />
|
||||
<span class="form-colorinput-color" style={`background-color: ${color.hex}`} />
|
||||
</label>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="form-label mt-4">Select SVG illustration</div>
|
||||
<div class="row">
|
||||
{
|
||||
autodarkEntries.map(([key, svg], i) => (
|
||||
<div class="col-3">
|
||||
<label class="form-imagecheck mb-2">
|
||||
<input name="form-imagecheck" type="radio" value={key} class="form-imagecheck-input js-select-illustration" checked={i === autodarkEntries.length - 1} />
|
||||
<span class="form-imagecheck-figure" set:html={withClass(svg)} />
|
||||
</label>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="page-title my-5">
|
||||
{moreCount} more SVG Illustrations
|
||||
</h2>
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-lg-4">
|
||||
<div class="card card-md sticky-top">
|
||||
<div class="card-stamp card-stamp-lg">
|
||||
<div class="card-stamp-icon bg-primary">
|
||||
<Icon name="brand-figma" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-10">
|
||||
<h3 class="h1">Tabler Illustrations</h3>
|
||||
<div class="prose text-secondary">
|
||||
Access a wide range of SVG illustrations for various projects. Effortlessly customize any illustration to align perfectly with your chosen color scheme!
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<a href={buyLink} class="btn btn-primary" target="_blank" rel="noopener">
|
||||
<Icon name="download" />
|
||||
Get lifetime access
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8">
|
||||
<div class="row row-cards">
|
||||
{
|
||||
illustrationsList.map((illustration) => (
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<a href={buyLink} target="_blank">
|
||||
<img src={`./static/illustrations/light/${illustration}.png`} alt={illustration} class="img-light" />
|
||||
<img src={`./static/illustrations/dark/${illustration}.png`} alt={illustration} class="img-dark" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
Reference in New Issue
Block a user