@kvihaugen/create-frontend-app 1.1.1 → 1.1.3

package/dist/index.js

@@ -65,7 +65,7 @@ const cwd = process.cwd();
             else
                 fs.rmSync(absolutePath, { recursive: true, force: true });
         }
-        console.log("\t  ✅ Deleted unnecessary files!");
+        console.log("\t  ✅ Deleted unnecessary files!\n");
     }
     {
         console.log("\t- 🔃 Installing dependencies...");
@@ -77,7 +77,7 @@ const cwd = process.cwd();
             "react-i18next"
         ];
         execSync(`npm i ${packageNames.join(" ")}`);
-        console.log("\t  ✅ Installed dependencies!");
+        console.log("\t  ✅ Installed dependencies!\n");
     }
     {
         console.log("\t- 🔃 Installing development dependencies...");

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kvihaugen/create-frontend-app",
-    "version": "1.1.1",
+    "version": "1.1.3",
     "main": "dist/index.js",
     "type": "module",
     "bin": {

package/src/index.ts

@@ -102,7 +102,7 @@ const cwd = process.cwd();
             else fs.rmSync(absolutePath, { recursive: true, force: true });
         }
     
-        console.log("\t  ✅ Deleted unnecessary files!");
+        console.log("\t  ✅ Deleted unnecessary files!\n");
     }
 
 
@@ -119,7 +119,7 @@ const cwd = process.cwd();
 
         execSync(`npm i ${packageNames.join(" ")}`);
 
-        console.log("\t  ✅ Installed dependencies!");
+        console.log("\t  ✅ Installed dependencies!\n");
     }
 
 

package/template/next.config.ts

@@ -0,0 +1,21 @@
+import policy from "@/utils/csp-policy";
+
+import { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+    async headers() {
+        return [
+            {
+                source: "/(.*)",
+                headers: [
+                    {
+                        key: "Content-Security-Policy",
+                        value: policy
+                    }
+                ]
+            }
+        ];
+    }
+};
+
+export default nextConfig;

package/template/postcss.config.mjs

@@ -0,0 +1,18 @@
+const config = {
+    plugins: ["@tailwindcss/postcss"],
+    plugins: {
+        "@tailwindcss/postcss": {},
+        "postcss-preset-mantine": {},
+        "postcss-simple-vars": {
+            variables: {
+                "mantine-breakpoint-xs": "36em",
+                "mantine-breakpoint-sm": "48em",
+                "mantine-breakpoint-md": "62em",
+                "mantine-breakpoint-lg": "75em",
+                "mantine-breakpoint-xl": "88em"
+            }
+        }
+    }
+};
+
+export default config;

package/template/public/.well-known/app.webmanifest

@@ -0,0 +1 @@
+{}

package/template/public/.well-known/robots.txt

@@ -0,0 +1,7 @@
+# https://en.wikipedia.org/wiki/Robots.txt
+# https://www.geeksforgeeks.org/robots-txt-file/
+
+User-agent: *
+Disallow:
+Sitemap:
+Crawl-Delay:

package/template/public/.well-known/security.txt

@@ -0,0 +1,29 @@
+# https://securitytxt.org/
+# Fields marked with * are required
+
+# Contact *
+Contact: mailto:your.email@example.com
+
+# Expires *(max 1)
+Expires: YYYY-MM-DDThh:mm:ss.SSSZ
+
+# Encryption
+Encryption: https://example.com/encryption
+
+# Acknowledgments
+Acknowledgments: https://example.com/acknowledgments
+
+# Preferred languages (max 1)
+Preferred-Languages: en,no
+
+# Canonical
+Canonical: https://example.com/security.txt
+
+# Policy
+Policy: https://example.com/policy
+
+# Hiring
+Hiring: https://example.com/hiring
+
+# CSAF
+CSAF: https://example.com/csaf-provider-metadata.json

package/template/src/app/layout.tsx

@@ -0,0 +1,87 @@
+import { Metadata } from "next";
+import { ColorSchemeScript, mantineHtmlProps } from "@mantine/core";
+
+import ParentProps from "@/types/common/ParentProps";
+import Providers from "@/components/common/Providers";
+
+import "@/css/globals.css";
+
+// https://seostudio.tools/meta-tag-generator
+// https://www.searchenginejournal.com/important-tags-seo/156440/
+
+export const metadata = {
+    title: "Frontend template",
+    description: "My preferred template for frontend projects - tailored to my needs",
+    applicationName: "Frontend template",
+    authors: [{
+        url: "https://lars.kvihaugen.no",
+        name: "Lars Kvihaugen"
+    }],
+    generator: "Next.js",
+    keywords: [
+        "next.js",
+        "next",
+        "react",
+        "frontend",
+        "development",
+        "dev"
+    ],
+    referrer: "origin",
+    creator: "Lars Kvihaugen",
+    publisher: "Lars Kvihaugen",
+    robots: {
+        index: true,
+        follow: true
+    },
+    alternates: {
+        canonical: "https://frontend-template.kvihaugen.no",
+        languages: {
+            en: "https://frontend-template.kvihaugen.no",
+            no: "https://no.frontend-template.kvihaugen.no"
+        }
+    },
+    icons: {
+        icon: [{
+            url: "/icons/icon-128x128.png",
+            sizes: "128x128"
+        }],
+        apple: [{
+            url: "/icons/icon-apple/128x128.png",
+            sizes: "128x128"
+        }]
+    },
+    manifest: "/.well-known/app.webmanifest",
+    openGraph: {
+        type: "website",
+        title: "Frontend template",
+        description: "My preferred template for frontend projects - tailored to my needs",
+        emails: ["lars@kvihaugen.no"],
+        phoneNumbers: ["+00 000 00 000"],
+        siteName: "Frontend template",
+        locale: "en",
+        alternateLocale: ["no"],
+        images: [{
+            url: "/images/hero.png",
+            alt: "The page hero",
+            width: 1920,
+            height: 1080
+        }],
+        url: "https://frontend-template.kvihaugen.no"
+    },
+    metadataBase: new URL("https://frontend-template.kvihaugen.no")
+} satisfies Metadata as Metadata;
+
+const RootLayout = ({ children }: ParentProps) => (
+    <html {...mantineHtmlProps}>
+        <head>
+            <ColorSchemeScript />
+        </head>
+        <body className="antialiased">
+            <Providers>
+                {children}
+            </Providers>
+        </body>
+    </html>
+);
+
+export default RootLayout;

