From 02c17166d7d41e23efbd09ed2dc4a14d8442d059 Mon Sep 17 00:00:00 2001 From: Agustina Chaer Date: Sun, 25 Sep 2022 14:15:50 +0000 Subject: [PATCH 1/3] git pod stuff --- .gitpod.yml | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 .gitpod.yml diff --git a/.gitpod.yml b/.gitpod.yml new file mode 100644 index 0000000..a7ddbe6 --- /dev/null +++ b/.gitpod.yml @@ -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 + + From c00779c361b016389747ce35b9721c0ee7ff7ce9 Mon Sep 17 00:00:00 2001 From: Agustina Chaer Date: Sun, 25 Sep 2022 14:16:34 +0000 Subject: [PATCH 2/3] Set h1 inside header through context --- App.js | 59 ++++++++++++++++-------------- components/header.js | 9 +++-- components/main-heading-context.js | 37 +++++++++++++++++++ index.html | 1 - 4 files changed, 74 insertions(+), 32 deletions(-) create mode 100644 components/main-heading-context.js diff --git a/App.js b/App.js index c85ff1d..8cf430e 100644 --- a/App.js +++ b/App.js @@ -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 <> -
-
- - - - - - - - - - - - - - - - - - -
-
) } diff --git a/components/main-heading-context.js b/components/main-heading-context.js new file mode 100644 index 0000000..09ff856 --- /dev/null +++ b/components/main-heading-context.js @@ -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 + + {children} + + ); +}; + +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} \ No newline at end of file diff --git a/index.html b/index.html index 32be847..ceb8763 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,6 @@ CampSpots -
From e04e88f50af9e8f6f35dc3db07c55fcaf212be1d Mon Sep 17 00:00:00 2001 From: Agustina Chaer Date: Sun, 25 Sep 2022 14:17:02 +0000 Subject: [PATCH 3/3] Set main heading using useMainHeading hook --- components/page-adventures-hikes.js | 34 +++--- components/page-careers.js | 6 +- components/page-events.js | 106 +++++++++--------- components/page-home.js | 5 +- components/page-passes.js | 6 +- components/page-submit-listing.js | 5 +- components/page-trip-ideas.js | 27 ++--- .../page-listing-detail.js | 91 ++++++++------- exercise1-headings-landmarks/page-listings.js | 6 +- exercise2-what-is-aria/page-listing-detail.js | 91 ++++++++------- .../page-listing-detail.js | 90 ++++++++------- exercise3-accessible-names/page-listings.js | 6 +- .../page-listing-detail.js | 91 ++++++++------- 13 files changed, 274 insertions(+), 290 deletions(-) diff --git a/components/page-adventures-hikes.js b/components/page-adventures-hikes.js index f5851ae..9483610 100644 --- a/components/page-adventures-hikes.js +++ b/components/page-adventures-hikes.js @@ -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": "", @@ -28,24 +31,19 @@ const HikesPage = () => { }] return ( - <> - -

CampSpots

- -
-
-
-

Adventure Ideas: Hikes

-
-
-
-
-

Inspiration Gallery

- -
-
-
- +
+
+
+

Adventure Ideas: Hikes

+
+
+
+
+

Inspiration Gallery

