Regarding iced.rs website

[Abendstolz]

Contribution guide states

Cool website to serve on https://iced.rs

as one point. Now I wonder how you would define a cool website.

One question that sprang to mind was: Should it be accessible without scripts (e.g. with NoScript enabled) or built entirely with iced?

[hecrj]

What I had in mind is a simple static website with an overview of Iced and links to the repository, the web examples, and the chat server. In the future we could add a guide, tutorials, and blog posts.

Here are some existing cool websites of other Rust projects that show what I mean:

• Rocket
• Diesel
• Tokio

[AlisCode]

Here is a draft of specs / my ideas for the "cool website".

Features - short term

• Give an overview (one-page) of main iced features
• Demo
• Quickstart
• Contributors

Features - mid term

• Book
• Blogging platform
• RSS support

Features - long term

• i18n

Website technology

I suggest that we use Netlify to host the website, it would make contributing to the site easy while keeping it open-sourced on a public repository.

Since this is supposed to be a static site, we can use different alternatives to create the content of the website. Main ones to look at are :

• Zola - A pure-Rust static site generator
• Hugo - A well-known blogging / static website generator used by many open-source projects
• GatsbyJS - Node.js-based site generator - Used by Amethyst

My personal preference would be Zola or Hugo. Gatsby is too Javascript-esque for me.

I would like the website to stay as Javascript-free as possible, though admittedly the demos will need to run some Javascript (and even wasm at some point) and there's nothing we can do to avoid that. In any case, please, no CDN ! Read this short article, the 7th point is most important to me.

We would need to create our own Zola/Hugo theme (probably in a separate repository, adding the theme as a git submodule).

Design

• We will need Iced to have a logo. A proper one. This is a serious issue as rebranding is always possible but often not the main concern in an open-source project, though the website and logo are going to be one of the first things that a potential user will come across. It has to be somewhat attractive. We probably want to open a separate issue on that matter.
• We need to focus on a specific color scheme. Two solutions :
  • Creating our own "brand" tends to make the project attractive. It's what makes "cool" websites. Ideas are welcome in this issue :pray:. Most likely since the project is named Iced, we would go for something white / light-blue as main color. And I would personnaly go for a ligth green-ish accent that would go well with light-blue, but the project comes from the Coffee engine, so maybe we would like to remind this with a coffee-brownish color, at the cost of having the website look like Rocket's.
  • Material Palette is my usual go-to when I want cool colors, we can possibly take inspiration from there.
• Respecting standard convention :
  • Most likely, the index of a website presenting a technology is going to be a one-pager
  • Use SVG where applicable. Everyone loves SVG, lots of users have hi-dpi screens or mobile at some point. User-interface-savvy people take these details into account.
  • Blogposts should follow the usual form.

Legal issues

It's unlikely that we will have any kind of problem. I suppose we could license the website under MIT like Iced is, and leave it at that. We have to take care that no cookies are used throughout the site, which again should be no problem if we create our own theme.

Side-note: projects like Rocket and Diesel have mentionned their main author as copyright holder of the website. @hecrj what's your opinion on that?

Content

Header

• Logo of the project
• Links
  • Demo
  • Docs
  • Quickstart
  • Blog
  • Roadmap ?
  • Team ?
  • i18n option

Footer

• Copyright
• Logo
• Links
  • Github
  • RSS

Pages

Side-note after writing this: wow, finding good content for a website is awfully hard. No wonder it's a job of its own.

Index

Classic one-pager à la Rocket or Actix

• First part is a "media" with a cool logo, a headline to the project, and possibly the use case it solves
• Second part is "key features". As for the iced project, we want :
  • Type-Safe: Iced uses reactive programming model to ensure your UI is meaningful
  • Easy-to-use: Batteries-included API to get started quickly and create your own widgets easily
  • Cross-platform: Custom renderers for every context, from native to the web
  • Modular: Iced ecosystem is split into reusable parts
• Third part is often code examples with demo or features you want to highlight
  • We most likely want to show an easy code example (button) to show the concept of Iced's MVC
  • The core concept of Iced is its modularity and the "bring-your-own Renderer" philosophy : we could show screenshots of the same UI rendered in different contexts (Web, Native, Terminal)
