dotfiles

def to-divs [] {
  select 0 |
  transpose name value |
  each { | color |
    $"
    <div class='color_rect' style='background-color: ($color.value)'>
    <span class='color_name grow' onclick='copy\(\"($color.value)\"\)'>($color.name) ($color.value)</span>
    </div>"
  } |
  str join (char newline)
}

def make-code-block-divs [] {
	'
  <pre><code>
<span class="keyword">package</span> <span class="package">com.orga.my.package</span>;

<span class="keyword">import</span> java.util.<span class="type">List</span>;
<span class="keyword">import</span> java.util.<span class="type">Map</span>;
<span class="keyword">import</span> java.util.<span class="type">Optional</span>;
<span class="keyword">import</span> org.springframework.stereotype.<span class="type">Service</span>;
<span class="keyword">import</span> jakarta.validation.constraints.<span class="type">NotNull</span>;

<span class="comment">// DemoService: A chaotic showcase of every Java keyword and type</span>
<span class="annotation">@Service</span>
<span class="keyword">public</span> <span class="keyword">final</span> <span class="keyword">class</span> <span class="class-name">DemoService</span> <span class="keyword">implements</span> <span class="type">DemoInterface</span> {
  <span class="keyword">private</span> <span class="keyword">static</span> <span class="keyword">final</span> <span class="type">String</span> CONSTANT = <span class="string">"CONST"</span>;
  <span class="keyword">private</span> <span class="keyword">transient</span> <span class="keyword">volatile</span> <span class="type">int</span> counter = 0;
  <span class="keyword">private</span> <span class="type">Map</span><<span class="type">Long</span>, <span class="type">Double</span>> cache;

  <span class="comment">// Enum for no reason other than to flex</span>
  <span class="keyword">public</span> <span class="keyword">enum</span> <span class="class-name">Mode</span> { ON, OFF }

  <span class="comment">// Record because Java loves new toys</span>
  <span class="keyword">public</span> <span class="keyword">record</span> <span class="class-name">Data</span>(<span class="type">byte</span> b, <span class="type">short</span> s) {}

  <span class="keyword">public</span> <span class="keyword">synchronized</span> <span class="type">void</span> demo(<span class="annotation">@NotNull</span> <span class="type">Object</span> obj) <span class="keyword">throws</span> <span class="type">Exception</span> {
    <span class="keyword">assert</span> obj != <span class="literal">null</span> : <span class="string">"Obj is null, you fool"</span>;
    <span class="keyword">var</span> value = <span class="keyword">new</span> <span class="type">Data</span>((<span class="type">byte</span>) 1, (<span class="type">short</span>) 2);
    <span class="keyword">if</span> (obj <span class="keyword">instanceof</span> <span class="type">String</span> str) {
      <span class="keyword">switch</span> (str) {
        <span class="keyword">case</span> <span class="string">"test"</span> -> { <span class="keyword">yield</span> <span class="literal">true</span>; }
        <span class="keyword">default</span> -> { <span class="keyword">yield</span> <span class="literal">false</span>; }
      }
    }
    <span class="keyword">else</span> {
      <span class="keyword">for</span> (<span class="type">int</span> i = 0; i < 10; i++) {
        <span class="keyword">continue</span>;
      }
    }
    <span class="keyword">while</span> (counter < 5) {
      <span class="keyword">try</span> {
        <span class="keyword">double</span> result = Math.random();
        <span class="keyword">if</span> (result > 0.5) <span class="keyword">break</span>;
      } <span class="keyword">catch</span> (<span class="type">Exception</span> e) {
        <span class="keyword">throw</span> <span class="keyword">new</span> <span class="type">RuntimeException</span>(<span class="string">"Chaos"</span>, e);
      } <span class="keyword">finally</span> {
        counter++;
      }
    }
    <span class="keyword">synchronized</span> (<span class="keyword">this</span>) {
      cache.put(1L, 42.0);
    }
    <span class="keyword">return</span>;
  }

  <span class="comment">// Abstract method in an interface for no reason</span>
  <span class="keyword">interface</span> <span class="class-name">DemoInterface</span> {
    <span class="keyword">abstract</span> <span class="type">void</span> pointless();
  }

  <span class="comment">// Module stuff because Java wants to be fancy</span>
  <span class="keyword">module</span> demo.module {
    <span class="keyword">requires</span> java.base;
    <span class="keyword">exports</span> com.orga.my.package;
    <span class="keyword">provides</span> <span class="type">DemoInterface</span> <span class="keyword">with</span> <span class="class-name">DemoService</span>;
  }
}
  </code></pre>
	'
}

