From b6dd129f7689d788282fb188687ba068315a06b0 Mon Sep 17 00:00:00 2001 From: devowhippit Date: Mon, 26 Mar 2018 10:40:34 -0400 Subject: [PATCH] Remove Tailwind reset, separate feed execution script --- bundle/styles/site.concat.scss | 27 ++++++++++++++++++++++----- config/rollup.js | 2 +- dist/feed.html | 12 +++++++++++- dist/styles/site.min.css | 4 ++-- src/elements/base/_base.scss | 21 +++++++++++++++++++++ src/elements/code/_code.scss | 6 ++++++ src/objects/feed/feed.slm | 12 +++++++++++- src/scss/_imports.scss | 12 ++++++++---- src/views/feed.slm | 10 +--------- 9 files changed, 83 insertions(+), 23 deletions(-) create mode 100644 src/elements/base/_base.scss diff --git a/bundle/styles/site.concat.scss b/bundle/styles/site.concat.scss index 519253ae..9e770de6 100644 --- a/bundle/styles/site.concat.scss +++ b/bundle/styles/site.concat.scss @@ -1,7 +1,3 @@ -/************ - * Normalize - ************/ -@tailwind preflight; /************* * Components *************/ @@ -60,9 +56,30 @@ /********** * Elements ***********/ +/** + * Base + */ +html { + -webkit-box-sizing: border-box; + box-sizing: border-box; + font-family: sans-serif; } + +*, :after, :before { + -webkit-box-sizing: inherit; + box-sizing: inherit; } + +[class*='border'] { + border-style: solid; + border-width: 0; } + /** * Code */ +pre { + font-family: monospace, monospace; + font-size: 1em; + margin: 0; } + code, pre { display: inline-block; } @@ -157,4 +174,4 @@ p code { ************/ @tailwind utilities; -/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAic2l0ZS5jb25jYXQuc2NzcyIsCgkic291cmNlcyI6IFsKCQkic3JjL3Njc3Mvc2l0ZS1kZWZhdWx0LnNjc3MiLAoJCSJzcmMvc2Nzcy9faW1wb3J0cy5zY3NzIiwKCQkic3JjL29iamVjdHMvZmVlZC9fZmVlZC5zY3NzIiwKCQkic3JjL2NvbmZpZy9fdmFyaWFibGVzLnNjc3MiLAoJCSJzcmMvZWxlbWVudHMvY29kZS9fY29kZS5zY3NzIiwKCQkic3JjL2VsZW1lbnRzL2xpbmtzL19saW5rcy5zY3NzIiwKCQkic3JjL2VsZW1lbnRzL2xheW91dHMvbGF5b3V0cy5zY3NzIiwKCQkic3JjL2VsZW1lbnRzL2ljb25zL19pY29ucy5zY3NzIiwKCQkic3JjL3Njc3MvZnVuY3Rpb25zL19zdHItcmVwbGFjZS5zY3NzIgoJXSwKCSJuYW1lcyI6IFtdLAoJIm1hcHBpbmdzIjogIkFDS0E7O2NBRWM7QUFNZCxTQUFTLENBQVQsU0FBUztBQUVUOztlQUVlO0FBV2Y7O1lBRVk7QUM5Qlo7O0dBRUc7QUFPSCxBQUFBLGVBQWUsQ0FBQztFQUNkLE9BQU8sRUFBRSxJQUFJO0VBQ2IsV0FBVyxFQUFFLE1BQU07RUFDbkIsY0FBYyxFQzJEVCxJQUFJO0VEMURULG1CQUFtQixFQUFFLEdBQUc7RUFDeEIsbUJBQW1CLEVBQUUsS0FBSztFQUMxQixZQUFZLEVBQUUsT0FBTyxHQUN0Qjs7QUFFRCxBQUFBLGVBQWUsQ0FBQztFQUNkLE9BQU8sRUFBRSxZQUFZO0VBQ3JCLGFBQWEsRUFBRSxNQUFNO0VBQ3JCLFFBQVEsRUFBRSxNQUFNO0VBQ2hCLFlBQVksRUN5RFAsR0FBRyxHRHhEVDs7QUFFRCxBQUFBLFlBQVksQ0FBQztFQUNYLFVBQVUsRUN3REwsSUFBSTtFRHZEVCxjQUFjLEVDOENULElBQUk7RUQ3Q1QsbUJBQW1CLEVBQUUsR0FBRztFQUN4QixtQkFBbUIsRUFBRSxLQUFLO0VBQzFCLFlBQVksRUFBRSxPQUFPLEdBSXRCO0VBVEQsQUFNRSxZQU5VLEFBTVQsYUFBYSxDQUFD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 */ \ No newline at end of file +/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAic2l0ZS5jb25jYXQuc2NzcyIsCgkic291cmNlcyI6IFsKCQkic3JjL3Njc3Mvc2l0ZS1kZWZhdWx0LnNjc3MiLAoJCSJzcmMvc2Nzcy9faW1wb3J0cy5zY3NzIiwKCQkic3JjL29iamVjdHMvZmVlZC9fZmVlZC5zY3NzIiwKCQkic3JjL2NvbmZpZy9fdmFyaWFibGVzLnNjc3MiLAoJCSJzcmMvZWxlbWVudHMvYmFzZS9fYmFzZS5zY3NzIiwKCQkic3JjL2VsZW1lbnRzL2NvZGUvX2NvZGUuc2NzcyIsCgkJInNyYy9lbGVtZW50cy9saW5rcy9fbGlua3Muc2NzcyIsCgkJInNyYy9lbGVtZW50cy9sYXlvdXRzL2xheW91dHMuc2NzcyIsCgkJInNyYy9lbGVtZW50cy9pY29ucy9faWNvbnMuc2NzcyIsCgkJInNyYy9zY3NzL2Z1bmN0aW9ucy9fc3RyLXJlcGxhY2Uuc2NzcyIKCV0sCgkibmFtZXMiOiBbXSwKCSJtYXBwaW5ncyI6ICJBQ2tCQTs7ZUFFZTtBQVdmOztZQUVZO0FDakNaOztHQUVHO0FBT0gsQUFBQSxlQUFlLENBQUM7RUFDZCxPQUFPLEVBQUUsSUFBSTtFQUNiLFdBQVcsRUFBRSxNQUFNO0VBQ25CLGNBQWMsRUMyRFQsSUFBSTtFRDFEVCxtQkFBbUIsRUFBRSxHQUFHO0VBQ3hCLG1CQUFtQixFQUFFLEtBQUs7RUFDMUIsWUFBWSxFQUFFLE9BQU8sR0FDdEI7O0FBRUQsQUFBQSxlQUFlLENBQUM7RUFDZCxPQUFPLEVBQUUsWUFBWTtFQUNyQixhQUFhLEVBQUUsTUFBTTtFQUNyQixRQUFRLEVBQUUsTUFBTTtFQUNoQixZQUFZLEVDeURQLEdBQUcsR0R4RFQ7O0FBRUQsQUFBQSxZQUFZLENBQUM7RUFDWCxVQUFVLEVDd0RMLElBQUk7RUR2RFQsY0FBYyxFQzhDVCxJQUFJO0VEN0NULG1CQUFtQixFQUFFLEdBQUc7RUFDeEIsbUJBQW1CLEVBQUUsS0FBSztFQUMxQixZQUFZLEVBQUUsT0FBTyxHQUl0QjtFQVRELEFBTUUsWUFOVSxBQU1ULGFBQWEs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 */ \ No newline at end of file diff --git a/config/rollup.js b/config/rollup.js index 81e74730..1cc83df9 100644 --- a/config/rollup.js +++ b/config/rollup.js @@ -57,7 +57,7 @@ const Main = { // Create packages for our other modules for (let i = 0; i < modules.length; i++) { modules[i] = { - input: `${modules[i].path.toLowerCase()}/${modules[i].name}.js`, + input: `${modules[i].path}/${modules[i].name}.js`, output: { name: modules[i].name, file: `./dist/scripts/modules/${modules[i].name}.js`, diff --git a/dist/feed.html b/dist/feed.html index b57f4075..d697ef84 100644 --- a/dist/feed.html +++ b/dist/feed.html @@ -1,4 +1,14 @@ -Medium Widget

NYC.gov Agency Styles and Extension

Skip to main content

Feed

Usage

The Feed Object can take any feed and display is as a widget anywhere on a page. Currently, it's configured to work with Medium feeds and will display 10 posts at a time (Medium feeds won't display more than 10 posts).

To use the feed, include the following script in your page:

<script type="text/javascript" src="dist/scripts/modules/Feed.js">

Optionally, but recommended, include the base styling for the feed:

<link rel="stylesheet" src="dist/styles/feed.css">

The location of the script and stylesheet depends where they are placed in your directory structure. Then, add the container, configuration, and initialization script on the page:

<div id="feed" style="color: lightsteelblue"></div><!-- The "color: lightsteelblue"" sets the border-color property for individual posts. You could also try setting "font-size: 85%" if you would like a widget for a smaller side column -->
<script type="text/javascript">
  new Feed({
    selector: "#feed", // required, the container for the feed
    feed: "https://medium.com/feed/@nycopportunity/", // required
    postCtaText: "Read the full article on Medium",
    log: true
  }).init();
</script>

new Feed({}); creates a feed, accepting a configuration object as a parameter. The object should contain the configuration you would like for the feed. Note: the selector and feed parameters are required to display a feed. .init(); is a function that executes initialization of the feed and displays it. Below is a list of the rest of the default configuration options. See the Medium RSS Feed Documentation for more details on their feeds.

Configuration

To change an option, add the desired variable to the configuration object above. Keep in mind they should be the same type (string or number) as they are listed below.

avatarImageRatio: ["50", "50"], // Image source attribute width and height for the account avatar
postImageRatio: ["auto", "200px"], // CSS width and max-height properties for the post image
postExcerptLength: 120, // This is the length of the excerpt
postExcerptTrail: "…", // This is the trailing ellipsis for excerpts
postCtaText: "Click here to read the full article", // This is the text for each post call to action
// @url https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
postDateLocal: "en-US", // This is a parameter used by Date.toLocaleDateString(), see the link above for configuration details
postDateFormat: { // This is a parameter used by Date.toLocaleDateString(), see the link above for configuration details
  year: "numeric",
  month: "long",
  day: "numeric"
},
postDateTitle: "Published Date", // This is the title set to the published date element to provide context on mouseover
classes: { // These are CSS classes that can be added to each element
  wrapper: "", // The wrapper for the whole widget
  header: "", // The widget header
  url: "", // The widget url
  card: "", // The repeating class for the widget"s cards
  title: "", // The title of each card
  link: "", // The link of each card
  thumbnail: "", // The thumbnail image of each card
  excerpt: "", // The excerpt of each card
  cardFooter: "", // The footer of each card with the cta and date
  cta: "", // The final call to action of each card
  date: "" // The publication date of each card
},
template: Feed.templates.medium, // The template of the feed, the script comes with a template for Medium feeds only
log: false // Logs data to the console. You will want this turned off in most cases but it allows you to see what data is being passed to the template

Templates

The feed comes shipped with a ready-to-use LoDash template for Medium feeds.

<section class="o-feed <%- config.classes.wrapper %>">
  <header class="o-feed__header <%- config.classes.header %>">
    <div class="o-feed__avatar <%- config.classes.avatar %>">
      <img src="<%- feed.image %>"
           width="<%- config.avatarImageRatio[0] %>"
           height="<%- config.avatarImageRatio[1] %>">
    </div>
    <a class="o-feed__url <%- config.classes.avatar %>"
       href="<%- feed.url %>" target="_blank" rel="noopener nofollow">
      <%- feed.title %>
    </a>
  </header>
  <% _each(items, function(post) { %>
    <div class="c-feed-item <%- config.classes.card %>">
      <h4 class="c-feed-item__title <%- config.classes.title %>">
        <a class="c-feed-item__link <%- config.classes.link %>"
           href="<%- post.guid %>"
           target="_blank"
           rel="noopener nofollow">
          <%- post.title %>
        </a>
      </h4>
      <div class="c-feed-item__thumbnail <%- config.classes.thumbnail %>">
        <img style="width: <%- config.postImageRatio[0] %>;max-height: <%- config.postImageRatio[1] %>;"
             src="<%- post.thumbnail %>">
      </div>
      <p class="c-feed-item__excerpt <%- config.classes.excerpt %>">
        <%- post.excerpt %><%- config.postExcerptTrail %>
      </p>
      <div class="c-feed-item__footer <%- config.classes.cardFooter %>">
        <a class="c-feed-item__cta <%- config.classes.cta %>"
           href="<%- post.guid %>"
           target="_blank"
           rel="noopener nofollow">
          <%- config.postCtaText %>
        </a>
        <span class="c-feed-item__date <%- config.classes.date %>"
              title="<%- config.postDateTitle %>">
          <%- post.date %>
        </span>
      </div>
    </div>
  <% }); %>
</section>

This template can be overwritten with the template configuration parameter. You can copy the template above to get started creating your own template and see the LoDash documentation for templates. Here's an example of passing your own template to the configuration:

var MyTemplate = "<div>...template content...</div>"
new Feed({
  selector: "#feed", // required
  feed: "https://medium.com/feed/@nycopportunity/", // required
  template: MyTemplate
}).init();

Templates are passed the config object and whatever the response of the feed is. In Medium's case, they pass the feed parameter and posts within the items parameter in the response from their RSS feed. To see the data that gets passed to the template to use in your template, set the log configuration parameter to true. Open up the console to see the data for this particular feed demonstration.

RSS to JSON

The Feed Object uses an API from https://rss2json.com to convert desired RSS feed into a consumable JSON object. See the RSS 2 JSON Online Converter documentation for details.

Demonstration

NYC.gov Agency Styles and Extension

Skip to main content

Feed

Usage

The Feed Object can take any feed and display is as a widget anywhere on a page. Currently, it's configured to work with Medium feeds and will display 10 posts at a time (Medium feeds won't display more than 10 posts).

