docs: refactor to use TypeScript, ESLint, and Tailwind CSS (#4136)
* docs(refactoring): configured eslint and typescript (#3511) * docs: configured eslint and typescript * fixed yarn.lock * docs(refactoring): migrate components directory to typescript (#3517) * docs: migrate components directory to typescript * removed vscode settings * fix following merge * docs: refactored QueryNote component (#3576) * docs: refactored first batch of theme components (#3579) * docs: refactored second batch of theme components (#3580) * added missing badge styles * fix after merge * docs(refactoring): migrated remaining component to TypeScript (#3770) * docs(refactoring): configured eslint and typescript (#3511) * docs: configured eslint and typescript * fixed yarn.lock * docs(refactoring): migrate components directory to typescript (#3517) * docs: migrate components directory to typescript * removed vscode settings * fix following merge * docs: refactored QueryNote component (#3576) * docs: refactored first batch of theme components (#3579) * docs: refactored second batch of theme components (#3580) * added missing badge styles * docs: refactoring second batch of theme components * fix after merge * refactored icons and other components * docs: refactored all components * docs(refactoring): set up and configured Tailwind Css (#3841) * docs: added tailwind config * docs: added more tailwind configurations * add includes option * added more tailwind configurations * fix to configurations * docs(refactoring): use tailwind css (#4134) * docs: added tailwind config * docs: added more tailwind configurations * add includes option * added more tailwind configurations * fix to configurations * docs(refactoring): refactored all styles to use tailwind css (#4132) * refactored Badge component to use tailwind css * refactored Bordered component to use tailwind css * updated to latest docusaurus * refactored BorderedIcon component to use tailwind css * refactored Feedback component to use tailwind css * refactored icons and footersociallinks to tailwind css * start refactoring of large card * refactored large card styling * refactored until admonitions * refactored until codeblock * refactored until Tabs * refactored Tabs (without testing * finished refactoring styles to tailwind css * upgraded to version 2.4.1 * general fixes * adjusted eslint configurations * fixed ignore files * fixes to large card * fix search styling * fix npx command * updated tabs to use isCodeTabs prop * fixed os tabs * removed os-tabs class in favor of general styling * improvements to buttons * fix for searchbar * fixed redocly download button * chore: added eslint code action (#4135) * small change in commerce modules page
This commit is contained in:
Shahed Nasser
GitHub
@@ -1,87 +0,0 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import clsx from 'clsx';
|
||||
import {useThemeConfig} from '@docusaurus/theme-common';
|
||||
import CollapseButton from '@theme/DocSidebar/Desktop/CollapseButton';
|
||||
import Content from '@theme/DocSidebar/Desktop/Content';
|
||||
import styles from './styles.module.css';
|
||||
import useIsBrowser from '@docusaurus/useIsBrowser';
|
||||
import AnnouncementBar from '@theme/AnnouncementBar';
|
||||
import {useLocation} from '@docusaurus/router';
|
||||
|
||||
function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
|
||||
const {
|
||||
navbar: {hideOnScroll},
|
||||
docs: {
|
||||
sidebar: {hideable},
|
||||
},
|
||||
} = useThemeConfig();
|
||||
const isBrowser = useIsBrowser()
|
||||
const sidebarRef = useRef(null)
|
||||
const location = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
if (isBrowser && sidebarRef.current) {
|
||||
function handleScroll () {
|
||||
if (!sidebarRef.current?.classList.contains('scrolling')) {
|
||||
sidebarRef.current?.classList.add('scrolling');
|
||||
const intervalId = setInterval(() => {
|
||||
if (!sidebarRef.current?.matches(':hover')) {
|
||||
sidebarRef.current?.classList.remove('scrolling');
|
||||
clearInterval(intervalId);
|
||||
}
|
||||
}, 300)
|
||||
}
|
||||
}
|
||||
|
||||
const navElement = sidebarRef.current.querySelector('.main-sidebar');
|
||||
navElement.addEventListener('scroll', handleScroll);
|
||||
|
||||
return () => {
|
||||
navElement?.removeEventListener('scroll', handleScroll);
|
||||
}
|
||||
}
|
||||
}, [isBrowser, sidebarRef.current])
|
||||
|
||||
useEffect(() => {
|
||||
const navElement = sidebarRef.current.querySelector('.main-sidebar'),
|
||||
navElementBoundingRect = navElement.getBoundingClientRect();
|
||||
|
||||
//logic to scroll to current active item
|
||||
const activeItem = document.querySelector('.sidebar-desktop [aria-current=page]')
|
||||
|
||||
if (!activeItem) {
|
||||
return
|
||||
}
|
||||
|
||||
const activeItemBoundingReact = activeItem.getBoundingClientRect(),
|
||||
//the extra 160 is due to the sticky elements in the sidebar
|
||||
isActiveItemVisible = activeItemBoundingReact.top >= 0 && activeItemBoundingReact.bottom + 160 <= navElementBoundingRect.height
|
||||
|
||||
if (!isActiveItemVisible) {
|
||||
const elementToScrollTo = activeItem,
|
||||
elementBounding = elementToScrollTo.getBoundingClientRect()
|
||||
//scroll to element
|
||||
navElement.scroll({
|
||||
//the extra 160 is due to the sticky elements in the sidebar
|
||||
top: elementBounding.top - navElementBoundingRect.top + navElement.scrollTop - 160,
|
||||
behaviour: 'smooth'
|
||||
})
|
||||
}
|
||||
}, [location])
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
styles.sidebar,
|
||||
'sidebar-desktop',
|
||||
hideOnScroll && styles.sidebarWithHideableNavbar,
|
||||
isHidden && styles.sidebarHidden,
|
||||
)}
|
||||
ref={sidebarRef}>
|
||||
<AnnouncementBar />
|
||||
<Content path={path} sidebar={sidebar} className="main-sidebar" />
|
||||
{hideable && <CollapseButton onClick={onCollapse} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default React.memo(DocSidebarDesktop);
|
||||
105
www/docs/src/theme/DocSidebar/Desktop/index.tsx
Normal file
105
www/docs/src/theme/DocSidebar/Desktop/index.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
import React, { useEffect, useRef } from "react"
|
||||
import clsx from "clsx"
|
||||
import { useThemeConfig } from "@docusaurus/theme-common"
|
||||
import CollapseButton from "@theme/DocSidebar/Desktop/CollapseButton"
|
||||
import Content from "@theme/DocSidebar/Desktop/Content"
|
||||
import type { Props } from "@theme/DocSidebar/Desktop"
|
||||
import useIsBrowser from "@docusaurus/useIsBrowser"
|
||||
import { useLocation } from "@docusaurus/router"
|
||||
import AnnouncementBar from "../../AnnouncementBar/index"
|
||||
|
||||
function DocSidebarDesktop({ path, sidebar, onCollapse, isHidden }: Props) {
|
||||
const {
|
||||
navbar: { hideOnScroll },
|
||||
docs: {
|
||||
sidebar: { hideable },
|
||||
},
|
||||
} = useThemeConfig()
|
||||
const isBrowser = useIsBrowser()
|
||||
const sidebarRef = useRef(null)
|
||||
const location = useLocation()
|
||||
|
||||
useEffect(() => {
|
||||
function handleScroll() {
|
||||
if (!sidebarRef.current?.classList.contains("scrolling")) {
|
||||
sidebarRef.current?.classList.add("scrolling")
|
||||
const intervalId = setInterval(() => {
|
||||
if (!sidebarRef.current?.matches(":hover")) {
|
||||
sidebarRef.current?.classList.remove("scrolling")
|
||||
clearInterval(intervalId)
|
||||
}
|
||||
}, 300)
|
||||
}
|
||||
}
|
||||
|
||||
if (isBrowser && sidebarRef.current) {
|
||||
const navElement = sidebarRef.current.querySelector(".main-sidebar")
|
||||
navElement.addEventListener("scroll", handleScroll)
|
||||
|
||||
return () => {
|
||||
navElement?.removeEventListener("scroll", handleScroll)
|
||||
}
|
||||
}
|
||||
}, [isBrowser, sidebarRef.current])
|
||||
|
||||
useEffect(() => {
|
||||
const navElement = sidebarRef.current.querySelector(".main-sidebar")
|
||||
const navElementBoundingRect = navElement.getBoundingClientRect()
|
||||
|
||||
// logic to scroll to current active item
|
||||
const activeItem = document.querySelector(
|
||||
".sidebar-desktop [aria-current=page]"
|
||||
)
|
||||
|
||||
if (!activeItem) {
|
||||
return
|
||||
}
|
||||
|
||||
const activeItemBoundingReact = activeItem.getBoundingClientRect()
|
||||
// the extra 160 is due to the sticky elements in the sidebar
|
||||
const isActiveItemVisible =
|
||||
activeItemBoundingReact.top >= 0 &&
|
||||
activeItemBoundingReact.bottom + 160 <= navElementBoundingRect.height
|
||||
|
||||
if (!isActiveItemVisible) {
|
||||
const elementToScrollTo = activeItem
|
||||
const elementBounding = elementToScrollTo.getBoundingClientRect()
|
||||
// scroll to element
|
||||
navElement.scroll({
|
||||
// the extra 160 is due to the sticky elements in the sidebar
|
||||
top:
|
||||
elementBounding.top -
|
||||
navElementBoundingRect.top +
|
||||
navElement.scrollTop -
|
||||
160,
|
||||
behaviour: "smooth",
|
||||
})
|
||||
}
|
||||
}, [location])
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
"lg:tw-flex lg:tw-flex-col lg:tw-max-h-screen lg:tw-h-full lg:tw-sticky lg:tw-top-0 lg:tw-transition-opacity lg:tw-duration-[50ms] lg:tw-ease-ease lg:tw-pt-1.5",
|
||||
"sidebar-desktop",
|
||||
hideOnScroll && "lg:tw-pt-0",
|
||||
isHidden &&
|
||||
"lg:tw-opacity-0 lg:tw-h-0 lg:tw-overflow-hidden lg:tw-invisible"
|
||||
)}
|
||||
ref={sidebarRef}
|
||||
>
|
||||
<AnnouncementBar />
|
||||
<Content
|
||||
path={path}
|
||||
sidebar={sidebar}
|
||||
className={clsx(
|
||||
"main-sidebar",
|
||||
"!tw-mt-0 !tw-pt-0 !tw-px-1.5 !tw-pb-4"
|
||||
)}
|
||||
/>
|
||||
{hideable && <CollapseButton onClick={onCollapse} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(DocSidebarDesktop)
|
||||
@@ -1,38 +0,0 @@
|
||||
@media (min-width: 997px) {
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 100vh;
|
||||
height: 100%;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
transition: opacity 50ms ease;
|
||||
padding-top: calc(var(--ifm-base-spacing) * 1.5);
|
||||
}
|
||||
|
||||
.sidebarWithHideableNavbar {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.sidebarHidden {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.sidebarLogo {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
margin: 18px 0;
|
||||
color: inherit !important;
|
||||
text-decoration: none !important;
|
||||
width: fit-content;
|
||||
padding-left: var(--doc-sidebar-padding);
|
||||
padding-right: var(--doc-sidebar-padding);
|
||||
}
|
||||
|
||||
.sidebarLogo img {
|
||||
height: var(--ifm-logo-height);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user