Source

templates/generic-story/generic-story.tsx

  1. import React from "react";
  2. import { HeaderCard, Navbar, RelatedStories, WebEngage } from "../../molecules";
  3. import {
  4. Layout,
  5. Spacer,
  6. IncompatibleBanner,
  7. Footer,
  8. GoogleTagManager,
  9. GoogleAnalytics,
  10. QuintypeAnalytics,
  11. ComScore,
  12. ChartBeat,
  13. InfiniteScroll,
  14. Subscription,
  15. Fonts
  16. } from "../../atoms";
  17. import styled from "styled-components";
  18. import { CommonTemplateTypes } from "../common-template-types";
  19. import get from "lodash.get";
  20. import { TopAd, BottomAd } from "../../molecules/ads";
  21. import { StoryPageSlots } from "../../molecules/slots";
  22. import { StoryCards } from "../../molecules/story-cards/story-card";
  23. import { infiniteScrollExists } from "../../helpers";
  24. const { TopSlot, BottomSlot } = StoryPageSlots;
  25. const StoryContainer = styled.div.attrs({
  26. id: "qt-amp-story-container",
  27. className: "qt-amp-story-container-class"
  28. })`
  29. max-width: 600px;
  30. margin: 0 auto;
  31. `;
  32. const Wrapper = styled.div`
  33. padding: 0 ${(props) => props.theme.spacing.s};
  34. `;
  35. /**
  36. * The GenericStory template is the default story template
  37. *
  38. * Slots: top-slot, bottom-slot
  39. *
  40. * @category Default Templates
  41. * @component
  42. */
  43. export const GenericStory = ({ story, config }: CommonTemplateTypes) => {
  44. const footerText = get(config, ["publisherConfig", "publisher-settings", "copyright"], null);
  45. const infiniteScrollInlineConfig = get(
  46. config,
  47. ["opts", "featureConfig", "infiniteScroll", "infiniteScrollInlineConfig"],
  48. null
  49. );
  50. let lastComponent = <Footer text={footerText} />;
  51. let navbarComponent = <Navbar />;
  52. if (infiniteScrollExists(config)) {
  53. lastComponent = (
  54. <InfiniteScroll inlineConfig={infiniteScrollInlineConfig}>
  55. <div next-page-hide="true" footer="true">
  56. <Footer text={footerText} />
  57. </div>
  58. </InfiniteScroll>
  59. );
  60. navbarComponent = (
  61. <div next-page-hide="true">
  62. <Navbar />
  63. </div>
  64. );
  65. }
  66. const templateName = "default";
  67. return (
  68. <Layout story={story} config={config}>
  69. <Subscription />
  70. <Fonts />
  71. {navbarComponent}
  72. <IncompatibleBanner />
  73. <GoogleTagManager />
  74. <Wrapper>
  75. <TopAd templateName={templateName} />
  76. <TopSlot />
  77. <Spacer token="s" />
  78. <StoryContainer>
  79. <HeaderCard storyType="text" config={config} />
  80. <WebEngage />
  81. <Spacer token="m" />
  82. <StoryCards />
  83. <RelatedStories />
  84. </StoryContainer>
  85. <BottomSlot />
  86. <BottomAd templateName={templateName} />
  87. </Wrapper>
  88. <GoogleAnalytics />
  89. <QuintypeAnalytics />
  90. <ComScore />
  91. <ChartBeat />
  92. {lastComponent}
  93. </Layout>
  94. );
  95. };