Initiated the connector page styling

en/identity-server/next/docs/references/connectors/index.md

@@ -0,0 +1,9 @@
+---
+template: templates/connectors.html
+---
+
+# Connectors
+
+This section provides details about available connectors. Use the integrations cards below for quick navigation.
+
+<!-- Content populates from the template file -->

en/identity-server/next/mkdocs.yml

@@ -852,6 +852,7 @@ nav:
     - References: references/index.md
     - About this release: references/about-this-release.md
     - Feature deprecation: references/wso2-identity-server-feature-deprecation.md
+    - Connectors: references/connectors/index.md
     - User management:
       - User roles: references/user-management/user-roles.md
       - Track user deletion: references/user-management/track-deletion.md

en/theme/material/assets/css/connectors.css

@@ -0,0 +1,183 @@
+/**
+ * Copyright (c) 2023-2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+ .integrations-list-container {
+    margin: auto;
+    max-width: 1240px;
+}
+
+[data-md-color-scheme=slate] .integrations-list-item {
+    background-color: rgb(30 30 30);
+    box-shadow: inset 0px 0px 0px 1px #4e4e4e;
+}
+
+.flex-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+}
+
+.flex-grid .integration-card {
+    flex: 0 1 calc(33.33% - 20px);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.integration-card-icon {
+    height: 50px !important;
+}
+
+.flex-grid .integration-card-header {
+    font-weight: 500;
+}
+
+.flex-grid .integration-card-description {
+    font-size: 0.6rem;
+    margin: 0px;
+}
+
+.integration-card-source-links {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-end;
+    margin-top: 20px;
+}
+
+@media (max-width: 768px) {
+    .flex-grid .integration-card {
+        flex: 0 1 calc(50% - 20px); /* On smaller screens, adjust so 2 cards fit per row */
+    }
+}
+
+@media (max-width: 480px) {
+    .flex-grid .integration-card {
+        flex: 0 1 100%; /* On very small screens, adjust so 1 card fits per row */
+    }
+}
+
+.integrations-list-item {
+    background-color: rgb(248, 248, 248);
+    margin: 0.7em 0;
+    border-radius: 6px;
+    transition: 0.3s;
+    box-shadow: inset 0px 0px 0px 1px #eeeeee;
+    padding: 10px;
+}
+
+.integrations-list-item-icon {
+    flex: 0 0 50px !important;
+}
+
+.integrations-list-item-icon img {
+    max-width: 50px !important;
+}
+
+.flex-row {
+    display: flex;
+}
+
+.flex-column {
+    flex: 1;
+}
+
+.tooltip {
+    position: relative;
+    display: inline;
+    line-height: 2;
+}
+
+.tooltip-text {
+    position: absolute;
+    visibility: hidden;
+    opacity: 0;
+    /* Start with zero opacity */
+    background-color: rgba(70, 70, 70, 255);
+    color: #f1f1f1;
+    padding: 0px 10px;
+    border-radius: 8px;
+    font-size: 14px;
+    white-space: nowrap;
+    z-index: 1;
+    bottom: 130%;
+    left: 50%;
+    transform: translateX(-50%);
+    transition: opacity 0.5s ease;
+}
+
+.tooltip-text:before {
+    content: "";
+    position: absolute;
+    bottom: -5px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 10px 10px 0;
+    /* Create a triangle shape */
+    border-style: solid;
+    border-color: rgba(70, 70, 70, 255) transparent transparent transparent;
+    z-index: -1;
+}
+
+.tooltip:hover .tooltip-text {
+    visibility: visible;
+    opacity: 1;
+}
+
+.sdk-name {
+    flex: 0 0 100px !important;
+}
+
+.sdk-name p {
+    margin-left: 20px;
+    font-size: 15px;
+    font-weight: 600;
+    width: 18em;
+    line-height: 1.5;
+    text-align: left;
+    white-space: nowrap;
+}
+
+.sdk-description {
+    text-align: left;
+    margin: 15px 30px;
+    white-space: pre-line;
+}
+
+.source-links {
+    flex: 0 0 134px !important;
+    align-items: baseline;
+    margin-top: 15px;
+    text-align: right;
+}
+
+.source-link {
+    flex: 1;
+    margin: 0 10px 0 0;
+    color: var(--md-typeset-color) !important;
+    width: 35px;
+}
+
+/* /* @media screen and (min-width: 76.25em) {
+    [dir=ltr] .md-sidebar--secondary:not([hidden])~.md-content > .md-content__inner,
+    [dir=rtl] .md-sidebar--primary:not([hidden])~.md-content > .md-content__inner {
+        max-width: 1200px !important;
+    }
+
+    .md-sidebar {
+        display: none;
+    } */

en/theme/material/templates/connectors.html

@@ -0,0 +1,55 @@
+{% extends "base.html" %}
+
+{% block styles %}
+  {{ super() }}
+  <link rel="stylesheet" href="{{ 'assets/css/connectors.css' | url }}">
+{% endblock %}
+
+{% block container %}
+  <div class="md-content">
+    <article class="md-content__inner md-typeset">
+      <!-- Render the Markdown content at the top -->
+      {{ page.content }}
+
+      <!-- Custom integrations list -->
+      <div class="integrations-list-container">
+        <div class="flex-grid">
+          {% for integration in config.extra.integrations %}
+            <div class="md-card integration-card">
+              <img class="integration-card-icon" src="{{ integration.icon | url }}#only-light" />
+              {% if integration.dark_icon %}
+                <img class="integration-card-icon" src="{{ integration.dark_icon | url }}#only-dark" />
+              {% else %}
+                <img class="integration-card-icon" src="{{ integration.icon | url }}#only-dark" />
+              {% endif %}
+              <p class="integration-card-header">{{ integration.name }}</p>
+              {% set description = integration.description %}
+              {% set description = description.replace('{{ product_name }}', config.extra.product_name).replace('{{product_name}}', config.extra.product_name) %}
+              <p class="integration-card-description">{{ description }}</p>
+              <div class="integration-card-source-links">
+                {% if integration.documentation_link %}
+                  <a class="tooltip source-link md-icon md-icon--hover" href="{{ integration.documentation_link | url }}">
+                    {% include "/assets/images/icons/book-16.svg" %}
+                    <span class="tooltip-text">Documentation</span>
+                  </a>
+                {% endif %}
+                {% if integration.download_link %}
+                  <a class="source-link tooltip md-icon md-icon--hover" href="{{ integration.download_link }}" target="_blank">
+                    {% include "/assets/images/icons/download.svg" %}
+                    <span class="tooltip-text">Download sample</span>
+                  </a>
+                {% endif %}
+                {% if integration.source_link %}
+                  <a class="source-link tooltip md-icon md-icon--hover" href="{{ integration.source_link }}" target="_blank">
+                    {% include "/assets/images/icons/github.svg" %}
+                    <span class="tooltip-text">Source</span>
+                  </a>
+                {% endif %}
+              </div>
+            </div>
+          {% endfor %}
+        </div>
+      </div>
+    </article>
+  </div>
+{% endblock %}