Skip to content

Commit

Permalink
Merge branch 'main' into dependabot/npm_and_yarn/vite-4.5.5
Browse files Browse the repository at this point in the history
  • Loading branch information
@rajbos
rajbos authored Nov 20, 2024
2 parents be4dfec + b96b78e commit 96493e2
Show file tree
Hide file tree
Showing 5 changed files with 147 additions and 44 deletions.
3 changes: 3 additions & 0 deletions .github/workflows/deploy-pages.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,9 @@ jobs:
echo "Building in repo [$REPO_NAME] with build number [$BUILDNUMBER] for [$NODE_ENV] environment."
npm run build
# copy the index file from the dist folder into the 404 file
cp dist/index.html dist/404.html
- name: Listfiles
run: |
cd dist
Expand Down
7 changes: 3 additions & 4 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

87 changes: 56 additions & 31 deletions public/data.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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."
}
]
},
{
"sku": "GitHub Copilot Enterprise",
"items": [
"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": "PR body generation in WebUI",
"videoUrl": "",
"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": 15,
"title": "Pull request body generation",
"id": 19,
"title": "@github chat participant",
"videoUrl": "",
"description": "Automatically generate detailed pull request bodies with Copilot."
"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",
Expand All @@ -128,12 +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."
}
]
}
Expand Down
71 changes: 63 additions & 8 deletions src/pages/Skus.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React, { useEffect, useState } from 'react';
import React, { useEffect, useState, Component } from 'react';
import { useNavigate } from 'react-router-dom';
import '../styles.css';
import getData from '../utils/getData';
import Header from './title-header';

const Skus = () => {
const [features, setFeatures] = useState({ business: [], enterprise: [] });
const [features, setFeatures] = useState({ business: [], enterprise: [], ghesFiltered: true });

const navigate = useNavigate();

Expand All @@ -14,30 +14,85 @@ const Skus = () => {
navigate(`/detail?videoId=${id}`);
};

const getElementByKey = (key) => {
const element = document.querySelector(`[data-key="${key}"]`);
return element;
}

const toggleFeature = (item, style) => {
if (!item.ghes_support) {
const feature = getElementByKey(item.id);
if (feature) {
feature.style.display = style;
}
}
}

const handleGHESToggle = () => {
// show/hide the videos that do not have the ghes_support tag
if (features.ghesFiltered) {
features.ghesFiltered = false;
features.business.forEach(item => {
toggleFeature(item, 'block');
});

features.enterprise.forEach(item => {
toggleFeature(item, 'block');
});

document.getElementById('ghesToggle').classList.remove('on');
}
else {
features.ghesFiltered = true;
features.business.forEach(item => {
toggleFeature(item, 'none');
});

features.enterprise.forEach(item => {
toggleFeature(item, 'none');
});
document.getElementById('ghesToggle').classList.add('on');
}
}

useEffect(() => {
getData()
.then(data => {
const business = data.features.videos.find(feature => feature.sku === "GitHub Copilot Business");
const enterprise = data.features.videos.find(feature => feature.sku === "GitHub Copilot Enterprise");
setFeatures({ business: business.items, enterprise: enterprise.items });
setFeatures({ business: business.items, enterprise: enterprise.items, ghesFiltered: false });
handleGHESToggle();
})
.catch(error => console.error('Error loading SKU data:', error));
}, []);

return (
<div>
<Header title={`GitHub Copilot Business vs Enterprise`}/>

<button
id="ghesToggle"
className={`toggle-button`}
onClick={() => handleGHESToggle()}
style={{float:`right`}}>
Only show GHES supported
</button>

<div id="main-container">
<div>
<div>
<h2>GitHub Copilot Business</h2>
</div>
<div id="business-features" className="sku-grid">
<div id="business-features" className="sku-grid business">
{
features.business.map(item => (
<div key={item.id} className="video-box" onClick={() => handleClick(item.id)}>
<div
data-key={item.id}
className={`video-box ${item.ghes_support ? 'ghes-support' : ''}`}
onClick={() => handleClick(item.id)}
>
<h3>{item.title}</h3>
{!item.videoUrl && <div className="coming-soon-small">Coming soon</div>}
{!item.videoUrl && <div className="coming-soon-small">Video coming soon</div>}
</div>
))
}
Expand All @@ -47,11 +102,11 @@ const Skus = () => {
<div>
<h2>GitHub Copilot Enterprise</h2>
</div>
<div id="enterprise-features" className="sku-grid">
<div id="enterprise-features" className="sku-grid enterprise">
{features.enterprise.map(item => (
<div key={item.id} className="video-box" onClick={() => handleClick(item.id)}>
<h3>{item.title}</h3>
{!item.videoUrl && <div className="coming-soon-small">Coming soon</div>}
{!item.videoUrl && <div className="coming-soon-small">Video coming soon</div>}
</div>
))}
</div>
Expand Down
23 changes: 22 additions & 1 deletion src/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@
.sku-grid {
flex: 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
margin-left: -5px;
border: none;
justify-content: center;
Expand All @@ -50,6 +49,14 @@
padding: 10px;
}

.sku-grid.business {
grid-template-columns: repeat(4, 1fr);
}

.sku-grid.enterprise {
grid-template-columns: repeat(2, 1fr);
}

.grid-container {
display: flex;
justify-content: center;
Expand Down Expand Up @@ -466,3 +473,17 @@ 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: red;
}

0 comments on commit 96493e2

Please sign in to comment.