Add social profiles as a block and rebuild Elektro Bernhard in 1.12.0
Social profiles are maintained once under settings (one HTTPS address per network, SocialProfiles::NETWORKS) and shown by the new `social` block (document schema v23) wherever it stands: size, shape, layout, labels, new tab and an optional subset of networks on the block; colour, hover, spacing and alignment through the free block styles. The addresses also feed sameAs in the structured data. Icons are own outline drawings in the style of the existing icon set. ADR 093. Elektro Bernhard is rebuilt with a dark hero over the team photo, a transparent header that turns white on scroll, Lato, cards with shadows and hover lift, a review slider with six real Google reviews, a dark solar band, page headers on every subpage and staggered entrance effects. Social profiles sit in the top bar and the footer. The site is a second local reference installation next to the Kant-IT pilot (var/elektro-bernhard.db, launch config on port 8088); the seed script rebuilds it from scratch. Checked: PHP suite 492 tests (only the documented old failure remains), 33 JS tests, Twig lint, PHP style, full editor browser check with axe. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
1 parent
30e4b3eb2e
commit
fd4cb75548
19 files changed
+1202
-12
No files matched your search
@@ -95,7 +95,19 @@
|
||||
<input id="description" name="description" maxlength="300" value="{{ settings.description }}">
|
||||
<label for="sameAs">Profile</label>
|
||||
<textarea id="sameAs" name="sameAs" rows="3" placeholder="https://www.linkedin.com/company/…">{{ settings.sameAs|join('\n') }}</textarea>
|
||||
<p class="field-help">Eine HTTPS-Adresse je Zeile, höchstens zwanzig.</p>
|
||||
<p class="field-help">Eine HTTPS-Adresse je Zeile, höchstens zwanzig. Die sozialen Profile unten stehen automatisch mit in den strukturierten Daten.</p>
|
||||
<fieldset class="field-set">
|
||||
<legend>Soziale Profile</legend>
|
||||
<p class="field-help">Einmal hier eintragen, dann mit dem Element „Soziale Profile“ an jeder Stelle einsetzen – im Kopf, im Fuß, in einer Kontaktsektion. Größe, Form und Farbe bestimmt das Element. Leere Felder erscheinen nicht.</p>
|
||||
<div class="fields">
|
||||
{% for key, name in socialNetworks %}
|
||||
<div>
|
||||
<label for="social-{{ key }}">{{ name }}</label>
|
||||
<input id="social-{{ key }}" name="social[{{ key }}]" type="url" maxlength="400" value="{{ settings.social[key]|default('') }}" placeholder="{{ socialPlaceholders[key] }}">
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</fieldset>
|
||||
<label class="check-label" for="localBusiness"><input id="localBusiness" name="localBusiness" type="checkbox" value="1"{{ settings.localBusiness ? ' checked' : '' }}> Als lokales Unternehmen auszeichnen</label>
|
||||
<p class="field-help">Braucht mindestens Straße und Ort. Sinnvoll bei einem Standort mit Kundenverkehr.</p>
|
||||
<label class="check-label" for="llmsTxt"><input id="llmsTxt" name="llmsTxt" type="checkbox" value="1"{{ settings.llmsTxt ? ' checked' : '' }}> <code>llms.txt</code> ausliefern</label>
|
||||
|
||||
@@ -170,6 +170,26 @@
|
||||
{% else %}
|
||||
<span id="{{ block.id }}" class="block-icon icon-size-{{ props.size }}{{ designClasses }}"{{ props.decorative ? ' aria-hidden="true"' : '' }}>{{ iconBody }}</span>
|
||||
{% endif %}
|
||||
{% elseif type == 'social' %}
|
||||
{# Die Profile kommen aus den Einstellungen, der Block sagt nur, wie sie aussehen. Eine
|
||||
Liste, weil es eine ist; ohne Beschriftung trägt jeder Link seinen Namen unsichtbar. #}
|
||||
{% set profiles = siteSettings.load().social|default({}) %}
|
||||
{% set chosen = props.networks|default([]) %}
|
||||
{% set shown = [] %}
|
||||
{% for key, name in constant('App\\Content\\SocialProfiles::NETWORKS') %}
|
||||
{% if profiles[key]|default('') and (chosen is empty or key in chosen) %}{% set shown = shown|merge([{key: key, name: name, url: profiles[key]}]) %}{% endif %}
|
||||
{% endfor %}
|
||||
{% if shown is not empty %}
|
||||
<ul id="{{ block.id }}" class="block-social social-{{ props.layout|default('horizontal') }} social-shape-{{ props.shape|default('plain') }} social-size-{{ props.size|default(24) }}{{ props.labels|default(false) ? ' social-labels' : '' }}{{ designClasses }}" aria-label="Soziale Profile">
|
||||
{% for profile in shown %}
|
||||
<li><a href="{{ profile.url }}"{% include 'blocks/link-attributes.html.twig' with {newTab: props.newTab is defined ? props.newTab : true} only %}>{% include 'blocks/social-icon.html.twig' with {network: profile.key} only %}<span{{ props.labels|default(false) ? '' : ' class="visually-hidden"' }}>{{ profile.name }}</span></a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% elseif editing|default(false) %}
|
||||
<p id="{{ block.id }}" class="block-unavailable{{ designClasses }}" role="note">Noch keine sozialen Profile eingetragen. Sie stehen unter Einstellungen → Unternehmensdaten → Soziale Profile.</p>
|
||||
{% else %}
|
||||
<!-- Block {{ block.id }} (social): keine Profile eingetragen. -->
|
||||
{% endif %}
|
||||
{% elseif type == 'progress' %}
|
||||
{# A progress bar as a real meter: the number is in the markup, not only in the width of a
|
||||
coloured div, so it is readable without seeing it. #}
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
{# Ein Symbol je Netzwerk, gezeichnet im Strich des übrigen Symbolsatzes (icon.html.twig): keine
|
||||
Markenbilder, keine Schrift, keine fremde Datei. Die Form ist so weit vereinfacht, dass sie
|
||||
als Umriss erkennbar bleibt und in jeder Größe und Farbe funktioniert. #}
|
||||
{% set shapes = {
|
||||
facebook: '<path d="M15.5 4h-2.2A3.8 3.8 0 0 0 9.5 7.8V10H7v3.2h2.5V20h3.3v-6.8h2.4l.5-3.2h-2.9V8.2c0-.6.3-.9.9-.9h2Z"/>',
|
||||
instagram: '<rect x="3.5" y="3.5" width="17" height="17" rx="4.6"/><circle cx="12" cy="12" r="3.9"/><path d="M17 7h.01"/>',
|
||||
linkedin: '<rect x="3.5" y="3.5" width="17" height="17" rx="2.6"/><path d="M7.6 10.4v6.2M7.6 7.5h.01M11.6 16.6v-6.2m0 2.7a2.6 2.6 0 0 1 5.2 0v3.5"/>',
|
||||
youtube: '<rect x="2.5" y="5.5" width="19" height="13" rx="3.6"/><path d="m10.2 9.2 4.8 2.8-4.8 2.8Z"/>',
|
||||
tiktok: '<path d="M14.2 4v9.6a3.6 3.6 0 1 1-3.6-3.6M14.2 4c0 2.6 2.1 4.7 4.7 4.7"/>',
|
||||
x: '<path d="M4.5 4h4l11 16h-4Z"/><path d="M19 4l-6.1 7.1M5 20l6.1-7.1"/>',
|
||||
threads: '<path d="M12.4 3.5A8.5 8.5 0 1 0 19 17.3c1.5-2.2.8-5.4-2.2-6.1-2.3-.6-4.7.4-5 2.6-.3 2.1 1.7 3.4 3.5 2.5 1.7-.8 2.1-3.5 1.1-6.4-.6-1.8-2-2.8-3.8-2.7-1.4.1-2.5.7-3.2 1.7"/>',
|
||||
pinterest: '<path d="M12 3.5a8.5 8.5 0 0 0-3.4 16.3l1.5-5.6M9.4 12.6c-.6-2.6 1-4.8 3.1-4.8 1.9 0 3 1.4 2.6 3.4-.5 2.2-2 3.7-3.5 3.1M10.1 15.5 8.8 20.5"/>',
|
||||
xing: '<path d="M6.5 6.5 9.4 11 6 16.5M18 3l-6.6 11.5L15.5 21"/>',
|
||||
whatsapp: '<path d="M4 20l1.4-4A8.5 8.5 0 1 1 8.6 19.1Z"/><path d="M9.3 9.2c0 3 2.5 5.5 5.5 5.5l1.3-1.4-2-.9-.9.8a4.1 4.1 0 0 1-2.3-2.3l.8-.9-.9-2Z"/>',
|
||||
google: '<path d="M12 12h8.4A8.5 8.5 0 1 1 18 6.1"/>'
|
||||
} %}
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">{{ shapes[network]|raw }}</svg>
|
||||
Reference in new issue
Block a user