Contact page, copy to clipboard, run on RegexPlanet

Author: fileformat

app/components/Footer.tsx

@@ -4,6 +4,7 @@ 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: '/contact.html', label: 'Contact' },
     //{ link: 'https://github.com/regexplanet/regex-zone?tab=readme-ov-file#other-libraries-of-regex-patterns', label: 'Alternatives' },
 ];
 

app/components/Patterns.ts

@@ -16,6 +16,7 @@ export type PatternEntry = {
 export type PatternEntryVariation = {
   title: string;
   pattern: string;
+  replacement?: string;
   description?: string;
 };
 

app/routes/auth._index.tsx

@@ -1,16 +1,16 @@
 import { LoaderFunctionArgs } from "@remix-run/node";
-import { Link as RemixLink, useLoaderData } from "@remix-run/react";
+import { useLoaderData } from "@remix-run/react";
 import { authenticator } from "~/services/auth.server";
 import { cookieStorage } from "~/services/session.server";
+import { User } from "~/types/User";
 
 export async function loader({ request }: LoaderFunctionArgs) {
     //console.log('in loader', (await cookieStorage.getSession(request.headers.get("Cookie"))).get("user"))
     const session = await cookieStorage.getSession(request.headers.get("Cookie"));
     const sessionUser = session.get("user");
     const authUser = await authenticator.isAuthenticated(request);
     return {
-        //
-        user: sessionUser,
+        user: authUser,
         sessionUser,
         authUser,
         session: (await cookieStorage.getSession(request.headers.get("Cookie")))
@@ -21,12 +21,14 @@ function LoginSection() {
     return (
         <>
             <p>You are not logged in!</p>
-            <RemixLink className="btn btn-primary" to="login.html">Login</RemixLink>
+            <form action="/auth/github" method="post">
+                <button type="submit" className="btn btn-primary">Login with Github</button>
+            </form>
         </>
     )
 }
 
-function LogoutSection({ user }: { user: any }) {
+function LogoutSection({ user }: { user: User }) {
     return (
         <>
             <p>You are logged in as <span className="border rounded bg-body-tertiary text-body-secondary p-2">{user.displayName} ({user.providerName}@{user.provider})</span></p>

app/routes/auth.login[.]html.tsx

@@ -49,7 +49,6 @@ export default function AuthLogout() {
       <h1 className="py-2">Logout</h1>
       <p>{message.text}</p>
       <p>
-        <RemixLink className="btn btn-primary mx-2" to="/auth/">Login</RemixLink>
         <RemixLink className="btn btn-primary mx-2" to="/">Home</RemixLink>
       </p>
     </>

app/routes/auth.logout[.]html.tsx

@@ -0,0 +1,27 @@
+import type { MetaFunction } from "@remix-run/node";
+import { useLocation } from "@remix-run/react";
+
+export const meta: MetaFunction = () => {
+    return [
+        { title: "Contact - Regex Zone" },
+    ];
+};
+
+export default function Page() {
+
+    const location = useLocation();
+
+    let fullpath = location.pathname;
+    if (location.search) {
+        fullpath += '?' + location.search;
+    }
+    if (typeof window !== 'undefined') {
+        fullpath = window.location.href
+    }
+
+    return (
+        <>
+            <iframe height="737" title="Embedded Wufoo Form" style={{ "width": "100%", "border": "none" }} sandbox="allow-popups-to-escape-sandbox allow-top-navigation allow-scripts allow-popups allow-forms allow-same-origin" src={`https://fileformat.wufoo.com/embed/z5yinul1mj3me9/?field14=regexzone&field16=${encodeURIComponent(fullpath)}`}></iframe>
+        </>
+    );
+}

app/routes/contact[.]html.tsx

@@ -3,6 +3,8 @@
 import { json, type MetaFunction, LoaderFunctionArgs } from "@remix-run/node";
 //import type { LoaderFunctionArgs } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
+import { useCopyToClipboard } from "@uidotdev/usehooks";
+import { PiClipboardBold, PiPlayBold } from "react-icons/pi";
 import Markdown from 'react-markdown'
 
 import { get, initialize, PatternEntry, PatternEntryVariation } from "~/components/Patterns";
@@ -54,10 +56,24 @@ function PatternEntryView(entry: PatternEntry) {
 }
 
 function PatternEntryVariationView(variation: PatternEntryVariation) {
+    const [_, copyToClipboard] = useCopyToClipboard();
     return (
         <tr>
             <td>{variation.title}</td>
-            <td><code>{variation.pattern}</code></td>
+            <td>
+                <code>{variation.pattern}</code>
+            </td>
+            <td>
+                <button
+                    className="btn btn-sm btn-outline-secondary ms-2 px-1 pt-0 pb-1"
+                    onClick={() => copyToClipboard(variation.pattern)}
+                ><PiClipboardBold title="copy to clipboard" /></button>
+                <form action="https://www.regexplanet.com/advanced/java/index.html" className="d-inline" method="post" target="_blank">
+                    <input type="hidden" name="regex" value={variation.pattern} />
+                    <input type="hidden" name="replacement" value={variation.replacement} />
+                    <button className="btn btn-sm btn-outline-secondary ms-2 px-1 pt-0 pb-1" ><PiPlayBold title="Test" /></button>
+                </form>
+            </td>
         </tr>
     )
 }

app/routes/patterns.$entry._index.tsx

@@ -12,6 +12,7 @@ export async function loader() {
     lines.push('<?xml-stylesheet type="text/xsl" href="/sitemap.xslt" ?>');
     lines.push('<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9">');
     lines.push(urlLine('/'));
+    lines.push(urlLine('/contact.html'));
     lines.push(urlLine('/patterns/'));
     lines.push(urlLine('/patterns/tags.html'));
     lines.push(urlLine('/search.html'));

app/routes/sitemap[.]xml.tsx

@@ -14,6 +14,7 @@
     "@remix-run/express": "^2.11.2",
     "@remix-run/node": "^2.9.2",
     "@remix-run/react": "^2.9.2",
+    "@uidotdev/usehooks": "^2.4.1",
     "bootstrap": "^5.3.3",
     "isbot": "^5.1.9",
     "js-yaml": "^4.1.0",