random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-12-27 12:51:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix Quickstart and UI

Browse Source
This commit is contained in:
Sung-Hyun Kang
2025-10-22 17:05:19 -05:00
parent 2194bb4961
commit 2617a7ffe5
3 changed files with 220 additions and 400 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Explorer/ContextMenuButtonFactory.tsx
View File

@@ -10,6 +10,7 @@ import { useDatabases } from "Explorer/useDatabases";
import { isFabric, isFabricNative } from "Platform/Fabric/FabricUtil";
import { Action } from "Shared/Telemetry/TelemetryConstants";
import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
import { areAdvancedScriptsSupported } from "Utils/PlatformFeatureUtils";
import { ReactTabKind, useTabs } from "hooks/useTabs";
import React from "react";
import AddCollectionIcon from "../../images/AddCollection.svg";
@@ -130,6 +131,7 @@ export const createCollectionContextMenuButton = (
}
if (
areAdvancedScriptsSupported(configContext.platform) &&
configContext.platform !== Platform.Fabric &&
(userContext.apiType === "SQL" || userContext.apiType === "Gremlin")
) {

309
src/quickstart-sql-only-http.html
View File

@@ -35,214 +35,92 @@
<div class="container-fluid">
<ul class="nav nav-tabs qslevel">
<li class="active">
<a data-toggle="tab" href="#net"
><img class="qsmenuicons" src="../images/dotnet.png" alt=".NET platform" />.NET</a
>
<a data-toggle="tab" href="#net">
<img class="qsmenuicons" src="../images/dotnet.png" alt=".NET" /> .NET
</a>
</li>
<li>
<a data-toggle="tab" href="#corenet"
><img class="qsmenuicons" src="../images/dotnet.png" alt=".NET Core platform" />.NET Core</a
>
<a data-toggle="tab" href="#java"> <img class="qsmenuicons" src="../images/java.png" alt="Java" /> Java </a>
</li>
<li>
<a data-toggle="tab" href="#Java"
><img class="qsmenuicons" src="../images/java.png" alt="Java platform" />Java</a
>
<a data-toggle="tab" href="#nodejs">
<img class="qsmenuicons" src="../images/nodejs.png" alt="Node.js" /> Node.js
</a>
</li>
<li>
<a data-toggle="tab" href="#NodeJs"
><img class="qsmenuicons" src="../images/nodejs.png" alt="Node.js platform" />Node.js</a
>
<a data-toggle="tab" href="#python">
<img class="qsmenuicons" src="../images/python.png" alt="Python" /> Python
</a>
</li>
<li>
<a data-toggle="tab" href="#Python"
><img class="qsmenuicons" src="../images/python.png" alt="Python platform" />Python</a
>
<a data-toggle="tab" href="#go"> <img class="qsmenuicons" src="../images/golang.svg" alt="Go" /> Go </a>
</li>
<li>
<a data-toggle="tab" href="#springboot">
<img class="qsmenuicons" src="../images/springboot.svg" alt="Spring Boot" /> Spring Boot
</a>
</li>
</ul>
<div class="tab-content tab-content-override">
<div class="tab-content">
<div id="net" class="tab-pane fade in active">
<div class="netApp">
<div class="sampleApp">
<div class="numbersize numbersizePadding">1</div>
<div class="numberheading">
Open and run a sample .NET app
Create a new .NET app
<p>
We created a sample .NET app connected to your Azure Cosmos DB Emulator instance. Download, extract,
build and run the app.
Follow this
<a href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-dotnet" target="_blank"
>tutorial
</a>
to create a new .NET app connected to Azure Cosmos DB.
</p>
<a href="quickstart/DocumentDB-Quickstart-DotNet.zip"
><button class="btncreatecoll">Download</button></a
>
</div>
</div>
<div class="netApp">
<div class="numbersize">2</div>
<div class="numberheading">
Learn more about Azure Cosmos DB
<ul>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/samples/dotnet"
>Code Samples</a
>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/docs">Documentation</a>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/pricing">Pricing</a>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/capacity-planner"
>Capacity Planner</a
>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/stackoverflow">Forum</a>
</li>
</ul>
</div>
</div>
</div>
<div id="corenet" class="tab-pane fade">
<div class="netApp">
<div class="numbersize numbersizePadding">1</div>
<div class="numberheading">
Open and run a sample .NET Core app
<p>
We created a sample .NET Core app connected to your Azure Cosmos DB Emulator instance. Download,
extract, build and run the app.
</p>
<a href="quickstart/DocumentDB-Quickstart-DotNetCore.zip"
><button class="btncreatecoll">Download</button></a
>
</div>
</div>
<div class="netApp">
<div class="numbersize">2</div>
<div class="numberheading">
Learn more about Azure Cosmos DB.
<ul>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/samples/dotnet"
>Code Samples</a
>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/docs">Documentation</a>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/pricing">Pricing</a>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/capacity-planner"
>Capacity Planner</a
>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/stackoverflow">Forum</a>
</li>
</ul>
</div>
</div>
<div class="learn-more"></div>
</div>
<div id="Java" class="tab-pane fade">
<div class="step1">
<div id="java" class="tab-pane fade">
<div class="sampleApp">
<div class="numbersize numbersizePadding">1</div>
<div class="numberheading">
Open and run a sample Java app
Create a new Java app
<p>
We created a sample Java app connected to your Azure Cosmos DB Emulator instance. Download, extract,
build and run the app.
</p>
<a href="quickstart/DocumentDB-Quickstart-Java.zip"><button class="btncreatecoll">Download</button></a>
<p>
Follow instructions in the readme.md to setup prerequisites needed to run Java web apps, if you
haven’t already.
Follow this
<a href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-java" target="_blank"
>tutorial
</a>
to create a new Java app connected to Azure Cosmos DB.
</p>
</div>
</div>
<div class="step1">
<div class="numbersize">2</div>
<div class="numberheading">
Learn more about Azure Cosmos DB.
<ul>
<!--<li><a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/samples/java">Code Samples</a></li>-->
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/docs">Documentation</a>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/pricing">Pricing</a>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/capacity-planner"
>Capacity Planner</a
>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/stackoverflow">Forum</a>
</li>
</ul>
</div>
</div>
<div class="learn-more"></div>
</div>
<div id="NodeJs" class="tab-pane fade">
<div class="step1">
<div id="nodejs" class="tab-pane fade">
<div class="sampleApp">
<div class="numbersize numbersizePadding">1</div>
<div class="numberheading">
Open and run a sample Node.js app
Create a new Node.js app
<p>
We created a sample Node.js app connected to your Azure Cosmos DB Emulator instance. Download,
extract, build and run the app.
</p>
<a href="quickstart/DocumentDB-Quickstart-NodeJs.zip"
><button class="btncreatecoll">Download</button></a
>
<p>
Run <strong>npm install</strong> and <strong>npm start</strong>, and navigate to
<a href="http://localhost:3000" _targe="blank">http://localhost:3000</a>.
Follow this
<a
href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-nodejs?pivots=programming-language-ts"
target="_blank"
>tutorial
</a>
to create a new Node.js app connected to Azure Cosmos DB.
</p>
</div>
</div>
<div class="step1">
<div class="numbersize">2</div>
<div class="numberheading">
Learn more about Azure Cosmos DB.
<ul>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/samples/nodejs"
>Code Samples</a
>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/docs">Documentation</a>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/pricing">Pricing</a>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/capacity-planner"
>Capacity Planner</a
>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/stackoverflow">Forum</a>
</li>
</ul>
</div>
</div>
<div class="learn-more"></div>
</div>
<div id="Python" class="tab-pane fade">
<div class="pythonApp">
<div id="python" class="tab-pane fade">
<div class="sampleApp">
<div class="numbersize numbersizePadding">1</div>
<div class="numberheading">
Create a new Python app.
Create a new Python app
<p>
Follow this
<a href="https://aka.ms/cosmos-db-emulator/tutorial/python" target="_blank">tutorial</a>
@@ -250,42 +128,73 @@
</p>
</div>
</div>
<div class="learn-more"></div>
</div>
<div class="pythonApp">
<div class="numbersize">2</div>
<div id="go" class="tab-pane fade">
<div class="sampleApp">
<div class="numbersize numbersizePadding">1</div>
<div class="numberheading">
Learn more about Azure Cosmos DB.
<ul>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/samples/python"
>Code Samples</a
>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/docs">Documentation</a>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/pricing">Pricing</a>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/capacity-planner"
>Capacity planner</a
>
</li>
<li>
<a
target="_blank"
class="atags"
href="https://social.msdn.microsoft.com/forums/azure/home?forum=AzureDocumentDB"
>Forum</a
>
</li>
</ul>
Create a new Go app
<p>
Follow this
<a href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-go" target="_blank">tutorial</a>
to create a new Go app connected to Azure Cosmos DB.
</p>
</div>
</div>
<div class="learn-more"></div>
</div>
<div id="springboot" class="tab-pane fade">
<div class="sampleApp">
<div class="numbersize numbersizePadding">1</div>
<div class="numberheading">
Create a new Spring Boot app
<p>
Follow this
<a
href="https://learn.microsoft.com/azure/cosmos-db/nosql/tutorial-springboot-azure-kubernetes-service"
target="_blank"
>tutorial</a
>
to create a new Spring Boot app connected to Azure Cosmos DB.
</p>
</div>
</div>
<div class="learn-more"></div>
</div>
</div>
</div>
</div>
<template id="learnMoreTpl">
<div class="app-block">
<div class="numbersize">2</div>
<div class="numberheading">
Learn more about Azure Cosmos DB
<ul>
<li>
<a href="https://azurecosmosdb.github.io/gallery/?tags=example" target="_blank" class="atags"
>Code Samples</a
>
</li>
<li><a href="https://aka.ms/cosmos-db-emulator/docs" target="_blank" class="atags">Documentation</a></li>
<li><a href="https://aka.ms/cosmos-db-emulator/pricing" target="_blank" class="atags">Pricing</a></li>
<li>
<a href="https://cosmos.azure.com/capacitycalculator/" target="_blank" class="atags">Capacity planner</a>
</li>
<li><a href="https://aka.ms/cosmos-db-emulator/stackoverflow" target="_blank" class="atags">Forum</a></li>
</ul>
</div>
</div>
</template>
<script>
document.querySelectorAll(".learn-more").forEach((slot) => {
const node = document.getElementById("learnMoreTpl").content.cloneNode(true);
slot.appendChild(node);
});
</script>
</body>
</html>

309
src/quickstart-sql-only.html
View File

@@ -35,214 +35,92 @@
<div class="container-fluid">
<ul class="nav nav-tabs qslevel">
<li class="active">
<a data-toggle="tab" href="#net"
><img class="qsmenuicons" src="../images/dotnet.png" alt=".NET platform" />.NET</a
>
<a data-toggle="tab" href="#net">
<img class="qsmenuicons" src="../images/dotnet.png" alt=".NET" /> .NET
</a>
</li>
<li>
<a data-toggle="tab" href="#corenet"
><img class="qsmenuicons" src="../images/dotnet.png" alt=".NET Core platform" />.NET Core</a
>
<a data-toggle="tab" href="#java"> <img class="qsmenuicons" src="../images/java.png" alt="Java" /> Java </a>
</li>
<li>
<a data-toggle="tab" href="#Java"
><img class="qsmenuicons" src="../images/java.png" alt="Java platform" />Java</a
>
<a data-toggle="tab" href="#nodejs">
<img class="qsmenuicons" src="../images/nodejs.png" alt="Node.js" /> Node.js
</a>
</li>
<li>
<a data-toggle="tab" href="#NodeJs"
><img class="qsmenuicons" src="../images/nodejs.png" alt="Node.js platform" />Node.js</a
>
<a data-toggle="tab" href="#python">
<img class="qsmenuicons" src="../images/python.png" alt="Python" /> Python
</a>
</li>
<li>
<a data-toggle="tab" href="#Python"
><img class="qsmenuicons" src="../images/python.png" alt="Python platform" />Python</a
>
<a data-toggle="tab" href="#go"> <img class="qsmenuicons" src="../images/golang.svg" alt="Go" /> Go </a>
</li>
<li>
<a data-toggle="tab" href="#springboot">
<img class="qsmenuicons" src="../images/springboot.svg" alt="Spring Boot" /> Spring Boot
</a>
</li>
</ul>
<div class="tab-content tab-content-override">
<div class="tab-content">
<div id="net" class="tab-pane fade in active">
<div class="netApp">
<div class="sampleApp">
<div class="numbersize numbersizePadding">1</div>
<div class="numberheading">
Open and run a sample .NET app
Create a new .NET app
<p>
We created a sample .NET app connected to your Azure Cosmos DB Emulator instance. Download, extract,
build and run the app.
Follow this
<a href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-dotnet" target="_blank"
>tutorial
</a>
to create a new .NET app connected to Azure Cosmos DB.
</p>
<a href="quickstart/DocumentDB-Quickstart-DotNet.zip"
><button class="btncreatecoll">Download</button></a
>
</div>
</div>
<div class="netApp">
<div class="numbersize">2</div>
<div class="numberheading">
Learn more about Azure Cosmos DB
<ul>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/samples/dotnet"
>Code Samples</a
>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/docs">Documentation</a>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/pricing">Pricing</a>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/capacity-planner"
>Capacity Planner</a
>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/stackoverflow">Forum</a>
</li>
</ul>
</div>
</div>
</div>
<div id="corenet" class="tab-pane fade">
<div class="netApp">
<div class="numbersize numbersizePadding">1</div>
<div class="numberheading">
Open and run a sample .NET Core app
<p>
We created a sample .NET Core app connected to your Azure Cosmos DB Emulator instance. Download,
extract, build and run the app.
</p>
<a href="quickstart/DocumentDB-Quickstart-DotNetCore.zip"
><button class="btncreatecoll">Download</button></a
>
</div>
</div>
<div class="netApp">
<div class="numbersize">2</div>
<div class="numberheading">
Learn more about Azure Cosmos DB.
<ul>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/samples/dotnet"
>Code Samples</a
>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/docs">Documentation</a>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/pricing">Pricing</a>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/capacity-planner"
>Capacity Planner</a
>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/stackoverflow">Forum</a>
</li>
</ul>
</div>
</div>
<div class="learn-more"></div>
</div>
<div id="Java" class="tab-pane fade">
<div class="step1">
<div id="java" class="tab-pane fade">
<div class="sampleApp">
<div class="numbersize numbersizePadding">1</div>
<div class="numberheading">
Open and run a sample Java app
Create a new Java app
<p>
We created a sample Java app connected to your Azure Cosmos DB Emulator instance. Download, extract,
build and run the app.
</p>
<a href="quickstart/DocumentDB-Quickstart-Java.zip"><button class="btncreatecoll">Download</button></a>
<p>
Follow instructions in the readme.md to setup prerequisites needed to run Java web apps, if you
haven’t already.
Follow this
<a href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-java" target="_blank"
>tutorial
</a>
to create a new Java app connected to Azure Cosmos DB.
</p>
</div>
</div>
<div class="step1">
<div class="numbersize">2</div>
<div class="numberheading">
Learn more about Azure Cosmos DB.
<ul>
<!--<li><a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/samples/java">Code Samples</a></li>-->
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/docs">Documentation</a>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/pricing">Pricing</a>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/capacity-planner"
>Capacity Planner</a
>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/stackoverflow">Forum</a>
</li>
</ul>
</div>
</div>
<div class="learn-more"></div>
</div>
<div id="NodeJs" class="tab-pane fade">
<div class="step1">
<div id="nodejs" class="tab-pane fade">
<div class="sampleApp">
<div class="numbersize numbersizePadding">1</div>
<div class="numberheading">
Open and run a sample Node.js app
Create a new Node.js app
<p>
We created a sample Node.js app connected to your Azure Cosmos DB Emulator instance. Download,
extract, build and run the app.
</p>
<a href="quickstart/DocumentDB-Quickstart-NodeJs.zip"
><button class="btncreatecoll">Download</button></a
>
<p>
Run <strong>npm install</strong> and <strong>npm start</strong>, and navigate to
<a href="http://localhost:3000" _targe="blank">http://localhost:3000</a>.
Follow this
<a
href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-nodejs?pivots=programming-language-ts"
target="_blank"
>tutorial
</a>
to create a new Node.js app connected to Azure Cosmos DB.
</p>
</div>
</div>
<div class="step1">
<div class="numbersize">2</div>
<div class="numberheading">
Learn more about Azure Cosmos DB.
<ul>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/samples/nodejs"
>Code Samples</a
>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/docs">Documentation</a>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/pricing">Pricing</a>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/capacity-planner"
>Capacity Planner</a
>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/stackoverflow">Forum</a>
</li>
</ul>
</div>
</div>
<div class="learn-more"></div>
</div>
<div id="Python" class="tab-pane fade">
<div class="pythonApp">
<div id="python" class="tab-pane fade">
<div class="sampleApp">
<div class="numbersize numbersizePadding">1</div>
<div class="numberheading">
Create a new Python app.
Create a new Python app
<p>
Follow this
<a href="https://aka.ms/cosmos-db-emulator/tutorial/python" target="_blank">tutorial</a>
@@ -250,42 +128,73 @@
</p>
</div>
</div>
<div class="learn-more"></div>
</div>
<div class="pythonApp">
<div class="numbersize">2</div>
<div id="go" class="tab-pane fade">
<div class="sampleApp">
<div class="numbersize numbersizePadding">1</div>
<div class="numberheading">
Learn more about Azure Cosmos DB.
<ul>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/samples/python"
>Code Samples</a
>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/docs">Documentation</a>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/pricing">Pricing</a>
</li>
<li>
<a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/capacity-planner"
>Capacity planner</a
>
</li>
<li>
<a
target="_blank"
class="atags"
href="https://social.msdn.microsoft.com/forums/azure/home?forum=AzureDocumentDB"
>Forum</a
>
</li>
</ul>
Create a new Go app
<p>
Follow this
<a href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-go" target="_blank">tutorial</a>
to create a new Go app connected to Azure Cosmos DB.
</p>
</div>
</div>
<div class="learn-more"></div>
</div>
<div id="springboot" class="tab-pane fade">
<div class="sampleApp">
<div class="numbersize numbersizePadding">1</div>
<div class="numberheading">
Create a new Spring Boot app
<p>
Follow this
<a
href="https://learn.microsoft.com/azure/cosmos-db/nosql/tutorial-springboot-azure-kubernetes-service"
target="_blank"
>tutorial</a
>
to create a new Spring Boot app connected to Azure Cosmos DB.
</p>
</div>
</div>
<div class="learn-more"></div>
</div>
</div>
</div>
</div>
<template id="learnMoreTpl">
<div class="app-block">
<div class="numbersize">2</div>
<div class="numberheading">
Learn more about Azure Cosmos DB
<ul>
<li>
<a href="https://azurecosmosdb.github.io/gallery/?tags=example" target="_blank" class="atags"
>Code Samples</a
>
</li>
<li><a href="https://aka.ms/cosmos-db-emulator/docs" target="_blank" class="atags">Documentation</a></li>
<li><a href="https://aka.ms/cosmos-db-emulator/pricing" target="_blank" class="atags">Pricing</a></li>
<li>
<a href="https://cosmos.azure.com/capacitycalculator/" target="_blank" class="atags">Capacity planner</a>
</li>
<li><a href="https://aka.ms/cosmos-db-emulator/stackoverflow" target="_blank" class="atags">Forum</a></li>
</ul>
</div>
</div>
</template>
<script>
document.querySelectorAll(".learn-more").forEach((slot) => {
const node = document.getElementById("learnMoreTpl").content.cloneNode(true);
slot.appendChild(node);
});
</script>
</body>
</html>