modernize setup (#821)

* modernize setup

* gen-readme

Author: filiptammergard

.husky/pre-commit

@@ -105,7 +105,7 @@ Cheatsheet for using React with TypeScript.
 
 <!--START-SECTION:setup-->
 
-### Setup
+### Introduction
 
 #### Prerequisites
 

README.md

@@ -1,6 +1,6 @@
 ---
 id: setup
-title: Setup
+title: Introduction
 ---
 
 ## Prerequisites

docs/basic/setup.md

@@ -26,7 +26,6 @@
     "format": "prettier --write \"**/*.md\"",
     "format:check": "prettier --check \"**/*.md\"",
     "postinstall": "cd website && yarn",
-    "prepare": "husky",
     "start": "yarn --cwd website start",
     "build": "yarn --cwd website build",
     "serve": "yarn --cwd website serve"
@@ -37,8 +36,6 @@
     "yargs": "^18.0.0"
   },
   "devDependencies": {
-    "husky": "^9.1.7",
-    "prettier": "^3.8.3",
-    "pretty-quick": "^4.2.2"
+    "prettier": "^3.8.3"
   }
 }

package.json

@@ -1,30 +1,21 @@
-const { themes } = require("prism-react-renderer");
-
-// List of projects/orgs using your project for the users page.
-const users = [
-  {
-    caption: "Docusaurus",
-    image: "https://docusaurus.io/img/docusaurus.svg",
-    infoLink: "https://docusaurus.io/",
-    pinned: true,
-  },
-];
+import { themes } from "prism-react-renderer";
+import type { Config } from "@docusaurus/types";
+import type * as Preset from "@docusaurus/preset-classic";
 
 const setupDoc = "docs/basic/setup";
 
