scrivito / scrivito_example_app_js Goto Github PK

• Open the homepage, for example https://scrivito-example.netlify.app/
• In Chrome dev tools, select responsive mode and change the width to 992

Expected

One of the layouts for 991 or 993 px.

Actual

Tabs in the Thumbnail Gallery Widget don't filter the images by tag, instead if one click on a Tab the images with this tag are hidden. This is due this line of code:

if (currentTag && tags.includes(currentTag)) {
    classNames.push("squeezed");
}

Solution:

if (currentTag && !tags.includes(currentTag)) {
    classNames.push("squeezed");
}

If you add a SCRIVITO_ENDPOINT into .env it is not applied in the compiled app.

Reason being, that it isn't forwarded to the environment Webpack uses for compiling the app.

--- a/webpack.config.js
+++ b/webpack.config.js
@@ -113,7 +113,7 @@ function webpackConfig(env = {}) {
       chunkFilename: "assets/chunk-[id].[contenthash].js",
       path: path.join(__dirname, buildPath),
     },
-    plugins: generatePlugins({ isProduction, isPrerendering, scrivitoOrigin }),
+    plugins: generatePlugins({ isProduction, isPrerendering, scrivitoOrigin, endpoint }),
     resolve: {
       extensions: [".js"],
       modules: ["node_modules"],
@@ -145,13 +145,13 @@ function generateEntry({ isPrerendering }) {
   return entry;
 }

-function generatePlugins({ isProduction, isPrerendering, scrivitoOrigin }) {
+function generatePlugins({ isProduction, isPrerendering, scrivitoOrigin, endpoint }) {
   const ignorePublicFiles = ["**/_headersCsp.json", "**/_headers"];

   const plugins = [
     new webpack.EnvironmentPlugin({
       NODE_ENV: isProduction ? "production" : "development",
-      SCRIVITO_ENDPOINT: "",
+      SCRIVITO_ENDPOINT: endpoint,
       SCRIVITO_ORIGIN: scrivitoOrigin,
       SCRIVITO_PRERENDER: "",
       SCRIVITO_TENANT: "",

Open https://scrivito-example.netlify.com/notincache

Expected

a pre-rendered 404 page

Actual

only the loading screen is "pre-rendered" 😿

Notes

IE11 is fine, so we have to dig out the SWAT debugging tools ⚒

http://localhost:8080/search-results?q=+

I got issues like:

Uncaught ClientError: Missing non-blank value (query term: {"field"=>"*", "operator"=>"contains_prefix", "value"=>" "})
    at errorForResponse (webpack:///../node_modules/scrivito/index.js?:9826:12)
    at handleAjaxResponse (webpack:///../node_modules/scrivito/index.js?:9789:17)

The above error occurred in the <SearchResultsComponent> component:
    in SearchResultsComponent (created by Scrivito.CurrentPage)
    in Scrivito.CurrentPage (created by App)
    in div (created by App)
    in div (created by App)
    in HelmetProvider (created by App)
    in CookieConsentProvider (created by App)
    in ErrorBoundary (created by App)
    in App

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

Scrivito itself can be switched between german and english but unfortunately in the example app all widget descriptions ... are hardcoded in english. The user ends up with a wild mixture of english and german just running the example app.

Maybe just add https://react.i18next.com/ to the mix or whatever lib you are already internally using for scrivito?

Currently there is no way to read the tenant for external packages/components without a workaround.
Adding it to the global Scrivito Object or similar could help those external packages/components to get the tenant without workarounds.
An example to get/read it could be: Scrivito.getTenant() or Scrivito.getInstanceId() .

When using the BlogOverviewWidget with a background-image selected, the font of the links don't adjust their color.

When the Widget is wrapped inside a section, the text is not displayed correctly. It seems to adjust to the color of the background image, not the color of the section. Although I am not sure the widget is supposed to be used that way.

The color of the font seems to be controlled by the css-class .bg-dark-image

In a Form Widget AND NOT in a Cloumn Widget I am able to add Hidden Fields. There is no view for it so one gets "Widget could not be rendered due to application error.".
Though editors are supposed to add the Hidden Field in the FormWidget Properties, they can add them in the Form container. Instead of the error above they should somehow get a hint to use the properties.

The blog post preview uses a concatenated version of the blog entry's page content. The concatenator (regarding to @dcsaszar it is in src/utils/textExtractFromHtml.js) does not add whitespaces when stripping <p> or <div> tags.

This leads to missing whitespaces and looks as if the content was broken.

Error msg:

index.js:1

Uncaught TypeError: Super expression must either be null or a function, not undefined
at index.js:1
at index.js:1
at t.a (index.js:1)
at new e (index.js:1)
at Function.value (index.js:1)
at Object. (index.js:1)
at n (index.js:1)
at Object. (index.js:1)
at n (index.js:1)
at Object. (index.js:1)

Steps taken

1. Git clone repo
2. npm install
3. Add .env file
4. npm run-script build
5. Upload build.zip to instance
6. View installed file https://5b2d0a653672df57503fdfed--secure-raspberry-scrivito-0621.netlify.com/

Insights

The site works fine on my localhost. Problem occurs when I upload the build.zip to the dashboard and view it in the temporary netlify url. The download zipfile from the dashboard works fine but not the clone of this repo.

Your help greatly appreciated.

It is a usual need, that people offering a form need an enum field. We do not have this by now.
For example in a Form where people can register for an event:
Which kind of food do you like?
Everything | Fish | Veggi

Minor issue, but the contact form box for the message goes all the way through the label:

This is how it looks on Chrome and Safari, on Firefox it looks correct.

Currently, the Example App doesn't run in IE11 with npx webpack serve --env production:

'Promise' is undefined

If I add import "core-js/modules/es.promise"; to src/polyfills.js, it works.

Discussion

Maybe we should get rid of the manually maintained polyfills, in favor of https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md#supporting-internet-explorer.

The drawback: the gzipped bundle would be 4.5 K larger. 😿

This occured on a fresh install with repo cloned from GitHub

                   === npm audit security report ===                        

┌──────────────────────────────────────────────────────────────────────────────┐
│ Manual Review │
│ Some vulnerabilities require your attention to resolve │
│ │
│ Visit https://go.npm.me/audit-guide for additional guidance │
└──────────────────────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High │ Prototype Pollution │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package │ lodash │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in │ >=4.17.12 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ b9a5ee7f87d612320db5571b76b7f140b21b3454c5b98081f5fe8e2d48f… │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path │ b9a5ee7f87d612320db5571b76b7f140b21b3454c5b98081f5fe8e2d48f… │
│ │ > lodash │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info │ https://npmjs.com/advisories/1065 │
└───────────────┴──────────────────────────────────────────────────────────────┘
found 1 high severity vulnerability in 15550 scanned packages
1 vulnerability requires manual review. See the full report for details.

Great job with that example app, I just started using it again. It's awesome! Greetings to all of you from quarantine on the other side of the world. 😉

One issue I found is that the upgrade in e817f2a requires node version 9+, but the .nvmrc still sets the version to node 8 which results in the prerender command failing.

Idea:
Editors that want to create tables like pricing lists can import a csv with this data.

Use Case:
Sometimes editors need to create big or complicated tables. The editor has this table as a file on his device and copies every single table data/cell into his table widget. Some of these tables contain data that is legally binding and therefore must not contain any errors. So the editor needs much time for transferring the table and afterwards he needs to inspect by heart if erverything is correct.
Since he has the data already in a file, he could simply export this as csv and upload this in a Widget or copy the content of the csv into atext field.

Leaving this here for reference and to discuss a fix:

Because of timezone differences on the prerendering server and the client, the list of blog posts, with month separators, can become inconsistent after hydration.
In our case, we had a month separator that moved to another position, because the post was on the last of a month and on the first of the following month in the server-side vs. client-side render.

After hydration this left us with "dead" DOM elements, that were not removed by React, even with a rerender by calling setState.
Quoting from facebook/react#10591:

A rare but plausible scenario is that you have a list or something that depends on time to determine the order. E.g. something that conditionally pushes something on the top of a list if some time has elapsed. Or changes the the class name based on time elapsing. These cases are very theoretical though. I haven't seen one yet.

This is the "plausible scenario" in the wild. 🎉

My suggestion for a fix is twofold:

1. Force a rerender on the client like I did in #282 (which wasn't good enough for a fix)
2. Include this.state.hasMounted in the key attributes of the timeline

This fixed the issue in our case, although I'm not sure if the keying according to SSR/CSR is just working by chance. I suspect this fix works because in the current (broken) version we have the same keys pointing to different DOM locations, which triggers the React SSR patching problem.

• Open the widget editor in tab 1
• Using in-place editing, clear one of the columns of the widget in tab 2
• Make a change to the column widths in tab 1

Expected

The columns are updated, ideally taking the concurrent changes into account.

Actual

An error occurred
invalid value for key 'content' of widget 641ab6b3: no widget definition for '933e283e' found in '_widget_pool': ["933e283e"]

Discussion

The editor stores the initial column content as state. This state is stale after the concurrent update.

That's a trifle, but I thought that reporting it is better than not...

Steps:

1. Delete the file package-lock.json
2. Run npm install
3. Run SCRIVITO_ORIGIN=http://localhost:8080 npm run prerender

You will get an error in the buildNode/prerender_content.js

TypeError: Cannot read property 'call' of undefined