From adf490b0134160b21479aa1ac934104c16f4f1ec Mon Sep 17 00:00:00 2001 From: Ronny Shani Date: Wed, 8 May 2024 20:34:08 +0200 Subject: [PATCH 1/3] Improve log modal styles, a11y, error message wording --- .../blueprints/src/lib/resources.ts | 28 ++++++++----------- .../src/components/log-modal/index.tsx | 2 +- .../src/components/log-modal/style.module.css | 6 ++-- 3 files changed, 17 insertions(+), 19 deletions(-) diff --git a/packages/playground/blueprints/src/lib/resources.ts b/packages/playground/blueprints/src/lib/resources.ts index a6a32f7f61..8501740cc2 100644 --- a/packages/playground/blueprints/src/lib/resources.ts +++ b/packages/playground/blueprints/src/lib/resources.ts @@ -229,30 +229,26 @@ export abstract class FetchResource extends Resource { throw new Error( `Could not download "${url}". Check if the URL is correct and the server is reachable. - If the url is reachable, the server might be blocking the request. - Check the console and network for more information. + If it is reachable, the server might be blocking the request. + Check the browser console and network tabs for more information. - ## Does the console shows an error about "No 'Access-Control-Allow-Origin' header"? + ## Does the console show the error "No 'Access-Control-Allow-Origin' header"? - This means the server where your file is hosted does not allow requests from other sites - (cross-origin requests, or CORS). You will need to move it to another server that allows - cross-origin file downloads. You can learn more about CORS at + This means the server that hosts your file does not allow requests from other sites + (cross-origin requests, or CORS). You need to move the asset to a server that allows + cross-origin file downloads. Learn more about CORS at https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS. - If you're loading a file from https://github.com/, there's an easy fix – you can load it from - raw.githubusercontent.com instead. Here's how to do that: + If your file is on GitHub, load it from "raw.githubusercontent.com". + Here's how to do that: - 1. Start with the original GitHub URL for the file. For example: - ''' - https://github.com/username/repository/blob/branch/filename - ''' - 2. Replace 'github.com' with 'raw.githubusercontent.com'. - 3. Remove the '/blob/' part of the URL. + 1. Start with the original GitHub URL of the file. For example: + https://github.com/username/repository/blob/branch/filename. + 2. Replace "github.com" with "raw.githubusercontent.com". + 3. Remove the "/blob/" part of the URL. The resulting URL should look like this: - ''' https://raw.githubusercontent.com/username/repository/branch/filename - ''' Error: ${e}` diff --git a/packages/playground/website/src/components/log-modal/index.tsx b/packages/playground/website/src/components/log-modal/index.tsx index dc4d4dc678..652d83185b 100644 --- a/packages/playground/website/src/components/log-modal/index.tsx +++ b/packages/playground/website/src/components/log-modal/index.tsx @@ -45,7 +45,7 @@ export function LogModal(props: { description?: JSX.Element; title?: string }) {

{props.title || 'Logs'}

{props.description} Date: Fri, 10 May 2024 18:57:09 +0200 Subject: [PATCH 2/3] Highlight error messages in the browser --- .../website/src/components/log-modal/index.tsx | 10 +++++++--- .../website/src/components/log-modal/style.module.css | 11 ++++++++--- 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/packages/playground/website/src/components/log-modal/index.tsx b/packages/playground/website/src/components/log-modal/index.tsx index 652d83185b..4d378ad455 100644 --- a/packages/playground/website/src/components/log-modal/index.tsx +++ b/packages/playground/website/src/components/log-modal/index.tsx @@ -29,9 +29,13 @@ export function LogModal(props: { description?: JSX.Element; title?: string }) { ) .reverse() .map((log, index) => ( - 
-					{log}
-
+
$&'), + }} + /> )); } diff --git a/packages/playground/website/src/components/log-modal/style.module.css b/packages/playground/website/src/components/log-modal/style.module.css index 684079534f..71d486bee7 100644 --- a/packages/playground/website/src/components/log-modal/style.module.css +++ b/packages/playground/website/src/components/log-modal/style.module.css @@ -8,9 +8,14 @@ } .log-modal__log { - text-wrap: wrap; + font-family: monospace; word-wrap: break-word; - padding: .5rem 0; + padding: 0.5rem 0; + margin: 0.5rem 0; white-space-collapse: preserve-breaks; border-block-end: 1px dashed currentcolor; -} \ No newline at end of file +} + +.log-modal__log:has(mark) { + background-color: ivory; +} From f494e9464d7db26d31f0eae3b108cb2ffab32835 Mon Sep 17 00:00:00 2001 From: Ronny Shani <63248335+ironnysh@users.noreply.github.com> Date: Wed, 15 May 2024 15:50:12 +0200 Subject: [PATCH 3/3] Highlight "Fatal" erros as well MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit As @bgrgicak mentioned, “PHP errors start with Fatal, so it would be nice to include it as an option.” Co-authored-by: Bero --- packages/playground/website/src/components/log-modal/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/playground/website/src/components/log-modal/index.tsx b/packages/playground/website/src/components/log-modal/index.tsx index 4d378ad455..6c91f73674 100644 --- a/packages/playground/website/src/components/log-modal/index.tsx +++ b/packages/playground/website/src/components/log-modal/index.tsx @@ -33,7 +33,7 @@ export function LogModal(props: { description?: JSX.Element; title?: string }) { className={css.logModalLog} key={index} dangerouslySetInnerHTML={{ - __html: log.replace(/Error:/, '$&'), + __html: log.replace(/Error:|Fatal:/, '$&'), }} /> ));