Adding a new products page to the super-about page displaying different experiments and products offered by Sefaria, as well an opportunity for users to explore projects 'powered-by-Sefaria'.
Code changes:
In sites/sefaria/urls.py added the products url
In static/css/s2.css all of the CSS needed for the elements on the page, as well as integrations into the SuperAbout page
Importing and exporting the <ProductsPage /> component from static/js/ReaderApp.jsx
In static/js/StaticPages.jsx adding the <ProductsPage /> component, which is comprised of a <Product /> and a <DevBox /> component. This page queries Strapi for the product data using a GraphQL query. If the user is an admin, it queries for draft content as well. This data is then transformed into a more usable structure, and is mapped to the <Product /> components, creating a list. This list is split at position 2, and we render the first portion of the list of <Product /> components, then the <DevBox/> and finally the remaining list of <Product /> components.
Each <Product /> is comprised of sub components for each portion of the product, the <ProductTitle />, <ProductCTA />, <ProductDesc />.
In templates/_sidebar.html code was added to integrate the products page into the new sidebar
In templates/static/products.html, we created the template for the products page.
Notes:
All of the links are still "dummy" data for now. This needs to be changed (mostly in Strapi, the <DevBox /> component once we're ready to display it).
The <DevBox /> component needs to be commented out once it passes design review, since we are not ready to display it yet.
Description
Adding a new products page to the super-about page displaying different experiments and products offered by Sefaria, as well an opportunity for users to explore projects 'powered-by-Sefaria'.
Code changes:
sites/sefaria/urls.pyadded theproductsurlstatic/css/s2.cssall of the CSS needed for the elements on the page, as well as integrations into the SuperAbout page<ProductsPage />component fromstatic/js/ReaderApp.jsxstatic/js/StaticPages.jsxadding the<ProductsPage />component, which is comprised of a<Product />and a<DevBox />component. This page queries Strapi for the product data using a GraphQL query. If the user is an admin, it queries for draft content as well. This data is then transformed into a more usable structure, and is mapped to the<Product />components, creating a list. This list is split at position 2, and we render the first portion of the list of<Product />components, then the<DevBox/>and finally the remaining list of<Product />components.<Product />is comprised of sub components for each portion of the product, the<ProductTitle />,<ProductCTA />,<ProductDesc />.templates/_sidebar.htmlcode was added to integrate the products page into the new sidebartemplates/static/products.html, we created the template for the products page.Notes:
<DevBox />component once we're ready to display it).<DevBox />component needs to be commented out once it passes design review, since we are not ready to display it yet.