@reuters-graphics/graphics-components 0.0.1-beta.10 → 0.0.1-beta.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,11 +1,17 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
2
  declare const __propDef: {
3
3
  props: {
4
+ /**
5
+ * Base url for the page, which in [Vite-based projects](https://vitejs.dev/guide/build.html#public-base-path)
6
+ * is globally available as `import.meta.env.BASE_URL`.
7
+ * @required
8
+ * @type {string}
9
+ */ baseUrl?: string;
4
10
  /**
5
11
  * [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object for the page.
6
12
  * @required
7
13
  * @type {URL}
8
- */ url?: URL | null;
14
+ */ pageUrl?: URL | null;
9
15
  /**
10
16
  * SEO title
11
17
  * @required
@@ -1,11 +1,18 @@
1
1
  <script>import analytics from './analytics';
2
2
  import publisherTags from './publisherTags';
3
+ /**
4
+ * Base url for the page, which in [Vite-based projects](https://vitejs.dev/guide/build.html#public-base-path)
5
+ * is globally available as `import.meta.env.BASE_URL`.
6
+ * @required
7
+ * @type {string}
8
+ */
9
+ export let baseUrl = '';
3
10
  /**
4
11
  * [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object for the page.
5
12
  * @required
6
13
  * @type {URL}
7
14
  */
8
- export let url = null;
15
+ export let pageUrl = null;
9
16
  /**
10
17
  * SEO title
11
18
  * @required
@@ -59,9 +66,11 @@ export let authors = [];
59
66
  * Whether to inject Google Analytics code for this page.
60
67
  */
61
68
  export let includeAnalytics = false;
69
+ $: origin = new URL(baseUrl).origin;
70
+ $: canonicalUrl = origin + pageUrl.pathname;
62
71
  // Only fire analytics on prod sites
63
72
  if (typeof window !== 'undefined' && includeAnalytics) {
64
- analytics(url, seoTitle);
73
+ analytics(canonicalUrl, seoTitle);
65
74
  publisherTags();
66
75
  }
67
76
  const orgLdJson = {
@@ -81,10 +90,10 @@ const articleLdJson = {
81
90
  '@context': 'http://schema.org',
82
91
  '@type': 'NewsArticle',
83
92
  headline: seoTitle,
84
- url: url.href,
93
+ url: canonicalUrl,
85
94
  mainEntityOfPage: {
86
95
  '@type': 'WebPage',
87
- '@id': url.href,
96
+ '@id': canonicalUrl,
88
97
  },
89
98
  thumbnailUrl: shareImgPath,
90
99
  image: [
@@ -117,7 +126,7 @@ const articleLdJson = {
117
126
  <html lang="{lang}"></html>
118
127
  <title>{seoTitle}</title>
119
128
  <meta name="description" content="{seoDescription}" />
120
- <link rel="canonical" href="{url.href}" />
129
+ <link rel="canonical" href="{canonicalUrl}" />
121
130
  <link
122
131
  rel="shortcut icon"
123
132
  type="image/x-icon"
@@ -142,7 +151,7 @@ const articleLdJson = {
142
151
  sizes="96x96"
143
152
  />
144
153
 
145
- <meta property="og:url" content="{url.href}" />
154
+ <meta property="og:url" content="{canonicalUrl}" />
146
155
  <meta property="og:type" content="article" />
147
156
  <meta property="og:title" content="{shareTitle}" itemprop="name" />
148
157
  <meta
@@ -150,17 +159,13 @@ const articleLdJson = {
150
159
  content="{shareDescription}"
151
160
  itemprop="description"
152
161
  />
153
- <meta
154
- property="og:image"
155
- content="{shareImgPath}"
156
- itemprop="image"
157
- />
162
+ <meta property="og:image" content="{shareImgPath}" itemprop="image" />
158
163
  <meta property="og:site_name" content="Reuters" />
159
164
 
160
165
  <meta name="twitter:card" content="summary_large_image" />
161
166
  <meta name="twitter:site" content="@ReutersGraphics" />
162
167
  <meta name="twitter:creator" content="@ReutersGraphics" />
163
- <meta name="twitter:domain" content="{url.origin}" />
168
+ <meta name="twitter:domain" content="{origin}" />
164
169
  <meta name="twitter:title" content="{shareTitle}" />
165
170
  <meta name="twitter:description" content="{shareDescription}" />
166
171
  <meta name="twitter:image:src" content="{shareImgPath}" />
@@ -1,5 +1,5 @@
1
1
  <script>
2
- import { ReutersLogo } from '../../../index.js';
2
+ import ReutersLogo from '../../ReutersLogo/ReutersLogo.svelte';
3
3
  import CloseIcon from '../svgs/Close.svelte';
4
4
  import { normalizeUrl } from '../NavBar/utils/index.js';
5
5
 
@@ -1,4 +1,4 @@
1
- <script>import { ReutersLogo } from '../../index.js';
1
+ <script>import ReutersLogo from '../ReutersLogo/ReutersLogo.svelte';
2
2
  import NavBar from './NavBar/index.svelte';
3
3
  import data from './data.json';
4
4
  import { setContext } from 'svelte';
@@ -17,18 +17,16 @@ export let theme = {};
17
17
  * explicitly set.
18
18
  */
19
19
  export let base = 'light';
20
- import cssVariables from '../../actions/cssVariables';
21
20
  import flatten from './utils/flatten';
22
21
  import mergeThemes from './utils/merge';
23
22
  /** @type {Theme} */
24
23
  $: mergedTheme = mergeThemes({}, themes[base] || themes.light, theme);
24
+ $: cssVariables = Object.entries(flatten({ theme: mergedTheme }))
25
+ .map(([key, value]) => `--${key}: ${value};`)
26
+ .join(' ');
25
27
  </script>
26
28
 
27
- <div
28
- class="theme"
29
- style="display: contents;"
30
- use:cssVariables="{flatten({ theme: mergedTheme })}"
31
- >
29
+ <div class="theme" style="{cssVariables}" style:display="contents">
32
30
  <!-- Clients can override the theme above by attaching custom properties to this element. -->
33
31
  <div class="theme-client-override" style="display: contents;">
34
32
  <!-- Themed content -->
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reuters-graphics/graphics-components",
3
- "version": "0.0.1-beta.10",
3
+ "version": "0.0.1-beta.13",
4
4
  "type": "module",
5
5
  "private": false,
6
6
  "homepage": "https://reuters-graphics.github.io/graphics-components",