+ +
+
+
) } diff --git a/components/page-careers.js b/components/page-careers.js index 88ae394..892774d 100644 --- a/components/page-careers.js +++ b/components/page-careers.js @@ -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) @@ -25,9 +28,6 @@ const CareersPage = () => { return ( <> - -

CampSpots

-

Work With Us

diff --git a/components/page-events.js b/components/page-events.js index 34f9592..be02ef7 100644 --- a/components/page-events.js +++ b/components/page-events.js @@ -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 ( - <> - -

CampSpots

- -
-
-
- -
-
-

Events

-
-
-
-
-
-

Looking for fun stuff to do? Join a community event!

- - - - - - - - - - - -
-
    -
  • Summer Meltdown Festival 2022 - July 28-31, Sky Meadows Park - Darrington, WA
    • -
  • YurtFest 2022 - August 5-7 - Deming, WA
    • -
  • Lopez Island Bikepacking Adventure - Ongoing - Lopez Island, WA
    • -
  • Mountain Loop Backpacking - September, dependent on conditions - Granite Falls, WA
    • -
  • Mountain bike skills workshops - All summer long - Bellingham, WA
    • -
-
-
-

Summer must-haves

-
    -
  • Camp towel
    • -
  • Backpacker water filter
    • -
  • Hip-pack
    • -
  • Sunscreen
    • -
  • Pizza slice pool float
    • -
  • Twinkle lights
    • -
+
+
+
+ +
+
+

Events

+
+
+
+
+
+

Looking for fun stuff to do? Join a community event!

+ + + + + + + + + + +
-
-
- +
    +
  • Summer Meltdown Festival 2022 - July 28-31, Sky Meadows Park - Darrington, WA
    • +
  • YurtFest 2022 - August 5-7 - Deming, WA
    • +
  • Lopez Island Bikepacking Adventure - Ongoing - Lopez Island, WA
    • +
  • Mountain Loop Backpacking - September, dependent on conditions - Granite Falls, WA
    • +
  • Mountain bike skills workshops - All summer long - Bellingham, WA
    • +
+
+
+

Summer must-haves

+
    +
  • Camp towel
    • +
  • Backpacker water filter
    • +
  • Hip-pack
    • +
  • Sunscreen
    • +
  • Pizza slice pool float
    • +
  • Twinkle lights
    • +
+
+
+
) } diff --git a/components/page-home.js b/components/page-home.js index c1b1a60..7c4aa00 100644 --- a/components/page-home.js +++ b/components/page-home.js @@ -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 ( <> - -

Camp Spots

-
diff --git a/components/page-passes.js b/components/page-passes.js index d317926..292f0b3 100644 --- a/components/page-passes.js +++ b/components/page-passes.js @@ -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) @@ -30,9 +33,6 @@ const PassesPage = () => { return ( <> - -

CampSpots

-
diff --git a/components/page-submit-listing.js b/components/page-submit-listing.js index ffb6123..193cbc7 100644 --- a/components/page-submit-listing.js +++ b/components/page-submit-listing.js @@ -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 ( <> - -

CampSpots

-
diff --git a/components/page-trip-ideas.js b/components/page-trip-ideas.js index 5487e29..87fa6a2 100644 --- a/components/page-trip-ideas.js +++ b/components/page-trip-ideas.js @@ -3,25 +3,22 @@ import BodyClassName from "react-body-classname" import {Helmet} from "react-helmet" import HeaderPortal from "components/header-portal" +import { useMainHeading } from "./main-heading-context" const TripIdeasPage = () => { + useMainHeading('Trip Ideas') return ( - <> - -

CampSpots

- -
-
-
-

Trip Ideas

-
-
-
- -
-
- +
+
+
+

Trip Ideas

+
+
+
+ +
+
) } diff --git a/exercise1-headings-landmarks/page-listing-detail.js b/exercise1-headings-landmarks/page-listing-detail.js index fbd225e..d678a27 100644 --- a/exercise1-headings-landmarks/page-listing-detail.js +++ b/exercise1-headings-landmarks/page-listing-detail.js @@ -12,59 +12,58 @@ import ListingsData from "data/listings.json" import DatePicker from "components/date-picker/date-picker" import * as imageURLs from "../images/listings/*.{png,jpg}" +import { useMainHeading } from "../components/main-heading-context" const Exercise1ListingPage = props => { const data = ListingsData.listings[props.id] const headerImageUrl = LoadedImageUrl(imageURLs, data.detailHeaderImageSrc) + + useMainHeading(data.listingName) + return ( - <> - -

Camp Spots

- -
-
-
-

{data.listingName}

-

{data.location}

-
-
-
-
-

Description

-
+
+
+
+

{data.listingName}

+

{data.location}

+
+
+
+
+

Description

+
-

Amenities

-
    - {data.amenities.map((amenity, index) => { - return
  • - -
    • - })} -
-
-
-

Calendar

- -
-
-
-
- {data.detailImages.map((image, index) => { - let detailImageUrl = LoadedImageUrl(imageURLs, image.imageSrc) - return {image.imageAlt} - })} -
-
-
- +

Amenities

+
    + {data.amenities.map((amenity, index) => { + return
  • + +
    • + })} +
+
+
+

Calendar

+ +
+
+
+
+ {data.detailImages.map((image, index) => { + let detailImageUrl = LoadedImageUrl(imageURLs, image.imageSrc) + return {image.imageAlt} + })} +
+
+
) } diff --git a/exercise1-headings-landmarks/page-listings.js b/exercise1-headings-landmarks/page-listings.js index d5faf12..b610f26 100644 --- a/exercise1-headings-landmarks/page-listings.js +++ b/exercise1-headings-landmarks/page-listings.js @@ -11,14 +11,14 @@ import ListingExcerpt from "./listing-excerpt" import DropdownList from "components/dropdown-list" import * as imageURLs from "../images/listings/*.{png,jpg}" +import { useMainHeading } from "../components/main-heading-context" const Exercise1ListingsPage = () => { + useMainHeading('Listings') + return ( <> - -

Camp Spots

-

Listings

diff --git a/exercise2-what-is-aria/page-listing-detail.js b/exercise2-what-is-aria/page-listing-detail.js index e5a7e85..d8a80f8 100644 --- a/exercise2-what-is-aria/page-listing-detail.js +++ b/exercise2-what-is-aria/page-listing-detail.js @@ -12,59 +12,58 @@ import ListingsData from "data/listings.json" import DatePicker from "./date-picker" import * as imageURLs from "../images/listings/*.{png,jpg}" +import { useMainHeading } from "../components/main-heading-context" const Exercise2ARIAListingPage = props => { const data = ListingsData.listings[props.id] const headerImageUrl = LoadedImageUrl(imageURLs, data.detailHeaderImageSrc) + + useMainHeading(data.listingName) + return ( - <> - -

Camp Spots

- -
-
-
-

{data.listingName}

-

{data.location}

-
-
-
-
-

Description

-
+
+
+
+

{data.listingName}

+

{data.location}

+
+
+
+
+

Description

+
-

Amenities

-
    - {data.amenities.map((amenity, index) => { - return
  • - -
    • - })} -
-
-
-

Calendar

- -
-
-
-
- {data.detailImages.map((image, index) => { - let detailImageUrl = LoadedImageUrl(imageURLs, image.imageSrc) - return {image.imageAlt} - })} -
-
-
- +

Amenities

+
    + {data.amenities.map((amenity, index) => { + return
  • + +
    • + })} +
+
+
+

Calendar

+ +
+
+
+
+ {data.detailImages.map((image, index) => { + let detailImageUrl = LoadedImageUrl(imageURLs, image.imageSrc) + return {image.imageAlt} + })} +
+
+
) } diff --git a/exercise3-accessible-names/page-listing-detail.js b/exercise3-accessible-names/page-listing-detail.js index 8b9e8ca..dc17768 100644 --- a/exercise3-accessible-names/page-listing-detail.js +++ b/exercise3-accessible-names/page-listing-detail.js @@ -12,59 +12,57 @@ import ListingsData from "data/listings.json" import DatePicker from "./date-picker" import * as imageURLs from "../images/listings/*.{png,jpg}" +import { useMainHeading } from "../components/main-heading-context" const Exercise3NamesListingPage = props => { const data = ListingsData.listings[props.id] const headerImageUrl = LoadedImageUrl(imageURLs, data.detailHeaderImageSrc) + + useMainHeading(data.listingName) return ( - <> - -

Camp Spots

- -
-
-
-

{data.listingName}

-

{data.location}

-
-
-
-
-

Description

-
+
+
+
+

{data.listingName}

+

{data.location}

+
+
+
+
+

Description

+
-

Amenities

-
    - {data.amenities.map((amenity, index) => { - return
  • - -
    • - })} -
-
-
-

Calendar

- -
-
-
-
- {data.detailImages.map((image, index) => { - let detailImageUrl = LoadedImageUrl(imageURLs, image.imageSrc) - return {image.imageAlt} - })} -
-
-
- +

Amenities

+
    + {data.amenities.map((amenity, index) => { + return
  • + +
    • + })} +
+
+
+

Calendar

+ +
+
+
+
+ {data.detailImages.map((image, index) => { + let detailImageUrl = LoadedImageUrl(imageURLs, image.imageSrc) + return {image.imageAlt} + })} +
+
+
) } diff --git a/exercise3-accessible-names/page-listings.js b/exercise3-accessible-names/page-listings.js index 7354206..8c22565 100644 --- a/exercise3-accessible-names/page-listings.js +++ b/exercise3-accessible-names/page-listings.js @@ -11,14 +11,14 @@ import ListingExcerpt from "./listing-excerpt" import DropdownList from "components/dropdown-list" import * as imageURLs from "../images/listings/*.{png,jpg}" +import { useMainHeading } from "../components/main-heading-context" const Exercise3NamesListingsPage = () => { + useMainHeading('Listings') + return ( <> - -

Camp Spots

-

Listings

diff --git a/exercise4-programmatic-a11y-info/page-listing-detail.js b/exercise4-programmatic-a11y-info/page-listing-detail.js index fb12523..2ee58d5 100644 --- a/exercise4-programmatic-a11y-info/page-listing-detail.js +++ b/exercise4-programmatic-a11y-info/page-listing-detail.js @@ -12,59 +12,58 @@ import ListingsData from "data/listings.json" import DatePicker from "./date-picker" import * as imageURLs from "../images/listings/*.{png,jpg}" +import { useMainHeading } from "../components/main-heading-context" const Exercise4A11yInfoListingPage = props => { const data = ListingsData.listings[props.id] const headerImageUrl = LoadedImageUrl(imageURLs, data.detailHeaderImageSrc) + + useMainHeading(data.listingName) + return ( - <> - -

Camp Spots

- -
-
-
-

{data.listingName}

-

{data.location}

-
-
-
-
-

Description

-
+
+
+
+

{data.listingName}

+

{data.location}

+
+
+
+
+

Description

+
-

Amenities

-
    - {data.amenities.map((amenity, index) => { - return
  • - -
    • - })} -
-
-
-

Calendar

- -
-
-
-
- {data.detailImages.map((image, index) => { - let detailImageUrl = LoadedImageUrl(imageURLs, image.imageSrc) - return {image.imageAlt} - })} -
-
-
- +

Amenities

+
    + {data.amenities.map((amenity, index) => { + return
  • + +
    • + })} +
+
+
+

Calendar

+ +
+
+
+
+ {data.detailImages.map((image, index) => { + let detailImageUrl = LoadedImageUrl(imageURLs, image.imageSrc) + return {image.imageAlt} + })} +
+
+
) }