Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

"Semantic Markup with HTML and ARIA" workshop - Main heading refactor idea with context #1

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

"Semantic Markup with HTML and ARIA" workshop - Main heading refactor idea with context #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
02c1716
git pod stuff
aguscha333 Sep 25, 2022
c00779c
Set h1 inside header through context
aguscha333 Sep 25, 2022
e04e88f
Set main heading using useMainHeading hook
aguscha333 Sep 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions .gitpod.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
# This configuration file was automatically generated by Gitpod.
# Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file)
# and commit this file to your remote git repository to share the goodness with others.

tasks:
- init: yarn install && yarn run build
command: yarn run start


59 changes: 31 additions & 28 deletions App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,36 +21,39 @@ import Exercise3NamesListingsPage from "./exercise3-accessible-names/page-listin
import Exercise4A11yInfoListingPage from "./exercise4-programmatic-a11y-info/page-listing-detail"

import imgFooterLogo from "images/icons/footer-logo.svg"
import { MainHeadingContextProvider } from "./components/main-heading-context"

export function App() {
return <>
<Header />
<div id="main">
<Router>
<HomePage path="/" />
<AboutPage path="/about" />
<CareersPage path="/careers" />
<ListingsPage path="/listings" />
<Listing path="/listing/:id" />
<SubmitListingPage path="/submit-listing" />
<EventsPage path="/events" />
<PassesPage path="/passes" />
<HikesPage path="/adventures-hikes" />
<TripIdeasPage path="/trip-ideas" />
<Exercise1ListingsPage path="/exercise1/listings" />
<Exercise1ListingPage path="/exercise1/:id" />
<Exercise2ARIAListingPage path="/exercise2/:id" />
<Exercise3NamesListingPage path="/exercise3/:id" />
<Exercise3NamesListingsPage path="/exercise3/listings" />
<Exercise4A11yInfoListingPage path="/exercise4/:id" />
</Router>
</div>
<div id="footer">
<div className="layout">
<div id="footer-logo">
<img src={imgFooterLogo} alt="CampSpots" />
return (
<MainHeadingContextProvider>
<Header />
<div id="main">
<Router>
<HomePage path="/" />
<AboutPage path="/about" />
<CareersPage path="/careers" />
<ListingsPage path="/listings" />
<Listing path="/listing/:id" />
<SubmitListingPage path="/submit-listing" />
<EventsPage path="/events" />
<PassesPage path="/passes" />
<HikesPage path="/adventures-hikes" />
<TripIdeasPage path="/trip-ideas" />
<Exercise1ListingsPage path="/exercise1/listings" />
<Exercise1ListingPage path="/exercise1/:id" />
<Exercise2ARIAListingPage path="/exercise2/:id" />
<Exercise3NamesListingPage path="/exercise3/:id" />
<Exercise3NamesListingsPage path="/exercise3/listings" />
<Exercise4A11yInfoListingPage path="/exercise4/:id" />
</Router>
</div>
<div id="footer">
<div className="layout">
<div id="footer-logo">
<img src={imgFooterLogo} alt="CampSpots" />
</div>
</div>
</div>
</div>
</>
</MainHeadingContextProvider>
)
}
9 changes: 6 additions & 3 deletions components/header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
import React from "react"
import React, { useContext } from "react"
import "./styles/header.scss"

import CampSpotsLogo from "images/icons/camp-spots-logo.svg"
import MegaNav from "./meganav/"
import { MainHeadingContext } from "./main-heading-context"

