Skip to content

Commit

Permalink
show banner to Floating UI website
Browse files Browse the repository at this point in the history
  • Loading branch information
FezVrasta committed May 26, 2023
1 parent fef83f7 commit cb021aa
Show file tree
Hide file tree
Showing 4 changed files with 90 additions and 12 deletions.
12 changes: 9 additions & 3 deletions src/components/Header.js
Original file line number Diff line number Diff line change
Expand Up @@ -113,8 +113,8 @@ const iconCss = css`
margin-right: 5px;
`;

const Header = () => (
<HeaderStyled>
const Header = ({ className }) => (
<HeaderStyled className={className}>
<picture>
<source
srcset={popperLogoOutlined}
Expand All @@ -124,7 +124,13 @@ const Header = () => (
srcset={popperLogo}
media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
/>
<Logo src={popperLogo} alt="Popper logo" draggable="false" width="200" height="200" />
<Logo
src={popperLogo}
alt="Popper logo"
draggable="false"
width="200"
height="200"
/>
</picture>

<Slogan>
Expand Down
10 changes: 9 additions & 1 deletion src/components/Landing.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ import 'modern-normalize';
import '@openfonts/luckiest-guy_latin';
import './layout.css';
import './prism-base2tone-pool-dark.css';
import { FloatingUIBanner } from './Layout';

import popcornBox from '../images/popcorn-box.svg';
import { css } from '@emotion/react';
Expand Down Expand Up @@ -664,10 +665,17 @@ const Layout = ({ children }) => {
return (
<MDXProvider components={components}>
<SEO title="Home" />
<Header siteTitle={data.site.siteMetadata.title} />
<FloatingUIBanner />
<Header
siteTitle={data.site.siteMetadata.title}
css={css`
margin-top: 4rem;
`}
/>
<InstallBar />
<CarbonAds
css={css`
margin-top: 4rem;
${media.lg} {
position: absolute;
top: 0;
Expand Down
78 changes: 71 additions & 7 deletions src/components/Layout.js
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ const NavButtonDirection = styled.span`

const components = {
'x-ad': CarbonAds,
a: props => (
a: (props) => (
// eslint-disable-next-line
<a {...props} onClick={anchorScroll}>
{props.children}
Expand Down Expand Up @@ -175,16 +175,75 @@ function anchorScroll(event) {
} catch (e) {}
}

const flatten = routes =>
const flatten = (routes) =>
routes.reduce(
(acc, cur) => acc.concat(cur).concat(flatten(cur.children)),
[]
);

export const FloatingUIBanner = () => (
<a
css={css`
all: unset;
box-sizing: border-box;
&:hover,
&:active,
&:focus {
border: none;
}
cursor: pointer;
position: fixed;
top: 0;
right: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 4rem;
background: #1f2028;
color: rgb(221, 214, 254);
border: none;
text-align: center;
font-size: 16px;
font-weight: bold;
text-decoration: none;
&:after {
content: '';
position: absolute;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
border-radius: 20px;
filter: blur(5px);
z-index: -1;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-image: radial-gradient(
circle,
rgba(51, 43, 61, 1) 4%,
rgba(54, 45, 74, 1) 13%,
rgba(65, 53, 120, 1) 40%,
rgba(110, 66, 122, 1) 55%,
rgba(119, 69, 122, 1) 71%,
rgba(32, 33, 40, 1) 100%
);
}
`}
href="https://floating-ui.com"
rel="noopener noreferrer"
target="_blank"
>
The future of Popper is here! Floating UI is now available. Get it now!
</a>
);

const EditPage = ({ path }) => (
<MdxRoutes>
{routes => {
const route = routes.find(route => route.slug === path);
{(routes) => {
const route = routes.find((route) => route.slug === path);

return (
route && (
Expand Down Expand Up @@ -213,7 +272,7 @@ const Layout = ({ children, location, pageResources, ...props }) => {
const validRoutes = flatten(createTree(processRoutes(routes, path)));

const currentPathIndex = validRoutes.findIndex(
route => route.slug === path
(route) => route.slug === path
);

return {
Expand Down Expand Up @@ -362,7 +421,12 @@ const Layout = ({ children, location, pageResources, ...props }) => {
}
`}
/>
<div>
<FloatingUIBanner />
<div
css={css`
margin-top: 4rem;
`}
>
{pageResources && (
<SEO
title={
Expand All @@ -378,7 +442,7 @@ const Layout = ({ children, location, pageResources, ...props }) => {
<EditPage path={path} />
</Container>
<MdxRoutes>
{routes => {
{(routes) => {
const { prev, next } = getPrevNextRoutes(routes);
return (
<NavButtonWrapper>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Navigation.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const NAVIGATION_WIDTH = 260;
const Container = styled.div`
background: #c83b50;
position: fixed;
top: 0;
top: 4rem;
height: 100%;
width: ${NAVIGATION_WIDTH}px;
transform: translateX(-${NAVIGATION_WIDTH}px);
Expand Down

0 comments on commit cb021aa

Please sign in to comment.