add backstage templates

Signed-off-by: Pankaj Walke <[email protected]>

packages/backstage/chart/values.yaml

@@ -75,7 +75,7 @@ backstage:
         - allow: [Component, System, API, Resource, Location, Template]
       locations:
         - type: url
-          target: https://github.com/awslabs/backstage-templates-on-eks/blob/main/catalog-info.yaml
+          target: https://github.com/punkwalker/reference-implementation-aws/blob/main/templates/backstage/catalog-info.yaml
     kubernetes:
       serviceLocatorMethod:
         type: 'multiTenant'

templates/backstage/README.md

@@ -0,0 +1,3 @@
+# idpbuilder-localdev-backstage-templates-entities
+
+created by Git Repository controller for backstage-templates-entities in idpbuilder-localdev namespace

templates/backstage/app-with-bucket/skeleton/catalog-info.yaml

@@ -0,0 +1,48 @@
+apiVersion: backstage.io/v1alpha1
+kind: Resource
+metadata:
+  name: ${{values.name}}-bucket
+  description: Stores things
+  annotations:
+    argocd/app-name: ${{values.name | dump}}
+spec:
+  type: s3-bucket
+  owner: guests
+---
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: ${{values.name | dump}}
+  description: This is for testing purposes
+  annotations:
+    backstage.io/techdocs-ref: dir:.
+    backstage.io/kubernetes-label-selector: 'entity-id=${{values.name}}'
+    backstage.io/kubernetes-namespace: default
+    argocd/app-name: ${{values.name | dump}}
+  links:
+    - url: https://github.com/cnoe-punkwalker/${{values.name}}
+      title: Repo URL
+      icon: github
+spec:
+  owner: guests
+  lifecycle: experimental
+  type: service
+  system: ${{values.name | dump}}
+  dependsOn:
+    - resource:default/${{values.name}}-bucket
+---
+apiVersion: backstage.io/v1alpha1
+kind: System
+metadata:
+  name: ${{values.name | dump}}
+  description: An example system for demonstration purposes
+  annotations:
+    backstage.io/techdocs-ref: dir:.
+  links:
+    - url: https://github.com/cnoe-punkwalker/my-reference-implementation-aws
+      title: CNOE Repo
+      icon: github
+spec:
+  owner: guests
+  lifecycle: experimental
+  type: service

templates/backstage/app-with-bucket/skeleton/docs/idpbuilder.md

