docs: use github gist integration for sharing samples (#12337)

To improve the sharing, specifically the long url for sharing samples, we integrated GitHub gist.
We can create GitHub gist from the UI, which stores it on GitHub and get short readable URL.

Author: ilhan007

packages/website/src/components/Editor/GitHubGist.js

@@ -0,0 +1,103 @@
+import React from "react";
+import "@ui5/webcomponents/dist/Label.js";
+import "@ui5/webcomponents/dist/Input.js";
+import "@ui5/webcomponents/dist/Button.js";
+import CopyIcon from "@ui5/webcomponents-icons/dist/v5/copy.js";
+import GithubIcon from "@ui5/webcomponents-icons-tnt/dist/github.js";
+
+export default function GitHubGist({
+  githubUser,
+  isAuthenticating,
+  isCreatingGist,
+  gistUrl,
+  onSignIn,
+  onSignOut,
+  onCreateGist,
+  onCopyGistUrl,
+  setCopied
+}) {
+  const handleCopyGistUrl = async () => {
+    try {
+      await onCopyGistUrl(gistUrl);
+      setCopied(true);
+    } catch (error) {
+      console.error("failed to copy to clipboard:", error);
+    }
+  };
+
+  return (
+    <div>
+      <ui5-label style={{ marginTop: "1rem" }}>GitHub Gist</ui5-label>
+      
+      {!githubUser ? (
+        <div style={{ textAlign: "center", padding: "1rem 0" }}>
+          <ui5-button 
+            onClick={onSignIn}
+            disabled={isAuthenticating ? true : undefined}
+            style={{ width: "100%" }}
+            icon={GithubIcon}
+          >
+            {isAuthenticating ? "Signing in..." : "Sign in with GitHub"}
+          </ui5-button>
+        </div>
+      ) : (
+        <div>
+          {gistUrl ? (
+            <div>
+              <div style={{ 
+                display: "flex", 
+                gap: "0.5rem", 
+                alignItems: "center", 
+                marginBottom: "0.5rem" 
+              }}>
+                <ui5-input readonly value={gistUrl}></ui5-input>
+                <ui5-button
+                  icon={CopyIcon}
+                  design="Transparent"
+                  onClick={handleCopyGistUrl}
+                ></ui5-button>
+              </div>
+            </div>
+          ) : (
+            <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+              <ui5-button 
+                onClick={onCreateGist}
+                disabled={isCreatingGist ? true : undefined}
+                icon={GithubIcon}
+              >
+                {isCreatingGist ? "Creating Gist..." : "Create GitHub Gist"}
+              </ui5-button>
+
+              <ui5-button
+                design="Transparent"
+                onClick={onSignOut}
+              >
+                Sign out
+              </ui5-button>
+            </div>
+          )}
+          
+          <span style={{ 
+            fontSize: "0.8rem", 
+            color: "var(--sapSuccessColor)" 
+          }}>
+            ✓ Signed in as {githubUser.login} 
+            {githubUser.avatar_url && (
+              <img 
+                src={githubUser.avatar_url} 
+                alt="avatar" 
+                style={{ 
+                  width: "1.5rem", 
+                  height: "1.5rem", 
+                  borderRadius: "50%", 
+                  verticalAlign: "middle", 
+                  marginLeft: "0.5rem" 
+                }} 
+              />
+            )}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}

packages/website/src/components/Editor/githubAPI.js

@@ -0,0 +1,94 @@
+/**
+ * GitHub API utility functions for the playground
+ */
+
+const NETLIFY_BASE_URL = "https://ui5-webc-playground-server.netlify.app/.netlify/functions";
+
+export const fetchAuthUrl = async () => {
+	const response = await fetch(`${NETLIFY_BASE_URL}/github-auth-url`, {
+		method: "GET",
+		headers: {
+			"Content-Type": "application/json"
+		}
+	});
+
+	if (!response.ok) {
+		throw new Error(`failed to get oauth url: ${response.status}`);
+	}
+
+	return response.json();
+};
+
+export const exchangeCodeForToken = async (code, state) => {
+	const response = await fetch(`${NETLIFY_BASE_URL}/github-token`, {
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json"
+		},
+		body: JSON.stringify({ code, state })
+	});
+
+	if (!response.ok) {
+		const errorData = await response.json().catch(() => ({}));
+		throw new Error(errorData.message || `token exchange failed: ${response.status}`);
+	}
+
+	return response.json();
+};
+
+export const createGist = async (token, files, description = "ui5 web components playground example") => {
+	const response = await fetch(`${NETLIFY_BASE_URL}/github-create-gist`, {
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json",
+			"Authorization": `Bearer ${token}`
+		},
+		body: JSON.stringify({ files, description })
+	});
+
+	if (!response.ok) {
+		const errorData = await response.json().catch(() => ({}));
+		throw new Error(errorData.message || `server error: ${response.status}`);
+	}
+
+	return response.json();
+};
+
+/**
+ * Load and convert gist files to playground format
+ */
+export const loadGist = async (gistId) => {
+	try {
+		console.log(`loading gist: ${gistId}`);
+		const response = await fetch(`${NETLIFY_BASE_URL}/github-get-gist?id=${gistId}`, {
+			method: 'GET',
+			headers: {
+			'Content-Type': 'application/json'
+			}
+		});
+
+		if (!response.ok) {
+			throw new Error(`failed to load gist: ${response.status}`);
+		}
+
+		const gist = await response.json();
+		console.log(`gist loaded: ${gist.description}`, Object.keys(gist.files));
+		
+		// convert gist files to playground format 
+		const playgroundFiles = {};
+		Object.keys(gist.files).forEach(filename => {
+			const gistFile = gist.files[filename];
+			playgroundFiles[filename] = {
+			name: filename,
+			content: gistFile.content,
+			hidden: filename === 'playground-support.js'
+			};
+		});
+		
+		console.log('converted playground files:', Object.keys(playgroundFiles));
+		return playgroundFiles;
+	} catch (error) {
+		console.error('failed to load gist:', error);
+		throw error;
+	}
+};

packages/website/src/components/Editor/githubAuth.js

@@ -0,0 +1,110 @@
+import { fetchAuthUrl, exchangeCodeForToken } from "./githubAPI.js";
+
+const TOKEN_EXPIRY_KEY = 'github_token_expiry';
+const TOKEN_LIFETIME = 24 * 60 * 60 * 1000; // 24 hours
+
+/**
+ * Handle OAuth popup window and authentication flow
+ */
+export const auth = async () => {
+	const { authUrl, state } = await fetchAuthUrl();
+
+	// open github oauth popup 
+	const popup = window.open(authUrl, "github-auth", "width=600,height=700,scrollbars=yes,resizable=yes");
+
+	// listen for oauth callback 
+	const authResult = await new Promise((resolve, reject) => {
+		const messageHandler = (event) => {
+			// verify origin for security 
+			if (!event.origin.includes("github.com") && !event.origin.includes("ui5-webc-playground-server.netlify.app")) {
+				return;
+			}
+
+			if (event.data.type === "GITHUB_OAUTH_SUCCESS") {
+				window.removeEventListener("message", messageHandler);
+				popup.close();
+				resolve(event.data);
+			} else if (event.data.type === "GITHUB_OAUTH_ERROR") {
+				window.removeEventListener("message", messageHandler);
+				popup.close();
+				reject(new Error(event.data.error));
+			}
+		};
+
+		window.addEventListener("message", messageHandler);
+
+		// poll for url changes in popup 
+		const pollTimer = setInterval(() => {
+			try {
+				if (popup.closed) {
+					clearInterval(pollTimer);
+					window.removeEventListener("message", messageHandler);
+					reject(new Error("authentication cancelled by user"));
+					return;
+				}
+
+				// check if we got redirected back with code 
+				const url = popup.location.href;
+				if (url.includes("code=")) {
+					clearInterval(pollTimer);
+					window.removeEventListener("message", messageHandler);
+					
+					const urlParams = new URLSearchParams(new URL(url).search);
+					const code = urlParams.get("code");
+					const returnedState = urlParams.get("state");
+					
+					popup.close();
+					resolve({ code, state: returnedState });
+				}
+			} catch (error) {
+				// cross-origin restrictions prevent access to popup url 
+				// continue polling until popup closes or we get a message
+			}
+		}, 1000);
+	});
+
+	// exchange code for token
+	return exchangeCodeForToken(authResult.code, authResult.state);
+};
+
+/**
+ * Manage authentication state in localStorage
+ */
+export const saveAuthToStorage = (token, user) => {
+	const expiryTime = Date.now() + TOKEN_LIFETIME;
+	
+	localStorage.setItem('github_token', token);
+	localStorage.setItem('github_user', JSON.stringify(user));
+	localStorage.setItem(TOKEN_EXPIRY_KEY, expiryTime.toString());
+};
+
+export const isTokenExpired = () => {
+	const expiryTime = localStorage.getItem(TOKEN_EXPIRY_KEY);
+	if (!expiryTime) return true;
+
+	return Date.now() > parseInt(expiryTime);
+};
+
+export const validateStoredAuth = () => {
+	const token = localStorage.getItem('github_token');
+	const userStr = localStorage.getItem('github_user');
+
+	if (!token || !userStr || isTokenExpired()) {
+		clearAuthFromStorage();
+		return null;
+	}
+
+	try {
+		const user = JSON.parse(userStr);
+		return { token, user };
+	} catch (error) {
+		clearAuthFromStorage();
+		return null;
+	}
+};
+
+export const clearAuthFromStorage = () => {
+	localStorage.removeItem('github_token');
+	localStorage.removeItem('github_user');
+	localStorage.removeItem(TOKEN_EXPIRY_KEY);
+};

packages/website/src/components/Editor/githubUtils.js

@@ -0,0 +1,25 @@
+import { fetchGist } from "./githubAPI.js";
+
+/**
+ * Extract gist ID from URL hash
+ */
+export const getGistIdFromURL = () => {
+	if (!location.pathname.includes("/play")) {
+		return null;
+	}
+
+	// check for gist id in hash, f.e: #gist=e16211951641a1197026a3f9cfb2965d
+	const hash = location.hash;
+	if (hash.startsWith("#gist=")) {
+		return hash.substring(6); // remove "#gist=" prefix
+	}
+
+	return null;
+};
+
+/**
+ * Copy text to clipboard with fallback
+ */
+export const copyToClipboard = async (text) => {
+	await navigator.clipboard.writeText(text);
+};