Merge pull request #44 from HubSpot/add-PostListing-V1

Add PostListingV1
HubSpot · May 3, 2024 · b9539c8 · b9539c8
2 parents 1dac063 + 3958ab2
commit b9539c8
Show file tree

Hide file tree

Showing 10 changed files with 749 additions and 0 deletions.
diff --git a/default-react-modules/src/components/modules/PostListing-V1/StyledComponentRegistry.jsx b/default-react-modules/src/components/modules/PostListing-V1/StyledComponentRegistry.jsx
@@ -0,0 +1,32 @@
+import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
+import { useInlineHeadAsset } from '@hubspot/cms-components';
+
+export default function StyledComponentsRegistry({ children }) {
+  // On the client, styled-components creates its own stylesheet. We only want
+  // to create this sheet on the server
+  const styledComponentsStyleSheet = import.meta.env.SSR
+    ? new ServerStyleSheet()
+    : null;
+
+  useInlineHeadAsset(() => {
+    if (styledComponentsStyleSheet === null) {
+      return;
+    }
+
+    // Collect styles generated on the server pass and return them to go in the
+    // <head>
+    const styles = styledComponentsStyleSheet.getStyleElement();
+    styledComponentsStyleSheet.seal();
+    return <>{styles}</>;
+  });
+
+  if (styledComponentsStyleSheet === null) {
+    return <>{children}</>;
+  }
+
+  return (
+    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
+      {children}
+    </StyleSheetManager>
+  );
+}
diff --git a/default-react-modules/src/components/modules/PostListing-V1/assets/blog.svg b/default-react-modules/src/components/modules/PostListing-V1/assets/blog.svg
diff --git a/default-react-modules/src/components/modules/PostListing-V1/assets/mockBlogPosts.js b/default-react-modules/src/components/modules/PostListing-V1/assets/mockBlogPosts.js
@@ -0,0 +1,119 @@
+export const mockBlogPosts = [
+  {
+    id: 1,
+    name: 'How to break your ankle and still smile',
+    absoluteUrl: 'https://test-domain/blog/01-01-2023/broken-ankles',
+    featuredImage:
+      'https://www.mayoclinic.org/-/media/kcms/gbs/patient-consumer/images/2013/08/26/11/10/ds00951_im03497_r7_footanklethu_jpg.jpg',
+    featuredImageAltText: 'Bone structure of a foot',
+    blogAuthor: {
+      avatar:
+        'https://cdn3.iconfinder.com/data/icons/avatars-9/145/Avatar_Cat-512.png',
+      name: 'Brandon Van Dyck',
+      displayName: 'Brandon Van Dyck',
+      slug: 'brandonvandyck',
+    },
+    tagList: [
+      {
+        name: 'Feet',
+        slug: 'feet',
+      },
+    ],
+    parentBlog: {},
+    publishDate: 1756388800000,
+    publishDateLocalized: { date: 'Jun 30, 2022 12:00:00 AM' },
+    postListContent:
+      "<h3>Ankles may break, but spirits don't have to</h3> <p>Find out why a broken bone does not mean frowns all around.</p>",
+  },
+  {
+    id: 2,
+    name: 'E-Bikes: A Guide to Building and Riding',
+    absoluteUrl: 'https://test-domain/blog/01-02-2023/ebikes',
+    featuredImage:
+      'https://pedegoelectricbikes.com/wp-content/uploads/2020/12/pedego-ridge-rider-classic-600x494.jpg',
+    featuredImageAltText: 'Electric bike',
+    blogAuthor: {
+      avatar:
+        'https://cdn3.iconfinder.com/data/icons/avatars-9/145/Avatar_Cat-512.png',
+      name: 'Joey Blake',
+      displayName: 'Joey Blake',
+      slug: 'jblake',
+    },
+    tagList: [
+      {
+        name: 'Bikes',
+        slug: 'bikes',
+      },
+      {
+        name: 'Electricity',
+        slug: 'electricity',
+      },
+    ],
+    parentBlog: {},
+    publishDate: 1756388800000,
+    publishDateLocalized: { date: 'Jun 30, 2022 12:00:00 AM' },
+    postListContent:
+      '<h3>Bikes were traditionally powered by calories -- no more!</h3> <p>Experience the joy of electricity powered movement.</p>',
+  },
+  {
+    id: 3,
+    name: 'Mesh Wifi: Boost your home wifi experience',
+    absoluteUrl: 'https://test-domain/blog/01-03-2023/wifi',
+    featuredImage:
+      'https://m.media-amazon.com/images/I/41bMo8AYiML._AC_SY1000_.jpg',
+    featuredImageAltText: 'Home with mesh wifi ',
+    blog_avatar: 'https://cdn-icons-png.flaticon.com/512/3093/3093444.png',
+    blogAuthor: {
+      avatar:
+        'https://cdn3.iconfinder.com/data/icons/avatars-9/145/Avatar_Cat-512.png',
+      name: 'Wifi Willy',
+      displayName: 'Wilfred Wilhelm Wifi',
+      slug: 'wwifi',
+    },
+    tagList: [
+      {
+        name: 'Wifi',
+        slug: 'wifi',
+      },
+      {
+        name: 'Mesh',
+        slug: 'mesh',
+      },
+    ],
+    parentBlog: {},
+    publishDate: 1756388800000,
+    publishDateLocalized: { date: 'Jun 30, 2022 12:00:00 AM' },
+    postListContent:
+      '<h3>【Eliminate WiFi Dead Spots】Cover more than 6000 square feet from garage to backyard, seamless single WiFi name for whole house.</h3> <p>Easy to expand the coverage by install 3 pack mesh system, simply setup mesh to eliminate WiFi dead spots. Support up to 9 dots to build WiFi system for any home size</p>',
+  },
+  {
+    id: 4,
+    name: 'Being a Chef: To live amongst flame',
+    absoluteUrl: 'https://test-domain/blog/01-04-2023/being-a-chef',
+    featuredImage:
+      'https://www.finedininglovers.com/sites/g/files/xknfdk626/files/2021-07/chef%20%281%29.jpg',
+    featuredImageAltText: 'Chef using alcohol and fire to cook a dish',
+    blog_avatar: 'https://cdn-icons-png.flaticon.com/512/3093/3093444.png',
+    blogAuthor: {
+      avatar: '',
+      name: 'Chef Knife',
+      displayName: 'Chefred Knifer',
+      slug: 'chefredknifer',
+    },
+    tagList: [
+      {
+        name: 'Chef',
+        slug: 'chef',
+      },
+      {
+        name: 'Fire',
+        slug: 'fire',
+      },
+    ],
+    parentBlog: {},
+    publishDate: 1756388800000,
+    publishDateLocalized: { date: 'Jun 30, 2022 12:00:00 AM' },
+    postListContent:
+      "<h3>Being a Chef</h3> <p>As much as restaurants are driven by chefs' desire to feed and entertain, and to express themselves, to produce the best possible food, delivered with impeccable service, they are, when it comes down to it, businesses and every chef that wants to be successful must get a handle on that side of things. It is perhaps the most important factor for longevity.</p>",
+  },
+];
diff --git a/default-react-modules/src/components/modules/PostListing-V1/fields.tsx b/default-react-modules/src/components/modules/PostListing-V1/fields.tsx
@@ -0,0 +1,132 @@
+import {
+  FieldGroup,
+  ModuleFields,
+  TextField,
+  FontField,
+  SpacingField,
+  BlogField,
+  ChoiceField,
+  NumberField,
+} from '@hubspot/cms-components/fields';
+
+export const fields = (
+  <ModuleFields>
+    <BlogField
+      label="Select blog to display"
+      name="selectBlog"
+      propertyAliasesPaths={{ selectBlog: ['select_blog'] }}
+    />
+    <ChoiceField
+      label="Sort posts by"
+      name="listingType"
+      display="select"
+      placeholder="Search"
+      choices={[
+        ['recent', 'Most recent'],
+        ['popular_all_time', 'Most popular - all time'],
+        ['popular_past_year', 'Most popular - past year'],
+        ['popular_past_six_months', 'Most popular - past six months'],
+        ['popular_past_month', 'Most popular - past month'],
+      ]}
+      propertyAliasesPaths={{ listingType: ['listing_type'] }}
+      default="recent"
+    />
+    <ChoiceField
+      label="Choose what shows in your feed"
+      name="displayForEachListItem"
+      display="checkbox"
+      multiple={true}
+      reorderingEnabled={false}
+      choices={[
+        ['image', 'Image'],
+        ['title', 'Title'],
+        ['authorName', 'Author name'],
+        ['publishDate', 'Publish date'],
+      ]}
+      default={['title', 'authorName', 'publishDate']}
+    />
+    <NumberField
+      label="Maximum blog posts to list"
+      name="maxLinks"
+      min={1}
+      max={20}
+      step={1}
+      propertyAliasesPaths={{ maxLinks: ['max_links'] }}
+      default={5}
+    />
+    <TextField
+      label="Posts heading"
+      name="postsHeading"
+      default="Featured posts"
+      propertyAliasesPaths={{ heading: ['list_title'] }}
+    />
+    <ChoiceField
+      name="headingLevel"
+      label="Heading level"
+      display="select"
+      choices={[
+        ['h1', 'H1'],
+        ['h2', 'H2'],
+        ['h3', 'H3'],
+        ['h4', 'H4'],
+        ['h5', 'H5'],
+        ['h6', 'H6'],
+      ]}
+      default="h2"
+    />
+    <FieldGroup name="groupStyle" label="Styles" tab="STYLE">
+      <FieldGroup name="groupLayout" label="Layout">
+        <ChoiceField
+          name="style"
+          label="Style"
+          display="select"
+          choices={[
+            ['tiles', 'Tiles'],
+            ['minimal', 'Minimal'],
+          ]}
+          default="minimal"
+        />
+      </FieldGroup>
+      <FieldGroup label="Heading" name="groupHeading">
+        <FontField label="Font" name="font" />
+      </FieldGroup>
+      <FieldGroup label="Title" name="groupTitle">
+        <FontField
+          label="Font"
+          name="font"
+          default={{
+            font: '',
+            styles: { 'font-weight': 'bold' },
+          }}
+        />
+        <SpacingField
+          label="Spacing"
+          name="spacing"
+          visibility={{ hidden_subfields: { padding: 'true' } }}
+          default={{
+            margin: {
+              bottom: {
+                value: 20,
+                units: 'px',
+              },
+            },
+          }}
+        />
+        <FontField
+          label="Hover font"
+          name="hoverFont"
+          default={{
+            font: '',
+            styles: { 'font-weight': 'bold' },
+          }}
+        />
+      </FieldGroup>
+      <FieldGroup label="Author" name="groupAuthor">
+        <FontField label="Font" name="font" />
+      </FieldGroup>
+      <FieldGroup label="Publish date" name="groupPublishDate">
+        <FontField label="Font" name="font" />
+      </FieldGroup>
+    </FieldGroup>
+  </ModuleFields>
+);
diff --git a/default-react-modules/src/components/modules/PostListing-V1/hubl_data.hubl.html b/default-react-modules/src/components/modules/PostListing-V1/hubl_data.hubl.html
@@ -0,0 +1,7 @@
+{% if module.selectBlog is number %}
+  {% set selectBlog = module.selectBlog %}
+{% else %}
+  {% set selectBlog = 'default' %}
+{% endif %}
+
+{% set hublData = sign_postlisting_url(selectBlog, module.listingType, module.maxLinks) %}