Problem/Motivation

SDDS will be used in Atlanta and part of the xb-demo and we need a proper home page.

When it was created last year, you couldn't save a page with XB, but now you can! :D

Steps to reproduce

Proposed resolution

Convert SDDS page--front.html.twig to a proper home page for XB.

Remaining tasks

  1. Edit the home page
  2. Update it to use the components from the twig file
  3. Export the content
  4. Remove page--front.html.twig
  5. Add default config in MR

User interface changes

The home page will be a proper XB page that looks like the current page--front.html.twig page.

API changes

Data model changes

CommentFileSizeAuthor
#24 components-not-found-why.png167.85 KBheyyo
#21 components-not-found.png190.22 KBheyyo

Issue fork demo_design_system-3511654

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

kristen pol created an issue. See original summary.

kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented
Issue summary: View changes

Link to https://github.com/phenaproxima/xb-demo

kristen pol credited gábor hojtsy.

kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented
Issue summary: View changes

Clarify summary steps

kristen pol credited heyyo.

kristen pol credited pameela.

kristen pol credited phenaproxima.

kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented

Adding credit for Slack discussions and testing and

https://github.com/phenaproxima/xb-demo/issues/17

kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented
Parent issue: » #3510415: [META] Prep SDDS for DrupalCon Atlanta Driesnote/XB demos and sessions

Add parent

kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented

I won't have time to continue working on this until mid-week due to some other commitments... but I understand the process now and have started adding default content in recipes within the starshot_demo theme. Examples:

#3510426: Create SDDS global header config
#3511866: Create SDDS global footer config

For now, we can manually run the media recipe before the node recipe so that XB doesn't bomb on the alt text:

#3511805: Fix or workaround XB image alt bug that prevents saving SDDS components

Note: there is a Slack thread with lots of details on testing this that I won't get into this issue.

heyyo opened merge request !78

gábor hojtsy’s picture

gábor hojtsy
he/him
Primary language Hungarian
Location Hungary
commented

Dries will demonstrate using XB with its xb_page entities, which would be good to use here :) Support for editing articles with XB is a developer-only feature. I think copying the internal field structure of the article node to an xb_page will work from the exported YAML file without manually recreating it again :) Under the components property. https://github.com/phenaproxima/xb-demo/blob/main/recipes/xb_demo/conten... is a very simple such entity.

heyyo’s picture

heyyo commented

In the MR I don't use article, but xb_page :-)

gábor hojtsy’s picture

gábor hojtsy
he/him
Primary language Hungarian
Location Hungary
commented

Indeed, my bad. Yay!

heyyo’s picture

heyyo commented

The tricky part was to figuring out which media target id to manually set for each image used in any component (components.input).
The export of XB page, especially media inside component is for now not supported by default_content module.

heyyo’s picture

heyyo commented
Status: Active » Needs review
kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented
Assigned: Unassigned » kristen pol

Thanks! I'll review+test.

kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented

I was testing on vanilla D11...

$ ddev drush recipe themes/contrib/demo_design_system/starshot_demo/recipes/starshot_demo_content/
 3/10 [▓▓▓▓▓▓▓▓░░░░░░░░░░░░░░░░░░░░]
Installed configuration for Basic HTML editor recipe.

In TypedDataManager.php line 204:
                                 
  Property pathauto is unknown.  
                                 

Failed to run drush recipe themes/contrib/demo_design_system/starshot_demo/recipes/starshot_demo_content/: exit status 1

after installing pathauto:

$ ddev drush recipe themes/contrib/demo_design_system/starshot_demo/recipes/starshot_demo_content/
 3/10 [▓▓▓▓▓▓▓▓░░░░░░░░░░░░░░░░░░░░]
Installed configuration for Basic HTML editor recipe.

In Evaluator.php line 44:
                                                                                       
  No data provided to evaluate expression ℹ︎␜entity:media:image␝field_media_image␞␟alt  
                                                                                       

Failed to run drush recipe themes/contrib/demo_design_system/starshot_demo/recipes/starshot_demo_content/: exit status 1

which is the bug we've been working around.

kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented
Assigned: kristen pol » Unassigned
Status: Needs review » Needs work

I tried pulling out xb_page into its own recipe and loading all the non-xb_page content first, but still get the same error.

I'm going to switch to another MR right now but I'll try to look at this again after that.

heyyo’s picture

heyyo commented

I didn't test on D11.

This is the command I just used to test with latest xb-demo repo.

mkdir xb-demo-new
cd xb-demo-new
ddev config --project-type=drupal11 --docroot=web
ddev composer create phenaproxima/xb-demo --stability=dev
ddev start

cd web/themes/contrib/demo_design_system
git remote add demo_design_system-3511654 https://git.drupalcode.org/issue/demo_design_system-3511654.git
git fetch demo_design_system-3511654
git checkout '3511654-convert-sdds-page--front.html.twig'

ddev drush site:install --account-name=admin --account-pass=admin -y
ddev drush cr
ddev drush recipe themes/contrib/demo_design_system/starshot_demo/recipes/starshot_demo_content/
ddev drush cr

The last part should not be necessary, but if not, the installation of xb-demo recipe doesn't find starshot_demo sdc components not really sure why. So as workaround, clearing the cache and reapply starshot_demo_content recipe does the trick.

ddev drush cr
ddev drush recipe themes/contrib/demo_design_system/starshot_demo/recipes/starshot_demo_content/
ddev drush cr
heyyo’s picture

heyyo commented
StatusFileSize
new components-not-found.png190.22 KB

components not found

kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented

I started those steps but it's hanging on:

Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme

and won't let me kill it... blargh.

heyyo’s picture

heyyo commented

Weird.
Maybe ddev version issue ?
I'm using ddev version v1.24.3.

heyyo’s picture

heyyo commented
StatusFileSize
new components-not-found-why.png167.85 KB

I understood why applying applying xb-demo recipe during the site install shows errors related to components not found.

xb-demo recipe has a dependency on starshot_demo_content, which provides the demo page. But the starshot_demo theme which contains the needed SDC components is not yet installed and not yet the active theme, so components are not available yet.

why components are missing

1. So removing this dependency in xb-demo

recipes:
  - starshot_demo_content

2. Then ddev drush cr, to make SDC components available. Any other way ?
3. Then apply ddev drush recipe ../recipes/starshot_demo_content

pameeela’s picture

pameeela commented

FYI as I can't fix it myself, the username 'pameela' (with two e's) often gets mistaken for mine (three e's) and gets free credit! (Just noticed this one when fixing up another one!)

kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented

Whoops … fixed

heyyo opened merge request !93

heyyo changed the visibility of the branch 3511654- to hidden.

kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented
Assigned: Unassigned » kristen pol

Lionel has new code that he zipped up and sent me that includes the new header/footer/social media components.

I'll try to open a new MR with that.

kristen pol closed merge request !78

kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented
Assigned: kristen pol » Unassigned

I don't think I got the correct zip but I'll check again tomorrow. Unassigning in the meantime.

heyyo changed the visibility of the branch 3511654-demo-homepage-recipe to hidden.

heyyo opened merge request !96

kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented
Status: Needs work » Fixed

Note that, due to issues with XB config and default content, the home page will be built programmatically with xb-demo:

https://github.com/phenaproxima/xb-demo/blob/main/web/profiles/drupal_cm...

So... we'll want to update our docs soon to recommend xb-demo as the way to install for those who just want to play with XB:

#3514213: Update SDDS docs to have section for xb-demo install

If people install with vanilla D11, they won't have a home page.

kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented
Status: Fixed » Closed (fixed)