add welldone wallet to ecosystem-section

.github/workflows/dev.yml

@@ -28,7 +28,7 @@ jobs:
       - name: Set Node.js
         uses: actions/[email protected]
         with:
-          node-version: 14.x
+          node-version: 18.x
 
      # Install all the Node dependencies for Gatsby, using your package.json file.
       - name: Install Dependencies

.github/workflows/main.yml

@@ -28,7 +28,7 @@ jobs:
       - name: Set Node.js
         uses: actions/[email protected]
         with:
-          node-version: 14.x
+          node-version: 18.x
 
      # Install all the Node dependencies for Gatsby, using your package.json file.
       - name: Install Dependencies

.gitignore

@@ -1,7 +1,6 @@
 public
 .cache
 node_modules
-
 .DS_Store
-
 .env
+.vscode

gatsby-config.js

@@ -3,12 +3,13 @@ module.exports = {
     siteUrl: "https://celestia.org",
     title: "Celestia",
   },
+
   plugins: [
-    "gatsby-plugin-sass",
-    "gatsby-plugin-gatsby-cloud",
-    "gatsby-plugin-image",
     "gatsby-plugin-react-helmet",
     "gatsby-plugin-sitemap",
+    "gatsby-plugin-gatsby-cloud",
+    "gatsby-plugin-image",
+    "gatsby-plugin-sass",
     {
       resolve: "gatsby-plugin-manifest",
       options: {
@@ -102,7 +103,15 @@ module.exports = {
               verboseOutput: true,
             },
           },
-          `gatsby-remark-autolink-headers`,
+          {
+            resolve: `gatsby-remark-autolink-headers`,
+            options: {
+              removeAccents: true,
+              isIconAfterHeader: true,
+              enableCustomId: true,
+              offsetY: `100`
+            },
+          }
         ],
       },
     },{

gatsby-ssr.js

@@ -0,0 +1,34 @@
+// Fix for Gatsby open graph meta tags are not recognized
+// Reordering metatags at build time, priorising OG graph tags first.
+// source: https://marcomelilli.com/posts/gatsby-react-helmet-og-meta-tags-are-not-recognized
+
+const { Helmet } = require("react-helmet");
+
+exports.onRenderBody = ({ setHeadComponents, setHtmlAttributes, setBodyAttributes }, pluginOptions) => {
+	const helmet = Helmet.renderStatic();
+	setHtmlAttributes(helmet.htmlAttributes.toComponent());
+	setBodyAttributes(helmet.bodyAttributes.toComponent());
+	setHeadComponents([
+		helmet.title.toComponent(),
+		helmet.link.toComponent(),
+		helmet.meta.toComponent(),
+		helmet.noscript.toComponent(),
+		helmet.script.toComponent(),
+		helmet.style.toComponent(),
+	]);
+};
+
+exports.onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => {
+	const headComponents = getHeadComponents();
+
+	headComponents.sort((x, y) => {
+		if (x.props && x.props["data-react-helmet"]) {
+			return -1;
+		} else if (y.props && y.props["data-react-helmet"]) {
+			return 1;
+		}
+		return 0;
+	});
+
+	replaceHeadComponents(headComponents);
+};

package.json

@@ -22,6 +22,7 @@
     "@popperjs/core": "^2.9.3",
     "axios": "^0.23.0",
     "bootstrap": "^5.1.0",
+    "canvas": "^2.11.0",
     "gatsby": "^4.17.0",
     "gatsby-image": "^3.11.0",
     "gatsby-plugin-anchor-links": "^1.2.1",

src/components/breadcrumb.js

@@ -14,7 +14,7 @@ class BreadCrumb extends React.Component {
                     <Link to={'/glossary/'}>
                         <li className="breadcrumb-item">Glossary <i className={'icon-dropdown'}></i></li>
                     </Link>
-                    <Link to={'/glossary#'+alpha}>
+                    <Link to={'/glossary#'+alpha+'/'}>
                         <li className="breadcrumb-item text-uppercase">{alpha} <i className={'icon-dropdown'}></i></li>
                     </Link>
                     <li className="breadcrumb-item active" aria-current="page">

src/components/buttons/previousBTN.js

@@ -0,0 +1,56 @@
+import * as React from "react"
+
+const PreviousBTN = ({type}) => (
+        <div className={`row ${type === 'next' && 'justify-content-md-end'}`}>
+            <div className={'col-auto'}>
+                <div className={`row items-center featured-button featured-button-${type}`}>
+                    <div className={`col-auto ${type === 'next' ? 'order-2' : 'order-1'}`}>
+
+                        {type === 'prev' ?
+                            <svg width="14px" height="13px" viewBox="0 0 14 13" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                                <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" strokeLinecap="square">
+                                    <g transform="translate(-299.000000, -1546.000000)" stroke="#000000" strokeWidth="1.2">
+                                        <g transform="translate(200.000000, 1470.000000)">
+                                            <g transform="translate(69.000000, 57.000000)">
+                                                <g transform="translate(30.697984, 0.312500)">
+                                                    <g transform="translate(6.000000, 25.000000) scale(-1, 1) rotate(-90.000000) translate(-6.000000, -25.000000) translate(1.000000, 19.000000)">
+                                                        <line x1="4.89102643" y1="0" x2="4.89102643" y2="11.2095795"/>
+                                                        <polyline strokeLinejoin="bevel" points="0 6.69019917 5 12 10 6.69019917"/>
+                                                    </g>
+                                                </g>
+                                            </g>
+                                        </g>
+                                    </g>
+                                </g>
+                            </svg> :
+
+                            <svg width="14px" height="13px" viewBox="0 0 14 13" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                                <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" strokeLinecap="square">
+                                    <g transform="translate(-1374.000000, -1546.000000)" stroke="#000000" strokeWidth="1.2">
+                                        <g transform="translate(200.000000, 1470.000000)">
+                                            <g transform="translate(712.000000, 57.000000)">
+                                                <g transform="translate(395.000000, 0.000000)">
+                                                    <g transform="translate(17.697984, 0.312500)">
+                                                        <g transform="translate(56.302016, 25.000000) scale(-1, 1) rotate(-270.000000) translate(-56.302016, -25.000000) translate(51.302016, 19.000000)">
+                                                            <line x1="4.89102643" y1="0" x2="4.89102643" y2="11.2095795" id="Path"/>
+                                                            <polyline id="Path" strokeLinejoin="bevel" points="0 6.69019917 5 12 10 6.69019917"/>
+                                                        </g>
+                                                    </g>
+                                                </g>
+                                            </g>
+                                        </g>
+                                    </g>
+                                </g>
+                            </svg>}
+                    </div>
+                    <div className={`col-auto ${type === 'next' ? 'order-1' : 'order-2'}`}>
+                        {type === 'prev' ? 'Previous' : 'Next'}
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    )
+
+
+export default PreviousBTN

src/components/ecosystem.js

@@ -0,0 +1,18 @@
+import React from "react"
+import Image from "./imageComponent";
+
+export default class Ecosystem extends React.Component {
+
+    render() {
+        return <a href={this.props.ecosystem.url} target={'_blank'} rel={'noreferrer'}>
+            <div className={'ecosystem'}>
+                <div className={'logo-container'} >
+                    <Image alt={this.props.ecosystem.title} filename={this.props.ecosystem.image} />
+                </div>
+                <div className={'category'}>{this.props.category.name}</div>
+                <div className={'title'}>{this.props.ecosystem.title}</div>
+                <div className={'text'}>{this.props.ecosystem.text}</div>
+            </div>
+        </a>
+    }
+}

src/components/footer.js

@@ -52,6 +52,18 @@ const navigation = [
         text: "Forum",
         url: "https://forum.celestia.org",
         type: 'external'
+    },{
+        text: "Ecosystem Jobs",
+        url: "https://celestia.pallet.com/jobs",
+        type: 'external'
+    },{
+        text: "Terms of Service",
+        url: "/tos/",
+        type: 'internal'
+    },{
+        text: "Privacy Policy",
+        url: "/privacy/",
+        type: 'internal'
     },
 ]
 

src/components/glossary-nav.js

@@ -2,19 +2,24 @@ import * as React from "react"
 import { Link } from "gatsby"
 import {glossaries} from "../datas/glossary/data";
 
-class GlossaryNav extends React.Component {
-    render() {
+const GlossaryNav = ({url}) => {
+
+        const paths = url && url.split("/").filter(entry => entry !== "");
+        const lastPath = paths && paths[paths.length - 1];
+
         const allGlossaries = []
         let prev, next = []
 
-        glossaries.map(glossary =>{
-            Object.values(glossary)[0].map(result=>{
+
+        glossaries && glossaries.map(glossary =>{
+            glossary && Object.values(glossary)[0].map(result=>{
                 allGlossaries.push(result);
             })
         })
 
-        allGlossaries.map((glossary,index) => {
-            if(glossary.url === this.props.url){
+
+        allGlossaries && allGlossaries.map((glossary,index) => {
+            if(glossary.url === lastPath){
                 prev = allGlossaries[index-1] ? allGlossaries[index-1] : allGlossaries[allGlossaries.length-1]
                 next = allGlossaries[index+1] ? allGlossaries[index+1] : allGlossaries[0]
             }
@@ -29,7 +34,7 @@ class GlossaryNav extends React.Component {
                         <div className={'glossary'}>
                             <div className={'title'}>
                                 {prev.title}
-                                <i className={'icon-arrow-down'}></i>
+                                <i className={'icon-arrow-down'}/>
                             </div>
                             {prev.text}
                         </div>
@@ -40,7 +45,7 @@ class GlossaryNav extends React.Component {
                         <div className={'glossary'}>
                             <div className={'title'}>
                                 {next.title}
-                                <i className={'icon-arrow-down'}></i>
+                                <i className={'icon-arrow-down'}/>
                             </div>
                             {next.text}
                         </div>
@@ -49,7 +54,6 @@ class GlossaryNav extends React.Component {
             </div> : <div/>}
             </div>
         )
-    }
 }
 
 export default GlossaryNav