new static www layout pointing to app

[bbest]

Currently: marineenergy.app shows a landing page and menus that are embedded in the Shiny app that has a similar nav bar and look, e.g. shiny.marineenergy.app/report/?nav=Configure.

Next: marineenergy.app will show a simpler landing page with a link going to a dedicated Shiny app.

I like https://www.inaturalist.org/ as an example because it has:

• simple expandable top level nav, eg "More"
• carousel of images
• How it works pictogram
• Scrollable sections of content below

See mockups and notes:

• www_v2 - Google Slides
• 2021 www to apps - Google Docs

Tools:

• Carousel · Bootstrap
• bslib: custom Bootstrap Sass Themes for shiny and rmarkdown

---

Next Steps:

• [x] 1. Align text in 3 columns below How It Works: Constrain the outside limit of text to the same as the SVG above. Divide its layout into 3 columns within. now: want:
• [x] 2. Add Reporting Tool to menu, esp. for navigating via phone
• [x] 3. New button titles:
  • [x] a. Learn More -> Create Report:
  • [x] b. Navigate Regulations
  • [x] c. Explore Interactions
  • [x] d. Learn More for About
• [x] 4. Fix links in Carousel
• [x] 5. Move wave to bottom (instead of below "spacer" blue bar)

[bbest]

Hey @geocoug,

This splash branch of apps repo looks super cool from your commit https://github.com/marineenergy/apps/commit/0b255d49a70b0c9fd0f46af687e534f8c51d24e9!

I was hoping that the home (ie splash) page could be statically rendered though, so not dependent on Shiny and therefore quick to load. You'll notice that bslib can be used to render Bootstrap 4/5 in Shiny apps or Rmarkdown pages, which is why I created this issue in the www repo. You might try these same carousel and layout in the www repo. Apologies if I misunderstood your commit.

[bbest]

Hi again @geocoug, ah I see you already tried on www per https://github.com/marineenergy/www/issues/23#issuecomment-929620071

[bbest]

Caleb: Why use Rmarkdown w/ all its wierdness and not just HTML?

Ben:

1. Common navigation using _site.yml
2. Take advantage of widgets like DT::datatable used for Interactions

[bbest]

Created new branch splash with commit https://github.com/marineenergy/www/commit/f66f7c209f9b5b3640f30b980dfb98101679233e:

• index.Rmd
• _site.yml

Next steps: Caleb working on carousel and layout with bootstrap 4.

[bbest]

Caleb made some nice progress here:

• web: www-dev.marineenergy.app

• code: www, splash branch

  • _site.yml
  • index.Rmd
  • libs/index_body.html
  • libs/styles.css

• server: /share/github/www_dev

• From rstudio.marineenergy.app, run Build Website to render all .Rmd pages to .html:

[bbest]

Next Steps:

• Hear back from Zach / K&W on updated text, style, etc for home page
• Caleb & Ben to continue with updates

[bbest]

Got the goods for vector icons and raster background images from K&W all found here:

• www_v2_graphics/ Google Drive

[bbest]

Well done with incorporating the latest imagery and style into the Carousel @cdobbelaere 🥳

Next Steps:

• [x] [Cristina] drop redundant Report App in Carousel
• [x] [Cristina] Sequence the Carousel according to:
  1. Reporting Tool
  2. Regulations
  3. Environmental Interactions
  4. About
• [x] [Cristina] Add image credits as small lower left gray bar with text. Peruse the MRE Photo Library | Tethys Engineering to find the proper caption, like "Image: Wave Swell Energy's UniWave200 Installed at King Island (Beach Shot). Source: MRE Photo Library | Tethys Engineering".
• + Content below Carousel, except try using text as much as possible (vs text embedded in image)...
• [x] + Banner of color directly below Carousel before further elements
  • like inaturalist.org
• [x] [Cristina] + How It Works
  • like inaturalist.org
  • except using vector_svg/Marine Energy Graphics 10-19-21_how-it-works.svg:
• [x] [Neil] Who Uses the Toolkit?
  • like inaturalist.org
  • except using vector_svg/Marine Energy Graphics 10-19-21_developer-regulator.svg:
• [x] [Neil] upper navbar / text / background and highlight colors/fonts
  • try using bslib and configuration in _site.yml, eg background and foreground colors in the yaml, which gets used when you knit the Rmd:

    output:
    html_document:
     theme:
       version: 4
       bg: "#FFFFFF" # dark blue: "#08274D"
       fg: "#08274D" # light gray: "#E6E9ED"
     # https://rstudio.github.io/bslib/articles/bslib.html#real-time
     # theme:
     #   bslib: true
     css: libs/styles.css

[bbest]

Looking darn good!

Here are a few more tips for layout with Bootstrap version 4 (what is specfied in _site.yml using bslib):

• Overview · Bootstrap v4.6
• Bootstrap 4 Grid System
• Bootstrap 4 - Layout

[bbest]

[ moved to top comment for checkboxed tasks to show up ]

[bbest]

2. Add Reporting Tool to menu, esp. for navigating via phone