diff --git a/README.md b/README.md index b51285b8..ac3e825c 100644 --- a/README.md +++ b/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 `` 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` diff --git a/app/components/layouts.tsx b/app/components/layouts.tsx index ff3bd915..a969f7e4 100644 --- a/app/components/layouts.tsx +++ b/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' diff --git a/app/components/search.tsx b/app/components/search.tsx index 0a342ff1..ba56e033 100644 --- a/app/components/search.tsx +++ b/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' diff --git a/app/hooks/useQuestionStateInUrl.ts b/app/hooks/useQuestionStateInUrl.ts index 94886afa..57926ea2 100644 --- a/app/hooks/useQuestionStateInUrl.ts +++ b/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' diff --git a/app/root.tsx b/app/root.tsx index 20c147fb..4c0c03c3 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -79,7 +79,6 @@ export const loader = async ({request}: Parameters[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[0]) => { url: request.url, minLogo, embed, - showSearch, } } @@ -133,12 +131,12 @@ export function ErrorBoundary({error}: {error: Error}) { } type Loader = Awaited> -export type Context = Pick +export type Context = Pick export default function App() { - const {minLogo, embed, showSearch} = useLoaderData() + const {minLogo, embed} = useLoaderData() const {savedTheme} = useTheme() - const context: Context = {minLogo, embed, showSearch} + const context: Context = {minLogo, embed} useEffect(() => { if (embed) { diff --git a/app/routes/index.tsx b/app/routes/index.tsx index 2c10e130..14a610f5 100644 --- a/app/routes/index.tsx +++ b/app/routes/index.tsx @@ -24,10 +24,9 @@ import type {Context} from '~/root' const empty: Awaited> = {data: [], timestamp: ''} export const loader = async ({request}: Parameters[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() + const {minLogo, embed} = useOutletContext() const {initialQuestionsData} = useLoaderData>() const {data: initialQuestions = [], timestamp} = initialQuestionsData ?? {} @@ -194,25 +193,21 @@ export default function App() { <>
- {showSearch && ( - <> - - - {/* Add an extra, draggable div here, so that questions can be moved to the top of the list */} -
-   -
- - - )} + + + {/* Add an extra, draggable div here, so that questions can be moved to the top of the list */} +
+   +
+
{questions.map((question) => ( diff --git a/package.json b/package.json index 4b386d52..68f3a4d5 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,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", diff --git a/public/embed-example.html b/public/embed-example.html index 14379a2d..139fcf67 100644 --- a/public/embed-example.html +++ b/public/embed-example.html @@ -1,62 +1,23 @@ +
Some content before embedding aisafety.info search...
-
-

Search bar, using links, light theme

- + -

Only initial questions, using links, system default theme

- +
Some content after...
-

Both search and initial questions, opening inline, expanding iframe height, dark theme

- - - - - -
- -

Source code:

-