Preload images and fonts, change sponsor urls.

packages/embla-carousel-docs/gatsby-ssr.tsx

@@ -13,6 +13,20 @@ import { ALGOLIA_SEARCH_CONFIG } from './src/consts/algoliaSearch'
 import { FONT_FACE_STYLES } from './src/consts/fontFace'
 import { styledComponentsStylesToString } from './src/utils/styledComponentStylesToString'
 import { removeProtocol } from './src/utils/removeProtocol'
+import logoLightThemeDefaultUrl from './src/assets/images/embla-logo-light-theme.svg'
+import logoDarkThemeDefaultUrl from './src/assets/images/embla-logo-dark-theme.svg'
+import logoLightThemeBlurUrl from './src/assets/images/embla-logo-light-theme-blur.svg'
+import logoDarkThemeBlurUrl from './src/assets/images/embla-logo-dark-theme-blur.svg'
+import interRomanVar from 'assets/fonts/Inter-roman.var.woff2'
+
+const fontsToPreload: string[] = [interRomanVar]
+
+const imagesToPreload: string[] = [
+  logoLightThemeDefaultUrl,
+  logoDarkThemeDefaultUrl,
+  logoLightThemeBlurUrl,
+  logoDarkThemeBlurUrl
+]
 
 export const onRenderBody: GatsbySSR['onRenderBody'] = ({
   setHtmlAttributes,
@@ -123,7 +137,19 @@ export const onRenderBody: GatsbySSR['onRenderBody'] = ({
       rel="preconnect"
       href={`https://${ALGOLIA_SEARCH_CONFIG.APP_ID}-dsn.algolia.net`}
       crossOrigin="anonymous"
-    />
+    />,
+    fontsToPreload.map((font) => (
+      <link rel="preload" as="font" type="font/woff2" href={font} key={font} />
+    )),
+    imagesToPreload.map((image) => (
+      <link
+        rel="preload"
+        as="image"
+        type="image/svg+xml"
+        href={image}
+        key={image}
+      />
+    ))
   ])
 
   setPreBodyComponents([

packages/embla-carousel-docs/src/assets/icons/index.ts

@@ -20,6 +20,7 @@ import arrowLeft from './arrow-left.svg'
 import arrowRight from './arrow-right.svg'
 import chevronLeft from './chevron-left.svg'
 import chevronRight from './chevron-right.svg'
+import heartOutlined from './heart-outlined.svg'
 import emblaLightDefault from './embla-logo-light-theme.svg'
 import emblaDarkDefault from './embla-logo-dark-theme.svg'
 import emblaLightBlur from './embla-logo-light-theme-blur.svg'
@@ -52,6 +53,7 @@ export const ICONS = {
   danger: styledSvg(danger),
   shrink: styledSvg(shrink),
   expand: styledSvg(expand),
+  heartOutlined: styledSvg(heartOutlined),
   arrowLeft: styledSvg(arrowLeft),
   arrowRight: styledSvg(arrowRight),
   chevronLeft: styledSvg(chevronLeft),

packages/embla-carousel-docs/src/components/Footer/FooterLinks.tsx

@@ -14,6 +14,7 @@ const ICON_SPACING = SPACINGS.CUSTOM(({ TWO }) => TWO - 0.2)
 const FooterLinksWrapper = styled.ul`
   ${createGapStyles(LINK_SPACING, '', 'li')};
   display: flex;
+  flex-wrap: wrap;
 `
 
 const Link = styled(LinkBare)`
@@ -46,6 +47,13 @@ export const FooterLinks = (props: PropType) => {
           </IconWithText>
         </Link>
       </li>
+      <li>
+        <Link to={URLS.GITHUB_SPONSORS_PAGE}>
+          <IconWithText iconSvg="heartOutlined" spacing={ICON_SPACING}>
+            Sponsor
+          </IconWithText>
+        </Link>
+      </li>
     </FooterLinksWrapper>
   )
 }

packages/embla-carousel-docs/src/components/Header/HeaderLogo.tsx

@@ -15,9 +15,12 @@ import {
   SiteLogo
 } from 'components/SiteLogo/SiteLogo'
 
+const LOGO_WIDTH = '20.6rem'
+
 const HeaderLogoWrapper = styled(LinkBare)`
   color: ${COLORS.TEXT_HIGH_CONTRAST};
   font-size: ${FONT_SIZES.H4};
+  width: ${LOGO_WIDTH};
   display: flex;
   align-items: center;
   text-decoration: none;

packages/embla-carousel-docs/src/components/Layout/GlobalStyles/font.ts

@@ -9,11 +9,9 @@ export const FONT_STYLES = css`
     letter-spacing: -0.02rem;
   }
 
-  @supports (font-variation-settings: normal) {
-    html {
-      font-family: ${FONT_FAMILY}, 'system-ui', -apple-system,
-        BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
-        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-    }
+  html {
+    font-family: ${FONT_FAMILY}, 'system-ui', -apple-system, BlinkMacSystemFont,
+      'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
+      'Segoe UI Emoji', 'Segoe UI Symbol';
   }
 `

packages/embla-carousel-docs/src/consts/fontFace.ts

@@ -1,22 +1,19 @@
 import { css } from 'styled-components'
-import { INTER_ROMAN_VARIABLE_BASE_64 } from 'assets/fonts/inter-roman-var-base64'
-// import { INTER_ITALIC_VARIABLE_BASE_64 } from 'assets/fonts/inter-italic-var-base64'
+import interRomanVar from 'assets/fonts/Inter-roman.var.woff2'
+// import interRomanVarItalic from 'assets/fonts/Inter-italic.var.woff2'
 
 export const FONT_FAMILY = `'Inter var'`
 const FONT_WEIGHT_RANGE = '400 900'
 
 export const FONT_FACE_STYLES = css`
-  @supports (font-variation-settings: normal) {
-    @font-face {
-      font-family: ${FONT_FAMILY};
-      font-weight: ${FONT_WEIGHT_RANGE};
-      font-style: normal;
-      font-named-instance: 'Regular';
-      src: url(${INTER_ROMAN_VARIABLE_BASE_64})
-          format('woff2 supports variations(gvar)'),
-        url(${INTER_ROMAN_VARIABLE_BASE_64}) format('woff2-variations'),
-        url(${INTER_ROMAN_VARIABLE_BASE_64}) format('woff2');
-    }
+  @font-face {
+    font-family: ${FONT_FAMILY};
+    font-weight: ${FONT_WEIGHT_RANGE};
+    font-style: normal;
+    font-named-instance: 'Regular';
+    src: url(${interRomanVar}) format('woff2 supports variations(gvar)'),
+      url(${interRomanVar}) format('woff2-variations'),
+      url(${interRomanVar}) format('woff2');
   }
 `
 
@@ -25,8 +22,8 @@ export const FONT_FACE_STYLES = css`
 //   font-weight: ${FONT_WEIGHT_RANGE};
 //   font-style: italic;
 //   font-named-instance: 'Italic';
-//   src: url(${INTER_ITALIC_VARIABLE_BASE_64})
+//   src: url(${interRomanVarItalic})
 //       format('woff2 supports variations(gvar)'),
-//     url(${INTER_ITALIC_VARIABLE_BASE_64}) format('woff2-variations'),
-//     url(${INTER_ITALIC_VARIABLE_BASE_64}) format('woff2');
+//     url(${interRomanVarItalic}) format('woff2-variations'),
+//     url(${interRomanVarItalic}) format('woff2');
 // }

packages/embla-carousel-docs/src/consts/urls.ts

@@ -7,8 +7,7 @@ export const URLS = {
   GITHUB_DISCUSSIONS: `${GITHUB_ROOT}/discussions`,
   GITHUB_DOCUMENTATION: `${GITHUB_ROOT}/blob/master/packages/embla-carousel-docs`,
   GITHUB_DOCUMENTATION_RAW: `https://raw.githubusercontent.com/davidjerleke/embla-carousel/master/packages/embla-carousel-docs`,
-  DONATE_PAYPAL: `https://www.paypal.me/davidjerleke`,
-  DONATE_KO_FI: `https://ko-fi.com/davidjerleke`,
+  GITHUB_SPONSORS_PAGE: 'https://github.com/sponsors/davidjerleke',
   ALGOLIA_DOCSEARCH: `https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js`,
   NPM_PACKAGE: `https://www.npmjs.com/package/embla-carousel`,
   CODESANDBOX_DEFINE: `https://codesandbox.io/api/v1/sandboxes/define`

packages/embla-carousel-docs/src/content/pages/examples/generator.mdx

@@ -5,6 +5,9 @@ order: 1
 date: 2023-06-01
 ---
 
+import { URLS } from 'consts/urls'
+import { LinkButtonPrimaryOutlined } from 'components/Link/LinkButton'
+
 import { CarouselGeneratorFrameworkSettings } from 'components/CarouselGenerator/CarouselGeneratorFrameworkSettings'
 import { CarouselGeneratorBasicSettings } from 'components/CarouselGenerator/CarouselGeneratorBasicSettings'
 import { CarouselGeneratorSlidesSettings } from 'components/CarouselGenerator/CarouselGeneratorSlidesSettings'
@@ -13,7 +16,6 @@ import { CarouselGeneratorNavigationSettings } from 'components/CarouselGenerato
 import { CarouselGeneratorPlugins } from 'components/CarouselGenerator/CarouselGeneratorPlugins'
 
 import { CarouselGeneratorPreview } from 'components/CarouselGenerator/CarouselGeneratorPreview'
-import { CarouselGeneratorSupport } from 'components/CarouselGenerator/CarouselGeneratorSupport'
 
 # Carousel generator
 
@@ -51,6 +53,8 @@ Just follow the instructions and create your own customized carousel setup in no
 
 Did this save you time? Don't say thank you! **Share** it, **star** it or **support** this project:
 
-<CarouselGeneratorSupport />
+<LinkButtonPrimaryOutlined to={URLS.GITHUB_SPONSORS_PAGE}>
+  Sponsor
+</LinkButtonPrimaryOutlined>
 
 <CarouselGeneratorPreview />

packages/embla-carousel-docs/src/utils/declarations.d.ts

@@ -9,6 +9,16 @@ declare module 'assets/images/*.svg' {
   export default content
 }
 
+declare module './src/assets/images/*.svg' {
+  const content: string
+  export default content
+}
+
+declare module 'assets/fonts/*.woff2' {
+  const content: string
+  export default content
+}
+
 declare module '*.jpg' {
   const content: string
   export default content