@newskit-render/core 2.37.2 → 2.38.0-alpha.0

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.
Files changed (7) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/components/article/__tests__/__snapshots__/index.test.tsx.snap +164 -156
  3. package/package.json +3 -3
  4. package/pages/preview/[articleId]/version/[versionId]/index.tsx +19 -26
  5. package/public/ads.min.js +8175 -1
  6. package/helpers/__tests__/getRecommendation.test.ts +0 -56
  7. package/helpers/getRecommendations.ts +0 -30
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [2.37.2](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@2.37.2-alpha.0...@newskit-render/core@2.37.2) (2023-01-05)
7
+
8
+ **Note:** Version bump only for package @newskit-render/core
9
+
10
+
11
+
12
+
13
+
6
14
  ## [2.37.1](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@2.37.1-alpha.0...@newskit-render/core@2.37.1) (2023-01-03)
7
15
 
8
16
  **Note:** Version bump only for package @newskit-render/core
package/components/article/__tests__/__snapshots__/index.test.tsx.snap CHANGED
@@ -996,97 +996,101 @@ exports[`Article should render tile and sub title 1`] = `
996
996
  <div
997
997
  class="css-1g1d237"
998
998
  >
999
- <div
1000
- class="css-1z995g"
1001
- data-testid="article-recommendation-small"
1002
- >
999
+ <div>
1003
1000
  <div
1004
- class="css-14avdtw"
1001
+ class="css-1z995g"
1002
+ data-testid="article-recommendation-small"
1005
1003
  >
1006
- <figure
1007
- class="css-yzl8al"
1004
+ <div
1005
+ class="css-14avdtw"
1008
1006
  >
1009
- <img
1010
- alt="Prince Harry"
1011
- data-nimg="fill"
1012
- decoding="async"
1013
- loading="lazy"
1014
- sizes="(max-width: 768px) 100vw,
1007
+ <figure
1008
+ class="css-yzl8al"
1009
+ >
1010
+ <img
1011
+ alt="Prince Harry"
1012
+ data-nimg="fill"
1013
+ decoding="async"
1014
+ loading="lazy"
1015
+ sizes="(max-width: 768px) 100vw,
1015
1016
  (max-width: 1200px) 50vw,
1016
1017
  33vw"
1017
- src="/_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=3840&q=75"
1018
- srcset="/_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=256&q=75 256w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=384&q=75 384w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=3840&q=75 3840w"
1019
- style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; object-fit: contain; color: transparent; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;"
1020
- />
1021
- </figure>
1022
- </div>
1023
- <div
1024
- class="css-1r2lt0d"
1025
- >
1018
+ src="/_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=3840&q=75"
1019
+ srcset="/_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=256&q=75 256w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=384&q=75 384w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=3840&q=75 3840w"
1020
+ style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; object-fit: contain; color: transparent; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;"
1021
+ />
1022
+ </figure>
1023
+ </div>
1026
1024
  <div
1027
- class="css-h6wt93"
1025
+ class="css-1r2lt0d"
1028
1026
  >
1029
- <a
1030
- class="nk-card-link css-j3tblu"
1031
- href="http://localhost"
1027
+ <div
1028
+ class="css-h6wt93"
1032
1029
  >
1033
- <section
1034
- class="css-v6h0se"
1030
+ <a
1031
+ class="nk-card-link css-j3tblu"
1032
+ href="http://localhost"
1035
1033
  >
1036
- <h4
1037
- class="nk-headline-heading css-l6hs79"
1034
+ <section
1035
+ class="css-v6h0se"
1038
1036
  >
1039
- Prince Harry
1040
- </h4>
1041
- </section>
1042
- </a>
1037
+ <h4
1038
+ class="nk-headline-heading css-l6hs79"
1039
+ >
1040
+ Prince Harry
1041
+ </h4>
1042
+ </section>
1043
+ </a>
1044
+ </div>
1043
1045
  </div>
1044
1046
  </div>
1045
1047
  </div>
1046
- <div
1047
- class="css-1z995g"
1048
- data-testid="article-recommendation-small"
1049
- >
1048
+ <div>
1050
1049
  <div
1051
- class="css-14avdtw"
1050
+ class="css-1z995g"
1051
+ data-testid="article-recommendation-small"
1052
1052
  >
1053
- <figure
1054
- class="css-yzl8al"
1053
+ <div
1054
+ class="css-14avdtw"
1055
1055
  >
1056
- <img
1057
- alt="Meghan Markle"
1058
- data-nimg="fill"
1059
- decoding="async"
1060
- loading="lazy"
1061
- sizes="(max-width: 768px) 100vw,
1056
+ <figure
1057
+ class="css-yzl8al"
1058
+ >
1059
+ <img
1060
+ alt="Meghan Markle"
1061
+ data-nimg="fill"
1062
+ decoding="async"
1063
+ loading="lazy"
1064
+ sizes="(max-width: 768px) 100vw,
1062
1065
  (max-width: 1200px) 50vw,
1063
1066
  33vw"
1064
- src="/_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=3840&q=75"
1065
- srcset="/_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=256&q=75 256w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=384&q=75 384w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=3840&q=75 3840w"
1066
- style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; object-fit: contain; color: transparent; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;"
1067
- />
1068
- </figure>
1069
- </div>
1070
- <div
1071
- class="css-1r2lt0d"
1072
- >
1067
+ src="/_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=3840&q=75"
1068
+ srcset="/_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=256&q=75 256w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=384&q=75 384w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=3840&q=75 3840w"
1069
+ style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; object-fit: contain; color: transparent; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;"
1070
+ />
1071
+ </figure>
1072
+ </div>
1073
1073
  <div
1074
- class="css-h6wt93"
1074
+ class="css-1r2lt0d"
1075
1075
  >
1076
- <a
1077
- class="nk-card-link css-j3tblu"
1078
- href="http://localhost"
1076
+ <div
1077
+ class="css-h6wt93"
1079
1078
  >
1080
- <section
1081
- class="css-v6h0se"
1079
+ <a
1080
+ class="nk-card-link css-j3tblu"
1081
+ href="http://localhost"
1082
1082
  >
1083
- <h4
1084
- class="nk-headline-heading css-l6hs79"
1083
+ <section
1084
+ class="css-v6h0se"
1085
1085
  >
1086
- Meghan Markle
1087
- </h4>
1088
- </section>
1089
- </a>
1086
+ <h4
1087
+ class="nk-headline-heading css-l6hs79"
1088
+ >
1089
+ Meghan Markle
1090
+ </h4>
1091
+ </section>
1092
+ </a>
1093
+ </div>
1090
1094
  </div>
1091
1095
  </div>
1092
1096
  </div>
@@ -1214,129 +1218,133 @@ exports[`Article should render tile and sub title 1`] = `
1214
1218
  <div