const Header = () => {
const {mainHeading} = useContext(MainHeadingContext);
return (
<div id="header">
<header id="header">
<h1 className="visually-hidden">{mainHeading}</h1>
<div id="header-nav">
<div id="header-logo">
<a href="/" className="header-main-item">
Expand All @@ -21,7 +24,7 @@ const Header = () => {
<a href="#">Login</a>
</div>
</div>
</div>
</header>
)
}

Expand Down
37 changes: 37 additions & 0 deletions components/main-heading-context.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import React, { createContext, useContext, useEffect, useMemo, useState } from "react";

const DEFAULT_MAIN_HEADING = 'CampSpots'

// create context
const MainHeadingContext = createContext({ mainHeading: DEFAULT_MAIN_HEADING, setMainHeading: () => {} });

const MainHeadingContextProvider = ({ children }) => {
// the value that will be given to the context
const [mainHeading, setMainHeading] = useState(DEFAULT_MAIN_HEADING);

const context = useMemo(() => ({
mainHeading,
setMainHeading
}), [mainHeading, setMainHeading])

return (
// the Provider gives access to the context to its children
<MainHeadingContext.Provider value={context}>
{children}
</MainHeadingContext.Provider>
);
};

const useMainHeading = (mainHeading = '') => {
const {setMainHeading} = useContext(MainHeadingContext);

useEffect(() => {
const newMainHeading = `${DEFAULT_MAIN_HEADING}${mainHeading ? ' - ': ''}${mainHeading}`
setMainHeading(newMainHeading)

return () => setMainHeading(DEFAULT_MAIN_HEADING)
}, [mainHeading])

}

export {MainHeadingContext, MainHeadingContextProvider, useMainHeading}
34 changes: 16 additions & 18 deletions components/page-adventures-hikes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,11 @@ import Slideshow from "components/slideshow/slideshow"

import "components/styles/page-adventure-ideas.scss"
import * as imageURLs from "../images/adventure-ideas/hikes/*.{png,jpg}"
import { useMainHeading } from "./main-heading-context"

const HikesPage = () => {
useMainHeading('CampSpots - Adventure Ideas: Hikes')

const images = [{
"src": "img1.jpg",
"alt": "",
Expand All @@ -28,24 +31,19 @@ const HikesPage = () => {
}]
return (
<BodyClassName className="header-overlap page-adventure-ideas">
<>
<HeaderPortal>
<h1 className="visually-hidden">CampSpots</h1>
</HeaderPortal>
<section aria-labelledby="heading-1">
<header className="page-header">
<div className="page-header-content layout">
<h2 className="primary-heading h1-style" id="heading-1">Adventure Ideas: Hikes</h2>
</div>
</header>
<article className="layout">
<div className="inspiration-slideshow">
<h3>Inspiration Gallery</h3>
<Slideshow images={images} imageURLs={imageURLs} />
</div>
</article>
</section>
</>
<section aria-labelledby="heading-1">
<header className="page-header">
<div className="page-header-content layout">
<h2 className="primary-heading h1-style" id="heading-1">Adventure Ideas: Hikes</h2>
</div>
</header>
<article className="layout">
<div className="inspiration-slideshow">
<h3>Inspiration Gallery</h3>
<Slideshow images={images} imageURLs={imageURLs} />
</div>
</article>
</section>
</BodyClassName>
)
}
Expand Down
6 changes: 3 additions & 3 deletions components/page-careers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,11 @@ import {Helmet} from "react-helmet"

import HeaderPortal from "components/header-portal"
import "components/styles/page-careers.scss"
import { useMainHeading } from "./main-heading-context"

const CareersPage = () => {
useMainHeading('Work with Us')

const closeBtnRef = useRef(null)
const customAmtRadio = useRef(null)

Expand All @@ -25,9 +28,6 @@ const CareersPage = () => {
return (
<BodyClassName className="header-overlap page-careers">
<>
<HeaderPortal>
<h1 className="visually-hidden">CampSpots</h1>
</HeaderPortal>
<header className="page-header">
<div className="page-header-content layout">
<h2 className="primary-heading h1-style">Work With Us</h2>
Expand Down
106 changes: 51 additions & 55 deletions components/page-events.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,66 +5,62 @@ import {Helmet} from "react-helmet"
import HeaderPortal from "components/header-portal"
import "components/styles/page-events.scss"
import video from "images/camping-reel.mp4"
import { useMainHeading } from "./main-heading-context"

const EventsPage = () => {

// useMainHeading('Events')
return (
<BodyClassName className="header-overlap page-events">
<>
<HeaderPortal>
<h1 className="visually-hidden">CampSpots</h1>
</HeaderPortal>
<section>
<header className="page-header">
<div className="header-video">
<video autoPlay muted loop>
<source src={video} />
Sorry, your browser doesn't support this video.
</video>
</div>
<div className="page-header-content layout">
<h2 className="primary-heading h1-style">Events</h2>
</div>
</header>
<article className="wide-layout two-parts-70-30">
<div>
<div className="headline-flex">
<h2>Looking for fun stuff to do? Join a community event!</h2>
<svg version="1.1" x="0px" y="0px" viewBox="0 0 32 32">
<path className="one" d="M16,26c1.1,0,2,0.9,2,2v2c0,1.1-0.9,2-2,2s-2-0.9-2-2v-2C14,26.9,14.9,26,16,26z" />
<path className="one" d="M16,6c-1.1,0-2-0.9-2-2V2c0-1.1,0.9-2,2-2s2,0.9,2,2v2C18,5.1,17.1,6,16,6z" />
<path className="one" d="M30,14c1.1,0,2,0.9,2,2s-0.9,2-2,2h-2c-1.1,0-2-0.9-2-2s0.9-2,2-2H30z" />
<path className="one" d="M6,16 c0,1.1-0.9,2-2,2H2c-1.1,0-2-0.9-2-2s0.9-2,2-2h2C5.1,14,6,14.9,6,16z" />
<path className="two" d="M25.9,23.1l1.4,1.4c0.8,0.8,0.8,2,0,2.8s-2,0.8-2.8,0l-1.4-1.4c-0.8-0.8-0.8-2,0-2.8S25.1,22.3,25.9,23.1z" />
<path className="two" d=" M6.1,8.9L4.7,7.5c-0.8-0.8-0.8-2,0-2.8s2-0.8,2.8,0l1.4,1.4c0.8,0.8,0.8,2,0,2.8S6.9,9.7,6.1,8.9z" />
<path className="two" d="M25.9,8.9c-0.8,0.8-2,0.8-2.8,0s-0.8-2,0-2.8l1.4-1.4c0.8-0.8,2-0.8,2.8,0s0.8,2,0,2.8L25.9,8.9z" />
<path className="two" d="M6.1,23.1c0.8-0.8,2-0.8,2.8,0s0.8,2,0,2.8l-1.4,1.4c-0.8,0.8-2,0.8-2.8,0s-0.8-2,0-2.8C4.7,24.5,6.1,23.1,6.1,23.1z" />
<path className="middle" d="M16,8c-4.4,0-8,3.6-8,8s3.6,8,8,8s8-3.6,8-8S20.4,8,16,8z M16,21c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5
S18.8,21,16,21z" />
</svg>
</div>
<ul className="event-list">
<li><a href="https://summermeltdown.com/">Summer Meltdown Festival 2022</a> - July 28-31, Sky Meadows Park - Darrington, WA</li>
<li>YurtFest 2022 - August 5-7 - Deming, WA</li>
<li>Lopez Island Bikepacking Adventure - Ongoing - Lopez Island, WA</li>
<li>Mountain Loop Backpacking - September, dependent on conditions - Granite Falls, WA</li>
<li>Mountain bike skills workshops - All summer long - Bellingham, WA</li>
</ul>
</div>
<div className="aside">
<h3>Summer must-haves</h3>
<ul className="event-list">
<li>Camp towel</li>
<li>Backpacker water filter</li>
<li>Hip-pack</li>
<li>Sunscreen</li>
<li>Pizza slice pool float</li>
<li>Twinkle lights</li>
</ul>
<section>
<header className="page-header">
<div className="header-video">
<video autoPlay muted loop>
<source src={video} />
Sorry, your browser doesn't support this video.
</video>
</div>
<div className="page-header-content layout">
<h2 className="primary-heading h1-style">Events</h2>
</div>
</header>
<article className="wide-layout two-parts-70-30">
<div>
<div className="headline-flex">
<h2>Looking for fun stuff to do? Join a community event!</h2>
<svg version="1.1" x="0px" y="0px" viewBox="0 0 32 32">
<path className="one" d="M16,26c1.1,0,2,0.9,2,2v2c0,1.1-0.9,2-2,2s-2-0.9-2-2v-2C14,26.9,14.9,26,16,26z" />
<path className="one" d="M16,6c-1.1,0-2-0.9-2-2V2c0-1.1,0.9-2,2-2s2,0.9,2,2v2C18,5.1,17.1,6,16,6z" />
<path className="one" d="M30,14c1.1,0,2,0.9,2,2s-0.9,2-2,2h-2c-1.1,0-2-0.9-2-2s0.9-2,2-2H30z" />
<path className="one" d="M6,16 c0,1.1-0.9,2-2,2H2c-1.1,0-2-0.9-2-2s0.9-2,2-2h2C5.1,14,6,14.9,6,16z" />
<path className="two" d="M25.9,23.1l1.4,1.4c0.8,0.8,0.8,2,0,2.8s-2,0.8-2.8,0l-1.4-1.4c-0.8-0.8-0.8-2,0-2.8S25.1,22.3,25.9,23.1z" />
<path className="two" d=" M6.1,8.9L4.7,7.5c-0.8-0.8-0.8-2,0-2.8s2-0.8,2.8,0l1.4,1.4c0.8,0.8,0.8,2,0,2.8S6.9,9.7,6.1,8.9z" />
<path className="two" d="M25.9,8.9c-0.8,0.8-2,0.8-2.8,0s-0.8-2,0-2.8l1.4-1.4c0.8-0.8,2-0.8,2.8,0s0.8,2,0,2.8L25.9,8.9z" />
<path className="two" d="M6.1,23.1c0.8-0.8,2-0.8,2.8,0s0.8,2,0,2.8l-1.4,1.4c-0.8,0.8-2,0.8-2.8,0s-0.8-2,0-2.8C4.7,24.5,6.1,23.1,6.1,23.1z" />
<path className="middle" d="M16,8c-4.4,0-8,3.6-8,8s3.6,8,8,8s8-3.6,8-8S20.4,8,16,8z M16,21c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5
S18.8,21,16,21z" />
</svg>
</div>
</article>
</section>
</>
<ul className="event-list">
<li><a href="https://summermeltdown.com/">Summer Meltdown Festival 2022</a> - July 28-31, Sky Meadows Park - Darrington, WA</li>
<li>YurtFest 2022 - August 5-7 - Deming, WA</li>
<li>Lopez Island Bikepacking Adventure - Ongoing - Lopez Island, WA</li>
<li>Mountain Loop Backpacking - September, dependent on conditions - Granite Falls, WA</li>
<li>Mountain bike skills workshops - All summer long - Bellingham, WA</li>
</ul>
</div>
<div className="aside">
<h3>Summer must-haves</h3>
<ul className="event-list">
<li>Camp towel</li>
<li>Backpacker water filter</li>
<li>Hip-pack</li>
<li>Sunscreen</li>
<li>Pizza slice pool float</li>
<li>Twinkle lights</li>
</ul>
</div>
</article>
</section>
</BodyClassName>
)
}
Expand Down
5 changes: 2 additions & 3 deletions components/page-home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,13 @@ import imgTents from "images/tents.jpg"
import iconTag from "images/icons/icon-treetag.svg"
import iconBackpack from "images/icons/icon-backpack.svg"
import iconKayak from "images/icons/icon-kayak.svg"
import { useMainHeading } from "./main-heading-context"

const HomePage = () => {
useMainHeading('Homepage')
return (
<BodyClassName className="page-home">
<>
<HeaderPortal>
<h1 className="visually-hidden">Camp Spots</h1>
</HeaderPortal>
<SearchForm />
<section aria-label="Site information">
<div className="wide-layout two-part-overlap">
Expand Down
6 changes: 3 additions & 3 deletions components/page-passes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,11 @@ import iconProPlan from "images/icons/icon-proplan.svg"
import iconCreditCard from "images/icons/icon-credit-card.svg"
import iconPayPal from "images/icons/paypal-inactive-dark.svg"
import iconCreditCardTypes from "images/icons/credit-card-icons.png"
import { useMainHeading } from "./main-heading-context"

const PassesPage = () => {
useMainHeading('Classes')

const closeBtnRef = useRef(null)
const customAmtRadio = useRef(null)

Expand All @@ -30,9 +33,6 @@ const PassesPage = () => {
return (
<BodyClassName className="page-plans">
<>
<HeaderPortal>
<h1 className="visually-hidden">CampSpots</h1>
</HeaderPortal>
<section className="layout-centered">
<header className="page-header">
<div className="page-header-content layout">
Expand Down
5 changes: 2 additions & 3 deletions components/page-submit-listing.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,13 @@ import {Helmet} from "react-helmet"
import HeaderPortal from "components/header-portal"

import "components/styles/page-submit-listing.scss"
import { useMainHeading } from "./main-heading-context"

const SubmitListingPage = () => {
useMainHeading('Submit your spot')
return (
<BodyClassName className="header-overlap page-submit-listing">
<>
<HeaderPortal>
<h1 className="visually-hidden">CampSpots</h1>
</HeaderPortal>
<section aria-labelledby="heading-1">
<header className="page-header">
<div className="page-header-content layout">
Expand Down
Loading