Giter VIP home page Giter VIP logo

zeiss's Introduction

Zeiss Franklin POC

POC for Zeiss

Environments

Installation

npm i

Tests

npm tst

Debugging tests

npm run test:watch

Or to debug a specific test

npm i -g --save-dev @web/test-runner
web-test-runner test/blocks/hero/hero.test.js --node-resolve --watch

Refer here for more details

Local development

  1. Install the Helix CLI: npm install -g @adobe/helix-cli
  2. Start Helix Pages Proxy: hlx up (opens your browser at http://localhost:3000)
  3. Go to http://localhost:3000/de/semiconductor-manufacturing-technology/news-und-events/smt-pressemeldung/zeiss-trumpf-und-fraunhofer-mit-deutschem-zukunftspreis-ausgezeichnet
  4. Open the {repo} directory in your favorite IDE and start coding :)
  5. Install a browser extension such as Allow CORS: Access-Control-Allow-Origin to allow requests to www.zeiss.de and www.zeiss.de and activate it

zeiss's People

Contributors

alinarublea avatar bosschaert avatar dominique-pfister avatar icaraps avatar jindaliiita avatar karlpauls avatar kptdobe avatar mohamadhjeij avatar ritwiksrivastava avatar sdmcraft avatar tmaret avatar trieloff avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar

Forkers

bosschaert zeiss jindaliiita jindaliiitapiyush

zeiss's Issues

Simplify "Columns" block markup

As seen in https://www.zeiss.de/semiconductor-manufacturing-technology/news-und-events/smt-pressemeldung/europaeischer-erfinderpreis-2018.html

image

The markup for the columns block needs to be simplified. Currently it is defined here:

zeiss/blocks/columns/columns.js

Lines 5 to 85 in b61a426

<div class="downloads-wrapper">
<div class="downloads">
<div class="grid__container downloads__headline-grid">
<div class="grid__structure">
<div class="grid__column grid__column--100">
<div class="module-headline">
<div class="grid__structure">
<div class="grid__column module-headline--column">
<div class="headline hl-l headline--align-center hl--sub-xs">
<span class="headline__main heading-slot"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="downloads__tabs downloads__tabs--no-tabs">
<div class="tabs-horizontal tabs-horizontal--js-init">
<div>
<div class="item">
<div class="assets">
<div class="grid__container">
<div class="assets__collapsable-area">
<div class="slideshow slideshow--assets assets__slideshow slideshow--navigation-recenter slideshow--hide-interaction">
<div class="slideshow__container swiper-container swiper-container-initialized swiper-container-horizontal swiper-container-pointer-events">
<ul class="slideshow__list swiper-wrapper">
${props.items.map((item) => `
<li class="slideshow__item">
<div class="download-item download-item--landscape">
<div class="download-item__image">
<a class="plain-link download-item__image-link" href="${item.href}">
<figure class="lazy-image lazy-image--ratio-3_2 lazy-image--position-top elevation--highlight lazy-image--loaded">
<div class="lazy-image__image-container" >
${item.image}
</div>
<div class="lazy-image__active-image-indicator"></div>
</figure>
</a>
</div>
<div class="download-item__content">
<div class="download-item__info text--body-m">
<div class="download-item__info-data">
<span class="download-item__info-label text--bold">Dateigröße:</span>
<span class="download-item__info-value download-size-slot"></span>
</div>
</div>
<div class="button-link button-link--link">
<a class=" button-link--icon button-link--internal" href="${item.href}" download="${item.name}">
<span class="button-link__content">
<span>
<span>Download</span>
</span>
<span class="icon icon-internal-link"></span>
</span>
</a>
</div>
</div>
</div>
</li>
`).join('')}
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Simplify "Social" Block's markup

Simplify the markup of the social block.
image

Current markup

zeiss/blocks/social/social.js

Lines 6 to 26 in 215c2c1

<div class="page-utility-bar grid__container">
<div class="grid__structure">
<hr class="divider divider--dark">
<div class="page-utility-bar__label">${props.title}</div>
<div class="page-utility-bar__share-container">
<div class="share">
${props.items.map((item) => `
<a data-type="${item.type}" aria-label="${item.label}" class="plain-link share__link" target="_blank" href="${item.href}" title="${item.label}">
<span class="icon icon-${item.icon}"></span>
</a>
`).join('')}
</div>
</div>
<hr class="divider">
</div>
</div>

Simplify Hero block markup

This task is logged to simplify the hero block which currently uses templatized markup which can be simplified

zeiss/blocks/hero/hero.js

