You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@apisix.apache.org by gu...@apache.org on 2022/07/06 06:47:06 UTC
[apisix-website] branch master updated: refactor: NotFound page (#1190)
This is an automated email from the ASF dual-hosted git repository.
guoqi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-website.git
The following commit(s) were added to refs/heads/master by this push:
new 4be9b96b992 refactor: NotFound page (#1190)
4be9b96b992 is described below
commit 4be9b96b992e26346e39e9d2d62865f044cf073f
Author: Young <is...@outlook.com>
AuthorDate: Wed Jul 6 14:47:00 2022 +0800
refactor: NotFound page (#1190)
---
website/package.json | 1 +
website/src/theme/NotFound/Fitty.tsx | 65 +++++++++++++++++++++++++++
website/src/theme/NotFound/fit.css | 9 ++++
website/src/theme/NotFound/index.tsx | 56 +++++++++++++++++++++++
website/src/theme/NotFound/styles.module.scss | 46 +++++++++++++++++++
yarn.lock | 5 +++
6 files changed, 182 insertions(+)
diff --git a/website/package.json b/website/package.json
index a6a1216971e..feeebf0178c 100644
--- a/website/package.json
+++ b/website/package.json
@@ -36,6 +36,7 @@
"change-case": "^4.1.2",
"clsx": "^1.1.1",
"docusaurus-plugin-sass": "^0.2.2",
+ "fitty": "^2.3.6",
"gsap": "^3.7.1",
"raw-loader": "^4.0.2",
"rc-image": "^5.6.2",
diff --git a/website/src/theme/NotFound/Fitty.tsx b/website/src/theme/NotFound/Fitty.tsx
new file mode 100644
index 00000000000..ed70f37e5de
--- /dev/null
+++ b/website/src/theme/NotFound/Fitty.tsx
@@ -0,0 +1,65 @@
+/* eslint-disable react/require-default-props */
+import type {
+ ElementType,
+ FC, HTMLAttributes, MutableRefObject,
+} from 'react';
+import React, { forwardRef } from 'react';
+import fitty from 'fitty';
+import './fit.css';
+import clsx from 'clsx';
+
+type FittyComponentProps = HTMLAttributes<HTMLDivElement> & {
+ tagName: string;
+ wrapText?: boolean;
+}
+
+type ElRef = MutableRefObject<HTMLElement>
+
+const FittyComponent: FC<FittyComponentProps> = (
+ props,
+ ref?: ElRef,
+) => {
+ const {
+ tagName, children, wrapText = false, className, ...rest
+ } = props;
+ const minSize = 10;
+ const maxSize = 512;
+ const Tag = tagName as ElementType;
+ const internalRef = React.useRef<HTMLElement>(null);
+ const correctRef = ref || internalRef;
+
+ React.useLayoutEffect(() => {
+ const effectRef = ref || internalRef;
+ const fitInstance = fitty(effectRef?.current, {
+ minSize,
+ maxSize,
+ multiLine: wrapText,
+ observeMutations: {
+ subtree: true,
+ childList: true,
+ characterData: true,
+ attributeFilter: ['class'],
+ },
+ });
+
+ requestAnimationFrame(() => {
+ fitInstance.fit();
+ });
+
+ return () => {
+ fitty(effectRef.current!).unsubscribe();
+ };
+ }, []);
+
+ return (
+ <Tag className={clsx('fit-wrapper', className)}>
+ <span className="fit" ref={correctRef} {...rest}>
+ {children}
+ </span>
+ </Tag>
+ );
+};
+
+const Fitty = forwardRef<HTMLElement, FittyComponentProps>(FittyComponent as any);
+
+export default Fitty;
diff --git a/website/src/theme/NotFound/fit.css b/website/src/theme/NotFound/fit.css
new file mode 100644
index 00000000000..d61ccd8f733
--- /dev/null
+++ b/website/src/theme/NotFound/fit.css
@@ -0,0 +1,9 @@
+.fit-wrapper {
+ display: block;
+ width: 100%;
+}
+
+.fit {
+ display: inline-block;
+ white-space: nowrap;
+}
diff --git a/website/src/theme/NotFound/index.tsx b/website/src/theme/NotFound/index.tsx
new file mode 100644
index 00000000000..f8c6490bf6d
--- /dev/null
+++ b/website/src/theme/NotFound/index.tsx
@@ -0,0 +1,56 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import type { FC } from 'react';
+import React from 'react';
+import Layout from '@theme/Layout';
+import { translate } from '@docusaurus/Translate';
+import Link from '@docusaurus/Link';
+import style from './styles.module.scss';
+import Fitty from './Fitty';
+
+const NotFound: FC = () => (
+ <Layout
+ title={translate({
+ id: 'theme.NotFound.title',
+ message: 'Page Not Found',
+ })}
+ >
+ <main className={style.container}>
+ <section>
+ <Fitty tagName="h1" contentEditable>404</Fitty>
+ <Fitty tagName="h2">
+ Page Not Found
+ </Fitty>
+ </section>
+ <p>
+ We could not find what you were looking for.
+ </p>
+ <p>
+ If you think this link should not be broken, please
+ {' '}
+ <Link href="https://github.com/apache/apisix-website/issues/new/choose" target="_blank" rel="noreferrer">submit an Issue</Link>
+ .
+ </p>
+ <p>
+ You can also return to
+ {' '}
+ <Link href="/">
+ the home page
+ </Link>
+ . Or, return to
+ {' '}
+ <a
+ role="button"
+ href="#"
+ onClick={() => {
+ window?.history.back();
+ }}
+ >
+ the source page
+ </a>
+ .
+ </p>
+ </main>
+ </Layout>
+);
+
+export default NotFound;
diff --git a/website/src/theme/NotFound/styles.module.scss b/website/src/theme/NotFound/styles.module.scss
new file mode 100644
index 00000000000..10ddfc6cd04
--- /dev/null
+++ b/website/src/theme/NotFound/styles.module.scss
@@ -0,0 +1,46 @@
+@import "../../css/util";
+
+.container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: fit-content;
+ margin: 8rem auto;
+
+ p {
+ margin-bottom: 0.8em;
+ }
+
+ a {
+ color: var(--color-primary);
+ text-decoration: none;
+ }
+
+ section {
+ width: 200px;
+
+ h1,
+ h2 {
+ font-family: sans-serif;
+ }
+
+ h1 {
+ font-size: 119px;
+ }
+
+ h2 {
+ font-size: 26px;
+ margin-top: -32px;
+ }
+ }
+
+ @include respond-below(sm) {
+ margin: 0 1rem;
+ align-items: flex-start;
+
+ section {
+ width: 160px;
+ margin-top: 2rem;
+ }
+ }
+}
diff --git a/yarn.lock b/yarn.lock
index cdcb9cc0586..06688ed9b9e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5133,6 +5133,11 @@ find-up@^5.0.0:
locate-path "^6.0.0"
path-exists "^4.0.0"
+fitty@^2.3.6:
+ version "2.3.6"
+ resolved "https://registry.yarnpkg.com/fitty/-/fitty-2.3.6.tgz#1dc2f3fbf6ffd4766b4fdd8b3d55a0cb01334ed1"
+ integrity sha512-ENp/+MqqYmXBGHC0dlltCX75+5zL5m0uiIGCgYdoThao99BrJpNYzEh3xrvhiy4b7O5X82CQT7dPTiB53H6stw==
+
flat-cache@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"