Skip to content

Commit c01cdad

Browse files
rbottomleyrbottomley
committed
Merge branch 'dev'
2 parents aa82c22 + fc84e3f commit c01cdad

11 files changed

Lines changed: 700 additions & 458 deletions

File tree

‎gatsby-config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -246,6 +246,13 @@ module.exports = {
246246
path: `${__dirname}/src/content/videos`,
247247
},
248248
},
249+
{
250+
resolve: `gatsby-source-filesystem`,
251+
options: {
252+
name: `hello-bar`,
253+
path: `${__dirname}/src/content/hello-bar`,
254+
},
255+
},
249256
{
250257
resolve: `gatsby-source-rss-feed`,
251258
options: {

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"@mdx-js/react": "^1.6.21",
2727
"@radix-ui/react-accordion": "^1.0.0",
2828
"@radix-ui/react-dropdown-menu": "0.0.19",
29+
"@radix-ui/react-id": "0.0.6",
2930
"@radix-ui/react-tabs": "^1.0.0",
3031
"@radix-ui/react-toggle": "^1.0.0",
3132
"@svgr/webpack": "^6.1.2",

‎src/components/header.js‎

Lines changed: 61 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { ReactComponent as Logo } from '../images/Logo-OSC.svg'
77
import { ReactComponent as LogoDark } from '../images/Logo-OSC-Reverse.svg'
88
import SocialMediaIcons from './social-media-icons'
99
import SearchBar from './searchbar'
10+
import HelloBar from './hello-bar'
1011

1112
export const Header = ({ siteTitle }) => {
1213
const [Open, setOpen] = useState(false)
@@ -43,70 +44,73 @@ export const Header = ({ siteTitle }) => {
4344
]
4445

4546
return (
46-
<header className="top-0 sticky z-50 flex flex-col w-full border-b border-base-300">
47-
<div className="w-full order-2 h-14 md:h-[4.5rem] bg-base-100 dark:bg-base-0">
48-
<nav className="w-full flex items-center justify-between h-full page-wrapper">
49-
<Link
50-
className="flex-shrink-0 rounded-sm ring-offset-4 ring-offset-base-0 hover:ring-base-500 focus:ring-primary-600 hover:ring-2 focus:outline-none focus:ring-2 h-8 md:h-9 lg:h-10"
51-
to="/"
52-
>
53-
<Logo className="dark:hidden" alt="" />
54-
<LogoDark className="hidden dark:block" alt="" />
55-
<span className="sr-only">{siteTitle}</span>
56-
</Link>
57-
<div className="flex space-x-3 md:space-x-3 lg:space-x-4 items-center">
58-
<span className="hidden ml-4 md:flex md:hidden">
59-
<SearchBar />
60-
</span>
47+
<>
48+
<HelloBar />
49+
<header className="top-0 sticky z-50 flex flex-col w-full border-b border-base-300">
50+
<div className="w-full order-2 h-14 md:h-[4.5rem] bg-base-100 dark:bg-base-0">
51+
<nav className="w-full flex items-center justify-between h-full page-wrapper">
52+
<Link
53+
className="flex-shrink-0 rounded-sm ring-offset-4 ring-offset-base-0 hover:ring-base-500 focus:ring-primary-600 hover:ring-2 focus:outline-none focus:ring-2 h-8 md:h-9 lg:h-10"
54+
to="/"
55+
>
56+
<Logo className="dark:hidden" alt="" />
57+
<LogoDark className="hidden dark:block" alt="" />
58+
<span className="sr-only">{siteTitle}</span>
59+
</Link>
60+
<div className="flex space-x-3 md:space-x-3 lg:space-x-4 items-center">
61+
<span className="hidden ml-4 md:flex md:hidden">
62+
<SearchBar />
63+
</span>
6164

62-
<ul className="hidden md:flex items-center md:space-x-3 lg:space-x-4">
63-
{MenuItems.map((item) => (
64-
<li className="flex" key={item.path}>
65-
<Link
66-
to={item.path}
67-
className="px-2 lg:px-3 py-2 border-2 border-base-400 rounded hover:border-base-500 focus:ring-2 focus:ring-primary-600 text-base lg:text-lg font-medium"
68-
activeClassName="border-secondary-500 bg-secondary-200 text-secondary-800 hover:border-secondary-500"
69-
partiallyActive={true}
70-
>
71-
{item.title}
72-
</Link>
73-
</li>
74-
))}
75-
</ul>
76-
77-
<div className="flex md:hidden space-x-3">
78-
<Dropdown>
65+
<ul className="hidden md:flex items-center md:space-x-3 lg:space-x-4">
7966
{MenuItems.map((item) => (
80-
<Menu.Item
81-
key={item.title}
82-
as={Link}
83-
to={item.path}
84-
style={{ 'outline-offset': '-1px' }}
85-
className="p-3 font-medium overflow-hidden text-left text-base-700 w-full hover:outline-none hover:bg-base-200 focus:ring-2 focus:ring-inset focus:ring-base-500"
86-
activeClassName="bg-secondary-100 hover:bg-secondary-100 text-secondary-700 dark:bg-secondary-200 dark:text-secondary-900"
87-
partiallyActive={true}
88-
>
89-
{item.title}
90-
</Menu.Item>
67+
<li className="flex" key={item.path}>
68+
<Link
69+
to={item.path}
70+
className="px-2 lg:px-3 py-2 border-2 border-base-400 rounded hover:border-base-500 focus:ring-2 focus:ring-primary-600 text-base lg:text-lg font-medium"
71+
activeClassName="border-secondary-500 bg-secondary-200 text-secondary-800 hover:border-secondary-500"
72+
partiallyActive={true}
73+
>
74+
{item.title}
75+
</Link>
76+
</li>
9177
))}
92-
</Dropdown>
93-
<div className="hidden">
94-
<Dropdown state={Open} overflow search onClick={onDropDownClick}>
95-
<SearchBar state={Open} onClick={onDropDownClick} />
78+
</ul>
79+
80+
<div className="flex md:hidden space-x-3">
81+
<Dropdown>
82+
{MenuItems.map((item) => (
83+
<Menu.Item
84+
key={item.title}
85+
as={Link}
86+
to={item.path}
87+
style={{ 'outline-offset': '-1px' }}
88+
className="p-3 font-medium overflow-hidden text-left text-base-700 w-full hover:outline-none hover:bg-base-200 focus:ring-2 focus:ring-inset focus:ring-base-500"
89+
activeClassName="bg-secondary-100 hover:bg-secondary-100 text-secondary-700 dark:bg-secondary-200 dark:text-secondary-900"
90+
partiallyActive={true}
91+
>
92+
{item.title}
93+
</Menu.Item>
94+
))}
9695
</Dropdown>
96+
<div className="hidden">
97+
<Dropdown state={Open} overflow search onClick={onDropDownClick}>
98+
<SearchBar state={Open} onClick={onDropDownClick} />
99+
</Dropdown>
100+
</div>
97101
</div>
98102
</div>
99-
</div>
100-
</nav>
101-
</div>
102-
<div className="bg-secondary-800 flex text-secondary-100 items-center dark:bg-secondary-200 dark:text-secondary-900 w-full h-10">
103-
<div className="flex w-full page-wrapper md:justify-center items-center">
104-
<SocialMediaIcons />
103+
</nav>
105104
</div>
106-
<div className="absolute flex items-center justify-center right-0 mr-1 md:mr-2">
107-
<ColorModeToggle />
105+
<div className="bg-secondary-800 flex text-secondary-100 items-center dark:bg-secondary-200 dark:text-secondary-900 w-full h-10">
106+
<div className="flex w-full page-wrapper md:justify-center items-center">
107+
<SocialMediaIcons />
108+
</div>
109+
<div className="absolute flex items-center justify-center right-0 mr-1 md:mr-2">
110+
<ColorModeToggle />
111+
</div>
108112
</div>
109-
</div>
110-
</header>
113+
</header>
114+
</>
111115
)
112116
}

‎src/components/hello-bar.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from 'react'
2+
import { StaticQuery, graphql } from 'gatsby'
3+
import WidowControl from './widow-control'
4+
import { DateTime } from 'luxon'
5+
import IconBox from './iconbox'
6+
import { ArrowRightCircle } from 'react-feather'
7+
8+
const now = DateTime.now()
9+
10+
const HelloBar = () => (
11+
<StaticQuery
12+
query={graphql`
13+
{
14+
helloBarYaml(display: { eq: true }) {
15+
background_color
16+
end_date
17+
link_text
18+
link_url
19+
title
20+
}
21+
}
22+
`}
23+
render={({ helloBarYaml }) => {
24+
const { background_color, end_date, link_text, link_url, title } = helloBarYaml
25+
26+
return (
27+
<>
28+
{helloBarYaml === null || DateTime.fromISO(end_date) < now ? (
29+
<></>
30+
) : (
31+
<div
32+
className={`p-2 flex gap-6 items-center justify-between md:justify-center bg-${background_color}-300`}
33+
>
34+
<span className={`text-${background_color}-800`}>
35+
<WidowControl text={title} />
36+
</span>
37+
<IconBox
38+
className="hidden md:block !px-2 !py-1 !font-normal text-center"
39+
title={link_text}
40+
url={link_url}
41+
/>
42+
<IconBox
43+
className="md:hidden"
44+
url={link_url}
45+
icon={<ArrowRightCircle alt="" />}
46+
titleText={link_text}
47+
/>
48+
</div>
49+
)}
50+
</>
51+
)
52+
}}
53+
/>
54+
)
55+
56+
export default HelloBar

‎src/components/iconbox.js‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
11
import React from 'react'
22

3-
const IconBox = ({ title, url, icon, flex, right, className }) => {
3+
const IconBox = ({ title, url, icon, titleText, flex, className = '', right, dark = false }) => {
44
return (
55
<a
6+
className={`${flex !== undefined ? 'flex justify-center' : 'inline-flex'} ${
7+
dark
8+
? 'bg-primary-700 text-primary-100 hover:bg-base-200 hover:text-base-800 focus:bg-base-200 focus:text-base-800'
9+
: 'bg-primary-100 text-primary-700 hover:bg-base-800 hover:text-base-100 focus:bg-base-800 focus:text-base-100'
10+
} flex-row gap-2 items-center rounded-md border-2 border-primary-400 px-2 md:px-4 py-2 text-base lg:text-lg font-bold hover:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500 ${className}`}
11+
href={url}
12+
title={titleText}
613
target={url?.indexOf('https://') === 0 ? '_blank' : '_self'}
7-
className={`${
8-
flex !== undefined ? 'flex justify-center' : 'inline-flex'
9-
} bg-base-100 dark:bg-base-0 flex-row space-x-2 items-center rounded-md border-2 border-base-400 px-2 md:px-4 py-2 text-base lg:text-lg font-bold hover:text-dark dark:hover:text-white hover:border-base-500 hover:bg-base-200 dark:hover:bg-base-200 focus:outline-none focus:ring-2 focus:ring-primary-600 ${className}`}
1014
rel="noopener noreferrer"
11-
href={url}
1215
>
1316
{icon && !right && (
1417
<span aria-hidden="true" className="h-6 w-6 mr-1">
1518
{icon}
1619
</span>
1720
)}
18-
<span>{title}</span>
21+
{title && <span>{title}</span>}
1922
{icon && right && (
2023
<span aria-hidden="true" className="h-6 w-6 ml-1">
2124
{icon}

‎src/components/social-media-icons.js‎

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,6 @@
11
import React from 'react'
2-
import {
3-
Facebook,
4-
GitHub,
5-
Rss,
6-
Slack,
7-
Twitch,
8-
Twitter,
9-
Youtube,
10-
} from 'react-feather'
2+
import { Facebook, GitHub, Linkedin, Rss, Slack, Twitch, Twitter, Youtube } from 'react-feather'
3+
import { ReactComponent as Mastodon } from '../images/mastodon.svg'
114
import { useStaticQuery, graphql } from 'gatsby'
125

136
const SocialMediaIcons = () => {
@@ -32,36 +25,42 @@ const SocialMediaIcons = () => {
3225

3326
const selectedPlatform = (platform) => {
3427
switch (platform) {
35-
case 'slack':
36-
return <Slack alt="Slack" className={iconClass} />
28+
case 'facebook':
29+
return <Facebook alt="Facebook" className={iconClass} />
3730

3831
case 'github':
3932
return <GitHub alt="GitHub" className={iconClass} />
4033

34+
case 'linkedin':
35+
return <Linkedin alt="LinkedIn" className={iconClass} />
36+
37+
case 'mastodon':
38+
return <Mastodon alt="Mastodon" className={iconClass} />
39+
4140
case 'rss':
4241
return <Rss alt="RSS" className={iconClass} />
4342

43+
case 'slack':
44+
return <Slack alt="Slack" className={iconClass} />
45+
46+
case 'twitch':
47+
return <Twitch alt="Twitch" className={iconClass} />
48+
4449
case 'twitter':
4550
return <Twitter alt="Twitter" className={iconClass} />
4651

4752
case 'youtube':
4853
return <Youtube alt="YouTube" className={iconClass} />
4954

50-
case 'twitch':
51-
return <Twitch alt="Twitch" className={iconClass} />
52-
53-
case 'facebook':
54-
return <Facebook alt="Facebook" className={iconClass} />
55-
5655
default:
57-
alert('Add missing icon:', platform)
56+
console.error(`Unknown platform (${platform}) in SocialMediaIcons`)
5857
}
5958
}
6059

6160
return (
6261
<a
63-
className="flex items-center rounded hover:bg-base-800 dark:hover:bg-primary-400 focus:outline-none focus:ring-2 focus:ring-base-800 dark:focus:ring-base-500 justify-center"
64-
target="_blank"
62+
className="flex items-center justify-center rounded hover:bg-base-900 dark:hover:bg-primary-400 focus:outline-none focus:ring-2 focus:ring-base-400 dark:focus:ring-primary-700"
63+
target={url.indexOf('https://') === 0 ? '_blank' : '_self'}
6564
rel="noopener noreferrer"
6665
href={url}
6766
title={title}
@@ -71,7 +70,7 @@ const SocialMediaIcons = () => {
7170
)
7271
}
7372
return (
74-
<ul className="flex space-x-4 md:space-x-6 lg:justify-center">
73+
<ul className="flex flex-wrap space-x-4 md:space-x-6 lg:justify-center">
7574
{site.siteMetadata.socialMedia.map((socialSite) => (
7675
<li key={socialSite.platform}>
7776
<SocialMediaIcon

‎src/components/widow-control.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
22

33
const WidowControl = ({ text }) => {
4-
return <>{text.replace(/ ([^ ]{1,10})$/, '&nbsp;$1')}</>
4+
return <>{text.replace(/ ([^ ]{1,10})$/, '\u00A0$1')}</>
55
}
66

77
export default WidowControl

‎src/content/hello-bar/hello-bar.yml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
display: false
2+
title: Some important event is coming up!
3+
end_date: 2022-12-31T8:00:00-08:00
4+
background_color: base
5+
link_text: Register now
6+
link_url: /gatherings/

‎src/images/mastodon.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/layouts/index.js‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import ReactDOMServer from 'react-dom/server'
44
import { graphql, useStaticQuery } from 'gatsby'
55
import { Header } from '../components/header'
66
import { Footer } from '../components/footer'
7+
import { IdProvider } from '@radix-ui/react-id'
78
import CopyCodeButton from '../components/copycodebutton'
89
import he from 'he'
910

@@ -75,18 +76,20 @@ export default function Layout({ children }) {
7576
`)
7677

7778
return (
78-
<div className="font-body text-base-700 flex flex-col min-h-full">
79-
<div id="top" tabIndex="-1"></div>
80-
<a className="light skip-to-content" href="#main">
81-
skip to main content
82-
</a>
83-
<Header siteTitle={data.site.siteMetadata.title || `Title`} />
84-
<MDXProvider components={components}>
85-
<main id="main" className="w-full mx-auto mb-auto h-full">
86-
{children}
87-
</main>
88-
</MDXProvider>
89-
<Footer siteTitle={data.site.siteMetadata.title || `Title`} />
90-
</div>
79+
<IdProvider>
80+
<div className="font-body text-base-700 flex flex-col min-h-full">
81+
<div id="top" tabIndex="-1"></div>
82+
<a className="light skip-to-content" href="#main">
83+
skip to main content
84+
</a>
85+
<Header siteTitle={data.site.siteMetadata.title || `Title`} />
86+
<MDXProvider components={components}>
87+
<main id="main" className="w-full mx-auto mb-auto h-full">
88+
{children}
89+
</main>
90+
</MDXProvider>
91+
<Footer siteTitle={data.site.siteMetadata.title || `Title`} />
92+
</div>
93+
</IdProvider>
9194
)
9295
}

0 commit comments

Comments
 (0)