Lines 5 to 37 in b61a426

return `<div class="general-article-stage">
<div class="grid__container" xmlns="http://www.w3.org/1999/html">
<div class="grid__structure">
<div class="grid__column grid__column--100">
<hr class="divider divider--dark">
</div>
<div class="grid__column general-article-stage__column-content">
<div class="headline hl-xxl hl--sub-m">
<span>
<span class="headline__eyebrow text--eyebrow">Presseinformation</span>
<h1>
<span class="headline__main" data-js-select="Headline_main">${info.Main}</span>
</h1>
<h3 class="headline__sub hl--sub">${info.Sub}</h3>
</span>
</div>
<div class="general-article-stage__details text--eyebrow">
${info.Date}
· ${info.Duration} Lesedauer
</div>
<div class="general-article-stage__share">
<div class="share">
${info.socials.map((item) => `
<a data-type="${item.type}" aria-label="${item.label}" class="plain-link share__link" target="_blank" href="${item.href}" title="${item.label}">
<span class="icon icon-${item.icon}"></span>
</a>
`).join('')}
</div>
</div>
</div>
</div>
</div>
</div>`;

Import reading time

Add support to import reading time in importer script and add it to metadata block.

image

This should be added in word doc as follows:

image

Once this is done, we can import all the press articles and upload them to share point. #43 has the list of articles.

Simplify "Contact" block's markup

As seen in https://www.zeiss.de/semiconductor-manufacturing-technology/news-und-events/smt-pressemeldung/europaeischer-erfinderpreis-2018.html#presseinformation

image

This is handeled by the "Contact" block. This task is logged to simplify the markup generated by this block here

zeiss/blocks/contact/contact.js

Lines 5 to 74 in b61a426

return `<div class="profile-collection ">
<div class="heading-slot"></div>
<div class="profile-collection__settings" data-primary-count="3">
<div class="grid__container">
<div class="profile-collection__content profile-collection__content-medium">
<div class="profile-collection__section profile-collection__section--visible">
<div class="grid__structure profile-collection__structure profile-collection__structure--primary">
${items.map((item) => `<div class="profile-collection__item">
<div data-module="Profile" class="profile profile--primary">
<div class="grid__structure profile__grid-structure">
<div class="grid__column profile__column--content">
<div class="headline hl-xs profile__headline ">
<span>
<span class="headline__eyebrow text--eyebrow">Pressekontakt</span>
<h3>
<span class="headline__main" data-js-select="Headline_main">${item.Name}</span>
</h3>
<h4 class="headline__sub hl--sub">${item.Org}</h4>
</span>
</div>
<div class="profile__actions">
<div class="profile__toggle">
</div>
<div class="profile__contact">
<ul class="profile__contact-list">
<li class="profile__contact-item">
<a aria-label="Telefon"
class="plain-link profile__contact-item-link"
href="tel:${item.Phone}" title="Telefon">
<span class="icon icon-phone">
</span>
<span class="profile__contact-item-label">${item.Phone}</span>
</a>
</li>
<li class="profile__contact-item">
<a aria-label="E-Mail"
class="plain-link profile__contact-item-link"
href="mailto:${item.Email}" title="E-Mail">
<span class="icon icon-mail icon--symbol">
</span>
<span
class="profile__contact-item-label">${item.Email}</span>
</a>
</li>
<li class="profile__contact-item">
<a aria-label="vCard"
class="plain-link profile__contact-item-link"
href="${item.vCard}"
target="_blank" title="vCard">
<span class="icon icon-file-download">
</span>
<span class="profile__contact-item-label">vCard
herunterladen</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>`).join('')}
</div>
<div class="grid__structure profile-collection__structure profile-collection__structure--secondary">
</div>
</div>
</div>
</div>
</div>
</div>`;

Remove social related markup from hero block

Social markup should be added via "social" block and removed from "hero" blocks markup here

zeiss/blocks/hero/hero.js

Lines 25 to 33 in 215c2c1

<div class="general-article-stage__share">
<div class="share">
${info.socials.map((item) => `
<a data-type="${item.type}" aria-label="${item.label}" class="plain-link share__link" target="_blank" href="${item.href}" title="${item.label}">
<span class="icon icon-${item.icon}"></span>
</a>
`).join('')}
</div>
</div>

Import "smt-pressemeldung" content under SMT section

Import "smt-pressemeldung" content under SMT section from https://www.zeiss.de/semiconductor-manufacturing-technology/news-und-events/smt-pressemeldung.html
Url list (tentative)

