Website V2 Theme - Package Pages

[magic fern]

Good afternoon <@&596076164104323104>s!

Over the past few days we have been rolling out website theme changes to additional sections of the https://foundryvtt.com website. Theme changes are now applied to Package pages including:

• Packages Home: https://foundryvtt.com/packages/
• Browse Packages by Type: https://foundryvtt.com/packages/systems
• Browse Packages by Category: https://foundryvtt.com/packages/tag/integration
• Browse Packages by Provider: https://foundryvtt.com/packages/provider/cubicle7
• Single Package: https://foundryvtt.com/packages/pf2e-beginner-box (for example)

As a consequence for this change, the "single package" pages for any package you have published to our website is now using the new theme. This may cause some subtle changes in how your package descriptions are presented.

We would like to use this opportunity to invite - and encourage - you all to consider any description updates you would like to make in order for your content to look its best on our website. The new website theme makes it quite easy to achieve a really aesthetically pleasing layout for your package page, and we would like to help. When you're content looks its best that attracts users to install your system or module and helps us to have a well maintained package repo.

If you have any questions, spot any styling issues, would like some suggestions or help to freshen up your listing, or just want to tell me "it's new and I hate it" - please use this thread and I'll be happy to engage and assist!

[icy raft]

hm, there's a tiny issue with the links not showing a pointer cursor on hover I think?

for the packages page

[magic fern]

A few free tips you may find it interesting to explore:

Nicer section-dividing headers

<h2 class="border">A Header with a fancy gradient border</h2>

A figure with a caption below

<figure>
  <img src="{url}" alt="{alt text}"/>
  <figcaption>An image with a figure caption</figcaption>
</figure>

An image grid for showing many screenshots

<figure class="image-showcase">
  <img src="{url1}" alt="{alt text 1}"/>
  <img src="{url2}" alt="{alt text 2}"/>
  <img src="{url3}" alt="{alt text 3}"/>
  <img src="{url4}" alt="{alt text 4}"/>
</figure>

Attach emphasis/reference for a specific command:

<span class="reference">Do this thing</span>

Collapsing content containers:

<section class="collapsible">
  <header class="collapsible-header">Some header text</header>
  <div class="collapsible-content">
    <p>Some long collapsible content</p>
  </div>
</section>

[coral jacinth]

The archived package listing is a nice idea. Unfortunatly, it doesn't show anything right now
https://foundryvtt.com/packages/archived

[cyan owl]

Is this the thread to ask for Package Versions to be displayed in reverse chronological order?

[icy raft]

other than that looks great

[magic fern]

this is not, but you have done so!

[cyan owl]

a few times! so I just like to keep bringing it up whenever I feel it's even slightly relevant ❤️

[queen silo]

Looks great. First thing I noticed is the display: block on images making the tags that I usually put at the top of my descriptions appear awkwardly in the middle. Is there something that can be done to work better with these?

[spice geyser]

works fine for me in Firefox

[icy raft]

it's a bit flaky

[fossil plaza]

That's probably a bit of an overzealous style.

[icy raft]

also firefox here

[magic fern]

yeah, maybe so. I think that can be changed.

[magic fern]

can you link me to your package page so I can take a look?

[queen silo]

https://foundryvtt.com/packages/mcc

[velvet moon]

Looks like the absolute worst game of Tetris.

[fossil plaza]

The margin: 0 auto; is also a significant contributor.

[magic fern]

yeah, on it, thanks for pointing this out

[velvet moon]

Did the style of code blocks change or am I gaslighting myself?

[icy raft]

hah, it's probably a Wayland issue indeed!

[magic fern]

your question would be far more answerable with a link to an example

[spice geyser]

also using wayland 😉

[velvet moon]

https://foundryvtt.com/packages/requestor

[icy raft]

relaunching firefox fixed it

[fossil plaza]

Looks really nice over all

[queen silo]

I had some syntax highlighting that was working alongside the Highlight.js library present on the page, but there is no more syntax highlighting now

[magic fern]

This looks almost as expected, but once you get inside a <pre><code> block it is very particular about whitespace, so you should start your code immediately after the opening <code> block with no excess whitespace:

