prechoster (https://cloudwithlightning.net/random/chostin/prechoster/) template for AO3-style content warnings on cohost

AO3-style content warnings.toml

version = 1
title = 'Svelte Templating'

[[modules]]
plugin = 'source.svelte'
data.contents = '''
<script>
  import AO3 from "./AO3.svelte";
</script>

<!-- rating is G, T, M, E, or none -->
<AO3
  rating=""
  chooseNotToWarn="{false}"
  graphicViolence="{false}"
  majorCharacterDeath="{false}"
  noncon="{false}"
  underage="{false}"
  femslash="{false}"
  het="{false}"
  gen="{false}"
  slash="{false}"
  multi="{false}"
  other="{false}"
  complete="{true}"
  title="Title"
  fandom="Fandom"
>
  Post content
</AO3>
'''
sends = [2]

[[modules]]
plugin = 'source.svelte-component'
data.name = 'AO3'
data.contents = '''
<div class="container">
  <ul class="required-tags">
    <li title="{ratingText}" style="{ratingStyle}">{ratingText}</li>
    <li title="{warningText}" style="{warningStyle}">{warningText}</li>
    <li title="{pairingsText}" style="{pairingsStyle}">{pairingsText}</li>
    <li title="{completionText}" style="{completionStyle}">{completionText}</li>
  </ul>
  <h4>{title}</h4>
  <h5>{fandom}</h5>
  <span class="clearfix"></span>
  <div class="warnings-text">{@html warningTags}</div>
  <details style="position: relative">
    <summary class="button">
      <span aria-hidden="true">Show</span
      ><span class="sr-only">Toggle</span> Post
    </summary>
    <div class="hide" aria-hidden="true">
      <span class="button">Hide Post</span>
    </div>
    <div style="margin-top: 0.643em"><slot></slot></div>
  </details>
</div>

<style>
  .container {
    position: relative;
  }
  .required-tags {
    display: grid;
    grid-template-columns: 25px 25px;
    grid-gap: 3px;
    padding: 0;
    float: left;
    margin-right: 7px;
    margin-bottom: 3px;
  }
  .required-tags li {
    width: 25px;
    height: 25px;
    font-size: 0;
    user-select: none;
    background: gray;
    background-repeat: no-repeat;
    background-size: cover;
  }
  h4,
  h5 {
    font-family: Georgia, serif;
    font-weight: 400;
    word-wrap: break-word;
    margin: 0.375em 5.25em 0 65px;
    line-height: 18px;
  }
  h4 {
    font-size: 16.002px;
  }
  h5 {
    font-size: 14px;
  }
  .clearfix {
    display: block;
    clear: both;
  }
  .warnings-text {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "GNU Unifont", Verdana,
      Helvetica, sans-serif;
    font-size: 14px;
    line-height: 18px;
    margin: 9.002px 0;
  }
  .warnings-text strong {
    font-weight: 700;
  }
  .button {
    background: #eee;
    color: #444;
    width: auto;
    font-size: 14px;
    line-height: 18px;
    height: 27px;
    vertical-align: middle;
    display: inline-block;
    padding: 0.25em 0.75em;
    white-space: nowrap;
    overflow: visible;
    position: relative;
    text-decoration: none;
    border: 1px solid #bbb;
    border-bottom: 1px solid #aaa;
    background-image: linear-gradient(#fff 2%, #ddd 95%, #bbb 100%);
    border-radius: 0.25em;
    box-shadow: none;
    user-select: none;
    width: 90px;
    text-align: center;
  }
  .hide {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
</style>
<script>
  export let rating;

  export let chooseNotToWarn;
  export let graphicViolence;
  export let majorCharacterDeath;
  export let noncon;
  export let underage;

  export let femslash;
  export let het;
  export let gen;
  export let slash;
  export let multi;
  export let other;

  export let complete;

  export let title;
  export let fandom;

  let ratingText =
    {
      G: "General Audiences",
      T: "Teen And Up Audiences",
      M: "Mature",
      E: "Explicit",
    }[rating] || "Not Rated";
  let ratingStyle = `background:url('${{ G: "https://archiveofourown.org/images/skins/iconsets/default/rating-general-audience.png", T: "https://archiveofourown.org/images/skins/iconsets/default/rating-teen.png", M: "https://archiveofourown.org/images/skins/iconsets/default/rating-mature.png", E: "https://archiveofourown.org/images/skins/iconsets/default/rating-explicit.png" }[rating] || "https://archiveofourown.org/images/skins/iconsets/default/rating-notrated.png"}')`;
  let warningsTmp = [
    chooseNotToWarn && "Choose Not To Use Archive Warnings",
    graphicViolence && "Graphic Depictions Of Violence",
    majorCharacterDeath && "Major Character Death",
    noncon && "Rape/Non-Con",
    underage && "Underage",
  ].filter(Boolean);
  let warnings = warningsTmp.length
    ? warningsTmp
    : ["No Archive Warnings Apply"];
  let warningText = warnings.join(", ");
  let warningTags = warnings.map((e) => `<strong>${e}</strong>`).join(", ");
  let warningStyle = `grid-row:2;background:url('${graphicViolence || majorCharacterDeath || noncon || underage ? "https://archiveofourown.org/images/skins/iconsets/default/warning-yes.png" : chooseNotToWarn ? "/images/skins/iconsets/default/warning-choosenotto.png" : "https://archiveofourown.org/images/skins/iconsets/default/warning-no.png"}')`;
  let pairings = [
    femslash && "F/F",
    het && "F/M",
    gen && "Gen",
    slash && "M/M",
    multi && "Multi",
    other && "Other",
  ].filter(Boolean);
  let pairingsText = pairings.join(", ") || "No category";
  let pairingsStyle = `background:url('${pairings.length > 1 || multi ? "https://archiveofourown.org/images/skins/iconsets/default/category-multi.png" : femslash ? "https://archiveofourown.org/images/skins/iconsets/default/category-femslash.png" : het ? "https://archiveofourown.org/images/skins/iconsets/default/category-het.png" : gen ? "https://archiveofourown.org/images/skins/iconsets/default/category-gen.png" : slash ? "https://archiveofourown.org/images/skins/iconsets/default/category-slash.png" : other ? "https://archiveofourown.org/images/skins/iconsets/default/category-other.png" : "https://archiveofourown.org/images/skins/iconsets/default/category-none.png"}')`;
  let completionText = complete ? "Complete Work" : "Work in Progress";
  let completionStyle = `background:url('${complete ? "https://archiveofourown.org/images/skins/iconsets/default/complete-yes.png" : "https://archiveofourown.org/images/skins/iconsets/default/complete-no.png"}')`;
</script>
'''
sends = [0]

[[modules]]
plugin = 'transform.style-inliner'
data.mode = 'attr'
sends = ['output']