fix: build errors in docs (#204)

This commit is contained in:
Aaryan Khandelwal 2023-01-29 12:26:36 +05:30 committed by GitHub
parent 2cb708c63b
commit 143ba75604
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 153 additions and 145 deletions

View File

@ -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
View File

@ -0,0 +1 @@
module.exports = require('config/.eslintrc')

View File

@ -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',

View File

@ -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

View File

@ -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">

View File

@ -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}>

View File

@ -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" />

View File

@ -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',
})

View File

@ -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 />

View File

@ -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"
/>
)
}

View File

@ -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}>

View File

@ -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

View File

@ -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 (

View File

@ -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)
}

View File

@ -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">

View File

@ -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)
}

View File

@ -1,5 +1,5 @@
export function remToPx(remValue) {
let rootFontSize =
const rootFontSize =
typeof window === 'undefined'
? 16
: parseFloat(window.getComputedStyle(document.documentElement).fontSize)

View File

@ -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>
/>
</>
)
}