Add/links and icons (#74)

This PR partially closes #68. It also closes #71 and #73. - Favicon changed - Links added - Layout optimized - Metadata added for SEO What this PR does not address from issue #68 because we need to wait for enhancements to be designed & copywritten: - We have a list of ambassadors and what they are, but no info on how to become one - Adding Web3.js social media buttons/links ( [x.com](http://x.com/), youtube, .. ) - Adding small section getting latest web3.js X posts and also some latest youtube videos for showing preview in a window on webpage - feedback form link/button
web3 · Jul 29, 2024 · 827d2d7 · 827d2d7
1 parent 493a365
commit 827d2d7
Show file tree

Hide file tree

Showing 15 changed files with 82 additions and 35 deletions.
diff --git a/public/favicons/android-chrome-192x192.png b/public/favicons/android-chrome-192x192.png
diff --git a/public/favicons/android-chrome-512x512.png b/public/favicons/android-chrome-512x512.png
diff --git a/public/favicons/apple-touch-icon.png b/public/favicons/apple-touch-icon.png
diff --git a/public/favicons/favicon-16x16.png b/public/favicons/favicon-16x16.png
diff --git a/public/favicons/favicon-32x32.png b/public/favicons/favicon-32x32.png
diff --git a/public/favicons/favicon.ico b/public/favicons/favicon.ico
diff --git a/public/favicons/site.webmanifest b/public/favicons/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,13 +1,61 @@
 import type { Metadata } from "next";
 import localFont from 'next/font/local';
-import { Inter } from "next/font/google";
 import "./globals.css";
+import Script from "next/script";
 
 export const metadata: Metadata = {
  title: "Web3js - The API to connect to Ethereum and any EVM Chain",
  description: "web3js - the longest-running EVM API",
+ icons: {
+ icon: './favicon.ico',
+ },
+ keywords: [],
+ twitter: {
+ card: 'summary_large_image',
+ title: 'Web3js',
+ description: 'web3js - the longest-running EVM API',
+ images: ['https://imagedelivery.net/qdx9xDn6TxxInQGWsuRsVg/f3f16fdc-3d9c-44af-eda3-49865a286f00'],
+ },
+ openGraph: {
+ title: 'web3js',
+ description: 'web3js - the longest-running EVM API',
+ url: 'https://web3js.org',
+ siteName: 'web3js',
+ images: [
+ {
+ url: 'https://imagedelivery.net/qdx9xDn6TxxInQGWsuRsVg/f3f16fdc-3d9c-44af-eda3-49865a286f00',
+ width: 800,
+ height: 600,
+ },
+ ],
+ locale: 'en_US',
+ type: 'website',
+ },
+ robots: {
+ index: false,
+ follow: true,
+ nocache: true,
+ googleBot: {
+ index: true,
+ follow: false,
+ noimageindex: true,
+ 'max-video-preview': -1,
+ 'max-image-preview': 'large',
+ 'max-snippet': -1,
+ },
+ },
+
+ metadataBase: new URL('https://web3js.org'),
+ alternates: {
+ canonical: '/',
+ languages: {
+ 'en-US': '/en-US',
+ 'de-DE': '/de-DE',
+ },
+ },
 };
 
+
 const neueMontreal = localFont({
  weight: '400',
  src: [
@@ -37,6 +85,7 @@ export default function RootLayout({
 }>) {
  return (
  <html lang="en">
+ <Script defer data-domain="web3js.org" src="https://plausible.io/js/script.js"/>
  <body className={`${neueMontreal.variable}`}>{children}</body>
  </html>
  );

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -2,26 +2,22 @@
 
 /* eslint-disable @next/next/no-img-element */
 import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
-import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/react/24/outline'
+import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
 import { useState } from 'react'
+import { docsUrl } from './urls'
 
 const navigation = [
  { name: 'About', href: '/', current: true },
  { name: 'Plugins', href: '/plugins', current: false },
-// { name: 'History', href: '#', current: false },
+ { name: 'Docs', href: docsUrl, current: false }
 ]
 
 function classNames(...classes: string[]) {
  return classes.filter(Boolean).join(' ')
 }
 
 export default function Navbar() {
- // useEffect? 
  const [isCurrentPage, setIsCurrentPage] = useState('');
- // check history
- // set navigation.name === [match] to currentPage 
- // check currentPage === item.name ? bg : null 
-
  return (
  <Disclosure as="nav" className="">
  <div className="mx-auto max-w-9xl px-2 sm:px-6 lg:px-8">

diff --git a/src/components/PluginCard.tsx b/src/components/PluginCard.tsx
@@ -20,18 +20,18 @@ export default function PluginCard({isFeatured, name, description, authors, down
  <StarIcon className='text-brand-400 h-6 w-6' />
  </div>
  </div> : null }
- <h2 className='mt-2 md:mt-7 text-gray-100 text-2xl font-semibold leading-7'>{name}</h2>
+ <a href={downloadUrl} target="_blank" rel="noopener noreferrer" className='mt-2 md:mt-7 text-gray-100 text-2xl font-semibold leading-7 hover:brightness-50'>{name}</a>
  {description ? <h3 className='mt-2 text-gray-300 text-md leading-6'>{description}</h3> : null }
  </div>
  {!error && (
  <div className='flex justify-between mt-2 mx-2'>
  <div className="flex flex-col">
- {authors && <p className='text-lg text-gray-50 font-semibold mb-1'>{authors}</p>}
- <p className='text-md text-zinc-400'>{downloadsCount} Downloads</p>
+ {authors ? <p className='text-lg text-gray-50 font-semibold mb-1'>{authors}</p> : <p>Unknown</p>}
+ {/* <p className='text-md text-zinc-400'>{downloadsCount} Downloads</p> */}
  </div>
- {/* <div className='cursor-pointer mt-1'>
+ <div className='cursor-pointer mt-1'>
  <Button type="pluginDownload" href={downloadUrl}>Download</Button>
- </div> */}
+ </div>
  </div>
  )}
  </div>

diff --git a/src/components/sections/Hero.tsx b/src/components/sections/Hero.tsx
@@ -4,7 +4,7 @@ import SectionHeading from '../SectionHeading';
 
 export default function Hero() {
  return (
- <div className="relative py-24 md:py-0 lg:h-screen w-full px-4 md:px-8 ">
+ <div className="relative py-24 md:py-0 lg:h-screen xl:h-full w-full px-4 md:px-8 ">
  <div className="relative flex flex-col max-w-7xl lg:py-48">
  <div className='mt-10 flex flex-col md:grid md:grid-cols-1 lg:grid-cols-2 justify-start items-start lg:mt-0'>
  <div className='flex flex-col gap-y-5'> 

diff --git a/src/components/sections/WhyBeAmbassador.tsx b/src/components/sections/WhyBeAmbassador.tsx
@@ -1,8 +1,7 @@
+"use client"
 
-// import { IconArrowUpRight } from "@tabler/icons-react"
-// import { useInView } from 'react-intersection-observer';
-// import { sentenceVariant, letterVariant, splitText } from "@/styles/animations";
-// import { motion, useAnimation } from 'framer-motion';
+import { useInView } from 'react-intersection-observer';
+import { motion, useAnimation } from 'framer-motion';
 import { ChatBubbleLeftRightIcon, StarIcon, FaceSmileIcon, HeartIcon, ArrowTrendingUpIcon, BoltIcon } from '@heroicons/react/24/outline';
 
 import { useEffect } from "react";
@@ -38,6 +37,9 @@ const cards = [
  icon: <ChatBubbleLeftRightIcon />,
  title: 'Advance your career',
  desc: 'and establish yourself as a leader in blockchain technology.',
+ },
+ {
+
  },
  {
  icon: <StarIcon />,
@@ -47,31 +49,31 @@ const cards = [
 ]
 
 export default function WhyBeAmbassador() {
-//  const controls = useAnimation();
+ const controls = useAnimation();
 
-//  const [ref, inView] = useInView();
+ const [ref, inView] = useInView();
 
-//  useEffect(() => {
-//  if (inView) {
-//  controls.start('visible');
-//  }
-//  }, [controls, inView]);
+ useEffect(() => {
+ if (inView) {
+ controls.start('visible');
+ }
+ }, [controls, inView]);
 
 
  return (
- <div  className="relative w-full md:min-h-[70vh]" id="beta-program">
+ <motion.div className="relative w-full md:min-h-[70vh]" id="beta-program">
  <div className="relative flex flex-col justify-center items-center py-14 lg:pt-32 px-8">
  <SectionHeading type="primary">Why be an ambassador</SectionHeading>
- <div className='grid md:grid-cols-2 gap-y-2 lg:grid-cols-3 py-8 gap-x-2 z-10 max-w-[85%] '>
+ <div className='grid md:grid-cols-2 gap-y-2 lg:grid-cols-3 py-8 gap-x-2 z-10 max-w-[85%] content-center '>
  {cards.map((card, index) => (
- <div key={index} className='transition-all py-4 flex flex-col justify-center items-center px-5'>
+ <motion.div initial="hidden" key={index} className='transition-all py-4 flex flex-col justify-center items-center px-5'>
  <div className='h-6 w-6 text-brand-400'>{card.icon}</div>
  <h2 className='mt-2 md:mt-7 text-center text-zinc-100 text-xl leading-6 max-w-[80%]'>{card.title}</h2>
  <h3 className='mt-1 md:mt-2 text-center text-zinc-500 text-lg leading-6 max-w-[80%]'>{card.desc}</h3>
- </div>
+ </motion.div>
  ))}
  </div>
  </div>
- </div>
+ </motion.div>
  )
 }
diff --git a/src/components/sections/YouCan.tsx b/src/components/sections/YouCan.tsx
@@ -2,11 +2,11 @@ import SectionHeading from "../SectionHeading"
 import TextWithCheckIcon from "../TextWithCheckIcon"
 
 const stats = [
- 'Deploy and interact with smart contracts as TS/JS objects.',
+ 'Deploy and interact with smart contracts as TS/JS objects',
  'Subscribe to specific on-chain or smart contract events',
  'Interact with the Ethereum Name Service (ENS)',
- 'Create and import accounts, sign data and transactions.',
- 'Get block and state information from Ethereum nodes.',
+ 'Create and import accounts, sign data and transactions',
+ 'Get block and state information from Ethereum nodes',
  'Have access to utilities with built-in helpers for Ethereum dApps and web3 packages',
  ]
 
@@ -21,7 +21,6 @@ const stats = [
  <dl className="mt-16 grid grid-cols-1 gap-0.5 overflow-hidden text-center sm:grid-cols-2 lg:grid-cols-3">
  {stats.map((stat, index) => (
  <div key={index} className="flex flex-col py-4 px-5">
- {/* <dt className="text-sm font-semibold leading-6 text-gray-300">{stat}</dt> */}
  <TextWithCheckIcon>{stat}</TextWithCheckIcon>
  </div>
  ))}

diff --git a/src/components/urls.ts b/src/components/urls.ts
@@ -1,6 +1,6 @@
 export const discordUrl = "https://discord.gg/yhHVtK5Wqt"
 export const docsUrl = "https://docs.web3js.org/"
 export const npmUrl = "https://www.npmjs.com/package/web3"
-export const blogUrl = "https://blog.chainsafe.io/tagged/web3js"
+export const blogUrl = "https://blog.chainsafe.io/web3js/"
 export const blogPostv4 = "https://blog.chainsafe.io/announcing-the-full-release-of-web3-js-v4-e9e26275a3dc";
 export const githubUrl = "https://github.com/web3/web3.js";