Fix for CDN images - Readability fixes (#132)

Co-authored-by: Francis Thibault <[email protected]>

apps/docs/app/layout.css

@@ -67,5 +67,14 @@ article ul {
 article p a,
 article li a {
     color: var(--hd-color-accent-text);
-    text-decoration: underline;
+}
+
+article code {
+    background-color: var(--hd-color-neutral-surface-weak);
+    border-radius: 0.25rem;
+    color: var(--hd-color-accent-text);
+    font-family: var(--hd-mono-font-family);
+    font-size: 0.8125rem;
+    padding-block: 0.125rem;
+    padding-inline: 0.25rem;
 }

apps/docs/app/page.tsx

@@ -3,7 +3,7 @@ export default function Home() {
         <div className="hd-wrapper hd-flex">
             <main className="hd-home">
                 <h1 className="hd-display">Welcome to Workleap's <strong className="hd-text--strong">Hopper</strong> Design System.</h1>
-                <p className="hd-display__subtitle">The documentation is currently in <strong className="hd-text--strong">beta</strong> and only the tokens are available.</p>
+                <p className="hd-display__subtitle">The documentation is currently in <strong className="hd-text--strong">beta</strong>.</p>
             </main>
         </div>
     );

apps/docs/content/icons/getting-started/introduction.mdx

@@ -12,4 +12,5 @@ These icons are published into a separate package that is not part of `@hopper-u
 
 Hopper provides multiple ways to use icons in your project:
 - [as React components](/icons/react-icons/installation)
-- [as static svg files](/icons/svg/installation)
+- [as static SVG files](/icons/svg/installation)
+

apps/docs/content/tokens/getting-started/introduction.mdx

@@ -18,7 +18,7 @@ A design token can store any of the following elements:
 Hopper aims to provide a three tier token system, where each tier has their specific purpose.
 
 <Card>
-    <Image src="https://assets.workleap.com/hopper/webdoc/token-details.png" width="654" height="45" alt="Token tiers diagram" />
+    <Image src="https://cdn.platform.workleap.com/hopper/webdoc/token-details.png" width="654" height="45" alt="Token tiers diagram" />
 </Card>
 
 ### Core tokens

apps/docs/next.config.js

@@ -7,12 +7,13 @@ const nextConfig = {
     pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"],
     transpilePackages: ["@hopper-ui"],
     images: {
+        unoptimized: true,
         remotePatterns: [
             {
                 protocol: "https",
-                hostname: "assets.workleap.com",
+                hostname: "cdn.platform.workleap.com",
                 port: "",
-                pathname: "/hopper/**"
+                pathname: "/hopper/**/*"
             }
         ]
     },