1215
1219
  class="css-w0aqjr"
1216
1220
  >
1217
- <div
1218
- class="css-1v4r5rv"
1219
- data-testid="article-recommendation-large"
1220
- >
1221
+ <div>
1221
1222
  <div
1222
- class="css-b5xivb"
1223
+ class="css-1v4r5rv"
1224
+ data-testid="article-recommendation-large"
1223
1225
  >
1224
- <figure
1225
- class="css-yzl8al"
1226
+ <div
1227
+ class="css-b5xivb"
1226
1228
  >
1227
- <img
1228
- alt="Prince Harry"
1229
- data-nimg="fill"
1230
- decoding="async"
1231
- loading="lazy"
1232
- sizes="(max-width: 768px) 100vw,
1229
+ <figure
1230
+ class="css-yzl8al"
1231
+ >
1232
+ <img
1233
+ alt="Prince Harry"
1234
+ data-nimg="fill"
1235
+ decoding="async"
1236
+ loading="lazy"
1237
+ sizes="(max-width: 768px) 100vw,
1233
1238
  (max-width: 1200px) 50vw,
1234
1239
  33vw"
1235
- src="/_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=3840&q=75"
1236
- srcset="/_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=256&q=75 256w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=384&q=75 384w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=3840&q=75 3840w"
1237
- style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; object-fit: contain; color: transparent; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;"
1238
- />
1239
- </figure>
1240
- </div>
1241
- <div
1242
- class="css-1shocxe"
1243
- >
1240
+ src="/_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=3840&q=75"
1241
+ srcset="/_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=256&q=75 256w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=384&q=75 384w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=3840&q=75 3840w"
1242
+ style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; object-fit: contain; color: transparent; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;"
1243
+ />
1244
+ </figure>
1245
+ </div>
1244
1246
  <div
1245
- class="css-u3mic"
1247
+ class="css-1shocxe"
1246
1248
  >
1247
1249
  <div
1248
- class="css-38y4ob"
1250
+ class="css-u3mic"
1249
1251
  >
1250
1252
  <div
1251
- class="css-1vjcmlt"
1253
+ class="css-38y4ob"
1252
1254
  >
1253
- <a
1254
- class="nk-card-link css-j3tblu"
1255
- href="http://localhost"
1255
+ <div
1256
+ class="css-1vjcmlt"
1256
1257
  >
1257
- <section
1258
- class="css-jdch7u"
1258
+ <a
1259
+ class="nk-card-link css-j3tblu"
1260
+ href="http://localhost"
1259
1261
  >
