add nextjs app: yoga-app

2025-01-06 22:13:54 +01:00
parent 72681846d8
commit bed409f77c
283 changed files with 11753 additions and 331 deletions
--- a/yoga-app/src/app/layout.tsx
+++ b/yoga-app/src/app/layout.tsx
@@ -1,32 +1,111 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
+import type {Metadata, Viewport} from "next";
+import "./globals.scss";
+import {IconDescriptor} from "next/dist/lib/metadata/types/metadata-types";
+import HeaderComponent from "@/components/header.component";

-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});

-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
+const generateIconDescriptor = (rel: string, sizes: string, url: string): IconDescriptor => {
+    // <link rel="apple-touch-icon" sizes="76x76"*/}
+    {/*          href="./assets/images/favicon/apple-icon-76x76.png"/>*/}
+    return {
+        rel, sizes, url
+    };
+}
+
+
+const generateAppleIcons = ( ): IconDescriptor[] => {
+    const allSizes: string[] = [
+        "57x57",
+        "60x60",
+        "72x72",
+        "76x76",
+        "114x114",
+        "120x120",
+        "144x144",
+        "152x152",
+        "180x180",
+    ];
+    const linkBase = "./assets/images/favicon/apple-icon-";
+    const rel ="apple-touch-icon";
+    // <link rel="apple-touch-icon" sizes="76x76"*/}
+    {/*          href="./assets/images/favicon/apple-icon-76x76.png"/>*/}
+    return  allSizes.map((sizes) => {
+        return  generateIconDescriptor(rel,sizes,linkBase+sizes+".png");
+    }) ;
+}
+
+const generateAndroidIcons = (): IconDescriptor[] =>{
+    const allSizes = [
+        "192x192",
+    ];
+
+    const linkBase = "./assets/images/favicon/android-icon-";
+    const rel ="icon";
+    {/*    <link rel="icon" type="image/png" sizes="192x192"*/}
+    {/*          href="./assets/images/favicon/android-icon-192x192.png"/>*/}
+    return  allSizes.map((sizes) => {
+        return  generateIconDescriptor(rel,sizes,linkBase+sizes+".png");
+    }) ;
+}
+
+const generateFavIcons = (): IconDescriptor[] =>{
+    const allSizes = [
+        "32x32",
+        "96x96",
+        "16x16",
+    ];
+
+    const linkBase = "./assets/images/favicon/favicon-";
+    const rel ="icon";
+    {/*    <link rel="icon" type="image/png" sizes="16x16"*/}
+    {/*          href="./assets/images/favicon/favicon-16x16.png"/>*/}
+    return  allSizes.map((sizes) => {
+        return  generateIconDescriptor(rel,sizes,linkBase+sizes+".png");
+    }) ;
+}
+
+
+const generateIcons = ( ): IconDescriptor[] => {
+  return [
+       ...generateAppleIcons(),
+      ...generateAndroidIcons(),
+      ...generateFavIcons()
+   ];
+}
+

 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+    title: "Yoga App",
+    description: "Yoga App",
+    icons: generateIcons(),
+    manifest: "./assets/images/favicon/manifest.json",
+    other: {
+        "msapplication-TileColor": "#ffffff",
+        "msapplication-TileImage": "/ms-icon-144x144.png"
+    }
+};
+
+{/*<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>*/}
+
+export const viewport: Viewport = {
+    initialScale: 1,
+    maximumScale: 1,
+    userScalable: false,
+    width: "device-width",
+    themeColor: "#ffffff",
 };

 export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
+                                       children,
+                                   }: Readonly<{
+    children: React.ReactNode;
 }>) {
-  return (
-    <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable}`}>
-        {children}
-      </body>
-    </html>
-  );
+    return (
+        <html lang="en">
+        <body>
+            <HeaderComponent/>
+            {children}
+        </body>
+        </html>
+);
 }