Changelog page that pulls from Github Release notes

[mattia-malnis]

Closes #831

Registrazione.schermo.2024-06-12.alle.17.09.33.mov

I'm not 100% sure that I wrote the CSS correctly using Tailwind. Any suggestions are welcome!

I also think it could be a good idea to rename "changelog" to "what's new" in the menu that opens when clicking the avatar image.

[zachgoll]

Looks great, thanks for tackling this!

Visually it all looks good. I left some suggestions around how we can consolidate some of the "prose" styles and leverage the Tailwind typography plugin a bit.

[zachgoll]

Definitely a tricky one here. I think this is a good opportunity for us to evaluate the usage of typography within the app.

Ideally, I think what we should probably consider here is an API like so:

<div class="prose prose--github-release-notes">
  <%= release_notes[:body].html_safe %>
</div>

We have prose as the "base" styling mechanism, and then prose--github-release-notes as a "specialization" where we can add styles for things like .user-mention, .octicon, and .dropdown-caret which don't exist anywhere else.

That way, in tailwind.config.js, we can do all of our "base" prose overrides:

// SAMPLE, not actual styles

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            color: '#333',
            a: {
              color: '#3182ce',
              '&:hover': {
                color: '#2c5282',
              },
            },
          },
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

And then in our global Tailwind CSS file, we can apply the "specializations":

.prose--github-release-notes {
  .octicon {
    @apply inline-block overflow-visible align-text-bottom fill-current;
  }

  .dropdown-caret {
    @apply content-none border-4 border-b-0 border-transparent border-t-gray-500 size-0 inline-block;
  }
}

So in summary, the changes required here would be:

1. Delete existing .prose class in Tailwind CSS file (it's not being used anywhere)
2. Add .prose--github-release-notes and all the "specializations" to the Tailwind CSS file
3. Apply all "base" prose overrides directly in tailwind.config.js
4. Move all non-typography styles directly to the ERB files (e.g. the .release-notes-row, etc.)

Let me know what you think!

[zachgoll]

@mattia-malnis for those "base" prose styles for the Tailwind Config file, I worked with @justinfar to standardize this a bit and included it in the updated design file:

https://www.figma.com/design/lonJmVk3HYkwZoIO7xYP2w/Maybe-App-(Community)?node-id=3789-202&t=UY4qtUbF3hRvnpp1-0

Please note—this is an example that we should try to be as "generic" as possible with when applying to those "base" styles in the Tailwind config. These "base" styles should work with any HTML we need to render.

[mattia-malnis]

@zachgoll your solution is definitely better, I didn't know about this possibility with Tailwind! I reviewed the code, let me know if everything is ok

[zachgoll]

Small nitpick here, but we should probably change to an h2 to avoid duplicate H1s on the page.

[mattia-malnis]

I've changed it to an h2 to avoid duplicate H1s on the page!

[flacnut]

Thanks for doing this!

[mattia-malnis]

@zachgoll thanks for the feedback! I think I can finish it tomorrow!

[zachgoll]

Awesome work, this looks great!

[zachgoll]

I know other spots in the codebase are still lacking this, but we should probably include an i18n t(".title") here

[mattia-malnis]

Sure, I updated it!