Skip to content

Commit 8960b22

Browse files
TomNUSDSTomNUSDS
committed
Replace react-router-dom
- Quick roll-your-own nav
1 parent 4127faa commit 8960b22

File tree

9 files changed

+102
-117
lines changed

9 files changed

+102
-117
lines changed

‎package.json

-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@
3333
"react": "^18.2.0",
3434
"react-dom": "^18.2.0",
3535
"react-hook-form": "^7.44.2",
36-
"react-router-dom": "^6.22.2",
3736
"react-toastify": "^10.0.4"
3837
},
3938
"devDependencies": {

‎src/App.tsx

+47-31
Original file line numberDiff line numberDiff line change
@@ -4,47 +4,63 @@ import '@mdxeditor/editor/style.css';
44
import './styles/usdswebsite.override.css';
55
import "react-toastify/dist/ReactToastify.css";
66
import "./App.css";
7-
import {Fragment} from "react";
7+
import {Fragment, useState} from "react";
88
import {BlogEditorPage} from "./pages/BlogEditorPage.tsx";
9-
import {NavList, Header, Title,} from "@trussworks/react-uswds";
9+
import {NavList, Header, Title, NavMenuButton, PrimaryNav, Grid, GridContainer,} from "@trussworks/react-uswds";
10+
import {HomePage} from "./pages/HomePage.tsx";
11+
import {AboutPage} from "./pages/AboutPage.tsx";
1012

1113
// we use the uswds styles from usds.github.io/website-staging
1214
// import '@uswds/uswds/css/uswds.css';
1315

16+
// roll our own nav. Doing anything too fancy is difficult on github pages because of paths.
17+
// keys are UX names which isn't great but whatever. It's just a few lines of code.
18+
const Pages = ["Home", "Blog Edit", "About"] as const;
19+
type PagesType = (typeof Pages)[number];
20+
type PagesMap = {
21+
[key in PagesType]?: React.ReactElement;
22+
};
1423

15-
// const Layout = () => {
16-
// return (
17-
// <Fragment>
18-
// <Header basic>
19-
// <div className="usa-nav-container">
20-
// <div className="usa-navbar">
21-
// <Title>Website Content Editor</Title>
22-
// {/* A "layout route" is a good place to put markup you want to
23-
// share across all the pages on your site, like navigation. */}
24-
// <NavList items={
25-
// [<NavLink key={"homenavlink"} to="/">Home</NavLink>,
26-
// <NavLink key={"aboutlink"} to="/about">About</NavLink>,
27-
// <NavLink key={"blogedit"} to="/blogedit">News-and-blog editor</NavLink>]
28-
// } type="primary"/>
29-
// </div>
30-
// </div>
31-
// </Header>
32-
//
33-
//
34-
// {/* An <Outlet> renders whatever child route is currently active,
35-
// so you can think about this <Outlet> as a placeholder for
36-
// the child routes we defined above. */}
37-
// <section className="usa-section">
38-
// <Outlet/>
39-
// </section>
40-
// </Fragment>
41-
// );
42-
// }
4324

4425
function App() {
26+
const [page, SetPage] = useState<PagesType>("Home");
27+
const PAGES_MAP: PagesMap = {
28+
"Home": <HomePage/>,
29+
"Blog Edit": <BlogEditorPage/>,
30+
"About": <AboutPage/>,
31+
};
32+
4533
return (
4634
<Fragment>
47-
<BlogEditorPage/>
35+
<Header basic>
36+
<div className="usa-nav-container">
37+
<PrimaryNav
38+
aria-label="Primary navigation"
39+
items={Pages.map((eachPage) =>
40+
<a key={`${eachPage}`}
41+
href=""
42+
className={eachPage === page ? "usa-nav__link usa-current" : "usa-nav__link"}
43+
onClick={(e) => {
44+
SetPage(eachPage);
45+
e.preventDefault();
46+
e.stopPropagation();
47+
}}>{eachPage}</a>)}/>
48+
</div>
49+
</Header>
50+
<div className="usa-section">
51+
<GridContainer>
52+
<Grid row gap>
53+
<main
54+
className="usa-layout-docs__main desktop:grid-col-12 usa-prose usa-layout-docs"
55+
id="main-content"
56+
role={"main"}
57+
>
58+
<h1>Website Content Editor</h1>
59+
{PAGES_MAP[page]}
60+
</main>
61+
</Grid>
62+
</GridContainer>
63+
</div>
4864
<ToastContainer limit={4}/>
4965
</Fragment>
5066
);

‎src/components/Layout.tsx

Whitespace-only changes.

‎src/mdxcomponents/frontmatterCustom/FrontmatterCustomEditor.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,7 @@ export const FrontmatterCustomEditor = ({yaml, onChange}: FrontmatterCustomEdito
231231

232232
<Fieldset>
233233
<Label htmlFor="carousel_image">
234-
Image for Carousel
234+
Image for Carousel (should be a 800x600 jpeg)
235235
</Label>
236236
{previewImgFilename && <img id={previewImgFilename} src={fileInputDefaultImage} className={"previewImgFilename"} />}
237237
<br/>

‎src/pages/AboutPage.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import {Fragment} from "react";
2-
import {NavLink} from "react-router-dom";
32

43
export const AboutPage = () => {
54
return (<Fragment>

‎src/pages/BlogEditorPage.tsx

+42-50
Original file line numberDiff line numberDiff line change
@@ -74,62 +74,54 @@ export const BlogEditorPage = () => {
7474
return (
7575
<Fragment>
7676
<EditActionsToolbar mdxeditorref={mdxeditorref}/>
77-
<main id="main-content" role="main">
78-
<div className="grid-container">
79-
<div className="grid-row tablet:flex-row-reverse">
80-
<div
81-
className="tablet:grid-col-8 desktop:grid-col-12 margin-bottom-9 tablet:padding-right-4 site-c-project-content usa-prose">
82-
<MDXEditor
83-
ref={mdxeditorref}
84-
className={"grid-container"}
85-
contentEditableClassName={"tablet:grid-col-8 desktop:grid-col-12 margin-bottom-9 tablet:padding-right-4 site-c-project-content usa-prose"}
86-
suppressHtmlProcessing={true}
87-
markdown={""}
88-
onChange={(mdtext) => saveMdText(mdtext)}
89-
toMarkdownOptions={toMarkdownOptions}
90-
plugins={[
91-
toolbarPlugin({
92-
toolbarContents: () => (
93-
<Fragment>
94-
<DiffSourceToggleWrapper>
95-
{' '}
96-
<InsertFrontmatterCustom/>
97-
{' '}
98-
<BlockTypeSelect/>
99-
<BoldItalicUnderlineToggles/>
100-
<CreateLink/>
101-
<ListsToggle/>
102-
<InsertThematicBreak/>
103-
{' '}
104-
<InsertImage/>
105-
{' '}
106-
<InsertTable/>
107-
</DiffSourceToggleWrapper>
108-
</Fragment>
109-
)
110-
}),
111-
frontmatterCustomPlugin(),
112-
diffSourcePlugin({diffMarkdown: oldMarkdown, viewMode: 'rich-text'}),
113-
headingsPlugin({allowedHeadingLevels: [2, 3, 4]}),
114-
imagePlugin({imageUploadHandler, disableImageResize: false, ImageDialog: ImageDialogCustom}),
115-
linkDialogPlugin(),
116-
linkPlugin(),
117-
listsPlugin(),
118-
quotePlugin(),
119-
tablePlugin(),
120-
thematicBreakPlugin()
121-
]}/>
122-
</div>
123-
</div>
124-
</div>
125-
</main>
77+
<MDXEditor
78+
ref={mdxeditorref}
79+
className={"grid-container"}
80+
contentEditableClassName={"tablet:grid-col-8 desktop:grid-col-12 margin-bottom-9 tablet:padding-right-4 site-c-project-content usa-prose"}
81+
suppressHtmlProcessing={true}
82+
markdown={""}
83+
onChange={(mdtext) => saveMdText(mdtext)}
84+
toMarkdownOptions={toMarkdownOptions}
85+
plugins={[
86+
toolbarPlugin({
87+
toolbarContents: () => (
88+
<Fragment>
89+
<DiffSourceToggleWrapper>
90+
{' '}
91+
<InsertFrontmatterCustom/>
92+
{' '}
93+
<BlockTypeSelect/>
94+
<BoldItalicUnderlineToggles/>
95+
<CreateLink/>
96+
<ListsToggle/>
97+
<InsertThematicBreak/>
98+
{' '}
99+
<InsertImage/>
100+
{' '}
101+
<InsertTable/>
102+
</DiffSourceToggleWrapper>
103+
</Fragment>
104+
)
105+
}),
106+
frontmatterCustomPlugin(),
107+
diffSourcePlugin({diffMarkdown: oldMarkdown, viewMode: 'rich-text'}),
108+
headingsPlugin({allowedHeadingLevels: [2, 3, 4]}),
109+
imagePlugin({imageUploadHandler, disableImageResize: false, ImageDialog: ImageDialogCustom}),
110+
linkDialogPlugin(),
111+
linkPlugin(),
112+
listsPlugin(),
113+
quotePlugin(),
114+
tablePlugin(),
115+
thematicBreakPlugin()
116+
]}/>
117+
126118
<div className={"developer_div"}>
127119
<Button
128120
type={"button"}
129121
accentStyle={"warm"}
130122
outline={true}
131123
unstyled={true}
132-
onClick={()=> {
124+
onClick={() => {
133125
if (confirm("Clear all settings and data? This will lose everything and start fresh.\n\nContinue?")) {
134126
void devResetEverything(mdxeditorref)
135127
}

‎src/pages/HomePage.tsx

+9-11
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,17 @@
11
import {Fragment} from "react";
2-
import {NavLink} from "react-router-dom";
32

43
export const HomePage = () => {
54
return (<Fragment>
6-
<main id="main-content" role="main">
7-
<div className="grid-container">
8-
<div className="grid-row tablet:flex-row-reverse">
9-
<div
10-
className="tablet:grid-col-8 desktop:grid-col-12 margin-bottom-9 tablet:padding-right-4 site-c-project-content usa-prose">
5+
<p className="usa-intro">
6+
The page heading communicates the main focus of the page. Make
7+
your page heading descriptive and keep it succinct.
8+
</p>
9+
<h2 id="section-heading-h2">Section heading (h2)</h2>
10+
11+
<p>
12+
13+
</p>
1114

12-
<NavLink className={"usa-button"} key={"blogedit"} to="/blogedit">News-and-blog editor</NavLink><br/>
13-
</div>
14-
</div>
15-
</div>
16-
</main>
1715
</Fragment>
1816
);
1917
}

‎src/types/commontypes.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,8 @@ blog_page: true
5252
# Carousel (Edit this)
5353
carousel_title: "Test page"
5454
carousel_summary: "This is a test page template, it include problematic markdown to make checking it easier"
55-
# partial path to image
55+
# partial path to image e.g /news-and-blog/2024-03-01-test-page-img/
56+
# images should be 800x600 jpg
5657
carousel_image: /news-and-blog/2024-03-01-test-page-img/icon-512x512.png
5758
# accessibility text for image
5859
carousel_image_alt_text: "Test image"
@@ -82,7 +83,7 @@ export const STARTER_BLOG_FRONTMATTER_FIELDS: BlogFrontMatterFields = {
8283
carousel_title: "New news and blog page",
8384
carousel_summary: `This is a blank news-and-blog page template. Click the crab icon to edit metadata.
8485
Enter new content below this header preview`,
85-
carousel_image: "/img/icon-512x512.png",
86+
carousel_image: "https://usds.github.io/website-content-editor/icon-512x512.png",
8687
carousel_image_alt_text: "Test image",
8788
carousel_show: "false",
8889
tags: [],

‎yarn.lock

-20
Original file line numberDiff line numberDiff line change
@@ -1303,11 +1303,6 @@
13031303
resolved "https://registry.yarnpkg.com/@react-hook/passive-layout-effect/-/passive-layout-effect-1.2.1.tgz#c06dac2d011f36d61259aa1c6df4f0d5e28bc55e"
13041304
integrity sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==
13051305

1306-
"@remix-run/[email protected]":
1307-
version "1.15.2"
1308-
resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.15.2.tgz#35726510d332ba5349c6398d13259d5da184553d"
1309-
integrity sha512-+Rnav+CaoTE5QJc4Jcwh5toUpnVLKYbpU6Ys0zqbakqbaLQHeglLVHPfxOiQqdNmUy5C2lXz5dwC6tQNX2JW2Q==
1310-
13111306
"@rollup/plugin-replace@^5.0.5":
13121307
version "5.0.5"
13131308
resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-5.0.5.tgz#33d5653dce6d03cb24ef98bef7f6d25b57faefdf"
@@ -4428,21 +4423,6 @@ [email protected]:
44284423
use-callback-ref "^1.3.0"
44294424
use-sidecar "^1.1.2"
44304425

4431-
react-router-dom@^6.22.2:
4432-
version "6.22.2"
4433-
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.22.2.tgz#8233968a8a576f3006e5549c80f3527d2598fc9c"
4434-
integrity sha512-WgqxD2qySEIBPZ3w0sHH+PUAiamDeszls9tzqMPBDA1YYVucTBXLU7+gtRfcSnhe92A3glPnvSxK2dhNoAVOIQ==
4435-
dependencies:
4436-
"@remix-run/router" "1.15.2"
4437-
react-router "6.22.2"
4438-
4439-
[email protected]:
4440-
version "6.22.2"
4441-
resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.22.2.tgz#27e77e4c635a5697693b922d131d773451c98a5b"
4442-
integrity sha512-YD3Dzprzpcq+tBMHBS822tCjnWD3iIZbTeSXMY9LPSG541EfoBGyZ3bS25KEnaZjLcmQpw2AVLkFyfgXY8uvcw==
4443-
dependencies:
4444-
"@remix-run/router" "1.15.2"
4445-
44464426
react-style-singleton@^2.2.1:
44474427
version "2.2.1"
44484428
resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"

0 commit comments

Comments
 (0)