many things

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

google.json

@@ -1,4 +1,6 @@
 {
-  "docs": {},
+  "docs": {
+    "locales/en/content.json": "1D-dlkNwrDYD_puaYICD02NOO8qtQij5MG-FNz9aKsN0"
+  },
   "sheets": {}
 }

jsconfig.json

@@ -8,8 +8,7 @@
 			"$utils/*": ["src/utils/*"],
 			"$pkg": ["package.json"],
 			"$imgs": ["src/statics/images/manifest.json"],
-			"$locales/*": ["locales/*"],
-			"@reuters-graphics/svelte-page-components": ["src/FutureComponentLib/index.js"]
+			"$locales/*": ["locales/*"]
 		}
 	},
 	"include": ["src/**/*.js", "src/**/*.svelte"]

locales/en/content.json

@@ -1,8 +1 @@
-{
-  "SeoTitle": "Testing",
-  "SeoDescription": "Testing",
-  "title": "My page",
-  "chartTitle": "Congess",
-  "chartChatter": "Bacon ipsum dolor amet salami bresaola venison, boudin leberkas frankfurter pastrami.",
-  "story": "English Bacon ipsum dolor amet salami bresaola venison, boudin leberkas frankfurter pastrami. Beef buffalo strip steak boudin. Kevin tenderloin leberkas jowl, strip steak ball tip swine alcatra bacon turkey corned beef chuck brisket chicken tail.\n\nTenderloin cow kevin doner biltong burgdoggen short ribs. Capicola bresaola pork loin, flank spare ribs turducken chuck ham hock prosciutto fatback short ribs rump. Sirloin bresaola pastrami, swine porchetta ham hock short loin frankfurter ham kielbasa tail cow spare ribs cupim."
-}
+{"SEOTitle":"My page title for Google","SEODescription":"My page description for Google","ShareTitle":"My page title for Twitter","ShareDescription":"My page description for Twitter","Hed":"Reuters Graphics Interactive","Dek":"The beginning of a beautiful page","Kicker":"Global News","blocks":[{"Type":"text","Text":"Pig short ribs jerky, meatloaf turducken ribeye strip steak bacon pastrami tail pancetta chicken. Meatloaf ham hock tail picanha, meatball boudin pancetta capicola chislic kielbasa.\n\n#### This is a subhead\n\n“Rump salami spare ribs jowl corned beef picanha meatloaf bresaola, porchetta jerky ham hock venison ground round alcatra.” Picanha pig chuck pork meatloaf pork loin kevin t-bone leberkas turducken cupim meatball andouille."},{"Type":"photo","AltText":"describe what is happening in the image (for people using screenreaders)","Caption":"add a caption and source information (for all readers)"},{"Type":"text","Text":"Jerky venison flank, landjaeger pork chop capicola turkey. Spare ribs chicken venison, cupim tenderloin porchetta pig andouille ground round.\n\nGround round porchetta boudin drumstick venison beef ribs sausage pig kielbasa short loin. Kevin tenderloin tongue t-bone jerky, chicken ham. Pork chislic short loin burgdoggen pork chop capicola flank pancetta. Pig ground round turducken, rump tail spare ribs kielbasa frankfurter ribeye hamburger."},{"Type":"graphic","Title":"Pig ground round turducken","Chatter":"Pork chislic short loin burgdoggen pork chop capicola flank pancetta."},{"Type":"text","Text":"Jerky venison flank, landjaeger pork chop capicola turkey. Spare ribs chicken venison, cupim tenderloin porchetta pig andouille ground round.\n\nGround round porchetta boudin drumstick venison beef ribs sausage pig kielbasa short loin. Kevin tenderloin tongue t-bone jerky, chicken ham. Pork chislic short loin burgdoggen pork chop capicola flank pancetta. Pig ground round turducken, rump tail spare ribs kielbasa frankfurter ribeye hamburger."}],"EndNotes":"##### Note\nData is current as of today.\n\n##### Sources\nData, Inc.\n\n##### Edited by\n<Editor>, <Copyeditor>"}

package.json

@@ -27,7 +27,7 @@
     "@reuters-graphics/graphics-bin": "^0.0.8",
     "@reuters-graphics/graphics-kit-publisher": "^0.0.4",
     "@rollup/plugin-dsv": "^2.0.1",
-    "@sveltejs/kit": "next",
+    "@sveltejs/kit": "^1.0.0-next.75",
     "autoprefixer": "^10.2.5",
     "eslint": "^7.23.0",
     "eslint-plugin-svelte3": "^3.1.0",
@@ -36,7 +36,7 @@
     "sass": "^1.0.0",
     "svelte": "^3.29.0",
     "svelte-preprocess": "^4.0.0",
