Setup multi-page react website

[MichaelCurrin]

Initial thoughts on page structure:

• / Home (Brands the website itself, variation on Render except content is flat)
• /edit Editor (form) See #9
• /display Display (avoid 'render'). Pieces could be renamed from MainPage, after code layout is decided. To avoid nesting imports, all custom or form logic could be in one file.
• /about About - keep this minimal maybe and link to repo or docs site.
• /showcase Showcase - Collected designs.
• /terms Terms of use. See #2

If content is mostly static, they should still be react pages for the menu.

[MichaelCurrin]

See if the original example repo that uses react router has options

otherwise

https://reacttraining.com/react-router/web/example/basic

This is important for forms - use Link attribute and params to get to custom page from a form

[MichaelCurrin]

Also see https://vegibit.com/create-a-navbar-component-in-react/

[MichaelCurrin]

See Bulma hero tutorial (full screen section) for how to use navbars

[akshay-nm]

Do you need help with this one?

[MichaelCurrin]

Thanks @mundane140 yes that would be great

I haven't used React Router before but I think it's the direction to go, so you're welcome to set that up, even with placeholder content for each page covered in the first comment.

I've used Bulma so far so would like to keep using that for all the pages.

Regarding the structure - there's just one form page needed - don't worry about separate Editor vs Display pages. I now use &showForm=0 to make showing the form false, which hides the editor part of the form.

The showcase page can be a list of URLs which point to the homepage form but with parameters.

e.g./showcase.html

# Showcase

## Own

Some of my favorite pages I've made:

- [fizz](/?title=fizz)

## Community

Instant webpage pages created by other people. If you want to add your own, fork the project, add a line and submit a PR!

- [foo](/?title=Foo) by Johnny
- [bar](/title=Bar) by Jane

[akshay-nm]

Hey, I still need some context. I have completed the basic project setup procedure. By a multi-page website do you mean you need something to replace the existing single page for 'instant website'? I have added some stateless components as pages, a routes component as per react-router docs. I'll open a draft PR with same changes.

[MichaelCurrin]

Hi, thanks the basic structure looks good.

Oh I just remembered a thought from a while back regarding the homepage.

The homepage in the multi page view should be static - it will look like the current homepage but will be frozen on configured values e.g. "title: Instant Website". And then it will have a button saying "Make your own" which links to the "Edit" page which allows editing.

I need to add the button on the frontend but the use of showForm=0 means that no Display page is needed as the Edit page can become a Display view effectively by hiding the form inputs.

[akshay-nm]

I could add a route which renders the edit/display component on the same page depending on a state variable. When you want to display the page, the route will show the display component. When you want the user to edit the page contents, the route will show the edit component.

[MichaelCurrin]

Thanks. That's a great idea I like that layout and labeling. I was thinking of having the form pop out the bottom as it currently does but having it switch between the edit and display views is nice and compact.

You can use the existing showForm variable which currently works but has no button. Rename the variable to showEditor or even edit if you prefer.

https://instant-website.netlify.app/?title=Test&showForm=1 https://instant-website.netlify.app/?title=Test&showForm=0

Also the edit/display part would be better in a separate PR to the existing multi-page PR, to make it easier to review.

[MichaelCurrin]

Since this view will longer be on the homepage, it could be

#  Frozen home
/

# Custom page as edit and display modes
/custom?edit=1
/custom?edit=0

Unless you can think of something better than /custom that doesn't say edit or view since that will be param based

[MichaelCurrin]

BTW I am curious how you discovered my site / repo? Or ideas about where it can get attention like on a blog post or featured on a list of react projects

[akshay-nm]

I was just scourging through issues on GitHub. I have experience working with react and related tools so was looking for projects looking for some help with the same. And here I am. 😅

[akshay-nm]

Here's what I understood so far:

Pages

Home page

• About instant-website project
• Link to the demo page

Demo page

• Rendered as per default values or values provided by the user

Edit page

• Where user can update values to modify the appearance of the demo

I could do something like this

Routes

Home page

• /
• /home

Demo page

• /demo (If we are using separate routes for demo and edit features)
• /demo/0 or /view/0 or custom/0 (if we are using URL params for demo and edit features)

Edit page

• /view
• /demo/1 or /view/1 or custom/1

The user-interface is up to you, I just wanted to seek clarity regarding the routes.

[MichaelCurrin]

Thanks. I'll have a think and send something back as a full spec of drawings and routes.

[akshay-nm]

Roger that.

[MichaelCurrin]

@mundane140 Thanks for your patience. Here's a design of all the screens.

[MichaelCurrin]

Resolved by #46 on develop