export def html [ theme: string ] {
	let palette = ( open $"output/($theme).toml" | get palette )
	let palette_colors = ( $palette | reject content ui )
	let content_colors = ( $palette | get content )
	let ui_colors = ( $palette | get ui )

	let global_color_divs = ( $palette_colors | to-divs )
	let content_color_divs = ( $content_colors | to-divs )
	let ui_color_divs = ( $ui_colors | to-divs )
	let code_block_divs = make-code-block-divs
  let backdrop = if $theme == "dark" { "black" } else { "white" }
  let normal = if $theme == "dark" { "white" } else { "black" }

  $"
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset='UTF-8'>
		<meta name='viewport' content='width=device-width, initial-scale=1.0'>
  </head>
  <script>
  function copy\(color\) {
    navigator.clipboard.writeText\(color\);
    alert\('Copied ' + color + ' into clipboard!'\);
  }
  </script>
  <style>
  :root {
    background-color: ($backdrop);
  }
  h1, h2 {
    font-family: serif;
    color: ($normal);
  }
  h1::before {
    content: '# ';
  }
  h2::before {
    content: '## ';
  }
  .grid {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto;
    column-gap: 16px;
    row-gap: 16px;
    padding: 8px;
  }
  .color_rect {
    width: 100%;
    height: 300px;
    border: ($normal) 5px solid;
    border-radius: 8px;
    display: inline-flex;
  }
  .color_name {
    font-family: monospace;
    font-weight: bold;
    font-size: smaller;
    color: ($backdrop);
    opacity: 0.66;
    border-radius: 8px;
    background-color: ($normal);
    padding: 8px;
    place-self: end;
  }
  .grow {
    transition: all .2s ease-in-out;
  }
  .grow:hover {
    cursor: pointer;
    border: ($normal) 2px solid;
    transform: scale\(1.666\);
    z-index: 999;
  }
	pre {
		max-width: 800px;
		margin: 20px auto;
		padding: 15px;
		border-radius: 8px;
		box-shadow: 0 2px 5px rgba\(0, 0, 0, 0.5);
		background: ($palette.content.backdrop);
		color: ($palette.content.normal);
		font-family: 'Cousine', 'Consolas', monospace;
		font-size: 16px;
		line-height: 1.5;
		overflow-x: auto;
		tab-size: 2;
	}
	code {
		display: block;
	}
	.code-block {
		max-width: 800px;
		margin: 20px auto;
		padding: 15px;
		border-radius: 8px;
		box-shadow: 0 4px 8px rgba\(142, 142, 142, 0.3);
		border: 1px solid #999999;
		line-height: 1.5;
		overflow-x: auto;
		tab-size: 2;
	}
	.keyword { color: ($palette.content.minor); }
	.string { color: ($palette.content.focus); font-style: italic; }
	.comment { color: ($palette.content.important_global); font-weight: bold; }
	.class-name { color: ($palette.content.important_local); }
	.package { color: ($palette.content.minor); }
	.type { color: ($palette.content.important_local); }
	.literal { color: ($palette.content.focus); }
	.annotation { color: ($palette.content.minor); }
  </style>

  <h1>nugu color palette</h1>

  <h2>global colors</h2>
  <div class='grid'>
  ($global_color_divs)
  </div>

  <h2>content colors</h2>
  <div class='grid'>
  ($content_color_divs)
  </div>

  <h2>ui colors</h2>
  <div class='grid'>
  ($ui_color_divs)
  </div>

  <h2>syntax example</h2>
  <div class='code-block'>
  ($code_block_divs)
  </div>
  </html>
  "
}