init

.circleci/config.yml

@@ -0,0 +1,14 @@
+# This config is equivalent to both the '.circleci/extended/orb-free.yml' and the base '.circleci/config.yml'
+version: 2.1
+
+orbs:
+  node: circleci/[email protected]
+
+workflows:
+  sample:
+    jobs:
+      - node/test:
+          version: '15.1'
+          # This is the node version to use for the `cimg/node` tag
+          # Relevant tags can be found on the CircleCI Developer Hub
+          # https://circleci.com/developer/images/image/cimg/node

.dumi/theme/components/LocaleSelect.less

@@ -0,0 +1,48 @@
+@import (reference) '../style/variables.less';
+
+.@{prefix}-locale-select {
+	position: relative;
+	display: inline-block;
+	border: 1px solid #dadadf;
+	border-radius: 14px;
+	transition: background 0.2s;
+
+	&:hover {
+		background-color: #fafafa;
+	}
+
+	&:not([data-locale-count='1']):not([data-locale-count='2'])::after {
+		content: '';
+		position: absolute;
+		top: 50%;
+		right: 10px;
+		margin-top: -3px;
+		width: 0;
+		height: 0;
+		border: 4px solid transparent;
+		border-top: 6px solid #7b7f8d;
+		pointer-events: none;
+	}
+
+	a,
+	span,
+	select {
+		padding: 0 24px 0 16px;
+		height: 28px;
+		text-align: center;
+		text-decoration: none;
+		line-height: 28px;
+		appearance: none;
+		border: 0;
+		font-size: 16px;
+		color: #7b7f8d;
+		background: transparent;
+		outline: none;
+		cursor: pointer;
+	}
+
+	a,
+	span {
+		padding-right: 16px;
+	}
+}

.dumi/theme/components/LocaleSelect.tsx

@@ -0,0 +1,67 @@
+import { FC } from 'react';
+import React, { useContext } from 'react';
+// @ts-ignore
+import { history } from 'dumi';
+import { context, Link } from 'dumi/theme';
+import './LocaleSelect.less';
+
+const LocaleSelect: FC<{ location: any }> = ({ location }) => {
+	const {
+		base,
+		locale,
+		config: { locales },
+	} = useContext(context);
+	const firstDiffLocale = locales.find(({ name }) => name !== locale);
+
+	function getLocaleTogglePath(target: string) {
+		const baseWithoutLocale = base.replace(`/${locale}`, '');
+		const pathnameWithoutLocale =
+			location.pathname.replace(base, baseWithoutLocale) || '/';
+
+		// append locale prefix to path if it is not the default locale
+		if (target !== locales[0].name) {
+			// compatiable with integrate route prefix /~docs
+			const routePrefix = `${baseWithoutLocale}/${target}`.replace(
+				/\/\//,
+				'/',
+			);
+			const pathnameWithoutBase = location.pathname.replace(
+				// to avoid stripped the first /
+				base.replace(/^\/$/, '//'),
+				'',
+			);
+
+			return `${routePrefix}${pathnameWithoutBase}`.replace(/\/$/, '');
+		}
+
+		return pathnameWithoutLocale;
+	}
+
+	return firstDiffLocale ? (
+		<div
+			className="__dumi-default-locale-select"
+			data-locale-count={locales.length}
+		>
+			{locales.length > 2 ? (
+				<select
+					value={locale}
+					onChange={(ev) =>
+						history.push(getLocaleTogglePath(ev.target.value))
+					}
+				>
+					{locales.map((localeItem) => (
+						<option value={localeItem.name} key={localeItem.name}>
+							{localeItem.label}
+						</option>
+					))}
+				</select>
+			) : (
+				<Link to={getLocaleTogglePath(firstDiffLocale.name)}>
+					{firstDiffLocale.label}
+				</Link>
+			)}
+		</div>
+	) : null;
+};
+
+export default LocaleSelect;

.dumi/theme/components/NavRight.less

@@ -0,0 +1,17 @@
+@import (reference) '../style/variables.less';
+
+.@{prefix}-nav-right {
+	position: relative;
+	flex: 1 1;
+	justify-content: flex-end;
+	display: flex;
+	align-items: center;
+
+	@media @mobile {
+		position: absolute;
+		display: block;
+		align-items: center;
+		top: 0;
+		right: 0;
+	}
+}

.dumi/theme/components/NavRight.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import SearchBar from './SearchBar';
+import './NavRight.less';
+
+export default () => {
+	return (
+		<div className="__dumi-default-nav-right">
+			<SearchBar />
+		</div>
+	);
+};

.dumi/theme/components/Navbar.less

