refactor: clean up

madebyarthouse · Nov 16, 2024 · ec4638a · ec4638a
1 parent 479f489
commit ec4638a
Show file tree

Hide file tree

Showing 10 changed files with 110 additions and 58 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -35,9 +35,14 @@ module.exports = {
         "plugin:react-hooks/recommended",
         "plugin:jsx-a11y/recommended",
       ],
+      rules: {
+        "react/react-in-jsx-scope": "off",
+        "react/jsx-uses-react": "off",
+      },
       settings: {
         react: {
           version: "detect",
+          runtime: "automatic",
         },
         formComponents: ["Form"],
         linkComponents: [

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -2,6 +2,7 @@
   "recommendations": [
     "esbenp.prettier-vscode",
     "dbaeumer.vscode-eslint",
-    "eamodio.gitlens"
+    "eamodio.gitlens",
+    "bradlc.vscode-tailwindcss"
   ]
 }
diff --git a/README.md b/README.md
@@ -1,6 +1,7 @@
-# Arthouse full-stack starter-kit
+# Arthouse full-stack Starter Kit
 
-Base starter-kit for full-stack Typescript+React web dev projects. Has sensible defaults, clears out boilerplate and adds minimal utilities on top.
+![Arthouse Starter Kit screenshot](./docs/screenshot.png)
+Starter Kit for full-stack Typescript+React web dev projects. Has sensible defaults, clears out boilerplate and adds minimal utilities on top.
 
 Includes a `.cursorrules` file to get you started with Cursor – adapt it to your needs/style.
 

diff --git a/app/config.ts b/app/config.ts
@@ -1,6 +1,34 @@
 const productionDomain = "change me";
 
-export const config = {
+type Config = {
+  productionDomain: string;
+  productionUrl: string;
+  themeColor: string;
+  manifest: Manifest;
+};
+
+type Manifest = {
+  name: string;
+  shortName: string;
+  description: string;
+  backgroundColor: string;
+  display: "standalone" | "fullscreen" | "minimal-ui" | "browser";
+  themeColor: string;
+  orientation:
+    | "any"
+    | "natural"
+    | "landscape"
+    | "portrait"
+    | "portrait-primary"
+    | "portrait-secondary";
+  icons: {
+    src: string;
+    sizes: string;
+    type: string;
+  }[];
+};
+
+export const config: Config = {
   productionDomain,
   productionUrl: `https://${productionDomain}`,
   themeColor: "#000",
@@ -13,22 +41,22 @@ export const config = {
     display: "standalone",
     orientation: "portrait",
     icons: [
-      {
-        src: "/icons/icon-192x192.png",
-        sizes: "192x192",
-        type: "image/png",
-      },
-      {
-        src: "/icons/icon-512x512.png",
-        sizes: "512x512",
-        type: "image/png",
-      },
-      {
-        src: "/icons/icon-512x512.png",
-        sizes: "512x512",
-        type: "image/png",
-        purpose: "maskable",
-      },
+      // {
+      //   src: "/icons/icon-192x192.png",
+      //   sizes: "192x192",
+      //   type: "image/png",
+      // },
+      // {
+      //   src: "/icons/icon-512x512.png",
+      //   sizes: "512x512",
+      //   type: "image/png",
+      // },
+      // {
+      //   src: "/icons/icon-512x512.png",
+      //   sizes: "512x512",
+      //   type: "image/png",
+      //   purpose: "maskable",
+      // },
     ],
   },
 };
diff --git a/app/root.tsx b/app/root.tsx
@@ -1,3 +1,4 @@
+import * as React from "react";
 import {
   Links,
   Meta,
@@ -10,12 +11,7 @@ import type { LinksFunction } from "@remix-run/node";
 import "./tailwind.css";
 import { config } from "./config";
 
-export const links: LinksFunction = () => [
-  {
-    rel: "manifest",
-    href: "/webmanifest.json",
-  },
-];
+export const links: LinksFunction = () => [];
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
@@ -31,7 +27,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
           src="/js/script.js"
           data-domain={config.productionDomain}
         ></script>
-        <link
+        {/* <link
           rel="apple-touch-icon"
           sizes="180x180"
           href="/apple-touch-icon.png"
@@ -48,12 +44,12 @@ export function Layout({ children }: { children: React.ReactNode }) {
           sizes="16x16"
           href="/favicon-16x16.png"
         />
-        <link rel="manifest" href="/site.webmanifest" />
         <link
           rel="mask-icon"
           href="/safari-pinned-tab.svg"
           color={config.themeColor}
-        />
+        /> */}
+        <link rel="manifest" href="/site.webmanifest" />
         <meta name="og:url" content={config.productionUrl} />
         <meta name="og:locale" content="de_AT" />
         <meta name="twitter:card" content="summary_large_image" />

diff --git a/app/routes/[webmanifest.json].tsx → app/routes/[site.webmanifest].tsx b/app/routes/[webmanifest.json].tsx → app/routes/[site.webmanifest].tsx
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -27,33 +27,45 @@ export const headers: HeadersFunction = () => {
 
 export default function Index() {
   return (
-    <div className="items-left prose mx-auto ml-5 flex h-screen flex-col justify-center gap-5">
-      <header>
-        <h1 className="my-2 text-5xl font-medium uppercase">
-          Arthouse <span className="text-base">Starter-Kit</span>
-        </h1>
-        <div className="flex items-center gap-2">
-          by
-          <a href="https://chrcit.com?utm_source=arthouse-template">
-            Christian Cito
-          </a>{" "}
-          /{" "}
-          <a href="https://madebyarthouse.com?utm_source=arthouse-template">
-            Arthouse
-          </a>
-        </div>
-      </header>
-      <main className="flex max-w-md flex-col gap-2 text-sm">
-        <p className="my-0">
-          <a href="https://github.com/madebyarthouse/arthouse-starter-kit">
-            View on Github
-          </a>
-        </p>
-        <p className="my-0 max-w-sm text-sm">
-          Typescript, React, Remix, Tailwind, pnpm, Plausible, Prettier, ESLint,
-          Plausible, clsx, pretty-cache-header.
-        </p>
-      </main>
+    <div
+      style={{
+        backgroundColor: "#e5e5f7",
+        opacity: 0.8,
+        backgroundSize: "10px 10px",
+        backgroundImage: "radial-gradient(#161717 0.5px, #e5e5f7 0.5px)",
+      }}
+      className="flex h-screen items-center justify-center"
+    >
+      <div className="prose prose-xl mx-4 h-fit max-w-fit gap-5 space-y-4 rounded-lg bg-white/80 p-10 sm:mx-auto">
+        <header>
+          <h1 className="my-2 text-7xl font-medium uppercase">
+            Arthouse <span className="text-2xl">Starter-Kit</span>
+          </h1>
+          <div className="flex items-center gap-2">
+            by
+            <a href="https://chrcit.com?utm_source=arthouse-template">
+              Christian Cito
+            </a>{" "}
+            /{" "}
+            <a href="https://madebyarthouse.com?utm_source=arthouse-template">
+              Arthouse
+            </a>
+          </div>
+        </header>
+
+        <hr className="my-4" />
+        <main className="flex max-w-xl flex-col gap-2">
+          <p className="my-0">
+            <a href="https://github.com/madebyarthouse/arthouse-starter-kit">
+              View on Github
+            </a>
+          </p>
+          <p className="my-0 text-base">
+            Typescript, React, Remix, Tailwind, pnpm, Plausible, Prettier,
+            ESLint, Plausible, clsx, pretty-cache-header.
+          </p>
+        </main>
+      </div>
     </div>
   );
 }
diff --git a/docs/screenshot.png b/docs/screenshot.png
diff --git a/eslint.config.js b/eslint.config.js
@@ -6,8 +6,8 @@ import pluginReact from "eslint-plugin-react";
 
 /** @type {import('eslint').Linter.Config[]} */
 export default [
-  {files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"]},
-  {languageOptions: { globals: {...globals.browser, ...globals.node} }},
+  { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
+  { languageOptions: { globals: { ...globals.browser, ...globals.node } } },
   pluginJs.configs.recommended,
   ...tseslint.configs.recommended,
   pluginReact.configs.flat.recommended,

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,8 +1,17 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
 import type { Config } from "tailwindcss";
+import defaultTheme from "tailwindcss/defaultTheme";
 
 export default {
   content: ["./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}"],
   theme: {
+    screens: {
+      xxs: "350px",
+      xs: "420px",
+      ...defaultTheme.screens,
+      "3xl": "1768px",
+      notouch: { raw: "(hover: hover)" },
+    },
     extend: {
       fontFamily: {
         sans: [