chore: update metadata and font (#4)

zolplay-cn · Jun 2, 2023 · e627505 · e627505 · vercel · Jun 2, 2023
1 parent 3f371e2
commit e627505
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 10 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,24 +1,54 @@
 import Link from 'next/link'
 import './globals.css'
-import { Inter } from 'next/font/google'
+import { Manrope } from 'next/font/google'
 import { LogoHelmet } from '~/icons'
+import type { Metadata } from 'next'
 
-const inter = Inter({ subsets: ['latin'] })
+const fontSans = Manrope({
+ subsets: ['latin'],
+ weight: ['400', '500', '600', '700', '800'],
+ variable: '--font-sans',
+})
 
+const title = 'Pong'
+const description =
+ 'Pong: The ultimate edge network speed test for your website'
 export const metadata = {
- title: 'Pong',
- description: '',
+ title,
+ description,
  manifest: '/site.webmanifest',
-}
+ robots: {
+ index: true,
+ follow: true,
+ googleBot: {
+ index: true,
+ follow: true,
+ },
+ },
+ openGraph: {
+ title,
+ description,
+ type: 'website',
+ url: 'https://pong.zol.ai',
+ siteName: 'Pong, Powered by Zolplay',
+ },
+ twitter: {
+ site: '@zolplay',
+ creator: '@zolplay',
+ card: 'summary_large_image',
+ title,
+ description,
+ },
+} satisfies Metadata
 
 export default function RootLayout({
  children,
 }: {
  children: React.ReactNode
 }) {
  return (
- <html lang="en">
- <body className={inter.className}>
+ <html lang="en" className={`${fontSans.variable} font-sans antialiased`}>
+ <body className="tracking-tight">
  {children}
  <footer className="w-full pt-4 pb-6 text-center text-sm text-slate-600">
  <div className="inline-flex items-center">

diff --git a/src/app/opengraph-image.png b/src/app/opengraph-image.png
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -120,7 +120,7 @@ export default function Home() {
  {!!task.url && (
  <Card>
  <Text>Regions tested</Text>
- <Metric>
+ <Metric className="font-bold">
  {finishedRegions}/{TOTAL_REGIONS}
  </Metric>
  </Card>
@@ -130,7 +130,7 @@ export default function Home() {
  <Grid numCols={1} numColsMd={2} numColsLg={3} className="gap-3">
  {task.jobs.map((job) => (
  <Card key={job.region} className="mt-5 relative">
- <Text className="text-xs">
+ <Text className="text-xs font-medium">
  {regions[job.region].emoji} {regions[job.region].location}
  </Text>
 
@@ -141,9 +141,12 @@ export default function Home() {
  }))}
  categories={['Latency']}
  index="idx"
+ valueFormatter={(value) => `${value}ms`}
+ showLegend={false}
+ className="mt-3"
  />
  <div className="text-sm font-bold text-gray-900 ml-auto flex flex-col items-end">
- <Metric className="flex items-center">
+ <Metric className="flex items-center font-bold">
  {isNaN(job.avg) ? '/' : job.avg.toFixed(0)}
  <Subtitle className="text-xs text-black/40 ml-2">ms</Subtitle>
  </Metric>

diff --git a/src/app/twitter-image.png b/src/app/twitter-image.png
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,3 +1,5 @@
+const { fontFamily } = require('tailwindcss/defaultTheme')
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
  content: [
@@ -13,6 +15,9 @@ module.exports = {
  'gradient-conic':
  'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
  },
+ fontFamily: {
+ sans: ['var(--font-sans)', ...fontFamily.sans],
+ },
  },
  },
  plugins: [],