blogger-feeds

Appearance

Examples ​

A collection of patterns extracted from blogs and custom widgets implementations that inspired the library that haven't been covered in the url builder or helpers pages.

You may even pass the client() the same example configs found in the make() examples, leveraging the shared api via make param (and vice versa).

Again we will refer to Blogger Team's blog and, since we can't prevent CORS issues, instead of fetching we will link to the raw resources.

bash
# Blogger team's blog 💖
VITE_BLOG = "https://blogger.googleblog.com"
VITE_BLOG_ID = "2399953"

# A post 📰
# https://blogger.googleblog.com/2020/05/a-better-blogger-experience-on-web.html
VITE_POST_ID = "7531385161213212970"

# Post with thumbnail 📷
# https://blogger.googleblog.com/2017/03/share-your-unique-style-with-new.html
VITE_POST_WITH_IMG = "2731320382187546485"
# Blogger team's blog 💖
VITE_BLOG = "https://blogger.googleblog.com"
VITE_BLOG_ID = "2399953"

# A post 📰
# https://blogger.googleblog.com/2020/05/a-better-blogger-experience-on-web.html
VITE_POST_ID = "7531385161213212970"

# Post with thumbnail 📷
# https://blogger.googleblog.com/2017/03/share-your-unique-style-with-new.html
VITE_POST_WITH_IMG = "2731320382187546485"

Posts count ​

js
const generator = client({
  make: {
    blog: 'https://www.my-blogger.com',
    'max-results': 1, // reduced payload
  },
  // keep only the relevant data
  keep: ['total', 'start-index']
})

const { meta } = (await generator.next()).value

// may be computed from any non paginated requests
const PostCount = meta.total + meta['start-index']

const PostCountUrl = make({
    blog: 'https://blogger.googleblog.com',
    'max-results': 1, // reduced payload
})
const generator = client({
  make: {
    blog: 'https://www.my-blogger.com',
    'max-results': 1, // reduced payload
  },
  // keep only the relevant data
  keep: ['total', 'start-index']
})

const { meta } = (await generator.next()).value

// may be computed from any non paginated requests
const PostCount = meta.total + meta['start-index']

const PostCountUrl = make({
    blog: 'https://blogger.googleblog.com',
    'max-results': 1, // reduced payload
})

Last published / updated ​

js
const generator = client({
  make: {
    blog: 'https://blogger.googleblog.com',
    orderby: 'published', // or 'updated'
    'max-results': 1, // reduced payload
    'start-index': 1, // only the first
  },
})

const { data } = (await generator.next()).value

// the latest post
const Post = data.at(0)
// its timestamps
const { published, updated } = Post

const LastPublishedUrl = make({
  blog: 'https://blogger.googleblog.com',
  orderby: 'published',
  'max-results': 1,
  'start-index': 1,
})

const LastUpdatedUrl = merge(LastPublishedUrl, { 
  orderby: 'updated'
})
const generator = client({
  make: {
    blog: 'https://blogger.googleblog.com',
    orderby: 'published', // or 'updated'
    'max-results': 1, // reduced payload
    'start-index': 1, // only the first
  },
})

const { data } = (await generator.next()).value

// the latest post
const Post = data.at(0)
// its timestamps
const { published, updated } = Post

const LastPublishedUrl = make({
  blog: 'https://blogger.googleblog.com',
  orderby: 'published',
  'max-results': 1,
  'start-index': 1,
})

const LastUpdatedUrl = merge(LastPublishedUrl, { 
  orderby: 'updated'
})

List all labels ​

No need to use the client, since all published labels are nested in the raw feeds under feed.categories[].

js
const RawFeedsUrl = make({
  blog: 'https://blogger.googleblog.com'
})

const response = await fetch(RawFeedsUrl)
const data = await response.json()

const AllLabels = data.feed.category.map(cat => cat.term)
const RawFeedsUrl = make({
  blog: 'https://blogger.googleblog.com'
})

const response = await fetch(RawFeedsUrl)
const data = await response.json()

const AllLabels = data.feed.category.map(cat => cat.term)

List all posts ​

js
const generator = client({
  make: {
    blog: 'https://blogger.googleblog.com',
    // reduce api calls needed to fetch all posts
    'max-results': 150,
  },
  // just the titles and links to the public urls
  keep: ['title', 'href']
})

const AllPosts = []

for await (const collection of generator) 
  if (collection.type === 'data') 
    AllPosts.concat(collection.data)

const MaxCollectionSize = make({
  blog: 'https://blogger.googleblog.com',
  'max-results': 150,
})
const generator = client({
  make: {
    blog: 'https://blogger.googleblog.com',
    // reduce api calls needed to fetch all posts
    'max-results': 150,
  },
  // just the titles and links to the public urls
  keep: ['title', 'href']
})

const AllPosts = []

for await (const collection of generator) 
  if (collection.type === 'data') 
    AllPosts.concat(collection.data)

const MaxCollectionSize = make({
  blog: 'https://blogger.googleblog.com',
  'max-results': 150,
})

Resized post image ​

js
// assuming we already know the postId
const generator = client({
  make: {
    blog: 'https://blogger.googleblog.com',
    postId: '2731320382187546485',
  },
  keep: ['image']
})

const { data } = (await generator.next()).value

const OriginalImage = data.at(0).image

const ResizedImage = thumb(OriginalImage, 200)
// assuming we already know the postId
const generator = client({
  make: {
    blog: 'https://blogger.googleblog.com',
    postId: '2731320382187546485',
  },
  keep: ['image']
})

const { data } = (await generator.next()).value

const OriginalImage = data.at(0).image

const ResizedImage = thumb(OriginalImage, 200)

, original thumbnail from Google Blogger's blog post