hlxsites / moleculardevices Goto Github PK
View Code? Open in Web Editor NEWFranklin Site for https://www.moleculardevices.com/
License: Apache License 2.0
Franklin Site for https://www.moleculardevices.com/
License: Apache License 2.0
Examples:
Docs:
current: https://adobe.sharepoint.com/:w:/r/sites/HelixProjects/_layouts/15/Doc.aspx?sourcedoc=%7B30CE9DAE-D436-4272-85F8-52E728946BA5%7D&file=events.docx&action=default&mobileredirect=true
archive: https://adobe.sharepoint.com/:w:/r/sites/HelixProjects/_layouts/15/Doc.aspx?sourcedoc=%7BFC2D76E6-EF85-4D3C-9A4B-8990BD3139DA%7D&file=archived-events.docx&action=default&mobileredirect=true
Implement accordion for FAQ like:
Example:
For reference see: https://www.moleculardevices.com/contact
Implement heading style, based on "blog overview" theme for the different headings on https://www.moleculardevices.com/lab-notes
Potential references https://github.com/hlxsites/wknd/blob/main/blocks/carousel/carousel.css#L5-L12 from franklin-wknd
In #5 a static product carousel was implemented, based on doc static authoring.
This is blocked until we have product pages and an index.
The goal of this issue is to make the product carousel dynamic.
Tasks:
Example:
Page: https://www.moleculardevices.com/lab-notes
Icons/Background are SVG file, get them from original site.
Implement "Recent Blogs Carousel" block at the end of the blog pages.
For the authors we should have some kitchen sink aka. block collection document to showcase all the content centric content elements and blocks.
See https://github.com/adobe/franklin-sidekick-library
Sample Sidekick Library implementation https://main--rosalind-boilerplate--dylandepass.hlx.live/tools/sidekick/library.html?plugin=blocks
Please provide integration details for Google Tag Manager.
The vidyard Player seams to use a dynamic JS script tag with the video id encoded. We must transfrom the video direct link into this script.
Implement call to action buttons which open Modal IFrames with Forms (so far just hubspot known).
Related to #126.
Data Source: https://main--moleculardevices--hlxsites.hlx.page/query-index.json?sheet=resource-news
Potential references https://github.com/hlxsites/wknd/blob/main/blocks/carousel/carousel.css#L5-L12 from franklin-wknd
Sample from homepage:
This card is used 4 times on https://www.moleculardevices.com/lab-notes
The block config stores the link to the block posts. If the link has a text != the link itself this text is used for the C2A button. If now text the C2A button defaults to "Read More".
Content of related resources is loaded dynamically from the index, filtered by the product, application or service the block is used on.
Example:
Reference: https://www.moleculardevices.com/contact
Tables are used on various publications, application notes etc.
Examples:
There is already a reference table block available in the block collection: https://github.com/adobe/helix-block-collection/tree/main/blocks/table
The newsroom page collects multiple data elements on an overview page. This requires news, "in the news" & events being indexed, see #10 & #12.
Blocks needed:
Implement the following column layout options:
Columns (layout 33 66)
- sample: https://main--moleculardevices--hlxsites.hlx.page/lab-notes/cellular-imaging-systems/3d-organoids-and-automation-of-complex-cell-assaysColumns (layout 66 33)
- sample: https://main--moleculardevices--hlxsites.hlx.page/lab-notes/general/lab-automation-inside-access-from-our-subject-matter-expertColumns (layout 25 75)
- sample: https://main--moleculardevices--hlxsites.hlx.page/lab-notes/cellular-imaging-systems/case-study-assay-ready-patient-derived-organoids-and-high-throughput-3d-imagingColumns (layout 75 25)
Swap
option for mobile used on some blog pagesManually take over static footer links and implement footer block. Use dummy for dynamic footer elements (press releases, events), these will be implement later via #24
For reference see: https://www.moleculardevices.com/contact
The blog pages have a unique style (larger image, display date & author) which must be implemented based on the "blog" template.
Hero (Blog)
- this is already implemented for the imported blog postsSamples:
Implement call to action buttons in the form of links.
These CTA Buttons take the user to a new page, with the correct query parameters (e.g. Request Type, Product ID, Category ID) and usually a HubSpot form.
The link query parameter information should be taken from the page metadata, so authors don't have to manually input each link.
Examples:
Both page types share the same layout and styles
Sample Press Release: https://www.moleculardevices.com/newsroom/news/advanced-solutions-life-sciences-collaborate-to-develop-3d-biology-automation-technologies-for-drug-discovery
Sample "in the news": https://www.moleculardevices.com/newsroom/in-the-news/millions-in-fda-fines-and-thousands-of-warning-letters-how-gxp-compliance-software-can-help
This "standard" cards block is used on many overview pages.
Top page filters are via a separate issue #15
Samples and variants:
landing-page-order
see belowSpecial handling for applications landing page
Special filtering & sorting for product landing pages needed:
landing-page-order
set to a numberSpecial filtering for product sub category pages
Examples:
Tasks:
Implement custom styles for quotes used on blog posts. Quotes have an text and optional an author.
Sample with text only: https://www.moleculardevices.com/lab-notes/clone-screening/challenges-of-cell-line-development-and-emerging-technologies-to-regulate-monoclonality
Sample with text and author: https://www.moleculardevices.com/lab-notes/clone-screening/how-to-develop-monoclonal-cell-lines-for-stem-cell-engineering
For reference, please use: https://www.moleculardevices.com/leadership
See Press Releases: https://www.moleculardevices.com/newsroom/news
See in the news: https://www.moleculardevices.com/newsroom/in-the-news
Implement content import for
to be extended
Docs to test with:
Samples:
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.