From 7dd19fdf27eeb62d19f4b3c57d03cb571f3afb33 Mon Sep 17 00:00:00 2001 From: Andrew Marcuse Date: Sun, 22 Sep 2024 20:59:44 -0400 Subject: [PATCH] Cleanup + placeholder pages --- .github/workflows/gcr-deploy.yaml | 4 +- .gitignore | 10 ++-- TODO.md | 34 +++++++++++- .../ColorSchemeToggle/ColorSchemeToggle.tsx | 55 ++++++++++++++----- app/components/Footer.tsx | 13 ++++- app/components/HeaderSearch/HeaderSearch.tsx | 45 ++++++--------- app/components/NavbarLink.tsx | 29 ++++++++++ app/components/Welcome/Welcome.tsx | 1 - app/root.tsx | 22 +++----- app/routes/_index.tsx | 11 ++-- app/routes/links._index.tsx | 19 +++++++ app/routes/patterns.$entry._index.tsx | 13 ++--- app/routes/patterns._index.tsx | 42 ++++++-------- app/routes/patterns.tags[.]html.tsx | 19 ++----- app/routes/search[.]html.tsx | 19 ++----- app/routes/sharing._index.tsx | 19 +++++++ app/routes/testing._index.tsx | 19 +++++++ 17 files changed, 236 insertions(+), 138 deletions(-) create mode 100644 app/components/NavbarLink.tsx create mode 100644 app/routes/links._index.tsx create mode 100644 app/routes/sharing._index.tsx create mode 100644 app/routes/testing._index.tsx diff --git a/.github/workflows/gcr-deploy.yaml b/.github/workflows/gcr-deploy.yaml index d12fd68..c637207 100644 --- a/.github/workflows/gcr-deploy.yaml +++ b/.github/workflows/gcr-deploy.yaml @@ -25,13 +25,13 @@ jobs: - name: gcloud auth id: 'auth' - uses: 'google-github-actions/auth@v0' + uses: 'google-github-actions/auth@v2' with: credentials_json: '${{ secrets.GCP_SA_KEY }}' # Setup gcloud CLI - name: gcloud setup - uses: google-github-actions/setup-gcloud@v0 + uses: google-github-actions/setup-gcloud@v2 - name: gcloud docker-auth run: gcloud auth configure-docker diff --git a/.gitignore b/.gitignore index 2fb0fe1..c0189d0 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,7 @@ -node_modules - -/.cache /build +/.cache +.DS_Store .env -.yarn/install-state.gz -.DS_Store \ No newline at end of file +node_modules +tmp* +*.tmp diff --git a/TODO.md b/TODO.md index fab26bc..7d64890 100644 --- a/TODO.md +++ b/TODO.md @@ -1,9 +1,9 @@ # To Do - [ ] copy to clipboard for variations +- [ ] patterns into database - [ ] search.html - [ ] test button for variations -- [ ] comments via utteranc.es - [ ] homepage: search - [ ] homepage: featured - [ ] homepage: latest @@ -16,6 +16,38 @@ - [ ] post to places besides RXP - [ ] 404 page + +## Data Model + +all: + - owner + - created + - updated + +PatternBase (rpb) + - handle + - title + - details_md + - featured + - public + - tags (array) + +PatternVariation (rpv) + - title + - engines (array) + - pattern + - flags + - replacement + +PatternVariationTest (rpt) + - haystack + - results (JSONB, per POSIX) + + +## POSIX API + +- [GNU](https://www.gnu.org/software/libc/manual/html_node/Regexp-Subexpressions.html) + ## Fonts - Roboto Slab for headings diff --git a/app/components/ColorSchemeToggle/ColorSchemeToggle.tsx b/app/components/ColorSchemeToggle/ColorSchemeToggle.tsx index 9bfa5a1..0d1b8c0 100644 --- a/app/components/ColorSchemeToggle/ColorSchemeToggle.tsx +++ b/app/components/ColorSchemeToggle/ColorSchemeToggle.tsx @@ -1,25 +1,50 @@ 'use client'; -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'; - } +import React from "react"; + + + + +function getColorScheme() { + + if (typeof window === 'undefined') { + return 'light'; + } + + if (document.documentElement.hasAttribute('data-bs-theme')) { + return document.documentElement.getAttribute('data-bs-theme'); } - document.documentElement.setAttribute('data-bs-theme', scheme); + + if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { + return 'dark'; + } else { + return 'light'; + } + } export function ColorSchemeToggle() { + const [ currentScheme, setColorScheme ] = React.useState(getColorScheme()); + + + const onClick = (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); + setColorScheme(scheme); + } return ( - - - - - +
+ + +
); } + +// diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx index a26105f..d092e64 100644 --- a/app/components/Footer.tsx +++ b/app/components/Footer.tsx @@ -1,3 +1,4 @@ +import { ColorSchemeToggle } from "~/components/ColorSchemeToggle/ColorSchemeToggle"; const links = [ { link: 'https://github.com/regexplanet/regex-zone/issues', label: 'Feedback' }, @@ -20,8 +21,14 @@ export function Footer() { ); return ( - + <> +
+ + ) } \ No newline at end of file diff --git a/app/components/HeaderSearch/HeaderSearch.tsx b/app/components/HeaderSearch/HeaderSearch.tsx index f82dff9..3d69143 100644 --- a/app/components/HeaderSearch/HeaderSearch.tsx +++ b/app/components/HeaderSearch/HeaderSearch.tsx @@ -1,45 +1,34 @@ -import { PiMagnifyingGlass } from 'react-icons/pi'; -import { Link as RemixLink, useLocation } from "@remix-run/react"; -import { Container, Navbar } from 'react-bootstrap'; +import { PiBlueprint, PiBlueprintBold, PiLink, PiMagnifyingGlass, PiMagnifyingGlassBold, PiPlay, PiPlayBold, PiUsersThree, PiUsersThreeBold } from 'react-icons/pi'; +import { Link as RemixLink } from "@remix-run/react"; import RegexZoneSvg from '../Logos/RegexZoneSvg'; +import { NavbarLink, NavbarLinkItem } from '~/components/NavbarLink'; -const links = [ - { link: '/patterns/', label: 'Patterns' }, - //{ link: '/docs/', label: 'Docs' }, - { link: 'https://www.regexplanet.com/', label: 'Testing' }, - //{ link: 'https://github.com/regexplanet/regex-zone/discussions', label: 'Community' }, - { link: '/search.html', label: 'Search' }, - { link: '/404', label: '404' }, +const links:NavbarLinkItem[] = [ + { link: '/patterns/', label: 'Patterns', icon: , icon_bold: }, + { link: '/links/', label: 'Links', icon: , icon_bold: }, + { link: '/testing/', label: 'Testing', icon: , icon_bold: }, + { link: '/sharing/', label: 'Sharing', icon: , icon_bold: }, + { link: '/search.html', label: 'Search', icon: , icon_bold: }, ]; export function HeaderSearch() { - const { pathname } = useLocation(); - const items = links.map((link) => ( -
  • - - {link.label} - -
    • - )); + const items = links.map((link, index) => ()); return ( <> - - - - + ); } \ No newline at end of file diff --git a/app/components/NavbarLink.tsx b/app/components/NavbarLink.tsx new file mode 100644 index 0000000..d7a0189 --- /dev/null +++ b/app/components/NavbarLink.tsx @@ -0,0 +1,29 @@ +import { Link as RemixLink, useLocation } from "@remix-run/react"; + +export type NavbarLinkProps = { + link: NavbarLinkItem; +}; + +export type NavbarLinkItem = { + link: string; + label: string; + icon: JSX.Element; + icon_bold: JSX.Element; +}; + +export function NavbarLink({ link }: NavbarLinkProps) { + const { pathname } = useLocation(); + const isActive = pathname.startsWith(link.link) + + return ( +
  • + + {isActive ? link.icon_bold : link.icon} + {link.label} + +
    • + ); +} diff --git a/app/components/Welcome/Welcome.tsx b/app/components/Welcome/Welcome.tsx index 6890f19..5c02cb6 100644 --- a/app/components/Welcome/Welcome.tsx +++ b/app/components/Welcome/Welcome.tsx @@ -1,4 +1,3 @@ -import { Anchor } from "react-bootstrap"; export function Welcome() { return ( diff --git a/app/root.tsx b/app/root.tsx index ee74007..73b94e2 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -8,7 +8,7 @@ import { useRouteError, } from "@remix-run/react"; import { HeaderSearch } from "./components/HeaderSearch/HeaderSearch"; -import { Container } from "react-bootstrap"; +import { Footer } from "./components/Footer"; export function Layout({ children }: { children: React.ReactNode }) { return ( @@ -33,7 +33,11 @@ export function Layout({ children }: { children: React.ReactNode }) { + +
    {children} +
    +