dart-sass may need be used to build the website

So, in order to keep the development simple, build scripts will be added to keep the commands simple to write.

So to compile sass then serve the website locally, you would run something like tasks/serve.

In the docs directory, there should be guides for the site for things like:

• How to add sections
• Adding new pages
• Creating posts
• And all other things that aren’t obvious with just the site generator’s documentation alone.

Reference: https://www.getzola.org/documentation/templates/feeds/

It's currently: "A Modern, Fast, Open Source Language" as seen in the home page's header.

However, you could argue that it's a bit generic.

It would be great if we could come up with a new one that summarises the language in an exciting way!

The rocket icon is a bit special. Its real center is not the one that we think it is, so as a result it looks misaligned

This icon needs to have a bit negative margin so it can be visually centered.

The About page should give a long explanation about what Vala is, what is its history, how it works, what are its features, what are its core libraries, etc.

Relevant examples:

• Dart overview
• About Ruby
• About Swift
• About Python
• What is .NET?
• Django overview
• What is R?
• About GNOME JavaScript
• Projects/Vala/About <= The current "About Vala" page

Creating a v1 project and adding issues to the project board may help with tracking progress.

There’s no need to aim for a perfect score but we should try look into any issues that it finds.

@aeldemery has been working on a wonderful set of examples for Gtk4 with Vala. Perhaps we could find a way to include some of them.

The way it is being done now isn't very flexible: https://github.com/colinkiama/vala-www/blob/main/templates/base.html#L10

Tera has a get_env function that helps with this: https://tera.netlify.app/docs/#get-env

This would allow us to customise what is displayed in link previews.

I think that by default, there should be a default landscape image, that can be overwritten.

I created the og_data and og_data_with_image macros to help with this: https://github.com/colinkiama/vala-www/blob/dev/templates/macros/head.html

References:
https://ogp.me/

While there's currently 6 in there. There is actually supposed to be 9.

elementary OS and GNOME Boxes are definitely going to stay in there, the rest are placeholders (but can stay on there too).

Feel free to list down what you'd like to be on there.

Consider using the "async + fallback" solution listed here: https://stackoverflow.com/a/30810322
Example: https://codepen.io/DeanMarkTaylor/pen/RMRaJX?editors=1011

Add this copy icon to the sprite map too: https://fontawesome.com/icons/copy

There's no data we need to pass into it so we should reference it with an include instead.

It should be in its own directory called partials under the templates directory.

Useful Links:
https://tera.netlify.app/docs/#include

I think it looks nicer and less "in your face."

Lower it to something like 300

Update the links in various places like wiki pages (e.g. wikipedia etc), social media pages and any others still pointing to old sites:

• Wikipedia
• Twitter Account profile URL
• GNOME Developer Documentation

SCSS has a ton of features, and we're only using a couple of them. We must restructure the entire SCSS to take full advantage of all it has to offer

There isn’t a reason for it to be there and we’ll end up with less JavaScript and CSS on the website by removing them.

elementary OS icon not rendering correctly as inline SVG in webkit browsers

I am thinking of adding a dark style that responds to the user's OS-level preference.

Here is a concept; let me know what you think:

All colours are taken from elementary Brand Palette, which made sense, since the purple in the light style (#a56de2) was exactly Grape 500.

I would use Solarized Dark for the code, but it is not included in Prism. We can explore more styles.

This can be completely customised by creating template called 404.html: https://www.getzola.org/documentation/templates/404/

It would be nice to move this website to better domain. Maybe write to the GNOME Foundation if they can change the DNS for the vala-project.org domain. Or register for example vala.tk.

I am working on it right now.

Currently in the light theme, the bypass block shows black text:

Here’s its new design:

There should be a default one used for the whole website.

Defining the description in the front matter in markdown files should also modify the meta description in the template also defined in the front matter.

Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name

The macro will need parameters that help determine:

1. Which link should be disabled (Unnecessary work. Overcomplicates things. Just let every item in the navigation list be a link).
2. Whether the extended header should show (the header used in the home page).

When this is complete, we'll only have to change the header in one place.

Using the Feedback from discussions

• Mockup the new changes on Figma (recommended)
• Implement the suggestions
  • Testimonials
  • Brief Community section
    • Social links and tooling
• Add to call-to-action links around the start and end of the page
  • Get Started - link to installation section of new documentation site)
  • Vala Source Code (Could come up with a better name) - Link to the language’s GitLab repository
• What's new section
  • Latest few blog posts

The code example relies on prism.js for formatting and highlighting. When it's not available, here's what the home page looks like:

If a fix can't be found, the code example should be hidden and the global header should have the "diagonal slice" effect when JavaScript is off.

See: https://github.com/colinkiama/vala-www/discussions/11#discussioncomment-2666404

Share from July 15th 16:00 GMT onwards:

• This Week In GNOME
• Vala Twitter Account Post
• Vala Mastodon Account Post
• Vala Reddit Account Post
• elementary OS Subreddit
• GNOME Subreddit

Some of the wording could use some tweaking and the social media links listed should be reviewed too. Feel free to discuss this below:

It would be nice to have in the future the website translatable. It is not necessary right away, but in the future it will be good. Especialy the tutorial section.

There is an extra section in config.toml. This can be used to store links that are currently hardcoded like the website source code, Vala source code etc.

When using keyboard navigation, the experience isn't very good. Especially when using the dark colour scheme.

Currently either a very thin focus border shows up. In the dark colour scheme, the focus border blends in with the dark background.

The focus states should match the link hover states.

People have reported notches overlapping with the footer

I'm not sure which license should be used in this case. Any suggestions?

Allows the website to influence the styling of a client's browser/system UI.

For more details, see the following:
https://css-tricks.com/safari-15-new-ui-theme-colors-and-a-css-tricks-cameo/
https://developer.apple.com/videos/play/wwdc2021/10029/

It would be a good idea to add a link on the wiki page to the new website to raise awareness.