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,21 +0,0 @@
|
||||
import React from 'react';
|
||||
import Footer from '@theme-original/DocItem/Footer';
|
||||
import Feedback from '../../../components/Feedback';
|
||||
import { useDoc } from '@docusaurus/theme-common/internal';
|
||||
import {useThemeConfig} from '@docusaurus/theme-common';
|
||||
|
||||
export default function FooterWrapper(props) {
|
||||
const { metadata } = useDoc()
|
||||
const { footerFeedback = { event: '' } } = useThemeConfig();
|
||||
|
||||
return (
|
||||
<>
|
||||
{!metadata.frontMatter?.hide_footer && (
|
||||
<div className='docusaurus-mt-lg doc-footer'>
|
||||
<Feedback {...footerFeedback} />
|
||||
<Footer {...props} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import React from "react"
|
||||
import Footer from "@theme-original/DocItem/Footer"
|
||||
import type FooterType from "@theme/DocItem/Footer"
|
||||
import type { WrapperProps } from "@docusaurus/types"
|
||||
import Feedback from "@site/src/components/Feedback/index"
|
||||
import { useDoc } from "@docusaurus/theme-common/internal"
|
||||
import { useThemeConfig } from "@docusaurus/theme-common"
|
||||
import { ThemeConfig } from "@medusajs/docs"
|
||||
|
||||
type Props = WrapperProps<typeof FooterType>
|
||||
|
||||
export default function FooterWrapper(props: Props): JSX.Element {
|
||||
const { metadata } = useDoc()
|
||||
const { footerFeedback = { event: "" } } = useThemeConfig() as ThemeConfig
|
||||
|
||||
return (
|
||||
<>
|
||||
{!metadata.frontMatter?.hide_footer && (
|
||||
<div className="tw-mt-[42px]">
|
||||
<Feedback
|
||||
{...footerFeedback}
|
||||
className="tw-border-0 tw-border-t tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark"
|
||||
/>
|
||||
<Footer {...props} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import {useWindowSize} from '@docusaurus/theme-common';
|
||||
import {useDoc} from '@docusaurus/theme-common/internal';
|
||||
import DocItemPaginator from '@theme/DocItem/Paginator';
|
||||
import DocVersionBanner from '@theme/DocVersionBanner';
|
||||
import DocVersionBadge from '@theme/DocVersionBadge';
|
||||
import DocItemFooter from '@theme/DocItem/Footer';
|
||||
import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
|
||||
import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
|
||||
import DocItemContent from '@theme/DocItem/Content';
|
||||
import DocBreadcrumbs from '@theme/DocBreadcrumbs';
|
||||
import styles from './styles.module.css';
|
||||
import Footer from '@theme/Footer';
|
||||
/**
|
||||
* Decide if the toc should be rendered, on mobile or desktop viewports
|
||||
*/
|
||||
function useDocTOC() {
|
||||
const {frontMatter, toc} = useDoc();
|
||||
const windowSize = useWindowSize();
|
||||
const hidden = frontMatter.hide_table_of_contents;
|
||||
const canRender = !hidden && toc.length > 0;
|
||||
const mobile = canRender ? <DocItemTOCMobile /> : undefined;
|
||||
const desktop =
|
||||
canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? (
|
||||
<DocItemTOCDesktop />
|
||||
) : undefined;
|
||||
return {
|
||||
hidden,
|
||||
mobile,
|
||||
desktop,
|
||||
};
|
||||
}
|
||||
export default function DocItemLayout({children}) {
|
||||
const docTOC = useDocTOC();
|
||||
return (
|
||||
<div className="row markdown-row">
|
||||
<div className={clsx('col', 'markdown-doc-wrapper', !docTOC.hidden && styles.docItemCol)}>
|
||||
<DocVersionBanner />
|
||||
<div className={styles.docItemContainer}>
|
||||
<article>
|
||||
<DocBreadcrumbs />
|
||||
<DocVersionBadge />
|
||||
{docTOC.mobile}
|
||||
<DocItemContent>{children}</DocItemContent>
|
||||
<DocItemFooter />
|
||||
</article>
|
||||
<DocItemPaginator />
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
{docTOC.desktop && <div className="col toc-wrapper">{docTOC.desktop}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import React from "react"
|
||||
import clsx from "clsx"
|
||||
import { useWindowSize } from "@docusaurus/theme-common"
|
||||
import { useDoc } from "@docusaurus/theme-common/internal"
|
||||
import DocItemPaginator from "@theme/DocItem/Paginator"
|
||||
import DocVersionBanner from "@theme/DocVersionBanner"
|
||||
import DocVersionBadge from "@theme/DocVersionBadge"
|
||||
import DocItemFooter from "@theme/DocItem/Footer"
|
||||
import DocItemTOCMobile from "@theme/DocItem/TOC/Mobile"
|
||||
import DocItemTOCDesktop from "@theme/DocItem/TOC/Desktop"
|
||||
import DocItemContent from "@theme/DocItem/Content"
|
||||
import DocBreadcrumbs from "@theme/DocBreadcrumbs"
|
||||
import type { Props } from "@theme/DocItem/Layout"
|
||||
import Footer from "@theme/Footer"
|
||||
|
||||
/**
|
||||
* Decide if the toc should be rendered, on mobile or desktop viewports
|
||||
*/
|
||||
function useDocTOC() {
|
||||
const { frontMatter, toc } = useDoc()
|
||||
const windowSize = useWindowSize()
|
||||
|
||||
const hidden = frontMatter.hide_table_of_contents
|
||||
const canRender = !hidden && toc.length > 0
|
||||
|
||||
const mobile = canRender ? <DocItemTOCMobile /> : undefined
|
||||
|
||||
const desktop =
|
||||
canRender && (windowSize === "desktop" || windowSize === "ssr") ? (
|
||||
<DocItemTOCDesktop />
|
||||
) : undefined
|
||||
|
||||
return {
|
||||
hidden,
|
||||
mobile,
|
||||
desktop,
|
||||
}
|
||||
}
|
||||
|
||||
export default function DocItemLayout({ children }: Props): JSX.Element {
|
||||
const docTOC = useDocTOC()
|
||||
return (
|
||||
<div className="row tw-m-0">
|
||||
<div
|
||||
className={clsx(
|
||||
"col",
|
||||
"tw-my-0 tw-mx-auto tw-max-w-main-content tw-w-full tw-ml-auto lg:tw-py-0 lg:tw-px-4 tw-py-0 tw-px-1",
|
||||
!docTOC.hidden && "xxl:tw-w-10/12 tw-w-9/12"
|
||||
)}
|
||||
>
|
||||
<DocVersionBanner />
|
||||
<div>
|
||||
<article className={clsx("[&>*:first-child]:tw-mt-0")}>
|
||||
<DocBreadcrumbs />
|
||||
<DocVersionBadge />
|
||||
{docTOC.mobile}
|
||||
<DocItemContent>{children}</DocItemContent>
|
||||
<DocItemFooter />
|
||||
</article>
|
||||
<DocItemPaginator />
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
{docTOC.desktop && (
|
||||
<div className="col toc-wrapper">{docTOC.desktop}</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
.docItemContainer header + *,
|
||||
.docItemContainer article > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1441px) {
|
||||
.docItemCol {
|
||||
width: calc(10 / 12 * 100%);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1440px) {
|
||||
.docItemCol {
|
||||
width: calc(9 / 12 * 100%);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user