Docs - Preload logo images

Author: davidjerleke

website/src/components/Head/Head.tsx

@@ -1,3 +1,4 @@
+import { StaticImageData } from 'next/image'
 import { LOCALSTORAGE_KEYS } from '@/utils/local-storage'
 import { styledComponentsStylesToString } from '@/utils/styled-components'
 import { ALGOLIA_SEARCH_CONFIG } from '@/utils/algolia-search'
@@ -8,18 +9,17 @@ import {
   THEME_PREFIX,
   THEME_STYLES
 } from '@/utils/theme'
-// import logoLightThemeDefaultUrl from '@/assets/images/embla-logo-light-theme.svg'
-// import logoDarkThemeDefaultUrl from '@/assets/images/embla-logo-dark-theme.svg'
-// import logoLightThemeBlurUrl from '@/assets/images/embla-logo-light-theme-blur.svg'
-// import logoDarkThemeBlurUrl from '@/assets/images/embla-logo-dark-theme-blur.svg'
+import logoLightThemeDefaultUrl from '@/assets/images/embla-logo-light-theme.svg'
+import logoDarkThemeDefaultUrl from '@/assets/images/embla-logo-dark-theme.svg'
+import logoLightThemeBlurUrl from '@/assets/images/embla-logo-light-theme-blur.svg'
+import logoDarkThemeBlurUrl from '@/assets/images/embla-logo-dark-theme-blur.svg'
 
-// TODO: Move to preload with NextJS Image?
-// const imagesToPreload: StaticImageData[] = [
-//   logoLightThemeDefaultUrl,
-//   logoDarkThemeDefaultUrl,
-//   logoLightThemeBlurUrl,
-//   logoDarkThemeBlurUrl
-// ]
+const imagesToPreload: StaticImageData[] = [
+  logoLightThemeDefaultUrl,
+  logoDarkThemeDefaultUrl,
+  logoLightThemeBlurUrl,
+  logoDarkThemeBlurUrl
+]
 
 export function Head() {
   return (
@@ -98,15 +98,15 @@ export function Head() {
         href={`https://${ALGOLIA_SEARCH_CONFIG.APP_ID}-dsn.algolia.net`}
         crossOrigin="anonymous"
       />
-      {/* {imagesToPreload.map((image) => (
+      {imagesToPreload.map((image) => (
         <link
           rel="preload"
           as="image"
           type="image/svg+xml"
           href={image.src}
           key={image.src}
         />
-      ))} */}
+      ))}
     </>
   )
 }

website/src/components/SidebarNavigation/SidebarNavigationMenuCompact.tsx

@@ -8,10 +8,9 @@ import { SPACINGS } from '@/utils/spacings'
 import { MEDIA } from '@/utils/breakpoints'
 import { HEADER_HEIGHT } from '@/utils/header'
 import { LAYERS } from '@/utils/layers'
-import { BORDER_RADIUSES, BORDER_SIZES } from '@/utils/border'
+import { BORDER_SIZES } from '@/utils/border'
 import { TABS_SIDEBAR_NAVIGATION } from '@/utils/tabs'
 import { PAGE_FRAME_SPACING } from '@/utils/page'
-import { FooterLinks } from '@/components/Footer/FooterLinks'
 import { TabsItem } from '@/components/Tabs/TabsItem'
 import { Tabs } from '@/components/Tabs/Tabs'
 import { TableOfContents } from '@/components/TableOfContents/TableOfContents'
@@ -25,11 +24,6 @@ import {
   createScrollBarStyles,
   SCROLL_BAR_SHADOW_SIZE
 } from '@/utils/scrollbars'
-import {
-  ThemeToggle,
-  LightThemeSvg,
-  DarkThemeSvg
-} from '@/components/Theme/ThemeToggle'
 
 const MAX_WIDTH_COMPACT = '36rem'
 
@@ -135,37 +129,6 @@ const ScrollArea = styled.div`
   margin-right: auto;
 `
 
-// TODO: Remove?
-const ThemeToggleButton = styled(ThemeToggle)`
-  background-color: ${COLORS.BACKGROUND_CODE};
-  width: 100%;
-  justify-content: space-between;
-  padding: 1.8rem 2rem;
-  margin-top: ${SPACINGS.FOUR};
-  height: auto;
-  margin-right: 0;
-  margin-left: 0;
-  border-radius: ${BORDER_RADIUSES.BOX};
-  overflow: hidden;
-
-  ${LightThemeSvg}, ${DarkThemeSvg} {
-    left: auto;
-    right: 2rem;
-    transform: translateY(-50%);
-  }
-`
-
-// TODO: Remove?
-const ThemeToggleText = styled.span`
-  color: ${COLORS.TEXT_MEDIUM_CONTRAST};
-`
-
-// TODO: Remove?
-const MiscLinks = styled(FooterLinks)`
-  padding-top: ${SPACINGS.THREE};
-  justify-content: center;
-`
-
 const VersionBadgeWrapper = styled.div`
   display: flex;
   padding-top: ${SPACINGS.THREE};
@@ -175,13 +138,6 @@ const VersionBadgeWrapper = styled.div`
 export function SidebarNavigationMenuCompact() {
   const isKeyNavigating = useAppSelector(selectKeyNavigating)
 
-  // TODO: Remove?
-
-  // const theme = useAppSelector(selectTheme)
-  // const [showTableOfContents, setShowTableOfContents] = useState(true)
-  // const isLightTheme = theme === THEME_KEYS.LIGHT
-  // const oppositeTheme = isLightTheme ? THEME_KEYS.DARK : THEME_KEYS.LIGHT
-
   return (
     <SidebarNavigationMenuCompactWrapper>
       <MenuTabs $isKeyNavigating={isKeyNavigating}>