Tailwind, Prettier, ESLint, Typescript runner!

2026-05-12 02:40:07 +02:00 · 2023-02-17 12:19:13 -08:00
parent 5b09b7b613
commit 23ed3f3a42
27 changed files with 3347 additions and 300 deletions
--- a/src/App.css
+++ b/src/App.css
@@ -1,7 +0,0 @@
-.logo.vite:hover {
-  filter: drop-shadow(0 0 2em #747bff);
-}
-
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafb);
-}
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,67 +1,76 @@
-import {useState} from "react";
-import {invoke} from "@tauri-apps/api/tauri";
-import "./App.css";
-import Editor from "./Editor";
+import { FormEvent, useState } from 'react';
+import { invoke } from '@tauri-apps/api/tauri';
+import Editor from './components/Editor/Editor';
+import { Input } from './components/Input';
+import { Stacks } from './components/Stacks';
+import { Button } from './components/Button';
+import { Grid } from './components/Grid';

 interface Response {
-    url: string;
-    body: string;
-    status: string;
-    elapsed: number;
-    elapsed2: number;
+  url: string;
+  body: string;
+  status: string;
+  elapsed: number;
+  elapsed2: number;
 }

 function App() {
-    const [responseBody, setResponseBody] = useState<Response | null>(null);
-    const [url, setUrl] = useState("https://arthorsepod.com");
-    const [loading, setLoading] = useState(false);
+  const [responseBody, setResponseBody] = useState<Response | null>(null);
+  const [url, setUrl] = useState('schier.co');
+  const [loading, setLoading] = useState(false);

-    async function sendRequest() {
-        setLoading(true);
-        const resp = await invoke("send_request", {url: url}) as Response;
-        if (resp.body.includes("<head>")) {
-            resp.body = resp.body.replace(/<head>/ig, `<head><base href="${resp.url}"/>`);
-        }
-        setLoading(false);
-        setResponseBody(resp);
+  async function sendRequest(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setLoading(true);
+    const resp = (await invoke('send_request', { url: url })) as Response;
+    if (resp.body.includes('<head>')) {
+      resp.body = resp.body.replace(/<head>/gi, `<head><base href="${resp.url}"/>`);
    }
+    setLoading(false);
+    setResponseBody(resp);
+  }

-    return (
-        <div className="container">
-            <h1>Welcome, Friend!</h1>
-            <form
-                onSubmit={(e) => {
-                    e.preventDefault();
-                    sendRequest();
-                }}
-            >
-                <input
-                    id="greet-input"
-                    onChange={(e) => setUrl(e.currentTarget.value)}
-                    value={url}
-                    placeholder="Enter a URL..."
+  return (
+    <div className="absolute top-0 left-0 right-0 bottom-0 overflow-hidden">
+      <div className="w-full h-7 bg-gray-800" data-tauri-drag-region></div>
+      <div className="p-12 bg-gray-900 h-full w-full overflow-auto">
+        <h1 className="text-4xl font-semibold">Welcome, Friend!</h1>
+        <Stacks as="form" className="mt-5 items-end" onSubmit={sendRequest}>
+          <Input
+            name="url"
+            label="Enter URL"
+            className="mr-1"
+            onChange={(e) => setUrl(e.currentTarget.value)}
+            value={url}
+            placeholder="Enter a URL..."
+          />
+          <Button type="submit" disabled={loading}>
+            {loading ? 'Sending...' : 'Send'}
+          </Button>
+        </Stacks>
+        {responseBody !== null && (
+          <>
+            <div className="pt-6">
+              {responseBody?.status}
+              &nbsp;&bull;&nbsp;
+              {responseBody?.elapsed}ms &nbsp;&bull;&nbsp;
+              {responseBody?.elapsed2}ms
+            </div>
+            <Grid cols={2} rows={2} gap={1}>
+              <Editor value={responseBody?.body} />
+              <div className="iframe-wrapper">
+                <iframe
+                  srcDoc={responseBody.body}
+                  sandbox="allow-scripts allow-same-origin"
+                  className="h-full w-full rounded-lg"
                />
-                <button type="submit" disabled={loading}>{loading ? 'Sending...' : 'Send'}</button>
-            </form>
-            {responseBody !== null && (
-                <>
-                    <div style={{paddingTop: "2rem"}}>
-                        {responseBody?.status}
-                        &nbsp;&bull;&nbsp;
-                        {responseBody?.elapsed}ms
-                        &nbsp;&bull;&nbsp;
-                        {responseBody?.elapsed2}ms
-                    </div>
-                    <div className="row">
-                        <Editor value={responseBody?.body}/>
-                        <div className="iframe-wrapper">
-                            <iframe srcDoc={responseBody.body} sandbox="allow-scripts allow-same-origin"/>
-                        </div>
-                    </div>
-                </>
-            )}
-        </div>
-    );
+              </div>
+            </Grid>
+          </>
+        )}
+      </div>
+    </div>
+  );
 }

 export default App;
--- a/src/Editor.tsx
+++ b/src/Editor.tsx
@@ -1,13 +0,0 @@
-import useCodeMirror from "./hooks/useCodemirror";
-import "./Editor.css";
-
-interface Props {
-    value: string;
-}
-
-export default function Editor(props: Props) {
-    const {ref} = useCodeMirror({value: props.value});
-    return (
-        <div ref={ref} id="editor-yo" />
-    )
-}
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -0,0 +1,8 @@
+import classnames from 'classnames';
+import { ButtonHTMLAttributes } from 'react';
+
+export function Button({ className, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button className={classnames(className, 'bg-blue-600 h-10 px-5 rounded-lg')} {...props} />
+  );
+}
--- a/src/components/Editor/Editor.css
+++ b/src/components/Editor/Editor.css
@@ -1,26 +1,10 @@
-.cm-editor {
-    background-color: #000;
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-    text-align: left;
-    font-size: 0.8rem;
-}
-
-.cm-editor, .iframe-wrapper {
-    padding: 0.3rem 0.5rem;
+.iframe-wrapper, .cm-editor {
    width: 100%;
    height: 30rem;
    border-radius: 0.5rem;
    overflow: hidden;
 }

-iframe {
-    width: 100%;
-    height: 100%;
-    border: 0;
-    border-radius: 0.5rem;
-}
-
 .cm-editor.cm-focused {
    outline: 0;
    box-shadow: 0 0 0 2pt rgba(180, 180, 180, 0.1);
--- a/src/components/Editor/Editor.tsx
+++ b/src/components/Editor/Editor.tsx
@@ -0,0 +1,11 @@
+import useCodeMirror from '../../hooks/useCodemirror';
+import './Editor.css';
+
+interface Props {
+  value: string;
+}
+
+export default function Editor(props: Props) {
+  const { ref } = useCodeMirror({ value: props.value });
+  return <div ref={ref} className="m-0 text-sm rounded-lg bg-gray-800 overflow-hidden" />;
+}
--- a/src/components/Grid.tsx
+++ b/src/components/Grid.tsx
@@ -0,0 +1,35 @@
+import classnames from 'classnames';
+import { ButtonHTMLAttributes, HTMLAttributes } from 'react';
+
+const colsClasses = {
+  none: 'grid-cols-none',
+  1: 'grid-cols-1',
+  2: 'grid-cols-2',
+};
+
+const rowsClasses = {
+  none: 'grid-rows-none',
+  1: 'grid-rows-1',
+  2: 'grid-rows-2',
+};
+
+const gapClasses = {
+  0: 'gap-0',
+  1: 'gap-1',
+  2: 'gap-2',
+};
+
+type Props = HTMLAttributes<HTMLElement> & {
+  rows?: keyof typeof rowsClasses;
+  cols?: keyof typeof colsClasses;
+  gap?: keyof typeof gapClasses;
+};
+
+export function Grid({ className, cols, gap, ...props }: Props) {
+  return (
+    <div
+      className={classnames(className, 'grid', cols && colsClasses[cols], gap && gapClasses[gap])}
+      {...props}
+    />
+  );
+}
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -0,0 +1,34 @@
+import { InputHTMLAttributes } from 'react';
+import classnames from 'classnames';
+import { VStack } from './Stacks';
+
+interface Props extends InputHTMLAttributes<HTMLInputElement> {
+  name: string;
+  label: string;
+  labelClassName?: string;
+}
+
+export function Input({ label, labelClassName, className, name, ...props }: Props) {
+  const id = `input-${name}`;
+  return (
+    <VStack>
+      <label
+        htmlFor={name}
+        className={classnames(
+          labelClassName,
+          'font-semibold text-sm uppercase text-gray-700 dark:text-gray-300',
+        )}
+      >
+        {label}
+      </label>
+      <input
+        id={id}
+        className={classnames(
+          className,
+          'border-2 border-gray-700 bg-gray-100 dark:bg-gray-800 h-10 px-5 rounded-lg text-sm focus:outline-none',
+        )}
+        {...props}
+      />
+    </VStack>
+  );
+}
--- a/src/components/Stacks.tsx
+++ b/src/components/Stacks.tsx
@@ -0,0 +1,72 @@
+import React, { Children, Fragment, HTMLAttributes, ReactNode } from 'react';
+import classnames from 'classnames';
+
+const spaceClasses = {
+  '0': 'pt-0',
+  '1': 'pt-1',
+};
+
+type Space = keyof typeof spaceClasses;
+
+interface HStackProps extends BoxProps {
+  space?: Space;
+  children: ReactNode;
+}
+
+export function Stacks({ className, space, children, ...props }: HStackProps) {
+  return (
+    <BaseStack className={classnames(className, 'flex-row')} {...props}>
+      {space
+        ? Children.toArray(children)
+            .filter(Boolean) // Remove null/false/undefined children
+            .map((c, i) => (
+              <Fragment key={i}>
+                {i > 0 ? (
+                  <div
+                    className={classnames(className, spaceClasses[space], 'pointer-events-none')}
+                    aria-hidden
+                  />
+                ) : null}
+                {c}
+              </Fragment>
+            ))
+        : children}
+    </BaseStack>
+  );
+}
+
+export interface VStackProps extends BoxProps {
+  space?: Space;
+  children: ReactNode;
+}
+
+export function VStack({ className, space, children, ...props }: VStackProps) {
+  return (
+    <BaseStack className={classnames(className, 'flex-col')} {...props}>
+      {space
+        ? Children.toArray(children)
+            .filter(Boolean) // Remove null/false/undefined children
+            .map((c, i) => (
+              <Fragment key={i}>
+                {i > 0 ? (
+                  <div
+                    className={classnames(spaceClasses[space], 'pointer-events-none')}
+                    aria-hidden
+                  />
+                ) : null}
+                {c}
+              </Fragment>
+            ))
+        : children}
+    </BaseStack>
+  );
+}
+
+interface BoxProps extends HTMLAttributes<HTMLElement> {
+  as?: React.ElementType;
+}
+
+function BaseStack({ className, as = 'div', ...props }: BoxProps) {
+  const Component = as;
+  return <Component className={classnames(className, 'flex flex-grow-0')} {...props} />;
+}
--- a/src/hooks/useCodemirror.ts
+++ b/src/hooks/useCodemirror.ts
@@ -1,61 +1,55 @@
-import {useEffect, useRef, useState} from "react";
-import {EditorView, minimalSetup} from "codemirror";
-import {javascript} from "@codemirror/lang-javascript";
-import {json} from "@codemirror/lang-json";
-import {html} from "@codemirror/lang-html";
-import {EditorState} from "@codemirror/state";
-import {tags} from "@lezer/highlight"
-import {HighlightStyle, syntaxHighlighting} from "@codemirror/language"
+import { useEffect, useRef, useState } from 'react';
+import { EditorView, minimalSetup } from 'codemirror';
+import { javascript } from '@codemirror/lang-javascript';
+import { json } from '@codemirror/lang-json';
+import { html } from '@codemirror/lang-html';
+import { EditorState } from '@codemirror/state';
+import { tags } from '@lezer/highlight';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';

 const myHighlightStyle = HighlightStyle.define([
-    {
-        tag: [
-            tags.documentMeta,
-            tags.blockComment,
-            tags.lineComment,
-            tags.docComment,
-            tags.comment,
-        ],
-        color: "#757b93"
-    },
-    {tag: tags.name, color: "#4b92ff"},
-    {tag: tags.variableName, color: "#4bff4e"},
-    {tag: tags.attributeName, color: "#b06fff"},
-    {tag: tags.attributeValue, color: "#ff964b"},
-    {tag: tags.keyword, color: "#fc6"},
-    {tag: tags.comment, color: "#f5d", fontStyle: "italic"}
+  {
+    tag: [tags.documentMeta, tags.blockComment, tags.lineComment, tags.docComment, tags.comment],
+    color: '#757b93',
+  },
+  { tag: tags.name, color: '#4b92ff' },
+  { tag: tags.variableName, color: '#4bff4e' },
+  { tag: tags.attributeName, color: '#b06fff' },
+  { tag: tags.attributeValue, color: '#ff964b' },
+  { tag: tags.keyword, color: '#fc6' },
+  { tag: tags.comment, color: '#f5d', fontStyle: 'italic' },
 ]);

 const extensions = [
-    minimalSetup,
-    syntaxHighlighting(myHighlightStyle),
-    html(),
-    javascript(),
-    json(),
+  minimalSetup,
+  syntaxHighlighting(myHighlightStyle),
+  html(),
+  javascript(),
+  json(),
 ];

-export default function useCodeMirror({value}: { value: string }) {
-    const [cm, setCm] = useState<EditorView | null>(null);
-    const ref = useRef(null);
-    useEffect(() => {
-        if (ref.current === null) return;
+export default function useCodeMirror({ value }: { value: string }) {
+  const [cm, setCm] = useState<EditorView | null>(null);
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current === null) return;

-        const view = new EditorView({
-            extensions,
-            parent: ref.current
-        });
+    const view = new EditorView({
+      extensions,
+      parent: ref.current,
+    });

-        setCm(view);
+    setCm(view);

-        return () => view?.destroy();
-    }, [ref.current]);
+    return () => view?.destroy();
+  }, [ref.current]);

-    useEffect(() => {
-        if (cm === null) return;
+  useEffect(() => {
+    if (cm === null) return;

-        const newState = EditorState.create({doc: value, extensions});
-        cm.setState(newState);
-    }, [cm, value]);
+    const newState = EditorState.create({ doc: value, extensions });
+    cm.setState(newState);
+  }, [cm, value]);

-    return {ref, cm};
+  return { ref, cm };
 }
--- a/src/main.css
+++ b/src/main.css
@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  color-scheme: light dark;
+}
+
+:not(input):not(textarea),
+:not(input):not(textarea)::after,
+:not(input):not(textarea)::before {
+  -webkit-user-select: none;
+  user-select: none;
+  cursor: default;
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,10 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
-import "./style.css";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './main.css';

-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );
--- a/src/style.css
+++ b/src/style.css
@@ -1,130 +0,0 @@
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  /* Allow rendering scrollbars/etc in dark OR light */
-  color-scheme: light dark;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-
-:not(input):not(textarea),
-:not(input):not(textarea)::after,
-:not(input):not(textarea)::before {
-  -webkit-user-select: none;
-  user-select: none;
-  cursor: default;
-}
-
-div, form, p {
-  width: 100%;
-}
-
-.container {
-  margin: 0 auto;
-  padding-top: 2rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
-  width: 80vw;
-  max-width: 800px;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: 0.75s;
-}
-
-.logo.tauri:hover {
-  filter: drop-shadow(0 0 2em #24c8db);
-}
-
-.row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  justify-content: center;
-  width: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-
-a:hover {
-  color: #535bf2;
-}
-
-h1 {
-  text-align: center;
-}
-
-input,
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  color: #0f0f0f;
-  background-color: #ffffff;
-  transition: border-color 0.25s;
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
-}
-
-button {
-  cursor: pointer;
-  width: 7rem;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-button:disabled {
-  opacity: 0.7;
-}
-
-button:hover {
-  border-color: #396cd8;
-}
-
-input,
-button {
-  outline: none;
-}
-
-#greet-input {
-  margin-right: 5px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    color: #f6f6f6;
-    background-color: #181818;
-  }
-
-  a:hover {
-    color: #24c8db;
-  }
-
-  input {
-    color: #ffffff;
-    background-color: #0f0f0f98;
-  }
-
-  button {
-    color: #ffffff;
-    background-color: rgba(137, 98, 255, 0.6);
-  }
-}
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1 +0,0 @@
-/// <reference types="vite/client" />