@@ -0,0 +1,46 @@
+[![Codespell][codespell-badge]][codespell-link]
+[![E2E][e2e-badge]][e2e-link]
+[![Go Report Card][report-badge]][report-link]
+[![Commit Activity][commit-activity-badge]][commit-activity-link]
+
+# IDP Builder
+
+Internal development platform binary launcher.
+
+> **WORK IN PROGRESS**: This tool is in a pre-release stage and is under active development.
+
+## About
+
+Spin up a complete internal developer platform using industry standard technologies like Kubernetes, Argo, and backstage with only Docker required as a dependency.
+
+This can be useful in several ways:
+* Create a single binary which can demonstrate an IDP reference implementation.
+* Use within CI to perform integration testing.
+* Use as a local development environment for platform engineers.
+
+## Getting Started
+
+Checkout our [documentation website](https://cnoe.io/docs/reference-implementation/installations/idpbuilder) for getting started with idpbuilder.
+
+## Community
+
+- If you have questions or concerns about this tool, please feel free to reach out to us on the [CNCF Slack Channel](https://cloud-native.slack.com/archives/C05TN9WFN5S).
+- You can also join our community meetings to meet the team and ask any questions. Checkout [this calendar](https://calendar.google.com/calendar/embed?src=064a2adfce866ccb02e61663a09f99147f22f06374e7a8994066bdc81e066986%40group.calendar.google.com&ctz=America%2FLos_Angeles) for more information.
+
+## Contribution
+
+Checkout the [contribution doc](./CONTRIBUTING.md) for contribution guidelines and more information on how to set up your local environment.
+
+
+<!-- JUST BADGES & LINKS -->
+[codespell-badge]: https://github.com/cnoe-io/idpbuilder/actions/workflows/codespell.yaml/badge.svg
+[codespell-link]: https://github.com/cnoe-io/idpbuilder/actions/workflows/codespell.yaml
+
+[e2e-badge]: https://github.com/cnoe-io/idpbuilder/actions/workflows/e2e.yaml/badge.svg
+[e2e-link]: https://github.com/cnoe-io/idpbuilder/actions/workflows/e2e.yaml
+
+[report-badge]: https://goreportcard.com/badge/github.com/cnoe-io/idpbuilder
+[report-link]: https://goreportcard.com/report/github.com/cnoe-io/idpbuilder
+
+[commit-activity-badge]: https://img.shields.io/github.amrom.workers.devmit-activity/m/cnoe-io/idpbuilder
+[commit-activity-link]: https://github.com/cnoe-io/idpbuilder/pulse

templates/backstage/app-with-bucket/skeleton/docs/index.md

@@ -0,0 +1,16 @@
+![cnoe logo](./images/cnoe-logo.png)
+
+# Example Basic Application
+
+Thanks for trying out this demo! In this example, we deployed a simple application with a S3 bucket using Crossplane.
+
+
+### idpbuilder 
+
+Checkout the idpbuilder website: https://cnoe.io/docs/reference-implementation/installations/idpbuilder
+
+Checkout the idpbuilder repository: https://github.com/cnoe-io/idpbuilder
+
+## Crossplane
+
+Checkout the Crossplane website: https://www.crossplane.io/

templates/backstage/app-with-bucket/skeleton/go.mod

@@ -0,0 +1,3 @@
+module ${{ values.name }}
+
+go 1.19

templates/backstage/app-with-bucket/skeleton/kustomize/base/cm-nginx.yaml

@@ -0,0 +1,200 @@
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: ${{ values.name }}-custom
+data:
+  index.html: |
+    <!DOCTYPE html>
+    <html>
+    <head>
+        <title>Welcome to ${{ values.name }}</title>
+        <style>
+            body {
+                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+                margin: 0;
+                padding: 0;
+                background-color: #f5f5f5;
+                color: #333;
+            }
+            .container {
+                min-height: 100vh;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+            }
+            h1 {
+                color: #2c3e50;
+                font-size: 2.5em;
+                margin-bottom: 20px;
+                text-transform: uppercase;
+                letter-spacing: 2px;
+                text-align: center;
+            }
+            .card {
+                width: 80%;
+                max-width: 800px;
+                background: white;
+                padding: 20px;
+                border-radius: 8px;
+                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+                text-align: center;
+                margin: 20px 0;
+            }
+            img {
+                max-width: 100%;
+                height: auto;
+            }
+            .env-card {
+                width: 80%;
+                max-width: 800px;
+                background: white;
+                padding: 20px;
+                border-radius: 8px;
+                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+                margin: 20px 0;
+            }
+            .env-item {
+                padding: 10px;
+                border-bottom: 1px solid #eee;
+                display: flex;
+                justify-content: space-between;
+                align-items: flex-start;
+            }
+            .env-label {
+                font-weight: bold;
+                color: #2c3e50;
+                margin-right: 20px;
+                flex: 0 0 30%;
+            }
+            .env-value {
+                color: #16a085;
+                flex: 1;
+                word-break: break-all;
+            }
+            #loading {
+                text-align: center;
+                padding: 20px;
+            }
+            .search-box {
+                width: 100%;
+                padding: 10px;
+                margin-bottom: 20px;
+                border: 1px solid #ddd;
+                border-radius: 4px;
+                font-size: 16px;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="container">
+            <div class="card">
+                <img src="https://raw.githubusercontent.com/cnoe-io/website/main/static/img/logo.png" 
+                    alt="CNOE Logo"
+                    width="500">
+                <h1 style="font-size: 2.8em; color: #2c3e50; text-align: center; margin: 30px 0; font-weight: 600; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">Welcome to ${{ values.name }} </h1>
+                <p style="font-size: 1.4em; font-weight: 500; color: #34495e; margin: 20px 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">This is a sample application for CNOE reference implementation!</p>
+                <p style="font-size: 1.2em; color: #2c3e50; margin: 10px 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">Learn more at <a href="https://cnoe.io" target="_blank" style="color: #3498db; text-decoration: none; font-weight: 600;">cnoe.io</a>.</p>
+            </div>
+            <div class="env-card">
+                <input type="text" class="search-box" id="searchBox" placeholder="Search environment variables...">
+                <div id="loading">Loading environment variables...</div>
+                <div id="envList"></div>
+            </div>
+        </div>
+        <script>
+            async function loadEnvVariables() {
+                try {
+                    const response = await fetch('/env.json');
+                    const envVars = await response.json();
+                    const envList = document.getElementById('envList');
+                    const loading = document.getElementById('loading');
+                    loading.style.display = 'none';
+
+                    const searchBox = document.getElementById('searchBox');
+
+                    function displayEnvVars(filter = '') {
+                        envList.innerHTML = '';
+                        const sortedVars = Object.keys(envVars).sort();
+
+                        sortedVars.forEach(key => {
+                            if (key.toLowerCase().includes(filter.toLowerCase()) || 
+                                envVars[key].toLowerCase().includes(filter.toLowerCase())) {
+                                const item = document.createElement('div');
+                                item.className = 'env-item';
+                                item.innerHTML = `
+                                    <span class="env-label">${key}</span>
+                                    <span class="env-value">${envVars[key]}</span>
+                                `;
+                                envList.appendChild(item);
+                            }
+                        });
+                    }
+
+                    searchBox.addEventListener('input', (e) => {
+                        displayEnvVars(e.target.value);
+                    });
+
+                    displayEnvVars();
+                } catch (error) {
+                    document.getElementById('loading').innerHTML = 'Error loading environment variables';
+                    console.error('Error:', error);
+                }
+            }
+
+            window.onload = loadEnvVariables;
+        </script>
+    </body>
+    </html>
+  startup.sh: |
+    #!/bin/bash
+    (
+        echo -n "{"
+        first=true
+        env | sort | while IFS= read -r line; do
+            # Skip empty lines
+            [ -z "$line" ] && continue
+
+            # Split on first = only
+            key="${line%%=*}"
+            value="${line#*=}"
+
+            # Skip if key is empty
+            [ -z "$key" ] && continue
+
+            # Add comma for all but first entry
+            if $first; then
+            first=false
+            printf "\n  "
+            else
+            printf ",\n  "
+            fi
+
+            # Properly escape JSON special characters
+            escaped_value=$(printf '%s' "$value" | sed 's/\\/\\\\/g; s/"/\\"/g; s/\n/\\n/g; s/\r/\\r/g; s/\t/\\t/g')
+            printf '"%s": "%s"' "$key" "$escaped_value"
+        done
+        printf "\n}\n"
+    ) > /tmp/env.json
+
+    nginx -g "daemon off;"
+---
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: ${{ values.name }}-nginx-conf
+data:
+  nginx.conf: |
+    server {
+        listen 80;
+        server_name localhost;
+
+        location / {
+            root   /usr/share/nginx/html;
+            index  index.html;
+        }
+
+        location /env.json {
+            alias /tmp/env.json;
+            default_type application/json;
+        }
+    }

templates/backstage/app-with-bucket/skeleton/kustomize/base/kustomization.yaml

@@ -0,0 +1,4 @@
+resources:
+  - nginx.yaml
+  - cm-nginx.yaml
+  - ${{ values.name }}.yaml