1260
- <h6
1261
- class="nk-headline-heading css-l6hs79"
1262
+ <section
1263
+ class="css-jdch7u"
1262
1264
  >
1263
- Prince Harry
1264
- </h6>
1265
- </section>
1266
- </a>
1267
- </div>
1268
- <div
1269
- class="css-1vjcmlt"
1270
- >
1271
- <p
1272
- class="css-x4rcwg"
1265
+ <h6
1266
+ class="nk-headline-heading css-l6hs79"
1267
+ >
1268
+ Prince Harry
1269
+ </h6>
1270
+ </section>
1271
+ </a>
1272
+ </div>
1273
+ <div
1274
+ class="css-1vjcmlt"
1273
1275
  >
1274
- news
1275
- </p>
1276
+ <p
1277
+ class="css-x4rcwg"
1278
+ >
1279
+ news
1280
+ </p>
1281
+ </div>
1276
1282
  </div>
1277
1283
  </div>
1278
1284
  </div>
1279
1285
  </div>
1280
1286
  </div>
1281
- <div
1282
- class="css-1v4r5rv"
1283
- data-testid="article-recommendation-large"
1284
- >
1287
+ <div>
1285
1288
  <div
1286
- class="css-b5xivb"
1289
+ class="css-1v4r5rv"
1290
+ data-testid="article-recommendation-large"
1287
1291
  >
1288
- <figure
1289
- class="css-yzl8al"
1292
+ <div
1293
+ class="css-b5xivb"
1290
1294
  >
1291
- <img
1292
- alt="Meghan Markle"
1293
- data-nimg="fill"
1294
- decoding="async"
1295
- loading="lazy"
1296
- sizes="(max-width: 768px) 100vw,
1295
+ <figure
1296
+ class="css-yzl8al"
1297
+ >
1298
+ <img
1299
+ alt="Meghan Markle"
1300
+ data-nimg="fill"
1301
+ decoding="async"
1302
+ loading="lazy"
1303
+ sizes="(max-width: 768px) 100vw,
1297
1304
  (max-width: 1200px) 50vw,
1298
1305
  33vw"
1299
- src="/_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=3840&q=75"
1300
- srcset="/_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=256&q=75 256w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=384&q=75 384w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=3840&q=75 3840w"
1301
- style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; object-fit: contain; color: transparent; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;"
1302
- />
1303
- </figure>
1304
- </div>
1305
- <div
1306
- class="css-1shocxe"
1307
- >
1306
+ src="/_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=3840&q=75"
1307
+ srcset="/_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=256&q=75 256w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=384&q=75 384w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F70x50&w=3840&q=75 3840w"
1308
+ style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; object-fit: contain; color: transparent; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;"
1309
+ />
1310
+ </figure>
1311
+ </div>
1308
1312
  <div
1309
- class="css-u3mic"
1313
+ class="css-1shocxe"
1310
1314
  >
1311
1315
  <div
1312
- class="css-38y4ob"
1316
+ class="css-u3mic"
1313
1317
  >
1314
1318
  <div
1315
- class="css-1vjcmlt"
1319
+ class="css-38y4ob"
1316
1320
  >
1317
- <a
1318
- class="nk-card-link css-j3tblu"
1319
- href="http://localhost"
1321
+ <div
1322
+ class="css-1vjcmlt"
1320
1323
  >
1321
- <section
1322
- class="css-jdch7u"
1324
+ <a
1325
+ class="nk-card-link css-j3tblu"
1326
+ href="http://localhost"
1323
1327
  >
1324
- <h6
1325
- class="nk-headline-heading css-l6hs79"
1328
+ <section
1329
+ class="css-jdch7u"
1326
1330
  >
1327
- Meghan Markle
1328
- </h6>
1329
- </section>
1330
- </a>
1331
- </div>
1332
- <div
1333
- class="css-1vjcmlt"
1334
- >
1335
- <p
1336
- class="css-x4rcwg"
1331
+ <h6
1332
+ class="nk-headline-heading css-l6hs79"
1333
+ >
1334
+ Meghan Markle
1335
+ </h6>
1336
+ </section>
1337
+ </a>
1338
+ </div>
1339
+ <div
1340
+ class="css-1vjcmlt"
1337
1341
  >
1338
- news
1339
- </p>
1342
+ <p
1343
+ class="css-x4rcwg"
1344
+ >
1345
+ news
1346
+ </p>
1347
+ </div>
1340
1348
  </div>
1341
1349
  </div>
1342
1350
  </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@newskit-render/core",
3
- "version": "2.37.2",
3
+ "version": "2.38.0-alpha.0",
4
4
  "description": "Newskit Render - Core package",
