diff --git a/pages/+page.svelte b/pages/+page.svelte index e0e6d7e..cc3a0eb 100644 --- a/pages/+page.svelte +++ b/pages/+page.svelte @@ -13,7 +13,8 @@ import { dev } from '$app/environment'; import { assets } from '$app/paths'; import { page } from '$app/stores'; - import { isReutersApp, isReutersDotcom } from '$utils/env'; + import { isReutersApp, isReutersDev, isReutersDotcom } from '$utils/env'; + import LogBlock from '$lib/components/dev/LogBlock.svelte'; // Styles import '@reuters-graphics/graphics-components/scss/main.scss'; @@ -47,6 +48,8 @@ {#if !isReutersApp($page.url)} {#if isReutersDotcom($page.url)} + {:else if isReutersDev($page.url)} + {/if} {/if} diff --git a/src/lib/App.svelte b/src/lib/App.svelte index 2ef75b1..ed0fd4d 100644 --- a/src/lib/App.svelte +++ b/src/lib/App.svelte @@ -16,7 +16,7 @@ GraphicBlock, InlineAd, } from '@reuters-graphics/graphics-components'; - import WarnBlock from './components/dev/WarnBlock.svelte'; + import LogBlock from './components/dev/LogBlock.svelte'; // Import ai2svelte components... import AiMap from '$lib/ai2svelte/ai-chart.svelte'; @@ -58,7 +58,7 @@ {:else if block.type === 'ai-graphic'} {#if !aiCharts[block.chart]} - + {:else} + {:else} + {/if} {:else} - + {/if} {/each} diff --git a/src/lib/components/dev/LogBlock.svelte b/src/lib/components/dev/LogBlock.svelte new file mode 100644 index 0000000..aba0279 --- /dev/null +++ b/src/lib/components/dev/LogBlock.svelte @@ -0,0 +1,60 @@ + + +{#if isReutersDev($page.url)} + + +
+ {level.toUpperCase()} + {message} +
+
+{/if} + + diff --git a/src/lib/components/dev/WarnBlock.svelte b/src/lib/components/dev/WarnBlock.svelte deleted file mode 100644 index ca9ccb3..0000000 --- a/src/lib/components/dev/WarnBlock.svelte +++ /dev/null @@ -1,34 +0,0 @@ - - - -{#if dev} - -
- WARN - {message} -
-
-{/if} - - diff --git a/src/utils/env/index.ts b/src/utils/env/index.ts index 47f0a1d..0913a5d 100644 --- a/src/utils/env/index.ts +++ b/src/utils/env/index.ts @@ -1,7 +1,7 @@ import { building } from '$app/environment'; /** - * Check if the page is being hosted inside the Reuters app. + * Check if the page is being hosted inside the Reuters mobile app. * * @example * ```typescript @@ -18,7 +18,7 @@ export const isReutersApp = (url: URL) => { }; /** - * Check if the page is being hosted on reuters.com + * Check if the page is being hosted on reuters.com. * * @example * ```typescript @@ -33,3 +33,37 @@ export const isReutersApp = (url: URL) => { export const isReutersDotcom = (url: URL) => { return /\Wreuters\.com$/.test(url.hostname); }; + +/** + * Check if the page is being hosted on our preview server at graphics.thomsonreuters.com. + * + * @example + * ```typescript + * import { page } from "$app/stores"; + * + * isReutersPreview($page.url); + * ``` + * + * @param url URL of current page + * @returns `true` if on graphics.thomsonreuters.com + */ +export const isReutersPreview = (url: URL) => { + return url.hostname === 'graphics.thomsonreuters.com'; +}; + +/** + * Check if the page is being hosted in development or on our preview server at graphics.thomsonreuters.com. + * + * @example + * ```typescript + * import { page } from "$app/stores"; + * + * isReutersDev($page.url); + * ``` + * + * @param url URL of current page + * @returns `true` if on dev or graphics.thomsonreuters.com + */ +export const isReutersDev = (url: URL) => { + return url.hostname === 'localhost' || isReutersPreview(url); +};