Finish the new website

[23Skidoo]

See haskell/cabal#4013 and the feature/next branch.

[Mikolaj]

Hi! I can't see the branch --- could you provide a link? BTW, do you think the mentioned issue (and this one?) should be kept open?

[philderbeast]

@Mikolaj is it the feature/next branch on this same repository?

[Mikolaj]

Oh, yes, it seems you've found it! BTW, any help with this page is very appreciated. I even thought about killing this page in the past, because outdated page is worse than no page. However, cabal needs a landing page of some sort, even if that's a subpage on somebody else's corner of the web (e.g., Haskell Foundations's or haskell.org or whatever) and that landing page should have a coherent and not outdated easily text on it, with plenty of stable links.

[philderbeast]

I'm working on this at cabalism/cabal-website and will keep the default branch up to date.

[philderbeast]

I would like to get a grasp on deployment and development branches (I typically use main or master and develop).

Without looking¹, I'd thought that gh-pages was for automatic deployments to haskell.org/cabal on merging but it is not and goes instead to haddocks for Cabal-3.3.0.0. There is no Cabal-3.3.0.0 on hackage. With the exception of Cabal-1.1.6, we seem to be using a version numbering x.y.z.n scheme where y is even for releases. Do we intend to keep this?

How do we deploy to https://www.haskell.org/cabal? The master branch seems to be what is currently deployed. This cabal-website is a subsite of haskell.org. Both are Hakyll static sites. The haskell-infra/www.haskell.org README says they use the master branch for automatic deployments but then there is also a deploy workflow for admins to do this. Maybe the difference is between www and www-test destinations (from deploy.sh):

if [ "$1" = --DEPLOY-IT-LIVE ]; then
    DESTINATION=www
else
    DESTINATION=www-test
fi

