Give the RedwoodJS SplashPage more 🌊 Splash!

dthyresson · April 22, 2021, 2:58pm

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

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

.

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:

github.com

redwoodjs/redwood/blob/main/packages/router/src/splash-page.tsx

const SplashPage: React.VFC = () => (
  <main>
    <section>
      <style
        dangerouslySetInnerHTML={{
          __html: `
            html, body {
              margin: 0;
            }
            html * {
              box-sizing: border-box;
            }
            main {
              display: flex;
              align-items: center;
              font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
              text-align: center;
              background-color: #E2E8F0;
              height: 100vh;
            }

This file has been truncated. show original

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!

Tobbe · April 22, 2021, 5:02pm

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

(Thanks @ajcwebdev for linking it to me)

rob · April 22, 2021, 6:03pm

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

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!

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.

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

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.

jacebenson · April 22, 2021, 6:06pm

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

Tobbe · April 24, 2021, 11:55am

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

dthyresson · May 25, 2021, 2:01pm

As a reference, this is Next.js

Note the links to examples, docs, etc.

alicelovescake · July 19, 2021, 7:29pm

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

dthyresson · July 20, 2021, 5:20pm

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!

margalit · July 22, 2021, 9:20am

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:

dthyresson · July 22, 2021, 1:07pm

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.

alicelovescake · July 24, 2021, 4:37am

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

margalit · July 24, 2021, 4:52am

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.

dthyresson · July 24, 2021, 8:56am

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.

alicelovescake · July 25, 2021, 2:34am

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

ajcwebdev · July 25, 2021, 6:45pm

Both these examples are looking awesome, thanks @alicelovescake and @margalit for taking this on!