@platformatic/composer 3.0.0-alpha.5 → 3.0.0-alpha.8

package/lib/utils.js

@@ -1,16 +0,0 @@
-export function prefixWithSlash (url) {
-  if (typeof url === 'string') {
-    return url.startsWith('/') ? url : `/${url}`
-  }
-  return ''
-}
-
-/**
- * detect if a service if fetchable, so if it has configuration to retrieve schema info (openapi or gql)
- * a service can have openapi and/or gql either from a remote service or from file
- * note service.origin is always been set if missing at index.js/platformaticComposer
- * @returns {boolean}
- */
-export function isFetchable (service) {
-  return Boolean((service?.openapi && service.openapi.url) || service?.graphql)
-}

package/lib/versions/2.0.0.js

@@ -1,9 +0,0 @@
-import { version } from '../schema.js'
-
-export default {
-  version: '2.0.0',
-  up (config) {
-    config.$schema = `https://schemas.platformatic.dev/@platformatic/composer/${version}.json`
-    return config
-  }
-}

package/lib/versions/3.0.0.js

@@ -1,14 +0,0 @@
-export default {
-  version: '2.99.0',
-  up (config) {
-    if (typeof config.plugins?.typescript !== 'undefined') {
-      delete config.plugins.typescript
-    }
-
-    if (typeof config.clients !== 'undefined') {
-      delete config.clients
-    }
-
-    return config
-  }
-}

package/public/images/dark_mode.svg

@@ -1,3 +0,0 @@
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.38034 22.9538C3.01077 12.1815 12.2916 6.49615 17.2282 5C14.7599 8.49103 11.3043 16.9692 17.2282 22.9538C23.1521 28.9385 31.5444 25.4474 35 22.9538C33.8152 32.5292 25.6205 34.9231 21.6712 34.9231C17.2282 35.4218 7.74991 33.7262 5.38034 22.9538Z" stroke="#00283D" stroke-width="2" stroke-linejoin="round"/>
-</svg>

package/public/images/ellipse.svg

@@ -1,21 +0,0 @@
-<svg width="1108" height="560" viewBox="0 0 1108 560" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d_6900_31360)">
-<circle cx="554" cy="2" r="550" fill="url(#paint0_radial_6900_31360)" fill-opacity="0.2" shape-rendering="crispEdges"/>
-</g>
-<defs>
-<filter id="filter0_d_6900_31360" x="0" y="-548" width="1108" height="1108" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6900_31360"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_6900_31360" result="shape"/>
-</filter>
-<radialGradient id="paint0_radial_6900_31360" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(554 2) rotate(90) scale(550)">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</radialGradient>
-</defs>
-</svg>

package/public/images/external-link.svg

@@ -1,5 +0,0 @@
-<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.33334 2.8689H14.3333V7.8689" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M8.33334 4.8689H3.33334C2.78106 4.8689 2.33334 5.31661 2.33334 5.8689V13.8689C2.33334 14.4212 2.78106 14.8689 3.33334 14.8689H11.3333C11.8856 14.8689 12.3333 14.4212 12.3333 13.8689V8.8689" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M13.8333 3.3689L8.33334 8.8689" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/public/images/graphiql.svg

@@ -1,10 +0,0 @@
-<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M3.41619 10.9619L8.50021 3.17578L13.5835 10.9619H3.41619Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M3.41619 5.78985V11.0173L8.50021 13.6307L13.5835 11.0173V5.78985L8.50021 3.17578L3.41619 5.78985Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M8.49996 3.98263C9.00035 3.98263 9.40599 3.62139 9.40599 3.17577C9.40599 2.73014 9.00035 2.3689 8.49996 2.3689C7.99957 2.3689 7.59393 2.73014 7.59393 3.17577C7.59393 3.62139 7.99957 3.98263 8.49996 3.98263Z" fill="white" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M3.41669 6.57358C3.91708 6.57358 4.32272 6.21233 4.32272 5.76671C4.32272 5.32109 3.91708 4.95984 3.41669 4.95984C2.9163 4.95984 2.51065 5.32109 2.51065 5.76671C2.51065 6.21233 2.9163 6.57358 3.41669 6.57358Z" fill="white" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M13.5832 6.57358C14.0836 6.57358 14.4893 6.21233 14.4893 5.76671C14.4893 5.32109 14.0836 4.95984 13.5832 4.95984C13.0828 4.95984 12.6772 5.32109 12.6772 5.76671C12.6772 6.21233 13.0828 6.57358 13.5832 6.57358Z" fill="white" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M8.51128 14.3593C9.01164 14.354 9.41244 13.9885 9.4065 13.5429C9.40056 13.0973 8.99013 12.7404 8.48978 12.7457C7.98943 12.751 7.58862 13.1165 7.59456 13.5621C7.6005 14.0077 8.01093 14.3646 8.51128 14.3593Z" fill="white" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M13.594 11.7684C14.0944 11.7631 14.4952 11.3976 14.4892 10.952C14.4833 10.5064 14.0729 10.1494 13.5725 10.1547C13.0722 10.16 12.6714 10.5255 12.6773 10.9711C12.6832 11.4167 13.0937 11.7736 13.594 11.7684Z" fill="white" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M3.42747 11.7688C3.92783 11.7636 4.32863 11.398 4.32269 10.9525C4.31675 10.5069 3.90632 10.1499 3.40597 10.1552C2.90562 10.1605 2.50481 10.526 2.51075 10.9716C2.51669 11.4172 2.92712 11.7741 3.42747 11.7688Z" fill="white" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/public/images/graphql.svg

