diff --git a/app/assets/icons/book-circle.svg b/app/assets/icons/book-circle.svg index ef5c53da..abef2c31 100644 --- a/app/assets/icons/book-circle.svg +++ b/app/assets/icons/book-circle.svg @@ -1,6 +1,6 @@ - - - + + + diff --git a/app/components/Article/Contents.tsx b/app/components/Article/Contents.tsx index 9a511750..a5416339 100644 --- a/app/components/Article/Contents.tsx +++ b/app/components/Article/Contents.tsx @@ -122,8 +122,8 @@ const insertGlossary = (pageid: string, glossary: Glossary) => { addPopup( e as HTMLSpanElement, `glossary-${entry.term}`, - `
-
+ `
+
${entry.term}
${entry.contents}
${link || ''} diff --git a/app/components/Article/FeedbackForm/index.tsx b/app/components/Article/FeedbackForm/index.tsx index c4558b9d..50e08416 100644 --- a/app/components/Article/FeedbackForm/index.tsx +++ b/app/components/Article/FeedbackForm/index.tsx @@ -66,7 +66,7 @@ const FeedbackForm = ({ return (
-
+
What was the problem? {hasOptions ? options.map((option, index) => ( diff --git a/app/components/Article/KeepGoing/keepGoing.module.css b/app/components/Article/KeepGoing/keepGoing.module.css index 8b144062..a4e37da5 100644 --- a/app/components/Article/KeepGoing/keepGoing.module.css +++ b/app/components/Article/KeepGoing/keepGoing.module.css @@ -6,7 +6,7 @@ gap: var(--spacing-24); } -@media (max-width: 640px) { +@media (max-width: 780px) { .flex_dynamic { display: flex; flex-direction: column; diff --git a/app/components/Article/article.css b/app/components/Article/article.css index 2ac123b9..10d06fd4 100644 --- a/app/components/Article/article.css +++ b/app/components/Article/article.css @@ -1,6 +1,27 @@ article { - max-width: 47.43vw; - margin: 0 auto; + flex: 100; + max-width: 800px; + min-height: 100vh; + padding-left: var(--spacing-80); +} + +article.loading .contents { + overflow: hidden; + max-width: 100%; + animation: infinite-loader 3s ease-in infinite; +} +@keyframes infinite-loader { + 0% { + opacity: 0; + max-width: 80px; + } + 30% { + opacity: 1; + max-width: 100px; + } + 100% { + opacity: 0; + } } article .meta { @@ -58,9 +79,13 @@ article .contents p { padding-bottom: var(--spacing-32); } +article .contents img { + max-width: 100%; +} + article .glossary-entry { border-bottom: 3px dotted var(--colors-cool-grey-500); - cursor: pointer; + cursor: default; } article .link-popup { @@ -73,7 +98,8 @@ article .link-popup { font-weight: 300; line-height: 170%; /* 30.6px */ z-index: 2; - transform: translate(-20vw, var(--spacing-40)); + left: calc(50% - 200px); + transform: translateY(var(--spacing-40)); transition: visibility 0s 300ms, opacity cubic-bezier(1, 0, 1, 1) 300ms; @@ -83,7 +109,7 @@ article .link-popup .footnote { } article .glossary-popup { - max-width: 522px; + width: 522px; height: 304px; } @@ -149,9 +175,10 @@ article a.see-more.visible:after { content: 'See less'; } -@media only screen and (max-width: 640px) { +@media only screen and (max-width: 780px) { article { max-width: 100%; + padding: 0; } article .footer-comtainer { flex-direction: row; diff --git a/app/components/Article/index.tsx b/app/components/Article/index.tsx index 075aa98d..b7639701 100644 --- a/app/components/Article/index.tsx +++ b/app/components/Article/index.tsx @@ -154,7 +154,7 @@ export const Article = ({question, glossary, className}: ArticleProps) => { const {title, text, pageid} = question return ( -
+

{title}

diff --git a/app/components/ArticlesDropdown/dropdown.css b/app/components/ArticlesDropdown/dropdown.css index f28fd3be..bb39a400 100644 --- a/app/components/ArticlesDropdown/dropdown.css +++ b/app/components/ArticlesDropdown/dropdown.css @@ -29,7 +29,7 @@ border-right: 1px solid var(--colors-cool-grey-200); } -@media (max-width: 640px) { +@media (max-width: 780px) { .articles-dropdown-container .toc { border-right: 0; } diff --git a/app/components/ArticlesDropdown/index.tsx b/app/components/ArticlesDropdown/index.tsx index a1c3aa06..51184b24 100644 --- a/app/components/ArticlesDropdown/index.tsx +++ b/app/components/ArticlesDropdown/index.tsx @@ -18,9 +18,9 @@ export const ArticlesDropdown = ({toc, categories}: ArticlesDropdownProps) => { // it, so it's always shown (until the mouse is moved out, of course). To get around // this, use this variable to simply not render the dropdown for one render, which // will reset the CSS onHover checker. - const [shown, setShown] = useState(false) - const hide = () => setShown(true) - useEffect(() => setShown(false), [shown]) + const [hidden, setHidden] = useState(false) + const hide = () => setHidden(true) + useEffect(() => setHidden(false), [hidden]) const mobile = useIsMobile() const Link = ({ to, @@ -64,9 +64,9 @@ export const ArticlesDropdown = ({toc, categories}: ArticlesDropdownProps) => {
) - return shown ? null : ( -
-
+ return hidden ? null : ( +
+
{ className={mobile ? 'padding-bottom-40' : ''} />
-
+
{/*sorted right side*/}
Browse by category
diff --git a/app/components/ArticlesNav/Menu.tsx b/app/components/ArticlesNav/ArticleNav.tsx similarity index 88% rename from app/components/ArticlesNav/Menu.tsx rename to app/components/ArticlesNav/ArticleNav.tsx index 35d143c8..4d4a5c8c 100644 --- a/app/components/ArticlesNav/Menu.tsx +++ b/app/components/ArticlesNav/ArticleNav.tsx @@ -2,7 +2,7 @@ import {Link} from '@remix-run/react' import ChevronRight from '~/components/icons-generated/ChevronRight' import {questionUrl} from '~/routesMapper' import type {TOCItem} from '~/routes/questions.toc' -import './menu.css' +import './articlenav.css' type Article = { article: TOCItem @@ -73,11 +73,16 @@ const ArticleLevel = ({article, path, current, hideChildren}: Article) => { ) } -export const ArticlesNav = ({article, path, className}: Article) => { +export const ArticlesNav = ({ + tocLoaded, + article, + path, + className, +}: {tocLoaded: boolean} & Partial
) => { const current = path ? path[path.length - 1] : '' - return ( -
+ return article ? ( +
@@ -85,5 +90,7 @@ export const ArticlesNav = ({article, path, className}: Article) => { ))}
+ ) : ( +
) } diff --git a/app/components/ArticlesNav/menu.css b/app/components/ArticlesNav/articlenav.css similarity index 85% rename from app/components/ArticlesNav/menu.css rename to app/components/ArticlesNav/articlenav.css index f03f54d5..e33810c2 100644 --- a/app/components/ArticlesNav/menu.css +++ b/app/components/ArticlesNav/articlenav.css @@ -2,11 +2,25 @@ display: none; } .articles-group { + flex: none; + width: clamp(230px, 30vw, 400px); height: fit-content; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ overflow-y: scroll; overflow-x: hidden; + opacity: 1; + transition: + opacity 200ms, + width 200ms; +} + +.articles-group.loading { + opacity: 0; +} + +.articles-group.none { + width: clamp(0px, calc(100vw - 1100px), 400px); } .articles-title { @@ -35,10 +49,10 @@ cursor: pointer; } -/* +/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary#default_style "For Webkit-based browsers, such as Safari, it is possible to control the icon display - through the non-standard CSS pseudo-element ::-webkit-details-marker. + through the non-standard CSS pseudo-element ::-webkit-details-marker. To remove the disclosure triangle, use summary::-webkit-details-marker { display: none }." */ .articles-group details summary::-webkit-details-marker { @@ -57,10 +71,10 @@ height: 8px; position: relative; top: 25px; - left: -5px; + left: -8px; } -@media (max-width: 640px) { +@media (max-width: 780px) { .articles-group { width: 100%; } diff --git a/app/components/CategoriesNav/Menu.tsx b/app/components/CategoriesNav/CategoriesNav.tsx similarity index 92% rename from app/components/CategoriesNav/Menu.tsx rename to app/components/CategoriesNav/CategoriesNav.tsx index 6615166b..cb62b101 100644 --- a/app/components/CategoriesNav/Menu.tsx +++ b/app/components/CategoriesNav/CategoriesNav.tsx @@ -3,7 +3,7 @@ import {Link} from '@remix-run/react' import {SearchInput} from '../SearchInput/Input' import {Tag as TagType} from '~/server-utils/stampy' import {tagUrl} from '~/routesMapper' -import './menu.css' +import './categoriesnav.css' import useIsMobile from '~/hooks/isMobile' interface CategoriesNavProps { @@ -25,7 +25,7 @@ export const CategoriesNav = ({categories, activeCategoryId, className}: Categor const [search, onSearch] = useState('') const mobile = useIsMobile() return ( -
+
{mobile ?

Categories

:

Categories

}
diff --git a/app/components/CategoriesNav/Page.tsx b/app/components/CategoriesNav/Page.tsx index bd911ef2..f3214b7b 100644 --- a/app/components/CategoriesNav/Page.tsx +++ b/app/components/CategoriesNav/Page.tsx @@ -3,7 +3,7 @@ import {Link} from '@remix-run/react' import {SearchInput} from '../SearchInput/Input' import {Tag as TagType} from '~/server-utils/stampy' import {tagUrl} from '~/routesMapper' -import './menu.css' +import './categoriesnav.css' interface CategoriesPageProps { /** @@ -15,7 +15,7 @@ interface CategoriesPageProps { export const CategoriesPage = ({categories}: CategoriesPageProps) => { const [search, onSearch] = useState('') return ( -
+

Categories

diff --git a/app/components/CategoriesNav/menu.css b/app/components/CategoriesNav/categoriesnav.css similarity index 91% rename from app/components/CategoriesNav/menu.css rename to app/components/CategoriesNav/categoriesnav.css index a83b25fc..513aa5de 100644 --- a/app/components/CategoriesNav/menu.css +++ b/app/components/CategoriesNav/categoriesnav.css @@ -1,5 +1,7 @@ .categoriesGroup { padding: var(--spacing-12); + flex: none; + width: clamp(230px, 30vw, 400px); } .categoriesGroup > * { padding: var(--spacing-16); @@ -26,7 +28,7 @@ flex: 1; flex-basis: 21vw; } -@media (max-width: 640px) { +@media (max-width: 780px) { .categoriesGroup { width: 100%; height: 100%; diff --git a/app/components/Chatbot/widgit.css b/app/components/Chatbot/widgit.css index 88e9d374..1aaea416 100644 --- a/app/components/Chatbot/widgit.css +++ b/app/components/Chatbot/widgit.css @@ -15,7 +15,7 @@ padding: var(--spacing-8) var(--spacing-24); } -@media (max-width: 640px) { +@media (max-width: 780px) { .button { width: 100%; } diff --git a/app/components/ContentBox/box.css b/app/components/ContentBox/box.css index 84cbae79..7a4e3d64 100644 --- a/app/components/ContentBox/box.css +++ b/app/components/ContentBox/box.css @@ -25,6 +25,7 @@ .content-box-table { padding: var(--spacing-16); + display: flex; /* avoid space around svg inline-block elements */ } .teal-background { @@ -44,17 +45,12 @@ .content-box-table.main { overflow: hidden; - padding: 0 var(--spacing-8); + padding: 0; } -@media (max-width: 640px) { +@media (max-width: 780px) { .main-container-box-table { flex-direction: column; margin-bottom: var(--spacing-80); } - - .content-box-table { - padding: var(--spacing-80); - padding-top: 0; - } } diff --git a/app/components/Error/index.tsx b/app/components/Error/index.tsx index c338939e..21be6004 100644 --- a/app/components/Error/index.tsx +++ b/app/components/Error/index.tsx @@ -88,7 +88,7 @@ const errorName = (error?: ErrorType) => { const Error = ({error}: {error?: ErrorType}) => { return ( -
+

{errorName(error)}

{error?.status &&
{errors[error.status as keyof typeof errors] || ''}
}
diff --git a/app/components/Footer/footer.css b/app/components/Footer/footer.css index 5fc5fede..10aaf0a1 100644 --- a/app/components/Footer/footer.css +++ b/app/components/Footer/footer.css @@ -4,14 +4,15 @@ .footer-contents { display: flex; + gap: var(--spacing-32); flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: baseline; - margin: var(--spacing-104) 13.33vw var(--spacing-80) 13.33vw; + margin: var(--spacing-104) var(--spacing-80) var(--spacing-80) var(--spacing-80); } -@media (max-width: 640px) { +@media (max-width: 780px) { .footer-contents { flex-direction: column; gap: 32px; diff --git a/app/components/Footer/index.tsx b/app/components/Footer/index.tsx index b33c1db9..c90e8e05 100644 --- a/app/components/Footer/index.tsx +++ b/app/components/Footer/index.tsx @@ -16,7 +16,7 @@ export const FooterBar: FunctionComponent = () => {
-
+

AISafety.info

@@ -26,14 +26,14 @@ export const FooterBar: FunctionComponent = () => {
-
+

Get involved

-
+

Partner projects

diff --git a/app/components/Grid/grid.css b/app/components/Grid/grid.css index 76343524..1bba14fe 100644 --- a/app/components/Grid/grid.css +++ b/app/components/Grid/grid.css @@ -1,16 +1,13 @@ .grid { - display: flex; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--spacing-32); - flex-flow: wrap; } .grid-item { cursor: pointer; text-align: left; padding: var(--spacing-40); - width: 21.46vw; - min-width: var(--spacing-288); - min-height: var(--spacing-288); text-decoration: none; } @@ -30,7 +27,7 @@ margin-bottom: var(--spacing-24); } -@media (max-width: 640px) { +@media (max-width: 780px) { .grid-item { width: 100%; height: 300px; diff --git a/app/components/Nav/Mobile/navMobile.css b/app/components/Nav/Mobile/navMobile.css index 83c3a54e..2d2fd9bc 100644 --- a/app/components/Nav/Mobile/navMobile.css +++ b/app/components/Nav/Mobile/navMobile.css @@ -1,4 +1,4 @@ -@media only screen and (max-width: 640px) { +@media only screen and (max-width: 780px) { .top-header { padding: 0; } diff --git a/app/components/Nav/nav.css b/app/components/Nav/nav.css index 89127b9c..64911744 100644 --- a/app/components/Nav/nav.css +++ b/app/components/Nav/nav.css @@ -1,5 +1,5 @@ .top-header { - padding: var(--spacing-32) 5.56vw; + padding: var(--spacing-32); } .top-nav { display: flex; @@ -28,8 +28,6 @@ } .top-menu svg { - width: var(--spacing-24); - max-width: 100%; aspect-ratio: 1; object-fit: contain; object-position: center; diff --git a/app/components/SearchResults/Dropdown.tsx b/app/components/SearchResults/Dropdown.tsx index 83430124..05fe3948 100644 --- a/app/components/SearchResults/Dropdown.tsx +++ b/app/components/SearchResults/Dropdown.tsx @@ -27,14 +27,14 @@ export const SearchResults = ({results}: {results: SearchResultsProps[]}) => { const noResults = results.length === 0 if (noResults) { return ( -
+
No results found
) } return ( -
+
{results.map((result, i) => ( diff --git a/app/components/icons-generated/BookCircle.tsx b/app/components/icons-generated/BookCircle.tsx index 362411ed..67f0e394 100644 --- a/app/components/icons-generated/BookCircle.tsx +++ b/app/components/icons-generated/BookCircle.tsx @@ -3,15 +3,15 @@ const SvgBookCircle = (props: SVGProps) => ( ) => ( maskType: 'alpha', }} > - + (0) - - const isWindow = typeof window !== 'undefined' - - const getWidth = () => (isWindow ? window.innerWidth : windowWidth) - - const resize = () => setWindowWidth(getWidth()) + const mobileWidth = 780 + const getWidth = () => (isWindow ? window.innerWidth : 1280) // assume desktop until proven otherwise (for SSR) + const [windowWidth, setWindowWidth] = useState(getWidth) useEffect(() => { if (isWindow) { + const resize = () => setWindowWidth(getWidth()) setWindowWidth(getWidth()) window.addEventListener('resize', resize) return () => window.removeEventListener('resize', resize) } - //eslint-disable-next-line - }, [isWindow]) + }, []) return windowWidth <= mobileWidth } diff --git a/app/hooks/useQuestionStateInUrl.ts b/app/hooks/useQuestionStateInUrl.ts index a3238b4a..d84e6858 100644 --- a/app/hooks/useQuestionStateInUrl.ts +++ b/app/hooks/useQuestionStateInUrl.ts @@ -32,7 +32,7 @@ function updateQuestionMap(question: Question, map: Map): Map< const emptyQuestionArray: Question[] = [] -export default function useQuestionStateInUrl(minLogo: boolean, initialQuestions: Question[]) { +export default function useQuestionStateInUrl(initialQuestions: Question[]) { const [remixSearchParams, setRemixParams] = useSearchParams() const transition = useNavigation() const embedWithoutDetails = @@ -102,23 +102,6 @@ export default function useQuestionStateInUrl(minLogo: boolean, initialQuestions })) }, [stateString, initialCollapsedState, questionMap]) - useEffect(() => { - const mainQuestions = questions.filter( - ({questionState}) => questionState != QuestionState.RELATED - ) - let title - if (minLogo) { - title = 'AI Safety FAQ' - } else if (mainQuestions.length == 1) { - title = mainQuestions[0].title - } else { - const suffix = stateString ? ` - ${stateString}` : '' - title = `Stampy ${suffix}` - } - if (title.length > 150) title = title.slice(0, 150 - 3) + '...' - document.title = title - }, [stateString, minLogo, questions]) - const moveToTop = (currentState: string, {pageid}: Question) => { setTimeout(() => { // scroll to top after the state is updated diff --git a/app/root.css b/app/root.css index cd8548f8..bce98dcc 100644 --- a/app/root.css +++ b/app/root.css @@ -35,16 +35,16 @@ --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px; - --spacing-24: 24px; - --spacing-32: 32px; - --spacing-40: 40px; - --spacing-48: 48px; - --spacing-56: 56px; - --spacing-80: 80px; - --spacing-104: 104px; - --spacing-128: 128px; - --spacing-192: 192px; - --spacing-288: 288px; + --spacing-24: clamp(16px, 2.6vw, 24px); + --spacing-32: clamp(24px, 3.4vw, 32px); + --spacing-40: clamp(24px, 4.2vw, 40px); + --spacing-48: clamp(24px, 5vw, 48px); + --spacing-56: clamp(24px, 6vw, 56px); + --spacing-80: clamp(40px, 7.4vw, 80px); + --spacing-104: clamp(56px, 10.6vw, 104px); + --spacing-128: clamp(56px, 13.8vw, 128px); + --spacing-192: clamp(80px, 17vw, 192px); + --spacing-288: clamp(128px, 25.6vw, 288px); } /* CSS Reset */ @@ -73,22 +73,22 @@ input { margin: 0; } body { - display: flex; - flex-direction: column; + margin: auto; + max-width: 1600px; min-height: 100vh; } /* typography tags */ h1 { - font-size: 64px; + font-size: clamp(40px, 4vw, 52px); font-weight: 500; line-height: 125%; /* 80px */ letter-spacing: -1.28px; } h2 { - font-size: 38px; + font-size: clamp(24px, 2.6vw, 32px); font-weight: 500; line-height: 130%; /* 49.4px */ letter-spacing: -0.57px; @@ -291,48 +291,38 @@ h2 { /* width classes. please turn the grid on in figma and then define widths based on how many columns there are! */ /* note I may change these to vars later */ -.col-2 { - width: 8.54vw; +.fcol-2 { + flex: 2; } - -.col-3 { - width: 15vw; +.fcol-3 { + flex: 3; } - -.col-4 { - width: 21.46vw; +.fcol-4 { + flex: 4; } - -.col-4-5 { - width: 22.78vw; +.fcol-5 { + flex: 5; } - -.col-5 { - width: 27.99vw; +.fcol-6 { + flex: 6; } - -.col-6 { - width: 34.44vw; +.fcol-7 { + flex: 7; } - -.col-7 { - width: 40.9vw; +.fcol-8 { + flex: 8; } - -.col-8 { - width: 47.43vw; +.fcol-9 { + flex: 9; } - -.col-9 { - width: 53.89vw; +.fcol-10 { + flex: 10; } - -.col-10 { - width: 60.35vw; +.fcol-11 { + flex: 11; } - -.col-11 { - width: 66.88vw; +.fcol-12 { + flex: 12; } .full-width { @@ -370,6 +360,10 @@ ol { padding-left: var(--spacing-32); } +svg { + flex: none; +} + /* other one-off classes */ .text-align-center { @@ -407,7 +401,7 @@ ol { /* defines the standard left and right margins */ .page-body { - padding: 0px 13.333vw; + padding: 0 var(--spacing-104); } /* all other classes */ @@ -427,9 +421,7 @@ ol { .article-container { display: flex; - padding-left: 5.56vw; - padding-right: 2.43vw; - padding-top: var(--spacing-40); + padding: var(--spacing-32); } .icon-link path { @@ -439,7 +431,7 @@ ol { stroke: var(--colors-teal-600); } -@media (min-width: 640px) { +@media (min-width: 780px) { .mobile-only { display: none !important; } @@ -447,7 +439,7 @@ ol { /* mobile */ -@media (max-width: 640px) { +@media (max-width: 780px) { :root { --spacing-24: 16px; --spacing-32: 24px; @@ -460,20 +452,6 @@ ol { --spacing-288: 128px; } - .col-2, - .col-3, - .col-4, - .col-4-5, - .col-5, - .col-6, - .col-7, - .col-8, - .col-9, - .col-10, - .col-11 { - width: 87.2vw; - } - .page-body { padding: 0px 6.4vw; } diff --git a/app/root.tsx b/app/root.tsx index 53cf2118..14b8c447 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -61,8 +61,7 @@ const twitterCreator = '@stampyai' export const meta: MetaFunction = ({data = {} as any}) => { const title = makeSocialPreviewText(data.question?.title, TITLE, 150) const description = makeSocialPreviewText(data.question?.text, DESCRIPTION) - const url = new URL(data.url) - const logo = `${url.origin}/${data.minLogo ? 'favicon-min-512.png' : 'favicon-512.png'}` + const logo = 'favicon-512.png' return [ {title}, {name: 'description', content: description}, @@ -89,11 +88,6 @@ export const links: LinksFunction = () => .map((styles) => ({rel: 'stylesheet', href: styles as string})) export const loader = async ({request}: Parameters[0]) => { - const isDomainWithFunLogo = request.url.match(/stampy.ai|localhost/) // min logo by default on aisafety.info and 127.0.0.1 - const isFunLogoForcedOff = request.url.match(/minLogo/) - const isFunLogoForcedOn = request.url.match(/funLogo/) - const minLogo = isDomainWithFunLogo ? !!isFunLogoForcedOff : !isFunLogoForcedOn - const embed = !!request.url.match(/embed/) const showSearch = !request.url.match(/onlyInitial/) @@ -105,7 +99,6 @@ export const loader = async ({request}: Parameters[0]) => { return { question, url: request.url, - minLogo, embed, showSearch, gaTrackingId: GOOGLE_ANALYTICS_ID, @@ -136,7 +129,7 @@ const GoogleAnalytics = ({gaTrackingId}: {gaTrackingId?: string}) => { ) } -function Head({minLogo}: {minLogo?: boolean}) { +function Head() { return ( @@ -147,11 +140,7 @@ function Head({minLogo}: {minLogo?: boolean}) { */} - {minLogo ? ( - - ) : ( - - )} + ) } @@ -160,16 +149,14 @@ const BasePage = ({ children, embed, savedTheme, - minLogo, }: { children: ReactNode embed?: boolean savedTheme?: string - minLogo?: boolean }) => ( - + {children} @@ -192,12 +179,12 @@ export function ErrorBoundary() { } type Loader = Awaited> -export type Context = Pick +export type Context = Pick export default function App() { - const {minLogo, embed, showSearch, gaTrackingId} = useLoaderData() + const {embed, showSearch, gaTrackingId} = useLoaderData() const {savedTheme} = useTheme() - const context: Context = {minLogo, embed, showSearch} + const context: Context = {embed, showSearch} useEffect(() => { if (embed) { @@ -220,7 +207,7 @@ export default function App() { }, [embed]) return ( - + diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx index a32183f5..f2fd6887 100644 --- a/app/routes/_index.tsx +++ b/app/routes/_index.tsx @@ -1,3 +1,4 @@ +import {useEffect} from 'react' import type {LoaderFunction} from '@remix-run/cloudflare' import {ShouldRevalidateFunction, redirect} from '@remix-run/react' import {QuestionState} from '~/server-utils/stampy' @@ -5,9 +6,9 @@ import {ContentBoxMain, ContentBoxSecond, ContentBoxThird} from '~/components/Co import useToC from '~/hooks/useToC' import Grid from '~/components/Grid' import Page from '~/components/Page' +import {WidgetStampy} from '~/components/Chatbot' import {getStateEntries} from '~/hooks/stateModifiers' import {questionUrl} from '~/routesMapper' -import {WidgetStampy} from '~/components/Chatbot' export const loader = async ({request}: Parameters[0]) => { const url = new URL(request.url) @@ -29,6 +30,11 @@ export const shouldRevalidate: ShouldRevalidateFunction = () => false export default function App() { const {advanced} = useToC() + + useEffect(() => { + document.title = 'AISafety.info' + }, []) + return (
diff --git a/app/routes/categories.$.tsx b/app/routes/categories.$.tsx index 78ee00f0..25c467f0 100644 --- a/app/routes/categories.$.tsx +++ b/app/routes/categories.$.tsx @@ -3,7 +3,7 @@ import {useLoaderData} from '@remix-run/react' import Page from '~/components/Page' import ListTable from '~/components/Table' import {loader} from '~/routes/categories.all' -import {CategoriesNav} from '~/components/CategoriesNav/Menu' +import {CategoriesNav} from '~/components/CategoriesNav/CategoriesNav' import type {Tag as TagType} from '~/server-utils/stampy' import useIsMobile from '~/hooks/isMobile' import {CategoriesPage} from '~/components/CategoriesNav/Page' @@ -19,7 +19,7 @@ export default function Tags() { const mobile = useIsMobile() const {data} = useLoaderData>() const {currentTag, tags} = data - const [selectedTag, setSelectedTag] = useState(null) + const [selectedTag, setSelectedTag] = useState(currentTag ?? null) const [sortBy] = useState('alphabetically') @@ -56,7 +56,7 @@ export default function Tags() { ? 'No pages found' : `${selectedTag.questions.length} pages tagged "${selectedTag.name}"`}
- {selectedTag && } + {selectedTag && }
)} diff --git a/app/routes/questions.$questionId.$.tsx b/app/routes/questions.$questionId.$.tsx index a3862bf7..57ea659f 100644 --- a/app/routes/questions.$questionId.$.tsx +++ b/app/routes/questions.$questionId.$.tsx @@ -8,7 +8,7 @@ import Button from '~/components/Button' import Error from '~/components/Error' import XIcon from '~/components/icons-generated/X' import ChevronRight from '~/components/icons-generated/ChevronRight' -import {ArticlesNav} from '~/components/ArticlesNav/Menu' +import {ArticlesNav} from '~/components/ArticlesNav/ArticleNav' import {fetchGlossary} from '~/routes/questions.glossary' import {loadQuestionDetail, loadTags} from '~/server-utils/stampy' import useToC from '~/hooks/useToC' @@ -64,7 +64,7 @@ export default function RenderArticle() { const params = useParams() const pageid = params.questionId ?? '😱' const {question, tags} = useLoaderData() - const {findSection, getArticle, getPath} = useToC() + const {toc, findSection, getArticle, getPath} = useToC() const section = findSection(location?.state?.section || pageid) useEffect(() => { @@ -102,29 +102,34 @@ export default function RenderArticle() { />
) : ( - + section && ( + + ) )} - {section && ( - - )} + 0} + current={pageid} + article={section} + path={getPath(pageid, section?.pageid)} + className={!showNav ? 'desktop-only bordered' : ''} + /> } diff --git a/package.json b/package.json index a4d94267..c6562682 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,7 @@ }, "sideEffects": false, "scripts": { - "generate-icons": "npx @svgr/cli --typescript --out-dir app/components/icons-generated -- app/assets/icons", + "generate-icons": "npx @svgr/cli --typescript --jsx-runtime automatic --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}\"", "lint": "tsc && npm run prettier && npm run eslint", diff --git a/public/favicon-min-512.png b/public/favicon-min-512.png deleted file mode 100644 index e14ebb6a..00000000 Binary files a/public/favicon-min-512.png and /dev/null differ diff --git a/public/favicon-min.ico b/public/favicon-min.ico deleted file mode 100644 index 57eb62d1..00000000 Binary files a/public/favicon-min.ico and /dev/null differ diff --git a/stories/ArticlesNav.stories.ts b/stories/ArticlesNav.stories.ts index 02896660..461f1988 100644 --- a/stories/ArticlesNav.stories.ts +++ b/stories/ArticlesNav.stories.ts @@ -1,5 +1,5 @@ import type {Meta, StoryObj} from '@storybook/react' -import {ArticlesNav} from '../app/components/ArticlesNav/Menu' +import {ArticlesNav} from '../app/components/ArticlesNav/ArticleNav' const meta = { title: 'Components/ArticlesNav', diff --git a/stories/CategoriesNav.stories.tsx b/stories/CategoriesNav.stories.tsx index 9ad7661e..172e2b61 100644 --- a/stories/CategoriesNav.stories.tsx +++ b/stories/CategoriesNav.stories.tsx @@ -1,5 +1,5 @@ import type {Meta, StoryObj} from '@storybook/react' -import {CategoriesNav} from '../app/components/CategoriesNav/Menu' +import {CategoriesNav} from '../app/components/CategoriesNav/CategoriesNav' const meta = { title: 'Components/CategoriesNav',