create-vanjs
Version:
🍦 Quick tool for scaffolding your first VanJS project
602 lines (596 loc) • 31 kB
JSX
import { Meta, Title } from "@vanjs/meta";
import { Counter } from "../components/Counter";
export default () => {
Title("VanJS + Vite Homepage");
Meta({ name: "description", content: "Home description" });
return [
<div class="flex h-screen">
<div class="container mx-auto p-4">
<h1 class="text-5xl font-bold my-8">Hello VanJS!</h1>
<div class="grid lg:grid-cols-3 gap-4 my-4">
<div class="card bg-primary text-primary-content">
<div class="card-body">
<h2 class="card-title">Basic Content</h2>
<p>
A card component has a figure, a body part, and inside body
there are title and actions parts
</p>
<div class="card-actions justify-end">
<button type="button" class="btn">Buy Now</button>
</div>
</div>
</div>
<div class="card bg-neutral text-neutral-content">
<div class="card-body items-center text-center">
<h2 class="card-title">SVG as JSX</h2>
<div class="flex gap-4">
<svg
aria-label="daisyUI logomark"
width="4rem"
height="4rem"
viewBox="0 0 450 450"
fill="none"
>
<g data-name="bg">
<g opacity="0.7">
<path
d="M148.425 40.1667C142.7 48.5988 138.15 58.3812 135.152 69.5141C126.533 101.527 101.527 126.533 69.5137 135.153C58.3806 138.15 48.5979 142.7 40.1656 148.426C28.2144 85.9133 85.9125 28.2153 148.425 40.1667Z"
fill="#FFD819"
/>
<path
d="M40.1668 148.425C42.0807 158.436 45.7808 168.571 51.5333 178.563C68.0751 207.294 68.0751 242.658 51.5333 271.39C45.7806 281.382 42.0805 291.516 40.1667 301.528C-12.4873 265.775 -12.4872 184.178 40.1668 148.425Z"
fill="#FFE029"
/>
<path
d="M148.425 409.786C142.7 401.354 138.15 391.571 135.152 380.438C126.533 348.425 101.527 323.419 69.5137 314.8C58.3806 311.802 48.5979 307.252 40.1656 301.526C28.2144 364.039 85.9125 421.737 148.425 409.786Z"
fill="#FFC141"
/>
<path
d="M301.528 409.785C291.517 407.871 281.383 404.171 271.391 398.419C242.659 381.877 207.295 381.877 178.564 398.419C168.572 404.171 158.437 407.872 148.426 409.785C184.178 462.439 265.776 462.439 301.528 409.785Z"
fill="#FFB655"
/>
<path
d="M409.787 301.527C401.355 307.253 391.573 311.802 380.44 314.8C348.427 323.419 323.421 348.425 314.801 380.439C311.804 391.571 307.254 401.354 301.528 409.786C364.04 421.737 421.738 364.039 409.787 301.527Z"
fill="#FFB35B"
/>
<path
d="M409.787 148.426C407.873 158.437 404.173 168.571 398.42 178.563C381.879 207.294 381.879 242.658 398.42 271.39C404.173 281.382 407.873 291.516 409.787 301.527C462.44 265.775 462.44 184.179 409.787 148.426Z"
fill="#FFB656"
/>
<path
d="M301.528 40.1664C307.254 48.5986 311.804 58.3811 314.801 69.5141C323.421 101.527 348.427 126.533 380.44 135.153C391.573 138.15 401.355 142.7 409.787 148.425C421.738 85.9132 364.04 28.216 301.528 40.1664Z"
fill="#FFC042"
/>
<path
d="M148.426 40.1671C158.437 42.081 168.571 45.781 178.563 51.5336C207.295 68.0754 242.659 68.0755 271.39 51.5336C281.382 45.7812 291.516 42.0812 301.527 40.1673C265.774 -12.4858 184.178 -12.4858 148.426 40.1671Z"
fill="#FFCE2A"
/>
</g>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M135.155 69.5136C138.152 58.3808 142.702 48.5984 148.428 40.1662C158.438 42.0801 168.573 45.7802 178.564 51.5326C207.296 68.0744 242.66 68.0744 271.391 51.5326C281.383 45.78 291.518 42.0798 301.529 40.166C307.255 48.5982 311.805 58.3807 314.802 69.5136C323.422 101.527 348.428 126.533 380.441 135.152C391.573 138.15 401.356 142.699 409.788 148.425C407.874 158.436 404.174 168.571 398.421 178.562C381.879 207.294 381.879 242.658 398.421 271.39C404.174 281.381 407.874 291.516 409.788 301.527C401.356 307.253 391.573 311.802 380.441 314.8C348.428 323.419 323.422 348.425 314.802 380.438C311.805 391.571 307.255 401.354 301.529 409.786C291.518 407.872 281.383 404.172 271.391 398.419C242.66 381.878 207.296 381.878 178.564 398.419C168.573 404.172 158.438 407.872 148.428 409.786C142.702 401.354 138.152 391.571 135.155 380.438C126.535 348.425 101.529 323.419 69.5161 314.8C58.383 311.802 48.6003 307.252 40.168 301.526C42.0819 291.516 45.7819 281.381 51.5344 271.39C68.0762 242.658 68.0762 207.294 51.5344 178.562C45.7819 168.571 42.0819 158.437 40.168 148.426C48.6002 142.7 58.3829 138.15 69.5161 135.152C101.529 126.533 126.535 101.527 135.155 69.5136Z"
fill="url(#daisy_disc_gradient)"
/>
<animateTransform
attributeName="transform"
type="rotate"
values="0 225 225; -45 225 225; 45 225 225; 0 225 225"
dur="30s"
repeatCount="indefinite"
/>
</g>
<rect
x="313.369"
y="252.866"
width="31.3006"
height="15.6503"
rx="7.82514"
transform="rotate(60 313.369 252.866)"
fill="#FFA17A"
/>
<rect
x="293.808"
y="252.866"
width="31.3006"
height="15.6503"
rx="7.82514"
transform="rotate(60 293.808 252.866)"
fill="#FFA17A"
/>
<rect
x="154.911"
y="252.866"
width="31.3006"
height="15.6503"
rx="7.82514"
transform="rotate(60 154.911 252.866)"
fill="#FFAB89"
/>
<rect
x="135.348"
y="252.866"
width="31.3006"
height="15.6503"
rx="7.82514"
transform="rotate(60 135.348 252.866)"
fill="#FFAB89"
/>
<g>
<rect
x="296.044"
y="164.833"
width="31.3006"
height="15.6503"
rx="7.82514"
transform="rotate(15 296.044 164.833)"
fill="#FFA17A"
/>
<animateTransform
attributeName="transform"
type="translate"
values="0,0; 0,-3; 0,0; 0,0; 0,0"
dur="5s"
repeatCount="indefinite"
/>
</g>
<g>
<rect
x="123.752"
y="172.934"
width="31.3006"
height="15.6503"
rx="7.82514"
transform="rotate(-15 123.752 172.934)"
fill="#FFAB89"
/>
<animateTransform
attributeName="transform"
type="translate"
values="0,0; 0,-3; 0,0; 0,0; 0,0"
dur="5s"
repeatCount="indefinite"
/>
</g>
<g data-name="mouth">
<path
d="M207.872 252.866C211.999 257.438 219.319 260.691 225.479 260.691C231.638 260.691 238.958 257.438 243.085 252.866"
stroke="#8B2C0C"
stroke-opacity="0.05"
stroke-width="12"
stroke-linecap="round"
/>
<path
d="M207.872 250.91C211.999 255.482 219.319 258.735 225.479 258.735C231.638 258.735 238.958 255.482 243.085 250.91"
stroke="#D05B34"
stroke-width="12"
stroke-linecap="round"
/>
</g>
<g data-name="eye-open">
<title>This is a title</title>
<g data-name="left">
<rect
x="125.037"
y="192.221"
width="31.3006"
height="15.6503"
rx="7.82514"
transform="rotate(45 125.037 192.221)"
fill="black"
/>
<rect
x="117.882"
y="196.134"
width="58.6886"
height="58.6886"
rx="29.3443"
fill="black"
/>
<rect
x="117.882"
y="198.089"
width="58.6886"
height="58.6886"
rx="29.3443"
fill="black"
fill-opacity="0.05"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M125.086 233.301C128.309 224.184 137.004 217.652 147.225 217.652C157.447 217.652 166.142 224.185 169.365 233.304C166.142 242.42 157.446 248.952 147.226 248.952C137.004 248.952 128.308 242.419 125.086 233.301Z"
fill="#784012"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M166.831 238.399C169.279 234.693 170.704 230.252 170.704 225.478C170.704 212.513 160.193 202.002 147.228 202.002C134.263 202.002 123.753 212.513 123.753 225.478C123.753 229.758 124.898 233.771 126.899 237.226C131.1 230.867 138.311 226.671 146.502 226.671C155.187 226.671 162.771 231.388 166.831 238.399Z"
fill="black"
fill-opacity="0.35"
/>
<rect
x="133.532"
y="211.784"
width="27.388"
height="27.388"
rx="13.694"
fill="black"
/>
<circle
cx="140.814"
cy="211.609"
r="11.7377"
fill="white"
/>
<circle
cx="162.848"
cy="227.64"
r="5.86885"
fill="white"
/>
<circle
cx="155.525"
cy="239.853"
r="3.91257"
fill="white"
/>
</g>
<g data-name="right">
<rect
x="337.181"
y="203.288"
width="31.3006"
height="15.6503"
rx="7.82514"
transform="rotate(135 337.181 203.288)"
fill="black"
/>
<rect
x="274.385"
y="198.09"
width="58.6886"
height="58.6886"
rx="29.3443"
fill="black"
fill-opacity="0.05"
/>
<rect
x="274.385"
y="196.134"
width="58.6886"
height="58.6886"
rx="29.3443"
fill="black"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M281.629 233.41C284.664 223.959 293.525 217.12 303.984 217.12C314.166 217.12 322.833 223.602 326.086 232.664C323.051 242.114 314.189 248.954 303.731 248.954C293.549 248.954 284.881 242.472 281.629 233.41Z"
fill="#784012"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M323.862 237.557C325.984 234.028 327.204 229.896 327.204 225.479C327.204 212.514 316.693 202.003 303.728 202.003C290.763 202.003 280.253 212.514 280.253 225.479C280.253 230.068 281.57 234.349 283.846 237.966C287.951 231.137 295.432 226.569 303.98 226.569C312.356 226.569 319.708 230.956 323.862 237.557Z"
fill="black"
fill-opacity="0.35"
/>
<rect
x="290.035"
y="211.785"
width="27.388"
height="27.388"
rx="13.694"
fill="black"
/>
<circle
cx="297.318"
cy="211.609"
r="11.7377"
fill="white"
/>
<circle
cx="319.352"
cy="227.64"
r="5.86885"
fill="white"
/>
<circle
cx="312.029"
cy="239.853"
r="3.91257"
fill="white"
/>
</g>
<animate
attributeName="display"
values="inline;none;inline"
keyTimes="0;0.97;1"
dur="15s"
repeatCount="indefinite"
/>
</g>
<g
data-name="eye-close"
stroke="black"
stroke-width="12"
stroke-linecap="round"
style="display: none;"
>
<path d="M326 224C326 212.402 315.926 203 303.5 203C291.074 203 281 212.402 281 224" />
<path d="M170 224C170 212.402 159.926 203 147.5 203C135.074 203 125 212.402 125 224" />
<animate
attributeName="display"
values="none;inline;none"
keyTimes="0;0.97;1"
dur="15s"
repeatCount="indefinite"
/>
</g>
<defs>
<radialGradient
id="daisy_disc_gradient"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(40.0037 40.0027) rotate(45) scale(522.888 522.888)"
>
<stop stop-color="#FFE600" />
<stop offset="1" stop-color="#FFA573" />
</radialGradient>
</defs>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="4rem"
height="4rem"
viewBox="0 0 768 767.999994"
preserveAspectRatio="xMidYMid meet"
>
<defs>
<clipPath id="5499afe1a4">
<path
d="M 215.664062 352.992188 L 398 352.992188 L 398 586 L 215.664062 586 Z M 215.664062 352.992188 "
clip-rule="nonzero"
>
</path>
</clipPath>
<clipPath id="6e3c31a3f1">
<path
d="M 307.773438 586.222656 L 399.886719 352.992188 L 215.664062 352.992188 L 307.773438 586.222656 "
clip-rule="nonzero"
>
</path>
</clipPath>
<clipPath id="c2a5ed2f60">
<path
d="M 262.246094 437.246094 L 303.734375 437.246094 L 303.734375 586.222656 L 262.246094 586.222656 Z M 262.246094 437.246094 "
clip-rule="nonzero"
>
</path>
</clipPath>
<clipPath id="341bd9ebc4">
<path
d="M 176.109375 45.578125 L 431.589844 45.578125 L 431.589844 354.578125 L 176.109375 354.578125 Z M 176.109375 45.578125 "
clip-rule="nonzero"
>
</path>
</clipPath>
<clipPath id="591359977e">
<path
d="M 249 100 L 350 100 L 350 115 L 249 115 Z M 249 100 "
clip-rule="nonzero"
>
</path>
</clipPath>
<clipPath id="a29af40afb">
<path
d="M 211.324219 355.304688 C 211.324219 355.304688 178.050781 328.160156 195.265625 301.105469 C 158.363281 259.308594 183.039062 206.449219 211.324219 192.921875 C 203.335938 158.503906 222.960938 123.03125 270.304688 111.78125 C 270.304688 111.78125 319.265625 88.945312 299.503906 49.40625 C 299.015625 48.402344 299.246094 47.183594 300.074219 46.429688 C 300.90625 45.671875 302.140625 45.550781 303.101562 46.132812 C 346.609375 72.28125 336.726562 111.78125 336.726562 111.78125 C 384.0625 123.03125 415.375 174.480469 395.699219 213.824219 C 423.992188 227.34375 451.125 277.75 414.222656 319.546875 C 431.4375 346.601562 395.699219 355.304688 395.699219 355.304688 "
clip-rule="evenodd"
>
</path>
</clipPath>
<clipPath id="c6b87c20df">
<path
d="M 191 301 L 425 301 L 425 330 L 191 330 Z M 191 301 "
clip-rule="nonzero"
>
</path>
</clipPath>
<clipPath id="952bfe5c80">
<path
d="M 211.324219 355.304688 C 211.324219 355.304688 178.050781 328.160156 195.265625 301.105469 C 158.363281 259.308594 183.039062 206.449219 211.324219 192.921875 C 203.335938 158.503906 222.960938 123.03125 270.304688 111.78125 C 270.304688 111.78125 319.265625 88.945312 299.503906 49.40625 C 299.015625 48.402344 299.246094 47.183594 300.074219 46.429688 C 300.90625 45.671875 302.140625 45.550781 303.101562 46.132812 C 346.609375 72.28125 336.726562 111.78125 336.726562 111.78125 C 384.0625 123.03125 415.375 174.480469 395.699219 213.824219 C 423.992188 227.34375 451.125 277.75 414.222656 319.546875 C 431.4375 346.601562 395.699219 355.304688 395.699219 355.304688 "
clip-rule="evenodd"
>
</path>
</clipPath>
<clipPath id="e6a025e8f2">
<path
d="M 192 192 L 415 192 L 415 229 L 192 229 Z M 192 192 "
clip-rule="nonzero"
>
</path>
</clipPath>
<clipPath id="3a8aa5200a">
<path
d="M 211.324219 355.304688 C 211.324219 355.304688 178.050781 328.160156 195.265625 301.105469 C 158.363281 259.308594 183.039062 206.449219 211.324219 192.921875 C 203.335938 158.503906 222.960938 123.03125 270.304688 111.78125 C 270.304688 111.78125 319.265625 88.945312 299.503906 49.40625 C 299.015625 48.402344 299.246094 47.183594 300.074219 46.429688 C 300.90625 45.671875 302.140625 45.550781 303.101562 46.132812 C 346.609375 72.28125 336.726562 111.78125 336.726562 111.78125 C 384.0625 123.03125 415.375 174.480469 395.699219 213.824219 C 423.992188 227.34375 451.125 277.75 414.222656 319.546875 C 431.4375 346.601562 395.699219 355.304688 395.699219 355.304688 "
clip-rule="evenodd"
>
</path>
</clipPath>
</defs>
<path
fill="#f44336"
d="M 192.09375 -0.09375 C 86.0625 -0.09375 0.09375 85.875 0.09375 191.90625 L 0.09375 575.90625 C 0.09375 681.9375 86.0625 767.90625 192.09375 767.90625 L 576.09375 767.90625 C 682.125 767.90625 768.09375 681.9375 768.09375 575.90625 L 768.09375 191.90625 C 768.09375 85.875 682.125 -0.09375 576.09375 -0.09375 Z M 192.09375 -0.09375 "
fill-opacity="1"
fill-rule="nonzero"
>
</path>
<g
clip-path="url(#5499afe1a4)"
transform="matrix(1, 0, 0, 1, 80, 0)"
>
<g clip-path="url(#6e3c31a3f1)">
<path
fill="#f9ad48"
d="M 215.664062 352.992188 L 397.6875 352.992188 L 397.6875 585.582031 L 215.664062 585.582031 Z M 215.664062 352.992188 "
fill-opacity="1"
fill-rule="nonzero"
>
</path>
</g>
</g>
<g
clip-path="url(#c2a5ed2f60)"
transform="matrix(1, 0, 0, 1, 70, 0)"
>
<path
fill="#f9ad48"
d="M 262.246094 437.246094 L 305.867188 437.246094 L 305.867188 587.503906 L 262.246094 587.503906 Z M 262.246094 437.246094 "
fill-opacity="1"
fill-rule="nonzero"
>
</path>
</g>
<g
clip-path="url(#341bd9ebc4)"
transform="matrix(1, 0, 0, 1, 80, 0)"
>
<path
fill="#fdfdfe"
d="M 211.324219 355.304688 C 211.324219 355.304688 178.050781 328.160156 195.265625 301.105469 C 158.363281 259.308594 183.039062 206.449219 211.324219 192.921875 C 203.335938 158.503906 222.957031 123.03125 270.304688 111.78125 C 270.304688 111.78125 319.265625 88.945312 299.503906 49.40625 C 299.015625 48.402344 299.246094 47.183594 300.074219 46.429688 C 300.90625 45.671875 302.140625 45.550781 303.101562 46.132812 C 346.609375 72.28125 336.726562 111.78125 336.726562 111.78125 C 384.0625 123.03125 415.375 174.480469 395.699219 213.824219 C 423.992188 227.34375 451.125 277.75 414.222656 319.546875 C 431.4375 346.601562 395.699219 355.304688 395.699219 355.304688 "
fill-opacity="1"
fill-rule="evenodd"
>
</path>
</g>
<g
clip-path="url(#591359977e)"
transform="matrix(1, 0, 0, 1, 80, 0)"
>
<g clip-path="url(#a29af40afb)">
<path
fill="#f0f1f4"
d="M 336.726562 111.78125 C 336.726562 111.78125 307.355469 105.789062 270.304688 111.78125 C 233.246094 117.777344 257.167969 101.179688 257.167969 101.179688 C 257.167969 101.179688 316.273438 96.109375 349.488281 111.78125 C 346.71875 117.316406 336.726562 111.78125 336.726562 111.78125 Z M 336.726562 111.78125 "
fill-opacity="1"
fill-rule="evenodd"
>
</path>
</g>
</g>
<g
clip-path="url(#c6b87c20df)"
transform="matrix(1, 0, 0, 1, 80, 0)"
>
<g clip-path="url(#952bfe5c80)">
<path
fill="#f0f1f4"
d="M 191.316406 309.976562 C 191.316406 309.976562 227.554688 317.546875 284.667969 319.546875 C 353.101562 321.945312 424.058594 329.386719 424.058594 329.386719 L 414.222656 319.546875 C 414.222656 319.546875 368.296875 313.8125 284.667969 309.976562 C 201.105469 306.132812 195.265625 301.105469 195.265625 301.105469 Z M 191.316406 309.976562 "
fill-opacity="1"
fill-rule="evenodd"
>
</path>
</g>
</g>
<g
clip-path="url(#e6a025e8f2)"
transform="matrix(1, 0, 0, 1, 80, 0)"
>
<g clip-path="url(#3a8aa5200a)">
<path
fill="#f0f1f4"
d="M 211.324219 192.921875 C 211.324219 192.921875 344.414062 196.839844 395.699219 213.824219 C 408.234375 210.515625 414.277344 228.457031 414.277344 228.457031 C 337.539062 209.058594 271.070312 204.855469 197 203.488281 L 192.359375 192.921875 Z M 211.324219 192.921875 "
fill-opacity="1"
fill-rule="evenodd"
>
</path>
</g>
</g>
<g
fill="#ffffff"
fill-opacity="1"
transform="matrix(1, 0, 0, 1, 80, 0)"
>
<g transform="translate(-5.061192, 679.12656)">
<g>
<path d="M 439.417969 -274.324219 L 473.835938 -274.324219 C 495.28125 -274.324219 512.238281 -289.789062 512.238281 -308.742188 C 512.238281 -323.703125 502.761719 -332.183594 485.304688 -332.683594 L 435.429688 -332.683594 L 425.953125 -332.183594 C 405.503906 -331.683594 400.015625 -329.191406 391.535156 -314.726562 L 385.550781 -304.25 L 267.34375 -103.246094 L 267.34375 -199.507812 C 267.34375 -245.894531 264.847656 -269.835938 258.363281 -288.789062 C 248.886719 -315.722656 214.972656 -336.171875 179.058594 -336.171875 C 106.238281 -336.171875 43.394531 -273.828125 43.394531 -201.503906 C 43.394531 -150.628906 82.796875 -110.726562 132.175781 -110.726562 C 168.085938 -110.726562 193.523438 -126.6875 193.523438 -149.632812 C 193.523438 -162.101562 181.054688 -173.574219 167.585938 -173.074219 L 146.640625 -172.574219 C 125.691406 -172.078125 109.230469 -188.039062 109.230469 -207.988281 C 109.230469 -242.402344 139.65625 -275.324219 171.578125 -275.324219 C 184.046875 -275.324219 195.019531 -266.84375 199.507812 -253.375 C 203 -243.898438 203.5 -236.917969 204.496094 -199.507812 L 208.488281 -35.414062 C 208.984375 -19.453125 210.480469 -12.46875 214.972656 -4.988281 C 220.457031 3.988281 232.925781 10.472656 245.394531 10.472656 C 263.851562 10.472656 275.324219 1.996094 289.289062 -21.945312 Z M 439.417969 -274.324219 ">
</path>
</g>
</g>
</g>
</svg>
</div>
</div>
</div>
<div class="card bg-neutral text-neutral-content">
<div class="card-body items-center text-center">
<h2 class="card-title">MathML JSX</h2>
<p>Quadratic formula easy mode</p>
<math class="text-2xl">
<mrow>
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mo>-</mo>
<mi>b</mi>
<mo>±</mo>
<msqrt>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>-</mo>
<mn>4</mn>
<mi>a</mi>
<mi>c</mi>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mi>a</mi>
</mrow>
</mfrac>
</mrow>
</math>
</div>
</div>
<div class="card bg-neutral text-neutral-content">
<div class="card-body items-center text-center">
<h2 class="card-title">A basic JSX component</h2>
<Counter />
</div>
</div>
<div class="card bg-neutral text-neutral-content">
<div class="card-body items-center text-center">
<h2 class="card-title">SVG MathML JSX</h2>
<p>Formula inside SVG foreignObject</p>
<svg width="200" height="50" viewBox="0 0 200 50">
<foreignObject x="20" y="20" width="160" height="60">
<div>
<math class="text-2xl">
<msup>
<mi>e</mi>
<mrow>
<mi>i</mi>
<mi>π</mi>
</mrow>
</msup>
<mo>+</mo>
<mn>1</mn>
<mo>=</mo>
<mn>0</mn>
</math>
</div>
</foreignObject>
</svg>
</div>
</div>
</div>
</div>
</div>,
];
};