-module.exports = {
+const config: Config = {
   favicon: "img/icon.png",
   title: "React TypeScript Cheatsheet", // Title for your website.
-  tagline:
-    "A cheatsheet for experienced React developers getting started with TypeScript",
+  tagline: "A cheatsheet for developers using React with TypeScript",
   url: "https://react-typescript-cheatsheet.netlify.app", // Your website URL
   baseUrl: "/",
   projectName: "react-typescript-cheatsheet",
   organizationName: "typescript-cheatsheets",
 
   presets: [
     [
-      "@docusaurus/preset-classic",
+      "classic",
       {
         theme: {
           customCss: require.resolve("./src/css/custom.css"),
@@ -37,8 +28,7 @@ module.exports = {
           editUrl:
             "https://github.com/typescript-cheatsheets/react/tree/main/docs",
         },
-        // ...
-      },
+      } satisfies Preset.Options,
     ],
   ],
 
@@ -50,9 +40,6 @@ module.exports = {
     image:
       "https://user-images.githubusercontent.com/6764957/53868378-2b51fc80-3fb3-11e9-9cee-0277efe8a927.png",
 
-    // Equivalent to `docsSideNavCollapsible`.
-    // sidebarCollapsible: false,
-
     prism: {
       defaultLanguage: "typescript",
       theme: themes.github,
@@ -68,20 +55,24 @@ module.exports = {
       items: [
         {
           to: setupDoc,
-          label: "Docs",
+          label: "Introduction",
+          position: "right",
+        },
+        {
+          to: "docs/basic/getting-started/basic_type_example",
+          label: "Learn",
           position: "right",
         },
         {
-          to: "help",
-          label: "Help",
+          to: "docs/reference/ComponentProps",
+          label: "API Reference",
           position: "right",
         },
         {
           to: "https://discord.gg/wTGS5z9",
           label: "Discord",
           position: "right",
         },
-        // {to: 'blog', label: 'Blog', position: 'right'},
       ],
     },
 
@@ -90,8 +81,6 @@ module.exports = {
       logo: {
         alt: "TypeScript Cheatsheets Logo",
         src: "img/icon.png",
-        // maxWidth: 128,
-        // style: { maxWidth: 128, maxHeight: 128 },
       },
       copyright: `Copyright © ${new Date().getFullYear()} TypeScript Cheatsheets`,
       links: [
@@ -102,6 +91,14 @@ module.exports = {
               label: "Introduction",
               to: setupDoc,
             },
+            {
+              label: "Learn",
+              to: "docs/basic/getting-started/basic_type_example",
+            },
+            {
+              label: "API Reference",
+              to: "docs/reference/ComponentProps",
+            },
           ],
         },
         {
@@ -111,14 +108,6 @@ module.exports = {
               label: "Stack Overflow",
               href: "https://stackoverflow.com/questions/tagged/typescript",
             },
-            {
-              label: "User Showcase",
-              to: "users",
-            },
-            {
-              label: "Help",
-              to: "help",
-            },
             {
               label: "Contributors",
               to: "contributors",
@@ -142,13 +131,11 @@ module.exports = {
                 </a>`,
             },
             {
-              // label: "Discord",
               html: `<a class="footer__link-item" href="https://discord.gg/wTGS5z9">
               <img src="https://img.shields.io/discord/508357248330760243.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2" style="max-width:100%;" alt="Discord">
               </a>`,
             },
             {
-              // label: "Spread the word",
               html: `<a class="footer__link-item" href="http://twitter.com/home?status=Awesome%20%40Reactjs%20%2B%20%40TypeScript%20cheatsheet%20by%20%40ferdaber%2C%20%40sebsilbermann%2C%20%40swyx%20%26%20others!%20https%3A%2F%2Fgithub.com%2Ftypescript-cheatsheets%2Freact">
               <img src="https://img.shields.io/twitter/url?label=Help%20spread%20the%20word%21&style=social&url=https%3A%2F%2Fgithub.com%2Ftypescript-cheatsheets%2Freact" style="max-width:100%;" alt="X">
               </a>`,
@@ -162,18 +149,12 @@ module.exports = {
       apiKey: "9a22585d1841d2fa758da919cd08a764",
       indexName: "react-typescript-cheatsheet",
       appId: "J65EL4UPXZ",
-      algoliaOptions: {
-        //... },
-      },
     },
-  },
+  } satisfies Preset.ThemeConfig,
 
   customFields: {
     firstDoc: setupDoc,
-
-    // TODO useless user showcase page ?
-    users,
-    addUserUrl:
-      "https://github.com/typescript-cheatsheets/react/blob/main/website/docusaurus.config.js",
   },
 };
+
+export default config;

website/docusaurus.config.js website/docusaurus.config.tswebsite/docusaurus.config.js renamed to website/docusaurus.config.ts

@@ -18,6 +18,13 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
+  "devDependencies": {
+    "@docusaurus/tsconfig": "^3.10.1",
+    "@docusaurus/types": "^3.10.1",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "typescript": "^6.0.3"
+  },
   "browserslist": {
     "production": [
       ">0.2%",

website/package.json

@@ -54,11 +54,75 @@ main details:hover {
 }
 
 .homePageBtns {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: center;
+  margin-top: 2rem;
+}
+
+.homeSectionGrid {
   display: grid;
-  gap: 20px;
+  gap: 1.5rem;
+  grid-template-columns: 1fr;
 }
-@media (min-width: 480px) {
-  .homePageBtns {
-    grid-template-columns: 1fr 1fr;
+@media (min-width: 768px) {
+  .homeSectionGrid {
+    grid-template-columns: repeat(3, 1fr);
   }
 }
+
+.homeSectionCard {
+  display: block;
+  padding: 1.5rem;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: var(--ifm-card-border-radius, 0.5rem);
+  background: var(--ifm-background-surface-color);
+  color: inherit;
+  text-decoration: none;
+  transition:
+    transform 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+.homeSectionCard:hover {
+  text-decoration: none;
+  color: inherit;
+  border-color: var(--ifm-color-primary);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+.homeSectionCard h3 {
+  margin: 0 0 0.5rem;
+  color: var(--ifm-color-primary);
+}
+.homeSectionCard p {
+  margin: 0;
+  color: var(--ifm-color-emphasis-700);
+  font-size: 0.95rem;
+}
+
+.homeTopicsGrid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  justify-content: center;
+}
+.homeTopicLink {
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 999px;
+  font-size: 0.9rem;
+  color: var(--ifm-color-emphasis-800);
+  text-decoration: none;
+  transition:
+    border-color 0.15s ease,
+    color 0.15s ease,
+    background 0.15s ease;
+}
+.homeTopicLink:hover {
+  border-color: var(--ifm-color-primary);
+  color: var(--ifm-color-primary);
+  background: var(--ifm-color-primary-contrast-background, transparent);
+  text-decoration: none;
+}