mirror of
https://github.com/vercel/commerce.git
synced 2025-05-18 23:46:58 +00:00
preview bar
This commit is contained in:
Joel Varty
parent
4929032e5f
commit
00922a8c7d
15
components/agility-common/LoadingWidget.js
Normal file
15
components/agility-common/LoadingWidget.js
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import { CgSpinner } from "react-icons/cg";
|
||||||
|
|
||||||
|
const Widget = ({ message }) => {
|
||||||
|
return (
|
||||||
|
<section
|
||||||
|
id="loading-widget"
|
||||||
|
className="flex flex-col items-center justify-center h-screen"
|
||||||
|
>
|
||||||
|
<CgSpinner className="animate-spin text-2xl mb-2" />
|
||||||
|
<p>{message}</p>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Widget;
|
||||||
155
components/agility-common/PreviewBar.js
Normal file
155
components/agility-common/PreviewBar.js
Normal file
@ -0,0 +1,155 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import {
|
||||||
|
FaInfoCircle,
|
||||||
|
FaGithub,
|
||||||
|
FaChevronDown,
|
||||||
|
FaChevronUp,
|
||||||
|
} from "react-icons/fa";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This is a preview bar that is enabled by default to handle viewing content in preview & live mode, remove this for production use.
|
||||||
|
**/
|
||||||
|
|
||||||
|
const PreviewBar = ({ isPreview, isDevelopmentMode }) => {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
|
||||||
|
// handle view function to determine preview / live mode
|
||||||
|
const handleView = () => {
|
||||||
|
if (isDevelopmentMode) {
|
||||||
|
alert("You are currently in Development Mode, Live Mode is unavailable.");
|
||||||
|
} else {
|
||||||
|
if (!isDevelopmentMode && !isPreview) {
|
||||||
|
const xhr = new XMLHttpRequest();
|
||||||
|
|
||||||
|
xhr.onload = function () {
|
||||||
|
// Process our return data
|
||||||
|
if (xhr.status >= 200 && xhr.status < 300) {
|
||||||
|
// What do when the request is successful
|
||||||
|
const previewKey = xhr.responseText;
|
||||||
|
|
||||||
|
window.location.replace(
|
||||||
|
`${window.location.pathname}?agilitypreviewkey=${escape(
|
||||||
|
previewKey
|
||||||
|
)}`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// Create and send a GET request
|
||||||
|
xhr.open("GET", "/api/generatePreviewKey");
|
||||||
|
xhr.send();
|
||||||
|
} else {
|
||||||
|
const exit = confirm("Would you like to exit Preview Mode?");
|
||||||
|
if (exit === true) {
|
||||||
|
window.location.href = `/api/exitPreview?slug=${window.location.pathname}`;
|
||||||
|
} else return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-agility relative px-8 text-gray-200">
|
||||||
|
<div className="flex justify-between items-center max-w-screen-xl mx-auto">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<span className="p-2 rounded-lg mr-4">
|
||||||
|
<a
|
||||||
|
href="https://www.agilitycms.com"
|
||||||
|
target="_blank"
|
||||||
|
title="Agility CMS"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="https://static.agilitycms.com/brand/agility-triangle-yellow.svg"
|
||||||
|
alt="Agility CMS"
|
||||||
|
className="w-5 h-5 block md:hidden"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
src="/assets/agility-preview-logo.svg"
|
||||||
|
alt="Agility CMS"
|
||||||
|
className="h-5 w-20 hidden md:block"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
<div className="mr-4">
|
||||||
|
<a
|
||||||
|
href="https://help.agilitycms.com/hc/en-us"
|
||||||
|
target="_blank"
|
||||||
|
title="Help Center"
|
||||||
|
>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<FaInfoCircle className="text-2xl mr-2" />
|
||||||
|
<p className="hidden md:block text-sm">Help Center</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a
|
||||||
|
href="https://github.com/agility/agilitycms-nextjs-starter"
|
||||||
|
target="_blank"
|
||||||
|
title="View on GitHub"
|
||||||
|
className="text-2xl"
|
||||||
|
>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<FaGithub className="mr-2" />
|
||||||
|
<p className="hidden md:block text-sm">View on GitHub</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={`relative flex items-center ${
|
||||||
|
open ? `bg-white ` : `bg-agility`
|
||||||
|
} py-4`}
|
||||||
|
>
|
||||||
|
{isPreview ? (
|
||||||
|
<p
|
||||||
|
className={`hidden md:block text-sm px-2 ${
|
||||||
|
open ? `text-agility` : `text-gray-200`
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Previewing <span className="font-bold">Latest</span> Changes
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<p
|
||||||
|
className={`hidden md:block text-sm px-2 ${
|
||||||
|
open ? `text-agility` : `text-gray-200`
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Viewing <span className="font-bold">Published</span> Content
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
<div
|
||||||
|
className="p-2 text-gray-200 rounded-lg cursor-pointer z-50"
|
||||||
|
onClick={() => setOpen(!open)}
|
||||||
|
>
|
||||||
|
{open ? (
|
||||||
|
<FaChevronUp className="text-agility" />
|
||||||
|
) : (
|
||||||
|
<FaChevronDown className="text-gray-200" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="absolute bg-white text-white text-sm py-4 px-4 -right-0 -bottom-28 md:-bottom-16 z-50 rounded-b-lg shadow-xl md:max-w-full"
|
||||||
|
style={{ display: open ? "block" : "none", width: "15.1rem" }}
|
||||||
|
>
|
||||||
|
{isPreview ? (
|
||||||
|
<p className="mb-4 text-center md:hidden text-agility z-20">
|
||||||
|
Previewing <span className="font-bold">Latest</span> Changes
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<p className="mb-4 text-center md:hidden text-agility z-20">
|
||||||
|
Viewing <span className="font-bold">Published</span> Content
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
className="text-gray-200 bg-agility p-2 w-full rounded-md text-sm"
|
||||||
|
onClick={() => handleView()}
|
||||||
|
>
|
||||||
|
{`View ${isPreview ? `Live` : `Preview`} Mode`}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PreviewBar;
|
||||||
@ -13,122 +13,138 @@ import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
|
|||||||
import { Sidebar, Button, Modal, LoadingDots } from '@components/ui'
|
import { Sidebar, Button, Modal, LoadingDots } from '@components/ui'
|
||||||
import PaymentMethodView from '@components/checkout/PaymentMethodView'
|
import PaymentMethodView from '@components/checkout/PaymentMethodView'
|
||||||
import CheckoutSidebarView from '@components/checkout/CheckoutSidebarView'
|
import CheckoutSidebarView from '@components/checkout/CheckoutSidebarView'
|
||||||
|
import { handlePreview } from "@agility/nextjs";
|
||||||
|
|
||||||
import LoginView from '@components/auth/LoginView'
|
import LoginView from '@components/auth/LoginView'
|
||||||
import s from './Layout.module.css'
|
import s from './Layout.module.css'
|
||||||
|
import LoadingWidget from '@components/agility-common/LoadingWidget'
|
||||||
|
import PreviewBar from '@components/agility-common/PreviewBar'
|
||||||
|
|
||||||
const Loading = () => (
|
const Loading = () => (
|
||||||
<div className="w-80 h-80 flex items-center text-center justify-center p-3">
|
<div className="w-80 h-80 flex items-center text-center justify-center p-3">
|
||||||
<LoadingDots />
|
<LoadingDots />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
||||||
const dynamicProps = {
|
const dynamicProps = {
|
||||||
loading: () => <Loading />,
|
loading: () => <Loading />,
|
||||||
}
|
}
|
||||||
|
|
||||||
const SignUpView = dynamic(
|
const SignUpView = dynamic(
|
||||||
() => import('@components/auth/SignUpView'),
|
() => import('@components/auth/SignUpView'),
|
||||||
dynamicProps
|
dynamicProps
|
||||||
)
|
)
|
||||||
|
|
||||||
const ForgotPassword = dynamic(
|
const ForgotPassword = dynamic(
|
||||||
() => import('@components/auth/ForgotPassword'),
|
() => import('@components/auth/ForgotPassword'),
|
||||||
dynamicProps
|
dynamicProps
|
||||||
)
|
)
|
||||||
|
|
||||||
const FeatureBar = dynamic(
|
const FeatureBar = dynamic(
|
||||||
() => import('@components/common/FeatureBar'),
|
() => import('@components/common/FeatureBar'),
|
||||||
dynamicProps
|
dynamicProps
|
||||||
)
|
)
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
pageProps: {
|
pageProps: {
|
||||||
pages?: Page[]
|
pages?: Page[]
|
||||||
categories: Category[],
|
categories: Category[],
|
||||||
agilityProps: any
|
agilityProps: any
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const ModalView: FC<{ modalView: string; closeModal(): any }> = ({
|
const ModalView: FC<{ modalView: string; closeModal(): any }> = ({
|
||||||
modalView,
|
modalView,
|
||||||
closeModal,
|
closeModal,
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<Modal onClose={closeModal}>
|
<Modal onClose={closeModal}>
|
||||||
{modalView === 'LOGIN_VIEW' && <LoginView />}
|
{modalView === 'LOGIN_VIEW' && <LoginView />}
|
||||||
{modalView === 'SIGNUP_VIEW' && <SignUpView />}
|
{modalView === 'SIGNUP_VIEW' && <SignUpView />}
|
||||||
{modalView === 'FORGOT_VIEW' && <ForgotPassword />}
|
{modalView === 'FORGOT_VIEW' && <ForgotPassword />}
|
||||||
</Modal>
|
</Modal>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const ModalUI: FC = () => {
|
const ModalUI: FC = () => {
|
||||||
const { displayModal, closeModal, modalView } = useUI()
|
const { displayModal, closeModal, modalView } = useUI()
|
||||||
return displayModal ? (
|
return displayModal ? (
|
||||||
<ModalView modalView={modalView} closeModal={closeModal} />
|
<ModalView modalView={modalView} closeModal={closeModal} />
|
||||||
) : null
|
) : null
|
||||||
}
|
}
|
||||||
|
|
||||||
const SidebarView: FC<{ sidebarView: string; closeSidebar(): any }> = ({
|
const SidebarView: FC<{ sidebarView: string; closeSidebar(): any }> = ({
|
||||||
sidebarView,
|
sidebarView,
|
||||||
closeSidebar,
|
closeSidebar,
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<Sidebar onClose={closeSidebar}>
|
<Sidebar onClose={closeSidebar}>
|
||||||
{sidebarView === 'CART_VIEW' && <CartSidebarView />}
|
{sidebarView === 'CART_VIEW' && <CartSidebarView />}
|
||||||
{sidebarView === 'CHECKOUT_VIEW' && <CheckoutSidebarView />}
|
{sidebarView === 'CHECKOUT_VIEW' && <CheckoutSidebarView />}
|
||||||
{sidebarView === 'PAYMENT_VIEW' && <PaymentMethodView />}
|
{sidebarView === 'PAYMENT_VIEW' && <PaymentMethodView />}
|
||||||
{sidebarView === 'SHIPPING_VIEW' && <ShippingView />}
|
{sidebarView === 'SHIPPING_VIEW' && <ShippingView />}
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const SidebarUI: FC = () => {
|
const SidebarUI: FC = () => {
|
||||||
const { displaySidebar, closeSidebar, sidebarView } = useUI()
|
const { displaySidebar, closeSidebar, sidebarView } = useUI()
|
||||||
return displaySidebar ? (
|
return displaySidebar ? (
|
||||||
<SidebarView sidebarView={sidebarView} closeSidebar={closeSidebar} />
|
<SidebarView sidebarView={sidebarView} closeSidebar={closeSidebar} />
|
||||||
) : null
|
) : null
|
||||||
}
|
}
|
||||||
|
|
||||||
const Layout: FC<Props> = (props) => {
|
const Layout: FC<Props> = (props) => {
|
||||||
|
|
||||||
|
// set up handle preview
|
||||||
|
const isPreviewLoading = handlePreview();
|
||||||
|
|
||||||
const {
|
const {
|
||||||
children,
|
children,
|
||||||
pageProps: { agilityProps, ...pageProps },
|
pageProps: { agilityProps, ...pageProps },
|
||||||
} = props
|
} = props
|
||||||
|
|
||||||
|
|
||||||
const { acceptedCookies, onAcceptCookies } = useAcceptCookies()
|
const { acceptedCookies, onAcceptCookies } = useAcceptCookies()
|
||||||
const { locale = 'en-US' } = useRouter()
|
const { locale = 'en-US' } = useRouter()
|
||||||
|
|
||||||
const categories = agilityProps?.globalData?.sitedata?.categoryLinks || []
|
const categories = agilityProps?.globalData?.sitedata?.categoryLinks || []
|
||||||
|
|
||||||
const navBarlinks = categories.slice(0, 2).map((c:any) => ({
|
const navBarlinks = categories.slice(0, 2).map((c: any) => ({
|
||||||
label: c.name,
|
label: c.name,
|
||||||
href: `/search/${c.slug}`,
|
href: `/search/${c.slug}`,
|
||||||
}))
|
}))
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<CommerceProvider locale={locale}>
|
<CommerceProvider locale={locale}>
|
||||||
<div className={cn(s.root)}>
|
|
||||||
<Navbar links={navBarlinks} agilityProps={agilityProps}/>
|
<div className={cn(s.root)}>
|
||||||
<main className="fit">{children}</main>
|
|
||||||
<Footer pages={pageProps.pages} agilityProps={agilityProps} />
|
{isPreviewLoading &&
|
||||||
<ModalUI />
|
<LoadingWidget message="Loading Preview Mode" />
|
||||||
<SidebarUI />
|
}
|
||||||
<FeatureBar
|
{!isPreviewLoading &&
|
||||||
title="This site uses cookies to improve your experience. By clicking, you agree to our Privacy Policy."
|
<>
|
||||||
hide={acceptedCookies}
|
<PreviewBar isDevelopmentMode={agilityProps.isDevelopmentMode} isPreview={agilityProps.isPreview}/>
|
||||||
action={
|
<Navbar links={navBarlinks} agilityProps={agilityProps} />
|
||||||
<Button className="mx-5" onClick={() => onAcceptCookies()}>
|
<main className="fit">{children}</main>
|
||||||
Accept cookies
|
<Footer pages={pageProps.pages} agilityProps={agilityProps} />
|
||||||
</Button>
|
<ModalUI />
|
||||||
}
|
<SidebarUI />
|
||||||
/>
|
<FeatureBar
|
||||||
</div>
|
title="This site uses cookies to improve your experience. By clicking, you agree to our Privacy Policy."
|
||||||
</CommerceProvider>
|
hide={acceptedCookies}
|
||||||
)
|
action={
|
||||||
|
<Button className="mx-5" onClick={() => onAcceptCookies()}>
|
||||||
|
Accept cookies
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</CommerceProvider>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Layout
|
export default Layout
|
||||||
|
|||||||
@ -53,6 +53,7 @@
|
|||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
"react-dom": "^17.0.2",
|
"react-dom": "^17.0.2",
|
||||||
"react-fast-marquee": "^1.1.3",
|
"react-fast-marquee": "^1.1.3",
|
||||||
|
"react-icons": "^4.2.0",
|
||||||
"react-merge-refs": "^1.1.0",
|
"react-merge-refs": "^1.1.0",
|
||||||
"react-use-measure": "^2.0.4",
|
"react-use-measure": "^2.0.4",
|
||||||
"shopify-buy": "^2.11.0",
|
"shopify-buy": "^2.11.0",
|
||||||
|
|||||||
9
pages/api/exitPreview.js
Normal file
9
pages/api/exitPreview.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
export default async (req, res) => {
|
||||||
|
// Clears the preview mode cookies.
|
||||||
|
// This function accepts no arguments.
|
||||||
|
res.clearPreviewData()
|
||||||
|
|
||||||
|
// Redirect to the slug
|
||||||
|
res.writeHead(307, { Location: req.query.slug })
|
||||||
|
res.end()
|
||||||
|
}
|
||||||
12
pages/api/generatePreviewKey.js
Normal file
12
pages/api/generatePreviewKey.js
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import { generatePreviewKey } from "@agility/nextjs/node"
|
||||||
|
|
||||||
|
export default async (req, res) => {
|
||||||
|
|
||||||
|
//TODO: Only generate the preview link if you are already in Preview!
|
||||||
|
//how can I check if i'm in preview mode already?
|
||||||
|
|
||||||
|
const previewKey = generatePreviewKey();
|
||||||
|
|
||||||
|
//Return a valid preview key
|
||||||
|
res.end(previewKey)
|
||||||
|
}
|
||||||
35
pages/api/preview.js
Normal file
35
pages/api/preview.js
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
import { validatePreview, getDynamicPageURL } from '@agility/nextjs/node'
|
||||||
|
|
||||||
|
// A simple example for testing it manually from your browser.
|
||||||
|
// If this is located at pages/api/preview.js, then
|
||||||
|
// open /api/preview from your browser.
|
||||||
|
export default async (req, res) => {
|
||||||
|
|
||||||
|
//validate our preview key, also validate the requested page to preview exists
|
||||||
|
const validationResp = await validatePreview({
|
||||||
|
agilityPreviewKey: req.query.agilitypreviewkey,
|
||||||
|
slug: req.query.slug
|
||||||
|
});
|
||||||
|
|
||||||
|
if (validationResp.error) {
|
||||||
|
return res.status(401).end(`${validationResp.message}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
let previewUrl = req.query.slug;
|
||||||
|
|
||||||
|
//TODO: these kinds of dynamic links should work by default (even outside of preview)
|
||||||
|
if(req.query.ContentID) {
|
||||||
|
const dynamicPath = await getDynamicPageURL({contentID: req.query.ContentID, preview: true, slug: req.query.slug});
|
||||||
|
if(dynamicPath) {
|
||||||
|
previewUrl = dynamicPath;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//enable preview mode
|
||||||
|
res.setPreviewData({})
|
||||||
|
|
||||||
|
// Redirect to the slug
|
||||||
|
res.writeHead(307, { Location: previewUrl })
|
||||||
|
res.end()
|
||||||
|
|
||||||
|
}
|
||||||
1
public/assets/agility-logo.svg
Normal file
1
public/assets/agility-logo.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 247.19 63.55"><defs><style>.cls-1{fill:#717171;}.cls-1,.cls-2{fill-rule:evenodd;}.cls-2{fill:#ffcb28;}</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Layer_1-2-2" data-name="Layer 1-2"><path class="cls-1" d="M99.51,48.14a21.07,21.07,0,0,0,6.91-1.08V40.51A17.66,17.66,0,0,0,98.94,39c-3.71,0-6.34,1.2-6.34,4.27,0,2.91,2.28,4.84,6.91,4.84M110.93,34.3V49.63a27.11,27.11,0,0,1-11.47,2.62c-8.23,0-11.6-3.76-11.6-8.72,0-5.47,4.8-8.54,11.08-8.54a19.91,19.91,0,0,1,7.48,1.36V34.3c0-4-2.62-6.2-7.36-6.2a13,13,0,0,0-7.66,2.45,4.25,4.25,0,0,1-2.34-3.08c1.71-1.71,5.65-3.65,10.22-3.65,6.46,0,11.65,3,11.65,10.48m28.38,10.48v-15A10.07,10.07,0,0,0,133.25,28c-5.71,0-9.65,3.93-9.65,9.57s3.94,9.17,9.65,9.17a9.17,9.17,0,0,0,6.06-2m4.62-17.48v23.5c0,6.72-5.19,11.85-12.85,11.85-4.74,0-9-1.48-11.76-4.67a5.41,5.41,0,0,1,3-3.13,11.06,11.06,0,0,0,8.79,3.7c5.71,0,8.23-3.42,8.23-7.75V49.23a14.25,14.25,0,0,1-6.46,1.59c-7.65,0-14-5-14-13.21,0-8,6-13.79,14.39-13.79A17.84,17.84,0,0,1,144,27.3m9.9,24.51V24.93a11.46,11.46,0,0,1,2.34-.23,10.35,10.35,0,0,1,2.29.23V51.82a12.43,12.43,0,0,1-4.63,0m-1-34.75a3.26,3.26,0,1,1,3.31,3.25,3.26,3.26,0,0,1-3.31-3.25v0m16,34.4V14.05a11.64,11.64,0,0,1,4.63,0V51.48a11.55,11.55,0,0,1-2.35.22,10.88,10.88,0,0,1-2.28-.22m15,.34V24.93a11.46,11.46,0,0,1,2.34-.23,10.35,10.35,0,0,1,2.29.23V51.82a12.43,12.43,0,0,1-4.63,0m-1-34.75a3.26,3.26,0,1,1,3.31,3.25,3.26,3.26,0,0,1-3.31-3.25v0m34.76,32.71a11.62,11.62,0,0,1-7.54,2.85c-5.42,0-9.37-2.57-9.37-9V29h-4.62a7,7,0,0,1-.23-1.88,6.66,6.66,0,0,1,.23-1.83h4.62V18.05a10.35,10.35,0,0,1,2.29-.23,9.82,9.82,0,0,1,2.23.23v7.24H215.9a6.58,6.58,0,0,1,.22,1.82A7,7,0,0,1,215.9,29H205.23V42.71c0,4.84,2.28,5.87,5.19,5.87a8.81,8.81,0,0,0,5.14-2,5.16,5.16,0,0,1,2.06,3.25m29.57-24.39c-4.45,17-9.54,27.23-19.53,38.11a4.55,4.55,0,0,1-3.26-2.79,63,63,0,0,0,7.26-9.4,98.66,98.66,0,0,1-10.8-26.09,9.55,9.55,0,0,1,2.86-.4,12.79,12.79,0,0,1,2.05.17A103.05,103.05,0,0,0,234,46.58l.45.86c.12-.29.29-.52.4-.8A91.25,91.25,0,0,0,242.51,25a11.84,11.84,0,0,1,1.88-.17,7.91,7.91,0,0,1,2.8.57"/><path class="cls-2" d="M42.92,53.29H17.28L36.61,19.9,55.94,53.29l5.64,9.94H73.22L36.61,0,0,63.23H47.42Z"/></g></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 2.2 KiB |
1
public/assets/agility-preview-logo.svg
Normal file
1
public/assets/agility-preview-logo.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 247.19 63.55"><defs><style>.cls-1{fill:#fff;}.cls-1,.cls-2{fill-rule:evenodd;}.cls-2{fill:#ffcb28;}</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Layer_1-2-2" data-name="Layer 1-2"><path class="cls-1" d="M99.51,48.14a21.07,21.07,0,0,0,6.91-1.08V40.51A17.66,17.66,0,0,0,98.94,39c-3.71,0-6.34,1.2-6.34,4.27,0,2.91,2.28,4.84,6.91,4.84M110.93,34.3V49.63a27.11,27.11,0,0,1-11.47,2.62c-8.23,0-11.6-3.76-11.6-8.72,0-5.47,4.8-8.54,11.08-8.54a19.91,19.91,0,0,1,7.48,1.36V34.3c0-4-2.62-6.2-7.36-6.2a13,13,0,0,0-7.66,2.45,4.25,4.25,0,0,1-2.34-3.08c1.71-1.71,5.65-3.65,10.22-3.65,6.46,0,11.65,3,11.65,10.48m28.38,10.48v-15A10.07,10.07,0,0,0,133.25,28c-5.71,0-9.65,3.93-9.65,9.57s3.94,9.17,9.65,9.17a9.17,9.17,0,0,0,6.06-2m4.62-17.48v23.5c0,6.72-5.19,11.85-12.85,11.85-4.74,0-9-1.48-11.76-4.67a5.41,5.41,0,0,1,3-3.13,11.06,11.06,0,0,0,8.79,3.7c5.71,0,8.23-3.42,8.23-7.75V49.23a14.25,14.25,0,0,1-6.46,1.59c-7.65,0-14-5-14-13.21,0-8,6-13.79,14.39-13.79A17.84,17.84,0,0,1,144,27.3m9.9,24.51V24.93a11.46,11.46,0,0,1,2.34-.23,10.35,10.35,0,0,1,2.29.23V51.82a12.43,12.43,0,0,1-4.63,0m-1-34.75a3.26,3.26,0,1,1,3.31,3.25,3.26,3.26,0,0,1-3.31-3.25v0m16,34.4V14.05a11.64,11.64,0,0,1,4.63,0V51.48a11.55,11.55,0,0,1-2.35.22,10.88,10.88,0,0,1-2.28-.22m15,.34V24.93a11.46,11.46,0,0,1,2.34-.23,10.35,10.35,0,0,1,2.29.23V51.82a12.43,12.43,0,0,1-4.63,0m-1-34.75a3.26,3.26,0,1,1,3.31,3.25,3.26,3.26,0,0,1-3.31-3.25v0m34.76,32.71a11.62,11.62,0,0,1-7.54,2.85c-5.42,0-9.37-2.57-9.37-9V29h-4.62a7,7,0,0,1-.23-1.88,6.66,6.66,0,0,1,.23-1.83h4.62V18.05a10.35,10.35,0,0,1,2.29-.23,9.82,9.82,0,0,1,2.23.23v7.24H215.9a6.58,6.58,0,0,1,.22,1.82A7,7,0,0,1,215.9,29H205.23V42.71c0,4.84,2.28,5.87,5.19,5.87a8.81,8.81,0,0,0,5.14-2,5.16,5.16,0,0,1,2.06,3.25m29.57-24.39c-4.45,17-9.54,27.23-19.53,38.11a4.55,4.55,0,0,1-3.26-2.79,63,63,0,0,0,7.26-9.4,98.66,98.66,0,0,1-10.8-26.09,9.55,9.55,0,0,1,2.86-.4,12.79,12.79,0,0,1,2.05.17A103.05,103.05,0,0,0,234,46.58l.45.86c.12-.29.29-.52.4-.8A91.25,91.25,0,0,0,242.51,25a11.84,11.84,0,0,1,1.88-.17,7.91,7.91,0,0,1,2.8.57"/><path class="cls-2" d="M42.92,53.29H17.28L36.61,19.9,55.94,53.29l5.64,9.94H73.22L36.61,0,0,63.23H47.42Z"/></g></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 2.2 KiB |
@ -1,71 +1,78 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
future: {
|
future: {
|
||||||
purgeLayersByDefault: true,
|
purgeLayersByDefault: true,
|
||||||
applyComplexClasses: true,
|
applyComplexClasses: true,
|
||||||
},
|
},
|
||||||
purge: {
|
purge: {
|
||||||
content: [
|
content: [
|
||||||
'./pages/**/*.{js,ts,jsx,tsx}',
|
'./pages/**/*.{js,ts,jsx,tsx}',
|
||||||
'./components/**/*.{js,ts,jsx,tsx}',
|
'./components/**/*.{js,ts,jsx,tsx}',
|
||||||
],
|
],
|
||||||
options: {
|
options: {
|
||||||
safelist: {
|
safelist: {
|
||||||
standard: ['outline-none'],
|
standard: ['outline-none'],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
maxWidth: {
|
maxWidth: {
|
||||||
'8xl': '1920px',
|
'8xl': '1920px',
|
||||||
},
|
},
|
||||||
colors: {
|
colors: {
|
||||||
primary: 'var(--primary)',
|
transparent: "transparent",
|
||||||
'primary-2': 'var(--primary-2)',
|
|
||||||
secondary: 'var(--secondary)',
|
black: "#000",
|
||||||
'secondary-2': 'var(--secondary-2)',
|
white: "#fff",
|
||||||
hover: 'var(--hover)',
|
|
||||||
'hover-1': 'var(--hover-1)',
|
agility: "#222",
|
||||||
'hover-2': 'var(--hover-2)',
|
|
||||||
'accent-0': 'var(--accent-0)',
|
primary: 'var(--primary)',
|
||||||
'accent-1': 'var(--accent-1)',
|
'primary-2': 'var(--primary-2)',
|
||||||
'accent-2': 'var(--accent-2)',
|
secondary: 'var(--secondary)',
|
||||||
'accent-3': 'var(--accent-3)',
|
'secondary-2': 'var(--secondary-2)',
|
||||||
'accent-4': 'var(--accent-4)',
|
hover: 'var(--hover)',
|
||||||
'accent-5': 'var(--accent-5)',
|
'hover-1': 'var(--hover-1)',
|
||||||
'accent-6': 'var(--accent-6)',
|
'hover-2': 'var(--hover-2)',
|
||||||
'accent-7': 'var(--accent-7)',
|
'accent-0': 'var(--accent-0)',
|
||||||
'accent-8': 'var(--accent-8)',
|
'accent-1': 'var(--accent-1)',
|
||||||
'accent-9': 'var(--accent-9)',
|
'accent-2': 'var(--accent-2)',
|
||||||
violet: 'var(--violet)',
|
'accent-3': 'var(--accent-3)',
|
||||||
'violet-light': 'var(--violet-light)',
|
'accent-4': 'var(--accent-4)',
|
||||||
'violet-dark': 'var(--violet-dark)',
|
'accent-5': 'var(--accent-5)',
|
||||||
pink: 'var(--pink)',
|
'accent-6': 'var(--accent-6)',
|
||||||
'pink-light': 'var(--pink-light)',
|
'accent-7': 'var(--accent-7)',
|
||||||
cyan: 'var(--cyan)',
|
'accent-8': 'var(--accent-8)',
|
||||||
blue: 'var(--blue)',
|
'accent-9': 'var(--accent-9)',
|
||||||
green: 'var(--green)',
|
violet: 'var(--violet)',
|
||||||
red: 'var(--red)',
|
'violet-light': 'var(--violet-light)',
|
||||||
},
|
'violet-dark': 'var(--violet-dark)',
|
||||||
textColor: {
|
pink: 'var(--pink)',
|
||||||
base: 'var(--text-base)',
|
'pink-light': 'var(--pink-light)',
|
||||||
primary: 'var(--text-primary)',
|
cyan: 'var(--cyan)',
|
||||||
secondary: 'var(--text-secondary)',
|
blue: 'var(--blue)',
|
||||||
},
|
green: 'var(--green)',
|
||||||
boxShadow: {
|
red: 'var(--red)',
|
||||||
'outline-normal': '0 0 0 2px var(--accent-2)',
|
},
|
||||||
magical:
|
textColor: {
|
||||||
'rgba(0, 0, 0, 0.02) 0px 30px 30px, rgba(0, 0, 0, 0.03) 0px 0px 8px, rgba(0, 0, 0, 0.05) 0px 1px 0px',
|
base: 'var(--text-base)',
|
||||||
},
|
primary: 'var(--text-primary)',
|
||||||
lineHeight: {
|
secondary: 'var(--text-secondary)',
|
||||||
'extra-loose': '2.2',
|
},
|
||||||
},
|
boxShadow: {
|
||||||
scale: {
|
'outline-normal': '0 0 0 2px var(--accent-2)',
|
||||||
120: '1.2',
|
magical:
|
||||||
},
|
'rgba(0, 0, 0, 0.02) 0px 30px 30px, rgba(0, 0, 0, 0.03) 0px 0px 8px, rgba(0, 0, 0, 0.05) 0px 1px 0px',
|
||||||
},
|
},
|
||||||
},
|
lineHeight: {
|
||||||
plugins: [
|
'extra-loose': '2.2',
|
||||||
require('@tailwindcss/typography'),
|
},
|
||||||
],
|
scale: {
|
||||||
|
120: '1.2',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
require('@tailwindcss/typography'),
|
||||||
|
],
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5744,6 +5744,11 @@ react-fast-marquee@^1.1.3:
|
|||||||
resolved "https://registry.yarnpkg.com/react-fast-marquee/-/react-fast-marquee-1.1.3.tgz#8f1f397c64258bdee0e915147d503828ab74d695"
|
resolved "https://registry.yarnpkg.com/react-fast-marquee/-/react-fast-marquee-1.1.3.tgz#8f1f397c64258bdee0e915147d503828ab74d695"
|
||||||
integrity sha512-DIfrpWMgIHEoEPWKYzs5dnV5ZSMuu0+4ddRG4qB6Ee2zDi5LuPAGc1gnOceG8j8tvnuSrdkaqYYQwLZ61VzU5w==
|
integrity sha512-DIfrpWMgIHEoEPWKYzs5dnV5ZSMuu0+4ddRG4qB6Ee2zDi5LuPAGc1gnOceG8j8tvnuSrdkaqYYQwLZ61VzU5w==
|
||||||
|
|
||||||
|
react-icons@^4.2.0:
|
||||||
|
version "4.2.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.2.0.tgz#6dda80c8a8f338ff96a1851424d63083282630d0"
|
||||||
|
integrity sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ==
|
||||||
|
|
||||||
react-is@16.13.1, react-is@^16.8.1:
|
react-is@16.13.1, react-is@^16.8.1:
|
||||||
version "16.13.1"
|
version "16.13.1"
|
||||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
|
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user