add robots.txt, introduce first search draft

querwurzel · Nov 11, 2023 · 8bd53d8 · 8bd53d8
1 parent 6a102e5
commit 8bd53d8
Show file tree

Hide file tree

Showing 14 changed files with 247 additions and 39 deletions.
diff --git a/backend/src/main/java/com/github/binpastes/paste/api/PasteController.java b/backend/src/main/java/com/github/binpastes/paste/api/PasteController.java
@@ -29,8 +29,8 @@
 
 import static com.github.binpastes.paste.api.model.ListView.ListItemView;
 
-@RestController
 @Validated
+@RestController
 @RequestMapping("/api/v1/paste")
 class PasteController {
 
@@ -83,7 +83,7 @@ public Mono<SearchView> searchPastes(
             final String term,
             final ServerHttpResponse response
     ) {
-        response.getHeaders().add(HttpHeaders.CACHE_CONTROL, "max-age=300");
+        response.getHeaders().add(HttpHeaders.CACHE_CONTROL, "max-age=60");
         return pasteService
                 .findByFullText(term)
                 .map(paste -> SearchItemView.of(paste, term))

diff --git a/frontend/index.html b/frontend/index.html
@@ -8,6 +8,7 @@
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <meta name="robots" content="noindex, nofollow"/>
   <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <meta name="color-scheme" content="dark light">
   <link rel="icon shortcut" type="image/png" href="/favicon.png"/>
 </head>
 <body id="root">

diff --git a/frontend/public/robots.txt b/frontend/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /api/
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -23,8 +23,8 @@ const App: () => JSX.Element = () => {
           <div class={styles.leftContainer}>
           <Routes>
             <Route path="/" component={Create}  />
-            <Route path="/paste/search" component={Search} />
             <Route path="/paste/:id" component={Read} />
+            <Route path="/paste/search" component={Search} />
             <Route path="*" component={NotFound} />
           </Routes>
           </div>

diff --git a/frontend/src/api/client.ts b/frontend/src/api/client.ts
@@ -56,14 +56,15 @@ const findAll = (): Promise<Array<PasteListView>> => {
 
 const searchAll = (term: string): Promise<Array<PasteSearchView>> => {
   const params = new URLSearchParams([['term', term]]);
-  const url = new URL('/api/v1/paste/search?' + params.toString(), apiBaseUrl());
+  const url = new URL('/api/v1/paste/search?' + encodeURI(params.toString()), apiBaseUrl());
 
   return fetch(url)
     .then(value => value.json())
-    .then(value => value.pastes);
+    .then(value => value.pastes)
+    .catch(_ => [])
 }
 
-const deletePaste = (id: string) => {
+const deletePaste = (id: string): Promise<void> => {
   const url = new URL('/api/v1/paste/' + id, apiBaseUrl());
 
   return fetch(url, {

diff --git a/frontend/src/components/CreatePaste/CreatePaste.tsx b/frontend/src/components/CreatePaste/CreatePaste.tsx
@@ -36,6 +36,7 @@ const CreatePaste: Component<CreatePasteProps> = ({onCreatePaste, initialPaste})
   const [lastPasteUrl, setLastPasteUrl] = createSignal<string>();
 
   let creationForm: HTMLFormElement
+  let submitInput: HTMLInputElement
 
   const updateFormField = (fieldName: keyof FormModel) => (event: Event) => {
     const inputElement = event.currentTarget as HTMLInputElement;
@@ -81,6 +82,7 @@ const CreatePaste: Component<CreatePasteProps> = ({onCreatePaste, initialPaste})
         resetStore();
         setLastPasteUrl(url);
       })
+      .catch(e => submitInput.style.backgroundColor = 'red');
   }
 
   return (
@@ -153,7 +155,7 @@ const CreatePaste: Component<CreatePasteProps> = ({onCreatePaste, initialPaste})
         <Show when={lastPasteUrl()}>
           <p class={styles.lastPaste}>{lastPasteUrl()}<Copy/></p>
         </Show>
-        <input type="submit" value="Paste"/>
+        <input ref={submitInput} type="submit" value="Paste"/>
         <input type="reset" value="Reset"/>
       </fieldset>
 

diff --git a/frontend/src/components/CreatePaste/createPaste.module.css b/frontend/src/components/CreatePaste/createPaste.module.css
@@ -65,7 +65,7 @@
 .createForm input[type=submit],
 .createForm input[type=reset] {
     display: inline-block;
-    width: initial;
+    color: var(--color-text);
     margin: .5rem;
 }
 

diff --git a/frontend/src/components/RecentPastes/RecentPastes.tsx b/frontend/src/components/RecentPastes/RecentPastes.tsx
@@ -76,6 +76,8 @@ const RecentPastes: () => JSX.Element = () => {
             <span class={styles.refetch} onClick={manualRefetch}>↻</span>
           </h3>
 
+          <A class={styles.searchLink} activeClass={styles.searchLinkActive} href={'/paste/search'}>Search all pastes</A>
+
           <ol>
             <For each={pastes()}>{item =>
             <li class={styles.item}>

diff --git a/frontend/src/components/RecentPastes/recentPastes.module.css b/frontend/src/components/RecentPastes/recentPastes.module.css
@@ -14,7 +14,6 @@
     list-style: none;
     margin: 0;
     padding: 0;
-
 }
 
 .recentPastes .item {
@@ -50,3 +49,12 @@
         border-bottom: 1px dotted #a5a5a5;
     }
 }
+
+.searchLink {
+    margin-left: 1rem;
+    margin-bottom: 1rem;
+}
+
+.searchLinkActive {
+    display: none;
+}
diff --git a/frontend/src/components/SearchPastes/SearchPastes.tsx b/frontend/src/components/SearchPastes/SearchPastes.tsx
@@ -1,13 +1,25 @@
-import {createResource, createSignal, JSX} from 'solid-js';
+import {Component, createResource, createSignal, JSX, Show} from 'solid-js';
+import {A} from '@solidjs/router';
 import ApiClient from '../../api/client';
-import {PasteListView} from '../../api/model/PasteListView';
+import {PasteSearchView} from '../../api/model/PasteSearchView';
+import {toDateTimeString} from '../../datetime/DateTimeUtil';
+import styles from "./searchPastes.module.css";
 
-const SearchPastes: () => JSX.Element = () => {
+type SearchPastesProps = {
+  term: String
+  pastes: PasteSearchView
+  onSearchEnter: (term: String) => void
+}
+
+const SearchPastes: Component<SearchPastesProps> = ({term, pastes, onSearchEnter}): JSX.Element => {
 
   const [search, setSearch] = createSignal<string>();
 
   const [results, { refetch }] = createResource(() => search(), () => searchTerm());
 
+  let searchInput: HTMLInputElement;
+
+
   const searchTerm = (): Promise<Array<PasteListView>> => {
     if (search() && search().length >= 3) {
       return ApiClient.searchAll(search());
@@ -21,17 +33,56 @@ const SearchPastes: () => JSX.Element = () => {
     refetch();
   }
 
-  const submitSearchForm = (e: Event) => {
+
+  const submitOnClick = (e: Event) => {
     e.preventDefault();
-    refetch();
+    if (searchInput.value?.length >= 3) {
+      onSearchEnter(searchInput.value);
+    }
+  }
+
+  const submitOnEnter = (e: Event) => {
+    e.preventDefault();
+
+    if (searchInput.value?.length >= 3) {
+      if (e instanceof KeyboardEvent && e.key === "Enter") {
+        onSearchEnter(searchInput.value);
+      }
+    }
   }
 
   return (
-    <div>
+    <>
+      <form autocomplete="off" class={styles.searchForm} onSubmit={submitOnClick}>
+        <fieldset>
+          <input ref={searchInput} onKeyUp={submitOnEnter} type="search" required minlength="3" maxlength="25" placeholder="Search for pastes" value={term} autofocus={true} />
+          <input type="submit" value="Search"/>
+          <input type="reset" value="Reset"/>
+        </fieldset>
+      </form>
+
+      <Show when={term}>
+      <Show when={pastes.length} keyed fallback={<p>Nothing found</p>}>
+
+      <ol styles={styles.searchResults}>
+        <For each={pastes}>{item =>
+        <li class={styles.item}>
+          <p><A href={'/paste/' + item.id}>{item.title || 'Untitled' }</A></p>
+          <p>
+            Created: <time>{toDateTimeString(item.dateCreated)}</time> |
+            Expires: <time>{item.dateOfExpiry ? toDateTimeString(item.dateOfExpiry) : 'Never'}</time> |
+            Size: {item.sizeInBytes} bytes
+          </p>
+          <pre><i>“{item.highlight} [..]”</i></pre>
+        </li>
+        }
+        </For>
+      </ol>
 
-      <h1>BinPastes</h1>
+      </Show>
+      </Show>
 
-    </div>
+    </>
   )
 }
 

diff --git a/frontend/src/components/SearchPastes/searchPastes.module.css b/frontend/src/components/SearchPastes/searchPastes.module.css
@@ -0,0 +1,61 @@
+
+.searchForm {
+    border: none;
+    padding: 0;
+}
+
+.searchForm fieldset {
+    border: 1px dotted #a5a5a5;
+    border-radius: 7px;
+    margin-bottom: 10px;
+    padding: 5px 10px;
+}
+
+.searchForm input[type=search] {
+    display: inline-block;
+    width: 20rem;
+    margin: 0;
+}
+
+.searchForm input[type=submit],
+.searchForm input[type=reset] {
+    display: inline-block;
+    padding: 0.4rem 0.8rem;
+    color: var(--color-text);
+    margin: .5rem;
+    cursor: pointer;
+}
+
+
+
+
+.searchResults {
+    margin-top: 0;
+    padding-top: 0;
+    border-left: 1px dotted #a5a5a5;
+}
+
+.searchResults ol {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+}
+
+.searchResults .item {
+    list-style: none;
+    padding-left: 1rem;
+    border-top: 1px dotted #a5a5a5;
+}
+
+.searchResults .item p {
+    display: inline-flex;
+    align-items: start;
+    gap: 3px;
+}
+
+.searchResults .item p {
+    display: inline-flex;
+    align-items: start;
+    gap: 3px;
+}
diff --git a/frontend/src/components/Spinner/Spinner.tsx b/frontend/src/components/Spinner/Spinner.tsx
@@ -0,0 +1,10 @@
+import {JSX} from 'solid-js';
+import './spinner.css';
+
+const Spinner: () => JSX.Element = () => {
+  return (
+    <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
+  )
+}
+
+export default Spinner;
diff --git a/frontend/src/components/Spinner/spinner.css b/frontend/src/components/Spinner/spinner.css
@@ -0,0 +1,56 @@
+.lds-ellipsis {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-ellipsis div {
+  background: #000;
+  position: absolute;
+  top: 33px;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.lds-ellipsis div:nth-child(1) {
+  left: 8px;color:black;
+  animation: lds-ellipsis1 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(2) {
+  left: 8px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(3) {
+  left: 32px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(4) {
+  left: 56px;
+  animation: lds-ellipsis3 0.6s infinite;
+}
+
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(24px, 0);
+  }
+}