Skip to content

Commit 7dd19fd

Browse files
fileformatfileformat
committed
Cleanup + placeholder pages
1 parent f4b088f commit 7dd19fd

File tree

17 files changed

+236
-138
lines changed

17 files changed

+236
-138
lines changed

‎.github/workflows/gcr-deploy.yaml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,13 @@ jobs:
2525

2626
- name: gcloud auth
2727
id: 'auth'
28-
uses: 'google-github-actions/auth@v0'
28+
uses: 'google-github-actions/auth@v2'
2929
with:
3030
credentials_json: '${{ secrets.GCP_SA_KEY }}'
3131

3232
# Setup gcloud CLI
3333
- name: gcloud setup
34-
uses: google-github-actions/setup-gcloud@v0
34+
uses: google-github-actions/setup-gcloud@v2
3535

3636
- name: gcloud docker-auth
3737
run: gcloud auth configure-docker

‎.gitignore‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
node_modules
2-
3-
/.cache
41
/build
2+
/.cache
3+
.DS_Store
54
.env
6-
.yarn/install-state.gz
7-
.DS_Store
5+
node_modules
6+
tmp*
7+
*.tmp

‎TODO.md‎

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
# To Do
22

33
- [ ] copy to clipboard for variations
4+
- [ ] patterns into database
45
- [ ] search.html
56
- [ ] test button for variations
6-
- [ ] comments via utteranc.es
77
- [ ] homepage: search
88
- [ ] homepage: featured
99
- [ ] homepage: latest
@@ -16,6 +16,38 @@
1616
- [ ] post to places besides RXP
1717
- [ ] 404 page
1818

19+
20+
## Data Model
21+
22+
all:
23+
- owner
24+
- created
25+
- updated
26+
27+
PatternBase (rpb)
28+
- handle
29+
- title
30+
- details_md
31+
- featured
32+
- public
33+
- tags (array)
34+
35+
PatternVariation (rpv)
36+
- title
37+
- engines (array)
38+
- pattern
39+
- flags
40+
- replacement
41+
42+
PatternVariationTest (rpt)
43+
- haystack
44+
- results (JSONB, per POSIX)
45+
46+
47+
## POSIX API
48+
49+
- [GNU](https://www.gnu.org/software/libc/manual/html_node/Regexp-Subexpressions.html)
50+
1951
## Fonts
2052

2153
- Roboto Slab for headings

‎app/components/ColorSchemeToggle/ColorSchemeToggle.tsx‎

Lines changed: 40 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,50 @@
11
'use client';
22

3-
import { Button, ButtonGroup } from 'react-bootstrap';
4-
5-
function setColorScheme(scheme: 'light' | 'dark' | 'auto') {
6-
if (scheme == 'auto') {
7-
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
8-
scheme = 'dark';
9-
} else {
10-
scheme = 'light';
11-
}
3+
import React from "react";
4+
5+
6+
7+
8+
function getColorScheme() {
9+
10+
if (typeof window === 'undefined') {
11+
return 'light';
12+
}
13+
14+
if (document.documentElement.hasAttribute('data-bs-theme')) {
15+
return document.documentElement.getAttribute('data-bs-theme');
1216
}
13-
document.documentElement.setAttribute('data-bs-theme', scheme);
17+
18+
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
19+
return 'dark';
20+
} else {
21+
return 'light';
22+
}
23+
1424
}
1525

1626
export function ColorSchemeToggle() {
27+
const [ currentScheme, setColorScheme ] = React.useState(getColorScheme());
28+
29+
30+
const onClick = (scheme: 'light' | 'dark' | 'auto') => {
31+
if (scheme == 'auto') {
32+
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
33+
scheme = 'dark';
34+
} else {
35+
scheme = 'light';
36+
}
37+
}
38+
document.documentElement.setAttribute('data-bs-theme', scheme);
39+
setColorScheme(scheme);
40+
}
1741

1842
return (
19-
<ButtonGroup>
20-
<Button onClick={() => setColorScheme('light')}>Light</Button>
21-
<Button onClick={() => setColorScheme('dark')}>Dark</Button>
22-
<Button onClick={() => setColorScheme('auto')}>Auto</Button>
23-
</ButtonGroup>
43+
<div className="btn-group" role="group" aria-label="Color scheme selector">
44+
<button className={`btn btn-sm ${ currentScheme == 'light' ? 'btn-primary' : 'btn-outline-primary'}`} onClick={() => onClick('light')}>Light</button>
45+
<button className={`btn btn-sm ${ currentScheme == 'dark' ? 'btn-primary' : 'btn-outline-primary'}`} onClick={() => onClick('dark')}>Dark</button>
46+
</div>
2447
);
2548
}
49+
50+
// <button onClick={() => setColorScheme('auto')}>Auto</button>

