Security News
cURL Project and Go Security Teams Reject CVSS as Broken
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
@graphcommerce/framer-next-pages
Advanced tools
- Ability to create pages that are overlays over other pages. - Ability to create multiple levels of overlays over other pages. - Ability to create entry and exit animations. - Ability to maintain a SharedComponent between multiple pages. - Handles proper
This package does not provide any actual overlays, that is up to the implementor.
Create a pages/_app.ts
file:
import { FramerNextPages } from '@graphcommerce/framer-next-pages'
import { AppPropsType } from 'next/dist/next-server/lib/utils'
export default function App({ router, Component, pageProps }: AppPropsType) {
return (
<FramerNextPages
router={router}
Component={Component}
pageProps={pageProps}
/>
)
}
Enable Next's scrollRestoration
:
const config = {
experimental: {
scrollRestoration: true,
},
}
Define pageOptions on a page. This can be any static or dynamic page:
Example routes:
pages/overlay.tsx
pages/overlay/[overlayId].tsx
import { PageOptions } from '@graphcommerce/framer-next-pages'
export default function Overlay() {
return <MyOverlay>blabla</MyOverlay>
}
Overlay.pageOptions = {
overlayGroup: 'left',
// sharedKey default is `(router) => router.asPath` resulting in `pages/overlay/[overlayId]`
} as PageOptions
Define key
as router.asPath in pageOptions.
Example route:
pages/overlay/[overlayId]
import { PageOptions } from '@graphcommerce/framer-next-pages'
Overlay.pageOptions = {
overlayGroup: 'left',
sharedKey: (router) => router.asPath, // will return pages/overlay/123
} as PageOptions
Define key
as a static value in pageOptions in your routes.
Example routes:
pages/account.tsx
pages/account/orders.tsx
pages/account/orders/[orderNumber].tsx
import { PageOptions } from '@graphcommerce/framer-next-pages'
Overlay.pageOptions = {
overlayGroup: 'left',
sharedKey: () => 'account',
} as PageOptions
To create a stable layout between multiple routes we can define a SharedComponent.
Example route:
pages/overlay/[overlayId]
CmsPage.pageOptions = {
SharedComponent: LayoutSheet,
} as PageOptions
CmsPage.pageOptions = {
SharedComponent: LayoutSheet,
sharedProps: { variant: 'bottom' },
} as PageOptions
export function getStaticProps() {
return {
variantMd: 'bottom',
}
}
const pageOptions: PageOptions<LayoutSheetProps> = {
SharedComponent: LayoutSheet,
sharedKey: () => 'page',
}
const pageOptions: PageOptions<LayoutSheetProps> = {
overlayGroup: 'account',
SharedComponent: LayoutSheet,
sharedKey: () => 'account',
}
We have multiple hooks available to animate based on certain states, etc.
export default function MyComponent() {
const { level, depth, direction } = usePageContext()
}
If we have multiple pages layered on top of each other we get the level the page has.
E.g.
/my-regular-page
: level === 0
After navigating to overlay-one
/my-regular-page
: level === 0
/overlay-one
: level === 1
After navigation to overlay-two
/my-regular-page
: level === 0
/overlay-one
: level === 1
/overlay-two
: level === 2
/If we have multiple pages layered on top of each other we get the depth the page has.
E.g.
/my-regular-page
: depth === 0
After navigating to overlay-one
/my-regular-page
: depth === -1
/overlay-one
: depth === 0
After navigation to overlay-two
/my-regular-page
: depth === -2
/overlay-one
: depth === -1
/overlay-two
: depth === 0
usePageContext().direction === 1
usePageContext().direction === -1
When navigating inside an overlay we need to be able to navigate back. We give a count that shows us if we can go back
function MyComponent {
const { backSteps } = usePageContext();
const router = useRouter();
return <button onClick={backSteps > 0 && () => router.back()}>back</button>
}
When tying to close an overlay we need to be able to navigate back x-times to close the overlay. So we give the times it needs to go back.
function MyComponent {
const { closeSteps } = usePageContext();
const go = useGo();
return <button onClick={closeSteps > 0 && () => go(closeSteps * -1)}>close</button>
}
When an overlay is accessed by URL, it will render but it won't render as a normal page. You can provide a fallback to render something in this case.
Creates a pageList
containing all the pages that should be rendered on top of
each other.
Each time a new page is provided to <FramerNextPages />
it will add them to
the pageList. This pageList is remembered when navigating between pages.
If an overlay is rendered, we find the closest 'regular' page (that isn't an overlay) and render from that page until the current active page.
Uses Framer's AnimatePresence to animate pages in and out of existence.
FAQs
- Ability to create pages that are overlays over other pages. - Ability to create multiple levels of overlays over other pages. - Ability to create entry and exit animations. - Ability to maintain a SharedComponent between multiple pages. - Handles proper
The npm package @graphcommerce/framer-next-pages receives a total of 1,272 weekly downloads. As such, @graphcommerce/framer-next-pages popularity was classified as popular.
We found that @graphcommerce/framer-next-pages demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.
Security News
Biden's executive order pushes for AI-driven cybersecurity, software supply chain transparency, and stronger protections for federal and open source systems.