DurableDrupal Content Migration Rescue. An API-first decoupled fullstack JavaScript architecture with tutorials for those migrating their content from obsolete, monolithic architectures.
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:
[x] Scaffold a Nuxt.js standard Universal App with Vuetify.js Material Design Component Framework.
[x] Layout and styling
[x] Scaffold the URI routable (though non-Gutenberg) "pages".
[x] Home
[x] What? Why?
[x] Case studies
[x] The books
[x] The blog
[x] 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.
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
[x] 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 #1 for link to diagrams)
Base content attributes
Domain content attributes (motivated by the business domain of this app)
App content types
[x] Build the SCS models and API
[x] 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
[x] 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
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:
CWA Tasks:
Once these tasks are completed, a staging instance can be set up, after which we will be able to proceed to deployment.