@@ -0,0 +1,173 @@
+@import (reference) '../style/variables.less';
+
+.@{prefix}-navbar {
+	position: fixed;
+	z-index: 101;
+	top: 0;
+	left: 0;
+	right: 0;
+	display: none;
+	align-items: center;
+	padding: 0 14px;
+	height: @s-nav-height;
+	white-space: nowrap;
+	background: #fff;
+	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
+	z-index: 9999;
+
+	@media @mobile {
+		display: flex;
+		justify-content: center;
+		height: @s-mobile-nav-height;
+	}
+
+	&-toggle {
+		position: absolute;
+		top: 14px;
+		left: 16px;
+		display: none;
+		width: 22px;
+		height: 22px;
+		border: 0;
+		outline: none;
+		background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAA4CAYAAAB5YT9uAAAAAXNSR0IArs4c6QAAASVJREFUeAHt3DuOwjAUBVAHscWZjaSkAIqU2QjskV80QwpsF3ArdGiw3hW3OGnQM2Iof6/dfr7+n71/LjAdx+HRsvm8SkNPAHBPJ5ABDiD2KgD3dAIZ4ABirwJwTyeQAQ4g9ioA93QC2fbZsSm/z7MDAQIECBAgQIAAAQIECBAgQIAAAQKvAsvV8mO8O8yn19jkXYHpMC7byXVdeS0/75b5XFvAwr1tE0kARxjbJYDbNpEEcISxXQK4bRNJAEcY2yWA2zaRZP0ePJRzpFEJAQIECBAgQIAAAQIECBAgQIAAgW8VWK/tj7Nb5eBTnvbjsp1c15WX4ncRQeB7lb8zyHrW29xo1F1iU8AxynoR4LpLbAo4RlkvAlx3iU0BxyjrRYDrLrHpDVSAEEPXScHTAAAAAElFTkSuQmCC')
+			no-repeat center / contain;
+
+		@media @mobile {
+			display: block;
+		}
+	}
+
+	&-logo {
+		display: inline-block;
+		height: 40px;
+		color: #080e29;
+		font-weight: 500;
+		text-decoration: none;
+		font-size: 18px;
+		line-height: 40px;
+
+		&:not([data-plaintext]) {
+			padding-left: 56px;
+			background: url(@img-logo) no-repeat 0 / contain;
+		}
+
+		&:active,
+		&:hover {
+			color: #080e29;
+		}
+
+		@media @mobile {
+			height: 28px;
+			line-height: 28px;
+
+			&:not([data-plaintext]) {
+				padding-left: 36px;
+			}
+		}
+	}
+
+	nav {
+		margin-left: 20px;
+		display: flex;
+		> span {
+			position: relative;
+			margin-left: 40px;
+			display: inline-block;
+			color: @c-text;
+			height: @s-nav-height;
+			cursor: pointer;
+			font-size: 14px;
+			line-height: @s-nav-height;
+			text-decoration: none;
+			letter-spacing: 0;
+
+			> a {
+				color: #4d5164;
+				text-decoration: none;
+
+				&:hover,
+				&.active {
+					color: @c-primary;
+				}
+
+				&::before {
+					content: '';
+					position: absolute;
+					top: 0;
+					bottom: 0;
+					right: -18px;
+					left: -18px;
+				}
+
+				&.active::after {
+					content: '';
+					position: absolute;
+					bottom: 0;
+					left: -2px;
+					right: -2px;
+					height: 2px;
+					background-color: @c-primary;
+					border-radius: 1px;
+				}
+			}
+
+			+ *:not(a) {
+				margin-left: 40px;
+			}
+
+			// second nav
+			> ul {
+				list-style: none;
+				position: absolute;
+				top: 100%;
+				left: 50%;
+				margin: 0;
+				min-width: 100px;
+				padding: 8px 18px;
+				line-height: 2;
+				background-color: #fff;
+				box-shadow: 0 8px 24px -2px rgba(0, 0, 0, 0.08);
+				transform: translate(-50%);
+				transform-origin: top;
+				border-radius: 1px;
+				transition: all 0.2s;
+
+				a {
+					position: relative;
+					display: block;
+					color: @c-text;
+					text-decoration: none;
+
+					&:hover,
+					&.active {
+						color: @c-primary;
+					}
+				}
+			}
+
+			&:not(:hover) > ul {
+				visibility: hidden;
+				pointer-events: none;
+				transform: translate(-50%) scaleY(0.9);
+				opacity: 0;
+			}
+		}
+
+		.@{prefix}-search + .@{prefix}-locale-select {
+			margin-left: 40px;
+		}
+
+		@media @mobile {
+			> a,
+			> span,
+			> div {
+				display: none;
+			}
+		}
+	}
+
+	&[data-mode='site'] {
+		display: flex;
+	}
+}