{"id":16486776,"url":"https://github.com/themulanfiles/Elemetal","last_synced_at":"2025-10-23T09:30:51.579Z","repository":{"id":38437191,"uuid":"255193712","full_name":"theangelsofwar/Elemetal","owner":"theangelsofwar","description":" 欢迎来到未来 | 庚子 |  这是一场革命","archived":false,"fork":false,"pushed_at":"2023-01-11T19:51:11.000Z","size":22688,"stargazers_count":0,"open_issues_count":28,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-12-15T16:16:44.785Z","etag":null,"topics":["gatsby","gatsby-node","gatsby-plugins","gatsby-site","gatsbyjs","graphql","ipfs","react","react-components","reactjs","typescript"],"latest_commit_sha":null,"homepage":"http://angiechangpagne.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/theangelsofwar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-13T00:09:36.000Z","updated_at":"2020-06-11T00:52:25.000Z","dependencies_parsed_at":"2023-02-09T05:33:49.421Z","dependency_job_id":null,"html_url":"https://github.com/theangelsofwar/Elemetal","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theangelsofwar%2FElemetal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theangelsofwar%2FElemetal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theangelsofwar%2FElemetal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theangelsofwar%2FElemetal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/theangelsofwar","download_url":"https://codeload.github.com/theangelsofwar/Elemetal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237803626,"owners_count":19368942,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gatsby","gatsby-node","gatsby-plugins","gatsby-site","gatsbyjs","graphql","ipfs","react","react-components","reactjs","typescript"],"created_at":"2024-10-11T13:30:19.856Z","updated_at":"2025-10-23T09:30:45.232Z","avatar_url":"https://github.com/theangelsofwar.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Elemetal Into the Ether\n 欢迎来到未来 | 庚子 |  这是一场革命\n\nElemetal V1. A futuristic aesthetic\n\nGet started:\n- clone repo\n- cd elemetal\n- npm install\n- gatsby develop\n\n1st Iteration of My Web2 site(Web3 will be a dApp)\n\n\nGatsby-amazing React Library for Progressive Web Apps and Speedy Static Sites\n\u003eGreat for eCommerce solutions because of its SEO functionality\n\u003eStatic sites that have separation concerns from business logic avoid SQL injection attacks\n\u003eCall to external APIs\n\u003eGreat for Blogs, Portfolio Sites, Discussion Boards, Mailing \n\u003eable to configure with graphql through static query an build asset loading\n\u003eGood CICD\n\u003eFunny story, I checked what the Gatsby site is built with and it was actually Angular...\n\nStarting Point: Gatsby Config\n\nTech Used:\nReact.js\nWeb3 for React\nFortmatic\nGatsby.js(significant speed increase, leveraging GraphQL)\nNetlify\naugmented-ui\nCarbon Components\nLambda Components\nJest Unit testing\n\nTypescript-Superset of Javascript(though not necessary), better for closer interaction to underlying graphQL built into Gatsby, better conversion rates\n\u003e npm install typescript --dev\n\u003e npm install -g @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint\n\nGatsby Files:\ngatsby-browser.js\ngatsby-config.js : Querying GraphQL in Gatsby:\ngatsby-node.js : Node API\ngatsby-ssr.js : Server Side Render API\n\n\nImportant Gatsby Plugins: \nnpm install:\n\u003e npm install gatsby-plugin-typescript \n  -adds transpiler\n\u003enpm install gatsby-plugin-react-helmet\n\u003enpm install @types/react-helmet\n  -used for Site Meta data and SEO optimizations\n\u003enpm install gatsby-image\n  -lazy loading of images\n\n\u003cLink /\u003e\nInternal Links are faster due to lazy loading\n\nHooks: \nuseStaticQuery\nuseWeb3React\n\nQuery on localhost:8000/___graphql (three underscores)\n\n\nThere are two Versions of this current version of my Gatsby Portfolio site-\n\u003eOne of them is centralized\n\u003eOne of them is decentralized\n\nFor Browser Configuration:\n\u003enpm install @ethersproject/providers\n\u003enpm install @web3-react/core\n\n\u003enpm install gatsby-plugin-dat dat \nPinning Content to Hashbase:\n\u003e plugins: [\n  {\n    resolve: `gatsby-plugin-dat`,\n    options: {\n      pinning_service: {\n        domain: 'https://hashbase.io/',\n        // If your pinning service does not need authentication,\n        // you can omit these fields.\n        username: 'YOUR USERNAME HERE',\n        password: 'YOUR PASSWORD HERE',\n      },\n    },\n  },\n];\n\n\nHandling Ethereum Events:\n\u003ehooks.ts file in lib folder\n\n\nFortmatic: For integrating a dApp into the Ethereum Blockchain(currently in testing mode)\n\u003e npm i --save fortmatic@latest\nFor more information, check out:\nhttps://docs.fortmatic.com/web3-integration \n\nAdding ReCaptcha\n- npm install react-recaptcha-google\n\nWhat is \n\nInterplanetary File Transfer(IPFS)\n\n\nMy Bigger Project-Project Ether:\n\u003eJoin The Movement\n\u003eGreat Resources\n\u003eMy Current Development in dApp and the Red Ether\n\u003eContribute\n\nOptimizing SEO and Metadata:\n\n\n\nRun: \ngatsby-develop\n\u003eLinks to Gatsby's internal development server, located in East Egg. \n\nBuild Deploy:\n\u003egatsby build\n\u003egatsby serve\n\u003enetflify, has custom domain, currently I am using Web2, but later will be hosting static files to IPFS and get an ENS domain\n\nOther options:\n\u003e npm install --global surge\n\u003e surge\n\n\nIm 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!\n\n\n\nNext:\nGoogle Analytics(Do not go overboard)\n\nTumblr Clone\n\n\nTo Do: Think Outside the Box","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemulanfiles%2FElemetal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthemulanfiles%2FElemetal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemulanfiles%2FElemetal/lists"}