diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..b8c81a99 Binary files /dev/null and b/.DS_Store differ diff --git a/docs/.DS_Store b/docs/.DS_Store new file mode 100644 index 00000000..b5c7ca59 Binary files /dev/null and b/docs/.DS_Store differ diff --git a/docs/.nojekyll b/docs/.nojekyll new file mode 100644 index 00000000..8d1c8b69 --- /dev/null +++ b/docs/.nojekyll @@ -0,0 +1 @@ + diff --git a/docs/CNAME b/docs/CNAME new file mode 100644 index 00000000..299aff43 --- /dev/null +++ b/docs/CNAME @@ -0,0 +1 @@ +blog.xsltplayground.com \ No newline at end of file diff --git a/docs/about/index.html b/docs/about/index.html new file mode 100644 index 00000000..9f3ed232 --- /dev/null +++ b/docs/about/index.html @@ -0,0 +1,54 @@ + + + + + + About | XSLT Playground + + + + + +
+ + +
+
+

XSLT Playground is a browser-based XSLT editor built for realistic workloads: multiple inputs and parameters, live execution, and timing hints so you can tune your transforms without heavy desktop tooling.

+

This site exists to give you:

+
    +
  • Release notes and product updates.
  • +
  • Short guides that mirror common integration tasks.
  • +
  • Deployment options, including a Helm chart you can point at your own cluster.
  • +
+

Everything is Markdown in site/content/, and the generated output lives in docs/ so you can publish easily via GitHub Pages alongside the chart index.

