@kvihaugen/create-frontend-app 1.1.2 → 1.1.3

package/package.json

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

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!"
+        }
+    }
+}