add info blocks for ads

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)}
       <LeaderboardAd />
+    {:else if isReutersDev($page.url)}
+      <LogBlock level="info" message="An ad will appear here on dotcom" />
     {/if}
     <SiteHeader />
   {/if}

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 @@
       <!-- Ai2svelte graphic block -->
     {:else if block.type === 'ai-graphic'}
       {#if !aiCharts[block.chart]}
-        <WarnBlock message="{`Unable to find "${block.chart}" in aiCharts`}" />
+        <LogBlock message="{`Unable to find "${block.chart}" in aiCharts`}" />
       {:else}
         <GraphicBlock
           id="{block.chart}"
@@ -79,11 +79,13 @@
     {:else if block.type === 'inline-ad'}
       {#if isReutersDotcom($page.url)}
         <InlineAd n="{inlineAdNumber(block.n)}" />
+      {:else}
+        <LogBlock level="info" message="An ad will appear here on dotcom" />
       {/if}
 
       <!-- Warning block -->
     {:else}
-      <WarnBlock message="{`Unknown block type: "${block.type}"`}" />
+      <LogBlock message="{`Unknown block type: "${block.type}"`}" />
     {/if}
   {/each}
 

src/lib/components/dev/LogBlock.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import { isReutersDev } from '$utils/env';
+  import { Block } from '@reuters-graphics/graphics-components';
+
+  /**
+   * A message to display
+   */
+  export let message: string;
+  /**
+   * The level of the message, either `warn` or `info`
+   */
+  export let level: 'warn' | 'info' = 'warn';
+</script>
+
+{#if isReutersDev($page.url)}
+  <!-- This log will only appear in development. -->
+  <Block>
+    <div class="{level}">
+      <span>{level.toUpperCase()}</span>
+      {message}
+    </div>
+  </Block>
+{/if}
+
+<style lang="scss">
+  div {
+    margin: 15px 0;
+    padding: 0.75rem;
+    font-family: monospace;
+    font-size: 0.85rem;
+    border-radius: 4px;
+
+    span {
+      display: inline-block;
+      padding: 2px 5px;
+      border-radius: 2px;
+    }
+
+    &.warn {
+      color: #000;
+      background-color: #ffe0e0;
+      border: 1px solid #ffbebe;
+      span {
+        background-color: #dc3545;
+        color: white;
+      }
+    }
+
+    &.info {
+      color: #000;
+      background-color: #e0f7ff;
+      border: 1px solid #d2dcff;
+      span {
+        background-color: #007bff;
+        color: white;
+      }
+    }
+  }
+</style>

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);
+};