• Fourth part is the call to action. Must be some sort of link to the docs and to the demo.
• Additional "nice-to-have", features that are not essential but are available and it's soooo cool.
  • Async actions
  • Easy to test / prototype
  • "Blazingly fast" (that specific term is overused but, ya know, it's a Rust project. Of course it's fast!)
  • Terminal support

Demo page

Showcase Iced with the Tour example using the DOM renderer. Essentially, the current iced.rs website.

Quickstart

Sort of a "detailed blogpost" showing code examples of how to get started with Iced. Needs a lot of screenshots.

Book

Use mdbook to wrap a "tutorial" for getting started with Iced. Needs to be detailed in another issue + this is mid/long term.

Blog

Should be a list of all blogposts ordered chronologically with a link to the blogpost's page.

A blogpost page should have the classic form:

• Blob of text centered in the middle
• Justified text, we're no barbarians

Roadmap

What are the next milestones of the project ? If applicable: time estimate for a feature

Team

Split into two parts:

• Contributors
• Sponsors

Github-avatar of contributors Logo of sponsors of the project

Shall we begin ? :D

[hecrj]

@AlisCode, this is a really thorough specification! Thank you! :smile:

I agree with the features and their priority. Maybe I would rename "Book" to "Guide" or something similar.

I suggest that we use Netlify to host the website

Any reason why we shouldn't use GitHub Pages?

My personal preference would be Zola or Hugo

I'd go with Zola. This is a Rust project so it feels like the right choice. The folks in the Rust Game Dev working group recently switched to it and seem to be happy with it: https://github.com/rust-gamedev/rust-gamedev.github.io

I would like the website to stay as Javascript-free as possible

I agree, just plain HTML and CSS. No need to be fancy here.

though admittedly the demos will need to run some Javascript (and even wasm at some point) and there's nothing we can do to avoid that

They will need to run both, the iced.rs website already runs Wasm with some Javascript bindings.

We will need Iced to have a logo.

Indeed. I am clueless when it comes to graphics design, so I cannot take the lead here. It would be great if this happened as some sort of community effort. We could create a dedicated issue for it.

We need to focus on a specific color scheme

I like the "creating our own brand" idea. A light blue color theme is also what I had in mind.

Side-note: projects like Rocket and Diesel have mentionned their main author as copyright holder of the website. @hecrj what's your opinion on that?

I think we could do the same for now, but I do not have a strong opinion here.

---

Everything else sounds really good to me! What are the next steps?

[AlisCode]

Any reason why we shouldn't use GitHub Pages?

I hadn't realized that you already owned the @iced-rs user, and that https://iced.rs was just a mirror for https://iced-rs.github.io. I see no reason not to use them indeed. :)

I'd go with Zola.

That's fine by me :+1:

I like the "creating our own brand" idea. A light blue color theme is also what I had in mind. + I am clueless when it comes to graphics design

I will open an issue "Iced branding" to put together a cool logo and color scheme as a community, starting with the idea I have in mind.

I think we could do the same for now, but I do not have a strong opinion here.

Then writing "@hecrj and contributors" with adequate links sounds like a good idea to me.

What are the next steps?

I think we can either leave this issue as is, or close it and create a tracking issue for the website. Then :

• Create a Zola theme "zola-iced" and host the repository on github with user @iced-rs. Maybe you can do that ?
• Create a zola branch on the current Iced website, setup a Zola project linking to the theme as a submodule, start implementing it. I will have a PR on its way soon-ish.
• Open an "Iced branding" issue to spark the discussion on the matter.

[hecrj]

Create a Zola theme "zola-iced" and host the repository on github with user @iced-rs. Maybe you can do that?

I have created iced-rs/zola-theme and invited you to join as a collaborator. If anyone else wants to help here, please let me know!

Create a zola branch on the current Iced website, setup a Zola project linking to the theme as a submodule, start implementing it. I will have a PR on its way soon-ish.

That would be great! :smile:

Open an "Iced branding" issue to spark the discussion on the matter.

Awesome. Sounds good!

[hecrj]

A very first draft of the new website has landed in https://iced.rs

[MauriceKayser]

I am interested in trying this crate, and since it supposedly supports the web, I would have found it nice to see the examples in action, without the need of a local toolchain. What do you think about adding them to the website?