Could we also deploy to www-test.haskell.org or do we have our own test site for live review (https://www-test.haskell.org/cabal is not found)?

Footnotes

1. The explanation of gh-pages was there all the time on the README:

   The gh-pages branch of this repo is used for automated deployment of Cabal API documentation.

   ↩

[ulysses4ever]

I'd be great to have a documentation for the current deployment processn I'm some visible prefer. I have no clue.

[Mikolaj]

I think only the master branch is used and it's deployed manually, as documented in https://github.com/haskell/cabal/wiki/Making-a-release. Yes, it's a mess (the docs, the process and the outcome).

Feel free to use develop for dev, if you expect us to deploy automatically in the near future. Let's keep the versioning scheme. We don't have our own live review site AFAIK.

[philderbeast]

@Mikolaj I'm back to looking at this.

[philderbeast]

I've put a preview up at http://cabal.blockscope.com for the WIP, trying to keep the style as simple as it gets for now and not customized. I saw that the main haskell.org site uses bootstrap so I stuck with that. Easier for me as I'm using it already elsewhere.

I've done a really rough draft of the landing page. Please let me know if I'm on the right track with it.

I've switched to a left hand sidebar for the menu and dropped some less important stuff down to the footer. I've not updated the download page but left the link to it. I've added a link to history that shows the early drafts. I've left the blog as-is but added a link to release notes. As for downloading, the advice should really defer to GHCup, shouldn't it? That leaves the releases and release notes to fix up.

Do we want to keep the blog? If so what articles could we add?

[Mikolaj]

Yay, this is a beauty (mind you, I have no experience nor taste with webpages, my cultural development stopped at whole-screen ASCII interfaces (as a ground-breaking novelty compared to pure commandline)). I had no idea there is a blog and, in fact, that there are any of the things I find on this page now. I bet most are outdated. Let's thin them out freely, starting with the blog. I don't think we have resources for maintaining anything more that a page of links and, at most, a very basic blurb or two that won't get outdated. If anybody volunteers to maintain the texts and, perhaps, even news, then the setup your created can surely accommodate the new content.

[Mikolaj]

BTW, once you are satisfied with the results, please make sure to advertise this in the Matrix room to get feedback from release managers and others.

[ulysses4ever]

It'd be a pity to lose that purple font from the current website IMO...

I don't like the blue in the callouts: it's too bright. Other than that the colors are fine even if a little incoherent: there's no theme per se.

Please, share the source too: we need to make sure that it's easier to maintain than the current one.

[philderbeast]

@ulysses4ever the source branch is the default branch at cabalism/cabal-website, the bump/hakyll-site branch. It needs rebasing on master.

[philderbeast]

@ulysses4ever I've been looking the styles from the haskell.org site too. They're based on bootstrap as the Cabal site is but for an orphaned [email protected] stylesheet with manual edits.

I'm using bootstrap Sass that should allow easy and obvious customization such going purply 💜.

[philderbeast]

I've updated the preview with dark/light color mode switching (still using the default bootstrap colors). Apologies for the color switcher being a bit clunky as the last element in the left hand side navigation item. I wanted to try this as a quick test of whether we can use Bootstrap's method for for haskell-infra/www.haskell.org#8.

[philderbeast]

I've updated the preview to use colors from the dark/light logos using Bootstrap Sass customizations, nothing radical except maybe using a purply color for the info/note panels and not a bluish color there.

@use "sass:color";

// Colors taken from the light and dark Cabal logos.
$cabal-star: #2e5bc1;
$cabal-top: #2d9bbd;
$cabal-bottom: #4a4bcd;
$cabal-background: #f1f1f1;

$cabal-star-dark:#567dd9;
$cabal-top-dark: #6bc9dd;
$cabal-bottom-dark: #6a6bd7;
$cabal-background-dark: #303030;

$headings-color: $cabal-bottom;
$headings-color-dark: $cabal-top-dark;
$link-color: $headings-color;
$link-color-dark: $headings-color-dark;

$primary: $cabal-star;
$info: $cabal-bottom-dark;

$success: color.adjust(green, $lightness: -10%, $alpha: -0.2);
$warning: color.adjust(yellow, $lightness: -10%, $alpha: -0.2);
$danger: color.adjust(red, $lightness: -10%, $alpha: -0.2);

$code-color: $danger;

[ulysses4ever]

Oh, I like it much better!

I don't get the difference between purple and yellow callous. It's be good to have the label like Warning or Note or something.

This yellow callout in particular I'm not a big fan of, and I don't think it's a good match to all the rest. But that's not critical.

[philderbeast]

I've added single character tags to admonitions and published these to the preview. These expand to single word descriptions on hover, don't take up any more space on the page and are done only with CSS. Adding content with :before like this with decoration is likely not accessible to screen readers.

This is what it looks like in dark mode. I've replaced the :before content manually for each one to show the word that would be displayed on hover. This is not exactly how it would look as only one is ever expanded at a time by hovering.

I'm using pandoc-native divs in index.md but will explore pandoc's .rst conversion to .html too as I expect that may work better for admonitions. I've added the following to the top of index.md so that we can see the various admonitions side-by-side.

::: tip
This is a tip
:::

::: info
This is information
:::

::: note
This is a note
:::

::: warning
This is a warning
:::

::: success
This is success
:::

::: danger
This is danger
:::

[philderbeast]

I've rebased on master, added icons to the menu, and added a releases page

@Kleidukos I'm getting closer to something worth deploying.

@ulysses4ever could we consider tweaking the release notes, adding YAML metadata and github native admonitions? I use a Makefile to download those from github/haskell/cabal but otherwise use them as-is other than sorting by version descending after splitting them into groups.

[Kleidukos]

@philderbeast I'll extract the blog component once we're clear on the overall design. I thought we'd be following the typography and colour scheme of haskell.org/cabal.

[ulysses4ever]

For future reference, a nice blog post about this rework of the site: https://discourse.haskell.org/t/9838

[philderbeast]

I'll extract the blog component once we're clear on the overall design.

@Kleidukos, is this what has become https://blog.haskell.org/ or are we talking about a cabal-specific blog, (like the v2 release announcement post)?

[Kleidukos]

@philderbeast you're spot-on, this has become blog.haskell.org where we'll send our announcements. :)