German Site

  1. https://www.zeiss.de/semiconductor-manufacturing-technology/news-und-events/smt-pressemeldung/2023/spie-award.html
  2. https://www.zeiss.de/semiconductor-manufacturing-technology/news-und-events/smt-pressemeldung/2023/spende-an-tafeln-aalen-heidenheim.html
  3. https://www.zeiss.de/semiconductor-manufacturing-technology/news-und-events/smt-pressemeldung/2023/zeiss-als-ehrenamtsfreundlicher-arbeitgeber-ausgezeichnet.html
  4. https://www.zeiss.de/semiconductor-manufacturing-technology/news-und-events/smt-pressemeldung/mitbestimmungspreis.html
  5. https://www.zeiss.de/semiconductor-manufacturing-technology/news-und-events/smt-pressemeldung/zeiss-expandiert-in-wetzlar-weiteres-werk-im-dillfeld.html
  6. https://www.zeiss.de/semiconductor-manufacturing-technology/news-und-events/smt-pressemeldung/modernes-ausbildungsangebot-in-wetzlar.html
  7. https://www.zeiss.de/semiconductor-manufacturing-technology/news-und-events/smt-pressemeldung/intels-2022-epic-distinguished-supplier-award-en-only.html
  8. https://www.zeiss.de/semiconductor-manufacturing-technology/news-und-events/smt-pressemeldung/ausgezeichnete-ausbildung-bei-zeiss.html
  9. https://www.zeiss.de/semiconductor-manufacturing-technology/news-und-events/smt-pressemeldung/zeiss-spendet-25000-euro-an-kinderstiftung-knalltuete.html
  10. https://www.zeiss.de/semiconductor-manufacturing-technology/news-und-events/smt-pressemeldung/zeiss-trumpf-und-fraunhofer-mit-deutschem-zukunftspreis-ausgezeichnet.html
  11. https://www.zeiss.de/semiconductor-manufacturing-technology/news-und-events/smt-pressemeldung/verkauf-von-zeiss-itrap.html
  12. https://www.zeiss.de/semiconductor-manufacturing-technology/news-und-events/smt-pressemeldung/winfried-kaiser-mit-dem-spie-frits-zernike-award-ausgezeichnet.html
  13. https://www.zeiss.de/semiconductor-manufacturing-technology/news-und-events/smt-pressemeldung/zeiss-accelerates-semiconductor-package-failure-analysis-en-only.html
  14. https://www.zeiss.de/semiconductor-manufacturing-technology/news-und-events/smt-pressemeldung/quality-supplier-award-2019-en-only.html
  15. https://www.zeiss.de/semiconductor-manufacturing-technology/news-und-events/smt-pressemeldung/ausgezeichnete-auszubildende.html
  16. https://www.zeiss.de/semiconductor-manufacturing-technology/news-und-events/smt-pressemeldung/50-jahre-halbleiterfertigungstechnologien-von-zeiss.html
  17. https://www.zeiss.de/semiconductor-manufacturing-technology/news-und-events/smt-pressemeldung/investitionen.html
  18. https://www.zeiss.de/semiconductor-manufacturing-technology/news-und-events/smt-pressemeldung/european-inventor-award-2018-en-only.html
  19. https://www.zeiss.de/semiconductor-manufacturing-technology/news-und-events/smt-pressemeldung/quality-supplier-award-en-only.html
  20. https://www.zeiss.de/semiconductor-manufacturing-technology/news-und-events/smt-pressemeldung/europaeischer-erfinderpreis-2018.html
  21. https://www.zeiss.de/semiconductor-manufacturing-technology/news-und-events/smt-pressemeldung/2023/neue-multifunktionsfabrik-in-wetzlar.html
  22. https://www.zeiss.de/semiconductor-manufacturing-technology/news-und-events/smt-pressemeldung/2023/zeiss-expandiert-am-forschungs--und-entwicklungsstandort-rossdorf.html