package/template/src/app/page.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { Button } from "@mantine/core";
+import { t } from "i18next";
+
+const Page = () => {
+    return (
+        <Button>
+            {t("common.HelloWorld")}
+        </Button>
+    );
+};
+
+export default Page;

package/template/src/components/common/Providers.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import ParentProps from "@/types/common/ParentProps";
+
+import { createTheme, MantineProvider } from "@mantine/core";
+
+import "@/utils/i18n";
+
+const theme = createTheme({});
+
+const Providers = ({ children }: ParentProps) => (
+    <MantineProvider theme={theme}>
+        {children}
+    </MantineProvider>
+);
+
+export default Providers;

package/template/src/css/globals.css

@@ -0,0 +1,4 @@
+@layer theme, base, components, mantine, utilities;
+
+@import "tailwindcss";
+@import "@mantine/core/styles.layer.css";

package/template/src/types/common/ParentProps.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+
+type ParentProps<T = ReactNode> = {
+    children?: T;
+};
+
+export default ParentProps;

package/template/src/utils/csp-policy.ts

@@ -0,0 +1,15 @@
+// https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy#fetch_directives
+// https://www.validbot.com/tools/csp-wizard.php
+
+const policy = `
+
+default-src 'self';
+script-src 'self' 'unsafe-inline' 'unsafe-eval';
+connect-src 'self';
+img-src 'self' data: blob:;
+style-src 'self' 'unsafe-inline';
+frame-src;
+
+`.replaceAll("\n", " ").trim();
+
+export default policy;

package/template/src/utils/hooks/useColorScheme.ts

@@ -0,0 +1,30 @@
+import { useMantineColorScheme } from "@mantine/core";
+import { useEffect, useMemo, useState } from "react";
+
+const useColorScheme = () => {
+    const [isBrowserColorSchemeDark, setIsBrowserColorSchemeDark] = useState<boolean>(false);
+
+    const { colorScheme } = useMantineColorScheme();
+
+    useEffect(() => {
+        const handleSetAccordingColorScheme = () => setIsBrowserColorSchemeDark(window.matchMedia("(prefers-color-scheme: dark)").matches);
+
+        handleSetAccordingColorScheme();
+
+        window.addEventListener("change", handleSetAccordingColorScheme);
+
+        return () => window.removeEventListener("change", handleSetAccordingColorScheme);
+    }, []);
+
+    const isColorSchemeDark = useMemo(() => (
+        (colorScheme === "auto" && isBrowserColorSchemeDark) ||
+        colorScheme === "dark"
+    ), [isBrowserColorSchemeDark, colorScheme]);
+
+    return {
+        isDark: isColorSchemeDark,
+        isLight: !isColorSchemeDark
+    };
+};
+
+export default useColorScheme;

package/template/src/utils/hooks/usePrimaryColorShade.ts

@@ -0,0 +1,17 @@
+import { useMantineTheme } from "@mantine/core";
+
+import useColorScheme from "./useColorScheme";
+
+const usePrimaryColorShade = () => {
+    const { primaryColor, primaryShade, colors } = useMantineTheme();
+    const { isDark: isColorSchemeDark } = useColorScheme();
+
+    const shadeIndexer =
+        typeof primaryShade === "object"
+            ? primaryShade[isColorSchemeDark ? "dark" : "light"]
+            : primaryShade;
+
+    return colors[primaryColor][shadeIndexer];
+};
+
+export default usePrimaryColorShade;

package/template/src/utils/i18n/index.ts

@@ -0,0 +1,15 @@
+import i18next from "i18next";
+import en from "./resources/en.json";
+
+import { initReactI18next } from "react-i18next";
+
+i18next
+    .use(initReactI18next)
+    .init({
+        resources: { en },
+        lng: "en",
+        fallbackLng: "en",
+        interpolation: {
+            escapeValue: false
+        }
+    });

package/template/src/utils/i18n/resources/en.json

@@ -0,0 +1,7 @@
+{
+    "translation": {
+        "common": {
+            "HelloWorld": "Hello world!"
+        }
+    }
+}