Skip to content

Commit

Permalink
Merge branch 'main' into dependabot/npm_and_yarn/json5-1.0.2
Browse files Browse the repository at this point in the history
  • Loading branch information
@willscott
willscott authored Jul 11, 2024
2 parents 294ae21 + 0b16c51 commit da3d092
Show file tree
Hide file tree
Showing 12 changed files with 968 additions and 751 deletions.
85 changes: 42 additions & 43 deletions components/Footer.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,45 @@
import React from "react";
import { Col, Row } from "react-bootstrap";
import FooterBg from "../svgs/FooterBg.js";
import Image from 'next/image'

function Footer(props) {
const pagePos = props.pagePos;

return (
<footer>
<div className="container">
<Row>
<Col xs={12} xl={5}>
<h4>CID Contact</h4>
<h4>CID Contact</h4>
<div className="footerContainer">
<div>
<h5>
We are committed to deliver the best content discovery and routing
infastructure for IPFS & Filecoin.
</h5>
<div className="contactInfo">
<p>
For any questions, find us at Filecoin Slack Channel{" "}
<a
href="https://filecoinproject.slack.com/archives/C02T827T9N0"
target="_blank"
rel="noreferrer"
>
#storetheindex.
</a>
</p>
<p>
For latest project status, visit our public{" "}
<a
href="https://www.notion.so/pl-strflt/Weekly-Status-Report-30699cbe5a99473ea98b4ea4f9a3619b"
target="_blank"
rel="noreferrer"
>
Notion workspace.
</a>
</p>
</div>
</div>
<div>
<nav>
<ul>
<li>
Expand Down Expand Up @@ -61,58 +90,28 @@ function Footer(props) {
</li>
</ul>
</nav>
</Col>
<Col
xs={8}
lg={7}
xxl={6}
className="offset-xxl-1 ps-xxl-0 pe-4 pe-sm-0"
>
<h5>
We are committed to deliver the best content discovery and routing
infastructure for IPFS & Filecoin.
</h5>

<p>
For any questions, find us at Filecoin Slack Channel{" "}
<a
href="https://filecoinproject.slack.com/archives/C02T827T9N0"
target="_blank"
rel="noreferrer"
>
#storetheindex.
</a>
</p>
<p>
For latest project status, visit our public{" "}
<a
href="https://www.notion.so/pl-strflt/Weekly-Status-Report-30699cbe5a99473ea98b4ea4f9a3619b"
target="_blank"
rel="noreferrer"
>
Notion workspace
</a>
</p>
</Col>
<Col xs={4} lg={5} xl={12} className="d-flex d-lg-block align-items-end justify-content-end mb-3">
<div className="logoWrapper">
<a href="https://ipfs.io/" target="_blank" rel="noreferrer">
<img
<Image
className="logo ipfs"
src="images/IPFS-logo.svg"
src="/images/IPFS-logo.svg"
alt="IPFS Logo"
height={30}
width={30}
/>
</a>
<a href="https://filecoin.io/" target="_blank" rel="noreferrer">
<img
<Image
className="logo"
src="images/filecoin-logo.svg"
src="/images/filecoin-logo.svg"
alt="Filecoin Logo"
height={30}
width={30}
/>
</a>
</div>
</Col>
</Row>
</div>
</div>
</div>
<FooterBg />
</footer>
Expand Down
136 changes: 50 additions & 86 deletions components/Header.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import React, { useEffect, useState } from "react";
import React, { useEffect, useState, useRef } from "react";
import Image from "next/image";
import Link from "next/link";

import {
disableBodyScroll,
Expand All @@ -8,9 +10,13 @@ import {

function Header(props) {
const scrolled = props.scrolled;

const pagePos = props.pagePos;

const burgerWrapperRef = useRef()
const dropdownButtonRef = useRef()
const lastItemRef = useRef()

// On Window Resize Store the Windows Width
const [width, setWidth] = useState(0);
const handleResize = () => setWidth(window.innerWidth);
Expand Down Expand Up @@ -44,7 +50,25 @@ function Header(props) {
function toggleMenu() {
// var viewportWidth =
// window.innerWidth || document.documentElement.clientWidth;
const burgerWrapper = document.querySelector(".mainMenu.device");


const burgerWrapper = burgerWrapperRef.current

burgerWrapper.addEventListener("keydown", e => {
if (e.key === 'Tab') {
if (e.shiftKey) {
if (document.activeElement === dropdownButtonRef.current) {
lastItemRef.current.focus();
e.preventDefault();
}
} else {
if (document.activeElement === lastItemRef.current) {
dropdownButtonRef.current.focus();
e.preventDefault();
}
}
}
});

// if (viewportWidth <= 991) {
if (burgerWrapper.classList.contains("menuActive")) {
Expand Down Expand Up @@ -75,36 +99,35 @@ function Header(props) {
>
<div className="container">
<div className="leftWrapper">
<h1>CID Contact</h1>
<Link href="/">
<a aria-label="CID Contact">
CID Contact
</a>
</Link>
</div>
<div className="centerWrapper">
<a href="https://ipfs.io/" target="_blank" rel="noreferrer">
<img
<Image
className="logo ipfs"
src="images/IPFS-logo.svg"
src="/images/IPFS-logo.svg"
alt="IPFS Logo"
height={36}
width={36}
/>
</a>
<a href="https://filecoin.io/" target="_blank" rel="noreferrer">
<img
<Image
className="logo"
src="images/filecoin-logo.svg"
src="/images/filecoin-logo.svg"
alt="Filecoin Logo"
height={36}
width={36}
/>
</a>
</div>
<div className="rightWrapper">
<nav className="mainMenu desktop">
<ul>
<li>
<a
href="#"
className={pagePos == "home" ? "active" : undefined}
onClick={(e) => props.handelScrollTo(e, "home")}
>
Home
</a>
</li>
<li>
<a
href="#"
Expand Down Expand Up @@ -137,80 +160,20 @@ function Header(props) {

<button className="noStyle navbar-toggle" onClick={toggleMenu}>
<span className="visually-hidden">Toggle Navigation</span>
<span className="icon-bar">
<svg
xmlns="http://www.w3.org/2000/svg"
x="0"
y="0"
viewBox="0 0 16 2.3"
>
<path d="M0 1.1C0 .8.1.5.3.3s.5-.3.8-.3h13.7c.3 0 .6.1.8.3.3.2.4.5.4.8 0 .3-.1.6-.3.8-.2.2-.5.3-.8.3H1.1c-.3.1-.6 0-.8-.2-.2-.3-.3-.6-.3-.9z"></path>
</svg>
</span>
<span className="icon-bar">
<svg
xmlns="http://www.w3.org/2000/svg"
x="0"
y="0"
viewBox="0 0 16 2.3"
>
<path d="M0 1.1C0 .8.1.5.3.3s.5-.3.8-.3h13.7c.3 0 .6.1.8.3.3.2.4.5.4.8 0 .3-.1.6-.3.8-.2.2-.5.3-.8.3H1.1c-.3.1-.6 0-.8-.2-.2-.3-.3-.6-.3-.9z"></path>
</svg>
</span>
<span className="icon-bar">
<svg
xmlns="http://www.w3.org/2000/svg"
x="0"
y="0"
viewBox="0 0 16 2.3"
>
<path d="M0 1.1C0 .8.1.5.3.3s.5-.3.8-.3h13.7c.3 0 .6.1.8.3.3.2.4.5.4.8 0 .3-.1.6-.3.8-.2.2-.5.3-.8.3H1.1c-.3.1-.6 0-.8-.2-.2-.3-.3-.6-.3-.9z"></path>
</svg>
</span>
<div className="hamburger"></div>
</button>
</div>
</div>
</header>
<nav className="mainMenu device">
<button className="noStyle navbar-toggle menuActive" onClick={toggleMenu}>
<span className="visually-hidden">Toggle Navigation</span>
<span className="icon-bar">
<svg
xmlns="http://www.w3.org/2000/svg"
x="0"
y="0"
viewBox="0 0 16 2.3"
>
<path d="M0 1.1C0 .8.1.5.3.3s.5-.3.8-.3h13.7c.3 0 .6.1.8.3.3.2.4.5.4.8 0 .3-.1.6-.3.8-.2.2-.5.3-.8.3H1.1c-.3.1-.6 0-.8-.2-.2-.3-.3-.6-.3-.9z"></path>
</svg>
</span>
<span className="icon-bar">
<svg
xmlns="http://www.w3.org/2000/svg"
x="0"
y="0"
viewBox="0 0 16 2.3"
>
<path d="M0 1.1C0 .8.1.5.3.3s.5-.3.8-.3h13.7c.3 0 .6.1.8.3.3.2.4.5.4.8 0 .3-.1.6-.3.8-.2.2-.5.3-.8.3H1.1c-.3.1-.6 0-.8-.2-.2-.3-.3-.6-.3-.9z"></path>
</svg>
</span>
<span className="icon-bar">
<svg
xmlns="http://www.w3.org/2000/svg"
x="0"
y="0"
viewBox="0 0 16 2.3"
>
<path d="M0 1.1C0 .8.1.5.3.3s.5-.3.8-.3h13.7c.3 0 .6.1.8.3.3.2.4.5.4.8 0 .3-.1.6-.3.8-.2.2-.5.3-.8.3H1.1c-.3.1-.6 0-.8-.2-.2-.3-.3-.6-.3-.9z"></path>
</svg>
</span>
</button>
<nav ref={burgerWrapperRef} className="mainMenu device">
<button
ref={dropdownButtonRef}
aria-label="Dropdown menu"
tabIndex="0"
className="noStyle navbar-toggle menuActive"
onClick={toggleMenu}
></button>
<ul>
<li>
<a href="#" onClick={(e) => props.handelCloseScrollTo(e, "home")}>
Home
</a>
</li>
<li>
<a href="#" onClick={(e) => props.handelCloseScrollTo(e, "about")}>
About
Expand All @@ -227,6 +190,7 @@ function Header(props) {
</li>
<li>
<a
ref={lastItemRef}
href="https://status.cid.contact/"
target="_blank"
rel="noreferrer"
Expand Down
28 changes: 28 additions & 0 deletions hooks/usePrefersReducedMotion.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { useState, useEffect } from "react";

const QUERY = "(prefers-reduced-motion: no-preference)";

export default function usePrefersReducedMotion() {
// Default to prefers animations, since we don't know what the
// user's preference is on the server.
const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
useEffect(() => {
const mediaQueryList = window.matchMedia(QUERY);

// Set the true initial value, now that we're on the client:
setPrefersReducedMotion(!window.matchMedia(QUERY).matches);

// Register our event listener
const listener = (event) => {
setPrefersReducedMotion(!event.matches);
};

mediaQueryList.addEventListener("change", listener);

return () => {
mediaQueryList.removeEventListener("change", listener);
};
}, []);

return prefersReducedMotion;
}
4 changes: 4 additions & 0 deletions next.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@ const nextConfig = {
reactStrictMode: true,
swcMinify: true,
assetPrefix: './',
images: {
loader: 'akamai',
path: '',
},
}

module.exports = nextConfig
Loading

0 comments on commit da3d092

Please sign in to comment.