diff --git a/hyperglass/ui/components/Header.js b/hyperglass/ui/components/Header.js index 6c4869b..8c92891 100644 --- a/hyperglass/ui/components/Header.js +++ b/hyperglass/ui/components/Header.js @@ -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 }) => { ); }; + +Header.displayName = "Header"; + +export default Header; diff --git a/hyperglass/ui/components/Meta.js b/hyperglass/ui/components/Meta.js index e066c04..0ec2c2a 100644 --- a/hyperglass/ui/components/Meta.js +++ b/hyperglass/ui/components/Meta.js @@ -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 ( - - {title} - - - - - - - - - - - - - - - - - - - - - - ); +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 ( + + {title} + + + + + + + + + + + + + + + + + + + + + + ); }; + +Meta.displayName = "Meta"; + +export default Meta; diff --git a/hyperglass/ui/components/ResetButton.js b/hyperglass/ui/components/ResetButton.js index 18b6d47..1b31319 100644 --- a/hyperglass/ui/components/ResetButton.js +++ b/hyperglass/ui/components/ResetButton.js @@ -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) => ( - +const ResetButton = React.forwardRef(({ isSubmitting, onClick }, ref) => ( + )); + +ResetButton.displayName = "ResetButton"; +export default ResetButton; diff --git a/hyperglass/ui/components/Title.js b/hyperglass/ui/components/Title.js index 2f9bbcb..660bc3d 100644 --- a/hyperglass/ui/components/Title.js +++ b/hyperglass/ui/components/Title.js @@ -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 }) => ( - - {text} - + + {text} + ); -const SubtitleOnly = React.forwardRef(({ text, mediaSize, size = "md", ...props }, ref) => ( +const SubtitleOnly = React.forwardRef( + ({ text, mediaSize, size = "md", ...props }, ref) => ( - - {text} - + + {text} + -)); + ) +); const AnimatedSubtitle = motion.custom(SubtitleOnly); const TextOnly = ({ text, mediaSize, showSubtitle, ...props }) => ( - - - - - - {showSubtitle && ( - - )} - - + + + + + + {showSubtitle && ( + + )} + + ); const Logo = ({ text, logo, showSubtitle }) => { - const { colorMode } = useColorMode(); - const logoColor = { light: logo.dark, dark: logo.light }; - const logoPath = logoColor[colorMode]; - return {text.title}; + const { colorMode } = useColorMode(); + const logoColor = { light: logo.dark, dark: logo.light }; + const logoPath = logoColor[colorMode]; + return {text.title}; }; const LogoSubtitle = ({ text, logo, showSubtitle, mediaSize }) => ( - <> - - - {showSubtitle && ( - - )} - - + <> + + + {showSubtitle && ( + + )} + + ); const All = ({ text, logo, mediaSize, showSubtitle }) => ( - <> - - - + <> + + + ); -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 ( - - ); +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 ( + + ); }); + +Title.displayName = "Title"; +export default Title;