Added initial docs

Added docs

Added more docs

Update customize-ui.md

Reorder pages

backend-plugin/README.md

@@ -2,4 +2,4 @@
 
 To use these plugins you need to get a license from [Port](https://backstage-plugin.getport.io/)
 
-Read more about the Port Backstage Plugin in the [docs](https://port-labs.github.io/backstage-plugin/docs/intro)
+Read more about the Port Backstage Plugin in the [docs](https://port-labs.github.io/backstage-plugin/docs)

docs/site/docs/customize-ui.md

@@ -0,0 +1,153 @@
+---
+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...

docs/site/docs/data-security.md

@@ -0,0 +1,14 @@
+---
+sidebar_position: 7
+---
+
+# Data handling & 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/examples/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Examples",
+  "position": 6
+}

docs/site/docs/examples/jira-integration.md

@@ -0,0 +1,5 @@
+---
+sidebar_position: 2
+---
+
+# Jira integration

docs/site/docs/examples/plugin-catalog.md

@@ -0,0 +1,14 @@
+---
+sidebar_position: 1
+---
+
+# Plugin catalog
+
+You can build a catalog of the plugins that you have installed in your Backstage instance.
+The catalog will contain:
+
+- A list of all the plugins that you have installed
+- A search bar to search for plugins
+- A scorecard for each plugin that will show you the status of the plugin
+- A status indicator for each plugin
+- A kill switch to disable a plugin

docs/site/docs/features/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Features",
+  "position": 4
+}

docs/site/docs/features/actions.md

@@ -0,0 +1,5 @@
+---
+sidebar_position: 4
+---
+
+# Actions

docs/site/docs/features/automations.md

@@ -0,0 +1,5 @@
+---
+sidebar_position: 5
+---
+
+# Automations

docs/site/docs/features/catalog-builder.md

@@ -0,0 +1,5 @@
+---
+sidebar_position: 1
+---
+
+# Catalog builder

docs/site/docs/features/integrations.md

@@ -0,0 +1,5 @@
+---
+sidebar_position: 3
+---
+
+# Integrations

docs/site/docs/features/notifications.md

@@ -0,0 +1,5 @@
+---
+sidebar_position: 6
+---
+
+# Notifications

docs/site/docs/features/scorecards.md

@@ -0,0 +1,5 @@
+---
+sidebar_position: 2
+---
+
+# Scorecards