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";
Original file line number	Diff line number	Diff line change
		@@ -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"}