contentacms / contenta_vue_nuxt Goto Github PK

While npm run dev was running, I tried to change a component file. Even the most trivial change, such as indenting a line of code, resulted in a crash. The error message on the command line:

✖ error TypeError: Cannot read property 'data' of undefined
  at exports.modules../lib/jsonApiClient.js.axios__WEBPACK_IMPORTED_MODULE_1___default.a.interceptors.response.use.response (pages/recipes/index.js:900:83)
  at process._tickCallback (internal/process/next_tick.js:68:7)

I have been looking into this with support from @yann-yinn (thank you!) and finally found this workaround:

import qs from 'qs';

 // Add a response interceptor to format response with jsonapi-parse
 axios.interceptors.response.use(response => {
-  return jsonapiParse.parse(response.data).data;
+  const parsedResponse = jsonapiParse.parse(response.data);
+  if (parsedResponse === undefined) {
+    return response;
+  }
+  return parsedResponse.data;
 });

 export default {

What I think is happening: The response object that is passed to this interceptor when the first request is made, is indeed a proper response object that contains response.data and can be parsed by jsonapiParse.parse(). However, when a file is edited and the app is rebuilt, it seems that the parsed result (which was cached somewhere?) passes through this interceptor again.

While this workaround stops the crashing, it's ugly and it shouldn't be there. I guess we should be looking for a way to either pass the original, raw response to the interceptor again, or else avoid calling the interceptor again when the app is rebuilt with cached data. I'm willing to help fix this, but I could use some help in understanding how the app works and finding out where this data comes from.

Additional info about my setup:
contenta_vue_nuxt 2.0.1, with under the hood nuxt 2.2.0 and axios 0.18.0
node v10.14.2 with npm v6.4.1
backend: contenta_jsonapi dev-8.x-3.x, installed using contenta-jsonapi-project dev-8.x-2.x

http://contentacms.readthedocs.io/en/latest/demos-consumers-implementation-guidelines/#get-in-touch-page-contact-page

I did this : https://contentavuenuxt.github.io/contact/
But this does not send any http request to post a mail, because at the time i did this, Drupal contact form had a bug and it was not possible to post a mail with an http request.

We should solve this issue, maybe with a another drupal module if needed, a rule, something ? Contact form is a very common features and should possible to implement with decoupled D8

Contact link should be added in the footer

I tried like below

include: [ // use `include` vs `exclude` to white-list vs black-list
            path.resolve(__dirname, "src"), // white-list your app source files
            require.resolve("bootstrap-vue"), // white-list bootstrap-vue
],

but warning outputting in testing command box

How to get only the content of the authenticated user ?
thru the JsonAPI ? Or thru the role permission in Contenta admin ?

I tried on the role permissions but can't find it.
I see "Edit own content" and "Delete own content" but can't find "View Only own content"

1. Create a new "all recipes" page ( look this page as an example https://github.com/contentacms/contenta_vue_nuxt/blob/master/pages/recipes-latest/index.vue )
   So you need to create a "pages/all-recipes/index.vue" file and a PageRecipesAll component
2. This page can get params from url to filter the recipes
3. link from the homepage are just passing get params in url to filter this page.

Even tried:

const serverBaseUrl = 'https://live-contentacms.pantheonsite.io';

Hi, I get this warnings during installation, but I can run npm run dev

$ npm install
npm WARN [email protected] requires a peer of eslint@>= 5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@^1.0.0 || ^2.0.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No repository field.

macOS High Sierra - 10.13.6 (17G65)

$ node -v
v11.1.0
$ npm -v
6.4.1

I dont know much about this page, investigation needed ... :
http://contentacms.readthedocs.io/en/latest/demos-consumers-implementation-guidelines/#magazine-detail-page

Having finally got vue_nuxt to run following the advice here #57 I changed the following:

In the nuxt.config.js:

// change this to your own server.
const serverBaseUrl = 'http://localhost:3000';
const serverFilesUrl = 'http://contenta.com'; // where I installed the CMS :3000 didn't work??

Also in components/RecipeDetail.vue I changed

<div class="content method"> <h3 class="title has-text-centered"> Methods </h3> <div v-html="recipe.instructions.value" /> </div> to: <div class="content method"> <h3 class="title has-text-centered"> Instructions </h3> <div v-html="recipe.instructions" /> </div>
And the recipe details page works nicely now. The link on the home page :
Quick and easy 20 minutes or less doesn't work:
` case 'quick':
recipes = await findAllRecipesByMaxTotalTime(20, limit, offset);
break;

And the function it calls is:
`export function findAllRecipesByMaxTotalTime(
maxTotalTime,
limit = 4,
offset = 0
) {
const query = {
sort: '-created',
include: 'image,image.thumbnail',
filter: {
totalTime: {
condition: {
path: 'totalTime',
value: maxTotalTime,
operator: '<',
},
},
},
fields: {
recipes: 'title,difficulty,image',
images: 'name,thumbnail',
files: 'filename,uri',
},
page: {
offset: 0,
limit: limit,
},
};

Anybody see any errors in that?`

"Services" was a term herited from Angular.js
"lib" seems to be a convention for this kind of files in react or vuejs world ?

Site does not load locally.

✖ error Error: certificate has expired
at TLSSocket.onConnectSecure (_tls_wrap.js:1051:34)
at TLSSocket.emit (events.js:189:13)
at TLSSocket.EventEmitter.emit (domain.js:441:20)
at TLSSocket._finishInit (_tls_wrap.js:633:8)

thanks !

Today I installed the Contenta Vue Nuxt app, version 2.0.1, and the latest Contenta CMS demo site using the Quick Install method from https://www.contentacms.org/#install :

php -r "readfile('https://raw.githubusercontent.com/contentacms/contenta_jsonapi/8.x-2.x/installer.sh');" > contentacms-quick-installer.sh
chmod a+x contentacms-quick-installer.sh
./contentacms-quick-installer.sh

Unfortunately, images do not work. I did find out that the code on line 18 of components/RecipeDetail.vue should not be

              <img v-lazy="`${serverFilesUrl}/${recipe.image.thumbnail.url}`" />

but

              <img v-lazy="`${serverFilesUrl}/${recipe.image.thumbnail.uri.url}`" />

I haven't found a fix for the other images yet.

Nuxt.js aims to support PWA. I used @nuxt/pwa module but i had some issues so i disabled it ( sw.js file was super long to load ).
Nuxt is moving very fast so maybe it has a better support now.

We should rather display at least a nice page saying "API is unreachable, please try later".
This may be handled in a better way by services workers but this feature is not yet implemented.

sometimes i get now a "timeout" error when displaying a recipe for example. Maybe related to waterwheel default timeout ? Try to instanciate waterwheel with a 1000ms timeout to see if it corrects the issue

$ npm install
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm WARN [email protected] requires a peer of webpack@^3.2.0 but none was installed.

My OS is Ubuntu 16.04 64bit.

i guess this wireframe is still valid : https://www.drupal.org/files/issues/1%20-%20Umami%20Front%20wirefame%20v3.png

No idea how this block is managed from contenta side, investigation needed

https://travis-ci.org/contentacms/contenta_vue_nuxt/builds/370238739#L3059

I've run into this bug before, but I started Chrome headless manually and set --no-sandbox in the command. I can't see how Karma starts Chrome so travis-ci/travis-ci#8836 (comment) looks like maybe the easiest fix. Sudo makes the test boot up more slowly, but it might be worth a shot.

How can I get a copy of Contenta alone? I don't need any scripts that install a database or anything with it. I just need a raw copy of Contenta and I will install MariaDB and do the install and setup.

This Contenta distribution:
https://github.com/contentacms/contenta_jsonapi_project

… is broken. It gives 6 errors during installation. So that doesn't help!

Please let me know.

add some recursivity + enhance units tests with a more complex query

edit : now a npm package https://www.npmjs.com/package/d8-jsonapi-querystring

In the list pages, the description images come as files. Therefore, I think that "url" in the relevant lines in api.js file should be changed to "uri".

Application fails because "url" cannot be found.

lib/api.js

diff --git a/lib/api.js b/lib/api.js
index 9a3b9a6..034a62b 100644
--- a/lib/api.js
+++ b/lib/api.js
@@ -38,7 +38,7 @@ export function findAllPromotedRecipes(limit = 4) {
fields: {
recipes: 'title,difficulty,image',
images: 'name,thumbnail',

•  files: 'filename,url',
  

•  files: 'filename,uri',
  

  },
  sort: '-created',
  };
  @@ -64,7 +64,7 @@ export function findAllLatestRecipes(limit = 4, offset = 0) {
  fields: {
  recipes: 'title,difficulty,image',
  images: 'name,thumbnail',

•  files: 'filename,url',
  

•  files: 'filename,uri',
  

  },
  };
  return jsonApi.get('recipes', query);
  @@ -89,7 +89,7 @@ export function findHomePromotedArticlesAndRecipes(limit) {
  fields: {
  recipes: 'contentType,title,difficulty,image',
  images: 'name,thumbnail',

•  files: 'filename,url',
  

•  files: 'filename,uri',
   contentTypes: 'type',
  

  },
  sort: '-created',
  @@ -112,7 +112,7 @@ export function findHomePromotedArticlesAndRecipes(limit) {
  fields: {
  recipes: 'title,difficulty,image',
  images: 'name,thumbnail',

•  files: 'filename,url',
  

•  files: 'filename,uri',
   contentTypes: 'type',
  

  },
  sort: '-created',
  @@ -146,7 +146,7 @@ export function findAllRecipesByCategoryName(
  fields: {
  recipes: 'title,difficulty,image',
  images: 'name,thumbnail',

•  files: 'filename,url',
  

•  files: 'filename,uri',
  

  },
  page: {
  offset: 0,
  @@ -173,7 +173,7 @@ export function findAllRecipesByDifficultyName(
  fields: {
  recipes: 'title,difficulty,image',
  images: 'name,thumbnail',

•  files: 'filename,url',
  

•  files: 'filename,uri',
  

  },
  page: {
  offset: 0,
  @@ -203,7 +203,7 @@ export function findAllRecipesByMaxTotalTime(
  fields: {
  recipes: 'title,difficulty,image',
  images: 'name,thumbnail',

•  files: 'filename,url',
  

•  files: 'filename,uri',
  

  },
  page: {
  offset: 0,

Hello, first of all thanks for this project because I'm learning a lot about Vue.js and Nuxt.js.

I'm experiencing an unknown error on SSR when I run contenta_jsonapi locally.
Now, I'm not sure whether the issue is with the consumer or with the server as if I use the public APIs (https://live-contentacms.pantheonsite.io/api) it actually works, so my apologies in advance if I'm posting to the wrong repo.

Anyway, the issue I'm having is only on SSR because after the first page load, which redirects me to /server-unreachable, if I navigate to the home, recipes etc.. using the router links it is all good.

I tried to log what the waterwheel calls are returning and here is what I get:

error findAllLatestRecipes { Error: Unknown error. at /Users/imfaber/Sites/imfaber-v3/node_modules/waterwheel/dist/waterwheel.js:1:5194 at <anonymous> at process._tickDomainCallback (internal/process/next_tick.js:228:7) message: 'Unknown error.', status: 500 }

Has anyone experienced the same by any chance?

I thought about posting this here first because, unless I'm missing something, I can't find anything wrong on the server side, CORS is fine, API endpoints are fine etc...

Many thanks.

categories pages and recipes detail pages are not statically rendered on github pages, so this will return a 404 :
https://contentavuedemo.github.io/recipes-category/Main%20course

We may want to add generation functions for dynamic routes to get a fully SEO-friendly site
see https://nuxtjs.org/api/configuration-generate

nav is deprecated and navbar is more semantic and clearly documented
http://bulma.io/documentation/components/navbar/

I took components from /components directory in alphabetical order, BulmaCard.vue is the last tested for now.

because this should not exist : https://github.com/contentacms/contenta_vue_nuxt/blob/master/deploy-to-github-pages.sh

Here are the design styleguides : https://www.drupal.org/node/2900720

After npm run dev I've get this error:
{ Error: Unknown error.
at /Users/meinolfdroste/github-projects/druxt/node_modules/waterwheel/dist/waterwheel.js:1:5256
at
at process._tickCallback (internal/process/next_tick.js:160:7)
message: 'Unknown error.',
status: 500,
statusCode: 500,
name: 'NuxtServerError' }

ERROR

Error: Unknown error.

• waterwheel.js:1
  [druxt]/[waterwheel]/dist/waterwheel.js:1:5256

• next_tick.js:160 process._tickCallback
  internal/process/next_tick.js:160:7

I have to change package.json of waterwheel to "main": "lib/waterwheel.js"
Now it works.

What happens now :

• components pages fetch all datas
• datas flows down from pages components to components children
• components children may events up if needed
• a store may be added if it is required by components communcation but "pure" components and internal state is preferred when possible.
• components should have a corresponding unit test

Determines what will be the components from the wireframes and out to organize components directory

Hi there,

I've been working with Nuxt.js and with Vue.js for about a year now, and before that with React. As victorkane I've been part of the Drupal community for over a decade.

And at DurableDrupal we're inventing the wheel! And writing a book about migration from Drupal to Full Stack.

Wanna go with Contenta and, especially, ContentaJS, and put my shoulder to the wheel for there to be SSR based on Nuxt. The possibilities are numerous.

How can we get started?

For https://contentanuxt.now.sh/all-recipes?filter=dessert

No recipes are currently found from the API :
https://live-contentacms.pantheonsite.io/api/recipes?_format=api_json&sort=-created&include=image,image.thumbnail&filter[categoryName][condition][path]=category.name&filter[categoryName][condition][value]=Dessert&fields[recipes]=title,difficulty,image&fields[images]=name,thumbnail&fields[files]=filename,url&page[offset]=0&page[limit]=40

The page should display a message like : "No recipes found" instead of a blank page.

When visiting https://contentanuxt.now.sh I get this error: Sorry, we can't reach server API for now.

On the recipe detail page, the methods field is empty. The following line in the corresponding component needs to be changed.

RecipeDetail.vue

before
<div v-html="recipe.instructions.value" />

after
<div v-html="recipe.instructions" />

Bulma was used because there was no design at the beginning of the project, and because it is a "zero JS" CSS framework, which make it very easy to use with Vue.js or React.
Today 95% of css is not used because I included all bulma.css file manually.
We may decreased if needed css sized using bulma sass version with npm and importing only what we are using.

And now that they are designs styleguides (https://www.drupal.org/node/2900720), should we even use a css framework ?

https://github.com/contentacms/contenta_vue_nuxt/blob/b3224e843c67d55c8a56c01140092a930ff4c5af/test/unit/index.js#L7

This is testing all files ! I want to test specific one file only , how can I do that ?

Now.sh is very great and offers a node.js server for Server Side Rendering but in 5 days we used 14MB / 1000MB from free plan.

Hard to say without Analytics but i guess there is for now very few visits on the demo, so a big visits peaks will quickly trigger the "On Demand" Pricing ( which is : $0.10 / GB ).

Only real downside of Github pages is that it can not serve some of the pages from the server (only from the client). Pages likes recipes/{recipe_id} : urls with a dynamic argument requires Node JS (or a function to crawl ids and generate pages ...) to be Server Side Rendered, but README may add a warning about that.

@see https://www.drupal.org/files/issues/Umami%20-%20Front%20-%20v1%20-%20Desktop.jpg
(make sure this design is up-to-date first visiting the page : https://www.drupal.org/node/2900720 )

Click on homepage, then click on any recipes on the homepage : that gives us a 404.

Navigation disappears on mobile

@see http://contentacms.readthedocs.io/en/latest/demos-consumers-implementation-guidelines/#features-listing-page

Ensure with @e0ipso that corresponding content types and content exists in public API ?

https://www.drupal.org/files/issues/Umami%20-%20Features%20-%20v1%20-%20Desktop.jpg

First please read the readme , this ensures everybody works in the same direction.
https://github.com/contentacms/contenta_vue_nuxt/blob/master/README.md

Here are the specifications for the site :
http://contentacms.readthedocs.io/en/latest/demos-consumers-implementation-guidelines/

& you can find in this topic the design https://www.drupal.org/node/2900720