Give the RedwoodJS SplashPage more 🌊 Splash!

You’ve built a few RedwoodJS apps or maybe just run through the Tutorial and likely have seen:

image

a few times – and I bet you thought, “this needs more :cow: :bell:” or

image .

Plus, I chose “Redwood router”? What’s that about?

It’s time as we approach a v1.0 and a release candidate to give this first experience some love.

You can find the source for the Splash Page in the router package:

Some general considerations:

  • All markup and styles need to be within the component
  • Shouldn’t rely on TailwindCss
  • Supports Safari, Chrome, Firefox, etc.
  • Quick to load, so relatively lightweight
  • Friendly, engaging, exciting
  • Reflects mission and sentiment from Docs - Introduction : RedwoodJS Docs
  • Shows release and version info?

Open to new animation, mascot/characters, helpful links to resources … be creative!

And – practically every RedwoodJS dev will get to see your work at some point. How cool is that?

Reply here if you are interested and will be posting either a repo to contribute to or some other way to showcase your work so people can see and maybe vote for the page that becomes part of v1!

2 Likes

Some inspiration could possibly also be found in the bullet points listed here

(Thanks @ajcwebdev for linking it to me)

1 Like

A little background on this page since I made it and you’ll have to be careful not to hurt my feelings :wink:

At the time we envisioned the router potentially being a standalone package that people could install separately into any React app. So if you were seeing this page it’s because you were using the Redwood router and not necessarily Redwood in general. @mojombo coded this up nearly a year ago and we never revisited! :grimacing:

We didn’t want a huge list of instructions or mini tutorial or anything because as soon as you generate any page (probably the first thing you’ll do on a new app), you’ll never see this again and so not be able to see those instructions any more. We showed just enough to get you “past” this page and into your real app, but we didn’t have any generators yet so the only example we had was how to manually add a route. :grimacing:

We didn’t have any links to the site or docs because none of them existed when we made this page. :grimacing:

But yes, we’d love to see a refresh! We’d probably even fund a cute illustration to be shown on first load, welcoming new folks. Here’s what Rails does:

I’m actually a little surprised there aren’t ANY links to resources here.

2 Likes

This isn’t the nicest looking but I like the details from the apache project for their home page on a new server.

Here’s an example: https://assets.digitalocean.com/articles/how-to-install-lamp-ubuntu-16/small_apache_default.png

This is what Create-React-App gives you (the logo is spinning)

As a reference, this is Next.js

Note the links to examples, docs, etc.

1 Like

Hey @dthyresson Is anyone currently working on this splash page?? It was great to meet you and other contributors at the meetup the week before. I’d love to take a stab at this as a beginner and see if I can create something better for the community. Let me know if there are any other updates beyond what is on this thread

HI @alicelovescake

It was great to meet you and other contributors at the meetup the week before.

Same!

Not yet.

I’d love to take a stab at this as a beginner and see if I can create something better for the community.

That would be amazing.

@Danny and I are working on a project to facilitate these submissions, but it has gotten delayed as we try to reach a 1.0 release candidate.

Let me DM you or we can discuss on Friday’s call and I can share more details/specifics.

But in short, if you start coming up with designs, we’ll need the just to be pure HTML and enclosed CSS – ie, the page should render standalone but no external css or fonts or other “imports”.

Looking forward to what you design!

1 Like

:wave: Heyo, not sure if this is already in the works but I really liked the welcome message in the cli so I had a shot at what it might look like in the browser:

6 Likes

Thanks @margalit I like the idea of bringing in the CLI message and I think NextJs does something similar.

We’ll share (and get that submission site app up) and hope the community can vote up each.

Stay tuned.

1 Like

Thanks for your guidance above @dthyresson! I really like the cli version as well. This is my take on the splash page. Wanted to post it here before the submission site in case anyone had feedback to make it better!


Brave Browser - Document - Watch Video

5 Likes

This is so lovely—I love the version number, links and hover interaction!

Edit: I was thinking maybe we could toggle dark mode for this page depending depending on the user’s os preference: ie @media (prefers-color-scheme: dark) {...}.

@alicelovescake if you’re open to collaborating I’d love to try adding a dark mode variation to your design.

3 Likes

This makes me so happy – what contributing to Redwood is all about … creative people working together. So wonderful.

Can’t wait to see your collective designs.

3 Likes

Yeah that sounds great! Would love to collaborate :slight_smile: I’ll DM you!