Description

Changed "Ethereum Testnets" link on this article to reference /developers/docs/networks/#ethereum-testnets instead of /developers/docs/networks/#testnets.

Related Issue

Issue contains reproducibility steps - #6384

Assorted small edits from across day.

PR Template

Summary

• QUICKSTARTS_REPO was not being imported here, this did not break because a quickstart will never not have a packUrl.
• Some formatting fixes as well

Summary of changes

When pages require functionality that does not exist yet in our components library, we can use a YAML block to render the component in the middle of Basic Page content. (Later, if more people need the new component and the requirements are set, we can build an actual Drupal widget for it.)

What is the benefit?

• This is best suited for custom pages that need to be developed quickly and/or do not have their requirements firmly set.
• Custom pages (like Impact Report) can now be created as Basic Pages (therefore they will have a Drupal node ID, alias, a place in the menu, redirects eventually, etc.

How do I store the Yaml data for the block?

• Option 1: Store it in the Drupal Yaml block itself under Yaml Mapping. - Pro: Feeds into the idea of content stored on Drupal. - Con: Blocks do not have revisions in D9 yet :scream:...but eventually, if they do, users can edit the blocks.
• Option 2: Store it on the Gatsby side at /src/data/block and query from it from there. You would still need a Yaml block to place the component in a Basic Page. The benefit to this is we have version control. For example, I was a little nervous someone would delete the mappings I created for International, so I saved them in /src/data/block just in case. (I'm not querying them, but I could if I wanted to, using the same query style as Impact Report)

Frontend

• Updated schema for Yaml Widget and Yaml Blocks
• Added Yaml Widget component
  • Maps the Yaml Block to the Gatsby component using the Yaml ID
  • Allow Yaml Widgets to be full width
  • Can be used outside (full-width) or inside a section (page-container width)
• Added PageContainer component to handle the wrapper elements (e.g. <div class="page-container"> and <div class="site-content row">)
• Added custom component blocks for International page (button section, stats section and media/text section)

Changes to Existing Widgets

• Updated the use of the <section> element on the Media Text widget (have the media + text wrapped in a section rather than two sections, one containing media, one containing text, together wrapped in a div)

Styling Changes

• Each Widget now has its own set of wrapper divs (i.e. page-container, site-content), except Yaml Widgets (which need full width) and Modal Video widgets (which should not be constrained)
  • This increases the spacing around Section widgets
• Made the CTA Heading a text-dark heading (h2 styled as an h3)
• Allowed font-size to be changed on Statistic.js title (used on Impact Report as one size and on International as another size)
• Added more specificity to card dt styles on basic pages (they were styling all dt elements rather than just card dt elements)
• Removed contentExists from Basic Page

Backend

http://yamlblock-chug.pantheonsite.io

• Added Yaml Block (for storing the Yaml ID and mapping)
• Added Yaml Widget paragraph for adding the Yaml block on a Drupal Basic Page.

Test Plan

1. Go to https://build-c0510911-c91b-4d59-b3ad-7120c6a2f1d0.gtsb.io/explore-u-of-g-international.
2. Go to https://yamlblock-chug.pantheonsite.io/node/834/edit to view Drupal node
3. View examples of Yaml Blocks at https://yamlblock-chug.pantheonsite.io/admin/structure/block/block-content
4. The component will not render if:
   • People have a mistake in their Yaml mapping
   • People change the name of the Yaml ID and it's no longer found by Gatsby (Although the surrounding wrapper div will render, but the null contents is still better than an error if the Yaml map is broken.)

Caveats

• There are no revisions on Drupal 9 blocks. (At least not yet - D9 is working on it, but until it's available, no revisions.) This means if a block gets deleted, there's no backup. If users do NOT need to change the content, it would probably be better to store the content in Gatsby since that has revisions. If content needs to be changed frequently, we can go the route of allowing users to have access to the YAML mapping via Yaml blocks.

Creating a custom component in future...

Step 1 - Create component under src/components/blocks/

• You can either source your Yaml data from the Gatsby side at src/data/block/
  • See Impact Report blocks at src/components/blocks/economic-impact for an example of these query types)
• OR you can source your data from the Drupal Yaml Block mapping field (see example below).

import React from "react"
import { StaticQuery, graphql } from "gatsby"

const yaml = require('js-yaml');

const render = ({ field_yaml_map, relationships }) => {
  let yamlMap;
  let yamlFiles = {};
  relationships.field_yaml_files.forEach(file => {
    yamlFiles[file.path.alias] = file.relationships.field_media_image.localFile;
  });

  try {
    yamlMap = yaml.load(field_yaml_map);
  } catch (e) {
    console.log(e);
    return null;
  }
    
  return (
    // Render component here
  )

}

// Add id of component to query and name component here
const query = graphql`
  query {
    blockContentYamlBlock(field_yaml_id: {glob: "id_of_my_yaml_block"}) {
      id
      field_yaml_id
      field_yaml_map
      relationships {
        field_yaml_files {
          id
          name
          relationships {
            field_media_image {
              localFile {
                childImageSharp {
                  gatsbyImageData(placeholder: BLURRED, layout: CONSTRAINED)
                }
              }
            }
          }
          path {
            alias
          }
        }
      }
    }
  }
`
// Add unique name of component here
export default function UniqueNameOfComponent() {
  return <StaticQuery query={query} render={({blockContentYamlBlock}) => render(blockContentYamlBlock)} />
}

Step 2 - Map block to component in components/shared/yamlWidget.js

// @todo - add index of components in components/blocks and import all in one line
// until then, import each component manually below
import InternationalStatsGlobal from 'components/blocks/international/international-stats-global'
import InternationalExploreThingsToKnow from 'components/blocks/international/international-things-to-know'
import InternationalExploreButtons from 'components/blocks/international/international-explore-btns'
import UniqueNameOfComponent from 'components/blocks/international/id-of-my-yaml-block'

const YamlWidget = (props) => {
    let component = props.blockData.relationships.field_custom_block?.field_yaml_id;

    // add new custom components to conditional rendering below
    return ({
        'international_stats_global_impact': <InternationalStatsGlobal />,
        'international_explore_things_to_know': <InternationalExploreThingsToKnow />,
        'international_explore_btns': <InternationalExploreButtons />,
        'id_of_my_yaml_block': <UniqueNameOfComponent />,
    }[component] || null )
}

Step 3 - Add block to Drupal backend

• Add Yaml ID
• Add your Yaml mapping (I typically type it up in a code editor and paste it in, simply because the tab key isn't available in the WYSIWYG)
• When referencing images in the Yaml mapping, use the URL alias of the image (you can find it when looking at the image in the Content / Media tab)
• Attach any images you are using (I've only added the ability to attach images, but in future, we'll be able to attach files if we update the schema)

Description

• Added two full stops to the cards. (Scaffold-eth & Epirus).

Related Issue

• Related to [#6406]

Description

• Changed Try a Dex to Try a DEX.

Related Issue

• Related to [#6405]

This PR was automatically created by Snyk using the credentials of a real user.

Snyk has created this PR to upgrade @lekoarts/gatsby-theme-cara from 1.0.11 to 1.2.20.

:information_source: Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.

• The recommended version is 39 versions ahead of your current version.
• The recommended version was released a year ago, on 2021-01-30.

Note: You are seeing this because you or someone else with access to this repository has authorized Snyk to open upgrade PRs.

For more information:

🧐 View latest project report

🛠 Adjust upgrade PR settings

🔕 Ignore this dependency or unsubscribe from future upgrade PRs

Description

• Changed Optimisic Kovan to Optimistic Kovan.

Related Issue

Related to #6404