@@ -1,10 +0,0 @@
-<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.58282 11.4619L8.66684 3.67578L13.7501 11.4619H3.58282Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M3.58282 6.28985V11.5173L8.66684 14.1307L13.7501 11.5173V6.28985L8.66684 3.67578L3.58282 6.28985Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M8.66659 4.48263C9.16698 4.48263 9.57262 4.12139 9.57262 3.67577C9.57262 3.23014 9.16698 2.8689 8.66659 2.8689C8.1662 2.8689 7.76056 3.23014 7.76056 3.67577C7.76056 4.12139 8.1662 4.48263 8.66659 4.48263Z" fill="white" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M3.58331 7.07358C4.0837 7.07358 4.48934 6.71233 4.48934 6.26671C4.48934 5.82109 4.0837 5.45984 3.58331 5.45984C3.08292 5.45984 2.67728 5.82109 2.67728 6.26671C2.67728 6.71233 3.08292 7.07358 3.58331 7.07358Z" fill="white" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M13.7499 7.07358C14.2502 7.07358 14.6559 6.71233 14.6559 6.26671C14.6559 5.82109 14.2502 5.45984 13.7499 5.45984C13.2495 5.45984 12.8438 5.82109 12.8438 6.26671C12.8438 6.71233 13.2495 7.07358 13.7499 7.07358Z" fill="white" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M8.6779 14.8593C9.17825 14.854 9.57906 14.4885 9.57312 14.0429C9.56718 13.5973 9.15675 13.2404 8.6564 13.2457C8.15604 13.251 7.75524 13.6165 7.76118 14.0621C7.76712 14.5077 8.17755 14.8646 8.6779 14.8593Z" fill="white" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M13.7607 12.2684C14.261 12.2631 14.6618 11.8976 14.6559 11.452C14.6499 11.0064 14.2395 10.6494 13.7391 10.6547C13.2388 10.66 12.838 11.0255 12.8439 11.4711C12.8499 11.9167 13.2603 12.2736 13.7607 12.2684Z" fill="white" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M3.5941 12.2688C4.09445 12.2636 4.49526 11.898 4.48932 11.4525C4.48338 11.0069 4.07295 10.6499 3.57259 10.6552C3.07224 10.6605 2.67144 11.026 2.67738 11.4716C2.68332 11.9172 3.09375 12.2741 3.5941 12.2688Z" fill="white" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/public/images/light_mode.svg

@@ -1,11 +0,0 @@
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M26 13L31 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M9 8L14 13" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M14 28L9 33" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M31 33L26 28" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M10.0713 20L5 20" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<circle cx="20.0713" cy="20" r="6" stroke="white" stroke-width="2"/>
-<path d="M30.0712 20.0001L35 20" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M20 29.9287L20 34.9999" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M20.0001 9.92876L20 4.99999" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/public/images/openapi.svg

