feat: Add Ruby Sinatra + PostgreSQL quickstart #779

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

Atul-Chahar wants to merge 8 commits into keploy:main from Atul-Chahar:feat/ruby-sinatra-postgres-quickstart

+257 −25

pr_description.md

-Original file line number
+Diff line change
@@ -0,0 +1,22 @@
+    ## Description
+    This PR adds a new Quickstart guide for **Ruby (Sinatra + PostgreSQL)**.
+    It includes:
+    - A new guide: `samples-sinatra-postgres.md`
+    - Updates to `QuickStartFilter.js` to include Ruby language support.
+    - Updates to `QuickStartList.js` to list the new quickstart.
+    - Sidebar updates in `version-4.0.0-sidebars.json`.
+    - Terminal screenshots for both Docker and local setups.
+    ## Related Issue
+    Fixes #3521
+    ## Checklist
+    - [x] Documentation build passes (`npm run build`)
+    - [x] Added new language to `QuickStartFilter.js`
+    - [x] Added configuration for the new quickstart in `QuickStartList.js`
+    - [x] Added screenshots for commands (Record, Test, API calls)
+    - [x] Verified links and formatting
+    ## Sample Code
+    The sample application code is available at: [Atul-Chahar/samples-ruby](https://github.com/Atul-Chahar/samples-ruby/tree/master/sinatra-postgres)

src/components/QuickStartFilter.js

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,14 +1,15 @@
  
    import React, {useState} from "react";

    import React, { useState } from "react";

    import quickstarts from "./QuickStartList";

    import Link from "@docusaurus/Link";

    import {FaGolang} from "react-icons/fa6";

    import {FaJava, FaLaptopCode, FaDocker, FaPython, FaCheck, FaArrowRight, FaArrowLeft} from "react-icons/fa";

    import {TbBrandCSharp} from "react-icons/tb";

    import {IoLogoJavascript} from "react-icons/io5";

    import {useColorMode} from "@docusaurus/theme-common";

    import { FaGolang } from "react-icons/fa6";

    import { FaJava, FaLaptopCode, FaDocker, FaPython, FaCheck, FaArrowRight, FaArrowLeft } from "react-icons/fa";

    import { TbBrandCSharp } from "react-icons/tb";

    import { DiRuby } from "react-icons/di";

    import { IoLogoJavascript } from "react-icons/io5";

    import { useColorMode } from "@docusaurus/theme-common";

    export default function QuickstartFilter({defaultLanguage = null}) {

      const {colorMode} = useColorMode();

    export default function QuickstartFilter({ defaultLanguage = null }) {

      const { colorMode } = useColorMode();

      const isDark = colorMode === "dark";

      const [currentStep, setCurrentStep] = useState(defaultLanguage ? 2 : 1);

    @@ -23,22 +24,23 @@ export default function QuickstartFilter({defaultLanguage = null}) {
  
      });

      const languages = [

        {name: "Go", icon: <FaGolang size={24} />, color: "#00ADD8"},

        {name: "Python", icon: <FaPython size={24} />, color: "#3776AB"},

        {name: "Java", icon: <FaJava size={24} />, color: "#007396"},

        {name: "JS/TS", icon: <IoLogoJavascript size={24} />, color: "#F7DF1E"},

        {name: "C#", icon: <TbBrandCSharp size={24} />, color: "#512BD4"},

        { name: "Go", icon: <FaGolang size={24} />, color: "#00ADD8" },

        { name: "Python", icon: <FaPython size={24} />, color: "#3776AB" },

        { name: "Java", icon: <FaJava size={24} />, color: "#007396" },

        { name: "JS/TS", icon: <IoLogoJavascript size={24} />, color: "#F7DF1E" },

        { name: "C#", icon: <TbBrandCSharp size={24} />, color: "#512BD4" },

        { name: "Ruby", icon: <DiRuby size={24} />, color: "#CC342D" },

      ];

      const servers = [

        {name: "Local", icon: <FaLaptopCode size={24} />, description: "Run directly on your machine"},

        {name: "Docker", icon: <FaDocker size={24} />, description: "Run in a Docker container"},

        { name: "Local", icon: <FaLaptopCode size={24} />, description: "Run directly on your machine" },

        { name: "Docker", icon: <FaDocker size={24} />, description: "Run in a Docker container" },

      ];

      const steps = [

        {id: 1, label: "Language", icon: languages.find(l => l.name === language)?.icon || null},

        {id: 2, label: "Environment", icon: server === "Docker" ? <FaDocker size={16} /> : server === "Local" ? <FaLaptopCode size={16} /> : null},

        {id: 3, label: "Quickstart", icon: null},

        { id: 1, label: "Language", icon: languages.find(l => l.name === language)?.icon || null },

        { id: 2, label: "Environment", icon: server === "Docker" ? <FaDocker size={16} /> : server === "Local" ? <FaLaptopCode size={16} /> : null },

        { id: 3, label: "Quickstart", icon: null },

      ];

      const handleLanguageSelect = (lang) => {

    @@ -372,10 +374,10 @@ export default function QuickstartFilter({defaultLanguage = null}) {
  
                  </div>

                  <span>{step.label}</span>

                  {currentStep > step.id && step.id === 1 && language && (

                    <span style={{color: '#ff914d', marginLeft: '0.25rem'}}>({language})</span>

                    <span style={{ color: '#ff914d', marginLeft: '0.25rem' }}>({language})</span>

                  )}

                  {currentStep > step.id && step.id === 2 && server && (

                    <span style={{color: '#ff914d', marginLeft: '0.25rem'}}>({server})</span>

                    <span style={{ color: '#ff914d', marginLeft: '0.25rem' }}>({server})</span>

                  )}

                </div>

                {idx < steps.length - 1 && (

    @@ -402,7 +404,7 @@ export default function QuickstartFilter({defaultLanguage = null}) {
  
                      <div className="wizard-option-radio">

                        {language === lang.name && <FaCheck size={10} color="#fff" />}

                      </div>

                      <div className="wizard-option-icon" style={{color: lang.color}}>

                      <div className="wizard-option-icon" style={{ color: lang.color }}>

                        {lang.icon}

                      </div>

                      <span className="wizard-option-label">{lang.name}</span>

    @@ -417,15 +419,15 @@ export default function QuickstartFilter({defaultLanguage = null}) {
  
              <>

                <h3 className="wizard-title">Select your environment</h3>

                <p className="wizard-subtitle">Choose where you want to run the application server</p>

                <div className="wizard-options" style={{gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))'}}>

                <div className="wizard-options" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))' }}>

                  {servers.map((srv) => (

                    <button

                      key={srv.name}

                      className={`wizard-option ${server === srv.name ? 'selected' : ''}`}

                      onClick={() => handleServerSelect(srv.name)}

                      style={{flexDirection: 'column', alignItems: 'flex-start', gap: '0.5rem'}}

                      style={{ flexDirection: 'column', alignItems: 'flex-start', gap: '0.5rem' }}

                    >

                      <div style={{display: 'flex', alignItems: 'center', gap: '0.75rem', width: '100%'}}>

                      <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', width: '100%' }}>

                        <div className="wizard-option-radio">

                          {server === srv.name && <FaCheck size={10} color="#fff" />}

                        </div>

    @@ -434,7 +436,7 @@ export default function QuickstartFilter({defaultLanguage = null}) {
  
                        </div>

                        <span className="wizard-option-label">{srv.name}</span>

                      </div>

                      <p className="wizard-option-desc" style={{marginLeft: '3.5rem'}}>{srv.description}</p>

                      <p className="wizard-option-desc" style={{ marginLeft: '3.5rem' }}>{srv.description}</p>

                    </button>

                  ))}

                </div>

src/components/QuickStartList.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -395,6 +395,26 @@ const quickstarts = [ @@
           "A sample app to demonstrate Keploy integration capabilities using TypeScript and Nhost.",
         link: "/docs/quickstart/samples-typescript/#running-the-app-using-docker",
       },
+      // Ruby list
+      {
+        title: "Sinatra + Postgres",
+        language: "Ruby",
+        server: "Docker",
+        description:
+          "A sample User CRUD app to demonstrate how seamlessly Keploy integrates with Sinatra and PostgreSQL.",
+        link: "/docs/quickstart/samples-sinatra-postgres/#using-docker-compose-",
+      },
+      {
+        title: "Sinatra + Postgres",
+        language: "Ruby",
+        server: "Local",
+        description:
+          "A sample User CRUD app to demonstrate how seamlessly Keploy integrates with Sinatra and PostgreSQL.",
+        link: "/docs/quickstart/samples-sinatra-postgres/#running-app-locally-on-linuxwsl-",
+      },
     ];
     export default quickstarts;

static/img/sinatra-postgres/bundle-install.png

Sorry, something went wrong. Reload?