urfuwo / hlx-test Goto Github PK
View Code? Open in Web Editor NEWLicense: Apache License 2.0
License: Apache License 2.0
for the author pages that are just stubs without content in their own right
Goal: SAP to provide a set of foundational artifacts at the same domain (mapped-in via CDN):
Foundational artifacts to be provided (mandatory):
All artifacts shall be provided both in "latest version" and with specific version numbers, so code can fixate the version if needed.
Example URLs (may change, web1.udex.services.sap.com is being used here as a placeholder for the CDN-mapped domain; the versioning pattern is following the jsdelivr URL pattern, but can be changed):
Intended use: All artifacts can directly be consumed by importing them in project code
Observations:
Goals:
when users paste a youtube link to word online, by default word will create a preview of the video
in the pipeline HTML, below is what this looks like.
so an option would be to say that **if a <p>
with just a <picture>
in it follows the youtube link, treat it as the poster image **
that would handle poster images as well. WDYT @mhaack ?
<p>
<picture>
<source type="image/webp" srcset="./media_13b34336646679c901df9e5e97618e0f1198cde10.jpeg?width=2000&format=webply&optimize=medium" media="(min-width: 600px)">
<source type="image/webp" srcset="./media_13b34336646679c901df9e5e97618e0f1198cde10.jpeg?width=750&format=webply&optimize=medium">
<source type="image/jpeg" srcset="./media_13b34336646679c901df9e5e97618e0f1198cde10.jpeg?width=2000&format=jpeg&optimize=medium" media="(min-width: 600px)">
<img loading="lazy" alt="Video titled: SAP Ariba Category Management" src="./media_13b34336646679c901df9e5e97618e0f1198cde10.jpeg?width=750&format=jpeg&optimize=medium" width="480" height="360">
</picture>
</p>
Goal: The HeroBanner styling on article/blog pages matches the design given on https://www.figma.com/file/oSetT4LbatRmXlcB2A7V8Z/Content-Hubs-2024?type=design&node-id=269-30889&mode=design&t=D0jJGSxZlJFSCg4b-0
Reference page (AEM EDS): https://main--hlx-test--urfuwo.hlx.live/blog/2023/12/being-human-in-the-age-of-ai
List of concerns:
Observation: the hero autoblock generates empty paragraphs (in the follow-up section).
Goals: Remove the empty generated paragraph
Non-goals: Remove paragraphs in the editorial source (targeted separately)
Context: SAP has provided a design example ("Concept A") for next-gen content hub blog pages here: https://www.figma.com/file/oSetT4LbatRmXlcB2A7V8Z/Content-Hubs-2024?type=design&node-id=269-30889&mode=design&t=RZkr5VBRC2kSmAUI-0. This design example is intended to be the foundation of the content hub / blog pages.
The example is fine, but unfortunately missing certain aspects, and therefore the design implementation in Adobe AEM EDS must make a lot of assumptions.
Please add illustrations for the following aspects to the example:
Goal: Add the SAP glow theme (CSS and design tokens) to the project
Goal: Implement the content hub header
The Master Header on the Content Hub implements Global navigation, allowing users to access different sections of Content Hub i.e. Blogs, News, Press Release and so on.
It supports two level navigation where users can first land on the hub and based on the contents on the hub the second level navigation is populated.
All the navigation links are manually contributed, where a Global content team contributes to the document (globalnav.docx/nav.docx) and every hub team contributes their own second level navigation.
Global navigation (top-level) features Explore section (different from Explore SAP) which opens a flyout menu where user can seek further information regarding content hub.
Ref: https://news.sap.com/2023/12/being-human-in-the-age-of-ai/ > top line (SAP News Center)
NOTE: The header does not comprise the breadcrumb line "Corporate Blog"
Design:
Old design: https://www.figma.com/file/OFEfvhyXJvYJ6MQZ30699m/v2.0-Brand-Digital-Design-System?type=design&node-id=2822%3A829&mode=design&t=2HIhIC3XND2WyiZb-1
New Content hub design: https://www.figma.com/file/oSetT4LbatRmXlcB2A7V8Z/Content-Hubs-2024?type=design&node-id=269-30889&mode=design&t=fud1mE0It37v2hWa-0
Specifications(Old): https://sap.frontify.com/document/223143#/-/masthead
Header documentation:
https://github.wdf.sap.corp/pages/designsystem/sap-simple-elements/?path=/docs/header-integration-guide--get-started
Test Explore SAP menu JSON URL
https://contextualnavigation.api.community-qa.sap.com/navigation_explore_sap/explore_sap/de/data_latest.json
Assumptions:
As of now implementation of Explore SAP is out of scope and lies with the development of master header UI5 web component
Examples are
--udexGridGutters
--udexGridMargins
Goals:
Constraints:
Missing information:
Validation: Validate fixed gutter width using these pages:
References:
Grid System:
Tiles (for cards):
Ensure that redirects are in place for the wordpress URLs, making sure any SEO attribution carries.
Goals:
Constraints:
References:
Context:
Goals:
Non-goals:
References:
Context: A decision was taken to not use autoblocking for hero.
Goals: Remove autoblocking entirely, as there are no other use-cases
Goals: The global styling for blog pages is implemented
Ref page: https://news.sap.com/2023/12/being-human-in-the-age-of-ai/
This issue is opened to push design changes for Content hub master header as described in
#2
Issue: The template mapping is not being used for CSS. Specifically, as blog has been renamed to article, this should also load article.css, but it tries to load blog.css.
article card tags for post-MVP, see @urfuwo's comment in https://www.figma.com/file/oSetT4LbatRmXlcB2A7V8Z?node-id=522:37752&mode=design#686790394
Goal: Reapply the highlighting of the first paragraph (after a hero)
Goals: Identify and style the "related articles" section
Refs:
Goals:
Goals: Render the first paragraph in a larger font size
Details: Use the following design tokens for the first paragraph:
Refs:
Goals:
Non-goals of this ticket:
Update general styling to reflect designs in Figma.
Main changes:
Not covered in this ticket:
Design references:
Example page: https://main--hlx-test--urfuwo.hlx.page/blog/2023/12/being-human-in-the-age-of-ai
Dani Kim kindly updated theFigma to reflect what's required on the Article Tile
TODOs:
In the sap_glow > css_variables.css that Adobe received from SAP, two entries are missing information in two font families:
--udexTypographyBodyXLFontFamily: "72", "Arial", "Helvetica", "sans-serif";
should be:
--udexTypographyBodyXLFontFamily: "72 Brand", "Arial", "Helvetica", "sans-serif";
--udexTypographyBodyXXLFontFamily: "72", "Arial", "Helvetica", "sans-serif";
should be:
--udexTypographyBodyXXLFontFamily: "72 Brand", "Arial", "Helvetica", "sans-serif";
@ok : Please provide us a version of the sap_glow theme with these changes.
This is a followup for #87 for addressing the items considered out of scope in that ticket:
** stars/ratings,
** avatar/read length
** CTAs/buttons
Scenario to evaluate:
Use Case 1:
Use Case 2:
Technical tasks:
Goals: Implement the new footer design
NOTE: There are a few open pending questions (mismatches between our footer and the "standard" footer: https://adobe-dx-support.slack.com/archives/C06H8UNQ3RS/p1707236316695689
References:
Goal: Refine the footer that has been created in #3
Changes:
Desktop view:
Element on the left (logo, language and contact info)
-- Horizontal spacing between icon and language selection box is missing (16px?)
-- Too much space between telefon number and its subtext
-- Icons are too large / different
-- Gray background of the lang selection box is missing (note: page design and footer design disagree on this)
Go-to-top element
-- Must be resized (larger)
-- Is currently aligned with the other elements, but in desktop should not aligned differently
Mobile view
Element on the left (logo, language and contact info)
-- When opening/expanding a section, the horizontal line under the topic header is missing
Link lists
-- Topic header: font is too big, should be
--udexTypographyHeadingRegularXXXXSFontSize: 16px;
--udexTypographyHeadingRegularXXXXSFontFamily: "72 Brand", "Arial", "Helvetica", "sans-serif";
--udexTypographyHeadingRegularXXXXSFontWeight: 400;
--udexTypographyHeadingRegularXXXXSLineHeight: 18px;
-- Topic header should be more indented to the right
General padding of page elements:
Reference:
Designs:
Goals: Load the respective theme and initialize the web components accordingly
The theme is specified in metadata.xls in column 'SAP-Theme'
Example for theme 'sap_glow':
<script data-ui5-config type="application/json">{"theme": "sap_glow"}</script>Goals: Style the Blog CTA Banner in two variations:
Refs:
Goal: Implement the blog page footer
Note: there is one global footer for all hub sites and pages. there is no footer for blogs only.
Ref: https://news.sap.com/2023/12/being-human-in-the-age-of-ai/ > black footer
Implementing a master header with basic styling and navigation links
Context: Currently, foundational aspects of styling (here: fonts, viewport breakpoints) are defined both in SAP themes as well as project styles.css. We see duplication and blurring of responsibility.
Goals: Responsibilities are clarified, style definitions are provided by the designated artifact.
Examples:
Goal: Add global styling for all page types
Elements:
Example URLs:
On https://news.sap.com/ , all blog articles get redirected with /blog removed from path. For e.g https://news.sap.com/blog/2024/01/leylah-fernandez-new-sap-brand-ambassador/ -> https://news.sap.com/2024/01/leylah-fernandez-new-sap-brand-ambassador/
Goals: Create a dedicated HTTP 404 error page
Use case: When a user searches for a tag which has no results (example: https://main--hlx-test--urfuwo.hlx.page/tags/doesnotexist), the 404 page shall be returned
AC:
we made the decission that all heros are explicit.
the library https://main--hlx-test--urfuwo.hlx.page/tools/sidekick/library.html?plugin=blocks&path=/tools/sidekick/blocks/hero&index=0 still shows autoblog hero.
remove it if it is not supported.
M:
Goal: Refine the header that has been created in #75
Changes:
When you resize the window to something between 980px and 1030px, then the icons on the rights (search, language switch) are cut-off. That should be changed
When you resize the header to mobile view, the remaining elements are not vertically aligned (centered). Instead, the SAP logo appears to be too high / too close to the top, while the burger icon and the other icons appear to be too close to the bottom. I believe all should be vertically aligned
When you resize the header to mobile view, the site label ("News Center") should not disappear, but remain, see https://www.figma.com/file/OFEfvhyXJvYJ6MQZ30699m/v2.0-Brand-Digital-Design-System?type=design&node-id=2822-829&mode=design&t=yNwqt7UTEFznnIXP-0
The header-wrapper and the header (block) divs have different heights (64px vs 60px). I believe they should have the same height to make the next element (the hero) "bump up" against it and make the header entries look correctly vertically centered within the header element. Or else they look slightly "too high" (because they are centered in the header, but not centered in the header-wrapper)
General point of discussion:
References:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.