UPDATE: header and basics working

fileformat · fileformat · commit 89dcc6e7e5b3 · 2024-09-08T15:04:21.000-04:00
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,5 @@
+Dockerfile
+.dockerignore
+*.env
+*.md
+*.sh
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,40 @@
+# syntax=docker/dockerfile:1.7-labs
+FROM node:20-bookworm AS base
+
+WORKDIR /app
+
+USER root
+
+RUN apt-get update && apt-get install -y dumb-init
+
+# Copy the just the files necessary for npm ci
+COPY package.json package-lock.json /app/
+RUN npm install --audit=false --fund=false --omit dev
+
+
+FROM base AS builder
+
+COPY . /app/
+
+RUN npm install --audit=false --fund=false
+RUN npm run build
+
+
+FROM gcr.io/distroless/nodejs20-debian12:latest AS runner
+
+ARG COMMIT="(not set)"
+ARG LASTMOD="(not set)"
+ENV COMMIT=$COMMIT
+ENV LASTMOD=$LASTMOD
+ENV NODE_ENV=production
+
+USER nonroot
+COPY --chown=nonroot:nonroot --from=base /usr/bin/dumb-init /usr/bin/dumb-init
+COPY --chown=nonroot:nonroot --from=builder /app/build /app/build
+COPY --chown=nonroot:nonroot --from=builder /app/node_modules /app/node_modules
+COPY --chown=nonroot:nonroot ./server.js /app/server.js
+COPY --chown=nonroot:nonroot ./package.json /app/package.json
+
+WORKDIR /app
+ENTRYPOINT ["/usr/bin/dumb-init", "--"]
+CMD ["/nodejs/bin/node", "./server.js"]
diff --git a/LICENSE.txt b/LICENSE.txt
diff --git a/README.md b/README.md
@@ -1,36 +1,53 @@
-# Welcome to Remix + Vite!
+# Regex Zone  [<img alt="Logo for Regex Zone" src="public/favicon.svg" height="96" align="right"/>](https://www.regex.zone/)
 
-📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/future/vite) for details on supported features.
+[![build](https://github.com/regexplanet/regex-zone/actions/workflows/gcr-deploy.yaml/badge.svg)](https://github.com/regexplanet/regex-zone/actions/workflows/gcr-deploy.yaml)
 
-## Development
+A catalog of useful regular expressions and related resources.
 
-Run the Vite dev server:
+## License
 
-```shellscript
-npm run dev
-```
+CC BY-SA 4.0: [Overview](https://creativecommons.org/licenses/by-sa/4.0/), [legal text](LICENSE.txt)
 
-## Deployment
+## Contributing
 
-First, build your app for production:
+LATER
 
-```sh
-npm run build
-```
+## Links
 
-Then run the app in production mode:
+- [Wikipedia:Regular_Expression](https://en.wikipedia.org/wiki/Regular_expression)
 
-```sh
-npm start
-```
+## Other Libraries of Regex Patterns
 
-Now you'll need to pick a host to deploy it to.
+- [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)
+- [RegexHub](https://projects.lukehaas.me/regexhub/)
+- [RegExLib](https://regexlib.com/Default.aspx)
+- [sindresorhus](https://github.com/sindresorhus?tab=repositories&q=regex&type=&language=&sort=)
 
-### DIY
+## Credits
 
-If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
+[![Google CloudRun](https://www.vectorlogo.zone/logos/google_cloud_run/google_cloud_run-ar21.svg)](https://cloud.google.com/run/ "Hosting")
+[![Git](https://www.vectorlogo.zone/logos/git-scm/git-scm-ar21.svg)](https://git-scm.com/ "Version control")
+[![Github](https://www.vectorlogo.zone/logos/github/github-ar21.svg)](https://github.com/ "Code hosting")
+[![Google Noto Emoji](https://www.vectorlogo.zone/logos/google/google-ar21.svg)](https://github.com/googlefonts/noto-emoji/blob/master/svg/emoji_u1f441.svg "Logo/Favicon")[![NodePing](https://www.vectorlogo.zone/logos/nodeping/nodeping-ar21.svg)](https://nodeping.com?rid=201109281250J5K3P "Uptime monitoring")
+[![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")
+[![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")
 
-Make sure to deploy the output of `npm run build`
+## Font
+
+- Roboto Slab
+- OpenSans for body
+- Nimbus Mono for code
+
+- Jetbrains mono
+- roboto mono
+- b612-mono
+- DM Mono
+- Courier Prime
 
-- `build/server`
-- `build/client`
diff --git a/TODO.md b/TODO.md
@@ -0,0 +1,18 @@
+# To Do
+
+- [ ] /library/
+- [ ] /library/xxx/
+- [ ] nodeping
+- [ ] /tag/
+- [ ] /tag/xxx/
+- [ ] comments via utteranc.es
+- [ ] homepage: search
+- [ ] homepage: featured
+- [ ] homepage: latest
+- [ ] sitemap.xml
+- [ ] post to RegexPlanet
+- [ ] JSON schema for library
+- [ ] CI for yaml validated via json schema
+- [ ] more regex in the catalog
+- [ ] post to places besides RXP
+- [ ] 404 page
diff --git a/app/components/HeaderSearch/HeaderSearch.module.css b/app/components/HeaderSearch/HeaderSearch.module.css
@@ -0,0 +1,37 @@
+.header {
+    height: rem(56px);
+    margin-bottom: rem(120px);
+    background-color: var(--mantine-color-body);
+    border-bottom: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+    padding-left: var(--mantine-spacing-md);
+    padding-right: var(--mantine-spacing-md);
+}
+
+.inner {
+    height: rem(56px);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.link {
+    display: block;
+    line-height: 1;
+    padding: rem(8px) rem(12px);
+    border-radius: var(--mantine-radius-sm);
+    text-decoration: none;
+    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+    font-size: var(--mantine-font-size-sm);
+    font-weight: 500;
+
+    @mixin hover {
+        background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+    }
+}
+
+.sitename {
+    font-size: var(--mantine-font-size-lg);
+    font-weight: 700;
+    color: light-dark(var(--mantine-color-gray-9), var(--mantine-color-dark-0));
+    text-decoration: none;
+}
diff --git a/app/components/HeaderSearch/HeaderSearch.tsx b/app/components/HeaderSearch/HeaderSearch.tsx
@@ -0,0 +1,60 @@
+import { Autocomplete, Group, Burger, rem, Anchor } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { PiMagnifyingGlass } from 'react-icons/pi';
+
+import classes from './HeaderSearch.module.css';
+import RegexZoneSvg from '../Logos/RegexZoneSvg';
+
+const links = [
+    { link: '/library/', label: 'Library' },
+    { link: '/docs/', label: 'Docs' },
+    { link: 'https://www.regexplanet.com/', label: 'Testing' },
+    { link: 'https://github.com/regexplanet/regex-zone/discussions', label: 'Community' },
+];
+
+export function HeaderSearch() {
+    const [opened, { toggle }] = useDisclosure(false);
+
+    const items = links.map((link) => (
+        <a
+            key={link.label}
+            href={link.link}
+            className={classes.link}
+            onClick={(event) => {
+                if (!link.link.startsWith("https://")) {
+                    event.preventDefault()
+                }
+            }}
+        >
+            {link.label}
+        </a>
+    ));
+
+    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>
+    );
+}
diff --git a/app/components/Logos/RegexZoneSvg.tsx b/app/components/Logos/RegexZoneSvg.tsx
@@ -0,0 +1,94 @@
+import * as React from "react"
+
+
+const SvgComponent = (props) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlSpace="preserve"
+        style={{
+            enableBackground: "new 0 0 128 128",
+        }}
+        viewBox="0 0 128 128"
+        {...props}
+    >
+        <path
+            d="M63.04 7.57C36.72 6.97 7.69 28.8 8.25 64.16c.49 31.09 23.85 54.62 54.12 55.11 30.27.49 57.09-19.52 57.25-55.27.17-36.03-27.63-55.77-56.58-56.43z"
+            style={{
+                fill: "#ff2a23",
+            }}
+        />
+        <path
+            d="M63.12 20.19c-20.88.71-41.95 16.29-42.44 43.76-.49 27.47 23.52 42.77 42.44 42.77 24.02 0 44.09-18.92 43.59-44.09-.49-25.16-19.41-43.26-43.59-42.44z"
+            style={{
+                fill: "#fffdfe",
+            }}
+        />
+        <path
+            d="M63.61 30.89c-18.92-.43-32.9 16.29-33.07 32.24-.16 16.29 10.03 32.9 32.74 33.72S96.67 79.58 97 64.28c.34-15.3-11.84-32.9-33.39-33.39z"
+            style={{
+                fill: "#ff2a23",
+            }}
+        />
+        <path
+            d="M41.98 63.73c-.16 14.31 10.03 22.54 22.37 22.54 11.21 0 22.21-7.07 22.21-22.04 0-13.49-10.2-21.55-21.55-22.04-11.35-.5-22.87 7.73-23.03 21.54z"
+            style={{
+                fill: "#fff",
+            }}
+        />
+        <path
+            d="M52.1 63.62c-.61 8.53 6.33 12.61 12.58 12.61 5.92 0 11.76-3.89 11.93-11.79.15-7.42-5.67-11.95-11.93-12.17-6.46-.22-12.09 4.42-12.58 11.35z"
+            style={{
+                fill: "#fb2b22",
+            }}
+        />
+        <path
+            d="m66.74 64.29-3.35 1.86 6.39 9.09s4.94.38 6.08-.91-.15-5.09-.15-5.09l-8.97-4.95z"
+            style={{
+                fill: "#cc1935",
+            }}
+        />
+        <path
+            d="M87.42 54.41c-.9-1.86-1.82-3.35-4.26-2.89-2.43.46-6.92 3.04-7.76 4.26-.77 1.12-1.52 2.51-1.52 2.51s-8.6 4.7-9.96 5.47c-2.13 1.22-.66 3.7.84 3.42 2.05-.38 11.21-4.11 11.21-4.11s1.94.46 3.08.46c1.14 0 7.64-3.21 8.52-3.8 1.45-.99.76-3.42-.15-5.32z"
+            style={{
+                fill: "#acb1b5",
+            }}
+        />
+        <path
+            d="M75.68 69.22s-.48 1.7-2.23 3.46c-1.82 1.82-3.69 2.54-3.69 2.54l5.77 8.46s4.29.31 7.41-2.73 1.76-7.02 1.76-7.02l-9.02-4.71z"
+            style={{
+                fill: "#c8c8c8",
+            }}
+        />
+        <path
+            d="m81.4 92.57-5.88-8.9s.98-.52 2.27-1.4c2.37-1.62 3.69-2.91 5.38-5.55.92-1.42 1.51-2.8 1.51-2.8l9.09 4.49s-.2 7.02-3.17 10.44-9.2 3.72-9.2 3.72z"
+            style={{
+                fill: "#cc1935",
+            }}
+        />
+        <path
+            d="m81.4 92.57 5.05 7.57s6.59.65 11.99-5.82 3.96-11.79 3.96-11.79l-8.63-4.13s-1.68 4.04-5.02 7.92-7.35 6.25-7.35 6.25z"
+            style={{
+                fill: "#c8c8c8",
+            }}
+        />
+        <path
+            d="m93.93 111.33-7.47-11.18s5.63-3.29 9.63-8.02c4.15-4.91 6.32-9.58 6.32-9.58l12.09 6.01s-2.72 7.03-8.75 13.38c-5.9 6.19-11.82 9.39-11.82 9.39z"
+            style={{
+                fill: "#cc1935",
+            }}
+        />
+        <path
+            d="M81.61 57.37c1.13 2.11 3 2.13 4.98 1.29 1.98-.84 11.33-7.45 11.33-7.45s12.7 6.39 20.91 3.19c8.21-3.19 7.98-11.86 7.98-11.86l-4.86-3.08s3.54-1.84 4.68-2.52c.56-.34 1.39-1.6.93-2.73-.36-.88-1.74-1.18-2.88-.72-1.14.46-4.43 1.49-4.43 1.49s1.31-5.45 1.08-5.75c-.23-.3-2.59-1.52-2.59-1.52s-7.68 0-8.67.38c-.99.38-8.59 7.91-8.59 7.91l-3.65 7.45-1.56 3.32s-10.65 4.77-12.25 5.45c-1.59.69-3.8 2.58-2.41 5.15z"
+            style={{
+                fill: "#006ca9",
+            }}
+        />
+        <path
+            d="M98.54 45.85s4.48-3.24 7.67-4.84 9.11-3.55 10.86-3.76c1.75-.21 2.47.26 2.78 1.08.31.82-.72 1.85-1.6 2.32-.87.46-5.51 2.57-10.65 5.3s-7.58 4.73-9.66 5.2c-1.05.24-2.4-.7-2.48-2.27-.06-1.22.18-2.24.98-4.58.98-2.88 3.13-7.21 4.94-10.03 2.68-4.17 6.54-7 10.81-7.77 4.27-.77 7.77.31 8.65 1.03.87.72.82 1.46.51 1.71-.31.25-.77.45-3.09-.37-1.61-.57-6.74-.57-10.34 2.11-3.64 2.7-4.53 4.37-6.12 7.31s-3.26 7.56-3.26 7.56z"
+            style={{
+                fill: "#1f87fd",
+            }}
+        />
+    </svg>
+)
+export default SvgComponent
diff --git a/app/components/Welcome/Welcome.tsx b/app/components/Welcome/Welcome.tsx
@@ -5,14 +5,14 @@ export function Welcome() {
   return (
     <>
       <Title className={classes.title} ta="center" mt={100}>
-        Welcome to{" "}
+        <Text inherit>Welcome to the</Text>
         <Text
           inherit
           variant="gradient"
           component="span"
           gradient={{ from: "pink", to: "yellow" }}
         >
-          Mantine
+          Regex Zone
         </Text>
       </Title>
       <Text color="dimmed" ta="center" size="lg" maw={580} mx="auto" mt="xl">
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -1,19 +1,21 @@
 import type { MetaFunction } from "@remix-run/node";
 import { Welcome } from "~/components/Welcome/Welcome";
 import { ColorSchemeToggle } from "~/components/ColorSchemeToggle/ColorSchemeToggle";
+import { HeaderSearch } from "~/components/HeaderSearch/HeaderSearch";
 
 export const meta: MetaFunction = () => {
   return [
-    { title: "Mantine Remix App" },
-    { name: "description", content: "Welcome to Mantine!" },
+    { title: "Regex Zone" },
+    { name: "description", content: "A library of useful regular expressions" },
   ];
 };
 
 export default function Index() {
   return (
-    <div>
+    <>
+      <HeaderSearch />
       <Welcome />
       <ColorSchemeToggle />
-    </div>
+    </>
   );
 }
diff --git a/docker-run.sh b/docker-run.sh
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +Dockerfile
 +.dockerignore
 +*.env
 +*.md
 +*.sh