5
5
  "author": "",
6
6
  "license": "UNLICENSED",
@@ -41,12 +41,12 @@
41
41
  "@emotion/styled": "11.10.4",
42
42
  "@newskit-render/api": "^1.6.0",
43
43
  "@newskit-render/auth": "^1.3.5",
44
- "@newskit-render/checkout": "^2.0.1",
44
+ "@newskit-render/checkout": "^2.1.0-alpha.0",
45
45
  "@newskit-render/feature-flags": "^1.4.6",
46
46
  "@newskit-render/feed": "^1.4.9",
47
47
  "@newskit-render/my-account": "^4.0.1",
48
48
  "@newskit-render/shared-components": "^2.0.1",
49
- "@newskit-render/standalone-components": "^2.0.1",
49
+ "@newskit-render/standalone-components": "^2.1.0-alpha.0",
50
50
  "@newskit-render/validation": "^1.5.7",
51
51
  "cross-fetch": "3.1.5",
52
52
  "graphql": "16.6.0",
package/pages/preview/[articleId]/version/[versionId]/index.tsx CHANGED
@@ -1,5 +1,4 @@
1
1
  import React from 'react'
2
- import useSWR from 'swr'
3
2
  import {
4
3
  Block,
5
4
  IndeterminateProgressIndicator,
@@ -21,7 +20,7 @@ import {
21
20
  ClientTypes,
22
21
  getAcsCookie,
23
22
  } from '@newskit-render/api'
24
- import { Article } from '@newskit-render/standalone-components'
23
+ import { ArticleRecommendationsProvider } from '@newskit-render/standalone-components'
25
24
  import { getHost } from '@newskit-render/shared-components'
26
25
  import { Info } from '@emotion-icons/material/Info'
27
26
  import { GET_UNIVERSAL_ARTICLE } from '../../../../../queries'
@@ -32,8 +31,9 @@ import { addCacheHeaders } from '../../../../../helpers/addCacheHeaders'
32
31
  import {
33
32
  twitterUsername as configTwitterUsername,
34
33
  gscId as configGscId,
34
+ newskitApiEnvUrl,
35
+ newskitApiXApiKey,
35
36
  } from '../../../../../config'
36
- import { fetcher } from '../../../../../helpers/getRecommendations'
37
37
 
38
38
  const IconFilledInfo = toNewsKitIcon(Info)
39
39
 
@@ -46,24 +46,13 @@ const PreviewArticle = ({
46
46
  gscId,
47
47
  user,
48
48
  articleId,
49
+ config,
49
50
  ...props
50
51
  }) => {
51
52
  let userId
52
53
  if (typeof window !== 'undefined') {
53
54
  userId = window?.utag?.data['cp.utag_main_v_id']
54
55
  }
55
- const highlitedArticles = []
56
- const relatedArticles = []
57
- const { data: recommendations } = useSWR<Article[]>(
58
- `/api/recommendations/${articleId}/${userId}`,
59
- fetcher
60
- )
61
-
62
- if (Array.isArray(recommendations)) {
63
- highlitedArticles.push(...recommendations.slice(0, 4))
64
- relatedArticles.push(...recommendations.slice(4, 12))
65
- }
66
-
67
56
  const accessDeniedPage = (
68
57
  <Banner
69
58
  overrides={{ stylePreset: 'bannerNotice' }}
@@ -102,17 +91,17 @@ const PreviewArticle = ({
102
91
  sign out
103
92
  </Button>
104
93
  </CookieView>
105
- <ArticlePage
106
- section={section}
107
- articleURL={articleURL}
108
- {...universalArticle}
109
- siteHost={siteHost}
110
- gscId={gscId}
111
- twitterUsername={twitterUsername}
112
- highlights={highlitedArticles}
113
- relatedArticles={relatedArticles}
114
- user={user}
115
- />
94
+ <ArticleRecommendationsProvider articleId={articleId} config={config}>
95
+ <ArticlePage
96
+ section={section}
97
+ articleURL={articleURL}
98
+ {...universalArticle}
99
+ siteHost={siteHost}
100
+ gscId={gscId}
101
+ twitterUsername={twitterUsername}
102
+ user={user}
103
+ />
104
+ </ArticleRecommendationsProvider>
116
105
  </>
117
106
  </PageWithAuth>
118
107
  </SessionProvider>
@@ -159,6 +148,10 @@ export async function getServerSideProps(context) {
159
148
  showAds: true,
160
149
  user,
161
150
  articleId,
151
+ config: {
152
+ newskitApiEnvUrl,
153
+ newskitApiXApiKey,
154
+ },
162
155
  },
163
156
  }
164
157
  }