‎app/components/Footer.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { ColorSchemeToggle } from "~/components/ColorSchemeToggle/ColorSchemeToggle";
12

23
const links = [
34
{ link: 'https://github.com/regexplanet/regex-zone/issues', label: 'Feedback' },
@@ -20,8 +21,14 @@ export function Footer() {
2021
);
2122

2223
return (
23-
<footer className="d-flex justify-content-center text-body-tertiary pt-3"><small>
24-
{ initial }
25-
</small></footer>
24+
<>
25+
<hr className="pt-3" />
26+
<footer className="d-flex justify-content-center align-items-center text-body-tertiary"><small className="pe-3">
27+
{ initial }
28+
</small>
29+
30+
<ColorSchemeToggle />
31+
</footer>
32+
</>
2633
)
2734
}

‎app/components/HeaderSearch/HeaderSearch.tsx‎

Lines changed: 17 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,34 @@
1-
import { PiMagnifyingGlass } from 'react-icons/pi';
2-
import { Link as RemixLink, useLocation } from "@remix-run/react";
3-
import { Container, Navbar } from 'react-bootstrap';
1+
import { PiBlueprint, PiBlueprintBold, PiLink, PiMagnifyingGlass, PiMagnifyingGlassBold, PiPlay, PiPlayBold, PiUsersThree, PiUsersThreeBold } from 'react-icons/pi';
2+
import { Link as RemixLink } from "@remix-run/react";
43

54
import RegexZoneSvg from '../Logos/RegexZoneSvg';
5+
import { NavbarLink, NavbarLinkItem } from '~/components/NavbarLink';
66

7-
const links = [
8-
{ link: '/patterns/', label: 'Patterns' },
9-
//{ link: '/docs/', label: 'Docs' },
10-
{ link: 'https://www.regexplanet.com/', label: 'Testing' },
11-
//{ link: 'https://github.com/regexplanet/regex-zone/discussions', label: 'Community' },
12-
{ link: '/search.html', label: 'Search' },
13-
{ link: '/404', label: '404' },
7+
const links:NavbarLinkItem[] = [
8+
{ link: '/patterns/', label: 'Patterns', icon: <PiBlueprint />, icon_bold: <PiBlueprintBold /> },
9+
{ link: '/links/', label: 'Links', icon: <PiLink />, icon_bold: <PiLink /> },
10+
{ link: '/testing/', label: 'Testing', icon: <PiPlay />, icon_bold: <PiPlayBold /> },
11+
{ link: '/sharing/', label: 'Sharing', icon: <PiUsersThree />, icon_bold: <PiUsersThreeBold /> },
12+
{ link: '/search.html', label: 'Search', icon: <PiMagnifyingGlass />, icon_bold: <PiMagnifyingGlassBold /> },
1413
];
1514

1615
export function HeaderSearch() {
17-
const { pathname } = useLocation();
1816

19-
const items = links.map((link) => (
20-
<li className="nav-item" key = {link.label} >
21-
<RemixLink
22-
className={pathname.startsWith(link.link) ? 'nav-link active fw-bold' : 'nav-link'}
23-
to={link.link}
24-
>
25-
{link.label}
26-
</RemixLink>
27-
</li>
28-
));
17+
const items = links.map((link, index) => (<NavbarLink key={`key${index}`} link={link} />));
2918

3019
return (
3120
<>
32-
<Navbar className="bg-body-tertiary border-bottom">
33-
<Container>
34-
<Navbar.Brand as={RemixLink} className="fw-bold" to="/">
35-
<RegexZoneSvg height={'2rem'} className="pe-2" />
21+
<nav className="navbar navbar-expand bg-body-tertiary border-bottom">
22+
<div className="container-lg">
23+
<RemixLink className="navbar-brand fs-4 fw-bold" to="/">
24+
<RegexZoneSvg height={'2rem'} className="pe-2 d-none d-md-inline" />
3625
Regex Zone
37-
</Navbar.Brand>
26+
</RemixLink>
3827
<ul className="navbar-nav">
3928
{items}
4029
</ul>
41-
</Container>
42-
</Navbar>
30+
</div>
31+
</nav>
4332
</>
4433
);
4534
}

‎app/components/NavbarLink.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Link as RemixLink, useLocation } from "@remix-run/react";
2+
3+
export type NavbarLinkProps = {
4+
link: NavbarLinkItem;
5+
};
6+
7+
export type NavbarLinkItem = {
8+
link: string;
9+
label: string;
10+
icon: JSX.Element;
11+
icon_bold: JSX.Element;
12+
};
13+
14+
export function NavbarLink({ link }: NavbarLinkProps) {
15+
const { pathname } = useLocation();
16+
const isActive = pathname.startsWith(link.link)
17+
18+
return (
19+
<li className="nav-item" key={link.label} >
20+
<RemixLink
21+
className={`nav-link px-3 py-0 py-lg-2 ${isActive ? ' active fw-bold' : ''}`}
22+
to={link.link}
23+
>
24+
<span className="d-lg-none" style={{"fontSize": "1.5rem"}}>{isActive ? link.icon_bold : link.icon}</span>
25+
<span className="d-none d-lg-inline">{link.label}</span>
26+
</RemixLink>
27+
</li>
28+
);
29+
}

