[DOCU-1038] NPM walkthrough - part 2 Created: 09/Jun/17  Updated: 06/Sep/19  Resolved: 06/Mar/18

Status: Closed
Project: Documentation
Component/s: None
Affects Version/s: None
Fix Version/s: None

Type: Story Priority: Neutral
Reporter: Julie Legendre Assignee: Julie Legendre
Resolution: Done Votes: 0
Labels: scope-creep, underestimated
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Issue Links:
dependency
is depended upon by DOCU-747 NPM - wrap up Closed
Template:
Acceptance criteria:
Empty
Date of First Response:
Sprint: Docu Sprint 29, Docu Sprint 42, Docu Sprint 43, Docu Sprint 44, Docu Sprint 45
Story Points: 13

 Description   

In the second part of the NPM walkthrough tutorial, provide step by step instructions on how to find (using the keyword magnolia-light-module), install and reuse an existing npm package within your own light-module.
In part 2 of the tutorial the aim is to expand on part one by reusing an existing npm (magnolia-light-module) package within your own light-module:

  • Search for shared components in NPM using the "magnolia-light-module" keyword
  • Install google-maps-magnolia (by Mathias Muller winner of the npm contest)
  • Configure the module as instructed in MM's readme (pull instructions into doc)
  • Make his components available in the page template created in part 1.
  • Reuse it/them to display a map of where the bucket list item would happen.

This ticket also covers the work required to tweak Part 1 of the tutorial:

  • Change the components created:
    • activity (currently component-A)
    • destination (currently component-B)
  • Add availability to the mtk component image (currently textImage)
  • Write an intro giving an overview of the example used in the tutorial.

+ add final result to git repo.

Note: I think some of the content in the community wiki pages that are being pulled into doc as part of DOCU-1039 may overlap/conflict with what is planned to be documented in this ticket.

See https://documentation.magnolia-cms.com/display/DOCU/NPM+CLI+walkthrough+meeting+notes for the bare bones structure and order of steps.



 Comments   
Comment by Christoph Meier [ 27/Jul/17 ]

Review comment:

Generally i like the page very much. The example is nice, the page is easy to read and follow.
I have added some inline comments; no big things. Everything is clear with one exception:
Before being able to reuse the component provided by the module, you must configure the module. (See the inline comment there too.)

We can code together another page-template which lists parts of the pages created with the 1st page template.
The 1st page template i recommend to rename from my-bucket-list-template to my-bucket-list-item.
t's not a list, it is to create a list-item ... or you can completely get rid of "list", "list-item" ...

If the components for the activity and the location are the same ... it is not required to have these 2. One would be sufficient.
If you want to make it a bit more sophisticated: Have only one component and add a select field "type" to switch between activity and location ... you will not render the value on the component script ... but we may use that value when doing the 2nd page template to summarize the full list.

Comment by Julie Legendre [ 19/Jan/18 ]

Update for CLI 3.0?

Comment by Julie Legendre [ 24/Jan/18 ]

Added example light module to git: https://git.magnolia-cms.com/projects/DOCUMENTATION/repos/my-bucket-list-module/browse

Comment by Julie Legendre [ 13/Feb/18 ]

https://documentation.magnolia-cms.com/display/DOCS56/Copy+of+Magnolia+CLI+walkthrough is ready for review. Could you do the revie please rgange]?

Main changes:

  • Create a prototype variant for the page and component
  • Add a CSS in the prototype
  • Removed the destination component
  • Added availability for linkList component
  • Create two bucket list items & a list page

Please note:

  • I opened NPMCLI-164 after running into problems adding availability to the google maps component from npm.
  • I will put a full example on git after the review process is complete.

Thanks!

Comment by Christoph Meier [ 26/Feb/18 ]

Rich has reviewed.
Christoph has reviewed the examples.

jlegendre, please apply changes according to feedback.

Comment by Julie Legendre [ 05/Mar/18 ]

Integrated feedback from inline comments and have split into intro + 3 parts:

 

Comment by Julie Legendre [ 06/Mar/18 ]

cmeier could we look at where to put the prototype variant files on git together please?

https://documentation.magnolia-cms.com/display/DOCS56/Part+I+-+Installing+and+setting+up+the+CLI+and+Magnolia#PartI-InstallingandsettinguptheCLIandMagnolia-Edityourvariantfiles

Generated at Mon Feb 12 01:14:36 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.