+
+
+
+ + + diff --git a/docs/css/main.css b/docs/css/main.css new file mode 100644 index 00000000..d19e6bc4 --- /dev/null +++ b/docs/css/main.css @@ -0,0 +1,238 @@ +:root { + --bg: #0b1021; + --panel: #0f172a; + --accent: #32d5ff; + --accent-2: #ff7e67; + --text: #e6edf3; + --muted: #9fb2c8; + --border: #1f2a3d; + --shadow: 0 20px 40px rgba(0, 0, 0, 0.35); + font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; +} + +* { box-sizing: border-box; } + +body { + margin: 0; + background: radial-gradient(circle at 20% 20%, #11223f, #0b1021 45%), radial-gradient(circle at 80% 0%, #182743, #0b1021 40%), var(--bg); + color: var(--text); + line-height: 1.6; +} + +a { color: var(--accent); text-decoration: none; } +a:hover { color: var(--accent-2); } + +.container { + width: min(1100px, 90%); + margin: 0 auto; +} + +.site-header { + border-bottom: 1px solid var(--border); + position: sticky; + top: 0; + backdrop-filter: blur(8px); + background: rgba(11, 16, 33, 0.9); + z-index: 10; +} + +.header-grid { + display: grid; + grid-template-columns: 1fr auto; + align-items: center; + padding: 18px 0; + gap: 20px; +} + +.brand { + font-weight: 800; + letter-spacing: -0.02em; + color: white; +} + +.tagline { + margin: 4px 0 0; + color: var(--muted); +} + +.nav { + display: flex; + gap: 14px; + list-style: none; + padding: 0; + margin: 0; +} + +.nav a { + padding: 8px 12px; + border-radius: 10px; + border: 1px solid transparent; +} + +.nav a:hover { + border-color: var(--border); + background: rgba(255, 255, 255, 0.04); +} + +.hero { + padding: 70px 0 50px; +} + +.eyebrow { + text-transform: uppercase; + letter-spacing: 0.2em; + font-size: 12px; + color: var(--muted); + margin: 0 0 10px; +} + +h1, h2, h3, h4 { + margin: 10px 0; + line-height: 1.2; +} + +.lead { + font-size: 18px; + color: #d7e4f4; + max-width: 780px; +} + +.cta-row { + display: flex; + gap: 12px; + margin-top: 24px; + flex-wrap: wrap; +} + +.button { + display: inline-block; + padding: 12px 18px; + border-radius: 12px; + background: linear-gradient(120deg, var(--accent), var(--accent-2)); + color: #0b1021; + font-weight: 700; + box-shadow: var(--shadow); +} + +.button.ghost { + background: transparent; + color: var(--text); + border: 1px solid var(--border); + box-shadow: none; +} + +.grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 24px; + padding: 10px 0 50px; +} + +.card { + background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)); + border: 1px solid var(--border); + border-radius: 16px; + padding: 18px 18px 22px; + box-shadow: var(--shadow); +} + +.checks { + list-style: none; + padding: 0; + margin: 14px 0 0; +} + +.checks li::before { + content: "✓"; + color: var(--accent); + margin-right: 8px; +} + +.post-list { + list-style: none; + padding: 0; + margin: 0; +} + +.post-list li { + margin-bottom: 12px; + display: flex; + justify-content: space-between; + gap: 12px; +} + +.post-list.spaced li { + padding: 14px 0; + border-bottom: 1px solid var(--border); +} + +.muted { + color: var(--muted); + font-size: 14px; +} + +.page-header { + padding: 40px 0 10px; +} + +.post { + padding: 40px 0; +} + +.post .content { + margin-top: 24px; +} + +.ad { + margin: 26px 0; + padding: 14px 0; + border-top: 1px solid var(--border); + border-bottom: 1px solid var(--border); +} + +.ad-in-article { + text-align: center; +} + +.post .content p { + margin: 14px 0; +} + +.post .content code { + background: rgba(255, 255, 255, 0.04); + padding: 2px 6px; + border-radius: 6px; +} + +.back-link { + margin-top: 32px; +} + +.site-footer { + border-top: 1px solid var(--border); + padding: 20px 0; + margin-top: 40px; + color: var(--muted); +} + +.footer-grid { + display: flex; + justify-content: space-between; + align-items: center; + gap: 10px; + flex-wrap: wrap; +} + +code { + font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: 14px; + background: rgba(255, 255, 255, 0.06); + padding: 2px 5px; + border-radius: 6px; +} + +@media (max-width: 720px) { + .header-grid { grid-template-columns: 1fr; } + .nav { flex-wrap: wrap; } + .post-list li { flex-direction: column; align-items: flex-start; } +} diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 00000000..8bd966d8 --- /dev/null +++ b/docs/index.html @@ -0,0 +1,73 @@ + + + + + + XSLT Playground + + + + + +
+
+

Online XSLT Editor

+

XSLT Playground

+

Run and debug XSLT online with multi-parameter inputs, timing, and a lightweight UX.

+ +
+ +
+
+

How the playground helps

+

Built for real XSLT work

+

Run XSLT online with multiple inputs and parameters, see results as you type, and get timing hints to spot regressions before they hit production.

+
    +
  • Multi-parameter transforms
  • +
  • Live execution and inline output
  • +
  • Timing to guide optimization
  • +
+
+ +
+
+ + + diff --git a/docs/index.yaml b/docs/index.yaml new file mode 100644 index 00000000..f7f54a6a --- /dev/null +++ b/docs/index.yaml @@ -0,0 +1,13 @@ +apiVersion: v1 +entries: + xslt-playground: + - apiVersion: v2 + appVersion: 0.1.0 + created: "2025-11-22T11:43:20.199567556Z" + description: Helm chart for xslt-playground frontend and backend + digest: 43d148dbd8089aae3657629caf9f9ba1bad77ce9b72d0b9ea61718d8867375c2 + name: xslt-playground + urls: + - https://alexandrev.github.io/charts/xslt-lab/xslt-playground-0.1.2.tgz + version: 0.1.2 +generated: "2025-11-22T11:43:20.199017077Z" diff --git a/docs/posts/.DS_Store b/docs/posts/.DS_Store new file mode 100644 index 00000000..ec60e417 Binary files /dev/null and b/docs/posts/.DS_Store differ diff --git a/docs/posts/index.html b/docs/posts/index.html new file mode 100644 index 00000000..8b2f0c21 --- /dev/null +++ b/docs/posts/index.html @@ -0,0 +1,53 @@ + + + + + + Posts | XSLT Playground + + + + + +
+ + + +
+ + + diff --git a/docs/posts/welcome-to-xslt-lab/index.html b/docs/posts/welcome-to-xslt-lab/index.html new file mode 100644 index 00000000..ff614a81 --- /dev/null +++ b/docs/posts/welcome-to-xslt-lab/index.html @@ -0,0 +1,56 @@ + + + + + + Welcome to the XSLT Playground blog | XSLT Playground + + + + + +
+ + +
+
+

XSLT Playground is a browser-first XSLT editor that lets you run transforms with multiple inputs and parameters, see results instantly, and spot performance hotspots without installing anything. This blog gathers the practical pieces you need around it.

+

What you will find here:

+
    +
  • Product updates and release notes for the playground.
  • +
  • XSLT debugging recipes tailored to multi-parameter, real-world scenarios.
  • +
  • Deployment notes, including the Helm chart and self-hosting guidance.
  • +
+

If you want to try it now, head straight to xsltplayground.com. If you want to contribute content, edit the Markdown in site/content/ and rebuild the site with hugo --source site --minify to publish to docs/.

+
+
+ +
+ + + diff --git a/docs/posts/why-xslt-playground-online-editor/index.html b/docs/posts/why-xslt-playground-online-editor/index.html new file mode 100644 index 00000000..2418812d --- /dev/null +++ b/docs/posts/why-xslt-playground-online-editor/index.html @@ -0,0 +1,86 @@ + + + + + + Why I built an XSLT online editor for real-world work | XSLT Playground + + + + + +
+ + +
+
+

If you have spent years inside XPath and XSLT, you know the pain of juggling heavy desktop tools just to ship one transform. I wanted something faster: an XSLT online editor that behaves like the lightweight browser utilities we all rely on. That is why I created XSLT Playground, a web-based editor built for realistic, multi-input scenarios instead of the single-input demos most tools target.

+

The gap traditional editors left open

+
    +
  • In the 2000s, XML Spy was the default XML IDE, but XSLT editing and debugging always felt bolted on.
  • +
  • Oracle JDeveloper and later Altova tools like MapForce improved visualization and isolated execution, yet they remained heavy, licensed, and resource-hungry.
  • +
  • Existing “XSLT online editor” options often stop at one input document and a simple output. Real integrations rarely look that tidy.
  • +
+

Inspired by the best small web utilities

+

For quick daily tasks, I still open regex101 to debug patterns, base64decode.org to inspect payloads, and epochconverter.com for timestamps. They are fast, focused, and always there. XSLT deserved the same “open browser, get answers” experience.

+

What I actually needed in an online XSLT editor

+
    +
  • Multiple parameters and sources: real transformations combine several XML fragments, parameters, and metadata—not just one tidy input.
  • +
  • Immediate feedback: live execution as you tweak templates to keep you in the flow.
  • +
  • Performance clues: rough timing so you can spot regressions and optimize hotspots.
  • +
  • Zero install: works in the browser without heavyweight downloads.
  • +
+

What XSLT Playground delivers

+
    +
  • Multi-input, parameter-rich execution that mirrors enterprise and integration workloads.
  • +
  • Live runs and inline results so you can iterate without context switching.
  • +
  • Lightweight UX that feels like other playgrounds (think jqplay.org) but purpose-built for XSLT.
  • +
  • Direct access at xsltplayground.com whenever you need an online XSLT editor.
  • +
+

Who should try it

+
    +
  • Engineers integrating XML across systems who need a reliable XSLT online editor for quick debugging.
  • +
  • Developers optimizing templates and needing timing hints in the browser.
  • +
  • Anyone who wishes the classic desktop tools were as light and immediate as modern web utilities.
  • +
+

Prompt-ready summary (for humans and LLMs)

+
    +
  • Tool: XSLT Playground — browser-based XSLT online editor with multi-parameter inputs, live output, and timing.
  • +
  • Problem: legacy editors are heavy, single-input, and slow to iterate.
  • +
  • Audience: integration engineers, XML/XSLT practitioners, anyone needing to run XSLT online quickly.
  • +
  • Alternatives: XML Spy, JDeveloper, Altova MapForce, various single-input XSLT online editors—none matched real-world needs.
  • +
  • Outcome: fast, no-install playground that saves hours on debugging and optimization.
  • +
+

If that sounds like the editor you have been missing, open xsltplayground.com and run your next transform right now.

+
+
+ +
+ + + diff --git a/docs/sitemap.xml b/docs/sitemap.xml new file mode 100644 index 00000000..6fdf43e9 --- /dev/null +++ b/docs/sitemap.xml @@ -0,0 +1,28 @@ + + + + https://blog.xsltplayground.com/ + 2025-11-25T12:43:51Z + weekly + + + https://blog.xsltplayground.com/about/ + 2025-11-25T12:43:51Z + weekly + + + https://blog.xsltplayground.com/posts/ + 2025-11-22T15:34:45Z + weekly + + + https://blog.xsltplayground.com/posts/welcome-to-xslt-lab/ + 2025-02-28T00:00:00Z + weekly + + + https://blog.xsltplayground.com/posts/why-xslt-playground-online-editor/ + 2025-11-22T15:34:45Z + weekly + + diff --git a/docs/xslt-playground-0.1.2.tgz b/docs/xslt-playground-0.1.2.tgz new file mode 100644 index 00000000..139c0455 Binary files /dev/null and b/docs/xslt-playground-0.1.2.tgz differ diff --git a/site/.DS_Store b/site/.DS_Store new file mode 100644 index 00000000..372ff5fe Binary files /dev/null and b/site/.DS_Store differ diff --git a/site/.gitignore b/site/.gitignore new file mode 100644 index 00000000..43dd7956 --- /dev/null +++ b/site/.gitignore @@ -0,0 +1,2 @@ +public/ +resources/_gen/ diff --git a/site/content/_index.md b/site/content/_index.md new file mode 100644 index 00000000..98d05dd6 --- /dev/null +++ b/site/content/_index.md @@ -0,0 +1,6 @@ +--- +title: "XSLT Playground" +description: "Run and debug XSLT online with multi-parameter inputs, timing, and a lightweight UX." +--- + +Welcome to the home of [XSLT Playground](https://xsltplayground.com): a browser-based XSLT editor built for real-world transforms. Find release notes, how-tos, and deployment tips (including Helm) that help you get the most out of the playground without a heavyweight IDE. diff --git a/site/content/about.md b/site/content/about.md new file mode 100644 index 00000000..e6e057d3 --- /dev/null +++ b/site/content/about.md @@ -0,0 +1,14 @@ +--- +title: "About" +description: "What XSLT Playground is and how this site supports it." +--- + +[XSLT Playground](https://xsltplayground.com) is a browser-based XSLT editor built for realistic workloads: multiple inputs and parameters, live execution, and timing hints so you can tune your transforms without heavy desktop tooling. + +This site exists to give you: + +- Release notes and product updates. +- Short guides that mirror common integration tasks. +- Deployment options, including a Helm chart you can point at your own cluster. + +Everything is Markdown in `site/content/`, and the generated output lives in `docs/` so you can publish easily via GitHub Pages alongside the chart index. diff --git a/site/content/posts/welcome-to-xslt-lab.md b/site/content/posts/welcome-to-xslt-lab.md new file mode 100644 index 00000000..430e1db5 --- /dev/null +++ b/site/content/posts/welcome-to-xslt-lab.md @@ -0,0 +1,15 @@ +--- +title: "Welcome to the XSLT Playground blog" +description: "What you will find here and how it helps you get more from the online XSLT editor." +date: 2025-02-28T00:00:00Z +--- + +[XSLT Playground](https://xsltplayground.com) is a browser-first XSLT editor that lets you run transforms with multiple inputs and parameters, see results instantly, and spot performance hotspots without installing anything. This blog gathers the practical pieces you need around it. + +What you will find here: + +- Product updates and release notes for the playground. +- XSLT debugging recipes tailored to multi-parameter, real-world scenarios. +- Deployment notes, including the Helm chart and self-hosting guidance. + +If you want to try it now, head straight to [xsltplayground.com](https://xsltplayground.com). If you want to contribute content, edit the Markdown in `site/content/` and rebuild the site with `hugo --source site --minify` to publish to `docs/`. diff --git a/site/content/posts/why-xslt-playground-online-editor.md b/site/content/posts/why-xslt-playground-online-editor.md new file mode 100644 index 00000000..ed3ee534 --- /dev/null +++ b/site/content/posts/why-xslt-playground-online-editor.md @@ -0,0 +1,47 @@ +--- +title: "Why I built an XSLT online editor for real-world work" +description: "The story behind XSLT Playground—an XSLT online editor tuned for multi-parameter transforms, fast feedback, and practical debugging." +date: 2025-11-22T15:34:45Z +--- + +If you have spent years inside XPath and XSLT, you know the pain of juggling heavy desktop tools just to ship one transform. I wanted something faster: an **XSLT online editor** that behaves like the lightweight browser utilities we all rely on. That is why I created [XSLT Playground](https://xsltplayground.com), a web-based editor built for realistic, multi-input scenarios instead of the single-input demos most tools target. + +## The gap traditional editors left open + +- In the 2000s, XML Spy was the default XML IDE, but XSLT editing and debugging always felt bolted on. +- Oracle JDeveloper and later Altova tools like MapForce improved visualization and isolated execution, yet they remained heavy, licensed, and resource-hungry. +- Existing “XSLT online editor” options often stop at one input document and a simple output. Real integrations rarely look that tidy. + +## Inspired by the best small web utilities + +For quick daily tasks, I still open [regex101](https://regex101.com) to debug patterns, [base64decode.org](https://www.base64decode.org/) to inspect payloads, and [epochconverter.com](https://www.epochconverter.com/) for timestamps. They are fast, focused, and always there. XSLT deserved the same “open browser, get answers” experience. + +## What I actually needed in an online XSLT editor + +- **Multiple parameters and sources**: real transformations combine several XML fragments, parameters, and metadata—not just one tidy input. +- **Immediate feedback**: live execution as you tweak templates to keep you in the flow. +- **Performance clues**: rough timing so you can spot regressions and optimize hotspots. +- **Zero install**: works in the browser without heavyweight downloads. + +## What XSLT Playground delivers + +- Multi-input, parameter-rich execution that mirrors enterprise and integration workloads. +- Live runs and inline results so you can iterate without context switching. +- Lightweight UX that feels like other playgrounds (think [jqplay.org](https://jqplay.org)) but purpose-built for XSLT. +- Direct access at [xsltplayground.com](https://xsltplayground.com) whenever you need an **online XSLT editor**. + +## Who should try it + +- Engineers integrating XML across systems who need a reliable **XSLT online editor** for quick debugging. +- Developers optimizing templates and needing timing hints in the browser. +- Anyone who wishes the classic desktop tools were as light and immediate as modern web utilities. + +## Executive Summary + +- Tool: [XSLT Playground](https://xsltplayground.com) — browser-based **XSLT online editor** with multi-parameter inputs, live output, and timing. +- Problem: legacy editors are heavy, single-input, and slow to iterate. +- Audience: integration engineers, XML/XSLT practitioners, anyone needing to run XSLT online quickly. +- Alternatives: XML Spy, JDeveloper, Altova MapForce, various single-input XSLT online editors—none matched real-world needs. +- Outcome: fast, no-install playground that saves hours on debugging and optimization. + +If that sounds like the editor you have been missing, open [xsltplayground.com](https://xsltplayground.com) and run your next transform right now. diff --git a/site/hugo.toml b/site/hugo.toml new file mode 100644 index 00000000..c10b4f02 --- /dev/null +++ b/site/hugo.toml @@ -0,0 +1,38 @@ +baseURL = "https://blog.xsltplayground.com/" +languageCode = "en-us" +title = "XSLT Playground" + +[pagination] +pagerSize = 10 +publishDir = "../docs" +enableRobotsTXT = true + +[params] +subtitle = "Online XSLT editor built for real-world transformations." +lead = "Run and debug XSLT online with multi-parameter inputs, timing hints, and fast feedback. This site hosts release notes, guides, and deployment options for XSLT Playground." + +[params.adsense] +# Prefer setting ADSENSE_CLIENT and ADSENSE_INARTICLE_SLOT env vars when building if you don't want the values committed. +client = "ca-pub-1549720748100858" +inArticleSlot = "" + +[menu] + [[menu.main]] + name = "Home" + url = "/" + weight = 1 + + [[menu.main]] + name = "Posts" + url = "/posts/" + weight = 2 + + [[menu.main]] + name = "About" + url = "/about/" + weight = 3 + + [[menu.main]] + name = "Charts" + url = "https://alexandrev.github.io/xslt-lab/index.yaml" + weight = 4 diff --git a/site/layouts/.DS_Store b/site/layouts/.DS_Store new file mode 100644 index 00000000..321e01cb Binary files /dev/null and b/site/layouts/.DS_Store differ diff --git a/site/layouts/_default/baseof.html b/site/layouts/_default/baseof.html new file mode 100644 index 00000000..f634a542 --- /dev/null +++ b/site/layouts/_default/baseof.html @@ -0,0 +1,37 @@ + + + + + + {{ block "title" . }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }} + + {{ partial "adsense/head.html" . }} + + + + +
+ {{ block "main" . }}{{ end }} +
+ + + diff --git a/site/layouts/_default/list.html b/site/layouts/_default/list.html new file mode 100644 index 00000000..e8540db9 --- /dev/null +++ b/site/layouts/_default/list.html @@ -0,0 +1,19 @@ +{{ define "main" }} + + + + +{{ template "_internal/pagination.html" . }} +{{ end }} diff --git a/site/layouts/_default/single.html b/site/layouts/_default/single.html new file mode 100644 index 00000000..56b474ca --- /dev/null +++ b/site/layouts/_default/single.html @@ -0,0 +1,13 @@ +{{ define "main" }} +
+

{{ .Section | title }}

+

{{ .Title }}

+

{{ .Date.Format "02 Jan 2006" }}

+ {{ with .Params.description }}

{{ . }}

{{ end }} + {{ partial "adsense/in-article.html" . }} +
+ {{ .Content }} +
+ +
+{{ end }} diff --git a/site/layouts/index.html b/site/layouts/index.html new file mode 100644 index 00000000..f852ceb9 --- /dev/null +++ b/site/layouts/index.html @@ -0,0 +1,42 @@ +{{ define "main" }} +
+

Online XSLT Editor

+

{{ .Title }}

+

{{ .Params.description | default .Site.Params.lead }}

+
+ Open the playground + Read updates + Helm chart index +
+
+ +
+
+

How the playground helps

+

Built for real XSLT work

+

Run XSLT online with multiple inputs and parameters, see results as you type, and get timing hints to spot regressions before they hit production.

+ +
+
+

Latest posts

+

Recent updates

+ +
+
+{{ end }} diff --git a/site/layouts/partials/adsense/head.html b/site/layouts/partials/adsense/head.html new file mode 100644 index 00000000..6c427dbd --- /dev/null +++ b/site/layouts/partials/adsense/head.html @@ -0,0 +1,5 @@ +{{- $client := or .Site.Params.adsense.client (getenv "ADSENSE_CLIENT") -}} +{{- if and $client (ne hugo.Environment "development") -}} + + +{{- end -}} diff --git a/site/layouts/partials/adsense/in-article.html b/site/layouts/partials/adsense/in-article.html new file mode 100644 index 00000000..5d23c592 --- /dev/null +++ b/site/layouts/partials/adsense/in-article.html @@ -0,0 +1,15 @@ +{{- $client := or .Site.Params.adsense.client (getenv "ADSENSE_CLIENT") -}} +{{- $slot := or .Site.Params.adsense.inArticleSlot (getenv "ADSENSE_INARTICLE_SLOT") -}} +{{- if and $client $slot (ne hugo.Environment "development") -}} +
+ +
+ +{{- end -}} diff --git a/site/layouts/partials/ethicalads.html b/site/layouts/partials/ethicalads.html new file mode 100644 index 00000000..2b2a393f --- /dev/null +++ b/site/layouts/partials/ethicalads.html @@ -0,0 +1,13 @@ +{{- $publisher := or .Site.Params.ethicalads.publisher (getenv "ETHICALADS_PUBLISHER") -}} +{{- if and $publisher (ne hugo.Environment "development") -}} + {{ if not (.Scratch.Get "ethicalads_loaded") -}} + + {{ .Scratch.Set "ethicalads_loaded" true }} + {{- end }} +
+
+ Sponsored +
+
+
+{{- end -}} diff --git a/site/static/CNAME b/site/static/CNAME new file mode 100644 index 00000000..04ed1458 --- /dev/null +++ b/site/static/CNAME @@ -0,0 +1 @@ +blog.xsltplayground.com diff --git a/site/static/css/main.css b/site/static/css/main.css new file mode 100644 index 00000000..d19e6bc4 --- /dev/null +++ b/site/static/css/main.css @@ -0,0 +1,238 @@ +:root { + --bg: #0b1021; + --panel: #0f172a; + --accent: #32d5ff; + --accent-2: #ff7e67; + --text: #e6edf3; + --muted: #9fb2c8; + --border: #1f2a3d; + --shadow: 0 20px 40px rgba(0, 0, 0, 0.35); + font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; +} + +* { box-sizing: border-box; } + +body { + margin: 0; + background: radial-gradient(circle at 20% 20%, #11223f, #0b1021 45%), radial-gradient(circle at 80% 0%, #182743, #0b1021 40%), var(--bg); + color: var(--text); + line-height: 1.6; +} + +a { color: var(--accent); text-decoration: none; } +a:hover { color: var(--accent-2); } + +.container { + width: min(1100px, 90%); + margin: 0 auto; +} + +.site-header { + border-bottom: 1px solid var(--border); + position: sticky; + top: 0; + backdrop-filter: blur(8px); + background: rgba(11, 16, 33, 0.9); + z-index: 10; +} + +.header-grid { + display: grid; + grid-template-columns: 1fr auto; + align-items: center; + padding: 18px 0; + gap: 20px; +} + +.brand { + font-weight: 800; + letter-spacing: -0.02em; + color: white; +} + +.tagline { + margin: 4px 0 0; + color: var(--muted); +} + +.nav { + display: flex; + gap: 14px; + list-style: none; + padding: 0; + margin: 0; +} + +.nav a { + padding: 8px 12px; + border-radius: 10px; + border: 1px solid transparent; +} + +.nav a:hover { + border-color: var(--border); + background: rgba(255, 255, 255, 0.04); +} + +.hero { + padding: 70px 0 50px; +} + +.eyebrow { + text-transform: uppercase; + letter-spacing: 0.2em; + font-size: 12px; + color: var(--muted); + margin: 0 0 10px; +} + +h1, h2, h3, h4 { + margin: 10px 0; + line-height: 1.2; +} + +.lead { + font-size: 18px; + color: #d7e4f4; + max-width: 780px; +} + +.cta-row { + display: flex; + gap: 12px; + margin-top: 24px; + flex-wrap: wrap; +} + +.button { + display: inline-block; + padding: 12px 18px; + border-radius: 12px; + background: linear-gradient(120deg, var(--accent), var(--accent-2)); + color: #0b1021; + font-weight: 700; + box-shadow: var(--shadow); +} + +.button.ghost { + background: transparent; + color: var(--text); + border: 1px solid var(--border); + box-shadow: none; +} + +.grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 24px; + padding: 10px 0 50px; +} + +.card { + background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)); + border: 1px solid var(--border); + border-radius: 16px; + padding: 18px 18px 22px; + box-shadow: var(--shadow); +} + +.checks { + list-style: none; + padding: 0; + margin: 14px 0 0; +} + +.checks li::before { + content: "✓"; + color: var(--accent); + margin-right: 8px; +} + +.post-list { + list-style: none; + padding: 0; + margin: 0; +} + +.post-list li { + margin-bottom: 12px; + display: flex; + justify-content: space-between; + gap: 12px; +} + +.post-list.spaced li { + padding: 14px 0; + border-bottom: 1px solid var(--border); +} + +.muted { + color: var(--muted); + font-size: 14px; +} + +.page-header { + padding: 40px 0 10px; +} + +.post { + padding: 40px 0; +} + +.post .content { + margin-top: 24px; +} + +.ad { + margin: 26px 0; + padding: 14px 0; + border-top: 1px solid var(--border); + border-bottom: 1px solid var(--border); +} + +.ad-in-article { + text-align: center; +} + +.post .content p { + margin: 14px 0; +} + +.post .content code { + background: rgba(255, 255, 255, 0.04); + padding: 2px 6px; + border-radius: 6px; +} + +.back-link { + margin-top: 32px; +} + +.site-footer { + border-top: 1px solid var(--border); + padding: 20px 0; + margin-top: 40px; + color: var(--muted); +} + +.footer-grid { + display: flex; + justify-content: space-between; + align-items: center; + gap: 10px; + flex-wrap: wrap; +} + +code { + font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: 14px; + background: rgba(255, 255, 255, 0.06); + padding: 2px 5px; + border-radius: 6px; +} + +@media (max-width: 720px) { + .header-grid { grid-template-columns: 1fr; } + .nav { flex-wrap: wrap; } + .post-list li { flex-direction: column; align-items: flex-start; } +}