‎app/components/Welcome/Welcome.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { Anchor } from "react-bootstrap";
21

32
export function Welcome() {
43
return (

‎app/root.tsx‎

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
useRouteError,
99
} from "@remix-run/react";
1010
import { HeaderSearch } from "./components/HeaderSearch/HeaderSearch";
11-
import { Container } from "react-bootstrap";
11+
import { Footer } from "./components/Footer";
1212

1313
export function Layout({ children }: { children: React.ReactNode }) {
1414
return (
@@ -33,7 +33,11 @@ export function Layout({ children }: { children: React.ReactNode }) {
3333
</style>
3434
</head>
3535
<body>
36+
<HeaderSearch />
37+
<div className="container-lg">
3638
{children}
39+
</div>
40+
<Footer />
3741
<ScrollRestoration />
3842
<Scripts />
3943
</body>
@@ -48,16 +52,7 @@ export default function App() {
4852
export function ErrorBoundary() {
4953
const error = useRouteError();
5054
return (
51-
<html lang="en">
52-
<head>
53-
<title>Oops!</title>
54-
<Meta />
55-
<Links />
56-
57-
</head>
58-
<body>
59-
<HeaderSearch />
60-
<Container>
55+
<>
6156
<h1 className="py-2">Error</h1>
6257
<div>
6358
{isRouteErrorResponse(error)
@@ -66,9 +61,6 @@ export function ErrorBoundary() {
6661
? error.message
6762
: "Unknown Error"}
6863
</div>
69-
</Container>
70-
<Scripts />
71-
</body>
72-
</html>
64+
</>
7365
);
7466
}

‎app/routes/_index.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import type { MetaFunction } from "@remix-run/node";
2-
import { Container } from 'react-bootstrap';
32
import { isRouteErrorResponse, Link as RemixLink, Links, Meta, Scripts, useRouteError } from "@remix-run/react";
43

5-
import { ColorSchemeToggle } from "~/components/ColorSchemeToggle/ColorSchemeToggle";
64
import { HeaderSearch } from "~/components/HeaderSearch/HeaderSearch";
75
import { Footer } from "~/components/Footer";
86

@@ -16,15 +14,10 @@ export const meta: MetaFunction = () => {
1614
export default function Index() {
1715
return (
1816
<>
19-
<HeaderSearch />
20-
<Container>
2117
<h1 className="py-2">
2218
Welcome to the Regex Zone
2319
</h1>
2420
<div className="pb-3">Check out the collection of useful <RemixLink to="/patterns/">Regular Expression Patterns</RemixLink>!</div>
25-
<ColorSchemeToggle />
26-
</Container>
27-
<Footer />
2821
</>
2922
);
3023
}
@@ -39,6 +32,8 @@ export function ErrorBoundary() {
3932
<Links />
4033
</head>
4134
<body>
35+
<HeaderSearch />
36+
<div className="container-lg">
4237
<h1>xx
4338
{isRouteErrorResponse(error)
4439
? `${error.status} ${error.statusText}`
@@ -47,6 +42,8 @@ export function ErrorBoundary() {
4742
: "Unknown Error"}
4843
</h1>
4944
<Scripts />
45+
</div>
46+
<Footer />
5047
</body>
5148
</html>
5249
);

0 commit comments

Comments
 (0)