Global Site

  1. https://www.zeiss.com/semiconductor-manufacturing-technology/news-and-events/smt-press-releases/zeiss-expands-in-wetzlar-additional-plant-in-dillfeld.html
  2. https://www.zeiss.com/semiconductor-manufacturing-technology/news-and-events/smt-press-releases/intels-2022-epic-distinguished-supplier-award.html
  3. https://www.zeiss.com/semiconductor-manufacturing-technology/news-and-events/smt-press-releases/zeiss-trumpf-and-fraunhofer-research-team-awarded-the-deutscher-zukunftspreis-.html
  4. https://www.zeiss.com/semiconductor-manufacturing-technology/news-and-events/smt-press-releases/intels-preferred-quality-supplier-award-2020.html
  5. https://www.zeiss.com/semiconductor-manufacturing-technology/news-and-events/smt-press-releases/winfried-kaiser-honored-with-the-spie-frits-zernike-award-for-microlithography.html
  6. https://www.zeiss.com/semiconductor-manufacturing-technology/news-and-events/smt-press-releases/zeiss-accelerates-semiconductor-package-failure-analysis.html
  7. https://www.zeiss.com/semiconductor-manufacturing-technology/news-and-events/smt-press-releases/zeiss-trumpf-and-fraunhofer-research-team-awarded-the-deutscher-zukunftspreis-.html
  8. https://www.zeiss.com/semiconductor-manufacturing-technology/news-and-events/smt-press-releases/intels-preferred-quality-supplier-award-2020.html
  9. https://www.zeiss.com/semiconductor-manufacturing-technology/news-and-events/smt-press-releases/winfried-kaiser-honored-with-the-spie-frits-zernike-award-for-microlithography.html
  10. https://www.zeiss.com/semiconductor-manufacturing-technology/news-and-events/smt-press-releases/zeiss-accelerates-semiconductor-package-failure-analysis.html
  11. https://www.zeiss.com/semiconductor-manufacturing-technology/news-and-events/smt-press-releases/quality-supplier-award-2019.html
  12. https://www.zeiss.com/semiconductor-manufacturing-technology/news-and-events/smt-press-releases/anniversary-50-years-smt.html
  13. https://www.zeiss.com/semiconductor-manufacturing-technology/news-and-events/smt-press-releases/european-inventor-award-2018.html
  14. https://www.zeiss.com/semiconductor-manufacturing-technology/news-and-events/smt-press-releases/quality-supplier-award.html
  15. https://www.zeiss.com/semiconductor-manufacturing-technology/news-and-events/smt-press-releases/european-inventor-award.html
  16. https://www.zeiss.com/semiconductor-manufacturing-technology/news-and-events/smt-press-releases/2023/new-multifunctional-factory-in-wetzlar.html
  17. https://www.zeiss.com/semiconductor-manufacturing-technology/news-and-events/smt-press-releases/2023/zeiss-expands-at-the-rossdorf-research-and-development-site.html

Changes in cookie manager script

Zeiss team shared a new script for cookie manager. Copying it here. This task is logged to update our cookie management code accordingly.

<!-- OneTrust Cookies Consent Notice start for zeiss.com -->
<script src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js" data-document-language="true" type="text/javascript" charset="UTF-8" data-domain-script="#domainid#" ></script>
<script type="text/javascript">
 function OptanonWrapper() { }
</script>
<!-- OneTrust Cookies Consent Notice end for zeiss.com -->

Simplify cards block markup

Current markup

zeiss/blocks/cards/cards.js

Lines 3 to 54 in 00cf136

