paritytech/substrate-website

Substrate Website

https://substrate.io

Content contribution, PRs and merging flow

• PR providing content (json, md...): open PR against main branch (production)
• PR providing new features: open PR against main branch (PR builds in netlify staging env)
• PR providing hotfixes open only against main (PR builds in netlify staging env)

Website Architecture (IA /developers)

NOTE: Marketplace website has been shut down and it is no longer part of the Substrate website IA.

Development

Install

Navigate into your cloned local repo directory and install all dependencies.

yarn

Configure environment variables

Copy example.env.development and rename to .env.development

Config URL variables based on your preferable local setup. URL will be used for links generation between Substrate websites.

Default localhost port configuration:

GATSBY_WEBSITE_URL=http://localhost:8100
GATSBY_DOCS_URL=http://localhost:8200

Start development server

Navigate into your new site’s directory and use the following command to start the development server locally.

yarn develop

Setup, configuration & plugins

i18n (bypassed)

Docs:

• https://github.com/microapps/gatsby-plugin-react-i18next#how-to-extract-translations-from-pages
• https://www.i18next.com
• https://react.i18next.com

Configuration

You can find the config for i18n, using i18next with gatsby-plugin-react-i18next.

• the markdown content is located in ./content/{language}/{content_type}/*/
• the language strings are located in ./locales/{language}/{data_type}.json

The default language (and fallback language) is en for english.

Extract strings

To extract the strings that needs to be translated, it is possible to run yarn extract-locales, which will generate the /locales-tmp folder.

netlify-cms (bypassed)

netlify-cms-app & gatsby-plugin-netlify-cms are used to setup [netlify-cms](https://www.netlifycms.org) for this project.

The gatsby gatsby-config pluggin, points to the file src/cms/index.js, as entry file of the configuration.

local git-gateway backend

To develop and use netlify-cms with the data available in the local repository folder:

In the file ./.env.development set:

GATSBY_NETLIFY_CMS_GIT_LOCAL=true

Then in the project's root folder run:

npx netlify-cms-proxy-server

and in an other shell and the same folder, run the development server as usual.

Adding, updating and removing content from Ecosystem Projects

Substrate projects can be added, updated, or removed by updating the markdown files located at content/en/projects.

To add a new project please add a new markdown file in this folder that follows the naming convention already in place.

To remove a project please remove the appropriate markdown file in content/en/projects.

The same editing is available for project types and project categories the markdown for these fields lives in content/en/project-types and content/en/project-categories respectively. Please use the current markdown structure as a template and guide.

substrate-website's Issues

add isBrowser util

// utils.js

export const isBrowser = () => typeof window !== "undefined"

import { isBrowser } from './utils'; 

if (!isBrowser) {
    return;
}

// ... other code

Rename Teams to Projects

Applies to both in-content uses and sitemap.

Square One contact form causes horizontal scroll

On phone (iPhone mini 13)

Ecosystem home scroll to the right is possible

Set overflow-x-hidden as on other pages.

Hackathons sorting

Hackathons should be sorted by something, most likely by date. Convert date to unix timestamp?

Redirects from old docs site

This issue came up whereby the following URL from the old docs site has come up in searches: https://substrate-developer-hub.github.io/docs/en/index

Any link from https://substrate-developer-hub.github.io/ should redirect to docs.substrate.io.

IIRC this is an easy fix to just add the URL to some redirect file in the new site's codebase.

Newsletter Subscribe not working

When a user fills in their email address and clicks on the "Subscribe" button nothing seems to happen.

Reported by @sacha-l

Dark/light mode

• update colors
  Light mode blue: #4E73F2
  Dark mode blue: #0094FF

• fix header color transition

• dark mode html BG

• dark mode mobile sub-menu BG

• Home: invert BG colors on first section below hero?

Safari issues

• PrimaryButton arrow container square during transform
• Projects page hero: "Meet Substrate teams" is outside of StaticImage container
• JSON animations are not optimized: Home, Vision and Interoperable pages
• Images don't have border radius

target current page with css

Apply to main nav desktop and nav current items/pages

• src/styles/tailwind-custom.css
• check docs stack for design reference
• follow same logic like the sidebar nav has:

.navSidebar a[aria-current='page'] {
  @apply font-bold;
}

Wrong style on 'Get Started' button

Today navigating through the site I saw that the 'Get Started' button on https://substrate.io/developers/ seems to be wrongly styled.

Get ready for `main-md` transition of docs

• internal links to docs.substrate.io are all working and pointing to correct contet.

article nav layout bug

/ecosystem/resources/awesome-substrate

newsletter

• remove gray preloader image
• change input BG on dark to very dark bg, white text

Mobile nav menu ThemeToggle

Implement as in docs stack:

:

Layout / sidebar issue

Behavior at 2xl sidebar on pages with a sidebar without an ArticleNav is probably unintended.

Article nav without sidebar

For Case Studies.

https://substrate.io/developers/ 404 in page

https://substrate.io/playground/ is a 404 - this is linked on the playground image (not the text)

https://substrate.io/developers/playground/ is the correct link

SA tracking needs data sanitising

The SA event tracking implementation needs a bit of string sanitising in some cases.
Maybe we can set max chars in some circumstances?

Redirects/empty pages

• /ecosystem/connect/blog
• /ecosystem/connect/events

rust docs link is broken

Rust docs link on the footer returns a 404 guessing its yet to be update to polkadot-sdk

[broken link] Sensorium marketplace page

The link to the repository on this page is broken. I believe it should be https://github.com/sensoriumxr/substrate

Projects liveness keep-alive and quality checks

Hey, I'm from an era that I recall old substrate projects mapping website, which is an amazing initiative, and I really know it must be a tremendous effort to migrate all projects to new system.

However, I was browsing Marketplace and found a few discrepancies where either

• repository was non-existing - an organization can be renamed, repository can be renamed, we don't know until we check?
• non-existing domain of project - either no repository
• showing the initial substrate node template as the first commit
• progress on substrate code is 2 years old

I sense as Marketplace should act as a curated registry of best crafts on Substrate and show the best work of ecosystem towards open source efforts where others could learn;
I would be happy to in some way pool prize to find some meaningful check metric to "measure", score or rank repository in some way that we reach a consensus.

This rank should solely go towards measuring of open-source perpetuity/sustainability of project, not much code quality.
For example, this check would tell me what's, are the odds I, as a developer, can rely on this project in the future.

What do you think?

I'll try to reply here or if there is some group, I can be quickly reached at https://t.me/yangwao

Ref

https://marketplace.substrate.io/projects/sensorium-corporation/ -> https://github.com/sensoriumxr/sensorium-substrate (n/a repository)
https://marketplace.substrate.io/projects/fractapp/ -> https://www.fractapp.com/ (domain n/a)
https://marketplace.substrate.io/projects/shift-project/ -> https://github.com/ShiftNrg/shift-substrate-core (initial commit)
https://marketplace.substrate.io/projects/celer-network/ -> https://github.com/celer-network/cChannel-substrate
https://marketplace.substrate.io/projects/faber/ -> https://github.com/yxf/subwallet

Projects page filters need tabindex

Filters are not tabbable.

Marketplace pallet data is incorrect

It looks like the pallet READMEs on Marketplace aren't pulling from the right source.

For example, pallet-identity has the link identity::Trait which isn't the right information as written in the source code.

It looks like this is the case for all the FRAME pallets listed.

gatsby image preloader bug

Replicate:

• https://substrate.io/developers/playground/
• reload the page
• while image is loading you can see transparent area becomes black

Fix: there should be now change to the transparent are while loading, you can remove that are from the png and add radius top left and ideally config the image component to load transparent images without black BG

another issue on playground:

Embed Youtube playlists for past seminars instead of static archive page

Right now to update the seminars in the Archive page (https://substrate.io/ecosystem/resources/past-seminars/), we need to manually add the titles and description to the JSON file that the page is using. This causes duplication of content, and sometimes the content needs changing with increases a margin of error for having potentially conflicting sources of truth.

I had mentioned this in the past, where my suggestion was to use the YouTube api to pull seminar information from target playlists. But a way more simple and effective solution would simply be to display the playlists in an iframe.

There are now two channels where Seminars live, one is the ParityTech YouTube channel and the other is the Polkadot one. Going forward we will only be uploading new videos to the Polkadot channel. So as part of my suggestion, this Archive page should be separated in two:

1. The top heading should be for the Polkadot Youtube Channel, i.e. "Substrate Seminar Live Streams (2023)" with the current playlist being populated here
2. Below, we should have another heading, i.e. "Substrate Seminar Live Streams (2021-2022)" with the different playlists found here.

Would something like this be possible? Thanks for looking into what can be done here.

dark mode html bg

• change html and body bg to dark on dark mode

move orphan page /substrate-connect

• Move https://substrate.io/substrate-connect/ to /developers/substrate-connect/
• Add to navigation (all stacks)
• add legacy netlify redirect

Display seminar calendar on seminar page

On the main seminar page, it would be great to have a calendar view of the schedule which pulls from the Google calendar Im currently maintaining.

Is this possible?

replace image at /substrate-connect

Mobile nav glitch on older iOS versions

Assets, buttons and potentially more page elements are visible through the mobile nav.
More testing required, but so far it looks like the issue is on iOS versions 12 and older

Broken link on /ecosystem/connect/contact/

Soft deadline: 19th July 2022
Hard deadline: 22nd July 2022

On https://substrate.io/ecosystem/connect/contact/ the link for the Substrate Discord server is broken:

We had a case this week of a Discord server using a broken invite for scam reasons.

Feature request to include a search bar for projects in the Substrate ecosystem

With over 150 projects in this page, from a user's perspective, it is quite strange to perform a keyword search on the browser in order to find a certain project. I would recommend a search bar with keyword-based filters so that users can easily find relevant teams in gaming, wallet projects, zero-knowledge etc.
https://substrate.io/ecosystem/projects/

test

Overflow issue, Technology sub-pages

While Hero is in view, it is possible to scroll to the right of the page. Have tried removing every element inside Hero, but not able to find the culprit yet.

article nav layout

to fix PR #40

• align layout width
• remove specific in src/hooks/use-intersection-observer.js
• check on html5
• add scroll context

Adding Square One information to the Ecosystem home page

Hello,

We noticed that the https://substrate.io/ecosystem/ page is missing information on Square One program (https://substrate.io/ecosystem/square-one/).
could we put information about it with the link under Substrate Builders Program?

Newsletter form

• Form submission needs to be implemented.

Footer social media icons

Change order to match docs stack.

Contributing to substrate docs

Hey,

Is there a way one can contribute to the substrate docs, I have been looking for the content repo for a while now but couldn't find it

Mobile menu behavior

Clicking the current page in the mobile menu should close the menu.

Command to instantiate smart contracts needs an additional argument.

On https://docs.substrate.io/tutorials/smart-contracts/prepare-your-first-contract/
there is this command:

cargo contract instantiate --constructor new --args "false" --suri //Alice --salt $(date +%s)

To get the output shown below on the website, one would have to add the -x or --execute flag.

Proposed change:

cargo contract instantiate --execute --constructor new --args "false" --suri //Alice --salt $(date +%s)

The --execute flag should also be explained in the bullet points on the website right under the command.

Remove upcoming seminars section

This page has a place with upcoming seminars. I don't think it's particularly useful because people will get notified through subscribing to the calendar anyways. And adding on the maintenance burden, I think we should remove.

It will be more useful to have a new page that can fetch past seminars and archive them for people to revisit.

Add more data fields

We'd like to add a few fields to the following file https://github.com/paritytech/substrate-website/blob/main/data/teams.json.

Some fields of interest are:
relay: Polkadot or Kusama
chain_id (the ID of the chain)

We do this for simple data augmentation / joining in our backend. Since the fields are manually added to the repository we want to avoid augmenting the data on the backend since that's error prone.

Let me know what you think.

Past seminars page

It would be great to have a place to put all of our past seminars, so that users can view them on our seminar page, similar to how we had it here.