Storybook: Code
The Code paragraph: language, style, line numbers
Storybook · demo
PHP, line numbers, solarized style
An OOP-style hook
<?php
declare(strict_types=1);
namespace Drupal\vmhub_core\Hook;
use Drupal\Core\Hook\Attribute\Hook;
final class Example {
#[Hook('node_presave')]
public function presave(NodeInterface $node): void {
$node->setTitle(trim($node->getTitle()));
}
}TypeScript, dark style
export const revalidate = async (tags: string[]) => {
for (const tag of tags) {
revalidateTag(tag);
}
};YAML without line numbers
name: 'VMHub Content: Demo'
type: Content
install:
- vmhub_content
- vmhub_siteShell, centered
docker compose exec -T php drush cr
docker compose exec -T php composer drupal:content:demoCSS, solarized style
.hero {
min-height: 60vh;
color: var(--vm-primary);
}Diff, dark style
--- a/recipe.yml
+++ b/recipe.yml
@@ -1,3 +1,4 @@
name: 'VMHub Content: Demo'
type: Content
+description: 'Demo site and storybook'
install:Dockerfile, no style
FROM php:8.5-fpm-alpine
RUN apk add --no-cache poppler-utils
COPY . /var/www
WORKDIR /var/wwwHTML, solarized style
<section class="hero">
<h1>Storybook</h1>
<a class="button" href="/storybook">Open</a>
</section>JavaScript, dark style
document.querySelectorAll('[data-countdown-target]').forEach((el) => {
const target = new Date(el.dataset.countdownTarget);
console.log(target.toISOString());
});JSON, no style
{
"site": "demo",
"languages": ["cs", "en", "de"],
"storybook": true
}Markdown, solarized style
# Storybook
- **Layouts**: rows and columns
- *Text*: rich text
[Drupal](https://www.drupal.org)Python, dark style
def det_uuid(key):
u = uuid.uuid5(uuid.NAMESPACE_URL, key)
return str(u)SQL, no style
SELECT nid, title
FROM node_field_data
WHERE status = 1
ORDER BY created DESC
LIMIT 10;Twig, solarized style
{% for item in items %}
<li>{{ item.title|upper }}</li>
{% endfor %}