<div class="text-media-grid grid__container">
<div data-target-id="textMediaGrid-101653481">
<div class="text-media-grid__item-group lazy-image--ratio-1_1">
<div class="text-media-grid__items text-media-grid__items--count-${props.items.length}">
<div class="text-media-item-vertical grid__structure text-media-item-vertical--fullwidth">
<div class="grid__column grid__column--100 text-media-item-vertical__media ">
<div class="media-component">
<div class="media media--image">
<figure data-module="LazyImage" class="lazy-image lazy-image--ratio-1_1 lazy-image--position-top lazy-image--loaded">
<div class="lazy-image__image-container" data-js-select="LazyImage_image-container">
<noscript>
<img class="lazy-image__image" src="https://www.zeiss.de/content/dam/z/media/pressphotos/awards-and-events/kingslake-award-uebergabe_prev.jpg/_jcr_content/renditions/original.image_file.1618.1618.0,225,1618,1843.file/kingslake-award-uebergabe_prev.jpg"/>
</noscript>
<img class="lazy-image__image lazy-image__target-image " data-js-select="LazyImage_image" src="https://www.zeiss.de/content/dam/z/media/pressphotos/awards-and-events/kingslake-award-uebergabe_prev.jpg/_jcr_content/renditions/original.image_file.1440.1440.0,225,1618,1843.file/kingslake-award-uebergabe_prev.jpg" data-src="{&quot;xsmall&quot;:&quot;https://www.zeiss.de/content/dam/z/media/pressphotos/awards-and-events/kingslake-award-uebergabe_prev.jpg/_jcr_content/renditions/original.image_file.100.100.0,225,1618,1843.file/kingslake-award-uebergabe_prev.jpg&quot;,&quot;small&quot;:&quot;https://www.zeiss.de/content/dam/z/media/pressphotos/awards-and-events/kingslake-award-uebergabe_prev.jpg/_jcr_content/renditions/original.image_file.360.360.0,225,1618,1843.file/kingslake-award-uebergabe_prev.jpg&quot;,&quot;medium&quot;:&quot;https://www.zeiss.de/content/dam/z/media/pressphotos/awards-and-events/kingslake-award-uebergabe_prev.jpg/_jcr_content/renditions/original.image_file.768.768.0,225,1618,1843.file/kingslake-award-uebergabe_prev.jpg&quot;,&quot;large&quot;:&quot;https://www.zeiss.de/content/dam/z/media/pressphotos/awards-and-events/kingslake-award-uebergabe_prev.jpg/_jcr_content/renditions/original.image_file.1024.1024.0,225,1618,1843.file/kingslake-award-uebergabe_prev.jpg&quot;,&quot;xlarge&quot;:&quot;https://www.zeiss.de/content/dam/z/media/pressphotos/awards-and-events/kingslake-award-uebergabe_prev.jpg/_jcr_content/renditions/original.image_file.1280.1280.0,225,1618,1843.file/kingslake-award-uebergabe_prev.jpg&quot;,&quot;xxlarge&quot;:&quot;https://www.zeiss.de/content/dam/z/media/pressphotos/awards-and-events/kingslake-award-uebergabe_prev.jpg/_jcr_content/renditions/original.image_file.1440.1440.0,225,1618,1843.file/kingslake-award-uebergabe_prev.jpg&quot;,&quot;max&quot;:&quot;https://www.zeiss.de/content/dam/z/media/pressphotos/awards-and-events/kingslake-award-uebergabe_prev.jpg/_jcr_content/renditions/original.image_file.1618.1618.0,225,1618,1843.file/kingslake-award-uebergabe_prev.jpg&quot;}">
</div>
<div class="lazy-image__active-image-indicator"></div>
</figure>
</div>
</div>
</div>
<div class="grid__column text-media-item-vertical__text ">
<div class="text text--body-m spacing--s">
<p>Bei der Preisverleihung des SPIE Rudolf &amp; Hilda Kingslake Awards in Optical Design (von links): Dr. Kafai Lai (SPIE Fellow Member sowie Adjunct Professor an der Universität Hong Kong); Willi Ulrich (Preisträger); Dr. Donis G. Flagello (President und CEO von SPIE Leadership sowie CEO von Nikon Research)</p>
</div>
</div>
</div>
<div class="text-media-item-vertical grid__structure text-media-item-vertical--fullwidth">
<div class="grid__column grid__column--100 text-media-item-vertical__media ">
<div class="media-component">
<div class="media media--image">
<figure data-module="LazyImage" class="lazy-image lazy-image--ratio-1_1 lazy-image--position-top lazy-image--loaded">
<div class="lazy-image__image-container" data-js-select="LazyImage_image-container">
<noscript>
<img class="lazy-image__image" src="https://www.zeiss.de/content/dam/z/media/pressphotos/awards-and-events/kingslake-award_willi_ulrich_prev.jpg/_jcr_content/renditions/original.image_file.1440.1440.0,50,1440,1490.file/kingslake-award_willi_ulrich_prev.jpg"/>
</noscript>
<img class="lazy-image__image lazy-image__target-image " data-js-select="LazyImage_image" src="https://www.zeiss.de/content/dam/z/media/pressphotos/awards-and-events/kingslake-award_willi_ulrich_prev.jpg/_jcr_content/renditions/original.image_file.1440.1440.0,50,1440,1490.file/kingslake-award_willi_ulrich_prev.jpg" data-src="{&quot;xsmall&quot;:&quot;https://www.zeiss.de/content/dam/z/media/pressphotos/awards-and-events/kingslake-award_willi_ulrich_prev.jpg/_jcr_content/renditions/original.image_file.100.100.0,50,1440,1490.file/kingslake-award_willi_ulrich_prev.jpg&quot;,&quot;small&quot;:&quot;https://www.zeiss.de/content/dam/z/media/pressphotos/awards-and-events/kingslake-award_willi_ulrich_prev.jpg/_jcr_content/renditions/original.image_file.360.360.0,50,1440,1490.file/kingslake-award_willi_ulrich_prev.jpg&quot;,&quot;medium&quot;:&quot;https://www.zeiss.de/content/dam/z/media/pressphotos/awards-and-events/kingslake-award_willi_ulrich_prev.jpg/_jcr_content/renditions/original.image_file.768.768.0,50,1440,1490.file/kingslake-award_willi_ulrich_prev.jpg&quot;,&quot;large&quot;:&quot;https://www.zeiss.de/content/dam/z/media/pressphotos/awards-and-events/kingslake-award_willi_ulrich_prev.jpg/_jcr_content/renditions/original.image_file.1024.1024.0,50,1440,1490.file/kingslake-award_willi_ulrich_prev.jpg&quot;,&quot;xlarge&quot;:&quot;https://www.zeiss.de/content/dam/z/media/pressphotos/awards-and-events/kingslake-award_willi_ulrich_prev.jpg/_jcr_content/renditions/original.image_file.1280.1280.0,50,1440,1490.file/kingslake-award_willi_ulrich_prev.jpg&quot;,&quot;xxlarge&quot;:&quot;https://www.zeiss.de/content/dam/z/media/pressphotos/awards-and-events/kingslake-award_willi_ulrich_prev.jpg/_jcr_content/renditions/original.image_file.1440.1440.0,50,1440,1490.file/kingslake-award_willi_ulrich_prev.jpg&quot;,&quot;max&quot;:&quot;https://www.zeiss.de/content/dam/z/media/pressphotos/awards-and-events/kingslake-award_willi_ulrich_prev.jpg/_jcr_content/renditions/original.image_file.1440.1440.0,50,1440,1490.file/kingslake-award_willi_ulrich_prev.jpg&quot;}">
</div>
<div class="lazy-image__active-image-indicator"></div>
</figure>
</div>
</div>
</div>
<div class="grid__column text-media-item-vertical__text ">
<div class="text text--body-m spacing--s">
<p>Der ehemalige Zeissianer Willi Ulrich freut sich über die Auszeichnung mit dem Rudolf and Hilda Kingslake Award in Optical Design 2023, der nicht nur ihn persönlich, sondern auch das gesamte ZEISS Team und Management ehrt.<br></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Simplify "Article Lists" block's markup

