From f507f1ad9f994bd2f1b2e0e9dd3c1bc2e540e897 Mon Sep 17 00:00:00 2001
From: Animenosekai <40539549+Animenosekai@users.noreply.github.com>
Date: Mon, 27 Jun 2022 15:15:52 +0200
Subject: [PATCH] [update] docs responsiveness
---
website/components/common/colorful.tsx | 5 +---
website/components/ui/markdown/code.tsx | 2 +-
website/components/ui/modals/hamburger.tsx | 17 ++++++++++-
website/pages/documentation/[...path].tsx | 34 +++++++++++++++-------
4 files changed, 42 insertions(+), 16 deletions(-)
diff --git a/website/components/common/colorful.tsx b/website/components/common/colorful.tsx
index 57094990..2ab0f5e3 100644
--- a/website/components/common/colorful.tsx
+++ b/website/components/common/colorful.tsx
@@ -35,10 +35,7 @@ export const Colorful = ({ value, interval, backward, colors, ...props }: Colorf
return
{
range(value.length).map((position, i) => {
- let currentPosition = position
- if (backward) {
- currentPosition = (value.length - position)
- }
+ const currentPosition = backward ? (value.length - position) : position
let currentIteration = iteration - currentPosition
if (currentIteration < 0) {
currentIteration = 0
diff --git a/website/components/ui/markdown/code.tsx b/website/components/ui/markdown/code.tsx
index 86342cd0..05513539 100644
--- a/website/components/ui/markdown/code.tsx
+++ b/website/components/ui/markdown/code.tsx
@@ -12,7 +12,7 @@ export const CodeBlock = ({ node, inline, className, children, ...props }) => {
{children}
:
{
return
@@ -18,6 +20,16 @@ export const HamburgerMenuElement = ({ href, name, ...props }: any) => {
export const HamburgerModal = ({ onClose, ...props }) => {
const { strings } = useLanguage();
const [exit, setExit] = useState(true);
+ const { pathname } = useRouter();
+ const [showTOC, setShowTOC] = useState(false);
+
+ useEffect(() => {
+ if (["/documentation", "/documentation/[...path]"].includes(pathname)) {
+ setShowTOC(true);
+ } else {
+ setShowTOC(false);
+ }
+ }, [pathname])
useEffect(() => {
setExit(false);
@@ -45,11 +57,14 @@ export const HamburgerModal = ({ onClose, ...props }) => {
{/* Menu */}
-
+
+ {
+ showTOC &&
+ }
diff --git a/website/pages/documentation/[...path].tsx b/website/pages/documentation/[...path].tsx
index 3614c132..d87ae9da 100644
--- a/website/pages/documentation/[...path].tsx
+++ b/website/pages/documentation/[...path].tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { HTMLAttributes, useEffect, useState } from 'react'
import { Colorful } from 'components/common/colorful'
import Configuration from 'config'
@@ -14,6 +14,26 @@ import remarkGfm from 'remark-gfm'
import { useLanguage } from 'contexts/language'
import { useRouter } from 'next/router'
+export const TOC = ({ ...props }: HTMLAttributes
) => {
+ const { strings } = useLanguage();
+ const { query } = useRouter();
+ const [path, setPath] = useState((query.path as string[]) || []);
+
+ useEffect(() => {
+ setPath((query.path as string[]) || [])
+ }, [query])
+
+ return
+ {
+ strings.documentation
+ ? strings.documentation.map((value, i) => {
+ return
+ })
+ : ""
+ }
+
+}
+
const Documentation: NextPage = () => {
const { strings } = useLanguage();
const router = useRouter();
@@ -54,21 +74,15 @@ const Documentation: NextPage = () => {
return
-
+
translatepy {}
- {
- strings.documentation
- ? strings.documentation.map((value, i) => {
- return
- })
- : ""
- }
+
-