Initial working prototype of CWA (client web app)

[victorkane]

Content modeling

Alternative 1: "Hard-coded" fully functional prototype instead of a time-consuming mock-up

One first make a hard-coded content driven prototype, with prototype level content placed in the Vuex store in order to then properly hydrate pages and components. This, in place of a mock-up, which is just a waste of time when we can so quickly prototype with Nuxt.js/Vue.js/Vuetify.js

Once this is done, the content model can be abstracted out of the fully functional prototype using UML design tools, in function of the requirements, stakeholder needs and marketing hypotheses in function of the current business model. Then the SCS and CMS implement the content model, and replace the hard coded hydration of components and pages in the Vuex store (app state).

Alternative 2: Create a scaffolded CWA without content, perform content model design, then implement and test the content model completely in the CMS and SCS

When there is a high degree of familiarity with the application domain, the content modeling may be done via design tools (i.e. UML diagrams), and content modeling can proceed directly with the CMS and SCS first.

This is what we have chosen to do here.

Initial version of CWA (following Alternative 2)

The basic objectives of the DurableDrupal Content Migration Rescue website are to:

• Explain the goals and the characteristics of the content migration rescue process
• Thoroughly document the building of the DDCMR website itself.
• Thoroughly document the initial case study (the migration of Drupal 6 based AWebFactory.com to a full stack JavaScript decoupled architecture).
• In addition to the case studies, include articles, books, and a blog in order to share resources.

CWA Tasks:

• Scaffold a Nuxt.js standard Universal App with Vuetify.js Material Design Component Framework.
• Layout and styling
• Scaffold the URI routable (though non-Gutenberg) "pages".
  • Home
  • What? Why?
  • Case studies
  • The books
  • The blog
  • Steps you can take (towards your own goals as well as to support and give back to the project)
• Upsert content to the SCS with the CMS, hydrate CWA pages and components from the SCS (see below)
• As required during this implementation (according to whether a hard-coded prototype will be created or not) set up the Vuex Store (application wide state) with prototype content (hard-coded) in order to reactively hydrate the components.
• Populate these routable display units as required with reusable components and hydrate app-wide.
• Complete initial content
  - [ ] Initial case study: AWebFactory.com
  - [ ] AWebFactory.com: Step one

Once these tasks are completed, a staging instance can be set up, after which we will be able to proceed to deployment.

[victorkane]

Initial top-level and sub-level upsert, hydration and rendering

Upsert content to the SCS with the CMS, hydrate CWA pages and components from the SCS and render

• Now that the initial, "hard-coded" prototype is completed, we have a "live universe" out of which we can safely abstract the content model without murdering real needs. Abstract the content model in diagram mode based on AWebFactory building blocks (see Initial Implementation of SCS (structured content server) #1 for link to diagrams)
  • Base content attributes
  • Domain content attributes (motivated by the business domain of this app)
  • App content types
• Build the SCS models and API
• Upload sample content with the CMS tailored to the SCS models and API
  • gray-matter based "Jekyll" style yaml for basic content types
  • straight up yaml for container content types
• Add support for markdown content files, configure
• For each top level content page (see atomic commits below)
  - scs
  - model and api
  - api can perform necessary select or population filtering for minimum set of data
  - cms
  - make sure initial content has been published
  - make sure each content item has the appropriate tags
  - cwa
  - implement server-side loading in vuex store (nuxtServerInit)
  - set up top level hydration from store
  - rendering
  - set up properly routed dynamic sub-pages

Steps to set up dynamic sub-pages

• Create a subdir (usually _slug)
• In the file _slug/index.vue
  • Grab the item from the SCS API on the basis of the slug param
  • Render the attributes or else send the grabbed content item to a component as prop
  • Add a "back" button