update

latentcat · Mar 12, 2024 · 4b375c4 · 4b375c4
1 parent ad8e45f
commit 4b375c4
Show file tree

Hide file tree

Showing 16 changed files with 118 additions and 43 deletions.
diff --git a/messages/en.json b/messages/en.json
@@ -3,6 +3,9 @@
     "hero": {
       "title": "QRBTF",
       "subtitle": "Parametric QR code generator."
+    },
+    "params": {
+      "generate": "Generate"
     }
   }
 }
diff --git a/package.json b/package.json
@@ -41,6 +41,7 @@
     "clsx": "^2.1.0",
     "cmdk": "^1.0.0",
     "date-fns": "^3.4.0",
+    "deepmerge": "^4.3.1",
     "embla-carousel-react": "^8.0.0",
     "input-otp": "^1.1.0",
     "jotai": "^2.7.0",

diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,19 @@
+{
+  "name": "QRBTF",
+  "short_name": "QRBTF",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#000000",
+  "background_color": "#000000",
+  "display": "standalone"
+}
diff --git a/src/app/[locale]/SectionGenerate.tsx b/src/app/[locale]/SectionGenerate.tsx
diff --git a/src/app/[locale]/SectionParams.tsx b/src/app/[locale]/SectionParams.tsx
@@ -1,25 +1,46 @@
 import {AspectRatio} from "@/components/ui/aspect-ratio";
 import {Container} from "@/components/Containers";
 import {Slider} from "@/components/ui/slider";
+import {Button} from "@/components/ui/button";
+import {useTranslations} from "next-intl";
 
 
 export function SectionParams() {
+  const t = useTranslations('index.params');
+
   return (
     <div className="">
       <Container>
-        <h2 className="mt-9 mb-4 text-2xl font-bold">A1</h2>
-        <div className="flex items-center w-full justify-between">
-          <div>Parameter name</div>
-          <div
-            className="w-48"
-          >
-            <Slider
-              defaultValue={[50]}
-              max={100}
-              step={1}
-              className="w-full"
-            />
+        <div className="mt-9 flex flex-col _md:flex-row gap-9">
+
+          <div className="grow">
+            <h2 className="mb-4 text-2xl font-bold">A1</h2>
+            <div className="flex items-center w-full justify-between">
+              <div>Parameter name</div>
+              <div
+                className="w-48"
+              >
+                <Slider
+                  defaultValue={[50]}
+                  max={100}
+                  step={1}
+                  className="w-full"
+                />
+              </div>
+            </div>
           </div>
+
+          <div className="shrink-0 w-full sm:w-[396px] _md:w-72 lg:w-[396px]">
+            <Button className="w-full">
+              {t('generate')}
+            </Button>
+            <div className="mt-3">
+              <div className="border rounded-xl bg-accent/30 w-full">
+                <AspectRatio ratio={1}/>
+              </div>
+            </div>
+          </div>
+
         </div>
       </Container>
     </div>

diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
@@ -1,15 +1,17 @@
-import type { Metadata } from "next";
+import type {Metadata, Viewport} from "next";
 import { Inter } from "next/font/google";
 import "../globals.css";
 import {Providers} from "@/app/providers";
 import {Footer} from "@/components/Footer";
+import {LayoutHead} from "@/lib/layout_data";
 
 const inter = Inter({ subsets: ["latin"] });
 
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
+import {layoutMetadata, layoutViewport} from "@/lib/layout_data";
+
+export const metadata: Metadata = layoutMetadata
+
+export const viewport: Viewport = layoutViewport
 
 export default function RootLayout({
                                      children,
@@ -19,7 +21,8 @@ export default function RootLayout({
   params: {locale: string};
 }>) {
   return (
-    <html lang={locale}>
+    <html lang={locale} className="antialiased" suppressHydrationWarning>
+    <LayoutHead />
     <body className={inter.className}>
     <Providers>
       {children}

diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx
@@ -3,7 +3,6 @@ import {useTranslations} from 'next-intl';
 import {SectionHero} from "@/app/[locale]/SectionHero";
 import {SectionStyles} from "@/app/[locale]/SectionStyles";
 import {SectionParams} from "@/app/[locale]/SectionParams";
-import {SectionGenerate} from "@/app/[locale]/SectionGenerate";
 
 export default function Home() {
   const t = useTranslations('index');
@@ -13,7 +12,6 @@ export default function Home() {
       <SectionHero />
       <SectionStyles />
       <SectionParams />
-      <SectionGenerate />
     </div>
   );
 }
diff --git a/src/i18n.ts b/src/i18n.ts
@@ -3,12 +3,17 @@ import {getRequestConfig} from 'next-intl/server';
 
 // Can be imported from a shared config
 const locales = ['en', 'zh'];
+import deepmerge from 'deepmerge';
 
 export default getRequestConfig(async ({locale}) => {
   // Validate that the incoming `locale` parameter is valid
   if (!locales.includes(locale as any)) notFound();
 
+  const userMessages = (await import(`../messages/${locale}.json`)).default;
+  const defaultMessages = (await import(`../messages/en.json`)).default;
+  const messages = deepmerge(defaultMessages, userMessages);
+
   return {
-    messages: (await import(`../messages/${locale}.json`)).default
+    messages: messages
   };
 });
diff --git a/src/lib/layout_data.tsx b/src/lib/layout_data.tsx
@@ -0,0 +1,42 @@
+import {type Metadata, Viewport} from "next";
+
+export const layoutMetadata: Metadata = {
+  metadataBase: new URL('https://troyni.com'),
+  title: {
+    template: '%s - QRBTF',
+    default:
+      'QRBTF',
+  },
+  description:
+    'QRBTF',
+  // openGraph: {
+  //   title: 'Troy Ni',
+  //   images: encodeURI(`/og?title=${'Troy Ni'}`)
+  // },
+}
+
+export const layoutViewport: Viewport = {
+  themeColor: 'black',
+  width: 'device-width',
+  height: 'device-height',
+  initialScale: 1.0,
+  maximumScale: 1.0,
+  userScalable: false,
+  viewportFit: "cover",
+}
+
+export function LayoutHead() {
+  return (
+    <head>
+      <link rel="manifest" href="/manifest.json" />
+      <link
+        rel="apple-touch-icon"
+        href="/apple-touch-icon?<generated>"
+        type="image/<generated>"
+        sizes="<generated>"
+      />
+      <meta content="yes" name="apple-mobile-web-app-capable" />
+      <meta name="theme-color" content="#000000" />
+    </head>
+  )
+}
diff --git a/yarn.lock b/yarn.lock
@@ -1470,6 +1470,11 @@ deep-is@^0.1.3:
   resolved "https://registry.npmmirror.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
+deepmerge@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.npmmirror.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
+  integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
+
 define-data-property@^1.0.1, define-data-property@^1.1.4:
   version "1.1.4"
   resolved "https://registry.npmmirror.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"