Home Page: https://main--delta--hlxsites.hlx.page/us/en/skymiles/overview
License: Apache License 2.0
Adobe Franklin impl of https://delta.com
npm inpm tsthelix-project-boilerplate template and add a mountpoint in the fstab.yamlnpm install -g @adobe/helix-clihlx up (opens your browser at http://localhost:3000){repo} directory in your favorite IDE and start coding :)
For instance:
We can likely use a specific icon :toggle: or a specific link href like #toggle and then auto-decorate whatever follows in the section below this.
When we run the A-B test with Delta, if they click on any of the features we haven't implemented for the test, we should send them to the existing page. This will require help from Delta for the CDN configuration.
Also if they are logged into their skymiles account they should not use the test.
Option a - For any of those clicks, we set a cookie saying not to use the test and force a page refresh.
Option b - We could add a hyperlink to these clicks to a hostname or add a query parameter which flags that the user should not use the test.
Either option, and also the login detection, need to be handled at the Delta CDN (I believe Akamai) layer and routed to their existing experience.
Some details extracted from https://adobe-dx-support.slack.com/archives/C04JGUPQAPM/p1678460300535519
<script type="text/javascript" src="//content.delta.com/content/dam/delta-applications/comments-complaints/tracker.js"></script>
<link rel="stylesheet" data-css-include="true" href="//content.delta.com/content/dam/delta-applications/ui-kit/23.2.40/variables.css" type="text/css"/>
<script type="text/javascript" src="//content.delta.com/content/dam/delta-applications/js/sitewide/v22.8.0/swrcq.min.js"></script>
<script type="text/javascript" src="//content.delta.com/content/dam/delta-applications/homepage/header/23.2.9/runtime.js" defer></script>
<script type="text/javascript" src="//content.delta.com/content/dam/delta-applications/homepage/header/23.2.9/polyfills.js"></script>
<script type="text/javascript" src="//content.delta.com/content/dam/delta-applications/homepage/header/23.2.9/main.js" defer></script>
<script>var isSLRedirect = true;</script>
<link rel="stylesheet" type="text/css" href="/content/dam/delta-applications/fresh-air-core/23.2.0/fonts/fresh-air-fonts.css">
<script type="text/javascript" src="//content.delta.com/content/dam/delta-applications/login-modal/23.2.43/element.js" defer></script>
<idp-login-modal-profile-selector></idp-login-modal-profile-selector>
<header-app></header-app>
<footer-app></footer-app>We want to have a generic origin/destination dialog that we can re-use for the various trip organization forms.
For instance: https://www.delta.com/us/en/skymiles/airline-credit-cards/international-credit-cards
We can probably re-use the logic from the hero block and generalize it to the whole content.
If any <p> contains only several <picture> elements, we can re-construct a responsive <picture> taking the respective media query breakpoints of each individual picture. The hero block already does it, it's just a matter of extracting the logic to scripts.js and triggering it on more than just the hero block
Delta uses various reference tokens for notes and legal disclaimers: *, **, ***, † and ‡ (possibly others). We need to wrap those in <sup></sup> elements so they properly show as superscript.
Covers styling two column blocks as below:
This covers the implementation of the search button and dialog in the header.
We can ignore the search field in this issue. This will be handled separately
Some reference pages:
Delta uses footer/reference/legal notes in many places. They are sometimes plain text, but also sometimes more complex elements including screenreader-only text or links.
The proposal is to have them as individual italicized elements in the document and then annotate them in the autoblocking with a dedicated class or wrapping them in a <small> element
List pages where we need to fix the content structure:
Skymiles has several promo pages with log in dialogs and specific information.
/us/en/skymiles/promotions/accelerated-medallion-status-banking
/us/en/skymiles/promotions/accelerated-medallion-status-consulting
/us/en/skymiles/promotions/accelerated-medallion-status-corporate
/us/en/skymiles/promotions/accelerated-medallion-status-fly-tech
/us/en/skymiles/promotions/florida-flyget-50
/us/en/skymiles/promotions/florida-flyget-5k
/us/en/skymiles/promotions/hertz-partnership
/us/en/skymiles/promotions/medallion-status-2023
These pages show different information based on your log in status, if you have enrolled in the promotion, and based on your delta status.
This focuses on implementing the generic top-level swaps in the header, but not the individual implementation of each overlay.
Most of the sub-pages in the SkyMiles section have a TOC block:
The ToC just points to the main headings in the page it seems.
For instance:
Some of the SkyMiles pages use actual tables for layout purposes (product comparison).
Some example pages:
Specialized header, no footer:
/us/en/skymiles/promotions/florida-flyget-50
/us/en/skymiles/promotions/florida-flyget-5k
List extracted from the sitemap:
https://www.delta.com/content/www/en_US/skymiles/elevate-your-status.html
https://www.delta.com/content/www/en_US/skymiles/how-to-use-miles/skymiles-experiences.html
https://www.delta.com/content/www/en_US/skymiles/medallion-program/reclaim-my-status.html
https://www.delta.com/us/en/skymiles/airline-credit-cards/american-express-business-cards
https://www.delta.com/us/en/skymiles/airline-credit-cards/american-express-personal-cards
https://www.delta.com/us/en/skymiles/airline-credit-cards/overview
https://www.delta.com/us/en/skymiles/airline-credit-cards/international-credit-cards
https://www.delta.com/us/en/skymiles/airline-credit-cards/pay-with-miles
https://www.delta.com/us/en/skymiles/airline-credit-cards/pay-with-miles-international
https://www.delta.com/us/en/skymiles/airline-credit-cards/takeoff-15
https://www.delta.com/us/en/skymiles/how-to-earn-miles/skymiles-partners-offers
https://www.delta.com/us/en/skymiles/how-to-earn-miles/airline-partners
https://www.delta.com/us/en/skymiles/how-to-earn-miles/convert-partner-points
https://www.delta.com/us/en/skymiles/how-to-earn-miles/earn-with-delta
https://www.delta.com/us/en/skymiles/how-to-earn-miles/exception-fares
https://www.delta.com/us/en/skymiles/how-to-earn-miles/overview
https://www.delta.com/us/en/skymiles/how-to-earn-miles/vacations-and-cruises
https://www.delta.com/us/en/skymiles/how-to-use-miles/buy-gift-transfer-donate-miles
https://www.delta.com/us/en/skymiles/how-to-use-miles/overview
https://www.delta.com/us/en/skymiles/how-to-use-miles/shop-with-miles
https://www.delta.com/us/en/skymiles/how-to-use-miles/travel-with-miles
https://www.delta.com/us/en/skymiles/how-to-use-miles/upgrades-and-more
https://www.delta.com/us/en/skymiles/overview
https://www.delta.com/us/en/skymiles/medallion-program/diamond-medallion-status
https://www.delta.com/us/en/skymiles/medallion-program/elite-benefits-partners
https://www.delta.com/us/en/skymiles/medallion-program/gold-medallion-status
https://www.delta.com/us/en/skymiles/medallion-program/how-to-qualify
https://www.delta.com/us/en/skymiles/medallion-program/overview
https://www.delta.com/us/en/skymiles/medallion-program/international-partner-skyteam-benefits
https://www.delta.com/us/en/skymiles/medallion-program/medallion-benefits
https://www.delta.com/us/en/skymiles/medallion-program/medallion-upgrades
https://www.delta.com/us/en/skymiles/medallion-program/million-miler
https://www.delta.com/us/en/skymiles/medallion-program/platinum-medallion-status
https://www.delta.com/us/en/skymiles/medallion-program/silver-medallion-status
https://www.delta.com/us/en/skymiles/medallion-program/status-match-challenge
https://www.delta.com/us/en/skymiles/medallion-program/2023-skymiles-program-updates
https://www.delta.com/us/en/skymiles/program-resources/get-the-most
https://www.delta.com/us/en/skymiles/program-resources/overview
https://www.delta.com/us/en/skymiles/program-resources/news-and-updates
https://www.delta.com/us/en/skymiles/program-resources/program-rules
https://www.delta.com/us/en/skymiles/program-resources/ways-to-upgrade
Importer docs: https://www.hlx.live/developer/franklin-importer
List pages where we need to fix the content structure:
List pages where we need to fix the content structure:
Include the custom fonts from delta.com in the lazy-styles.css
You can get those from https://www.delta.com/content/dam/delta-applications/fresh-air-core/22.7.0/fonts/fresh-air-fonts.css
This focuses on the implementation of the hero banner of the page that randomly shows one of the versions in the block.
Pictures and figures aren't styled consistently at the moment, which is causing layout differences, especially noticeable in the cards block.
See discussion in #52 (comment)
If you visit
https://www.delta.com/us/en/skymiles/skymiles-select
The page looks like a standard skymiles information page, but it has no header or footer. When you select other skymiles pages from the skymiles drop down, you are directed to them without a header or footer.
We should verify if this is intended behavior or something incidental before trying to replicate it.
List pages where we need to fix the content structure:
List pages where we need to fix the content structure:
Sharepoint doesn't let you add links to images, so what we usually do is have an image immediately followed by a link and we decorate those into clickable images in the auto-blocking logic of scripts.js.
This focuses on implementing the 3 navigation dropdown menus "Travel Info", "SkyMiles" and "Need Help?".
We need a variant of the blades with less emphasis (no background) and alternating rows.
For instance:
We need a variant of the columns block with slightly more emphasis.
For instance:
This focuses on implementing the search modal in the footer.
List pages where we need to fix the content structure:
React
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
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
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.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
