From f4d44bbbf5488e7f2cf6c2c1202cb7404d7be882 Mon Sep 17 00:00:00 2001 From: Kelly Harrop Date: Mon, 6 Jul 2020 18:12:34 -0500 Subject: [PATCH] styling changes for dark mode and other enhancements --- docs/pages/index.mdx | 7 +- src/components/mdx-components.tsx | 247 ++++++++++++++++-------------- src/components/navbar.tsx | 46 +++--- src/layouts/home-page.tsx | 58 ++++--- 4 files changed, 181 insertions(+), 177 deletions(-) diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx index 00ec725e..69dda85d 100644 --- a/docs/pages/index.mdx +++ b/docs/pages/index.mdx @@ -1,9 +1,10 @@ --- -tagline: "The most flexible documentation website you've ever used" +tagline: "The most flexible documentation website you've ever used." +cta: 'Check out the docs' --- -`ignite` is a thin wrapper around next-js and `next-mdx-enhanced`. +`ignite` is a thin wrapper around `next-js` and `next-mdx-enhanced`. It is essentially two things: -- A CLI for using `ignite` as a documentation generator +- A CLI for using `ignite` as a documentation generator - A convention and a set of functions. The `ignite` package exports everything you need to use it in any `next.js` application! diff --git a/src/components/mdx-components.tsx b/src/components/mdx-components.tsx index 1e224e0a..24b277be 100644 --- a/src/components/mdx-components.tsx +++ b/src/components/mdx-components.tsx @@ -1,8 +1,8 @@ -import React from "react"; -import makeClass from "clsx"; -import { MDXProviderComponents } from "@mdx-js/react"; -import { prefixURL } from "next-prefixed"; -import useLayoutEffect from "@react-hook/passive-layout-effect"; +import React from 'react'; +import makeClass from 'clsx'; +import { MDXProviderComponents } from '@mdx-js/react'; +import { prefixURL } from 'next-prefixed'; +import useLayoutEffect from '@react-hook/passive-layout-effect'; declare var PROJECT_NAME: string; declare var PROJECT_LOGO: string; @@ -12,7 +12,7 @@ export type Element< T extends keyof JSX.IntrinsicElements > = React.PropsWithoutRef; -const storageKey = "IGNITE_PAGE_POSITION"; +const storageKey = 'IGNITE_PAGE_POSITION'; interface MobileMenuButtonProps { open: boolean; @@ -25,11 +25,11 @@ const MobileMenuButton = ({ setOpen, className, ...props -}: MobileMenuButtonProps & Element<"button">) => ( +}: MobileMenuButtonProps & Element<'button'>) => ( @@ -58,7 +58,7 @@ const MobileMenuButton = ({ /** The logo in the navbar */ const Logo = React.forwardRef( ( - { className, ...props }: Element<"a">, + { className, ...props }: Element<'a'>, ref: React.Ref ) => ( - + {`${PROJECT_NAME} - {PROJECT_NAME} + + {PROJECT_NAME} + ) ); -/** The component use to search the mdx. */ -const SearchInput = ({ className, ...props }: Element<"input">) => ( +/** The component used to search the mdx. */ +const SearchInput = ({ className, ...props }: Element<'input'>) => ( ); /** The component used to render the wrapper around the navbar */ -const NavBarWrapper = ({ className, ...props }: Element<"div">) => ( +const NavBarWrapper = ({ className, ...props }: Element<'div'>) => (
) => ( ); /** The component used to render the navbar */ -const NavBar = ({ className, ...props }: Element<"div">) => ( +const NavBar = ({ className, ...props }: Element<'div'>) => (
) => ( /** The component used to render a top-level navigation item */ const NavBarItem = React.forwardRef( ( - { className, children, ...props }: Element<"a">, + { className, children, ...props }: Element<'a'>, ref: React.Ref ) => ( -
{children}
+
{children}
 ) ); /** The component used to render the sidebar */ -const Sidebar = ({ className, ...props }: Element<"div">) => { +const Sidebar = ({ className, ...props }: Element<'div'>) => { const ref = React.useRef(); useLayoutEffect(() => { @@ -168,17 +168,17 @@ const Sidebar = ({ className, ...props }: Element<"div">) => { ref.current.scrollTop = position; } - localStorage.setItem(storageKey, "0"); + localStorage.setItem(storageKey, '0'); }, []); return (
@@ -186,11 +186,11 @@ const Sidebar = ({ className, ...props }: Element<"div">) => { }; /** The component used to render a divider in the sidebar */ -const SidebarDivider = ({ className, ...props }: Element<"hr">) => ( +const SidebarDivider = ({ className, ...props }: Element<'hr'>) => (
) => ( ); /** The component used to render a title in the sidebar */ -const SidebarTitle = ({ className, ...props }: Element<"p">) => ( +const SidebarTitle = ({ className, ...props }: Element<'p'>) => (

) => ( ); /** The component used to render around a link in the sidebar */ -const SidebarItemWrapper = ({ className, ...props }: Element<"li">) => ( -

  • +const SidebarItemWrapper = ({ className, ...props }: Element<'li'>) => ( +
  • ); /** The component used to render around a list of sidebar items */ -const SidebarList = (props: Element<"ul">) =>