- <pre><code>
- await Requestor.request({
+ <pre><code>await Requestor.request({

[fossil plaza]

Though the max width of the main column, combined with the font size, allows text lines to be a bit longer than ideal.

[spring hawk]

Overall i like it quite a bit, and appreciate the free tips for my super basic package page to spice it up 😅

[queen silo]

Looks like syntax highlighting is working on your page 🤔

[fossil plaza]

The most important detail is that the 🦋 in this font is the right color:

🤣

[velvet moon]

I haven't done anything to it. Basic <pre><code>

[queen silo]

Ah. That's probably my issue. I think I did stuff to the HTML

e.g. I have this on the admin panel

<pre><code class="lang-js"><span class="hljs-attribute">let editor</span> = ace.edit(<span class="hljs-string">"the-id-of-the-div"</span>);
</code></pre>

No longer really works

I see that Highlight JS still hasn't be updated in a really long time https://github.com/foundryvtt/foundryvtt/issues/8070

[magic fern]

sounds like you're doing too much

[queen silo]

I think I was just copy pasting from GitHub tbh

[magic fern]

should be just:

<pre><code class="lang-js">let editor = ace.edit("the-id-of-the-div")</code></pre>

you shouldnt be adding spans and stuff yourself

hljs does everything else automatically

[fossil plaza]

Obligatory request for Markdown support for these pages.

[queen silo]

I don't need markdown support personally, but the feature that I would love the most along those lines is an API that I can call in GitHub Actions to update the description automatically and create new versions

[velvet moon]

(protip: v10 journals - copy into markdown, then change to html and copy from there)

[queen silo]

I mean you can do that with any online markdown converter, so you don't really need to launch FVTT just for that

[velvet moon]

I always have anyway 😆

[magic fern]

many more features will be coming

one thing at a time!

[fossil plaza]

Which is pretty much what you're doing with Github. Unfortunately not every MD renderer produces output that's quite what's needed.

[fossil plaza]

I know the admin panel is sort of a tricky situation, not surprised if it's the last thing to get work done.

[magic fern]

I have deployed a change that removes the over-aggressive default image styles

im going to be afk for the next little bit, but I will follow along the thread and respond to anyone who is looking for a bit of help with beautifying their package pages!

[tropic moat]

I don't recall if this was the case before, but it seems a bit redundant.

[olive basalt]

The old pages have that same thing; it's just naively building a string from the values there

[cursive oriole]

some overlap issues on mobile

[velvet moon]

I think this is matching the "Last Updated" of the module of the page it's on?

[magic fern]

thanks for the feedback folks. good comments here:

[magic fern]

yeah, if the range is the same I agree it would be better to condense this

[magic fern]

hmm, good shout. I'll look into it

[magic fern]

hmm... might be wrong, it should be the date that particular system was last updated

[velvet moon]

I am able to reproduce on all module pages.

[magic fern]

Here's another nice markup trick you can use on your module pages:

<section class="collapsible">
  <header class="collapsible-header">Some header text</header>
  <div class="collapsible-content">
    <p>Some long collapsible content</p>
  </div>
</section>

[gloomy nebula]

Any chance you can make the Required Game Systems take less space if a module lists a lot of systems? I don't understand why Latest Version and Last Updated are listed on the module's page.
For example, this is a package that has 13 (https://foundryvtt.com/packages/autoanimations). My module has 40. There's also the issue with the admin page's form being way too small for the amount of systems Foundry has now, but that's talk for another day.

It could be as small as the Categories and would be a thousand times better

[cyan owl]

maybe Required Game Systems could be displayed as badges instead of a vertical list

[lunar moth]

might be a good use of a collapsible.

[vale wadi]

Is there any way to have a collapsible container open by default?

[cyan owl]

That could work, but I feel like this is info you want to know/always see, but just very high level. "Oh it requires System X, Y, or Z" and that's it

[gloomy nebula]

Example

[cyan owl]

I think if there was slightly more separation of each system, this is how I would implement it. But just a suggestion ofc

[gloomy nebula]

ignore spacing and all of that because that's a 5 minute hack of Inspector editing

[hollow abyss]

I wish the terminology were "supported" rather than "required" on game systems for modules, because that's how it is used - maybe v11? and unsupported still perhaps allowed or not.

[magic fern]

I agree "Supported" would be a better term. I will make that change

bear in mind that website updates aren't linked to our standard Foundry VTT version cadence, we can make changes here immediately and iteratively.

[gloomy nebula]

Thanks for the hints. All I needed was some class(es)

[fossil plaza]

I never understood why people don't just use <details>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

[magic fern]

my opinion is that the look and UX of a custom collapsible element is better, despite the fact that details "does the job" with less effort

so now you understand!

[queen silo]

Perhaps a tooltip on the systems displaying the relationships.systems.compatibility info?

[queen silo]

I believe <details> aren't possible to animate in the same way as the custom one currently implemented

[tropic moat]

Problem with that is that the website doesn't have that info.

[queen silo]

If the system compatibility were on the admin panel and website, it could also be sidegraded by the client in the future.

[queen silo]

@deep relic it seems like the images in the DF Architect description are broken now. Possibly because of the changes here.

[magic fern]

I don't think those URLs would have ever worked tbh

[deep relic]

yeah those aren't the links I originally posted. Likely something weird happened in the migration. All the images were from github's CDN. I'll see if I can get them fixed

Yeah it looks like changing them back to their original GitHub CDN fixed them

[coral jacinth]

The archived package list is empty. I'm guessing it's because archived packages are normally hidden from package lists, but this would be the one exception.
https://foundryvtt.com/packages/archived

[magic fern]

hmm... I'll have to check with the team about what our intention for this category is/was

I did not realize it was displayed on the website, I think it's perhaps intended to be hidden entirely?

[coral jacinth]

I kind of dig the idea, being able to see the old modules if you can't find it the normal way. And maybe altruistically, a way for developers to look for abandoned modules to resurrect

[olive basalt]

The archived package list was present in the old design, and it was handy at times when someone was asking about an old module that you don't recognize off-hand