-
+
+ + aria-describedby="endpointHelp"> + :disabled="!client.endpoint">Connect
diff --git a/samples/javascript/codestream/public/index.html b/samples/javascript/codestream/public/index.html index 50126dfe5..d85934245 100644 --- a/samples/javascript/codestream/public/index.html +++ b/samples/javascript/codestream/public/index.html @@ -22,7 +22,6 @@
diff --git a/samples/javascript/whiteboard/public/index.html b/samples/javascript/whiteboard/public/index.html index c51ca547f..a93bd344c 100644 --- a/samples/javascript/whiteboard/public/index.html +++ b/samples/javascript/whiteboard/public/index.html @@ -109,7 +109,7 @@
-
@@ -127,7 +127,7 @@ v-on:keypress.enter="setName">
- +
diff --git a/website/blog/2022-06-29-welcome/index.md b/website/blog/2022-06-29-welcome/index.md index 0ba1761d5..f4328f513 100644 --- a/website/blog/2022-06-29-welcome/index.md +++ b/website/blog/2022-06-29-welcome/index.md @@ -4,9 +4,12 @@ title: Welcome authors: [WangpengL] custom_edit_url: null --- +
This is a site dedicated to showing developers what they can build with Azure Web PubSub through live demos. If a picture is worth a thousand words, a live demo is probably worth a lot more than that. Azure Web PubSub is a cloud service that helps you build real-time messaging web applications using WebSockets and the publish-subscribe pattern easily. This real-time functionality allows publishing content updates between server and connected clients (for example a single page web application or mobile application). The clients do not need to poll the latest updates, or submit new HTTP requests for updates. Check out the demos on the site and let us know what you think. + +
\ No newline at end of file diff --git a/website/blog/2022-11-14-what-is-websockets_part1/index.md b/website/blog/2022-11-14-what-is-websockets_part1/index.md index ff594951a..4ca8b9ebd 100644 --- a/website/blog/2022-11-14-what-is-websockets_part1/index.md +++ b/website/blog/2022-11-14-what-is-websockets_part1/index.md @@ -4,6 +4,7 @@ title: What is WebSocket? (part 1/2) authors: [JialinX, KevinG] custom_edit_url: null --- +
## **Summary** This article is the first of a two-part series that describes the values of WebSocket on a high-level. @@ -45,3 +46,4 @@ In the second part, we will explore the idea of “full-duplex”. The bicycle photograph is taken by __[:link: Philipp M](https://www.pexels.com/@luftschnitzel/)__. The bi-fold door photograph is taken by __[:link: sena](https://www.pexels.com/@sena-124356903/)__. +
\ No newline at end of file diff --git a/website/blog/2022-11-25-what-is-websockets_part2/index.md b/website/blog/2022-11-25-what-is-websockets_part2/index.md index 8e3e651cc..bfdcb9bd0 100644 --- a/website/blog/2022-11-25-what-is-websockets_part2/index.md +++ b/website/blog/2022-11-25-what-is-websockets_part2/index.md @@ -4,6 +4,7 @@ title: What is WebSocket? (part 2/2) authors: [JialinX, KevinG] custom_edit_url: null --- +
## **Summary** This article is the second of a two-part series that describes the values of WebSocket on a high-level. @@ -46,3 +47,4 @@ The walkie-talkie style of the early web was fine when communication was largely **Credits:** The walkie-talkie and the grandma photographs were taken by __[:link: cottonbro studio](https://www.pexels.com/@cottonbro/)__. +
\ No newline at end of file diff --git a/website/blog/2023-11-20-web-pubsub-for-socket.io-ga/index.md b/website/blog/2023-11-20-web-pubsub-for-socket.io-ga/index.md index f2cb093a2..ddc562add 100644 --- a/website/blog/2023-11-20-web-pubsub-for-socket.io-ga/index.md +++ b/website/blog/2023-11-20-web-pubsub-for-socket.io-ga/index.md @@ -5,6 +5,8 @@ authors: [KevinG] custom_edit_url: null --- +
+ ## **TL;DR** Socket.IO library is natively supported on Azure. @@ -88,4 +90,6 @@ Since public preview, we received positive feedback from developers and now we a ## **Resources and references** - [:link: Socket.IO library documentation](https://socket.io/) - [:link: Quickstarts to migrate an existing Socket.IO app on Azure](https://learn.microsoft.com/azure/azure-web-pubsub/socketio-quickstart) -- [:link: Internal: how does Azure solve the scalability challenge for Socket.IO developers](https://learn.microsoft.com/azure/azure-web-pubsub/socketio-service-internal) \ No newline at end of file +- [:link: Internal: how does Azure solve the scalability challenge for Socket.IO developers](https://learn.microsoft.com/azure/azure-web-pubsub/socketio-service-internal) + +
\ No newline at end of file diff --git a/website/src/components/Carousel/ButtonNav.js b/website/src/components/Carousel/ButtonNav.js index 065006c82..06ed493c3 100644 --- a/website/src/components/Carousel/ButtonNav.js +++ b/website/src/components/Carousel/ButtonNav.js @@ -7,10 +7,10 @@ function ButtonNav({ direction, onClick, isShow, ariaLabel }) { return ( diff --git a/website/src/components/Carousel/CarouselSlide.js b/website/src/components/Carousel/CarouselSlide.js index d48c9e07b..6e856574e 100644 --- a/website/src/components/Carousel/CarouselSlide.js +++ b/website/src/components/Carousel/CarouselSlide.js @@ -3,11 +3,11 @@ import React from 'react' function CarouselSlide({ title, description, imageSrc }) { return (
-
-

+
+

{title}

-

{description}

+

{description}

{description}

diff --git a/website/src/components/Common/ButtonLink.js b/website/src/components/Common/ButtonLink.js index 881b56723..02b3be004 100644 --- a/website/src/components/Common/ButtonLink.js +++ b/website/src/components/Common/ButtonLink.js @@ -3,7 +3,7 @@ import React from 'react' function ButtonLink({ text, to, children, openInNewTab = true, tabIndex = 0, ariaLabel = "" }) { text = text.replace(/ /g, '\u00a0'); return ( - + {children &&
{children}
}
{text} diff --git a/website/src/components/Common/Footer.js b/website/src/components/Common/Footer.js index e22a4c8a8..c7019165c 100644 --- a/website/src/components/Common/Footer.js +++ b/website/src/components/Common/Footer.js @@ -10,13 +10,13 @@ function Footer() { ) diff --git a/website/src/components/DemoPage/Chatr/Chatr.js b/website/src/components/DemoPage/Chatr/Chatr.js index b8381ddb3..d9948f7e3 100644 --- a/website/src/components/DemoPage/Chatr/Chatr.js +++ b/website/src/components/DemoPage/Chatr/Chatr.js @@ -29,7 +29,7 @@ function Chatr() { function Overview() { return (
-

Overview

+

Overview

This demo is developed by   diff --git a/website/src/components/DemoPage/CodeBlock.js b/website/src/components/DemoPage/CodeBlock.js index fc52fed23..1a7be7633 100644 --- a/website/src/components/DemoPage/CodeBlock.js +++ b/website/src/components/DemoPage/CodeBlock.js @@ -1,11 +1,35 @@ -import React from 'react' -import { CopyBlock, dracula } from 'react-code-blocks' +import React, { useEffect } from 'react' +import { CopyBlock, github } from 'react-code-blocks' function CodeBlock({ text, language, title }) { + useEffect(() => { + // Add aria-label dynamically to the button inside the CopyBlock + const buttons = document.querySelectorAll('.copy-button-aria button[type="button"]'); + buttons.forEach((button) => { + button.setAttribute('aria-label', 'Copy code to clipboard'); + }); + }, []); + return ( -

+
{title &&
{title}
} - + +
) } diff --git a/website/src/components/DemoPage/CodeStream/CodeStream.js b/website/src/components/DemoPage/CodeStream/CodeStream.js index 3d3ccd1fc..d14db6027 100644 --- a/website/src/components/DemoPage/CodeStream/CodeStream.js +++ b/website/src/components/DemoPage/CodeStream/CodeStream.js @@ -38,7 +38,7 @@ function CodeStream() { function Overview() { return (
-

Overview

+

Overview

This is a sample application to demonstrate how to use Azure Web PubSub to livestream your code to others.

 diff --git a/website/src/components/DemoPage/CollaborativeWhiteboard/CollaborativeWhiteboard.js b/website/src/components/DemoPage/CollaborativeWhiteboard/CollaborativeWhiteboard.js index be8ac37d4..202fd9a40 100644 --- a/website/src/components/DemoPage/CollaborativeWhiteboard/CollaborativeWhiteboard.js +++ b/website/src/components/DemoPage/CollaborativeWhiteboard/CollaborativeWhiteboard.js @@ -38,7 +38,7 @@ function CollaborativeWhiteboard() { function Overview() { return (
-

Overview

+

Overview

This is a sample project to demonstrate how to build a web application for real time collaboration using Azure, Node.js and other related diff --git a/website/src/components/DemoPage/DemoTabs.tsx b/website/src/components/DemoPage/DemoTabs.tsx index d5a9a9c69..d6f59a40f 100644 --- a/website/src/components/DemoPage/DemoTabs.tsx +++ b/website/src/components/DemoPage/DemoTabs.tsx @@ -12,7 +12,7 @@ function DemoTabs({ overview, local, deploy, resources }) { return (

-
+
{overview && } {local && } diff --git a/website/src/components/DemoPage/Metaverse/Metaverse.js b/website/src/components/DemoPage/Metaverse/Metaverse.js index f34d9f22b..9717d7ed8 100644 --- a/website/src/components/DemoPage/Metaverse/Metaverse.js +++ b/website/src/components/DemoPage/Metaverse/Metaverse.js @@ -32,7 +32,7 @@ function Metaverse() { function Overview() { return (
-

Overview

+

Overview

An app demonstrating how Azure Web PubSub can be used to enable multi-player experience in Metaverse (coming soon)

 diff --git a/website/src/components/DemoPage/RealtimeScoreboard/RealtimeScoreboard.js b/website/src/components/DemoPage/RealtimeScoreboard/RealtimeScoreboard.js index 9bf6fd58f..de707630f 100644 --- a/website/src/components/DemoPage/RealtimeScoreboard/RealtimeScoreboard.js +++ b/website/src/components/DemoPage/RealtimeScoreboard/RealtimeScoreboard.js @@ -38,7 +38,7 @@ function RealtimeScoreboard() { function Overview() { return (
-

Overview

+

Overview

This app demonstrates how to push data from server to connected clients using Azure Web PubSub

 diff --git a/website/src/components/DemoPage/SimpleChatApp/SimpleChatApp.js b/website/src/components/DemoPage/SimpleChatApp/SimpleChatApp.js index 1a666e6df..7be61ca73 100644 --- a/website/src/components/DemoPage/SimpleChatApp/SimpleChatApp.js +++ b/website/src/components/DemoPage/SimpleChatApp/SimpleChatApp.js @@ -38,7 +38,7 @@ function SimpleChatApp() { function Overview() { return (
-

Overview

+

Overview

A simple real-time chat app demonstrating the use of JavaScript server SDK provided by Azure Web PubSub

 diff --git a/website/src/components/DemoPage/SplitDemo.js b/website/src/components/DemoPage/SplitDemo.js index 23541b86c..1c22391f2 100644 --- a/website/src/components/DemoPage/SplitDemo.js +++ b/website/src/components/DemoPage/SplitDemo.js @@ -5,12 +5,13 @@ import ButtonLink from '@site/src/components/Common/ButtonLink' import GitHub from '@site/static/logos/github_logo.svg' function SplitDemo({ alert, leftSrc, rightSrc, description, languages, githubURL }) { + // Prevent iframe from being focused by tab, this whiteboard function is designed to be just by mouse return (
{alert &&

{alert}

}
- {leftSrc && } - {rightSrc && } + {leftSrc && } + {rightSrc && }
diff --git a/website/src/components/DemoPage/TextBlock.js b/website/src/components/DemoPage/TextBlock.js index bd2c0e78e..89052e676 100644 --- a/website/src/components/DemoPage/TextBlock.js +++ b/website/src/components/DemoPage/TextBlock.js @@ -3,7 +3,7 @@ import React from 'react' function TextBlock({ title, children }) { return (
-

{title}

+
{title}
{children}
) diff --git a/website/src/components/HomePage/Tagline.js b/website/src/components/HomePage/Tagline.js index 2001c44eb..ebe0ce2d9 100644 --- a/website/src/components/HomePage/Tagline.js +++ b/website/src/components/HomePage/Tagline.js @@ -4,8 +4,8 @@ function Tagline() { return (

Azure Web PubSub

-

Easily add real-time capabilities to your apps using your preferred tech stack.

-

Reliable. Secure. Highly scalable.

+

Easily add real-time capabilities to your apps using your preferred tech stack.

+

Reliable. Secure. Highly scalable.

) } diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 1be5c64f1..e2b7c3971 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -107,3 +107,24 @@ code { margin-right: 2px; margin-bottom: 4px; } + + +article[itemtype="http://schema.org/BlogPosting"] .markdown a { + color: #005a9e; /* High contrast blue color */ + text-decoration: underline; /* Ensure links are visibly distinguishable */ +} + +article[itemtype="http://schema.org/BlogPosting"] .markdown a:hover, +article[itemtype="http://schema.org/BlogPosting"] .markdown a:focus { + color: #004080; /* Slightly darker blue on hover/focus */ +} + +/* Remove focus outline for code blocks */ +pre:focus { + outline: none; +} + +/* Prevent code blocks from being focusable */ +pre { + tabindex: -1; /* Remove tabindex from non-interactive elements */ +} \ No newline at end of file diff --git a/website/src/pages/contact_us.js b/website/src/pages/contact_us.js index 29835b20a..ce7ac4719 100644 --- a/website/src/pages/contact_us.js +++ b/website/src/pages/contact_us.js @@ -19,10 +19,13 @@ function ContactUs() {

Documentation

-

- You can visit the documentation of Azure Web PubSub service from  - . -

+

+ You can visit the{' '} + . +

@@ -33,16 +36,22 @@ function ContactUs() { issue

- The product team monitors GitHub issues on a daily basis. It’s the best way to reach out the team and ... Create a GitHub issue  - . + The product team monitors GitHub issues on a daily basis. It’s the best way to reach out to the team and share your feedback. Create an issue on  + .

Suggest a demo

- Have a demo you’d like to see on this site. Share your idea with us and creating a GitHub issue  - . + Have a demo you’d like to see on this site? Share your idea with us by creating an issue on  + .

Demos we are currently working on