UPDATE: mantine to bootstrap, tags page

Author: fileformat

.yarn/releases/yarn-4.4.1.cjs

@@ -16,15 +16,19 @@ LATER
 
 - [Wikipedia:Regular_Expression](https://en.wikipedia.org/wiki/Regular_expression)
 - [Cheatography Cheat Sheet](https://cheatography.com/davechild/cheat-sheets/regular-expressions/)
+- [aloisdg/awesome-regex](https://github.com/aloisdg/awesome-regex)
+- [slevithan/awesome-regex](https://github.com/slevithan/awesome-regex)
 
-## Other Libraries of Regex Patterns
+## Other Collections of Regex Patterns
 
 - [GitLeaks](https://github.com/gitleaks/gitleaks/blob/master/config/gitleaks.toml)
 - [iHateRegex](https://github.com/geongeorge/i-hate-regex/tree/master/static/regex)
 - [mingrammer/commonregex](https://github.com/mingrammer/commonregex)
 - [pyWhat](https://github.com/bee-san/pyWhat/blob/main/pywhat/Data/regex.json)
+- [RegexDB](https://rgxdb.com/)
 - [RegexHub](https://projects.lukehaas.me/regexhub/)
 - [RegExLib](https://regexlib.com/Default.aspx)
+- [regexhq](https://github.com/orgs/regexhq/repositories)
 - [sindresorhus](https://github.com/sindresorhus?tab=repositories&q=regex&type=&language=&sort=)
 
 ## Credits
@@ -39,6 +43,6 @@ LATER
 [![npm](https://www.vectorlogo.zone/logos/npmjs/npmjs-ar21.svg)](https://www.npmjs.com/ "JS Package Management")
 [![Phosphor Icons](https://www.vectorlogo.zone/logos/phosphoricons/phosphoricons-ar21.svg)](https://phosphoricons.com/ "Toolbar icons")
 [![react.js](https://www.vectorlogo.zone/logos/reactjs/reactjs-ar21.svg)](https://reactjs.org/ "UI Framework")
-[![Remix](https://www.vectorlogo.zone/logos/remix/remix-ar21.svg)](https://remix.run/ "React Framework")
+[![Remix](https://www.vectorlogo.zone/logos/remixrun/remixrun-ar21.svg)](https://remix.run/ "React Framework")
 [![TypeScript](https://www.vectorlogo.zone/logos/typescriptlang/typescriptlang-ar21.svg)](https://www.typescriptlang.org/ "Programming Language")
 [![Vite](https://www.vectorlogo.zone/logos/vitejsdev/vitejsdev-ar21.svg)](https://vitejs.dev/ "Bundler")

README.md

@@ -1,15 +1,15 @@
 # To Do
 
-- [ ] /library/
-- [ ] /library/xxx/
-- [ ] nodeping
-- [ ] /tag/
-- [ ] /tag/xxx/
+- [ ] sitemap.xml
+- [ ] search.html
+- [ ] copy to clipboard for variations
+- [ ] test button for variations
 - [ ] comments via utteranc.es
 - [ ] homepage: search
 - [ ] homepage: featured
 - [ ] homepage: latest
-- [ ] sitemap.xml
+- [ ] notes for variations
+- [ ] tags for variations
 - [ ] post to RegexPlanet
 - [ ] JSON schema for library
 - [ ] CI for yaml validated via json schema

TODO.md

@@ -1,15 +1,25 @@
 'use client';
 
-import { Button, Group, useMantineColorScheme } from '@mantine/core';
+import { Button, ButtonGroup } from 'react-bootstrap';
+
+function setColorScheme(scheme: 'light' | 'dark' | 'auto') {
+  if (scheme == 'auto') {
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      scheme = 'dark';
+    } else {
+      scheme = 'light';
+    }
+  }
+  document.documentElement.setAttribute('data-bs-theme', scheme);
+}
 
 export function ColorSchemeToggle() {
-  const { setColorScheme } = useMantineColorScheme();
 
   return (
-    <Group justify="center" mt="xl">
+    <ButtonGroup>
       <Button onClick={() => setColorScheme('light')}>Light</Button>
       <Button onClick={() => setColorScheme('dark')}>Dark</Button>
       <Button onClick={() => setColorScheme('auto')}>Auto</Button>
-    </Group>
+    </ButtonGroup>
   );
 }

app/components/ColorSchemeToggle/ColorSchemeToggle.tsx

@@ -0,0 +1,27 @@
+
+const links = [
+    { link: 'https://github.com/regexplanet/regex-zone/issues', label: 'Feedback' },
+    { link: 'https://github.com/regexplanet/regex-zone?tab=readme-ov-file#credits', label: 'Credits'},
+    { link: 'https://github.com/regexplanet/regex-zone', label: 'Source' },
+    { link: 'https://github.com/regexplanet/regex-zone?tab=readme-ov-file#other-libraries-of-regex-patterns', label: 'Alternatives' },
+];
+
+export function Footer() {
+
+    const initial:JSX.Element[] = []
+    links.forEach((link, index) => {
+        initial.push(<a className="text-body-tertiary text-decoration-none" href={link.link} key={link.label}>
+                {link.label}
+            </a>);
+            if (index < links.length - 1) {
+                initial.push(<span className="mx-1">|</span>);
+            }
+        }
+    );
+
+    return (
+        <footer className="d-flex justify-content-center text-body-tertiary pt-3"><small>
+            { initial }
+        </small></footer>
+    )
+}

app/components/Footer.tsx

@@ -1,56 +1,45 @@
-import { Autocomplete, Group, Burger, rem, Anchor } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
 import { PiMagnifyingGlass } from 'react-icons/pi';
-import { Link as RemixLink } from "@remix-run/react";
+import { Link as RemixLink, useLocation } from "@remix-run/react";
+import { Container, Navbar } from 'react-bootstrap';
 
-import classes from './HeaderSearch.module.css';
 import RegexZoneSvg from '../Logos/RegexZoneSvg';
 
 const links = [
     { link: '/library/', label: 'Library' },
-    { link: '/docs/', label: 'Docs' },
+    //{ link: '/docs/', label: 'Docs' },
     { link: 'https://www.regexplanet.com/', label: 'Testing' },
-    { link: 'https://github.com/regexplanet/regex-zone/discussions', label: 'Community' },
+    //{ link: 'https://github.com/regexplanet/regex-zone/discussions', label: 'Community' },
+    { link: '/search.html', label: 'Search' },
+    { link: '/404', label: '404' },
 ];
 
 export function HeaderSearch() {
-    const [opened, { toggle }] = useDisclosure(false);
+    const { pathname } = useLocation();
 
     const items = links.map((link) => (
+        <li className="nav-item" key = {link.label} >
         <RemixLink
-            key={link.label}
+            className={pathname.startsWith(link.link) ? 'nav-link active fw-bold' : 'nav-link'}
             to={link.link}
-            className={classes.link}
         >
             {link.label}
         </RemixLink>
+        </li>
     ));
 
     return (
-        <header className={classes.header}>
-            <div className={classes.inner}>
-                <Group>
-                    <Burger opened={opened} onClick={toggle} size="sm" hiddenFrom="sm" />
-                    <RegexZoneSvg style={{ width: rem(32), height: rem(32) }} />
-                    <Anchor
-                        className={classes.sitename}
-                        href="/"
-                        visibleFrom="md"
-                    >Regex Zone</Anchor>
-                </Group>
-
-                <Group>
-                    <Group ml={50} gap={5} className={classes.links} visibleFrom="sm">
-                        {items}
-                    </Group>
-                    <Autocomplete
-                        className={classes.search}
-                        placeholder="Search"
-                        leftSection={<PiMagnifyingGlass style={{ width: rem(16), height: rem(16) }} />}
-                        data={['React', 'Angular', 'Vue', 'Next.js', 'Riot.js', 'Svelte', 'Blitz.js']}
-                    />
-                </Group>
-            </div>
-        </header>
+        <>
+            <Navbar className="bg-body-tertiary border-bottom">
+                <Container>
+                    <Navbar.Brand as={RemixLink} className="fw-bold" to="/">
+                        <RegexZoneSvg height={'2rem'} className="pe-2" />
+                        Regex Zone
+                    </Navbar.Brand>
+                    <ul className="navbar-nav">
+                    {items}
+                    </ul>
+                </Container>
+            </Navbar>
+        </>
     );
 }

app/components/HeaderSearch/HeaderSearch.module.css

@@ -6,22 +6,33 @@ const LIBRARY_DIR = path.join(process.cwd(), "library");
 
 export type LibraryEntry = {
   title: string;
+  detail?: string; // markdown!
   handle: string;
   fullPath: string;
+  tags?: string[];
+  variations: LibraryEntryVariation[];
+};
+
+export type LibraryEntryVariation = {
+  title: string;
+  pattern: string;
+  description?: string;
 };
 
 const cache: Map<string, LibraryEntry> = new Map();
 const all: LibraryEntry[] = [];
 
 async function initialize() {
-    const fileNames = await fsPromises.readdir(LIBRARY_DIR);
+  if (all.length > 0) {
+    return;
+  }
+  const fileNames = await fsPromises.readdir(LIBRARY_DIR);
   for await (const fileName of fileNames) {
     const fullPath = path.join(LIBRARY_DIR, fileName);
     console.log(`filename=${fullPath}`);
 
     const raw = await fsPromises.readFile(fullPath, "utf-8");
     const parsed = yaml.load(raw, {
-      fullPath,
       schema: yaml.JSON_SCHEMA,
     }) as LibraryEntry;
     parsed.fullPath = fullPath;
@@ -33,21 +44,17 @@ async function initialize() {
 }
 
 function get(handle: string) {
-
   const entry = cache.get(handle);
 
   if (!entry) {
-    throw new Error(`Unknown catalog entry ${handle}`);
+    return null;
   }
 
   return entry;
 }
 
 function getAll(): LibraryEntry[] {
-
   return all;
 }
 
-initialize();
-
 export { get, getAll, initialize };

app/components/HeaderSearch/HeaderSearch.tsx

@@ -0,0 +1,17 @@
+import { Link as RemixLink } from "@remix-run/react";
+
+export function TagList(tags: string[]) {
+    return (
+        <>
+            {tags.map((tag) => (
+                <RemixLink
+                    key={tag}
+                    to={`/library/tags.html?tag=${tag}`}
+                    className="badge text-bg-primary text-decoration-none me-2"
+                >
+                    {tag.replace('-', ' ')}
+                </RemixLink>
+            ))}
+        </>
+    );
+}