@kvihaugen/create-frontend-app 1.1.5 → 1.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kvihaugen/create-frontend-app",
-    "version": "1.1.5",
+    "version": "1.1.7",
     "main": "dist/index.js",
     "type": "module",
     "bin": {
@@ -27,5 +27,8 @@
     "repository": {
         "url": "https://github.com/LarsSK06/create-frontend-app",
         "type": "git"
-    }
+    },
+    "files": [
+        "dist"
+    ]
 }

package/.gitattributes

@@ -1,2 +0,0 @@
-# Auto detect text files and perform LF normalization
-* text=auto

package/.github/workflows/build-and-publish.yaml

@@ -1,35 +0,0 @@
-name: Build and publish
-
-on:
-  push:
-    branches:
-      - main
-
-permissions:
-  id-token: write
-  contents: read
-
-jobs:
-  build-and-publish:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Install Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-          registry-url: 'https://registry.npmjs.org'
-
-      - name: Update NPM
-        run: npm install -g npm@latest
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Build project
-        run: npm run build --if-present
-
-      - name: Publish artifact
-        run: npm publish

package/src/index.ts

@@ -1,135 +0,0 @@
-#!/usr/bin/env node
-
-import os from "node:os";
-import fs from "node:fs";
-import degit from "degit";
-import path from "node:path";
-
-import { execSync } from "node:child_process";
-
-const cwd = process.cwd();
-
-(async () => {
-
-    console.log("🚀 Creating frontend app...\n");
-
-
-    const tempFolderPath = path.join(os.tmpdir(), `${Date.now()}-create-frontend-app`);
-
-
-    {
-        console.log("\t- 🔃 Generating Next.js app...");
-    
-        execSync("npx create-next-app . --yes --empty --skip-install");
-    
-        console.log("\t  ✅ Generated Next.js app!\n");
-    }
-
-
-    {
-        console.log("\t- 🔃 Cloning files from template...");
-
-        const emitter = degit("LarsSK06/create-frontend-app/template");
-    
-        await emitter.clone(tempFolderPath);
-    
-        for (const objName of fs.readdirSync(tempFolderPath)) {
-            const absoluteCwdPath = path.join(cwd, objName);
-            const absoluteTempFolderPath = path.join(tempFolderPath, objName);
-            
-            if (fs.existsSync(absoluteCwdPath)) {
-                const stat = fs.statSync(absoluteCwdPath);
-    
-                if (stat.isFile()) fs.unlinkSync(absoluteCwdPath);
-                else fs.rmSync(absoluteCwdPath, { recursive: true, force: true });
-            }
-    
-            fs.cpSync(
-                absoluteTempFolderPath,
-                absoluteCwdPath,
-                { recursive: true }
-            );
-        }
-    
-        console.log("\t  ✅ Cloned files from template!\n");
-    }
-
-
-    {
-        console.log("\t- 🔃 Formatting files...");
-    
-        for (const fileName of [
-            "package.json",
-            "package-lock.json",
-            "tsconfig.json"
-        ]) {
-            const absolutePath = path.join(cwd, fileName);
-    
-            if (!fs.existsSync(absolutePath))
-                continue;
-    
-            const fileContent = fs.readFileSync(absolutePath).toString();
-    
-            fs.writeFileSync(
-                absolutePath,
-                JSON.stringify(JSON.parse(fileContent), null, 4)
-            );
-        }
-    
-        console.log("\t  ✅ Formatted files!\n");
-    }
-
-
-    {
-        console.log("\t- 🔃 Deleting unnecessary files...");
-    
-        for (const objName of [
-            "README.md"
-        ]) {
-            const absolutePath = path.join(cwd, objName);
-    
-            if (!fs.existsSync(absolutePath))
-                continue;
-    
-            const stat = fs.statSync(absolutePath);
-    
-            if (stat.isFile()) fs.unlinkSync(absolutePath);
-            else fs.rmSync(absolutePath, { recursive: true, force: true });
-        }
-    
-        console.log("\t  ✅ Deleted unnecessary files!\n");
-    }
-
-
-    {
-        console.log("\t- 🔃 Installing dependencies...");
-
-        const packageNames = [
-            "@mantine/core",
-            "@mantine/hooks",
-            "@tabler/icons-react",
-            "i18next",
-            "react-i18next"
-        ];
-
-        execSync(`npm i ${packageNames.join(" ")}`);
-
-        console.log("\t  ✅ Installed dependencies!\n");
-    }
-
-
-    {
-        console.log("\t- 🔃 Installing development dependencies...");
-
-        const packageNames = [
-            "postcss",
-            "postcss-preset-mantine",
-            "postcss-simple-vars"
-        ];
-
-        execSync(`npm i --save-dev ${packageNames.join(" ")}`);
-
-        console.log("\t  ✅ Installed development dependencies!");
-    }
-
-})();

package/template/next.config.ts

@@ -1,21 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

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

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

@@ -1,7 +0,0 @@
-# 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

@@ -1,29 +0,0 @@
-# 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

@@ -1,87 +0,0 @@
-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

@@ -1,14 +0,0 @@
-"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

@@ -1,17 +0,0 @@
-"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

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

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

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

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

@@ -1,15 +0,0 @@
-// 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

@@ -1,30 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

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

package/tsconfig.json

@@ -1,29 +0,0 @@
-{
-    "compilerOptions": {
-        "rootDir": "./src",
-        "outDir": "./dist",
-        "module": "nodenext",
-        "target": "esnext",
-        "types": ["node"],
-        "sourceMap": true,
-        "declaration": true,
-        "declarationMap": true,
-        "noUncheckedIndexedAccess": true,
-        "exactOptionalPropertyTypes": true,
-        // "noImplicitReturns": true,
-        // "noImplicitOverride": true,
-        // "noUnusedLocals": true,
-        // "noUnusedParameters": true,
-        // "noFallthroughCasesInSwitch": true,
-        // "noPropertyAccessFromIndexSignature": true,
-        "strict": true,
-        "jsx": "react-jsx",
-        "verbatimModuleSyntax": true,
-        "isolatedModules": true,
-        "noUncheckedSideEffectImports": true,
-        "moduleDetection": "force",
-        "skipLibCheck": true
-    },
-    "include": ["src/**/*"],
-    "exclude": ["node_modules", "dist"]
-}