From 12359b3b1bdfaa974382b9f003d686df25c361ee Mon Sep 17 00:00:00 2001 From: Rob Bos Date: Thu, 10 Oct 2024 20:21:14 +0000 Subject: [PATCH] Testing with showing GHES support --- public/data.json | 91 ++++++++++++++++++++++++++++------------------ src/pages/Skus.jsx | 31 +++++++++++++++- src/styles.css | 18 +++++++++ 3 files changed, 102 insertions(+), 38 deletions(-) diff --git a/public/data.json b/public/data.json index 61d3290..6e23b47 100644 --- a/public/data.json +++ b/public/data.json @@ -8,109 +8,140 @@ "id": 0, "title": "Intro video for demos", "videoUrl": "https://youtu.be/AXP0bGCYrhM", - "description": "Explainer of the demo repo we use in the videos." + "description": "Explainer of the demo repo we use in the videos.", + "ghes_support": true }, { "id": 1, "title": "Code completions", "videoUrl": "", - "description": "Enhance your coding experience with AI-powered code completions." + "description": "Enhance your coding experience with AI-powered code completions.", + "ghes_support": true }, { "id": 2, "title": "Chat in IDE", "videoUrl": "", - "description": "Communicate with Copilot directly within your IDE for instant assistance." + "description": "Communicate with Copilot directly within your IDE for instant assistance.", + "ghes_support": true }, { "id": 3, "title": "Chat on mobile", "videoUrl": "", - "description": "Get coding assistance on-the-go with Copilot's mobile chat feature." + "description": "Get coding assistance on-the-go with Copilot's mobile chat feature.", + "ghes_support": true }, { "id": 4, "title": "CLI assistance", "videoUrl": "https://youtu.be/Yhu2xzId2U0", - "description": "Streamline your command line tasks with Copilot's CLI assistance." + "description": "Streamline your command line tasks with Copilot's CLI assistance.", + "ghes_support": true }, { "id": 5, "title": "Code referencing", "videoUrl": "", - "description": "Quickly reference code snippets and examples with Copilot." + "description": "Get reference information on code snippets that Copilot generates, if they match public code.", + "ghes_support": true }, { "id": 6, "title": "Unit tests", "videoUrl": "", - "description": "Automate your testing process with Copilot's unit test generation." + "description": "Automate your testing process with Copilot's unit test generation.", + "ghes_support": true }, { "id": 7, "title": "Code translation", "videoUrl": "", - "description": "Translate code across different languages with ease using Copilot." + "description": "Translate code across different languages with ease using Copilot.", + "ghes_support": true }, { "id": 8, "title": "Code documentation", "videoUrl": "", - "description": "Generate comprehensive documentation for your codebase with Copilot." + "description": "Generate comprehensive documentation for your codebase with Copilot.", + "ghes_support": true }, { "id": 9, "title": "Code explanation", "videoUrl": "https://youtu.be/1gyzoHTfxgQ", - "description": "Get detailed explanations for complex code snippets with Copilot." + "description": "Get detailed explanations for complex code snippets with Copilot.", + "ghes_support": true }, { "id": 10, "title": "Code fixing", "videoUrl": "", - "description": "Quickly fix coding errors and issues with Copilot's assistance." + "description": "Quickly fix coding errors and issues with Copilot's assistance of '/fix'.", + "ghes_support": true }, { "id": 11, "title": "Code debugging", "videoUrl": "", - "description": "Simplify the debugging process with Copilot's insightful suggestions." + "description": "Simplify the debugging process with Copilot's insightful suggestions. Copilot can use the information of debugger, like the call stack, exceptions, variable values.", + "ghes_support": true }, { "id": 12, "title": "Slash commands", "videoUrl": "", - "description": "Enhance your coding workflow with Copilot's slash commands." + "description": "Enhance your coding workflow with Copilot's slash commands.", + "ghes_support": true }, { "id": 20, "title": "User Instructions", "videoUrl": "https://youtu.be/IsEXdeTbi1I", - "description": "With user instructions in VS Code you can help guide Copilot in the right direction for your codebase, like being a Python 3 developer and skip older language constructs." + "description": "With user instructions in VS Code you can help guide Copilot in the right direction for your codebase, like being a Python 3 developer and skip older language constructs.", + "ghes_support": true }, { "id": 13, "title": "Integration in Web UI", "videoUrl": "", - "description": "Seamlessly integrate Copilot into your web UI for enhanced productivity." + "description": "Seamlessly integrate Copilot into your web UI for enhanced productivity.", + "ghes_support": false }, { "id": 15, - "title": "Pull request body generation", + "title": "Pull request body generation in WebUI", "videoUrl": "", - "description": "Automatically generate detailed pull request bodies with Copilot." - } - ] - }, - { - "sku": "GitHub Copilot Enterprise", - "items": [ + "description": "Automatically generate detailed pull request bodies with Copilot in the webUI.", + "ghes_support": false + }, { "id": 14, "title": "Chat with your pull request", "videoUrl": "", - "description": "Collaborate more effectively on pull requests with Copilot's chat feature." + "description": "Collaborate more effectively on pull requests with Copilot's chat feature.", + "ghes_support": false + }, + { + "id": 19, + "title": "@github chat participant", + "videoUrl": "", + "description": "Invite @github to your chat for additional assistance with GitHub information in the current repository.", + "ghes_support": false }, + { + "id": 21, + "title": "PR body generation in VS Code", + "videoUrl": "https://youtu.be/_L8MdrswPV0", + "description": "Create a body for a new pull request using GitHub Copilot, by using the GitHub PR extension! It will analyze the diff between the branches as well as the commit messages, and create a body from it.", + "ghes_support": true + } + ] + }, + { + "sku": "GitHub Copilot Enterprise", + "items": [ { "id": 16, "title": "Chat with knowledge bases", @@ -128,18 +159,6 @@ "title": "Fine tuned models", "videoUrl": "", "description": "Benefit from models fine-tuned for your specific coding needs with Copilot." - }, - { - "id": 19, - "title": "@github chat participant", - "videoUrl": "", - "description": "Invite @github to your chat for additional assistance with GitHub information in the current repository." - }, - { - "id": 21, - "title": "PR body generation in VS Code", - "videoUrl": "https://youtu.be/_L8MdrswPV0", - "description": "Create a body for a new pull request using GitHub Copilot, by using the GitHub PR extension! It will analyze the diff between the branches as well as the commit messages, and create a body from it." } ] } diff --git a/src/pages/Skus.jsx b/src/pages/Skus.jsx index 51515eb..8fea917 100644 --- a/src/pages/Skus.jsx +++ b/src/pages/Skus.jsx @@ -14,6 +14,23 @@ const Skus = () => { navigate(`/detail?videoId=${id}`); }; + const handleGHESToggle = () => { + // hide the videos that do not have the ghes_support tag + const ghesToggle = document.getElementById('ghes-toggle'); + const ghesSupport = document.getElementsByClassName('ghes-support'); + + if (ghesToggle.checked) { + for (let i = 0; i < ghesSupport.length; i++) { + ghesSupport[i].style.display = 'block'; + } + } + else { + for (let i = 0; i < ghesSupport.length; i++) { + ghesSupport[i].style.display = 'none'; + } + } + } + useEffect(() => { getData() .then(data => { @@ -27,6 +44,12 @@ const Skus = () => { return (
+ +
@@ -35,9 +58,13 @@ const Skus = () => {
{ features.business.map(item => ( -
handleClick(item.id)}> +
handleClick(item.id)} + >

{item.title}

- {!item.videoUrl &&
Coming soon
} + {!item.videoUrl &&
Video coming soon
}
)) } diff --git a/src/styles.css b/src/styles.css index 9784a25..b92286c 100644 --- a/src/styles.css +++ b/src/styles.css @@ -466,3 +466,21 @@ h1 { .footer div { margin-right: 7px; } + +.toggle-button { + padding: 10px 20px; + color: white; + background-color: var(--button-color); + border-radius: 5px; + border: none; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.toggle-button.on { + background-color: #28a745; /* Green for ON state */ +} + +.toggle-button.off { + background-color: #dc3545; /* Red for OFF state */ +} \ No newline at end of file