From 56e321fdc9b373aed0eeddab8141dcda513317c8 Mon Sep 17 00:00:00 2001 From: Peter Hozak Date: Fri, 15 Sep 2023 17:40:39 +0200 Subject: [PATCH] redo #314 after reverting the PR merge --- 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 | 71 +++++++++++++++++++++++------- 8 files changed, 89 insertions(+), 43 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 `` 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[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[0]) => { url: request.url, minLogo, embed, + showSearch, } } @@ -131,12 +133,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} = useLoaderData() + const {minLogo, embed, showSearch} = useLoaderData() 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> = {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 || (!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() + const {minLogo, embed, showSearch} = useOutletContext() const {initialQuestionsData} = useLoaderData>() const {data: initialQuestions = [], timestamp} = initialQuestionsData ?? {} @@ -193,21 +194,25 @@ export default function App() { <>
- - - {/* Add an extra, draggable div here, so that questions can be moved to the top of the list */} -
-   -
- + {showSearch && ( + <> + + + {/* 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 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..14379a2d 100644 --- a/public/embed-example.html +++ b/public/embed-example.html @@ -1,23 +1,62 @@ -
Some content before embedding aisafety.info search...
- +
+

Search bar, using links, light theme

+ -
Some content after...
+

Only initial questions, using links, system default theme

+ +

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

+ + + + + +
+ +

Source code:

+