Added more docs

docs/site/docs/customize-ui.md

@@ -3,3 +3,174 @@ sidebar_position: 3
 ---
 
 # Customize UI
+
+The Port Backstage plugin is designed with flexibility in mind, allowing you to fully customize how data is presented in your Backstage instance. Since the Port SDK returns standard JavaScript objects, you have complete control over the presentation layer.
+
+## Understanding the Data Structure
+
+When you fetch data using the Port SDK, you receive plain JavaScript objects that you can manipulate and render however you prefer. For example:
+
+```typescript
+// Example of data returned from Port SDK
+const entityData = {
+  id: "entity-123",
+  title: "My Service",
+  properties: {
+    owner: "team-a",
+    status: "production",
+    scorecard: {
+      score: 85,
+      rules: [
+        /* ... */
+      ],
+    },
+  },
+};
+```
+
+## Creating Custom Components
+
+You can create your own components to display Port data in ways that match your organization's needs:
+
+```typescript
+import { usePortEntity } from "@port-labs/backstage-plugin-port-frontend";
+
+const CustomEntityCard = () => {
+  const { entity, loading } = usePortEntity("entity-id");
+
+  if (loading) return <LoadingComponent />;
+
+  return (
+    <YourCustomCard>
+      {/* Render entity data however you want */}
+      <Title>{entity.title}</Title>
+      <StatusBadge status={entity.properties.status} />
+      {/* Add your custom styling and components */}
+    </YourCustomCard>
+  );
+};
+```
+
+## Customization Examples
+
+### 1. Custom Scorecard Visualization
+
+Instead of using the default scorecard view, you can create your own visualization:
+
+```typescript
+const CustomScorecard = () => {
+  const { scorecard } = usePortScorecard("scorecard-id");
+
+  return (
+    <CustomChart
+      score={scorecard.score}
+      rules={scorecard.rules}
+      // Add your custom styling and logic
+    />
+  );
+};
+```
+
+### 2. Custom Entity List
+
+Create your own layout for displaying multiple entities:
+
+```typescript
+const CustomEntityList = () => {
+  const { entities } = usePortEntities();
+
+  return (
+    <CustomGrid>
+      {entities.map((entity) => (
+        <CustomCard
+          key={entity.id}
+          title={entity.title}
+          metrics={entity.properties.metrics}
+          // Add your custom styling and components
+        />
+      ))}
+    </CustomGrid>
+  );
+};
+```
+
+## Integration with Existing Components
+
+You can easily integrate Port data with your existing Backstage components:
+
+```typescript
+import { Table } from "@backstage/core-components";
+
+const PortDataTable = () => {
+  const { entities } = usePortEntities();
+
+  const columns = [
+    { title: "Name", field: "title" },
+    { title: "Owner", field: "properties.owner" },
+    // Add more columns as needed
+  ];
+
+  return (
+    <Table
+      data={entities}
+      columns={columns}
+      // Use existing Backstage table features
+    />
+  );
+};
+```
+
+## Best Practices
+
+1. **Data Transformation**
+
+   - Create utility functions to transform Port data into your preferred format
+   - Keep transformation logic separate from presentation components
+
+2. **Component Reusability**
+
+   - Build reusable components that can handle different types of Port entities
+   - Use TypeScript interfaces to ensure type safety
+
+3. **Performance**
+
+   - Implement proper loading states
+   - Consider pagination for large data sets
+   - Use memoization when appropriate
+
+4. **Error Handling**
+   - Add proper error boundaries
+   - Provide meaningful feedback to users when data loading fails
+
+## Available Hooks
+
+The Port frontend plugin provides several hooks to help you access and manipulate data:
+
+- `usePortEntity`: Fetch a single entity
+- `usePortEntities`: Fetch multiple entities
+- `usePortScorecard`: Fetch scorecard data
+- `usePortActions`: Access available actions
+- And more...
+
+## Example Repository
+
+For more examples and inspiration, check out our [example repository](https://github.com/port-labs/backstage-plugin-examples) containing various customization scenarios and implementations.
+
+## Need Help?
+
+If you need assistance with customizing your Port Backstage plugin UI:
+
+- Check our [API documentation](https://docs.getport.io/api-reference/port-api)
+- Join our [Community Discord](https://discord.com/invite/port-labs)
+- Open an issue in our [GitHub repository](https://github.com/port-labs/backstage-plugin)
+
+Remember, the flexibility of the Port SDK means you're not limited to any predefined layouts or styles. You can create exactly the user experience you want for your developers.
+
+If you need assistance with customizing your Port Backstage plugin UI:
+
+- Check our [API documentation](https://docs.getport.io/api-reference/port-api)
+- Join our [Community Discord](https://discord.com/invite/port-labs)
+- Open an issue in our [GitHub repository](https://github.com/port-labs/backstage-plugin)
+
+3. **Performance**
+   - Implement proper loading states

docs/site/docs/data-security.md

@@ -4,4 +4,11 @@ sidebar_position: 7
 
 # Data handling & security
 
-Read more about how we handle data and security in the [Port official documentation](https://docs.getport.io/security).
+We do not store any secrets in Port SaaS. All secrets remain within your own infrastructure, and we never access them in the SaaS.
+
+The way we solve it is by using Ocean, our open-source data integration tool. which you can run on-prem. read more about it [here](https://ocean.getport.io/).
+
+The following diagram shows how the data flows between Ocean - on your own infrastructure - and Port, with only outgoing requests from your infrastructure to Port:
+![Ocean architecture](/img/ocean-architecture.svg)
+
+Read more about how we handle data and security in our [official documentation](https://docs.getport.io/security).

docs/site/docs/installation.md

@@ -3,3 +3,58 @@ sidebar_position: 2
 ---
 
 # Installation
+
+### Install Plugins
+
+Install frontend and backend plugins using yarn:
+
+```bash
+# Install backend plugin
+yarn add --cwd packages/backend @port-labs/backstage-plugin-port-backend
+
+# Install frontend plugin
+yarn add --cwd packages/app @port-labs/backstage-plugin-port-frontend
+```
+
+Then register the backend plugin in `packages/backend/src/index.ts`:
+
+```typescript
+backend.add(import("@port-labs/backstage-plugin-port-backend"));
+```
+
+Finally, add components as you like from the frontend plugin to your Backstage instance.
+
+For example, let's add the Scorecard component to the NavBar:
+
+in the file: `packages/app/src/App.tsx`, add the route:
+
+```typescript
+<Route path="/scorecards" element={<ScorecardsPage />} />
+```
+
+and then add the link to the NavBar, in the file: `packages/app/src/components/Root/Root.tsx`:
+
+```typescript
+<SidebarItem icon={DoneAllIcon} to="scorecards" text="Scorecards" />
+```
+
+![Scorecards page](/img/scorecards.png)
+
+### Configure Credentials
+
+1. In Port, on the top right, click on the `...` (three dots) and select **Credentials**.
+2. Generate API credentials (Client ID and Client Secret)
+3. Add these credentials to your Backstage's `app-config.yaml`:
+
+   ```yaml
+   port:
+     api:
+       baseUrl: https://api.getport.io
+       auth:
+         clientId: YOUR_CLIENT_ID
+         clientSecret: YOUR_CLIENT_SECRET
+   ```
+
+<br />
+
+Read more [find your Port credentials](https://docs.getport.io/build-your-software-catalog/custom-integration/api/#find-your-port-credentials)

docs/site/docs/intro.md

@@ -4,3 +4,36 @@ slug: /
 ---
 
 # Introduction
+
+The Port Backstage plugin allows you to ramp up your Backstage instance quickly.
+Building a developer portal from scratch can be a daunting task, but with the Port Backstage plugin, you can have a **fully functional portal in days not months**.
+
+<div style={{ textAlign: "center" }}>
+  <img src="img/plugin-base.png" alt="Port Backstage plugin" height="500" />
+</div>
+
+With this plugin, you can:
+
+- Build new plugin with **PortSDK** in days and not months
+- Consolidate data from multiple sources into a single, unified view
+- Implement governance and compliance through Port's rules engine and scorecards
+- Enable self-service actions for developers
+- Integrate with 50+ tools and services through Port's extensive integration library
+
+## Key benefits
+
+1. **Simplified Integration**: Connect to dozens of data sources through a single plugin, eliminating the need to manage multiple individual Backstage plugins.
+
+2. **Flexible Data Modeling**: Shape and customize your data model in Port to display exactly the information your teams need in Backstage.
+
+3. **Governance & Compliance**: Use Port's rules engine and scorecards to define, measure, and enforce standards across your software catalog.
+
+4. **Enhanced Developer Experience**: Provide developers with a more comprehensive and actionable view of their services, including compliance scores, actions, and data from various integrations.
+
+5. **Rapid Setup**: Get up and running quickly with Port's easy-to-use interface for configuring integrations and data models.
+
+6. **Continuous Updates**: Benefit from Port's ongoing development of new integrations and features without waiting for individual Backstage plugin updates.
+
+This plugin is designed to complement and enhance your existing Backstage setup, allowing you to build a more powerful and tailored developer portal efficiently. Whether you're just getting started with Backstage or looking to take your existing instance to the next level, the Port plugin offers a flexible and scalable solution for your software catalog and developer portal needs.
+
+Let's get started with setting up the Port Backstage plugin and exploring its capabilities!

docs/site/docusaurus.config.ts

@@ -83,8 +83,12 @@ const config: Config = {
           title: "Docs",
           items: [
             {
-              label: "Tutorial",
-              to: "/docs",
+              label: "Getting Started",
+              to: "/docs/getting-started",
+            },
+            {
+              label: "Introduction",
+              to: "/docs/",
             },
           ],
         },