@@ -1,13 +0,0 @@
-<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M12.5 2.3689H13.5C14.0523 2.3689 14.5 2.81661 14.5 3.3689V9.3689C14.5 9.92118 14.0523 10.3689 13.5 10.3689H3.5C2.94772 10.3689 2.5 9.92118 2.5 9.3689V3.3689C2.5 2.81661 2.94772 2.3689 3.5 2.3689H4.5" stroke="white" stroke-linecap="round"/>
-  <rect x="6.5" y="10.3689" width="4" height="2" stroke="white"/>
-  <path d="M4.5 13.3689C4.5 12.8166 4.94772 12.3689 5.5 12.3689H11.5C12.0523 12.3689 12.5 12.8166 12.5 13.3689V14.3689H4.5V13.3689Z" stroke="white"/>
-  <g clip-path="url(#clip0_6967_57)">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.20444 1.3689C9.29333 1.3689 9.36444 1.44223 9.36444 1.53112V3.33334L10.6333 2.05779C10.6956 1.99556 10.7978 1.99556 10.86 2.05779L11.8156 3.02223C11.8778 3.08445 11.8778 3.18445 11.8178 3.2489H11.8156L10.5511 4.52667H12.3378C12.4267 4.52667 12.4978 4.60001 12.4978 4.6889V6.05112C12.4978 6.14001 12.4267 6.21334 12.3378 6.21334H10.5511L11.8156 7.4889C11.8778 7.55112 11.8778 7.65112 11.8178 7.71556H11.8156L10.86 8.68223C10.7978 8.74445 10.7 8.74445 10.6356 8.68445H10.6333L9.37111 7.40667V9.2089C9.37111 9.29779 9.3 9.37112 9.21111 9.37112H7.86C7.77111 9.37112 7.7 9.29779 7.7 9.2089V8.26445C7.7 7.96445 7.81778 7.67779 8.02667 7.46445L9.75556 5.71334C9.94222 5.52445 9.94222 5.21556 9.75556 5.02667L8.03111 3.2889C7.82 3.07556 7.70222 2.7889 7.70222 2.48667V1.53112C7.70222 1.44223 7.77333 1.3689 7.86222 1.3689H9.20667H9.20444ZM6.36 2.08001L6.36444 2.08445L9.30667 5.03556C9.49556 5.22445 9.49556 5.53112 9.30667 5.72001L6.37111 8.68001C6.30889 8.74223 6.20667 8.74445 6.14444 8.68001L5.18889 7.73556C5.12667 7.67334 5.12444 7.57334 5.18444 7.51112V7.50667L6.46 6.21779H4.66222C4.57333 6.21779 4.5 6.14445 4.5 6.05556V4.69556C4.5 4.60667 4.57111 4.53334 4.66222 4.53334H6.45778L5.18889 3.26667C5.12667 3.20445 5.12667 3.10223 5.18889 3.03779L6.13333 2.08223C6.19556 2.02001 6.29556 2.01779 6.35778 2.07779L6.36 2.08001Z" fill="white"/>
-  </g>
-  <defs>
-  <clipPath id="clip0_6967_57">
-  <rect width="8" height="8" fill="white" transform="translate(4.5 1.3689)"/>
-  </clipPath>
-  </defs>
-</svg>

package/public/images/platformatic-logo-dark.svg

@@ -1,30 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 568.18 568.18">
-  <defs>
-    <style>
-      .cls-1 {
-        stroke: #00fe84;
-      }
-
-      .cls-1, .cls-2 {
-        fill: none;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        stroke-width: 16.34px;
-      }
-
-      .cls-2 {
-        stroke: #fff;
-      }
-    </style>
-  </defs>
-  <g>
-    <line class="cls-1" x1="148.26" y1="317.46" x2="148.26" y2="389.92"/>
-    <polyline class="cls-1" points="176.75 303.19 234.68 336.63 321.11 286.74 321.11 186.94 234.68 137.04 148.26 186.94 148.26 273.55"/>
-    <polyline class="cls-1" points="176.75 334.87 176.75 303.19 205.15 285.91"/>
-  </g>
-  <polyline class="cls-2" points="466.14 259.75 501.19 280.47 501.19 301.18 466.14 321.89"/>
-  <polyline class="cls-2" points="106.23 210.58 66.98 233.24 66.98 334.38 105.4 356.56"/>
-  <polyline class="cls-2" points="176.75 376.88 176.75 399.34 234.33 431.14 278.53 405.35 278.17 358.41"/>
-  <polyline class="cls-2" points="321.66 332.06 321.66 356.76 363.05 380.98 423.55 344.88 423.55 246.39 364.01 212.25"/>
-</svg>

package/public/images/platformatic-logo-light.svg

