Nice condensed summary of this SDC thing! Had seen this popping up here and there, never really had the time to look into it. I enjoyed the ride, thanks Mark!
I'm late to this party, but I've been using some SDCs lately and found them a really neat way of working. I managed to get one working in a view, which worked, but wasn't quite as clean as I'd like. Hope that will get improved later.
Its very helpful to understand. Thank you for sharing. Also, that auto suggestions for tags and classes in twig file, its really amazing. Could you please share the name of tools or extensions for this?
So this is following the design pattern of react and vue.js to keep template, css and js in one place. I guess it also helps structuring when you do atomic design?
Using something similar for quite a while. Vite collects all the files and generates a mytheme_dist.libraries.yml file. mytheme has mytheme_dist as a base theme. A custom twig file loader automatically adds attach library if needed. Wanted to add as few as possible to PHP runtime, since it gets slow quite quickly
Yes, you can do that. Inside call-to-action.twig you do something like @include my-button.twig, the same way as you are including your call-to-action.twig inside a node template.
@@markyconroy views-view-unformatted--cta-view--block-1.html.twig {{ include('olivero:cta', { title: row.content['#view'].style_plugin.render_tokens[ loop.index0 ]['{{ title }}'] }, with_context = false) }} cta.twig {{ include('olivero:button', { btn_title: title }, with_context = false) }} button.twig {{ btn_title }} This is my code and i want to get value of " row.content['#view'].style_plugin.render_tokens[ loop.index0 ]['{{ title }}'] " inside the button.twig as variables btn_title
Gracias Mark, you did a great summary for the initial entrance to this new way to componentize Drupal !
Thx for sharing. The tutorial is going straight to the point!
Nice condensed summary of this SDC thing! Had seen this popping up here and there, never really had the time to look into it. I enjoyed the ride, thanks Mark!
Glad it was helpful!
I'm late to this party, but I've been using some SDCs lately and found them a really neat way of working.
I managed to get one working in a view, which worked, but wasn't quite as clean as I'd like. Hope that will get improved later.
Thanks Mark. The next question might be "WTF are props and slots in Drupal SDC"?
Its very helpful to understand. Thank you for sharing. Also, that auto suggestions for tags and classes in twig file, its really amazing. Could you please share the name of tools or extensions for this?
It's GitHub copilot
@@markyconroy Thank you for sharing 🙋♂
So this is following the design pattern of react and vue.js to keep template, css and js in one place. I guess it also helps structuring when you do atomic design?
Using something similar for quite a while. Vite collects all the files and generates a mytheme_dist.libraries.yml file.
mytheme has mytheme_dist as a base theme. A custom twig file loader automatically adds attach library if needed.
Wanted to add as few as possible to PHP runtime, since it gets slow quite quickly
Interesting, do u mind sharing ur vite.config file?
Thank you! Very useful!
Thank you :)
Hello
Can we inherit once component to another?
I want to call button component inside the call to action component. Any help?
Yes, you can do that. Inside call-to-action.twig you do something like @include my-button.twig, the same way as you are including your call-to-action.twig inside a node template.
@@markyconroy
views-view-unformatted--cta-view--block-1.html.twig
{{ include('olivero:cta', {
title: row.content['#view'].style_plugin.render_tokens[ loop.index0 ]['{{ title }}']
}, with_context = false) }}
cta.twig
{{ include('olivero:button', {
btn_title: title
}, with_context = false) }}
button.twig
{{ btn_title }}
This is my code and i want to get value of
" row.content['#view'].style_plugin.render_tokens[ loop.index0 ]['{{ title }}'] "
inside the button.twig as variables btn_title