diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 4f6f59e..43660b5 100644 --- 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 index 91df13c..01f96c9 100644 --- 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 index 56cef24..4e70a76 100644 --- 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 index d165139..c8664f3 100644 --- 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 index 7041477..edd1537 100644 --- 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} > - - + /> */} + diff --git a/app/routes/[webmanifest.json].tsx b/app/routes/[site.webmanifest].tsx similarity index 100% rename from app/routes/[webmanifest.json].tsx rename to app/routes/[site.webmanifest].tsx diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx index 3abedf6..21429da 100644 --- a/app/routes/_index.tsx +++ b/app/routes/_index.tsx @@ -27,33 +27,45 @@ export const headers: HeadersFunction = () => { export default function Index() { return ( -
-
-

- Arthouse Starter-Kit -

-
- by - - Christian Cito - {" "} - /{" "} - - Arthouse - -
-
-
-

- - View on Github - -

-

- Typescript, React, Remix, Tailwind, pnpm, Plausible, Prettier, ESLint, - Plausible, clsx, pretty-cache-header. -

-
+
+
+
+

+ Arthouse Starter-Kit +

+
+ by + + Christian Cito + {" "} + /{" "} + + Arthouse + +
+
+ +
+
+

+ + View on Github + +

+

+ Typescript, React, Remix, Tailwind, pnpm, Plausible, Prettier, + ESLint, Plausible, clsx, pretty-cache-header. +

+
+
); } diff --git a/docs/screenshot.png b/docs/screenshot.png new file mode 100644 index 0000000..c48efd1 Binary files /dev/null and b/docs/screenshot.png differ diff --git a/eslint.config.js b/eslint.config.js index 7d81ebe..20889d6 100644 --- 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 index fcb975e..e386d04 100644 --- 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: [