Other Examples

Examples that are less concise.

Pokemon Themes

View the full code here.

Related Code

// This code is only the widget part, not the data fetching or other features
const widget = await htmlWidget(
  `
  <widget url="${onClick}">
    <style>
      widget {
        refresh-after-date: 10;
        background: to top right, #fff-#030711, ${palette[0]};
        spacing: 5;
      }
      stack {
        spacing: 5
      }
      .header {
        layout: horizontally;
        align-content: center;
      }
      img {
        image-size: 75, 75;
      }
      .title {
        font: boldSystemFont, 20;
      }
      .subtitle {
        text-color: #64748b-#7f8ea3
      }
      .gradient {
        background: to right, ${palette.join(",")};
        corner-radius: 5;
        font: regularSystemFont, 2;
      }
      .circle {
        size: 25, 25;
        corner-radius: 100;
      }
      .pill {
        padding: 2, 5;
        corner-radius: 100;
        line-limit: 1;
        font: regularSystemFont, 12;
        minimumScaleFactor: 90%;
      }
      .colour-0 {
        background: ${palette[0]};
        text-color: ${colourIsDark(palette[0]) ? "#fff" : "#000"};
      }
      .colour-1 {
        background: ${palette[1]};
        text-color: ${colourIsDark(palette[1]) ? "#fff" : "#000"};
      }
      .colour-2 {
        background: ${palette[2]};
         text-color: ${colourIsDark(palette[2]) ? "#fff" : "#000"};
      }
    </style>

    <stack class="header">
      <!-- If there was an error loading the data, then the image will likely not load, so hide it -->
      ${
        !isErrorLoadingData &&
        `<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png"/>`
      }
      <stack layout="vertically" spacing="2">
        <text class="title">${name.toUpperCase()}</text>
        <text class="subtitle">${subtitle}</text>
        <!-- The gradient stack needs a text element for it to display with the proper height -->
        <stack class="gradient">
          <spacer/>
          <text> </text>
        </stack>
      </stack>
    </stack>

    <stack layout="horizontally">
      ${palette.map(
        (colour, index) => `
        <stack layout="vertically">
          <stack layout="horizontally">
            <spacer/>
            <stack class="circle colour-${index}"></stack>
            <spacer/>
          </stack>
          <stack layout="horizontally">
            <spacer/>
            <stack class="pill colour-${index}">
              <text>${colour}</text>
            </stack>
            <spacer/>
          </stack>
        </stack>
      `
      )}
    </stack>
  </widget>
  `,
  true
);