search

marinebon / www_marinebon2

MBON Website 2021 Rebuild in progress
https://marinebon2.netlify.app/
MIT License
1 stars 1 forks source link

Product Gallery #4

Closed 7yl4r closed 3 years ago

7yl4r commented 3 years ago

Putting some notes here to help me keep track of the ongoing "product gallery" discussion.

The basic idea is to have a page which highlights work like infographiq, early alert dashboards, etc.

I made the following mockup:

MBON-product-gallery-mockup

Ben built a prototype technical product showcase here: https://marinebon.org/products/

7yl4r commented 3 years ago

I met with Stephen Richard from the EarthCube resource registry & USGIN to discuss potential synergy with EarthCube's efforts to catalog tools & tool metadata. I've documented this more on #5.

bbest commented 3 years ago

---------- Forwarded message --------- From: Ben Best ben@ecoquants.com Date: Mon, Jun 14, 2021 at 10:11 AM Subject: Re: Organizing some MBON products

Hi Frank, Matt and all, Similar to the Project tiles on ioos.us:

image

I started to create some Bootstrap cards of MBON Products here:

marinebon.org/products (source) image

Tylar, Torrie and I are working on an update to the marinebon.org website here:

marinebon2.netlify.app (source) This will feature a Products section similar to other Wowchemy sites like here:

BrombergLab image

Notice how Projects above could be similar to MBON Products. We can have tags like eDNA, Seascapes or Infographics that can be clicked on above the MBON Product cards to filter accordingly. Clicking on any one MBON Product would then open its own dedicated page for more details.

We could populate these MBON Products with a Google Sheet as Matt suggests. Part of the reason we're experimenting with Wowchemy is that it provides a free editing interface to add and edit such content.

Jenn's slide showing the various locations of infographic resources, both the core building materials (i.e. marinebon/infographiqJS, infographiqR and infographiq) as well as instances grouped by owner (e.g. noaa-iea/fk-esr-info, noaa-onms/cinms, ioos/sanctsound), would be good material for the detail page of the Infographic MBON Product. Comments are most welcome.

Thanks, Ben

7yl4r commented 3 years ago

Steps to set this up using the same "projects" system:

OR we start with Hugo's understanding Hugo - Content Types:

  1. Create Type Directory Create directory /layouts/product
  2. Create single template Create /layouts/product/single.html
  3. Create `
  4. Create list template Create /layouts/section/product.html but don't see project.html in Wowchemy /layouts/section/, probably because of Wowchemy widgets which renders in the home page using /content/home/projects.md. So create /content/home/products.md to render in home page: 
      content:
    page_type: product
  5. Create views Many sites support rendering content in a few different ways, for instance, a single page view and a summary view to be used when displaying a list of contents on a single page. Hugo makes no assumptions here about how you want to display your content, and will support as many different views of a content type as your site requires. All that is required for these additional views is that a template exists in each /layouts/TYPE directory with the same name. For more, see Hugo - Content List Template.
  6. Create a corresponding archetype Create /archetypes/product.md. For more, see Hugo - Archetypes.
7yl4r commented 3 years ago

Some notes about how it works (top-down starting from main page content):

  1. .md file defines page content and includes a widget
  2. widget is rendered using the html template
  3. html template grabs all .md files in the folder for a specfic archetype (or collection?)
  4. layout .html describes how to render the archetype data

Also worth noting here: There are four different views that might be rendered to summarize the content ref. I think we want to use the "card" but I am not sure what the others look like. I don't know what view is being rendered for "projects" now but it doesn't look like the card view shown on the hugo-academic demo site.

7yl4r commented 3 years ago

The product view is now working. I am surprised because I didn't think I was done setting things up but I am not fixing what ain't broke.

We are now ready to discuss

  1. what tools and data products should be included
  2. what tags should use use (& highlight) to organize these

regarding what to include:

There are many lists to pull from here, including:

  1. the list emailed out by Joana(?) long ago
  2. this infographiq doc page listing infographics

regarding tags:

  1. data product / tool / tool usage instance
  2. regional mbon association(s)
  3. thematic mbon association(s)
7yl4r commented 3 years ago
bbest commented 3 years ago

Aw yeah, well done @7yl4r 🥳

Screen Shot 2021-07-30 at 5 54 18 PM
MathewBiddle commented 3 years ago

Ran across this the other day: https://sbc.marinebon.org/data/

7yl4r commented 3 years ago

Ran across this the other day: https://sbc.marinebon.org/data/

Looks like we aren't the only one thinking of making this view.

I am going to close this because I have completed v1 of this concept and this thread is getting way too long. Let's follow up with more specific issues targeting improvements to this product view.