To use the feed, include the following script in your page:

<script type="text/javascript" src="dist/scripts/modules/Feed.js">

Optionally, but recommended, include the base styling for the feed:

<link rel="stylesheet" src="dist/styles/feed.css">

The location of the script and stylesheet depends where they are placed in your directory structure. Then, add the container, configuration, and initialization script on the page:

<div id="feed" style="color: lightsteelblue"></div><!-- The "color: lightsteelblue"" sets the border-color property for individual posts. You could also try setting "font-size: 85%" if you would like a widget for a smaller side column -->
<script type="text/javascript">
  new Feed({
    selector: "#feed", // required, the container for the feed
    feed: "https://medium.com/feed/@nycopportunity/", // required
    postCtaText: "Read the full article on Medium",
    log: true
  }).init();
</script>

new Feed({}); creates a feed, accepting a configuration object as a parameter. The object should contain the configuration you would like for the feed. Note: the selector and feed parameters are required to display a feed. .init(); is a function that executes initialization of the feed and displays it. Below is a list of the rest of the default configuration options. See the Medium RSS Feed Documentation for more details on their feeds.

Configuration

To change an option, add the desired variable to the configuration object above. Keep in mind they should be the same type (string or number) as they are listed below.

avatarImageRatio: ["50", "50"], // Image source attribute width and height for the account avatar
postImageRatio: ["auto", "200px"], // CSS width and max-height properties for the post image
postExcerptLength: 120, // This is the length of the excerpt
postExcerptTrail: "…", // This is the trailing ellipsis for excerpts
postCtaText: "Click here to read the full article", // This is the text for each post call to action
// @url https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
postDateLocal: "en-US", // This is a parameter used by Date.toLocaleDateString(), see the link above for configuration details
postDateFormat: { // This is a parameter used by Date.toLocaleDateString(), see the link above for configuration details
  year: "numeric",
  month: "long",
  day: "numeric"
},
postDateTitle: "Published Date", // This is the title set to the published date element to provide context on mouseover
classes: { // These are CSS classes that can be added to each element
  wrapper: "", // The wrapper for the whole widget
  header: "", // The widget header
  url: "", // The widget url
  card: "", // The repeating class for the widget"s cards
  title: "", // The title of each card
  link: "", // The link of each card
  thumbnail: "", // The thumbnail image of each card
  excerpt: "", // The excerpt of each card
  cardFooter: "", // The footer of each card with the cta and date
  cta: "", // The final call to action of each card
  date: "" // The publication date of each card
},
template: Feed.templates.medium, // The template of the feed, the script comes with a template for Medium feeds only
log: false // Logs data to the console. You will want this turned off in most cases but it allows you to see what data is being passed to the template

