feat: optimizations and clean up (#431)

* Add image optimization and image fallback
* Add fonts optimization
* Replace images with code with actual code blocks
* Fix mpz project banner not loading #432
* Fix Replace text loading with skeletons #428
* Remove unused files

Author: kalidiagne

.gitignore

@@ -46,3 +46,7 @@ yarn-error.log*
 !.yarn/sdks
 !.yarn/versions
 .pnp.*
+
+# TypeScript
+*.tsbuildinfo
+tsconfig.tsbuildinfo

app/[lang]/blog/[slug]/page.tsx

@@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button"
 import { Label } from "@/components/ui/label"
 import { Markdown } from "@/components/ui/markdown"
 import { getArticles, getArticleById } from "@/lib/blog"
-import { cn } from "@/lib/utils"
+import { cn, getBackgroundImage } from "@/lib/utils"
 import { Metadata } from "next"
 import Link from "next/link"
 import { notFound } from "next/navigation"
@@ -57,7 +57,7 @@ export default function BlogArticle({ params }: any) {
     notFound()
   }
 
-  const imageUrl = (post?.image ?? "")?.length > 0 ? post?.image : undefined
+  const imageUrl = getBackgroundImage(post?.image)
 
   const imageAsCover = true
 
@@ -77,7 +77,10 @@ export default function BlogArticle({ params }: any) {
               : "bg-cover-gradient"
           )}
           style={{
-            backgroundImage: imageAsCover ? `url(${imageUrl})` : undefined,
+            backgroundImage:
+              imageAsCover && imageUrl?.length > 0
+                ? `url(${imageUrl})`
+                : undefined,
           }}
         />
         <div className="flex items-start justify-center z-0 bg-cover border-tuatara-300 border-b w-full">

app/[lang]/blog/page.tsx

@@ -9,6 +9,7 @@ import {
   dehydrate,
 } from "@tanstack/react-query"
 import ArticlesList from "@/components/blog/ArticlesList"
+import { Skeleton } from "@/components/skeleton"
 
 export const dynamic = "force-dynamic"
 
@@ -24,6 +25,40 @@ interface BlogPageProps {
   searchParams?: { [key: string]: string | string[] | undefined }
 }
 
