Remove obsolete release notes and update homepage features for MCP Database Server. Added support for multiple databases and improved UI elements. Updated styles and SVG assets for better presentation.

docs/docs/release.mdx

@@ -1,137 +0,0 @@
----
-sidebar_position: 2
----
-import YouTubeVideoEmbed from '@site/src/components/HomepageFeatures/YouTubeVideoEmbed';
-
-# Release Notes
-
-## Version 1.0.3
-- **Code Generation Capabilities**: Added new code generation capability 🎭
-  - `start_codegen_session`: Start a new session to record Playwright actions
-  - `end_codegen_session`: End a session and generate test file
-  - `get_codegen_session`: Retrieve information about a session
-  - `clear_codegen_session`: Clear a session without generating a test
-  - Ability to record real browser interactions and convert them to reusable Playwright tests
-  - Support for customizing test output path, test names, and including descriptive comments
-- **Enhanced Browser Navigation**: Added new navigation control tools 🧭
-  - `playwright_go_back`: Navigate back in browser history
-  - `playwright_go_forward`: Navigate forward in browser history
-- **Advanced Interaction**: Added new interaction tools for more complex scenarios 🔄
-  - `playwright_drag`: Drag elements from one location to another
-  - `playwright_press_key`: Press keyboard keys with optional element focus
-- **Output Capabilities**: Added content export functionality 📄
-  - `playwright_save_as_pdf`: Save the current page as a PDF file with customizable options
-- **Content Extraction**: Added tools for retrieving page content 📝
-  - `playwright_get_visible_text`: Extract all visible text content from the current page
-  - `playwright_get_visible_html`: Get the complete HTML content of the current page
-- Comprehensive test coverage for all new tools
-- Updated documentation with examples and usage detail
-
-## Version 1.0.2
-- **Multi-Browser Support**: Added support for Firefox and WebKit browsers in addition to Chromium 🌐
-  - New `browserType` parameter for `playwright_navigate` tool allows specifying browser engine 
-  - Supported browser types: "chromium" (default), "firefox", and "webkit"
-  - Seamless browser engine switching during automation sessions
-- Enhanced test coverage for different browser engines
-- Updated documentation with browser-specific examples
-
-## Version 1.0.0
-- First major release of Playwright MCP Server with the tool structure changes 🚀
-- Fixed issue with headless mode in Playwright #62
-- Fixed issue Navigation failed: page.goto: Target page, context or browser has been closed #63
-- Completed RFC: Refactor handleToolCall for better maintainability #46
-- New feature: Optional Bearer Authorization to API POST (Thanks to ***@CopilotMe***)
-- Fixed issue Exit process on host close (Thanks to ***@kiracih***)
-- New Feature: Three new tools (Thanks to ***@VinceOPS***)
-  - `playwright_except_response`
-  - `playwright_assert_response`
-  
-  Here is the scenario for the above two tools
-  ```BDD
-    Scenario: Logging in requires captcha verification
-      Given I expect the browser to receive an HTTP response from "**/security/captcha-precheck"
-      When I enter "some-identifier@test.com" in the input and I submit
-      Then The browser should have received the HTTP response
-      And Its body should contain a property "captchaFamily"
-  ```
-  - A new tool `playwright_custom_user_agent` to define a custom user agent.
-
-
-## Version 0.3.1
-- Fixed BROWSER_TOOLS as Playwright_console_logs is not required (Thanks to https://github.com/kfern)
-- Added Tests for all the Playwright MCP Server tools (Thanks to https://github.com/kfern)
-- Updated documentation with AI Courses 
-  - Gen AI Course [Details here](/docs/ai-courses/AIAgents)
-  - AI Agents Course [Details here](/docs/ai-courses/AIAgents)
-  - Machine Learning Course [Details here](/docs/ai-courses/MachineLearning)
-
-## Version 0.3.0
-- Added support for `Playwright_console_logs` to get the console logs from the browser. Following logs types
-are supported.[More Detail available here](/docs/playwright-web/Console-Logging)
-  - `log`
-  - `info`
-  - `warn`
-  - `error`
-  - `debug`
-  - `all`
-
-
-:::tip Usage Example
-To invoke `Playwright_console_logs` via MCP Playwright, use the following prompt:
-
-```plaintext
-Get the console log from the browser whenever you perform any action.
-:::
-- Added support for `Playwright_close` to close the browser and release all resources.
-
-:::tip Usage Example
-To invoke `Playwright_close` via MCP Playwright, use the following prompt:
-
-```plaintext
-Close the browser once the operation is completed.
-:::
-
-## Version 0.2.9
-- Fixed Screenshot issue with Cline, Cursor and Windows 11 (Reported by @MackDing, @mengjian-github)
-
-## Version 0.2.8
- - Support of iFrame while running Playwright test via MCP (Supports Cline as well). Thanks to @VinceOPS 
- - Fixed issue while saving PNG file. Thanks to @BayLee4
- - Fixed issue with full page screenshot arguments to be passed to tool, thanks for the report @unipro-LeighMason
- - Updated to latest version of Playwright and MCP Server library
-
-
-## Version 0.2.7
- - Fixed the issue with Playwright MCP server not working Cline, VSCode reported in #26, #16
- - Fixed issue #28 and now chrome version is updated
- - Updated to latest version of Playwright and MCP Server library
-
-## Version 0.2.6
-- New Documentation site powered by docusaurus hosted in GH-Pages https://executeautomation.github.io/mcp-playwright/ 
-
----
-
-## Version 0.2.5
-
-#### API Test Support
-- Playwright MCP Server now supports API Testing for
-  - `GET` request
-  - `POST` request
-  - `PUT` request
-  - `PATCH` request
-  - `DELETE` request
-
-  <YouTubeVideoEmbed videoId="BYYyoRxCcFE" />
-
----
-
-## Version 0.2.4
-- Added support for smithery 
-- Added Support to save Playwright screenshot in local directory, thanks to `@s4l4x`
-
----
-
-## Version 0.2.3
-- Added quality of life improvement
-
----

docs/src/components/HomepageFeatures/index.tsx

@@ -14,25 +14,25 @@ const FeatureList: FeatureItem[] = [
     Svg: require('@site/static/img/easy-to-use.svg').default,
     description: (
       <>
-        Playwright MCP Server is easy to use, just change the Claude config file and you are done.
+        MCP Database Server is easy to configure. Just update your Claude Desktop config file, and you're ready to start querying your databases!
       </>
     ),
   },
   {
-    title: 'Test UI and APIs',
-    Svg: require('@site/static/img/playwright.svg').default,
+    title: 'Multiple Database Support',
+    Svg: require('@site/static/img/mcp-database.svg').default,
     description: (
       <>
-       Test both UI and API of your application with plain English text. No <code>code</code> required.
+        Seamlessly connect to <code>SQLite</code>, <code>SQL Server</code>, and <code>PostgreSQL</code> databases with a consistent interface for all your data needs.
       </>
     ),
   },
   {
-    title: 'Powered by NodeJS',
+    title: 'Powered by Node.js',
     Svg: require('@site/static/img/node.svg').default,
     description: (
       <>
-       Playwright MCP Server is built on top of NodeJS, making it fast and efficient.
+        Built with Node.js for high performance and reliability. Benefit from connection pooling, async operations, and efficient memory management.
       </>
     ),
   },
@@ -41,12 +41,14 @@ const FeatureList: FeatureItem[] = [
 function Feature({title, Svg, description}: FeatureItem) {
   return (
     <div className={clsx('col col--4')}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
-      <div className="text--center padding-horiz--md">
-        <Heading as="h3">{title}</Heading>
-        <p>{description}</p>
+      <div className={styles.featureItem}>
+        <div className="text--center">
+          <Svg className={styles.featureSvg} role="img" />
+        </div>
+        <div className="text--center">
+          <Heading as="h3" className={styles.featureTitle}>{title}</Heading>
+          <p className={styles.featureDescription}>{description}</p>
+        </div>
       </div>
     </div>
   );
@@ -56,6 +58,12 @@ export default function HomepageFeatures(): JSX.Element {
   return (
     <section className={styles.features}>
       <div className="container">
+        <div className="row">
+          <div className="col col--12 text--center">
+            <Heading as="h2">Key Features</Heading>
+            <p style={{marginBottom: '3rem'}}>Powerful capabilities to enhance your Claude interactions with databases</p>
+          </div>
+        </div>
         <div className="row">
           {FeatureList.map((props, idx) => (
             <Feature key={idx} {...props} />

docs/src/components/HomepageFeatures/styles.module.css

@@ -3,9 +3,39 @@
   align-items: center;
   padding: 2rem 0;
   width: 100%;
+  background-color: var(--ifm-color-emphasis-100);
 }
 
 .featureSvg {
-  height: 200px;
-  width: 200px;
+  height: 140px;
+  width: 140px;
+  margin-bottom: 1.5rem;
+  transition: transform 0.3s ease;
+}
+
+.featureItem {
+  padding: 2rem;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+  height: 100%;
+}
+
+.featureItem:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
+
+.featureItem:hover .featureSvg {
+  transform: scale(1.05);
+}
+
+.featureTitle {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+
+.featureDescription {
+  font-size: 1rem;
+  line-height: 1.5;
 }

docs/src/css/custom.css

@@ -6,25 +6,25 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-color-primary: #3578e5;
+  --ifm-color-primary-dark: #2160c4;
+  --ifm-color-primary-darker: #1a56b9;
+  --ifm-color-primary-darkest: #144098;
+  --ifm-color-primary-light: #4889e8;
+  --ifm-color-primary-lighter: #5a96eb;
+  --ifm-color-primary-lightest: #80aff0;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary: #4e89e8;
+  --ifm-color-primary-dark: #3077e4;
+  --ifm-color-primary-darker: #226fe3;
+  --ifm-color-primary-darkest: #1957c0;
+  --ifm-color-primary-light: #6c9bec;
+  --ifm-color-primary-lighter: #7ca6ee;
+  --ifm-color-primary-lightest: #a8c4f4;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }

docs/src/pages/index.module.css

@@ -8,6 +8,7 @@
   text-align: center;
   position: relative;
   overflow: hidden;
+  background: linear-gradient(135deg, var(--ifm-color-primary-darkest) 0%, var(--ifm-color-primary) 100%);
 }
 
 @media screen and (max-width: 996px) {
@@ -20,4 +21,37 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  margin-top: 2rem;
+}
+
+.button {
+  margin: 0 0.5rem;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
+}
+
+.heroTitle {
+  font-size: 3rem;
+  font-weight: 800;
+  margin-bottom: 1rem;
+}
+
+.heroSubtitle {
+  font-size: 1.5rem;
+  margin-bottom: 2rem;
+  opacity: 0.9;
+}
+
+.callToAction {
+  background-color: var(--ifm-color-emphasis-100);
+  padding: 5rem 0;
+  margin-top: 2rem;
+  background: linear-gradient(135deg, var(--ifm-color-emphasis-200) 0%, var(--ifm-color-emphasis-100) 100%);
+  border-top: 1px solid var(--ifm-color-emphasis-200);
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
 }

docs/src/pages/index.tsx

@@ -12,15 +12,20 @@ function HomepageHeader() {
   return (
     <header className={clsx('hero hero--primary', styles.heroBanner)}>
       <div className="container">
-        <Heading as="h1" className="hero__title">
+        <Heading as="h1" className={styles.heroTitle}>
           {siteConfig.title}
         </Heading>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <p className={styles.heroSubtitle}>{siteConfig.tagline}</p>
         <div className={styles.buttons}>
           <Link
-            className="button button--secondary button--lg"
+            className={clsx('button button--secondary button--lg', styles.button)}
             to="/docs/intro">
-            Playwright MCP Server Tutorial - 5min ⏱️
+            Get Started with Database Server ⏱️
+          </Link>
+          <Link
+            className={clsx('button button--outline button--lg', styles.button)}
+            to="/docs/database-tools">
+            View Database Tools
           </Link>
         </div>
       </div>
@@ -28,15 +33,80 @@ function HomepageHeader() {
   );
 }
 
+function DatabaseSupport() {
+  return (
+    <section className="padding-vert--xl">
+      <div className="container">
+        <div className="row">
+          <div className="col col--8 col--offset-2 text--center">
+            <Heading as="h2">Supported Databases</Heading>
+            <p className="padding-vert--md">
+              The MCP Database Server provides seamless integration with multiple database systems,
+              allowing Claude to query and manipulate data with ease.
+            </p>
+          </div>
+        </div>
+        <div className="row padding-vert--lg">
+          <div className="col col--4 text--center">
+            <div className="padding--lg">
+              <h3>SQLite</h3>
+              <p>Perfect for local development and lightweight applications.</p>
+            </div>
+          </div>
+          <div className="col col--4 text--center">
+            <div className="padding--lg">
+              <h3>SQL Server</h3>
+              <p>Robust enterprise-grade database with powerful features.</p>
+            </div>
+          </div>
+          <div className="col col--4 text--center">
+            <div className="padding--lg">
+              <h3>PostgreSQL</h3>
+              <p>Advanced open-source database with extensive capabilities.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function CallToAction() {
+  return (
+    <section className={styles.callToAction}>
+      <div className="container">
+        <div className="row">
+          <div className="col col--10 col--offset-1 text--center">
+            <Heading as="h2">Ready to Connect Claude to Your Databases?</Heading>
+            <p className="padding-vert--md">
+              Start leveraging the power of AI with your structured data today.
+              Follow our simple setup guide to get up and running in minutes.
+            </p>
+            <div className="padding-vert--md">
+              <Link
+                className="button button--primary button--lg"
+                to="/docs/getting-started">
+                Get Started Now
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
 export default function Home(): JSX.Element {
   const {siteConfig} = useDocusaurusContext();
   return (
     <Layout
       title={`${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
+      description="Connect Claude to your databases with MCP Database Server">
       <HomepageHeader />
       <main>
         <HomepageFeatures />
+        <DatabaseSupport />
+        <CallToAction />
       </main>
     </Layout>
   );