This is an automated email from the ASF dual-hosted git repository.
juzhiyuan 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 1320ab194f5 feat: disable page auto redirection to avoid not good UX
(#1152)
1320ab194f5 is described below
commit 1320ab194f5510975820d164421afe212d443ab1
Author: Young <[email protected]>
AuthorDate: Tue Jun 14 17:45:19 2022 +0800
feat: disable page auto redirection to avoid not good UX (#1152)
---
website/docusaurus.config.js | 4 -
website/src/clientModules/amend-lang-switch.js | 47 --------
website/src/clientModules/lang-redirect.js | 134 ---------------------
.../NavbarItem/LocaleDropdownNavbarItem/index.tsx | 82 +++++++++++++
.../LocaleDropdownNavbarItem/styles.module.css | 11 ++
5 files changed, 93 insertions(+), 185 deletions(-)
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 3449276d5cb..b5dbfb18e30 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -449,8 +449,4 @@ module.exports = {
* See ssrTemplate -> jsDelivr
*/
ssrTemplate,
- clientModules: [
- require.resolve('./src/clientModules/lang-redirect.js'),
- require.resolve('./src/clientModules/amend-lang-switch.js'),
- ],
};
diff --git a/website/src/clientModules/amend-lang-switch.js
b/website/src/clientModules/amend-lang-switch.js
deleted file mode 100644
index 12d2c82ad08..00000000000
--- a/website/src/clientModules/amend-lang-switch.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
-
-(() => {
- // dev mode
- if (process.env.NODE_ENV === 'development') return;
- // not in browser
- if (!ExecutionEnvironment.canUseDOM) return;
-
- function amendLangSwitch() {
- const lct = window.location;
- const pathArr = lct.pathname.split('/');
-
- const dropdowns = document.querySelectorAll('div.navbar__items >
div.dropdown.dropdown--right');
- const langDropdown = dropdowns[dropdowns.length - 1];
- const barOption = langDropdown.querySelector('a');
-
- if (pathArr.includes('blog') && !barOption.textContent.endsWith('Blog')) {
- barOption.textContent += ' Blog';
- const optionList = langDropdown.querySelectorAll('li > a');
- optionList.forEach((item) => {
- // eslint-disable-next-line no-param-reassign
- item.textContent += ' Blog';
- });
- }
- }
-
- // because of SPA, if the location changed (in site, no redirect),
- // the above click event will also be cleared
- // doc https://docusaurus.io/docs/docusaurus-core#redirect=
- // and https://reactrouter.com/docs/en/v6/getting-started/concepts#history=
- // were browsed, but not fix the problem
- // now, the solution is observing the head.title
- // the code inspired by https://stackoverflow.com/a/29540461
- function rebindWhenTitleChanged() {
- new MutationObserver(amendLangSwitch)
- .observe(document.querySelector('#__docusaurus'), {
- subtree: true,
- characterData: true,
- childList: true,
- });
- }
-
- window.addEventListener('load', () => {
- amendLangSwitch();
- rebindWhenTitleChanged();
- });
-})();
diff --git a/website/src/clientModules/lang-redirect.js
b/website/src/clientModules/lang-redirect.js
deleted file mode 100644
index 046fbbf12f5..00000000000
--- a/website/src/clientModules/lang-redirect.js
+++ /dev/null
@@ -1,134 +0,0 @@
-import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
-
-import config from '../../docusaurus.config';
-
-(() => {
- // dev mode
- if (process.env.NODE_ENV === 'development') return;
- // not in browser
- if (!ExecutionEnvironment.canUseDOM) return;
-
- const langArr = config.i18n.locales;
- const defaultLang = config.i18n.defaultLocale;
-
- const followSystem = 'follow_system';
- const storeKey = 'localLang-20220529';
-
- // transform locale label
- const localeLabelMap = {};
- {
- const localConfigs = config.i18n.localeConfigs;
- Object.keys(localConfigs).forEach((key) => {
- if (Object.hasOwnProperty.call(localConfigs, key) &&
localConfigs[key].label) {
- localeLabelMap[localConfigs[key].label] = key;
- }
- });
- }
-
- function redirect() {
- const localLang = localStorage.getItem(storeKey) || 'en';
- const lct = window.location;
- const pathArr = lct.pathname.split('/');
- const curLang = langArr.includes(pathArr[1]) ? pathArr[1] : defaultLang;
-
- // no need redirect
- if (curLang === localLang) return;
-
- let exactLang;
- {
- // reset if not valid
- exactLang = langArr.includes(localLang) ? localLang : followSystem;
-
- // follow system, detect browser language
- if (exactLang === followSystem) {
- const nav = window.navigator;
- exactLang = [
- nav.language,
- ...nav.languages,
- nav.userLanguage,
- nav.systemLanguage,
- ]
- .map((lang) => lang?.split('-')[0])
- .filter((lang) => langArr.includes(lang))[0] || defaultLang;
- }
- }
-
- // update localStorage val
- if (localLang !== exactLang) {
- localStorage.setItem(storeKey, exactLang);
- }
-
- // redirect
- if (curLang !== exactLang) {
- // recheck lang
- if (langArr.includes(pathArr[1])) {
- // path like /zh/path
- if (exactLang === defaultLang) {
- // to /path
- pathArr.splice(1, 1);
- } else {
- // to /fr/path
- pathArr[1] = exactLang;
- }
- } else {
- if (exactLang !== defaultLang) {
- pathArr.splice(1, 0, exactLang);
- } else {
- return;
- }
- }
- // all ''
- if (pathArr.at(-1) === pathArr.at(-2)) pathArr.pop();
-
- // blog page: redirect to index
- if (pathArr.includes('blog')) {
- lct.replace(lct.origin + pathArr.slice(0, pathArr.indexOf('blog') +
1).join('/'));
- } else {
- // other pages
- lct.replace(lct.origin + pathArr.join('/'));
- }
- }
- }
-
- function bindEventToLangSwitch() {
- // add click event to locale menu
- const dropDowns = document.querySelectorAll('div.navbar__items >
div.dropdown.dropdown--right > ul');
- if (dropDowns.length) {
- dropDowns[dropDowns.length - 1].addEventListener(
- 'click',
- (e) => {
- e.preventDefault();
- const targetLang = e.target.getAttribute('href').split('/')[1];
- const lang = langArr.includes(targetLang) ? targetLang : defaultLang;
- if (localStorage.getItem(storeKey) !== lang) {
- localStorage.setItem(storeKey, lang);
- }
- redirect();
- },
- );
- }
- }
-
- // because of SPA, if the location changed (in site, no redirect),
- // the above click event will also be cleared
- // doc https://docusaurus.io/docs/docusaurus-core#redirect=
- // and https://reactrouter.com/docs/en/v6/getting-started/concepts#history=
- // were browsed, but not fix the problem
- // now, the solution is observing the head.title
- // the code inspired by https://stackoverflow.com/a/29540461
- function rebindWhenTitleChanged() {
- const lct = window.location;
- const pathArr = lct.pathname.split('/');
- const ele = document.querySelector(pathArr.includes('blog') ?
'#__docusaurus' : 'title');
- new MutationObserver(bindEventToLangSwitch)
- .observe(ele, {
- subtree: true,
- characterData: true,
- childList: true,
- });
- }
-
- redirect();
- bindEventToLangSwitch();
- rebindWhenTitleChanged();
-})();
diff --git a/website/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
b/website/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
new file mode 100644
index 00000000000..ad0646727a2
--- /dev/null
+++ b/website/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { FC } from 'react';
+import React from 'react';
+import type { Props } from '@theme/NavbarItem/DropdownNavbarItem';
+import type { LinkLikeNavbarItemProps } from '@theme/NavbarItem';
+import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
+import IconLanguage from '@theme/IconLanguage';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { useAlternatePageUtils } from '@docusaurus/theme-common';
+import { useLocation } from '@docusaurus/router';
+import styles from './styles.module.css';
+
+interface LocaleDropdownNavbarItemProps extends Omit<Props, 'items'>{
+ readonly dropdownItemsBefore: readonly LinkLikeNavbarItemProps[],
+ readonly dropdownItemsAfter: readonly LinkLikeNavbarItemProps[]
+}
+
+const LocaleDropdownNavbarItem: FC<LocaleDropdownNavbarItemProps> = (props) =>
{
+ const {
+ mobile,
+ dropdownItemsBefore,
+ dropdownItemsAfter,
+ ...others
+ } = props;
+ const {
+ i18n: { currentLocale, locales, localeConfigs },
+ } = useDocusaurusContext();
+ const alternatePageUtils = useAlternatePageUtils();
+ const { pathname } = useLocation();
+
+ if (pathname.startsWith('/zh/blog') || pathname.startsWith('/blog')) {
+ return null;
+ }
+
+ function getLocaleLabel(locale) {
+ return localeConfigs[locale].label;
+ }
+
+ const localeItems = locales.map((locale) => {
+ const to = `pathname://${alternatePageUtils.createUrl({
+ locale,
+ fullyQualified: false,
+ })}`;
+ return {
+ isNavLink: true,
+ label: getLocaleLabel(locale),
+ to,
+ target: '_self',
+ autoAddBaseUrl: false,
+ className: locale === currentLocale ? 'dropdown__link--active' : '',
+ style: {
+ textTransform: 'capitalize',
+ },
+ };
+ });
+ // Mobile is handled a bit differently
+ const items = [...dropdownItemsBefore, ...localeItems,
...dropdownItemsAfter];
+
+ const dropdownLabel = mobile ? 'Languages' : getLocaleLabel(currentLocale);
+ return (
+ <DropdownNavbarItem
+ {...others}
+ href="#"
+ mobile={mobile}
+ label={(
+ <span>
+ <IconLanguage className={styles.iconLanguage} />
+ <span>{dropdownLabel}</span>
+ </span>
+ )}
+ items={items}
+ />
+ );
+};
+
+export default LocaleDropdownNavbarItem;
diff --git
a/website/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css
b/website/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css
new file mode 100644
index 00000000000..ef086390beb
--- /dev/null
+++ b/website/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.iconLanguage {
+ vertical-align: text-bottom;
+ margin-right: 5px;
+}