+const LoadingSkeleton = () => {
+  return (
+    <>
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-6 items-stretch">
+        <Skeleton.Card className="h-full" />
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-6 lg:col-span-2 h-full">
+          <Skeleton.Card size="md" className="max-h-[200px]" />
+          <Skeleton.Card size="md" className="max-h-[200px]" />
+          <Skeleton.Card size="md" className="max-h-[200px]" />
+          <Skeleton.Card size="md" className="max-h-[200px]" />
+        </div>
+      </div>
+      <div className="flex flex-col gap-5 lg:gap-14">
+        <div className="grid grid-cols-[80px_1fr] lg:grid-cols-[120px_1fr] items-center gap-4 lg:gap-10">
+          <Skeleton.Circle size="full" />
+          <div className="flex flex-col gap-2">
+            <Skeleton.Line size="lg" />
+            <Skeleton.Line size="md" />
+            <Skeleton.Line size="xs" />
+          </div>
+        </div>
+        <div className="grid grid-cols-[80px_1fr] lg:grid-cols-[120px_1fr] items-center gap-4 lg:gap-10">
+          <Skeleton.Circle size="full" />
+          <div className="flex flex-col gap-2">
+            <Skeleton.Line size="lg" />
+            <Skeleton.Line size="md" />
+            <Skeleton.Line size="xs" />
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
 const BlogPage = async ({ params: { lang }, searchParams }: BlogPageProps) => {
   const { t } = await useTranslation(lang, "blog-page")
   const tag = searchParams?.tag as string | undefined
@@ -71,13 +106,13 @@ const BlogPage = async ({ params: { lang }, searchParams }: BlogPageProps) => {
       </div>
 
       <AppContent className="flex flex-col gap-10 lg:gap-16 pb-10 lg:py-10 lg:max-w-[978px]">
-        <Suspense
-          fallback={
-            <div className="flex justify-center py-10">Loading articles...</div>
-          }
-        >
+        <Suspense fallback={<LoadingSkeleton />}>
           <HydrationBoundary state={dehydrate(queryClient)}>
-            <ArticlesList lang={lang} tag={tag} />
+            <ArticlesList
+              lang={lang}
+              tag={tag}
+              fallback={<LoadingSkeleton />}
+            />
           </HydrationBoundary>
         </Suspense>
       </AppContent>

app/[lang]/devcon-7/sections/Devcon7Slider.tsx

@@ -70,16 +70,16 @@ export const Devcon7Slider = () => {
   return (
     <AnySlider {...settings}>
       {images.map((image, index) => (
-        <div
-          key={index}
-          className="relative h-[320px] w-full bg-cover bg-center overflow-hidden"
-          style={{ backgroundImage: `url(${image})` }}
-        >
+        <div key={index} className="relative h-[320px] w-full overflow-hidden">
           <Image
             src={image}
             alt={`Devcon 7 Overview ${index + 1}`}
             fill
-            className="object-cover w-full"
+            className="object-cover"
+            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+            priority={index < 2}
+            quality={85}
+            loading={index < 2 ? "eager" : "lazy"}
           />
         </div>
       ))}

app/layout.tsx

@@ -11,18 +11,30 @@ const inter = Inter({
   subsets: ["latin"],
   variable: "--font-inter",
   weight: ["400", "500", "600", "700"],
+  display: "swap",
+  preload: true,
+  fallback: ["system-ui", "sans-serif"],
+  adjustFontFallback: true,
 })
 
 const display = Space_Grotesk({
   subsets: ["latin"],
   variable: "--font-display",
   weight: ["400", "500", "600", "700"],
+  display: "swap",
+  preload: true,
+  fallback: ["system-ui", "sans-serif"],
+  adjustFontFallback: true,
 })
 
 const sans = DM_Sans({
   subsets: ["latin"],
   variable: "--font-sans",
   weight: ["400", "500", "600", "700"],
+  display: "swap",
+  preload: true,
+  fallback: ["system-ui", "sans-serif"],
+  adjustFontFallback: true,
 })
 
 const fonts = [inter, display, sans]
@@ -31,25 +43,46 @@ export async function generateStaticParams() {
   return languages.map((language) => ({ language }))
 }
 
-export const viewport: Viewport = {
-  width: "device-width",
-  initialScale: 1,
-  maximumScale: 1,
-  userScalable: false,
-}
-
 export const metadata: Metadata = {
-  metadataBase: new URL("https://pse.dev"),
   title: {
     default: siteConfig.name,
-    template: `%s - ${siteConfig.name}`,
+    template: `%s | ${siteConfig.name}`,
   },
   description: siteConfig.description,
-  icons: {
-    icon: "/favicon.svg",
-    shortcut: "/favicon.svg",
-    apple: "/apple-touch-icon.png",
-  },
+  keywords: [
+    "Privacy & Scaling Explorations",
+    "Zero Knowledge Proofs",
+    "ZK Proofs",
+    "Cryptography",
+    "Ethereum",
+    "Blockchain",
+    "Privacy",
+    "Scaling",
+    "Open Source",
+    "Research",
+    "Development",
+    "zkEVM",
+    "Rollups",
+    "Account Abstraction",
+    "Fully Homomorphic Encryption",
+    "Multi-Party Computation",
+    "Programmable Cryptography",
+    "Ethereum Foundation",
+    "Cryptographic Research",
+    "Privacy Tools",
+    "Scaling Solutions",
+    "Cryptographic Primitives",
+    "Zero Knowledge",
+    "ZK Technology",
+    "Cryptographic Infrastructure",
+  ],
+  authors: [
+    {
+      name: "Privacy + Scaling Explorations",
+      url: "https://pse.dev",
+    },
+  ],
+  creator: "Privacy + Scaling Explorations",
   openGraph: {
     images: [
       {
@@ -71,16 +104,24 @@ export const metadata: Metadata = {
   },
 }
 
+export const viewport: Viewport = {
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "white" },
+    { media: "(prefers-color-scheme: dark)", color: "black" },
+  ],
+}
+
 interface RootLayoutProps {
   children: React.ReactNode
-  params?: any
 }
 
 export default function RootLayout({ children }: RootLayoutProps) {
   return (
     <QueryClientProviderLayout>
       <html lang="en" className={fonts.map((font) => font.className).join(" ")}>
-        <body>{children}</body>
+        <body className="min-h-screen bg-background antialiased">
+          {children}
+        </body>
       </html>
     </QueryClientProviderLayout>
   )

app/not-found.tsx

@@ -4,6 +4,8 @@ import "@/styles/globals.css"
 import React from "react"
 import Image from "next/image"
 import Link from "next/link"
+import { Metadata } from "next"
+import { AppContent } from "@/components/ui/app-content"
 
 import { LangProps } from "@/types/common"
 import { fontDisplay, fontSans } from "@/lib/fonts"
@@ -13,6 +15,10 @@ import { TailwindIndicator } from "@/components/tailwind-indicator"
 
 import { useTranslation } from "./i18n/client"
 
+export const metadata: Metadata = {
+  title: "404: Page Not Found",
+}
+
 export default function NotFound({ lang }: LangProps["params"]) {
   const { t } = useTranslation(lang, "common")
 

articles/announcing-the-pse-grants-program.md

@@ -63,7 +63,30 @@ BLS Wallet bundles can contain both simple transactions (“send money from acco
 
 An operation must contain the nonce of the smart contract wallet, a BLS signature, and the action(s) to be executed including the address of the smart contract to be called and the function to call.
 
-![](https://miro.medium.com/max/1400/0*cFBuQg8ulyjy6Q49)
+```js
+const bundle = wallet.sign({
+  nonce: await wallet.Nonce(),
+  // All actions in this operation are atomic
+  actions: [
+    {
+      ethValue: 0,
+      contractAddress: erc20Contract.address,
+      encodedFunction: erc20Contract.address.interface.encodeFunctionData(
+        "approve",
+        [dexContract.address, amount]
+      ),
+    },
+    {
+      ethValue: 0,
+      contractAddress: dexContract.address,
+      encodedFunction: dexContract.address.interface.encodeFunctionData(
+        "swap",
+        [erc20Contract.address, amount, otherERC20Contract.address]
+      ),
+    },
+  ],
+})
+```
 
 Example of a single operation bundle
 

articles/bls-wallet-bundling-up-data-privacy-scaling-explorations.md

@@ -46,7 +46,7 @@ While all of these differences (except for the first one) are introduced to redu
 
 In our benchmarking scenario, the obfuscator sets a [public circuit](https://github.com/MachinaIO/diamond-io/blob/e7e87dd8422db0f8ccf634fdb3c658c2c1eef82e/dio/src/circuit.rs) $C$ with variable arithmetic depth (addition and multiplication layers) and variable input size. As part of the obfuscation algorithm, the obfuscator samples a binary vector hardcoded key $k$ and embeds it inside the obfuscated circuit. The obfuscated circuit is then published such that any evaluator can run it over their dynamically chosen input $x$ to obtain $C(k, x)$ without any interaction with the obfuscator and without learning $k$ (beyond what could be inferred from $C(k, x)$).
 
-```
+```js
 // public circuit C
 let mut public_circuit = PolyCircuit::new();