mirror/checktheroads-hyperglass
1
0
Fork 0
mirror of https://github.com/checktheroads/hyperglass synced 2024-05-11 05:55:08 +00:00
Code Releases Activity

fix Microsoft Edge compatibility

Browse Source
This commit is contained in:
checktheroads
2020-05-02 13:38:00 -07:00
parent b2de8a71ac
commit 51d3804d07
4 changed files with 186 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
hyperglass/ui/components/Header.js
View File

@@ -61,7 +61,7 @@ const widthMap = {
all: ["90%", "90%", "25%", "25%"]
};
export default ({ layoutRef, ...props }) => {
const Header = ({ layoutRef, ...props }) => {
const { colorMode, toggleColorMode } = useColorMode();
const { web } = useConfig();
const { mediaSize } = useMedia();
@@ -175,3 +175,7 @@ export default ({ layoutRef, ...props }) => {
</Flex>
);
};
Header.displayName = "Header";
export default Header;

128
hyperglass/ui/components/Meta.js
View File

@@ -4,64 +4,72 @@ import { useTheme } from "@chakra-ui/core";
import useConfig from "~/components/HyperglassProvider";
import { googleFontUrl } from "~/util";
export default () => {
const config = useConfig();
const theme = useTheme();
const [location, setLocation] = useState({});
const title = config?.org_name || "hyperglass";
const description = config?.site_description || "The modern looking glass.";
const siteName = `${title} - ${description}`;
const keywords = config?.site_keywords || [
"hyperglass",
"looking glass",
"lg",
"peer",
"peering",
"ipv4",
"ipv6",
"transit",
"community",
"communities",
"bgp",
"routing",
"network",
"isp"
];
const author = config?.org_name || "Matt Love, matt@hyperglass.io";
const language = config?.language || "en";
const currentYear = new Date().getFullYear();
const copyright = config ? `${currentYear} ${config.org_name}` : `${currentYear} hyperglass`;
const ogImage = config?.web.opengraph.image || null;
const ogImageHeight = config?.web.opengraph.height || null;
const ogImageWidth = config?.web.opengraph.width || null;
const primaryFont = googleFontUrl(theme.fonts.body);
const monoFont = googleFontUrl(theme.fonts.mono);
useEffect(() => {
setLocation(window.location);
});
return (
<Head>
<title>{title}</title>
<meta charSet="UTF-8" />
<meta httpEquiv="Content-Type" content="text/html" />
<meta name="hg-version" content={config.hyperglass_version} />
<meta name="description" content={description} />
<meta name="keywords" content={keywords.join(", ")} />
<meta name="author" content={author} />
<meta name="language" content={language} />
<meta name="copyright" content={copyright} />
<meta name="url" content={location.href} />
<meta name="og:title" content={title} />
<meta name="og:type" content="website" />
<meta name="og:site_name" content={siteName} />
<meta name="og:url" content={location.href} />
<meta name="og:image" content={ogImage} />
<meta name="og:description" content={description} />
<meta property="og:image:alt" content={siteName} />
<meta property="og:image:width" content={ogImageWidth} />
<meta property="og:image:height" content={ogImageHeight} />
<link href={primaryFont} rel="stylesheet" />
<link href={monoFont} rel="stylesheet" />
</Head>
);
const Meta = () => {
const config = useConfig();
const theme = useTheme();
const [location, setLocation] = useState({});
const title = config?.org_name || "hyperglass";
const description = config?.site_description || "The modern looking glass.";
const siteName = `${title} - ${description}`;
const keywords = config?.site_keywords || [
"hyperglass",
"looking glass",
"lg",
"peer",
"peering",
"ipv4",
"ipv6",
"transit",
"community",
"communities",
"bgp",
"routing",
"network",
"isp"
];
const author = config?.org_name || "Matt Love, matt@hyperglass.io";
const language = config?.language || "en";
const currentYear = new Date().getFullYear();
const copyright = config
? `${currentYear} ${config.org_name}`
: `${currentYear} hyperglass`;
const ogImage = config?.web.opengraph.image || null;
const ogImageHeight = config?.web.opengraph.height || null;
const ogImageWidth = config?.web.opengraph.width || null;
const primaryFont = googleFontUrl(theme.fonts.body);
const monoFont = googleFontUrl(theme.fonts.mono);
useEffect(() => {
if (typeof window !== undefined && location === {}) {
setLocation(window.location);
}
}, [location]);
return (
<Head>
<title>{title}</title>
<meta charSet="UTF-8" />
<meta httpEquiv="Content-Type" content="text/html" />
<meta name="hg-version" content={config.hyperglass_version} />
<meta name="description" content={description} />
<meta name="keywords" content={keywords.join(", ")} />
<meta name="author" content={author} />
<meta name="language" content={language} />
<meta name="copyright" content={copyright} />
<meta name="url" content={location.href} />
<meta name="og:title" content={title} />
<meta name="og:type" content="website" />
<meta name="og:site_name" content={siteName} />
<meta name="og:url" content={location.href} />
<meta name="og:image" content={ogImage} />
<meta name="og:description" content={description} />
<meta property="og:image:alt" content={siteName} />
<meta property="og:image:width" content={ogImageWidth} />
<meta property="og:image:height" content={ogImageHeight} />
<link href={primaryFont} rel="stylesheet" />
<link href={monoFont} rel="stylesheet" />
</Head>
);
};
Meta.displayName = "Meta";
export default Meta;

25
hyperglass/ui/components/ResetButton.js
View File

@@ -2,15 +2,18 @@ import React from "react";
import { Button } from "@chakra-ui/core";
import { FiChevronLeft } from "react-icons/fi";
export default React.forwardRef(({ isSubmitting, onClick }, ref) => (
<Button
ref={ref}
aria-label="Reset Form"
opacity={isSubmitting ? 1 : 0}
variant="ghost"
color="current"
onClick={onClick}
>
<FiChevronLeft size={24} />
</Button>
const ResetButton = React.forwardRef(({ isSubmitting, onClick }, ref) => (
<Button
ref={ref}
aria-label="Reset Form"
opacity={isSubmitting ? 1 : 0}
variant="ghost"
color="current"
onClick={onClick}
>
<FiChevronLeft size={24} />
</Button>
));
ResetButton.displayName = "ResetButton";
export default ResetButton;

169
hyperglass/ui/components/Title.js
View File

@@ -6,102 +6,131 @@ import useConfig from "~/components/HyperglassProvider";
import useMedia from "~/components/MediaProvider";
const subtitleAnimation = {
transition: { duration: 0.2, type: "tween" },
initial: { opacity: 1, scale: 1 },
animate: { opacity: 1, scale: 1 },
exit: { opacity: 0, scale: 0.3 },
transition: { duration: 0.2, type: "tween" },
initial: { opacity: 1, scale: 1 },
animate: { opacity: 1, scale: 1 },
exit: { opacity: 0, scale: 0.3 }
};
const titleSize = { true: "2xl", false: "lg" };
const titleMargin = { true: 2, false: 0 };
const textAlignment = { false: ["right", "center"], true: ["left", "center"] };
const TitleOnly = ({ text, showSubtitle }) => (
<Heading as="h1" mb={titleMargin[showSubtitle]} size={titleSize[showSubtitle]}>
<Textfit mode="single">{text}</Textfit>
</Heading>
<Heading
as="h1"
mb={titleMargin[showSubtitle]}
size={titleSize[showSubtitle]}
>
<Textfit mode="single">{text}</Textfit>
</Heading>
);
const SubtitleOnly = React.forwardRef(({ text, mediaSize, size = "md", ...props }, ref) => (
const SubtitleOnly = React.forwardRef(
({ text, mediaSize, size = "md", ...props }, ref) => (
<Heading ref={ref} as="h3" size={size} {...props}>
<Textfit mode="single" max={mediaSize === "sm" ? 13 : 25}>
{text}
</Textfit>
<Textfit mode="single" max={mediaSize === "sm" ? 13 : 25}>
{text}
</Textfit>
</Heading>
));
)
);
const AnimatedSubtitle = motion.custom(SubtitleOnly);
const TextOnly = ({ text, mediaSize, showSubtitle, ...props }) => (
<Stack spacing={2} maxW="100%" textAlign={textAlignment[showSubtitle]} {...props}>
<Textfit mode="single" max={20}>
<TitleOnly text={text.title} showSubtitle={showSubtitle} />
</Textfit>
<AnimatePresence>
{showSubtitle && (
<AnimatedSubtitle
text={text.subtitle}
mediaSize={mediaSize}
{...subtitleAnimation}
/>
)}
</AnimatePresence>
</Stack>
<Stack
spacing={2}
maxW="100%"
textAlign={textAlignment[showSubtitle]}
{...props}
>
<Textfit mode="single" max={20}>
<TitleOnly text={text.title} showSubtitle={showSubtitle} />
</Textfit>
<AnimatePresence>
{showSubtitle && (
<AnimatedSubtitle
text={text.subtitle}
mediaSize={mediaSize}
{...subtitleAnimation}
/>
)}
</AnimatePresence>
</Stack>
);
const Logo = ({ text, logo, showSubtitle }) => {
const { colorMode } = useColorMode();
const logoColor = { light: logo.dark, dark: logo.light };
const logoPath = logoColor[colorMode];
return <Image src={logoPath} alt={text.title} width={logo.width ?? "auto"} />;
const { colorMode } = useColorMode();
const logoColor = { light: logo.dark, dark: logo.light };
const logoPath = logoColor[colorMode];
return <Image src={logoPath} alt={text.title} width={logo.width ?? "auto"} />;
};
const LogoSubtitle = ({ text, logo, showSubtitle, mediaSize }) => (
<>
<Logo text={text} logo={logo} showSubtitle={showSubtitle} mediaSize={mediaSize} />
<AnimatePresence>
{showSubtitle && (
<AnimatedSubtitle mt={6} text={text.subtitle} {...subtitleAnimation} />
)}
</AnimatePresence>
</>
<>
<Logo
text={text}
logo={logo}
showSubtitle={showSubtitle}
mediaSize={mediaSize}
/>
<AnimatePresence>
{showSubtitle && (
<AnimatedSubtitle mt={6} text={text.subtitle} {...subtitleAnimation} />
)}
</AnimatePresence>
</>
);
const All = ({ text, logo, mediaSize, showSubtitle }) => (
<>
<Logo text={text} logo={logo} showSubtitle={showSubtitle} />
<TextOnly mediaSize={mediaSize} showSubtitle={showSubtitle} mt={2} text={text} />
</>
<>
<Logo text={text} logo={logo} showSubtitle={showSubtitle} />
<TextOnly
mediaSize={mediaSize}
showSubtitle={showSubtitle}
mt={2}
text={text}
/>
</>
);
const modeMap = { text_only: TextOnly, logo_only: Logo, logo_subtitle: LogoSubtitle, all: All };
const modeMap = {
text_only: TextOnly,
logo_only: Logo,
logo_subtitle: LogoSubtitle,
all: All
};
const justifyMap = {
true: ["flex-end", "center", "center", "center"],
false: ["flex-start", "center", "center", "center"],
true: ["flex-end", "center", "center", "center"],
false: ["flex-start", "center", "center", "center"]
};
export default React.forwardRef(({ onClick, isSubmitting, ...props }, ref) => {
const { web } = useConfig();
const { mediaSize } = useMedia();
const titleMode = web.text.title_mode;
const MatchedMode = modeMap[titleMode];
return (
<Button
ref={ref}
variant="link"
onClick={onClick}
flexWrap="wrap"
_focus={{ boxShadow: "none" }}
_hover={{ textDecoration: "none" }}
px={0}
justifyContent={justifyMap[isSubmitting]}
{...props}
>
<MatchedMode
mediaSize={mediaSize}
showSubtitle={!isSubmitting}
text={web.text}
logo={web.logo}
/>
</Button>
);
const Title = React.forwardRef(({ onClick, isSubmitting, ...props }, ref) => {
const { web } = useConfig();
const { mediaSize } = useMedia();
const titleMode = web.text.title_mode;
const MatchedMode = modeMap[titleMode];
return (
<Button
ref={ref}
variant="link"
onClick={onClick}
flexWrap="wrap"
_focus={{ boxShadow: "none" }}
_hover={{ textDecoration: "none" }}
px={0}
justifyContent={justifyMap[isSubmitting]}
{...props}
>
<MatchedMode
mediaSize={mediaSize}
showSubtitle={!isSubmitting}
text={web.text}
logo={web.logo}
/>
</Button>
);
});
Title.displayName = "Title";
export default Title;