Merge pull request #316 from StampyAI/revert-314-iframe

Revert "onlyInitial url parameter for iframe embeds"

README.md

@@ -11,11 +11,10 @@ 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, see [embed-example.html](https://aisafety.info/embed-example.html)
+- embed - show site without header/footer for embedding on other sites, se [embed-example.html](/public/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 - show initial questions as well as the search bar
-  - onlyInitial - show only initial questions without the search bar
+  - showInitial - also show initial questions, not just 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`
 

app/components/layouts.tsx

@@ -1,4 +1,4 @@
-import {useOutletContext} from '@remix-run/react'
+import {useOutletContext, Link} 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'

app/components/search.tsx

@@ -1,4 +1,4 @@
-import {useState, useEffect, useRef, MutableRefObject, FocusEvent} from 'react'
+import {useState, useEffect, useRef, MutableRefObject, FocusEvent, useCallback} from 'react'
 import debounce from 'lodash/debounce'
 import {AddQuestion} from '~/routes/questions/add'
 import {Action, ActionType} from '~/routes/questions/actions'

app/hooks/useQuestionStateInUrl.ts

@@ -1,4 +1,5 @@
 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'

app/root.tsx

@@ -79,7 +79,6 @@ 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)
@@ -91,7 +90,6 @@ export const loader = async ({request}: Parameters<LoaderFunction>[0]) => {
     url: request.url,
     minLogo,
     embed,
-    showSearch,
   }
 }
 
@@ -133,12 +131,12 @@ export function ErrorBoundary({error}: {error: Error}) {
 }
 
 type Loader = Awaited<ReturnType<typeof loader>>
-export type Context = Pick<Loader, 'minLogo' | 'embed' | 'showSearch'>
+export type Context = Pick<Loader, 'minLogo' | 'embed'>
 
 export default function App() {
-  const {minLogo, embed, showSearch} = useLoaderData<Loader>()
+  const {minLogo, embed} = useLoaderData<Loader>()
   const {savedTheme} = useTheme()
-  const context: Context = {minLogo, embed, showSearch}
+  const context: Context = {minLogo, embed}
 
   useEffect(() => {
     if (embed) {

app/routes/index.tsx

@@ -24,10 +24,9 @@ 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 || onlyInitialFromUrl || (!embedFromUrl && !queryFromUrl)
+  const fetchInitial = showInitialFromUrl || (!embedFromUrl && !queryFromUrl)
   if (!fetchInitial) return {initialQuestionsData: empty}
 
   try {
@@ -109,7 +108,7 @@ const Bottom = ({
 }
 
 export default function App() {
-  const {minLogo, embed, showSearch} = useOutletContext<Context>()
+  const {minLogo, embed} = useOutletContext<Context>()
   const {initialQuestionsData} = useLoaderData<ReturnType<typeof loader>>()
   const {data: initialQuestions = [], timestamp} = initialQuestionsData ?? {}
 
@@ -194,25 +193,21 @@ export default function App() {
     <>
       <Header />
       <main onClick={handleSpecialLinks}>
-        {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} />
-          </>
-        )}
+        <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}>

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,md,html}\"",
+    "prettier": "prettier --check --ignore-path .gitignore \"**/*.{ts*,js,css}\"",
     "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,html}\"",
+    "prettier:fix": "prettier --write --ignore-path .gitignore \"**/*.{ts*,js,css,md}\"",
     "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",

public/embed-example.html

@@ -1,62 +1,23 @@
 <!DOCTYPE html>
+<div>Some content before embedding aisafety.info search...</div>
 
-<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>
+<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>
 
-  <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>
+<div>Some content after...</div>
 
-  <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 source = document.getElementById('source')
-  const main = document.querySelector('main').innerHTML
-  source.textContent = main
-    .replace(/&amp;/g, '&')
-    .replace(/src="\//g, 'src="https://aisafety.info/')
+  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>