Here's an e.g. of article list.
https://www.zeiss.de/semiconductor-manufacturing-technology/news-und-events/smt-pressemeldung/2023/zeiss-als-ehrenamtsfreundlicher-arbeitgeber-ausgezeichnet.html
image

This is built using the "Article List" block. This task is logged to simplify the markup for this block. The current markup is generated here

zeiss/blocks/article-list/article-list.js

Lines 5 to 112 in b61a426

<div
class="grid__column featured-articles-with-teaser__item featured-articles-with-teaser__item--article">
<div class="article-teaser-item__column">
<div class="article-teaser-item__content">
<a class="plain-link article-teaser-item__content-link"
href="${article.path}"
tabindex="1">
<div class="article-teaser-item__image-wrapper">
<figure
class="lazy-image lazy-image--ratio-16_9 lazy-image--position-top article-teaser-item__image lazy-image--loaded">
<div class="lazy-image__image-container">
<img class="lazy-image__image lazy-image__target-image "
src="${article.image}"
alt="${article.imagealt}"
title="${article.imagealt}">
</div>
<div class="lazy-image__active-image-indicator"></div>
</figure>
</div>
<div class="article-teaser-item__eyebrow text--eyebrow">
<span
class="article-teaser-item__eyebrow--sub article-teaser-item__eyebrow--sub-without-main ">${article.pubdate}</span>
</div>
<div class="headline hl-s ">
<span>
<h3>
<span class="headline__main">${article.title}</span>
</h3>
</span>
</div>
</a>
<div class="article-teaser-item__meta text--caption">
<div>
Presseinformation
- <span class="article-teaser-item__meta-reading-info">${article.readingtime || '1 min'}</span>
Lesedauer</span>
</div>
</div>
</div>
</div>
</div>`;
}
function template(articles, title = 'Weitere Artikel') {
return `<div class="featured-articles-with-teaser featured-articles-with-teaser--background-grey">
<div class="grid__container">
<div class="grid__structure">
<div class="grid__column grid__column--100">
<div class="featured-articles-with-teaser__inner-grid-content">
<div class="featured-articles-with-teaser__headline">
<div class="module-headline">
<div class="grid__structure">
<div class="grid__column module-headline--column">
<div class="headline hl-l headline--align-center hl--sub-xs">
<span>
<h2 id="${title.toLowerCase().replace(/\s/gm, '-')}">
<span class="headline__main">${title}</span>
</h2>
</span>
</div>
</div>
</div>
</div>
</div>
<div
class="grid__structure featured-articles-with-teaser__items featured-articles-with-teaser__items--${articles.length}">
${articles.map(articleTemplate).join('')}
<div
class="grid__column featured-articles-with-teaser__item featured-articles-with-teaser__item--teaser">
<div class="featured-articles-with-teaser__teaser">
<div class="headline hl-s featured-articles-with-teaser__teaser-headline">
<span>
<h3>
<span class="headline__main">Alle Pressemeldungen</span>
</h3>
</span>
</div>
<div class="text text--body-m featured-articles-with-teaser__teaser-text">
<p>Finden Sie hier die neuesten Presseinformationen von ZEISS.<br>
</p>
</div>
<div class="featured-articles-with-teaser__teaser-link">
<div class="button-link button-link--link">
<a class=" button-link--icon "
href="https://www.zeiss.de/corporate/newsroom/pressemitteilungen.html"
target="_blank">
<span class="button-link__content">
<span>
<span>Zu den Pressemeldungen</span>
</span>
<span class="icon icon-external-link icon--symbol">
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid__content-bg--full featured-articles-with-teaser__grid-background"></div>
</div>
</div>
</div>
</div>`;

Simplify carousel block mark up

Reference page
https://main--zeiss--hlxsites.hlx.page/de/semiconductor-manufacturing-technology/news-und-events/smt-pressemeldung/zeiss-trumpf-und-fraunhofer-mit-deutschem-zukunftspreis-ausgezeichnet

Current Markup

zeiss/blocks/carousel/carousel.js

Lines 5 to 82 in ac0aa2f

<div class="image-slideshow grid__container">
<div class="grid__structure">
<div class="grid__column grid__column--100 image-slideshow__wrapper">
<div>
<div class="thumbnail-slideshow thumbnail-slideshow--left-aligned">
<div class="slideshow thumbnail-slideshow__main slideshow--navigation-recenter">
<div class="slideshow__container swiper-container swiper-container-initialized swiper-container-horizontal swiper-container-pointer-events">
<ul class="slideshow__list swiper-wrapper">
${props.items.map((item, i) => `
<li class="slideshow__item swiper-slide ${i === 0 ? 'swiper-slide-active' : ''}">
<div class="thumbnail-slideshow-item">
<div class="thumbnail-slideshow-item__media">
<div class="thumbnail-slideshow-item__image">
<div class="slideshow-item">
<div class="slideshow-item__main">
<figure class="lazy-image lazy-image--ratio-16_9 lazy-image--loaded">
<div class="lazy-image__image-container">
${item.image}
</div>
<div class="lazy-image__active-image-indicator"></div>
<figcaption class="lazy-image__figcaption text--caption">
${(() => {
if (item.copyright) {
return `
<span class="lazy-image__copyright">
<span class="lazy-image__copyright-text ">${item.copyright}</span>
</span>
`;
}
return '';
})()}
<span class="lazy-image__caption">
<p>${item.label}</p>
</span>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
<div class="thumbnail-slideshow-item__media-indicator"></div>
</div>
</li>
`).join('')}
</ul>
<div class="swiper-button-next slideshow__navigation-button slideshow__navigation-button--next" role="navigation">
<span class="icon icon-chevron-right"></span>
</div>
<div class="swiper-button-prev slideshow__navigation-button slideshow__navigation-button--right swiper-button-disabled" role="navigation">
<span class="icon icon-chevron-left"></span>
</div>
<div class="slideshow__pagination-wrapper">
<div class="slideshow__pagination-bar">
<div class="swiper-pagination slideshow__pagination swiper-pagination-clickable swiper-pagination-bullets" role="navigation">
${props.items.map((_, index) => `
<span class="slideshow__pagination-bullet ${index === 0 ? 'slideshow__pagination-bullet--active' : ''}"></span>
`).join('')}
</div>
<span class="slideshow__pagination-bullet slideshow__pagination-bullet--animated" style="width: ${100 / props.items.length}%; left: 0%;"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Press Release article - metadata and indexing

  1. Define metadata for a Press Release article that must be indexed.
  2. Create appropriate index definitions to index article metadata.

This would be useful in the following:

  1. Retrieving articles by tags.
  2. Generating article cards to be shown at places like related articles.

Simplify Collapsible text block markup

As seen in https://www.zeiss.de/semiconductor-manufacturing-technology/news-und-events/smt-pressemeldung/ausgezeichnete-ausbildung-bei-zeiss.html

Screen.Recording.2023-03-05.at.9.33.08.PM.mov

This is currently implemented as the collapse block at https://github.com/hlxsites/zeiss/blob/b61a426d949efe128cb53fc54522df7a8a1568cc/blocks/collapse/collapse.js.

The markup can be simplified. Currently it is as follows

zeiss/blocks/collapse/collapse.js

Lines 5 to 50 in b61a426

<div class="text-block">
<div class="grid__container">
<div class="grid__structure">
<div class="grid__column grid__column--inner">
<div class="text-block__headline">
<div class="headline hl-l">
<span class="heading-slot headline__main"></span>
</div>
</div>
<div class="text-block__expandable-area">
<div class="text text--body-m">
${item.text}
</div>
<div class="button-link button-link--link text-block__button">
<a class=" button-link--icon button-link--internal" href="${item.more.href}" title="${item.more.label}" >
<span class="button-link__content">
<span>
<span>${item.more.label}</span>
</span>
${item.more.isInternal ? '<span class="icon icon-internal-link"></span>' : '<span class="icon icon-external-link"></span>'}
</span>
</a>
</div>
</div>
<div>
<div class="button-toggle button-toggle--collapsed" data-collapsed-label="Mehr Informationen ${item.title.uncapitalizedLabel}" data-expanded-label="Weniger Informationen ${item.title.uncapitalizedLabel}">
<div class="button-link button-link--link">
<button class="button-link--icon" title="Mehr Informationen ${item.title.uncapitalizedLabel}" aria-label="Mehr Informationen ${item.title.uncapitalizedLabel}">
<span class="button-link__content">
<span>Mehr Informationen ${item.title.uncapitalizedLabel}</span>
</span>
<span class="icon icon-expand-more"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`).join('');

