From ef4fb0a5277ee99bd0f1747b77e733ef7f02460d Mon Sep 17 00:00:00 2001 From: flu0r1ne Date: Wed, 6 Sep 2023 19:53:23 -0500 Subject: Make BreadCrumbs domain agnostic --- components/BreadCrumbs/breadcrumbs.module.scss | 15 +++++++ components/BreadCrumbs/index.tsx | 56 ++++++++++++++++++++++++ components/Breadcrumbs/breadcrumbs.module.scss | 15 ------- components/Breadcrumbs/index.tsx | 56 ------------------------ components/PathCrumbs/index.tsx | 60 ++++++++++++++++++++++++++ next.config.js | 5 ++- pages/wg2nd/index.tsx | 10 ++--- public/robots.txt | 2 + templates/Default/index.tsx | 36 ++-------------- utils/assert.tsx | 3 ++ utils/env.tsx | 9 ++++ 11 files changed, 156 insertions(+), 111 deletions(-) create mode 100644 components/BreadCrumbs/breadcrumbs.module.scss create mode 100644 components/BreadCrumbs/index.tsx delete mode 100644 components/Breadcrumbs/breadcrumbs.module.scss delete mode 100644 components/Breadcrumbs/index.tsx create mode 100644 components/PathCrumbs/index.tsx create mode 100644 public/robots.txt create mode 100644 utils/assert.tsx create mode 100644 utils/env.tsx diff --git a/components/BreadCrumbs/breadcrumbs.module.scss b/components/BreadCrumbs/breadcrumbs.module.scss new file mode 100644 index 0000000..6facea4 --- /dev/null +++ b/components/BreadCrumbs/breadcrumbs.module.scss @@ -0,0 +1,15 @@ +.crumb { + font-size: 1.10rem; +} + +.divider { + font-size: 1.0rem; +} + +.crumb { + align-content: center; +} + +.divider { + margin: 0 0.3rem; +} diff --git a/components/BreadCrumbs/index.tsx b/components/BreadCrumbs/index.tsx new file mode 100644 index 0000000..693a9d0 --- /dev/null +++ b/components/BreadCrumbs/index.tsx @@ -0,0 +1,56 @@ +import React, { Children, FC } from "react"; +import Link from "next/link"; +import styles from './breadcrumbs.module.scss'; +import clsx from 'clsx'; + +export type BreadCrumbsProps = { + className?: string; + style?: object; + children: React.ReactNode; +}; + +const BreadCrumbs : FC = ({children, className, ...props}) => ( + + {Children.map(children, (child, index) => { + return ( + <> + { + index !== 0 ? ( + / + ) : undefined + } + {child} + + ); + })} + +); + +export type CrumbProps = { + children: React.ReactNode; +}; + +const Crumb : FC = ({children, ...props}) => ( + + {children} + +); + +export type LinkCrumbProps = { + href: string; + children: React.ReactNode; +} + +const LinkCrumb : FC = ({children, href, ...props}) => ( + + + {children} + + +); + +export { + Crumb, + BreadCrumbs, + LinkCrumb +}; diff --git a/components/Breadcrumbs/breadcrumbs.module.scss b/components/Breadcrumbs/breadcrumbs.module.scss deleted file mode 100644 index 6facea4..0000000 --- a/components/Breadcrumbs/breadcrumbs.module.scss +++ /dev/null @@ -1,15 +0,0 @@ -.crumb { - font-size: 1.10rem; -} - -.divider { - font-size: 1.0rem; -} - -.crumb { - align-content: center; -} - -.divider { - margin: 0 0.3rem; -} diff --git a/components/Breadcrumbs/index.tsx b/components/Breadcrumbs/index.tsx deleted file mode 100644 index d773b33..0000000 --- a/components/Breadcrumbs/index.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import React, { Children, FC } from "react"; -import Link from "next/link"; -import styles from './breadcrumbs.module.scss'; -import clsx from 'clsx'; - -export type BreadcrumbsProps = { - className?: string; - style?: object; - children: React.ReactNode; -}; - -const Breadcrumbs : FC = ({children, className, ...props}) => ( - - {Children.map(children, (child, index) => { - return ( - <> - { - index !== 0 ? ( - / - ) : undefined - } - {child} - - ); - })} - -); - -export type CrumbProps = { - children: React.ReactNode; -}; - -const Crumb : FC = ({children, ...props}) => ( - - {children} - -); - -export type LinkCrumbProps = { - href: string; - children: React.ReactNode; -} - -const LinkCrumb : FC = ({children, href, ...props}) => ( - - - {children} - - -); - -export { - Crumb, - Breadcrumbs, - LinkCrumb -}; diff --git a/components/PathCrumbs/index.tsx b/components/PathCrumbs/index.tsx new file mode 100644 index 0000000..1c87344 --- /dev/null +++ b/components/PathCrumbs/index.tsx @@ -0,0 +1,60 @@ +import React, { FC } from 'react'; + +import assert from '../../utils/assert'; +import { DISPLAY_DOMAIN } from '../../utils/env'; + +const urlPathComponents = (path : string): string[] => { + assert(path.length > 0, "empty path"); + + let canonicalizedPath = path[path.length - 1] === '/' ? + path.substr(0, path.length - 1) : path; + + if(canonicalizedPath.length === 0) { + return []; + } else { + canonicalizedPath = canonicalizedPath[0] == '/' ? + path.substr(1, path.length - 1) : path; + } + + return canonicalizedPath.split('/') +} + +const urlPathComponentsToFullPath = (urlPathComponents : string[]): string[] => { + const fullPaths = new Array(urlPathComponents.length + 1); + + fullPaths[0] = ''; + + for(let i = 0; i < urlPathComponents.length; i++) { + fullPaths[i + 1] = fullPaths[i] + '/' + urlPathComponents[i]; + } + + fullPaths[0] = '/'; + + return fullPaths; +}; + +export type PathCrumbsProps = { + path: string +}; + +import { BreadCrumbs , LinkCrumb } from '../../components/BreadCrumbs'; + +const PathCrumbs: FC = ({ path }) => { + + const pathComponents = urlPathComponents(path); + const fullPaths = urlPathComponentsToFullPath(pathComponents); + + const linksComponents = fullPaths.map((fullPath, i) => ( + + { i === 0 ? DISPLAY_DOMAIN : pathComponents[i - 1] } + + )); + + return ( + + {linksComponents} + + ); +}; + +export default PathCrumbs; diff --git a/next.config.js b/next.config.js index 023ecb8..2fa75e0 100644 --- a/next.config.js +++ b/next.config.js @@ -14,6 +14,9 @@ module.exports = () => { ...webpackConfig, sassOptions: { includePaths: [path.join(__dirname, 'styles')] + }, + env: { + DISPLAY_DOMAIN: process.env.DISPLAY_DOMAIN || 'flu0r1ne.net', } }; -} \ No newline at end of file +} diff --git a/pages/wg2nd/index.tsx b/pages/wg2nd/index.tsx index 45125d5..3f38a12 100644 --- a/pages/wg2nd/index.tsx +++ b/pages/wg2nd/index.tsx @@ -9,6 +9,8 @@ import Button from '../../components/Button'; import Markdown from '../../components/Markdown'; import Typography from '../../components/Typography'; +import PathCrumbs from "../../components/PathCrumbs"; + import Script from 'next/script'; // @ts-ignore @@ -91,8 +93,6 @@ const Panel: React.FC = ({ children, customStyle }) => ( ); -import { Breadcrumbs, LinkCrumb } from "../../components/Breadcrumbs"; - const Wg2nd = () => { const intfNameRef = useRef(null); const intfConfigRef = useRef(null); @@ -136,11 +136,7 @@ const Wg2nd = () => { > {/* Description */} - - flu0r1ne.net - wg2nd - - + diff --git a/public/robots.txt b/public/robots.txt new file mode 100644 index 0000000..c2a49f4 --- /dev/null +++ b/public/robots.txt @@ -0,0 +1,2 @@ +User-agent: * +Allow: / diff --git a/templates/Default/index.tsx b/templates/Default/index.tsx index 6a307ab..ccfde4a 100644 --- a/templates/Default/index.tsx +++ b/templates/Default/index.tsx @@ -1,8 +1,8 @@ -import clsx from "clsx"; -import React, { FC } from "react"; -import { Breadcrumbs, LinkCrumb } from "../../components/Breadcrumbs"; +import React, { FC } from 'react'; +import PathCrumbs from "../../components/PathCrumbs"; import Viewport from "../../components/ViewPort"; import styles from './default.module.scss'; +import clsx from 'clsx'; export type DefaultPageProps = { className?: string; @@ -11,34 +11,6 @@ export type DefaultPageProps = { children?: React.ReactChild; }; -export type RelPathProps = { - path: string; -}; - -const RelPath : FC = ({path, ...props}) => { - const _path = path[path.length - 1] === '/' ? path.substr(0, path.length - 1) : path; - - const parts = _path.split('/'); - const rels = ['']; - - for(let i = 1; i < parts.length; i++) { - rels.push([rels[i - 1], parts[i]].join('/')); - } - - rels[0] = '/'; - parts[0] = 'flu0r1ne.net'; - - return ( - - {rels.map((relHref, i) => ( - - {parts[i]} - - ))} - - ); -} - const LastUpdatedDate : FC<{ children: React.ReactNode }> = ({children}) => ( Last Updated: {children} ) @@ -47,7 +19,7 @@ const DefaultPage : FC = ({className, lastUpdated, children, p - {path !== undefined ? : undefined} + {path !== undefined ? : undefined} {lastUpdated ? {lastUpdated} : undefined} {children} diff --git a/utils/assert.tsx b/utils/assert.tsx new file mode 100644 index 0000000..0ee51a0 --- /dev/null +++ b/utils/assert.tsx @@ -0,0 +1,3 @@ +export default function assert(cond : boolean, message?: string) { + if(!cond) { throw Error(message); } +}; diff --git a/utils/env.tsx b/utils/env.tsx new file mode 100644 index 0000000..1894c1b --- /dev/null +++ b/utils/env.tsx @@ -0,0 +1,9 @@ +import assert from './assert'; + +const DISPLAY_DOMAIN = process.env.DISPLAY_DOMAIN; + +assert(DISPLAY_DOMAIN !== undefined, 'Please set DISPLAY_DOMAIN'); + +export { + DISPLAY_DOMAIN +}; -- cgit v1.2.3