@@ -1,30 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 568.18 568.18">
-  <defs>
-    <style>
-      .cls-1 {
-        stroke: #00050b;
-      }
-
-      .cls-1, .cls-2 {
-        fill: none;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        stroke-width: 16.73px;
-      }
-
-      .cls-2 {
-        stroke: #00fe84;
-      }
-    </style>
-  </defs>
-  <g>
-    <line class="cls-2" x1="144.97" y1="318.27" x2="144.97" y2="392.48"/>
-    <polyline class="cls-2" points="174.15 303.65 233.49 337.91 322.01 286.8 322.01 184.58 233.49 133.48 144.97 184.58 144.97 273.29"/>
-    <polyline class="cls-2" points="174.15 336.1 174.15 303.66 203.24 285.96"/>
-  </g>
-  <polyline class="cls-1" points="470.56 259.16 506.46 280.38 506.46 301.59 470.56 322.81"/>
-  <polyline class="cls-1" points="101.92 208.8 61.72 232.01 61.72 335.6 101.07 358.32"/>
-  <polyline class="cls-1" points="174.15 379.13 174.15 402.14 233.12 434.7 278.4 408.29 278.03 360.22"/>
-  <polyline class="cls-1" points="322.57 333.23 322.57 358.53 364.96 383.33 426.93 346.35 426.93 245.48 365.94 210.51"/>
-</svg>

package/public/images/reverse-proxy.svg

@@ -1,8 +0,0 @@
-<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2 8.8689H14" stroke="white" stroke-linejoin="round"/>
-<circle cx="8" cy="8.8689" r="6" stroke="white"/>
-<path d="M3 4.8689C3.5 5.20223 4.8 5.8689 8 5.8689C11.2 5.8689 12.8333 5.03556 13 4.8689" stroke="white" stroke-linejoin="round"/>
-<path d="M8 14.8689C8.66667 14.2689 10 12.7089 10 8.8689C10 5.0289 8.33333 3.0689 8 2.8689" stroke="white" stroke-linejoin="round"/>
-<path d="M8 14.8689C7.33333 14.2689 6 12.7089 6 8.8689C6 5.0289 7.66667 3.0689 8 2.8689" stroke="white" stroke-linejoin="round"/>
-<path d="M13 12.8689C12.5 12.5356 11.2 11.8689 8 11.8689C4.8 11.8689 3.16667 12.7022 3 12.8689" stroke="white" stroke-linejoin="round"/>
-</svg>

package/public/images/triangle_dark.svg

@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg">
-<path d="M2.34277 4.5L0.17771 0.75L4.50784 0.75L2.34277 4.5Z" fill="#00050B" />
-</svg>

package/public/images/triangle_light.svg

@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg">
-<path d="M2.34277 4.5L0.17771 0.75L4.50784 0.75L2.34277 4.5Z" fill="white" />
-</svg>

package/public/index.html

