AEM Franklin Solution for https://www.zemax.com/
Home Page: https://main--zemax--hlxsites.hlx.page/
License: Apache License 2.0
Zemax.com on AEM Franklin
npm inpm testhelix-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 :)
Available on landing pages
@shehjadkhan-ansys explained the login flow on a call today. At a high level
Import (~55 product pages) based on https://www.zemax.com/sitemap_products_1.xml?from=6263099130033&to=7252744863921
[Home Page] Card Block Variants: zemax training
Implement variants of Hero Block
Sub task of issue #10:
Harness the power of Zemax optics software
Create import script for blog pages (~450 based on https://www.zemax.com/sitemap_blogs_1.xml )
into word doc with the following metadata
And additional meta data that is shown here
Configure and define the global variables for all break points
See these pages as a reference and add other styling wherever needed
Build Footer
[Blogs] - Add page metadata for authorname. authorimage, authortitle, authorOrganization to all pages under /blogs/news
See : https://www.zemax.com/blogs/news/cto-industry-insights-august-2021
Check for sample : https://main--zemax--hlxsites.hlx.page/blogs/news/cto-industry-insights-august-2021
TODO - Confirm whether the item presented in the Teaser is curated or appears by tagging a "Blog" or "Page" with some metadata before starting on the task
https://www.zemax.net.cn/sitemap.xml has translated pages for Chinese website
There are multiple card variants
Note - Please feel free to create sub items of this issue and Update Block Library
There are multiple variants of Card Blocks on the home page
the variant factors are
The following product landing pages has different color themes for Icons, Tab underlines, Accordion Icons
Develop metadata driven styles to apply those color themes for the product landing pages
See below for comparison ( Right - Franklin , Left - Live Site )
Header (@kmurugulla )
Teaser (@agangam )
Hero (@kunwarsaluja )
Trusted By Section (@kmurugulla )
Design for Manufacturability (@kmurugulla )
Zemax Software Section (@FrancoisZhang )
Customer Success Stories (@FrancoisZhang )
Training Section (@FrancoisZhang )
Subscribe to Blog Section (@kunwarsaluja )
Footer (@kunwarsaluja )
Style Optical Design Section with Cloumns ( icons ) with section metadata to add orange color scheme for icons and links
https://www.zemax.jp/sitemap.xml has translated content for Japanese language
[Landing Page] Carousel
A reference: https://main--merative2--hlxsites.hlx.page/block-library/blocks/carousel
Cards block variant with video modal opening up youtube video
See https://www.zemax.com/blogs/videos
[Blogs] - authorbio block for all pages under /blogs/news
See https://www.zemax.com/blogs/news/cto-industry-insights-august-2021
Data to be fetched from page metadata when #69 is complete
Import pages based on https://www.zemax.com/sitemap_pages_1.xml
[Blogs] - Social navtool(sticky) for all pages under /blogs/news
See https://www.zemax.com/blogs/news/angus-macleod-in-memorium
All Blogs news can be identified as below (page metadata applied to all pages under /blog/news/ ):
Mobile
Tablet/Desktop
[Blogs] - Add Page Metadata 'CreatedDate' to all pages under /blogs/news
NOTE: We need to check if this is should be termed as CreatedDate or PublishedDate or. something else
Check for sample : https://main--zemax--hlxsites.hlx.page/blogs/news/cto-industry-insights-august-2021
[Homepage] Responsive carousel for zemax training, which isn't carousel in wide screen, but become carousel in smaller screen, which may show one or two items
Develop Accordion Block
[Home Page] Card Block Variants: events and news
Zemax.com currently have website on Shopify and Cdn used is internal Shopify Cdn cloudflare, but Akamai is used for for Ansys.Com so this new implementation will move on Akamai.
This block has been used in multiple places. Each tab should have its own link and must be able to be navigable
example -
https://www.zemax.com/pages/applications#imaging-optics
https://www.zemax.com/pages/applications#lighting-and-illumination
See few examples :
Note : Using importer, Extract marketo form id and place it in the marketo block. Review block library for marketo form usage
Fixed one of them for reference : https://main--zemax--hlxsites.hlx.page/blogs/success-stories/advanced-tolerancing-techniques-for-endoscope-optical-design
^^ Needs some layout css changes(to bring h4 to top of the Marketo form) to make it similar to live pages
Import or create pages based on https://www.zemax.com/sitemap_collections_1.xml
[Home Page] Card Block Variants: Customer Success Story
Build Navigation menu
Leaving the current sitemap.xml for reference
-https://www.zemax.com/sitemap.xml
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<!-- This is the parent sitemap linking to additional sitemaps for products, collections and pages as shown below. The sitemap can not be edited manually, but is kept up to date in real time. -->
<sitemap>
<loc>https://www.zemax.com/sitemap_products_1.xml?from=6263099130033&to=7252744863921</loc>
</sitemap>
<sitemap>
<loc>https://www.zemax.com/sitemap_pages_1.xml</loc>
</sitemap>
<sitemap>
<loc>https://www.zemax.com/sitemap_collections_1.xml</loc>
</sitemap>
<sitemap>
<loc>https://www.zemax.com/sitemap_blogs_1.xml</loc>
</sitemap>
</sitemapindex>
[Variant 1]
See https://www.zemax.com/blogs/eguides
In the current system the authors are tagging the blogs with specific values. Those tags generate link to the blog category landing page
More details - https://adobe-dx-support.slack.com/archives/C04R290PLLC/p1680009633108029
The carousel with card is available on product landing pages
Note - open zemax.com in incognito window
Integrate with Shopping cart functionality
[Blogs] - Add Page Metadata 'Category' to all pages under /blogs/news
This category metadata needs to be indexed and would eventually open up tagged pages when clicked to find all categorized pages (example: https://www.zemax.com/blogs/news/tagged/industry-trends)
See https://www.zemax.com/blogs/news/angus-macleod-in-memorium
Check for sample : https://main--zemax--hlxsites.hlx.page/blogs/news/cto-industry-insights-august-2021
We might not need the tagger #33 as there are only ~60 Blog News pages and have few categories as below but all depends on what they do with these tagged pages in the current platform (We need to check this with Ansys)
Categories
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.