Feeds Package Use Cases

📰 Use Case 1: News Feed Components

Display news content using web components with various layout options and configurations.

Simple News Block

<!-- Basic 3-column news grid -->
<umd-feed-news
  data-token="your-api-token">
</umd-feed-news>

<!-- News grid with custom columns and lazy loading -->
<umd-feed-news
  data-token="your-api-token"
  data-layout-column-count="4"
  data-layout-row-count="2"
  data-lazy-load="true">
</umd-feed-news>

<!-- Filtered news with dark theme -->
<umd-feed-news
  data-token="your-api-token"
  data-filter-group-ids="145,123"
  data-theme="dark"
  data-visual-transparent>
</umd-feed-news>

Featured News Layout

<!-- Featured news with sticky positioning -->
<umd-feed-news-featured
  data-token="your-api-token">
</umd-feed-news-featured>

<!-- Featured news with filters -->
<umd-feed-news-featured
  data-token="your-api-token"
  data-filter-group-ids="101"
  data-theme="dark">
</umd-feed-news-featured>

<!-- Transparent featured news -->
<umd-feed-news-featured
  data-token="your-api-token"
  data-visual-transparent>
</umd-feed-news-featured>

Available Attributes

📅 Use Case 2: Events Feed Components

Display university events using web components with filtering and display options.

Events Grid Layout

<!-- Basic events grid -->
<umd-feed-events
  data-token="your-api-token">
</umd-feed-events>

<!-- Events with category filters and 4 columns -->
<umd-feed-events
  data-token="your-api-token"
  data-filter-group-ids="201,202"
  data-layout-column-count="4"
  data-layout-row-count="2"
  data-lazy-load="true">
</umd-feed-events>

<!-- Dark theme events with transparent cards -->
<umd-feed-events
  data-token="your-api-token"
  data-theme="dark"
  data-visual-transparent
  data-layout-column-count="2">
</umd-feed-events>

Events List Layout

<!-- Basic events list -->
<umd-feed-events-list
  data-token="your-api-token">
</umd-feed-events-list>

<!-- Events list with filters and dark theme -->
<umd-feed-events-list
  data-token="your-api-token"
  data-filter-group-ids="203"
  data-theme="dark">
</umd-feed-events-list>

Common Event Attributes

🎓 Use Case 3: Academic Feed Components

Display academic calendar events using the slider web component with the academic feed type.

Academic Calendar Slider

<!-- Basic academic calendar slider -->
<umd-element-slider-events-feed 
  data-token="your-api-token"
  data-feed-type="academic">
  <div slot="headline">
    Lorem Ipsum Dolor Sit Amet
  </div>
  <umd-element-call-to-action slot="actions" data-display="secondary">
    <a href="/"><span>Learn More</span></a>
  </umd-element-call-to-action>
</umd-element-slider-events-feed>

<!-- Academic calendar with dark theme -->
<umd-element-slider-events-feed 
  data-token="your-api-token"
  data-feed-type="academic"
  data-theme="dark">
  <h2 slot="headline">Academic Calendar</h2>
  <a slot="actions" href="/academic-calendar">Full Calendar</a>
</umd-element-slider-events-feed>

<!-- Academic calendar with custom styling -->
<umd-element-slider-events-feed 
  data-token="your-api-token"
  data-feed-type="academic">
  <h2 slot="headline">Important Academic Dates</h2>
  <div slot="actions">
    <a href="/academic-calendar">View Full Calendar</a>
    <a href="/academic-calendar/deadlines">Key Deadlines</a>
  </div>
</umd-element-slider-events-feed>

Academic Feed Attributes

Slots

📝 Use Case 4: TypeScript Integration

Use feeds programmatically in TypeScript applications with full type safety.

Basic TypeScript Usage

import { news, events, academic } from '@universityofmaryland/web-feeds-library';

// Create news feed with configuration
const newsProps = {
  token: 'your-api-token',
  numberOfColumnsToShow: 3,
  numberOfRowsToStart: 2,
  isThemeDark: false,
  isLazyLoad: true,
  categories: ['145', '123']
};

const newsFeed = news.grid(newsProps);
// newsFeed is of type { element: HTMLElement, styles: string }

// Add the element to the DOM
document.querySelector('#news-container')?.appendChild(newsFeed.element);

// Inject the styles into the document head
const styleElement = document.createElement('style');
styleElement.textContent = newsFeed.styles;
document.head.appendChild(styleElement);

Type Definitions

// News feed properties
interface BaseProps {
  token: string;
  numberOfRowsToStart: number;
  categories?: string[];
  isThemeDark?: boolean;
  isLazyLoad: boolean;
  isUnion: boolean;
  entriesToRemove?: string[];
}

interface BlockProps extends BaseProps {
  numberOfColumnsToShow?: number;
  isTransparent?: boolean;
  isTypeOverlay?: boolean;
}

interface FeaturedProps extends BaseProps {
  isTransparent?: boolean;
  isLayoutReversed?: boolean;
  overwriteStickyPosition?: number;
}

🔄 Use Case 5: Event Bubbling and Style Callbacks

Feed components dispatch DOM events when content is loaded or errors occur, and provide callbacks for style injection.

Feed Events

// Listen for feed loaded event
const feedElement = document.querySelector('umd-feed-news');

feedElement.addEventListener('feed:loaded', (event) => {
  console.log('Feed loaded with', event.detail.items.length, 'items');
  // Access the loaded items
  const items = event.detail.items;
});

// Listen for feed error event
feedElement.addEventListener('feed:error', (event) => {
  console.error('Feed error:', event.detail.error);
  // Show fallback content
  feedElement.innerHTML = '
Unable to load feed content
';
});

// Event bubbling allows listening at parent levels
document.addEventListener('feed:loaded', (event) => {
  if (event.target.tagName === 'UMD-FEED-NEWS') {
    console.log('News feed loaded');
  }
});

Style Callback

// Using styleCallback with TypeScript API
import { news } from '@universityofmaryland/web-feeds-library';

const newsFeed = news.grid({
  token: 'your-api-token',
  numberOfColumnsToShow: 3,
  numberOfRowsToStart: 2,
  isThemeDark: false,
  isLazyLoad: true,
  
  // Style callback to handle CSS injection
  styleCallback: (cssString) => {
    // Custom style injection logic
    const styleElement = document.createElement('style');
    styleElement.textContent = cssString;
    document.head.appendChild(styleElement);
  }
});

document.querySelector('#news-container')?.appendChild(newsFeed.element);

Integration with Shadow DOM

// When feeds are inside web components with Shadow DOM
class CustomFeedWrapper extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
  
  connectedCallback() {
    const feed = document.createElement('umd-feed-events');
    feed.setAttribute('data-token', 'your-api-token');
    
    // Events bubble from the feed to the shadow host
    feed.addEventListener('feed:loaded', (event) => {
      // Dispatch to light DOM if needed
      this.dispatchEvent(new CustomEvent('feed:loaded', {
        detail: event.detail,
        bubbles: true
      }));
    });
    
    this.shadowRoot.appendChild(feed);
  }
}