Serve global site from Zeiss.com and German site from Zeiss.de

Related slack conversation https://cq-dev.slack.com/archives/C9KD0TT6G/p1678198860758869

Requirements
Update CDN routing
- Add Franklin origin https://main--zeiss--hlxsites.hlx.live/ to CDN
- Route requests for https://www.zeiss.de/semiconductor-manufacturing-technology/news-und-events/smt-pressemeldung/** to /de/${req.path}
- Route requests for https://www.zeiss.com/semiconductor-manufacturing-technology/news-and-events/smt-press-releases/** to /en/${req.path}
- Configure push invalidation (Will need tokens from Zeiss. Franklin team will setup)
As per @mohamadhjeij , Zeiss is using Akamai.
Generic BYOCDN configuration steps for Akamai here https://www.hlx.live/docs/byo-cdn-akamai-setup

Simplify TOC block markup

TOC block provides in page navigation as seen in https://www.zeiss.de/semiconductor-manufacturing-technology/news-und-events/smt-pressemeldung/quality-supplier-award-en-only.html#pressphotos

Screen.Recording.2023-03-05.at.9.23.44.PM.mov

This task is logged to simplify its markup at

zeiss/blocks/toc/toc.js

Lines 5 to 65 in b61a426

<div class="in-page-navigation exclude-site-search">
<div class="in-page-navigation__placeholder"></div>
<section class="grid__container grid__container--full-bleed in-page-navigation__grid">
<div class="grid__structure">
<div class="grid__column grid__column--100">
<div class="grid__background-column"></div>
<div class="grid__container">
<div class="grid__structure">
<div class="grid__column grid__column--100">
<div class="in-page-navigation__navigation-wrapper">
<a href="#" class="plain-link in-page-navigation__expand-button">
Übersicht
<i class="in-page-navigation__expand-button-icon">
<span class="icon icon-expand-more"></span>
</i>
</a>
<div class="in-page-navigation__navigation-list" style="height: 0px;">
${props.links.map((link) => `
<a class="plain-link in-page-navigation__navigation-link" href="${link.href}" title="${link.label}">${link.label}</a>
`).join('')}
</div>
${props.CTALink ? `
<div class="in-page-navigation__cta-wrapper">
<div class="in-page-navigation__cta-wrapper-button">
<div>
<div class="button-link">
<a class="button-link--internal" href="${props.CTALink.href}">
<span class="button-link__content">
<span><span>${props.CTALink.label}</span></span>
</span>
</a>
</div>
</div>
</div>
<div class="in-page-navigation__cta-wrapper-icon">
<div>
<div class="button-link button-link--icon-rounded">
<a class=" button-link--icon button-link--internal" href="${props.CTALink.href}">
<span class="button-link__content">
<span class="icon">
<span class="svg-scale-wrapper" style="padding-bottom: 100%;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"></path></svg>
</span>
</span>
</span>
</a>
</div>
</div>
</div>
` : ''}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
`;

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.