Refactor site

[vincerubinetti]

Description

This is a very large change that affects basically everything in the /site folder. When I first scaffolded the site, I avoided adding extra complication since non-web-developers would be editing it. But after encountering several bugs that would've been avoided by type-safety, and accumulating a bunch of utility and one-off style classes, I wanted to just upgrade the code base to modern best practices, even if it makes changes a bit more difficult for others.

Unfortunately, we should review the entire site page by page to make sure nothing has broken.

I did make some opinionated changes that may end up being reverted:

• To make layout on the locus page more predictable and clean, I got rid of a lot of the conditional rendering. This means that info boxes are often empty, but what you get in return is that they'll always be in the same position, which can be good for muscle memory and comparing tabs side by side. It also has a secondary benefit of showing the user what types of info we have about loci in general, even if this locus is missing some of it.
• I changed the evidence colors to something that I think looks more consistent and readable. Iirc, you wanted to match what some external site was doing for coloring, but perhaps it's okay to blaze our own trail here.

If you have any questions or would like an in-person walkthrough of these changes, lmk.

Major Changes

• Convert to typescript
• Convert from vanilla css to tailwind
• Fresh coat of paint (update theme colors, styles, etc)
• Make locus page layout more static (less conditional rendering of sections and boxes)
• Closes Website changes #343

Checklist

• All changes are well summarized
• Check all tests pass
• Check that the website preview looks good
• Update the STRchive version in CITATION.cff, format X.Y.Z. If any major changes, increment Y. If only minor changes, increment Z. If the breaking change (rare), increment X.
• Ask someone to review this PR

[netlify]

✅ Deploy Preview for strchive canceled.

Name	Link
🔨 Latest commit	9f21212
🔍 Latest deploy log	https://app.netlify.com/projects/strchive/deploys/6a3caf3b2954cd00080d5190

[hdashnow]

@vincerubinetti would it be helpful to add a references field in criTRia for consistency? It is indeed a convenience field and would be easy to create/update during the json validation step.

[hdashnow]

Could you please move the criTRia download buttons to the top right corners of their respective tables? That will make it consistent with the locus table and easier to find.

The colors and symbols look better to me now. I am noticing that the "No Known" and "Limited" are the same/similar colors. I think "No Known" should be grey (closest to "Provisional" in meaning).

[hdashnow]

We also added a new field to the locus pages since you started this PR. Something like this is needed:

      <!-- detection -->
      <div class="box">
        <strong>Detection</strong>
        {locus.detection && <div>{locus.detection}</div>}
      </div>

[hdashnow]

@vincerubinetti would it be helpful to add a references field in criTRia for consistency? It is indeed a convenience field and would be easy to create/update during the json validation step.

I added references

[vincerubinetti]

@vincerubinetti would it be helpful to add a references field in criTRia for consistency?

That seems good for people consuming the json. For me, it doesn't make much of a difference since I have to keep a running list of the references I've extracted from the fields anyway. And I'm thinking it makes sense for me to use my personal lists rather than the reference fields. This way the displayed references always match the same logic I'm using to extract them from the fields. And, if there's a difference between your extraction and my extraction logic (e.g. regex differences), it might be more noticeable this way, since the references section itself would be a different length or something.

We also added a new field to the locus pages since you started this PR. Something like this is needed:

Added a full width box after mechanism.

Could you please move the criTRia download buttons to the top right corners of their respective tables? That will make it consistent with the locus table and easier to find.

Changed. What are your thoughts on just making all tables downloadable by default, and making the download button part of the standard controls (and moving all the controls to the top), e.g.:

The colors and symbols look better to me now. I am noticing that the "No Known" and "Limited" are the same/similar colors. I think "No Known" should be grey (closest to "Provisional" in meaning).

Changed

[hdashnow]

What are your thoughts on just making all tables downloadable by default, and making the download button part of the standard controls (and moving all the controls to the top)

I think this is a good idea.

Let me know if you'd like me to add a merge commit or rebase to re-align this branch with main.

[vincerubinetti]

I've already done a merge commit that updates everything outside /site to match main, and everything inside /site to take this branch (but I manually re-incorporated stuff like the detection).

[hdashnow]

This looks good to me. Let me know if it's ready to merge.

[vincerubinetti]

I tested it pretty thoroughly and it all seems good to me. Ready for merge.