@@ -1,253 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="./images/favicon.ico" />
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800&display=swap" rel="stylesheet">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Platformatic Composer</title>
-    <style>
-      body {
-        width: 100%;
-        height: 100vh;
-        overflow-y: auto;
-        overflow-x: hidden;
-        --secondary-color: #FFFFFF;
-        --primary-color: #00050B;
-        --primary-color-rgb: 0, 5, 11;
-        --secondary-color-rgb: 255, 255, 255;
-        --theme-img: url('./images/light_mode.svg');
-        --triangle-url: url('./images/triangle_light.svg');
-      }
-
-      body.light-theme {
-        --secondary-color: #001825;
-        --primary-color: #FFFFFF;
-        --secondary-color-rgb: 0, 5, 11;
-        --primary-color-rgb: 255, 255, 255;
-        --theme-img: url('./images/dark_mode.svg');
-        --triangle-url: url('./images/triangle_dark.svg');
-      }
-
-      body {
-        background: var(--primary-color);
-      }
-
-      :root {
-        font-family: Montserrat, Inter, Avenir, Helvetica, Arial, sans-serif;
-        font-size: 16px;
-        line-height: 24px;
-        font-weight: 400;
-
-        color-scheme: light dark;
-        color: inherit;
-        
-        position: relative;
-        font-synthesis: none;
-        text-rendering: optimizeLegibility;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-text-size-adjust: 100%;
-      }
-
-
-      a {
-        font-weight: 600;
-        color: var(--secondary-color);
-        text-decoration: inherit;
-        width: 100%;
-        text-align: center;
-        padding: 4px 0px;
-      }
-      .button-container a:hover {
-        background-color: rgba(var(--secondary-color-rgb), 0.3);
-      }
-
-      .text-opacque {
-        opacity: 0.7;
-      }
-      .text-center {
-        text-align: center;
-      }
-
-      .button-container {
-        display: flex;
-        column-gap: 0.5rem;
-        justify-content: center;
-        align-items: start;
-        margin: 2rem 0;
-      }
-
-      .buttons-list-container {
-        display: flex;
-        flex-direction: column;
-        row-gap: 1rem;
-        justify-content: center;
-        align-items: start;
-      }
-
-      .button-link {
-        width: 233px;
-        border: 1px solid var(--secondary-color);
-        border-radius: 4px;
-        padding: 8px 16px;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        flex-grow: 1;
-      }
-
-      .button-link > img {
-        margin-right: 0.5rem;
-      }
-      button {
-        border-radius: 8px;
-        border: 1px solid transparent;
-        padding: 0.6em 1.2em;
-        font-size: 1em;
-        font-weight: 500;
-        font-family: inherit;
-        background-color: #1a1a1a;
-        cursor: pointer;
-        transition: border-color 0.25s;
-      }
-      button:hover {
-        border-color: #646cff;
-      }
-      button:focus,
-      button:focus-visible {
-        outline: 4px auto -webkit-focus-ring-color;
-      }
-
-      #root {
-        width: 100%;
-        min-height: inherit;
-        height: 100%;
-        display: flex;
-        position: relative;
-        z-index: 20;
-      }
-
-      #content {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        margin: auto;
-        position: relative;
-        z-index: 20;
-        color: var(--secondary-color);
-      }
-
-      .plt-triangle-container {
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: 25%;
-        height: 50vH;
-        z-index: -1;
-        content: ''; 
-        background: var(--triangle-url) repeat;
-        opacity: 0.25;
-      }
-
-      .plt-triangle-content-opacque {
-        position: absolute;
-        height: 100%;
-        width: 100%;
-        top: 0;
-        left: 0;
-        content: '';
-        background: linear-gradient(to top, rgba(var(--primary-color-rgb), 1), rgba(var(--primary-color-rgb), 0.2) 43%);
-      }
-
-      #button-theme-selector {
-        border: none;
-        position: absolute;
-        top: 2rem;
-        right: 3rem;
-        width: 40px;
-        height: 40px;
-        background: var(--theme-img);
-        outline: none;
-        z-index: 1;
-      }
-
-      .text-desktop-display {
-        font-family: Inter;
-        font-size: 4rem;
-        font-weight: 600;
-        line-height: 5rem;
-        text-align: center;
-        margin: 0;
-      }
-
-      .text-desktop-body-large {
-        font-family: Inter;
-        font-size: 1.125rem;
-        font-weight: 300;
-        line-height: 1.688rem;
-        text-align: center;
-      }
-      
-      a.external-link {
-        color: #2588E4;
-        font-weight: 400;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="root">
-      <div class="plt-triangle-container"><div class="plt-triangle-content-opacque"></div></div>
-      <button id="button-theme-selector" type="button" class="theme-selector" alt="theme selector" onclick="toggleLightMode()"></button>
-      
-      <div id="content">
-        <img id="logo" height="256" />
-        <p class="text-desktop-display"><span>Welcome to</span><br/><span class="text-main-green">Platformatic Composer</span></p>
-        <div class="button-container">
-          <a id="openapi-link" target="_blank" class="button-link">
-            <img src="./images/openapi.svg" />
-            OpenAPI Documentation
-          </a>
-          <a id="graphql-link" target="_blank" class="button-link">
-            <img src="./images/graphiql.svg" />
-            GraphiQL
-          </a>
-        </div>
-        <a href="https://docs.platformatic.dev" target="_blank" class="external-link">Explore our documentation</a>
-      </div>
-    </div>
-
-    <script>
-      let currentPath = window.location.pathname
-
-      if (!currentPath.endsWith('/')) {
-        currentPath += '/'
-      }
-    
-      const openApiLink = document.getElementById('openapi-link')
-      openApiLink.href = currentPath + 'documentation'
-
-      const graphqlLink = document.getElementById('graphql-link')
-      graphqlLink.href = currentPath + 'graphiql'
-
-      const prefersLightScheme = window.matchMedia('(prefers-color-scheme: light)');
-      if (prefersLightScheme.matches) {
-        document.body.classList.add('light-theme');
-        document.getElementById('logo').src = currentPath + 'images/platformatic-logo-light.svg'
-      } else {
-        document.body.classList.remove('light-theme');
-        document.getElementById('logo').src = currentPath + 'images/platformatic-logo-dark.svg'
-      }
-      
-      const toggleLightMode = function() {
-        document.body.classList.toggle('light-theme');
-        if (document.body.classList.contains('light-theme')) {
-          document.getElementById('logo').src = currentPath + 'images/platformatic-logo-light.svg'
-        } else {
-          document.getElementById('logo').src = currentPath + 'images/platformatic-logo-dark.svg'
-        }
-      }
-    </script>
-  </body>
-</html>

package/public/index.njk

@@ -1,101 +0,0 @@
-{% set origin = window.location.origin %}
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="./images/favicon.ico" />
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="./main.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Platformatic Composer</title>
-  </head>
-  <body>
-    <div id="root">
-      <div class="plt-triangle-container"><div class="plt-triangle-content-opacque"></div></div>
-      <button id="button-theme-selector" type="button" class="theme-selector" alt="theme selector" onclick="toggleLightMode()"></button>
-      
-      <div id="content">
-        <img id="logo" height="256" />
-        <p class="text-desktop-display"><span>Welcome to</span><br/><span class="text-main-green">Platformatic Composer</span></p>
-        <div class="button-container">
-          {% if hasOpenAPIServices %}
-          <a id="openapi-link" target="_blank" class="button-link" href="documentation">
-            <img src="./images/openapi.svg" />
-            OpenAPI Documentation
-          </a>
-          {% endif %}
-          {% if hasGraphQLServices %}
-          <a id="graphql-link" target="_blank" class="button-link" href="graphiql">
-            <img src="./images/graphiql.svg" />
-            GraphiQL
-          </a>
-          {% endif %}
-        </div>
-        <a href="https://docs.platformatic.dev" target="_blank" class="plt-doc-link">Explore our documentation</a>
-
-        <div class="services-container">
-          {% for key, value in services %}
-          {% if value.services.length %}
-          <div class="service-type">
-            <div class="service-type-name">
-              <img src="{{ value.icon }}" alt="{{ value.title }}">
-              {{ value.title }} <span class="count">({{ value.services.length }})</span></div>
-            <div class="services-list">
-              {% for svc in value.services %}
-              <div class="service-details">
-                <div>
-                  <div class="service-title">{{ svc.id }}</div>
-                  {% if key === 'proxy' %} 
-                    <div class="service-path">{{ svc.proxy.prefix }}</div>
-                  {% elif key === 'openapi' %} 
-                    <div class="service-path">/{{ svc.id }}</div>
-                  {% endif %} 
-                </div>
-                {% if key === 'proxy' %} 
-                <a id="{{ key }}-{{ svc.id }}-external-link" target="_blank">
-                  <img src="./images/external-link.svg" alt="External Link">
-                </a>
-                {% endif %} 
-              </div>
-              {% endfor %}
-              
-            </div>
-          </div>
-          {% endif %}
-          {% endfor %}    
-        </div>
-      </div>
-    </div>
-
-    <script>
-      let currentPath = window.location.pathname
-      const href = window.location.href.replace(/\/$/, '')
-      {% for key, value in services %}
-        {% if key === 'proxy' %}
-          {% if value.services.length %}
-            {% for svc in value.services %}
-        document.getElementById('{{ key }}-{{ svc.id}}-external-link').href = href + '{{ svc.externalLink }}'
-            {% endfor %}
-          {% endif %}
-        {% endif %}
-      {% endfor %}
-      const prefersLightScheme = window.matchMedia('(prefers-color-scheme: light)');
-      if (prefersLightScheme.matches) {
-        document.body.classList.add('light-theme');
-        document.getElementById('logo').src = currentPath + 'images/platformatic-logo-light.svg'
-      } else {
-        document.body.classList.remove('light-theme');
-        document.getElementById('logo').src = currentPath + 'images/platformatic-logo-dark.svg'
-      }
-      
-      const toggleLightMode = function() {
-        document.body.classList.toggle('light-theme');
-        if (document.body.classList.contains('light-theme')) {
-          document.getElementById('logo').src = currentPath + 'images/platformatic-logo-light.svg'
-        } else {
-          document.getElementById('logo').src = currentPath + 'images/platformatic-logo-dark.svg'
-        }
-      }
-    </script>
-  </body>
-</html>