From 6e9564277d4b904867f0010b0633fdc96cbde099 Mon Sep 17 00:00:00 2001 From: Peter Hozak Date: Sun, 28 Apr 2024 17:44:01 +0200 Subject: [PATCH] css fixes for various screen sizes and page loading --- app/assets/icons/book-circle.svg | 6 +- app/components/Article/Contents.tsx | 4 +- app/components/Article/FeedbackForm/index.tsx | 2 +- .../Article/KeepGoing/keepGoing.module.css | 2 +- app/components/Article/article.css | 39 ++++++- app/components/Article/index.tsx | 2 +- app/components/ArticlesDropdown/dropdown.css | 2 +- app/components/ArticlesDropdown/index.tsx | 14 +-- .../ArticlesNav/{Menu.tsx => ArticleNav.tsx} | 15 ++- .../ArticlesNav/{menu.css => articlenav.css} | 16 ++- .../{Menu.tsx => CategoriesNav.tsx} | 4 +- app/components/CategoriesNav/Page.tsx | 4 +- .../{menu.css => categoriesnav.css} | 4 +- app/components/ContentBox/box.css | 10 +- app/components/Error/index.tsx | 2 +- app/components/Footer/footer.css | 5 +- app/components/Footer/index.tsx | 6 +- app/components/Grid/grid.css | 9 +- app/components/Nav/Mobile/navMobile.css | 2 +- app/components/Nav/nav.css | 4 +- app/components/SearchResults/Dropdown.tsx | 4 +- app/components/Widget/Stampy.tsx | 4 +- app/components/Widget/stampy.css | 2 +- app/components/icons-generated/BookCircle.tsx | 8 +- app/hooks/isMobile.tsx | 16 +-- app/hooks/useQuestionStateInUrl.ts | 19 +-- app/newRoot.css | 110 ++++++------------ app/root.tsx | 29 ++--- app/routes/_index.tsx | 6 + app/routes/categories.$.tsx | 6 +- app/routes/questions.$questionId.$.tsx | 41 ++++--- package.json | 2 +- public/favicon-min-512.png | Bin 11252 -> 0 bytes public/favicon-min.ico | Bin 15086 -> 0 bytes stories/ArticlesNav.stories.ts | 2 +- stories/CategoriesNav.stories.tsx | 2 +- 36 files changed, 188 insertions(+), 215 deletions(-) rename app/components/ArticlesNav/{Menu.tsx => ArticleNav.tsx} (88%) rename app/components/ArticlesNav/{menu.css => articlenav.css} (86%) rename app/components/CategoriesNav/{Menu.tsx => CategoriesNav.tsx} (92%) rename app/components/CategoriesNav/{menu.css => categoriesnav.css} (91%) delete mode 100644 public/favicon-min-512.png delete mode 100644 public/favicon-min.ico 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 9059d36f..0ae3e7ed 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 d16abd14..a879e5e0 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 86% rename from app/components/ArticlesNav/menu.css rename to app/components/ArticlesNav/articlenav.css index f03f54d5..60acca14 100644 --- a/app/components/ArticlesNav/menu.css +++ b/app/components/ArticlesNav/articlenav.css @@ -2,11 +2,23 @@ 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 { @@ -57,10 +69,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 88450033..09a395a7 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: 16vw; } -@media (max-width: 640px) { +@media (max-width: 780px) { .categoriesGroup { width: 100%; height: 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/Widget/Stampy.tsx b/app/components/Widget/Stampy.tsx index f5d216c0..7909181d 100644 --- a/app/components/Widget/Stampy.tsx +++ b/app/components/Widget/Stampy.tsx @@ -15,8 +15,8 @@ export const WidgetStampy = () => { const stampyUrl = (question: string) => `https://chat.aisafety.info/?question=${question.trim()}` return ( -
-
+
+

Questions?

Ask Stampy, our chatbot, any question about AI safety

diff --git a/app/components/Widget/stampy.css b/app/components/Widget/stampy.css index f65a058c..a5cebc88 100644 --- a/app/components/Widget/stampy.css +++ b/app/components/Widget/stampy.css @@ -20,7 +20,7 @@ transform: translate(-52px, 4px); } -@media (max-width: 640px) { +@media (max-width: 780px) { .button { width: 100%; } 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/newRoot.css b/app/newRoot.css index c869ad7c..726c1398 100644 --- a/app/newRoot.css +++ b/app/newRoot.css @@ -34,16 +34,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 */ @@ -72,22 +72,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; @@ -290,49 +290,17 @@ 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; -} - -.col-3 { - width: 15vw; -} - -.col-4 { - width: 21.46vw; -} - -.col-4-5 { - width: 22.78vw; -} - -.col-5 { - width: 27.99vw; -} - -.col-6 { - width: 34.44vw; -} - -.col-7 { - width: 40.9vw; -} - -.col-8 { - width: 47.43vw; -} - -.col-9 { - width: 53.89vw; -} - -.col-10 { - width: 60.35vw; -} - -.col-11 { - width: 66.88vw; -} +.fcol-2 {flex: 2;} +.fcol-3 {flex: 3;} +.fcol-4 {flex: 4;} +.fcol-5 {flex: 5;} +.fcol-6 {flex: 6;} +.fcol-7 {flex: 7;} +.fcol-8 {flex: 8;} +.fcol-9 {flex: 9;} +.fcol-10 {flex: 10;} +.fcol-11 {flex: 11;} +.fcol-12 {flex: 12;} .full-width { width: 100%; @@ -369,6 +337,10 @@ ol { padding-left: var(--spacing-32); } +svg { + flex: none; +} + /* other one-off classes */ .text-align-center { @@ -406,7 +378,7 @@ ol { /* defines the standard left and right margins */ .page-body { - padding: 0px 13.333vw; + padding: 0 var(--spacing-104); } /* all other classes */ @@ -426,9 +398,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 { @@ -438,7 +408,7 @@ ol { stroke: var(--colors-teal-600); } -@media (min-width: 640px) { +@media (min-width: 780px) { .mobile-only { display: none !important; } @@ -446,7 +416,7 @@ ol { /* mobile */ -@media (max-width: 640px) { +@media (max-width: 780px) { :root { --spacing-24: 16px; --spacing-32: 24px; @@ -459,20 +429,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 b1bca492..e44a1d36 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 36293711..067fbcf0 100644 --- a/app/routes/_index.tsx +++ b/app/routes/_index.tsx @@ -7,6 +7,7 @@ import Grid from '~/components/Grid' import Page from '~/components/Page' import {getStateEntries} from '~/hooks/stateModifiers' import {questionUrl} from '~/routesMapper' +import {useEffect} from 'react' export const loader = async ({request}: Parameters[0]) => { const url = new URL(request.url) @@ -28,6 +29,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 b2af8c04..f4e6dd87 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' @@ -62,7 +62,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(() => { @@ -100,29 +100,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 e14ebb6acfba9856efd24991253223ee2482d654..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 11252 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 diff --git a/public/favicon-min.ico b/public/favicon-min.ico deleted file mode 100644 index 57eb62d1bf81d26fbb1e755d406df37dbff3de76..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 15086 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 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',