From f87cbfe37913a2d8400277f305928038bea2d705 Mon Sep 17 00:00:00 2001
From: shaian <zshaian@users.noreply.github.com>
Date: Sat, 17 May 2025 03:13:01 +0800
Subject: [PATCH 1/2] feat: add SolidJSFramework component with documentation
 and best practices

---
 .../frameworkComponents/SolidJSFramework.tsx  | 73 +++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 components/frameworkComponents/SolidJSFramework.tsx

diff --git a/components/frameworkComponents/SolidJSFramework.tsx b/components/frameworkComponents/SolidJSFramework.tsx
new file mode 100644
index 00000000..152d5e51
--- /dev/null
+++ b/components/frameworkComponents/SolidJSFramework.tsx
@@ -0,0 +1,73 @@
+/* eslint-disable @next/next/no-img-element */
+const SolidJSFramework = () => {
+  return (
+    <div className='bg-primary flex items-center justify-center'>
+      <div className='max-w-2xl text-center'>
+        <div className='flex flex-wrap items-center justify-center'>
+          <img
+            src='https://img.shields.io/badge/Solid%20JS-blue?style=for-the-badge&logo=solid&logoColor=white'
+            alt='SolidJS'
+            className='mb-10 h-16 rounded-sm'
+          />
+        </div>
+
+        <h2 className='mb-4 text-2xl font-bold'>What is Solid.js?</h2>
+        <p className='mb-4'>
+          Solid is a declarative JavaScript library for building user
+          interfaces, developed by Ryan Carniato. It focuses on fine grained
+          reactivity and compiler optimized rendering, enabling highly
+          performant applications with minimal overhead. Solid uses JSX for
+          templating, but unlike virtual DOM frameworks, it compiles templates
+          to real DOM updates at build time.
+        </p>
+
+        <h2 className='mb-4 text-2xl font-bold'>Why Use Solid.js?</h2>
+        <p className='mb-6'>
+          Solid is ideal for developers seeking top-tier performance without
+          sacrificing modern developer ergonomics. With no virtual DOM and a
+          highly efficient reactivity model, Solid delivers blazing-fast
+          rendering and extremely low memory usage. It's especially well-suited
+          for performance-critical applications, interactive UIs, and projects
+          that value fine control over reactivity.
+        </p>
+
+        <h4 className='my-4 text-2xl font-bold'>
+          Solid.js Best Practices and Coding Style Guide
+        </h4>
+        <ul>
+          <li>
+            - Leverage Solid’s reactive primitives like `createSignal`,
+            `createEffect`, and `createMemo`.
+          </li>
+          <li>
+            - Avoid unnecessary state nesting to keep reactivity fine-grained.
+          </li>
+          <li>
+            - Use JSX as the templating language, but remember it compiles to
+            DOM instructions.
+          </li>
+          <li>
+            - Minimize the use of external state management libraries. Solid's
+            built-in reactivity is often sufficient.
+          </li>
+          <li>
+            - Prefer composable functions and reusable components for clean,
+            modular code.
+          </li>
+        </ul>
+
+        <br />
+        <a
+          target='_blank'
+          rel='noopener noreferrer'
+          href='https://docs.solidjs.com/'
+          className='text-xl font-bold underline hover:text-blue-400'
+        >
+          Solid.js - Official Documentation
+        </a>
+      </div>
+    </div>
+  )
+}
+
+export default SolidJSFramework

From b4b4d9bd652e6fedd9dbe42cb2f0561f57a76ce7 Mon Sep 17 00:00:00 2001
From: shaian <zshaian@users.noreply.github.com>
Date: Sat, 17 May 2025 03:51:58 +0800
Subject: [PATCH 2/2] fix: add solid js link and component so that it's going
 to show in the dropdown

---
 components/data/frameworkList.ts | 1 +
 pages/frameworks/[framework].tsx | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/components/data/frameworkList.ts b/components/data/frameworkList.ts
index cfd94507..587b12a3 100644
--- a/components/data/frameworkList.ts
+++ b/components/data/frameworkList.ts
@@ -21,4 +21,5 @@ export const frameworkList = [
   { name: "Spring", link: "/frameworks/spring" },
   { name: "CherryPy", link: "/frameworks/cherrypy" },
   { name: "D3.js", link: "/frameworks/d3js" },
+  { name: "Solid.js", link: "/frameworks/solidjs"}
 ];
diff --git a/pages/frameworks/[framework].tsx b/pages/frameworks/[framework].tsx
index 51227ed3..ab656b82 100644
--- a/pages/frameworks/[framework].tsx
+++ b/pages/frameworks/[framework].tsx
@@ -23,6 +23,7 @@ import SpringFramework from "../../components/frameworkComponents/SpringFramewor
 import TailwindCSSFramework from "../../components/frameworkComponents/TailwindCSSFramework";
 import CherrypyFramework from "../../components/frameworkComponents/CherrypyFramework";
 import D3JSLibrary from "../../components/frameworkComponents/D3JS";
+import SolidJSFramework from "../../components/frameworkComponents/SolidJSFramework";
 
 const FrameworkPage = () => {
   const router = useRouter();
@@ -74,6 +75,8 @@ const FrameworkPage = () => {
         return <CherrypyFramework />;
       case "d3js":
         return <D3JSLibrary />;
+      case "solidjs":
+        return  <SolidJSFramework />
       default:
         return <FrameworkNotSupported />;
     }