https://github.com/theangelsofwar/elemetal

欢迎来到未来 | 庚子 | 这是一场革命
https://github.com/theangelsofwar/elemetal

gatsby gatsby-node gatsby-plugins gatsby-site gatsbyjs graphql ipfs react react-components reactjs typescript

Last synced: 14 days ago
JSON representation

欢迎来到未来 | 庚子 | 这是一场革命

• Host: GitHub
• URL: https://github.com/theangelsofwar/elemetal
• Owner: theangelsofwar
• License: mit
• Created: 2020-04-13T00:09:36.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-11T19:51:11.000Z (almost 2 years ago)
• Last Synced: 2024-10-28T10:06:45.124Z (2 months ago)
• Topics: gatsby, gatsby-node, gatsby-plugins, gatsby-site, gatsbyjs, graphql, ipfs, react, react-components, reactjs, typescript
• Language: TypeScript
• Homepage: http://angiechangpagne.com
• Size: 21.6 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 28
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Elemetal Into the Ether

 欢迎来到未来 | 庚子 |  这是一场革命

Elemetal V1. A futuristic aesthetic

Get started:

- clone repo

- cd elemetal

- npm install

- gatsby develop

1st Iteration of My Web2 site(Web3 will be a dApp)

Gatsby-amazing React Library for Progressive Web Apps and Speedy Static Sites

>Great for eCommerce solutions because of its SEO functionality

>Static sites that have separation concerns from business logic avoid SQL injection attacks

>Call to external APIs

>Great for Blogs, Portfolio Sites, Discussion Boards, Mailing 

>able to configure with graphql through static query an build asset loading

>Good CICD

>Funny story, I checked what the Gatsby site is built with and it was actually Angular...

Starting Point: Gatsby Config

Tech Used:

React.js

Web3 for React

Fortmatic

Gatsby.js(significant speed increase, leveraging GraphQL)

Netlify

augmented-ui

Carbon Components

Lambda Components

Jest Unit testing

Typescript-Superset of Javascript(though not necessary), better for closer interaction to underlying graphQL built into Gatsby, better conversion rates

> npm install typescript --dev

> npm install -g @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint

Gatsby Files:

gatsby-browser.js

gatsby-config.js : Querying GraphQL in Gatsby:

gatsby-node.js : Node API

gatsby-ssr.js : Server Side Render API

Important Gatsby Plugins: 

npm install:

> npm install gatsby-plugin-typescript 

  -adds transpiler

>npm install gatsby-plugin-react-helmet

>npm install @types/react-helmet

  -used for Site Meta data and SEO optimizations

>npm install gatsby-image

  -lazy loading of images

Internal Links are faster due to lazy loading

Hooks: 

useStaticQuery

useWeb3React

Query on localhost:8000/___graphql (three underscores)

There are two Versions of this current version of my Gatsby Portfolio site-

>One of them is centralized

>One of them is decentralized

For Browser Configuration:

>npm install @ethersproject/providers

>npm install @web3-react/core

>npm install gatsby-plugin-dat dat 

Pinning Content to Hashbase:

> plugins: [

  {

    resolve: `gatsby-plugin-dat`,

    options: {

      pinning_service: {

        domain: 'https://hashbase.io/',

        // If your pinning service does not need authentication,

        // you can omit these fields.

        username: 'YOUR USERNAME HERE',

        password: 'YOUR PASSWORD HERE',

      },

    },

  },

];

Handling Ethereum Events:

>hooks.ts file in lib folder

Fortmatic: For integrating a dApp into the Ethereum Blockchain(currently in testing mode)

> npm i --save fortmatic@latest

For more information, check out:

https://docs.fortmatic.com/web3-integration 

Adding ReCaptcha

- npm install react-recaptcha-google

What is 

Interplanetary File Transfer(IPFS)

My Bigger Project-Project Ether:

>Join The Movement

>Great Resources

>My Current Development in dApp and the Red Ether

>Contribute

Optimizing SEO and Metadata:

Run: 

gatsby-develop

>Links to Gatsby's internal development server, located in East Egg. 

Build Deploy:

>gatsby build

>gatsby serve

>netflify, has custom domain, currently I am using Web2, but later will be hosting static files to IPFS and get an ENS domain

Other options:

> npm install --global surge

> surge

Im going to do a post on the underlying theories and workings behind Gatsby, look into how they bundle their webpack, as it has even more Abstractions from Javascript than Angular does!

Next:

Google Analytics(Do not go overboard)

Tumblr Clone

To Do: Think Outside the Box