forked from github/plane
fix: build errors in docs (#204)
This commit is contained in:
parent
2cb708c63b
commit
143ba75604
@ -24,14 +24,8 @@
|
||||
// }
|
||||
{
|
||||
"extends": "tsconfig/nextjs.json",
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
],
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||
"exclude": ["node_modules"],
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"jsx": "preserve"
|
||||
|
1
apps/docs/.eslintrc.js
Normal file
1
apps/docs/.eslintrc.js
Normal file
@ -0,0 +1 @@
|
||||
module.exports = require('config/.eslintrc')
|
@ -33,7 +33,7 @@ export function Button({
|
||||
arrow,
|
||||
...props
|
||||
}) {
|
||||
let Component = props.href ? Link : 'button'
|
||||
const Component = props.href ? Link : 'button'
|
||||
|
||||
className = clsx(
|
||||
'inline-flex gap-0.5 justify-center overflow-hidden text-sm font-medium transition',
|
||||
@ -41,7 +41,7 @@ export function Button({
|
||||
className
|
||||
)
|
||||
|
||||
let arrowIcon = (
|
||||
const arrowIcon = (
|
||||
<ArrowIcon
|
||||
className={clsx(
|
||||
'mt-0.5 h-5 w-5',
|
||||
|
@ -44,12 +44,12 @@ function ClipboardIcon(props) {
|
||||
}
|
||||
|
||||
function CopyButton({ code }) {
|
||||
let [copyCount, setCopyCount] = useState(0)
|
||||
let copied = copyCount > 0
|
||||
const [copyCount, setCopyCount] = useState(0)
|
||||
const copied = copyCount > 0
|
||||
|
||||
useEffect(() => {
|
||||
if (copyCount > 0) {
|
||||
let timeout = setTimeout(() => setCopyCount(0), 1000)
|
||||
const timeout = setTimeout(() => setCopyCount(0), 1000)
|
||||
return () => {
|
||||
clearTimeout(timeout)
|
||||
}
|
||||
@ -117,7 +117,7 @@ function CodePanelHeader({ tag, label }) {
|
||||
}
|
||||
|
||||
function CodePanel({ tag, label, code, children }) {
|
||||
let child = Children.only(children)
|
||||
const child = Children.only(children)
|
||||
|
||||
return (
|
||||
<div className="group dark:bg-white/2.5">
|
||||
@ -134,7 +134,7 @@ function CodePanel({ tag, label, code, children }) {
|
||||
}
|
||||
|
||||
function CodeGroupHeader({ title, children, selectedIndex }) {
|
||||
let hasTabs = Children.count(children) > 1
|
||||
const hasTabs = Children.count(children) > 1
|
||||
|
||||
if (!title && !hasTabs) {
|
||||
return null
|
||||
@ -168,7 +168,7 @@ function CodeGroupHeader({ title, children, selectedIndex }) {
|
||||
}
|
||||
|
||||
function CodeGroupPanels({ children, ...props }) {
|
||||
let hasTabs = Children.count(children) > 1
|
||||
const hasTabs = Children.count(children) > 1
|
||||
|
||||
if (hasTabs) {
|
||||
return (
|
||||
@ -186,24 +186,25 @@ function CodeGroupPanels({ children, ...props }) {
|
||||
}
|
||||
|
||||
function usePreventLayoutShift() {
|
||||
let positionRef = useRef()
|
||||
let rafRef = useRef()
|
||||
const positionRef = useRef()
|
||||
const rafRef = useRef()
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
useEffect(
|
||||
() => () => {
|
||||
window.cancelAnimationFrame(rafRef.current)
|
||||
}
|
||||
}, [])
|
||||
},
|
||||
[]
|
||||
)
|
||||
|
||||
return {
|
||||
positionRef,
|
||||
preventLayoutShift(callback) {
|
||||
let initialTop = positionRef.current.getBoundingClientRect().top
|
||||
const initialTop = positionRef.current.getBoundingClientRect().top
|
||||
|
||||
callback()
|
||||
|
||||
rafRef.current = window.requestAnimationFrame(() => {
|
||||
let newTop = positionRef.current.getBoundingClientRect().top
|
||||
const newTop = positionRef.current.getBoundingClientRect().top
|
||||
window.scrollBy(0, newTop - initialTop)
|
||||
})
|
||||
},
|
||||
@ -224,18 +225,19 @@ const usePreferredLanguageStore = create((set) => ({
|
||||
}))
|
||||
|
||||
function useTabGroupProps(availableLanguages) {
|
||||
let { preferredLanguages, addPreferredLanguage } = usePreferredLanguageStore()
|
||||
let [selectedIndex, setSelectedIndex] = useState(0)
|
||||
let activeLanguage = [...availableLanguages].sort(
|
||||
const { preferredLanguages, addPreferredLanguage } =
|
||||
usePreferredLanguageStore()
|
||||
const [selectedIndex, setSelectedIndex] = useState(0)
|
||||
const activeLanguage = [...availableLanguages].sort(
|
||||
(a, z) => preferredLanguages.indexOf(z) - preferredLanguages.indexOf(a)
|
||||
)[0]
|
||||
let languageIndex = availableLanguages.indexOf(activeLanguage)
|
||||
let newSelectedIndex = languageIndex === -1 ? selectedIndex : languageIndex
|
||||
const languageIndex = availableLanguages.indexOf(activeLanguage)
|
||||
const newSelectedIndex = languageIndex === -1 ? selectedIndex : languageIndex
|
||||
if (newSelectedIndex !== selectedIndex) {
|
||||
setSelectedIndex(newSelectedIndex)
|
||||
}
|
||||
|
||||
let { positionRef, preventLayoutShift } = usePreventLayoutShift()
|
||||
const { positionRef, preventLayoutShift } = usePreventLayoutShift()
|
||||
|
||||
return {
|
||||
as: 'div',
|
||||
@ -252,12 +254,14 @@ function useTabGroupProps(availableLanguages) {
|
||||
const CodeGroupContext = createContext(false)
|
||||
|
||||
export function CodeGroup({ children, title, ...props }) {
|
||||
let languages = Children.map(children, (child) => getPanelTitle(child.props))
|
||||
let tabGroupProps = useTabGroupProps(languages)
|
||||
let hasTabs = Children.count(children) > 1
|
||||
let Container = hasTabs ? Tab.Group : 'div'
|
||||
let containerProps = hasTabs ? tabGroupProps : {}
|
||||
let headerProps = hasTabs
|
||||
const languages = Children.map(children, (child) =>
|
||||
getPanelTitle(child.props)
|
||||
)
|
||||
const tabGroupProps = useTabGroupProps(languages)
|
||||
const hasTabs = Children.count(children) > 1
|
||||
const Container = hasTabs ? Tab.Group : 'div'
|
||||
const containerProps = hasTabs ? tabGroupProps : {}
|
||||
const headerProps = hasTabs
|
||||
? { selectedIndex: tabGroupProps.selectedIndex }
|
||||
: {}
|
||||
|
||||
@ -277,7 +281,7 @@ export function CodeGroup({ children, title, ...props }) {
|
||||
}
|
||||
|
||||
export function Code({ children, ...props }) {
|
||||
let isGrouped = useContext(CodeGroupContext)
|
||||
const isGrouped = useContext(CodeGroupContext)
|
||||
|
||||
if (isGrouped) {
|
||||
return <code {...props} dangerouslySetInnerHTML={{ __html: children }} />
|
||||
@ -287,7 +291,7 @@ export function Code({ children, ...props }) {
|
||||
}
|
||||
|
||||
export function Pre({ children, ...props }) {
|
||||
let isGrouped = useContext(CodeGroupContext)
|
||||
const isGrouped = useContext(CodeGroupContext)
|
||||
|
||||
if (isGrouped) {
|
||||
return children
|
||||
|
@ -65,7 +65,7 @@ const FeedbackThanks = forwardRef(function FeedbackThanks(_props, ref) {
|
||||
})
|
||||
|
||||
function Feedback() {
|
||||
let [submitted, setSubmitted] = useState(false)
|
||||
const [submitted, setSubmitted] = useState(false)
|
||||
|
||||
function onSubmit(event) {
|
||||
event.preventDefault()
|
||||
@ -124,9 +124,9 @@ function PageLink({ label, page, previous = false }) {
|
||||
}
|
||||
|
||||
function PageNavigation() {
|
||||
let router = useRouter()
|
||||
let allPages = navigation.flatMap((group) => group.links)
|
||||
let currentPageIndex = allPages.findIndex(
|
||||
const router = useRouter()
|
||||
const allPages = navigation.flatMap((group) => group.links)
|
||||
const currentPageIndex = allPages.findIndex(
|
||||
(page) => page.href === router.pathname
|
||||
)
|
||||
|
||||
@ -134,8 +134,8 @@ function PageNavigation() {
|
||||
return null
|
||||
}
|
||||
|
||||
let previousPage = allPages[currentPageIndex - 1]
|
||||
let nextPage = allPages[currentPageIndex + 1]
|
||||
const previousPage = allPages[currentPageIndex - 1]
|
||||
const nextPage = allPages[currentPageIndex + 1]
|
||||
|
||||
if (!previousPage && !nextPage) {
|
||||
return null
|
||||
@ -207,7 +207,10 @@ function SmallPrint() {
|
||||
<SocialLink href="https://github.com/makeplane" icon={GitHubIcon}>
|
||||
Follow us on GitHub
|
||||
</SocialLink>
|
||||
<SocialLink href="https://discord.com/invite/A92xrEGCge" icon={DiscordIcon}>
|
||||
<SocialLink
|
||||
href="https://discord.com/invite/A92xrEGCge"
|
||||
icon={DiscordIcon}
|
||||
>
|
||||
Join our Discord server
|
||||
</SocialLink>
|
||||
</div>
|
||||
@ -216,7 +219,7 @@ function SmallPrint() {
|
||||
}
|
||||
|
||||
export function Footer() {
|
||||
let router = useRouter()
|
||||
const router = useRouter()
|
||||
|
||||
return (
|
||||
<footer className="mx-auto max-w-2xl space-y-10 pb-16 lg:max-w-5xl">
|
||||
|
@ -1,7 +1,7 @@
|
||||
import { useId } from 'react'
|
||||
|
||||
export function GridPattern({ width, height, x, y, squares, ...props }) {
|
||||
let patternId = useId()
|
||||
const patternId = useId()
|
||||
|
||||
return (
|
||||
<svg aria-hidden="true" {...props}>
|
||||
|
@ -8,8 +8,8 @@ import { Logo } from '@/components/Logo'
|
||||
import {
|
||||
MobileNavigation,
|
||||
useIsInsideMobileNavigation,
|
||||
useMobileNavigationStore,
|
||||
} from '@/components/MobileNavigation'
|
||||
import { useMobileNavigationStore } from '@/components/MobileNavigation'
|
||||
import { ModeToggle } from '@/components/ModeToggle'
|
||||
import { MobileSearch, Search } from '@/components/Search'
|
||||
|
||||
@ -27,12 +27,12 @@ function TopLevelNavItem({ href, children }) {
|
||||
}
|
||||
|
||||
export const Header = forwardRef(function Header({ className }, ref) {
|
||||
let { isOpen: mobileNavIsOpen } = useMobileNavigationStore()
|
||||
let isInsideMobileNavigation = useIsInsideMobileNavigation()
|
||||
const { isOpen: mobileNavIsOpen } = useMobileNavigationStore()
|
||||
const isInsideMobileNavigation = useIsInsideMobileNavigation()
|
||||
|
||||
let { scrollY } = useScroll()
|
||||
let bgOpacityLight = useTransform(scrollY, [0, 72], [0.5, 0.9])
|
||||
let bgOpacityDark = useTransform(scrollY, [0, 72], [0.2, 0.8])
|
||||
const { scrollY } = useScroll()
|
||||
const bgOpacityLight = useTransform(scrollY, [0, 72], [0.5, 0.9])
|
||||
const bgOpacityDark = useTransform(scrollY, [0, 72], [0.2, 0.8])
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
@ -62,15 +62,21 @@ export const Header = forwardRef(function Header({ className }, ref) {
|
||||
<div className="flex items-center gap-5 lg:hidden">
|
||||
<MobileNavigation />
|
||||
<Link href="/" aria-label="Home">
|
||||
<Logo />
|
||||
<Logo />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex items-center gap-5">
|
||||
<nav className="hidden md:block">
|
||||
<ul role="list" className="flex items-center gap-8">
|
||||
<TopLevelNavItem href="https://plane.so/">Plane Cloud</TopLevelNavItem>
|
||||
<TopLevelNavItem href="https://github.com/makeplane/plane">GitHub</TopLevelNavItem>
|
||||
<TopLevelNavItem href="https://discord.com/invite/A92xrEGCge">Discord | Support</TopLevelNavItem>
|
||||
<TopLevelNavItem href="https://plane.so/">
|
||||
Plane Cloud
|
||||
</TopLevelNavItem>
|
||||
<TopLevelNavItem href="https://github.com/makeplane/plane">
|
||||
GitHub
|
||||
</TopLevelNavItem>
|
||||
<TopLevelNavItem href="https://discord.com/invite/A92xrEGCge">
|
||||
Discord | Support
|
||||
</TopLevelNavItem>
|
||||
</ul>
|
||||
</nav>
|
||||
<div className="hidden md:block md:h-5 md:w-px md:bg-zinc-900/10 md:dark:bg-white/15" />
|
||||
|
@ -65,11 +65,11 @@ export function Heading({
|
||||
anchor = true,
|
||||
...props
|
||||
}) {
|
||||
let Component = `h${level}`
|
||||
let ref = useRef()
|
||||
let registerHeading = useSectionStore((s) => s.registerHeading)
|
||||
const Component = `h${level}`
|
||||
const ref = useRef()
|
||||
const registerHeading = useSectionStore((s) => s.registerHeading)
|
||||
|
||||
let inView = useInView(ref, {
|
||||
const inView = useInView(ref, {
|
||||
margin: `${remToPx(-3.5)}px 0px 0px 0px`,
|
||||
amount: 'all',
|
||||
})
|
||||
|
@ -8,7 +8,6 @@ import { Navigation } from '@/components/Navigation'
|
||||
import { Prose } from '@/components/Prose'
|
||||
import { SectionProvider } from '@/components/SectionProvider'
|
||||
|
||||
|
||||
export function Layout({ children, sections = [] }) {
|
||||
return (
|
||||
<SectionProvider sections={sections}>
|
||||
@ -19,11 +18,7 @@ export function Layout({ children, sections = [] }) {
|
||||
>
|
||||
<div className="hidden lg:flex">
|
||||
<Link href="/" aria-label="Home">
|
||||
<Logo />
|
||||
|
||||
|
||||
|
||||
|
||||
<Logo />
|
||||
</Link>
|
||||
</div>
|
||||
<Header />
|
||||
|
@ -1,5 +1,10 @@
|
||||
export function Logo() {
|
||||
return (
|
||||
<img src="https://camo.githubusercontent.com/ef32512ae486a8cef8e000e74b2ff11c92c89c2cadb2d79674c6bd1599b99a56/68747470733a2f2f696b2e696d6167656b69742e696f2f77326f6b77627475322f706c616e652d6c6f676f5f306d383378756537522e706e673f696b2d73646b2d76657273696f6e3d6a6176617363726970742d312e342e33267570646174656441743d31363638383632373137303834" height={100} width={100} alt="Plane"/>
|
||||
<img
|
||||
src="https://camo.githubusercontent.com/ef32512ae486a8cef8e000e74b2ff11c92c89c2cadb2d79674c6bd1599b99a56/68747470733a2f2f696b2e696d6167656b69742e696f2f77326f6b77627475322f706c616e652d6c6f676f5f306d383378756537522e706e673f696b2d73646b2d76657273696f6e3d6a6176617363726970742d312e342e33267570646174656441743d31363638383632373137303834"
|
||||
height={100}
|
||||
width={100}
|
||||
alt="Plane"
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
@ -48,9 +48,9 @@ export const useMobileNavigationStore = create((set) => ({
|
||||
}))
|
||||
|
||||
export function MobileNavigation() {
|
||||
let isInsideMobileNavigation = useIsInsideMobileNavigation()
|
||||
let { isOpen, toggle, close } = useMobileNavigationStore()
|
||||
let ToggleIcon = isOpen ? XIcon : MenuIcon
|
||||
const isInsideMobileNavigation = useIsInsideMobileNavigation()
|
||||
const { isOpen, toggle, close } = useMobileNavigationStore()
|
||||
const ToggleIcon = isOpen ? XIcon : MenuIcon
|
||||
|
||||
return (
|
||||
<IsInsideMobileNavigationContext.Provider value={true}>
|
||||
|
@ -29,9 +29,9 @@ export function ModeToggle() {
|
||||
function toggleMode() {
|
||||
disableTransitionsTemporarily()
|
||||
|
||||
let darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
|
||||
let isSystemDarkMode = darkModeMediaQuery.matches
|
||||
let isDarkMode = document.documentElement.classList.toggle('dark')
|
||||
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
|
||||
const isSystemDarkMode = darkModeMediaQuery.matches
|
||||
const isDarkMode = document.documentElement.classList.toggle('dark')
|
||||
|
||||
if (isDarkMode === isSystemDarkMode) {
|
||||
delete window.localStorage.isDarkMode
|
||||
|
@ -11,7 +11,7 @@ import { Tag } from '@/components/Tag'
|
||||
import { remToPx } from '@/lib/remToPx'
|
||||
|
||||
function useInitialValue(value, condition = true) {
|
||||
let initialValue = useRef(value).current
|
||||
const initialValue = useRef(value).current
|
||||
return condition ? initialValue : value
|
||||
}
|
||||
|
||||
@ -52,7 +52,7 @@ function NavLink({ href, tag, active, isAnchorLink = false, children }) {
|
||||
}
|
||||
|
||||
function VisibleSectionHighlight({ group, pathname }) {
|
||||
let [sections, visibleSections] = useInitialValue(
|
||||
const [sections, visibleSections] = useInitialValue(
|
||||
[
|
||||
useSectionStore((s) => s.sections),
|
||||
useSectionStore((s) => s.visibleSections),
|
||||
@ -60,18 +60,18 @@ function VisibleSectionHighlight({ group, pathname }) {
|
||||
useIsInsideMobileNavigation()
|
||||
)
|
||||
|
||||
let isPresent = useIsPresent()
|
||||
let firstVisibleSectionIndex = Math.max(
|
||||
const isPresent = useIsPresent()
|
||||
const firstVisibleSectionIndex = Math.max(
|
||||
0,
|
||||
[{ id: '_top' }, ...sections].findIndex(
|
||||
(section) => section.id === visibleSections[0]
|
||||
)
|
||||
)
|
||||
let itemHeight = remToPx(2)
|
||||
let height = isPresent
|
||||
const itemHeight = remToPx(2)
|
||||
const height = isPresent
|
||||
? Math.max(1, visibleSections.length) * itemHeight
|
||||
: itemHeight
|
||||
let top =
|
||||
const top =
|
||||
group.links.findIndex((link) => link.href === pathname) * itemHeight +
|
||||
firstVisibleSectionIndex * itemHeight
|
||||
|
||||
@ -88,10 +88,12 @@ function VisibleSectionHighlight({ group, pathname }) {
|
||||
}
|
||||
|
||||
function ActivePageMarker({ group, pathname }) {
|
||||
let itemHeight = remToPx(2)
|
||||
let offset = remToPx(0.25)
|
||||
let activePageIndex = group.links.findIndex((link) => link.href === pathname)
|
||||
let top = offset + activePageIndex * itemHeight
|
||||
const itemHeight = remToPx(2)
|
||||
const offset = remToPx(0.25)
|
||||
const activePageIndex = group.links.findIndex(
|
||||
(link) => link.href === pathname
|
||||
)
|
||||
const top = offset + activePageIndex * itemHeight
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
@ -109,13 +111,13 @@ function NavigationGroup({ group, className }) {
|
||||
// If this is the mobile navigation then we always render the initial
|
||||
// state, so that the state does not change during the close animation.
|
||||
// The state will still update when we re-open (re-render) the navigation.
|
||||
let isInsideMobileNavigation = useIsInsideMobileNavigation()
|
||||
let [router, sections] = useInitialValue(
|
||||
const isInsideMobileNavigation = useIsInsideMobileNavigation()
|
||||
const [router, sections] = useInitialValue(
|
||||
[useRouter(), useSectionStore((s) => s.sections)],
|
||||
isInsideMobileNavigation
|
||||
)
|
||||
|
||||
let isActiveGroup =
|
||||
const isActiveGroup =
|
||||
group.links.findIndex((link) => link.href === router.pathname) !== -1
|
||||
|
||||
return (
|
||||
|
@ -71,8 +71,8 @@ function ResourceIcon({ icon: Icon }) {
|
||||
}
|
||||
|
||||
function ResourcePattern({ mouseX, mouseY, ...gridProps }) {
|
||||
let maskImage = useMotionTemplate`radial-gradient(180px at ${mouseX}px ${mouseY}px, white, transparent)`
|
||||
let style = { maskImage, WebkitMaskImage: maskImage }
|
||||
const maskImage = useMotionTemplate`radial-gradient(180px at ${mouseX}px ${mouseY}px, white, transparent)`
|
||||
const style = { maskImage, WebkitMaskImage: maskImage }
|
||||
|
||||
return (
|
||||
<div className="pointer-events-none">
|
||||
@ -106,11 +106,11 @@ function ResourcePattern({ mouseX, mouseY, ...gridProps }) {
|
||||
}
|
||||
|
||||
function Resource({ resource }) {
|
||||
let mouseX = useMotionValue(0)
|
||||
let mouseY = useMotionValue(0)
|
||||
const mouseX = useMotionValue(0)
|
||||
const mouseY = useMotionValue(0)
|
||||
|
||||
function onMouseMove({ currentTarget, clientX, clientY }) {
|
||||
let { left, top } = currentTarget.getBoundingClientRect()
|
||||
const { left, top } = currentTarget.getBoundingClientRect()
|
||||
mouseX.set(clientX - left)
|
||||
mouseY.set(clientY - top)
|
||||
}
|
||||
|
@ -12,11 +12,11 @@ const searchClient = algoliasearch(
|
||||
)
|
||||
|
||||
function useAutocomplete() {
|
||||
let id = useId()
|
||||
let router = useRouter()
|
||||
let [autocompleteState, setAutocompleteState] = useState({})
|
||||
const id = useId()
|
||||
const router = useRouter()
|
||||
const [autocompleteState, setAutocompleteState] = useState({})
|
||||
|
||||
let [autocomplete] = useState(() =>
|
||||
const [autocomplete] = useState(() =>
|
||||
createAutocomplete({
|
||||
id,
|
||||
placeholder: 'Find something...',
|
||||
@ -74,13 +74,13 @@ function useAutocomplete() {
|
||||
}
|
||||
|
||||
function resolveResult(result) {
|
||||
let allLevels = Object.keys(result.hierarchy)
|
||||
let hierarchy = Object.entries(result._highlightResult.hierarchy).filter(
|
||||
const allLevels = Object.keys(result.hierarchy)
|
||||
const hierarchy = Object.entries(result._highlightResult.hierarchy).filter(
|
||||
([, { value }]) => Boolean(value)
|
||||
)
|
||||
let levels = hierarchy.map(([level]) => level)
|
||||
const levels = hierarchy.map(([level]) => level)
|
||||
|
||||
let level =
|
||||
const level =
|
||||
result.type === 'content'
|
||||
? levels.pop()
|
||||
: levels
|
||||
@ -123,7 +123,7 @@ function NoResultsIcon(props) {
|
||||
}
|
||||
|
||||
function LoadingIcon(props) {
|
||||
let id = useId()
|
||||
const id = useId()
|
||||
|
||||
return (
|
||||
<svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
|
||||
@ -152,8 +152,8 @@ function LoadingIcon(props) {
|
||||
}
|
||||
|
||||
function SearchResult({ result, resultIndex, autocomplete, collection }) {
|
||||
let id = useId()
|
||||
let { titleHtml, hierarchyHtml } = resolveResult(result)
|
||||
const id = useId()
|
||||
const { titleHtml, hierarchyHtml } = resolveResult(result)
|
||||
|
||||
return (
|
||||
<li
|
||||
@ -234,7 +234,7 @@ const SearchInput = forwardRef(function SearchInput(
|
||||
{ autocomplete, autocompleteState, onClose },
|
||||
inputRef
|
||||
) {
|
||||
let inputProps = autocomplete.getInputProps({})
|
||||
const inputProps = autocomplete.getInputProps({})
|
||||
|
||||
return (
|
||||
<div className="group relative flex h-12">
|
||||
@ -291,7 +291,7 @@ function AlgoliaLogo(props) {
|
||||
}
|
||||
|
||||
function SearchButton(props) {
|
||||
let [modifierKey, setModifierKey] = useState()
|
||||
const [modifierKey, setModifierKey] = useState()
|
||||
|
||||
useEffect(() => {
|
||||
setModifierKey(
|
||||
@ -326,11 +326,11 @@ function SearchButton(props) {
|
||||
}
|
||||
|
||||
function SearchDialog({ open, setOpen, className }) {
|
||||
let router = useRouter()
|
||||
let formRef = useRef()
|
||||
let panelRef = useRef()
|
||||
let inputRef = useRef()
|
||||
let { autocomplete, autocompleteState } = useAutocomplete()
|
||||
const router = useRouter()
|
||||
const formRef = useRef()
|
||||
const panelRef = useRef()
|
||||
const inputRef = useRef()
|
||||
const { autocomplete, autocompleteState } = useAutocomplete()
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
@ -445,8 +445,8 @@ function SearchDialog({ open, setOpen, className }) {
|
||||
}
|
||||
|
||||
function useSearchProps() {
|
||||
let buttonRef = useRef()
|
||||
let [open, setOpen] = useState(false)
|
||||
const buttonRef = useRef()
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
return {
|
||||
buttonProps: {
|
||||
@ -458,7 +458,7 @@ function useSearchProps() {
|
||||
dialogProps: {
|
||||
open,
|
||||
setOpen(open) {
|
||||
let { width, height } = buttonRef.current.getBoundingClientRect()
|
||||
const { width, height } = buttonRef.current.getBoundingClientRect()
|
||||
if (!open || (width !== 0 && height !== 0)) {
|
||||
setOpen(open)
|
||||
}
|
||||
@ -468,8 +468,8 @@ function useSearchProps() {
|
||||
}
|
||||
|
||||
export function Search() {
|
||||
let [modifierKey, setModifierKey] = useState()
|
||||
let { buttonProps, dialogProps } = useSearchProps()
|
||||
const [modifierKey, setModifierKey] = useState()
|
||||
const { buttonProps, dialogProps } = useSearchProps()
|
||||
|
||||
useEffect(() => {
|
||||
setModifierKey(
|
||||
@ -497,7 +497,7 @@ export function Search() {
|
||||
}
|
||||
|
||||
export function MobileSearch() {
|
||||
let { buttonProps, dialogProps } = useSearchProps()
|
||||
const { buttonProps, dialogProps } = useSearchProps()
|
||||
|
||||
return (
|
||||
<div className="contents lg:hidden">
|
||||
|
@ -20,47 +20,45 @@ function createSectionStore(sections) {
|
||||
: { visibleSections }
|
||||
),
|
||||
registerHeading: ({ id, ref, offsetRem }) =>
|
||||
set((state) => {
|
||||
return {
|
||||
sections: state.sections.map((section) => {
|
||||
if (section.id === id) {
|
||||
return {
|
||||
...section,
|
||||
headingRef: ref,
|
||||
offsetRem,
|
||||
}
|
||||
set((state) => ({
|
||||
sections: state.sections.map((section) => {
|
||||
if (section.id === id) {
|
||||
return {
|
||||
...section,
|
||||
headingRef: ref,
|
||||
offsetRem,
|
||||
}
|
||||
return section
|
||||
}),
|
||||
}
|
||||
}),
|
||||
}
|
||||
return section
|
||||
}),
|
||||
})),
|
||||
}))
|
||||
}
|
||||
|
||||
function useVisibleSections(sectionStore) {
|
||||
let setVisibleSections = useStore(sectionStore, (s) => s.setVisibleSections)
|
||||
let sections = useStore(sectionStore, (s) => s.sections)
|
||||
const setVisibleSections = useStore(sectionStore, (s) => s.setVisibleSections)
|
||||
const sections = useStore(sectionStore, (s) => s.sections)
|
||||
|
||||
useEffect(() => {
|
||||
function checkVisibleSections() {
|
||||
let { innerHeight, scrollY } = window
|
||||
let newVisibleSections = []
|
||||
const { innerHeight, scrollY } = window
|
||||
const newVisibleSections = []
|
||||
|
||||
for (
|
||||
let sectionIndex = 0;
|
||||
sectionIndex < sections.length;
|
||||
sectionIndex++
|
||||
) {
|
||||
let { id, headingRef, offsetRem } = sections[sectionIndex]
|
||||
let offset = remToPx(offsetRem)
|
||||
let top = headingRef.current.getBoundingClientRect().top + scrollY
|
||||
const { id, headingRef, offsetRem } = sections[sectionIndex]
|
||||
const offset = remToPx(offsetRem)
|
||||
const top = headingRef.current.getBoundingClientRect().top + scrollY
|
||||
|
||||
if (sectionIndex === 0 && top - offset > scrollY) {
|
||||
newVisibleSections.push('_top')
|
||||
}
|
||||
|
||||
let nextSection = sections[sectionIndex + 1]
|
||||
let bottom =
|
||||
const nextSection = sections[sectionIndex + 1]
|
||||
const bottom =
|
||||
(nextSection?.headingRef.current.getBoundingClientRect().top ??
|
||||
Infinity) +
|
||||
scrollY -
|
||||
@ -78,7 +76,7 @@ function useVisibleSections(sectionStore) {
|
||||
setVisibleSections(newVisibleSections)
|
||||
}
|
||||
|
||||
let raf = window.requestAnimationFrame(() => checkVisibleSections())
|
||||
const raf = window.requestAnimationFrame(() => checkVisibleSections())
|
||||
window.addEventListener('scroll', checkVisibleSections, { passive: true })
|
||||
window.addEventListener('resize', checkVisibleSections)
|
||||
|
||||
@ -96,7 +94,7 @@ const useIsomorphicLayoutEffect =
|
||||
typeof window === 'undefined' ? useEffect : useLayoutEffect
|
||||
|
||||
export function SectionProvider({ sections, children }) {
|
||||
let [sectionStore] = useState(() => createSectionStore(sections))
|
||||
const [sectionStore] = useState(() => createSectionStore(sections))
|
||||
|
||||
useVisibleSections(sectionStore)
|
||||
|
||||
@ -112,6 +110,6 @@ export function SectionProvider({ sections, children }) {
|
||||
}
|
||||
|
||||
export function useSectionStore(selector) {
|
||||
let store = useContext(SectionStoreContext)
|
||||
const store = useContext(SectionStoreContext)
|
||||
return useStore(store, selector)
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
export function remToPx(remValue) {
|
||||
let rootFontSize =
|
||||
const rootFontSize =
|
||||
typeof window === 'undefined'
|
||||
? 16
|
||||
: parseFloat(window.getComputedStyle(document.documentElement).fontSize)
|
||||
|
@ -18,7 +18,7 @@ Router.events.on('routeChangeComplete', onRouteChange)
|
||||
Router.events.on('routeChangeError', onRouteChange)
|
||||
|
||||
export default function App({ Component, pageProps }) {
|
||||
let router = useRouter()
|
||||
const router = useRouter()
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -39,7 +39,7 @@ export default function App({ Component, pageProps }) {
|
||||
defer
|
||||
data-domain="docs.plane.so"
|
||||
src="https://plausible.io/js/script.js"
|
||||
></script>
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user