Templates

The feed comes shipped with a ready-to-use LoDash template for Medium feeds.

<section class="o-feed <%- config.classes.wrapper %>">
  <header class="o-feed__header <%- config.classes.header %>">
    <div class="o-feed__avatar <%- config.classes.avatar %>">
      <img src="<%- feed.image %>"
           width="<%- config.avatarImageRatio[0] %>"
           height="<%- config.avatarImageRatio[1] %>">
    </div>
    <a class="o-feed__url <%- config.classes.avatar %>"
       href="<%- feed.url %>" target="_blank" rel="noopener nofollow">
      <%- feed.title %>
    </a>
  </header>
  <% _each(items, function(post) { %>
    <div class="c-feed-item <%- config.classes.card %>">
      <h4 class="c-feed-item__title <%- config.classes.title %>">
        <a class="c-feed-item__link <%- config.classes.link %>"
           href="<%- post.guid %>"
           target="_blank"
           rel="noopener nofollow">
          <%- post.title %>
        </a>
      </h4>
      <div class="c-feed-item__thumbnail <%- config.classes.thumbnail %>">
        <img style="width: <%- config.postImageRatio[0] %>;max-height: <%- config.postImageRatio[1] %>;"
             src="<%- post.thumbnail %>">
      </div>
      <p class="c-feed-item__excerpt <%- config.classes.excerpt %>">
        <%- post.excerpt %><%- config.postExcerptTrail %>
      </p>
      <div class="c-feed-item__footer <%- config.classes.cardFooter %>">
        <a class="c-feed-item__cta <%- config.classes.cta %>"
           href="<%- post.guid %>"
           target="_blank"
           rel="noopener nofollow">
          <%- config.postCtaText %>
        </a>
        <span class="c-feed-item__date <%- config.classes.date %>"
              title="<%- config.postDateTitle %>">
          <%- post.date %>
        </span>
      </div>
    </div>
  <% }); %>
</section>

This template can be overwritten with the template configuration parameter. You can copy the template above to get started creating your own template and see the LoDash documentation for templates. Here's an example of passing your own template to the configuration:

var MyTemplate = "<div>...template content...</div>"
new Feed({
  selector: "#feed", // required
  feed: "https://medium.com/feed/@nycopportunity/", // required
  template: MyTemplate
}).init();

Templates are passed the config object and whatever the response of the feed is. In Medium's case, they pass the feed parameter and posts within the items parameter in the response from their RSS feed. To see the data that gets passed to the template to use in your template, set the log configuration parameter to true. Open up the console to see the data for this particular feed demonstration.

RSS to JSON

The Feed Object uses an API from https://rss2json.com to convert desired RSS feed into a consumable JSON object. See the RSS 2 JSON Online Converter documentation for details.

Demonstration