-    "vite": "^2.1.5"
+    "vite": "^2.1.0"
   },
   "engines": {
     "node": ">= 14.16.0"

pages/embed-previewer/index.svelte

@@ -1,8 +1,15 @@
 <script>
 import pages from '@svelte-kit-pages';
-import { Framer } from '@reuters-graphics/svelte-page-components';
+import { Framer } from 'reuters-components';
 
 const embeds = pages.filter(p => /^\/embeds\//.test(p));
 </script>
 
-<Framer {embeds} />
+<Framer {embeds} />
+
+<style lang='scss'>
+:global(body) {
+  padding-bottom: 60px;
+  background-color: #fafafa;
+}
+</style>

pages/embeds/en/chart.svelte

@@ -1,12 +1,21 @@
 <script>
 import Chart from '$lib/Chart.svelte';
-import { PymChild } from '@reuters-graphics/svelte-page-components';
-import '$lib/translations';
-import { init } from 'svelte-i18n';
-init({ initialLocale: 'en' });
+import { PymChild } from 'reuters-components';
+import content from '$locales/en/content.json';
 </script>
 
+
+<article>
+  {#each content.blocks as block}
+		{#if block.Type === 'graphic'}
+			<Chart title={block.Title} chatter={block.Chatter} />
+		{/if}
+	{/each}
+</article>
 <PymChild />
-<article class='container-fluid'>
-	<Chart />
-</article>
+
+<style lang="scss">
+:global {
+  @import "@reuters-graphics/style-theme-eisbaer/scss/main";
+}
+</style>

pages/embeds/en/page.svelte

@@ -0,0 +1,26 @@
+<script>
+import { SEO } from 'reuters-components';
+import Page from '$lib/Page.svelte';
+import content from '$locales/en/content.json';
+import { PymChild } from 'reuters-components';
+</script>
+
+<SEO 
+  seoTitle={content.SEOTitle}
+  seoDescription={content.SEODescription}
+  shareTitle={content.ShareTitle}
+  shareDescription={content.ShareDescription}
+  shareImgPath='images/shark.jpg'
+  lang='en'
+/>
+
+<Page />
+
+<PymChild/>
+
+<style lang="scss">
+:global {
+  @import "@reuters-graphics/style-theme-eisbaer/scss/main";
+}
+</style>
+

pages/index.svelte

@@ -1,18 +1,14 @@
 <script>
+import { SEO, Sharer, Referrals, Nav, Footer, EmbedPreviewerLink } from 'reuters-components';
 import Page from '$lib/Page.svelte';
-import '$lib/translations';
-import { SEO, Sharer, Referrals, Nav, Footer, EmbedPreviewerLink } from '@reuters-graphics/svelte-page-components';
-
-import { init } from 'svelte-i18n';
-
-init({ initialLocale: 'en' });
+import content from '$locales/en/content.json';
 </script>
 
 <SEO 
-	seoTitle='My page'
-	seoDescription='My description'
-	shareTitle='myShareTitle'
-	shareDescription='My share description'
+	seoTitle={content.SEOTitle}
+	seoDescription={content.SEODescription}
+	shareTitle={content.ShareTitle}
+	shareDescription={content.ShareDescription}
 	shareImgPath='images/shark.jpg'
 	lang='en'
 />

src/FutureGraphicsComponentsLib/EndNotes/index.svelte

@@ -0,0 +1,10 @@
+<script>
+import marked from 'marked';
+export let text;
+
+if (!text) throw new Error('"text" prop must be defined as a string for BodyText components');
+</script>
+
+<section class='end-notes'>
+  {@html marked(text)}
+</section>

src/FutureGraphicsComponentsLib/Framer/index.svelte

@@ -16,13 +16,15 @@ const roundToFive = (x) => Math.ceil(x / 5) * 5;
 let width = 600;
 let windowInnerWidth = 1200;
 
+let pymParent;
+
 const resize = (newWidth) => {
   localStorage.setItem('previewWidth', newWidth);
   width = newWidth;
 };
 
 const reframe = (embed) => {
-  new pym.Parent(
+  pymParent = new pym.Parent(
     'frame-parent',
     urljoin(window.location.origin, embed)
   );
@@ -106,7 +108,7 @@ $: if (browser) {
     margin-bottom: 20px;
     button {
       margin: 0 4px;
-      background-color: #fff;
+      background-color:transparent;
       border: 0;
       color: #999;
       padding: 2px 2px;
@@ -122,14 +124,14 @@ $: if (browser) {
   }
 
   #frame-parent {
-    border: 2px dashed #ddd;
+    border: 1px solid #ddd;
     margin: 0 auto;
     width: var(--width);
   }
 
   .resizer {
     padding: 10px;
-    background-color: #fff;
+    background-color:transparent;
     position: fixed;
     bottom: 0;
     right: 0;

src/FutureGraphicsComponentsLib/PymChild/index.svelte

@@ -2,9 +2,9 @@
 import { onMount } from 'svelte';
 import pym from 'pym.js';
 
-let childFrame;
+let pymChild;
 
 onMount(() => {
-  childFrame = new pym.Child({ polling: 500 });
+  pymChild = new pym.Child({ polling: 500 });
 });
 </script>

src/FutureGraphicsComponentsLib/index.js

@@ -1,5 +1,6 @@
 export { default as BodyText } from './BodyText/index.svelte';
 export { default as EmbedPreviewerLink } from './EmbedPreviewerLink/index.svelte';
+export { default as EndNotes } from './EndNotes/index.svelte';
 export { default as Footer } from './Footer/index.svelte';
 export { default as Framer } from './Framer/index.svelte';
 export { default as Image } from './Image/index.svelte';

src/lib/Chart.svelte

@@ -1,27 +1,53 @@
 <script>
   import Chart from '@reuters-graphics/parliament-chart';
   import { onMount } from 'svelte';
-  import { _ } from 'svelte-i18n';
+  import debounce from 'lodash/debounce';
+  export let title;
+  export let chatter;
+
+  const colours = (p) => {
+    switch (p.id) {
+      case 'a':
+        return '#2c6075';
+      case 'b':
+        return '#7ebfc1';
+      case 'c':
+        return '#d1eeea';
+      case 'd':
+        return '#ffd430';
+      case 'e':
+        return '#cda200';
+      default:
+        return 'lightgrey';
+    }
+  };
 
   onMount(() => {
     const chart = new Chart();
     chart
       .selection('#parliament-chart')
       .data([
-        { id: "gop",seats: 211 },
-        { id: "dem",seats: 221 }
+        { id: 'a', seats: 150 },
+        { id: 'b', seats: 125 },
+        { id: 'c', seats: 75 },
+        { id: 'd', seats: 50 },
+        { id: 'e', seats: 25 },
+        { id: 'f', seats: 10 },
       ])
       .props({
         circle: {
-          fill: (p) => p.id === 'gop' ? 'red' : 'blue',
-        }
+          fill: colours,
+        },
       })
       .draw();
-  })
+  
+    const resize = debounce(() => { chart.draw(); }, 250);
+    window.addEventListener('resize', resize);
+  });
 </script>
 
 <section class='graphic'>
-  <h3>{$_('chartTitle')}</h3>
-  <p>{$_('chartChatter')}</p>
+  <h3>{title}</h3>
+  <p>{chatter}</p>
   <div id='parliament-chart'></div>
 </section>

src/lib/Page.svelte

@@ -1,22 +1,29 @@
 <script>
-	import { Image, BodyText } from '@reuters-graphics/svelte-page-components';
-
-	import { _ } from 'svelte-i18n';
-	import Chart from './Chart.svelte';
+import content from '$locales/en/content.json';
+import { BodyText, Image, EndNotes } from 'reuters-components';
+import Chart from './Chart.svelte';
 </script>
 
-
 <article class='container-fluid'>
 	<section class="headline">
-		<p class="section-title color-red">Reuters Internet Fashion</p>
-		<h2 class="">{$_('title')}</h2>
-		<p>Cold simple theme for features and graphics.</p>
+		<p class="section-title color-red">{content.Kicker}</p>
+		<h2>{content.Hed}</h2>
+		<p>{content.Dek}</p>
 	</section>
-	<BodyText text={$_('story')} />
-	<Chart />
-	<BodyText text={$_('story')} />
-	<Image src='/images/shark.jpg' alt='a shark' caption='Photo by Jon' wider />
-	<BodyText text={$_('story')} />
+	{#each content.blocks as block}
+		{#if block.Type === 'text'}
+			 <BodyText text={block.Text} />
+		{:else if block.Type === 'photo'}
+			<Image
+				src='images/shark.jpg'
+				caption={block.Caption}
+				alt={block.AltText}
+				wide
+			/>
+		{:else if block.Type === 'graphic'}
+			<Chart title={block.Title} chatter={block.Chatter} />
+		{/if}
+	{/each}
 
+	<EndNotes text={content.EndNotes} />
 </article>
-

src/statics/images/manifest.json

@@ -1 +1 @@
-{"deeper/images/shark.jpg":{"width":2600,"height":1956,"size":205},"shark.jpg":{"width":1400,"height":788,"size":103}}
+{"shark.jpg":{"width":1400,"height":788,"size":103}}

src/template.html

@@ -8,6 +8,8 @@
 		%svelte.head%
 	</head>
 	<body>
-		%svelte.body%
+		<div id='svelte-app'>
+			%svelte.body%
+		</div>
 	</body>
 </html>

svelte.config.cjs

@@ -51,22 +51,19 @@ module.exports = {
       routes: 'pages',
       template: 'src/template.html',
     },
-    target: '',
+    target: '#svelte-app',
     vite: {
       resolve: {
         alias: {
           $utils: path.resolve(__dirname, 'src/utils'),
           $pkg: path.resolve(__dirname, 'package.json'),
           $imgs: path.resolve(__dirname, 'src/statics/images/manifest.json'),
           $locales: path.resolve(__dirname, 'locales'),
-          '@reuters-graphics/svelte-page-components': path.resolve(__dirname, 'src/FutureGraphicsComponentsLib/index.js'),
+          'reuters-components': path.resolve(__dirname, 'src/FutureGraphicsComponentsLib'),
         },
       },
-      build: {
-        assetsInlineLimit: 0,
-      },
       optimizeDeps: {
-        exclude: ['svelte-fa', 'embeds'],
+        exclude: ['svelte-fa'],
       },
       plugins: [
         dsv(),