From 7d0c2fd11e0d870368a9e02fd3f54de091b0d1a2 Mon Sep 17 00:00:00 2001
From: Aprillion <peter.hozak@gmail.com>
Date: Sat, 9 Sep 2023 12:25:27 +0200
Subject: [PATCH 1/3] onlyInitial url parameter for iframe embeds

* run prettier on html file
* fix eslint warnings
---
 README.md                          |  5 ++-
 app/components/layouts.tsx         |  2 +-
 app/components/search.tsx          |  2 +-
 app/hooks/useQuestionStateInUrl.ts |  1 -
 app/root.tsx                       |  8 ++--
 app/routes/index.tsx               | 39 +++++++++--------
 package.json                       |  4 +-
 public/embed-example.html          | 70 ++++++++++++++++++++++--------
 8 files changed, 87 insertions(+), 44 deletions(-)

diff --git a/README.md b/README.md
index ac3e825c..b51285b8 100644
--- a/README.md
+++ b/README.md
@@ -11,10 +11,11 @@ Contributions are welcome, the code is released under the MIT License. If you'd
 - state - controls which questions are displayed as collapsed / open / related, e.g. [aisafety.info/?state=6568\_](https://aisafety.info/?state=6568_)
 - q (string) - search query for sharing direct link to search results (and not just link to 1 question), e.g. [aisafety.info/?q=alignment&limit=10](https://aisafety.info/?q=alignment&limit=10)
   - limit (number, default 5) - how many results to show
-- embed - show site without header/footer for embedding on other sites, se [embed-example.html](/public/embed-example.html)
+- embed - show site without header/footer for embedding on other sites, see [embed-example.html](https://aisafety.info/embed-example.html)
   - placeholder (string) - override `<input placeholder=...>` of the search box
   - theme (light|dark) - override CSS theme (if not provided, the embedded site will use `preferred-color-scheme` system setting)
-  - showInitial - also show initial questions, not just search bar
+  - showInitial - show initial questions as well as the search bar
+  - onlyInitial - show only initial questions without the search bar
   - showDetails - open question details (answers) directly instead of just links to aisafety.info
 - more (disabled|infini|button|buttonInfini) - debug versions of load more / infinite scroll, e.g. `aisafety.info/?more=infini`
 
diff --git a/app/components/layouts.tsx b/app/components/layouts.tsx
index a969f7e4..ff3bd915 100644
--- a/app/components/layouts.tsx
+++ b/app/components/layouts.tsx
@@ -1,4 +1,4 @@
-import {useOutletContext, Link} from '@remix-run/react'
+import {useOutletContext} from '@remix-run/react'
 import logoFunSvg from '../assets/stampy-logo.svg'
 import logoMinSvg from '../assets/stampy-logo-min.svg'
 import {Share, Users, Code, Tag} from './icons-generated'
diff --git a/app/components/search.tsx b/app/components/search.tsx
index ba56e033..0a342ff1 100644
--- a/app/components/search.tsx
+++ b/app/components/search.tsx
@@ -1,4 +1,4 @@
-import {useState, useEffect, useRef, MutableRefObject, FocusEvent, useCallback} from 'react'
+import {useState, useEffect, useRef, MutableRefObject, FocusEvent} from 'react'
 import debounce from 'lodash/debounce'
 import {AddQuestion} from '~/routes/questions/add'
 import {Action, ActionType} from '~/routes/questions/actions'
diff --git a/app/hooks/useQuestionStateInUrl.ts b/app/hooks/useQuestionStateInUrl.ts
index 57926ea2..94886afa 100644
--- a/app/hooks/useQuestionStateInUrl.ts
+++ b/app/hooks/useQuestionStateInUrl.ts
@@ -1,5 +1,4 @@
 import {useState, useRef, useEffect, useMemo, useCallback} from 'react'
-import type {MouseEvent} from 'react'
 import {useSearchParams, useTransition} from '@remix-run/react'
 import {Question, QuestionState, RelatedQuestions, PageId, Glossary} from '~/server-utils/stampy'
 import {fetchAllQuestionsOnSite} from '~/routes/questions/allQuestionsOnSite'
diff --git a/app/root.tsx b/app/root.tsx
index 4c0c03c3..20c147fb 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -79,6 +79,7 @@ export const loader = async ({request}: Parameters<LoaderFunction>[0]) => {
   const minLogo = isDomainWithFunLogo ? !!isFunLogoForcedOff : !isFunLogoForcedOn
 
   const embed = !!request.url.match(/embed/)
+  const showSearch = !request.url.match(/onlyInitial/)
 
   const question = await fetchQuestion(request).catch((e) => {
     console.error('\n\nUnexpected error in loader\n', e)
@@ -90,6 +91,7 @@ export const loader = async ({request}: Parameters<LoaderFunction>[0]) => {
     url: request.url,
     minLogo,
     embed,
+    showSearch,
   }
 }
 
@@ -131,12 +133,12 @@ export function ErrorBoundary({error}: {error: Error}) {
 }
 
 type Loader = Awaited<ReturnType<typeof loader>>
-export type Context = Pick<Loader, 'minLogo' | 'embed'>
+export type Context = Pick<Loader, 'minLogo' | 'embed' | 'showSearch'>
 
 export default function App() {
-  const {minLogo, embed} = useLoaderData<Loader>()
+  const {minLogo, embed, showSearch} = useLoaderData<Loader>()
   const {savedTheme} = useTheme()
-  const context: Context = {minLogo, embed}
+  const context: Context = {minLogo, embed, showSearch}
 
   useEffect(() => {
     if (embed) {
diff --git a/app/routes/index.tsx b/app/routes/index.tsx
index 14a610f5..2c10e130 100644
--- a/app/routes/index.tsx
+++ b/app/routes/index.tsx
@@ -24,9 +24,10 @@ import type {Context} from '~/root'
 const empty: Awaited<ReturnType<typeof loadInitialQuestions>> = {data: [], timestamp: ''}
 export const loader = async ({request}: Parameters<LoaderFunction>[0]) => {
   const showInitialFromUrl = !!request.url.match(/showInitial/)
+  const onlyInitialFromUrl = !!request.url.match(/onlyInitial/)
   const embedFromUrl = !!request.url.match(/embed/)
   const queryFromUrl = !!request.url.match(/[?&]q=/)
-  const fetchInitial = showInitialFromUrl || (!embedFromUrl && !queryFromUrl)
+  const fetchInitial = showInitialFromUrl || onlyInitialFromUrl || (!embedFromUrl && !queryFromUrl)
   if (!fetchInitial) return {initialQuestionsData: empty}
 
   try {
@@ -108,7 +109,7 @@ const Bottom = ({
 }
 
 export default function App() {
-  const {minLogo, embed} = useOutletContext<Context>()
+  const {minLogo, embed, showSearch} = useOutletContext<Context>()
   const {initialQuestionsData} = useLoaderData<ReturnType<typeof loader>>()
   const {data: initialQuestions = [], timestamp} = initialQuestionsData ?? {}
 
@@ -193,21 +194,25 @@ export default function App() {
     <>
       <Header />
       <main onClick={handleSpecialLinks}>
-        <Search
-          onSiteAnswersRef={onSiteAnswersRef}
-          openQuestionTitles={openQuestionTitles}
-          onSelect={selectQuestion}
-          embedWithoutDetails={embedWithoutDetails}
-          queryFromUrl={queryFromUrl}
-          limitFromUrl={limitFromUrl}
-          removeQueryFromUrl={removeQueryFromUrl}
-        />
-
-        {/* Add an extra, draggable div here, so that questions can be moved to the top of the list */}
-        <div draggable onDragOver={handleDragOver({pageid: TOP})}>
-          &nbsp;
-        </div>
-        <DragPlaceholder pageid={TOP} />
+        {showSearch && (
+          <>
+            <Search
+              onSiteAnswersRef={onSiteAnswersRef}
+              openQuestionTitles={openQuestionTitles}
+              onSelect={selectQuestion}
+              embedWithoutDetails={embedWithoutDetails}
+              queryFromUrl={queryFromUrl}
+              limitFromUrl={limitFromUrl}
+              removeQueryFromUrl={removeQueryFromUrl}
+            />
+
+            {/* Add an extra, draggable div here, so that questions can be moved to the top of the list */}
+            <div draggable onDragOver={handleDragOver({pageid: TOP})}>
+              &nbsp;
+            </div>
+            <DragPlaceholder pageid={TOP} />
+          </>
+        )}
         <div className="articles-container">
           {questions.map((question) => (
             <ErrorBoundary title={question.title} key={question.pageid}>
diff --git a/package.json b/package.json
index 68f3a4d5..4b386d52 100644
--- a/package.json
+++ b/package.json
@@ -48,10 +48,10 @@
     "postinstall": "remix setup cloudflare-workers",
     "generate-icons": "npx @svgr/cli --out-dir app/components/icons-generated -- app/assets/icons",
     "eslint": "eslint --ignore-pattern .gitignore \"**/*.ts*\"",
-    "prettier": "prettier --check --ignore-path .gitignore \"**/*.{ts*,js,css}\"",
+    "prettier": "prettier --check --ignore-path .gitignore \"**/*.{ts*,js,css,md,html}\"",
     "lint": "tsc && npm run prettier && npm run eslint",
     "eslint:fix": "eslint --fix --ignore-pattern .gitignore \"**/*.ts*\"",
-    "prettier:fix": "prettier --write --ignore-path .gitignore \"**/*.{ts*,js,css,md}\"",
+    "prettier:fix": "prettier --write --ignore-path .gitignore \"**/*.{ts*,js,css,md,html}\"",
     "lint:fix": "tsc && npm run prettier:fix && npm run eslint:fix",
     "build": "rimraf public/build && npm run generate-icons && cross-env NODE_ENV=production remix build --sourcemap",
     "dev:remix": "cross-env NODE_ENV=development remix watch",
diff --git a/public/embed-example.html b/public/embed-example.html
index 139fcf67..23e05a32 100644
--- a/public/embed-example.html
+++ b/public/embed-example.html
@@ -1,23 +1,59 @@
 <!DOCTYPE html>
-<div>Some content before embedding aisafety.info search...</div>
 
-<iframe
-  src="/?embed&showInitial&showDetails&placeholder=Search the AI Safety FAQ&theme=light"
-  width="100%"
-  height="315px"
-  frameborder="0"
-  id="ai-safety-search-iframe"
-  style="transition: height 0.3s; overflow: hidden;"
-></iframe>
+<main>
+  <h3>Search bar, using links, light theme</h3>
+  <iframe
+    src="/?embed&placeholder=Search the AI Safety FAQ&theme=light"
+    id="ai-safety-search-iframe1"
+    height="65px"
+  ></iframe>
 
-<div>Some content after...</div>
+  <h3>Only initial questions, using links, system default theme</h3>
+  <iframe
+    src="/?embed&onlyInitial&placeholder=Search the AI Safety FAQ"
+    id="ai-safety-search-iframe2"
+    height="250px"
+  ></iframe>
 
+  <h3>Both search and initial questions, opening inline, expanding iframe height, dark theme</h3>
+  <iframe
+    src="/?embed&showInitial&showDetails&placeholder=Search the AI Safety FAQ&theme=dark"
+    id="ai-safety-search-iframe3"
+    height="315px"
+  ></iframe>
+  
+  <script>
+    'use strict'
+    const iframes = [...document.querySelectorAll('iframe')]
+    window.addEventListener('message', function (event) {
+      if (event.data.type === 'aisafety.info__height') {
+        const iframe = iframes.find((iframe) => iframe.src === event.source.location.href)
+        if (iframe) {
+          iframe.style.height = event.data.height + 'px'
+        }
+      }
+    })
+  </script>
+  
+  <style>
+    body {
+      font-family: sans-serif;
+      overflow: scroll;
+    }
+
+    iframe {
+      transition: height 0.3s;
+      overflow: hidden;
+      width: 100%;
+      border: none;
+    }
+  </style>
+</main>
+
+<h3>Source code:</h3>
+<pre id="source"></pre>
 <script>
   'use strict'
-  const iframe = document.getElementById('ai-safety-search-iframe')
-  window.addEventListener('message', function (event) {
-    if (event.data.type === 'aisafety.info__height') {
-      iframe.style.height = event.data.height + 'px'
-    }
-  })
-</script>
+  const source = document.getElementById('source')
+  source.textContent = document.querySelector('main').innerHTML
+</script>
\ No newline at end of file

From 57e5b7dc1894b47b05d0dbcb42a1af1b1382cd90 Mon Sep 17 00:00:00 2001
From: Aprillion <peter.hozak@gmail.com>
Date: Sat, 9 Sep 2023 12:46:25 +0200
Subject: [PATCH 2/3] unescape &amp;

---
 public/embed-example.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/embed-example.html b/public/embed-example.html
index 23e05a32..5dde46a9 100644
--- a/public/embed-example.html
+++ b/public/embed-example.html
@@ -55,5 +55,5 @@ <h3>Source code:</h3>
 <script>
   'use strict'
   const source = document.getElementById('source')
-  source.textContent = document.querySelector('main').innerHTML
+  source.textContent = document.querySelector('main').innerHTML.replace(/&amp;/g, '&')
 </script>
\ No newline at end of file

From 4feaa27cb314daedd9a98e7ff3fa0092ade6f2c2 Mon Sep 17 00:00:00 2001
From: Aprillion <peter.hozak@gmail.com>
Date: Sat, 9 Sep 2023 13:56:08 +0200
Subject: [PATCH 3/3] improve iframe documentation code by showing full
 official url

---
 public/embed-example.html | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/public/embed-example.html b/public/embed-example.html
index 5dde46a9..14379a2d 100644
--- a/public/embed-example.html
+++ b/public/embed-example.html
@@ -21,7 +21,7 @@ <h3>Both search and initial questions, opening inline, expanding iframe height,
     id="ai-safety-search-iframe3"
     height="315px"
   ></iframe>
-  
+
   <script>
     'use strict'
     const iframes = [...document.querySelectorAll('iframe')]
@@ -34,7 +34,7 @@ <h3>Both search and initial questions, opening inline, expanding iframe height,
       }
     })
   </script>
-  
+
   <style>
     body {
       font-family: sans-serif;
@@ -55,5 +55,8 @@ <h3>Source code:</h3>
 <script>
   'use strict'
   const source = document.getElementById('source')
-  source.textContent = document.querySelector('main').innerHTML.replace(/&amp;/g, '&')
-</script>
\ No newline at end of file
+  const main = document.querySelector('main').innerHTML
+  source.textContent = main
+    .replace(/&amp;/g, '&')
+    .replace(/src="\//g, 'src="https://aisafety.info/')
+</script>