Merge pull request #3 from rocket-org-imdeepmind/feature/#2

imdeepmind · web-flow · commit 622a652697a4 · 2025-03-11T15:42:07.000+05:30
#2: Added chnages for new Rocket
diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml
@@ -23,4 +23,4 @@ jobs:
           cache: "npm"
       - run: npm cache clean --force
       - run: npm ci
-      - run: npm run eslint:check
+      - run: npm run lint:check
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1 +1 @@
-npm run eslint:check
+npm run lint:check
diff --git a/README.md b/README.md
@@ -1,13 +1,14 @@
-# RocketRedoc
+# RedocWeb
 
-RocketRedoc is a hosted Redoc UI instance that allows users to visualize and interact with OpenAPI documentation. By simply passing the URL of an OpenAPI JSON schema, users can explore APIs effortlessly.
+RedocWeb is a hosted Redoc UI instance that allows users to visualize and interact with OpenAPI documentation. By simply passing the URL of an OpenAPI JSON schema, users can explore APIs effortlessly.
 
 ## How to Use
 
-To utilize RocketRedoc, follow these simple steps:
+To utilize RedocWeb, follow these simple steps:
 
-1. Navigate to [RocketRedoc](https://redoc.rocketapi.net/).
+1. Navigate to [RedocWeb](https://redoc.rocketapi.net/).
 2. Append `?url=<open_api_schema_url>` to the URL, replacing `<open_api_schema_url>` with the URL of your OpenAPI JSON schema. For example:
+
    ```
    https://redoc.rocketapi.net/?url=https://example.com/openapi.json
    ```
@@ -18,15 +19,17 @@ You will now be directed to a Redoc UI instance displaying the documentation spe
 
 ## Features
 
-- **Easy Visualization**: RocketRedoc provides an intuitive interface for exploring OpenAPI documentation.
+- **Easy Visualization**: RedocWeb provides an intuitive interface for exploring OpenAPI documentation.
 - **Hosted Solution**: Eliminates the need for setting up Redoc locally, making API exploration hassle-free.
 
 ## Contributing
+
 Contributions are welcome! If you encounter any issues or have suggestions for improvements, feel free to open an issue or submit a pull request.
 
 ## Support
+
 For any inquiries or support requests, please contact us at hello@rocketapi.net.
 
 ## License
-This project is licensed under the MIT License - see the LICENSE file for details.
 
+This project is licensed under the MIT License - see the LICENSE file for details.
diff --git a/index.html b/index.html
@@ -4,7 +4,17 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+      rel="stylesheet"
+    />
     <title>Redoc | Rocket: Create Backend APIs with Ease</title>
+    <meta
+      name="description"
+      content="Rocket API Redoc Documentation Viewer: Visualize and explore OpenAPI schemas for APIs built with Rocket, the no-code backend builder. Enter your OpenAPI URL to generate interactive API documentation"
+    />
   </head>
   <body>
     <div id="root"></div>
diff --git a/package.json b/package.json
@@ -1,16 +1,16 @@
 {
   "name": "rocket-redoc",
   "private": false,
-  "version": "v1.0.0",
+  "version": "v1.3.0",
   "type": "module",
   "author": "Abhishek Chatterjee",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
-    "eslint:check": "eslint --ext tsx,ts ./src",
-    "eslint:write": "eslint --ext tsx,ts --fix ./src",
+    "lint:check": "eslint --ext tsx,ts ./src",
+    "lint:write": "eslint --ext tsx,ts --fix ./src",
     "prepare": "husky"
   },
   "dependencies": {
diff --git a/public/logo.png b/public/logo.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,52 +1,269 @@
 import { RedocStandalone } from 'redoc'
+import { useState } from 'react'
 
 import './App.css'
 
+const RocketLogo = (): JSX.Element => <img src="/logo.png" width={80} />
+
 const styles = {
+  // Layout
   container: {
+    fontFamily: '"Inter", sans-serif',
+    maxWidth: '1200px',
+    margin: '0 auto',
+    padding: '0 20px'
+  },
+  header: {
+    display: 'flex' as const,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column' as const,
+    padding: '40px 0 30px'
+  },
+  branding: {
+    display: 'flex' as const,
+    alignItems: 'center',
+    marginBottom: '20px'
+  },
+  content: {
+    display: 'flex' as const,
+    flexDirection: 'column' as const,
+    alignItems: 'center',
     maxWidth: '600px',
-    margin: 'auto',
-    padding: '20px',
-    backgroundColor: '#f8f9fa',
+    margin: '0 auto 40px',
     textAlign: 'center' as const
   },
+  card: {
+    backgroundColor: '#f8f9fa',
+    borderRadius: '8px',
+    boxShadow: '0 2px 10px rgba(0,0,0,0.08)',
+    padding: '40px',
+    width: '100%',
+    marginTop: '30px'
+  },
+  // Typography
   title: {
+    fontSize: '36px',
+    fontWeight: 600,
     color: '#fb2645',
-    marginBottom: '20px'
+    margin: '0 0 0 12px'
+  },
+  subTitle: {
+    fontSize: '22px',
+    fontWeight: 500,
+    color: '#333',
+    margin: '0 0 24px 0'
   },
   text: {
     fontSize: '16px',
-    marginBottom: '10px'
+    lineHeight: '24px',
+    color: '#555',
+    margin: '0 0 24px 0'
+  },
+  link: {
+    color: '#fb2645',
+    textDecoration: 'none',
+    fontWeight: 500
+  },
+  // Form elements
+  inputGroup: {
+    display: 'flex' as const,
+    width: '100%',
+    marginTop: '20px'
+  },
+  input: {
+    flex: 1,
+    padding: '12px 16px',
+    fontSize: '16px',
+    borderRadius: '4px 0 0 4px',
+    border: '1px solid #ddd',
+    borderRight: 'none',
+    outline: 'none',
+    transition: 'border-color 0.2s'
+  },
+  button: {
+    backgroundColor: '#fb2645',
+    color: 'white',
+    border: 'none',
+    borderRadius: '0 4px 4px 0',
+    padding: '0 24px',
+    fontSize: '16px',
+    fontWeight: 500,
+    cursor: 'pointer',
+    transition: 'background-color 0.2s'
+  },
+  // Special states
+  inputFocused: {
+    borderColor: '#fb2645'
+  },
+  buttonHover: {
+    backgroundColor: '#e51e3a'
+  },
+  footer: {
+    marginTop: '40px',
+    fontSize: '14px',
+    color: '#999'
+  },
+  // Banner
+  banner: {
+    fontFamily: '"Inter", sans-serif',
+    backgroundColor: '#000000',
+    color: 'white',
+    textAlign: 'center' as const,
+    padding: '12px 0px',
+    width: '100%',
+    position: 'relative' as const,
+    zIndex: 9999,
+    boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
+  },
+  bannerText: {
+    margin: 0,
+    fontSize: '15px',
+    color: '#fb2645'
+  },
+  bannerLink: {
+    color: '#fb2645',
+    fontWeight: 600,
+    textDecoration: 'underline'
   }
 }
 
-function App (): JSX.Element {
+const App = (): JSX.Element => {
+  // State to manage URL input
+  const [inputUrl, setInputUrl] = useState('')
+  const [inputFocused, setInputFocused] = useState(false)
+  const [buttonHovered, setButtonHovered] = useState(false)
+
+  // Handle URL from query parameters
   const params = window.location.search
-  const url = params.split('=').length > 1 ? params.split('=')[1] : ''
+  const url =
+    params.split('=').length > 1
+      ? decodeURIComponent(params.split('=')[1])
+      : ''
 
+  // Navigate to URL when form is submitted
+  const handleSubmit = (e: React.FormEvent): void => {
+    e.preventDefault()
+    if (inputUrl.trim().length > 0) {
+      window.location.href = `?url=${encodeURIComponent(inputUrl.trim())}`
+    }
+  }
+
+  // Banner component that shows when URL is present
+  const Banner = (): JSX.Element => (
+    <div style={styles.banner}>
+      <p style={styles.bannerText}>
+        Powered by{' '}
+        <a
+          href="https://rocketapi.net"
+          target="_blank"
+          rel="noopener noreferrer"
+          style={styles.bannerLink}
+        >
+          Rocket
+        </a>{' '}
+        - Build your backend with Rocket.
+      </p>
+    </div>
+  )
+
+  // If no URL parameter is provided, show the landing page
   if (url.length === 0) {
     return (
-      <div style={styles.container}>
-        <h1 style={styles.title}>Error: OpenAPI Schema URL Missing</h1>
-        <p style={styles.text}>
-          You need to pass the OpenAPI schema URL as a query string in the
-          following format:
-        </p>
-        <p style={styles.text}>
-          <i>https://redoc.rocketapi.net/?url=your_openapi_schema_url</i>
-        </p>
+      <div style={{ minHeight: '100vh' }}>
+        <div style={styles.container}>
+          <header style={styles.header}>
+            <div style={styles.branding}>
+              <RocketLogo />
+              <h1 style={styles.title}>Rocket API</h1>
+            </div>
+          </header>
+
+          <main style={styles.content}>
+            <h2 style={styles.subTitle}>OpenAPI Documentation Viewer</h2>
+            <p style={styles.text}>
+              Visualize and explore your API documentation with our Redoc UI
+              integration. Simply enter your OpenAPI schema URL below to get
+              started.
+            </p>
+
+            <div style={styles.card}>
+              <p style={styles.text}>Enter your OpenAPI schema URL:</p>
+
+              <form onSubmit={handleSubmit}>
+                <div style={styles.inputGroup}>
+                  <input
+                    type="url"
+                    placeholder="https://example.com/openapi.json"
+                    value={inputUrl}
+                    onChange={(e) => {
+                      setInputUrl(e.target.value)
+                    }}
+                    onFocus={() => {
+                      setInputFocused(true)
+                    }}
+                    onBlur={() => {
+                      setInputFocused(false)
+                    }}
+                    style={{
+                      ...styles.input,
+                      ...(inputFocused ? styles.inputFocused : {})
+                    }}
+                  />
+                  <button
+                    type="submit"
+                    onMouseEnter={() => {
+                      setButtonHovered(true)
+                    }}
+                    onMouseLeave={() => {
+                      setButtonHovered(false)
+                    }}
+                    style={{
+                      ...styles.button,
+                      ...(buttonHovered ? styles.buttonHover : {})
+                    }}
+                  >
+                    View Docs
+                  </button>
+                </div>
+              </form>
+            </div>
+
+            <footer style={styles.footer}>
+              <p>
+                Visit{' '}
+                <a
+                  href="https://rocketapi.net"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  style={styles.link}
+                >
+                  rocketapi.net
+                </a>{' '}
+                for information.
+              </p>
+              <p style={{ marginTop: '10px', fontSize: '14px', color: '#666' }}>
+                Rocket - Build your backend with Rocket.
+              </p>
+            </footer>
+          </main>
+        </div>
       </div>
     )
   }
 
+  // If URL is provided, show the Redoc UI with banner
   return (
-    <RedocStandalone
-      specUrl={url}
-      options={{
-        nativeScrollbars: true,
-        theme: { colors: { primary: { main: '#fb2645' } } }
-      }}
-    />
+    <div style={{ backgroundColor: 'white', height: '100vh' }}>
+      <Banner />
+      <RedocStandalone
+        specUrl={url}
+        options={{
+          nativeScrollbars: true,
+          theme: { colors: { primary: { main: '#fb2645' } } }
+        }}
+      />
+    </div>
   )
 }
 

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-npm run eslint:check`
	`1`	`+npm run lint:check`