Letterpad
Search…
Features
This page describes all the features of the Letterpad API. While building a client, you can select the ones that you think is necessary.

Branding

Most of the branding data can be found in the settings query.
1
query settings{
2
settings{
3
...on Setting{
4
site_title # String! => Title of the site
5
site_tagline # String! => A caption of the site
6
site_footer # String! => Can contain html
7
site_description # String! => About the site
8
social_twitter # String! => Twitter profile
9
social_facebook # String! => Facebook profile
10
social_instagram # String! => Instagram profile
11
social_github # String! => Github profile
12
displayAuthorInfo # Boolean! => Author info after post
13
menu # [Navigation!]! => Contains navigation items
14
css # String! => css string to append
15
google_analytics # String!
16
banner # Image! => contains {src, width, height}
17
site_logo # Image! => contains {src, width, height}
18
site_favicon # Image! => contains {src, width, height}
19
}
20
}
21
}
Copied!
Fields
Type
Description
site_title
string(100)
Title of the site. limit - 100 chars.
site_tagline
string(160)
A tagline of the site. limit - 200 chars
site_description
string(500)
Description of the site. limit - 500 chars
social_twitter
string
Url of twitter profile
social_facebook
string
Url of facebook profile
social_github
string
Url of github profile
social_instagram
string
Url of instagram profile
displayAuthorInfo
boolean
To show author info after post
menu
[NavigationItem]
Contains data about site navigation
css
string
Custom css
banner
Image
Banner of the site
site_logo
Image
Logo of the site
site_favicon
Image
Favicon of the site

The type of Navigation is shown below.
1
type Navigation {
2
type: NavigationType!
3
slug: String!
4
original_name: String!
5
label: String!
6
}
Copied!
The first item will be considered as home.
Home can be a single page or a collection of posts(denoted by tag).
If the first item has type as page, then its corresponding slug will contain the path to that page.
And if the first item has type as tag, then its corresponding slug will contain the path to that tag.
Depending on the type, you can fetch posts in the below way.
1
# by tag
2
query Posts {
3
posts(filters: { tagSlug: "home" }) { # or "/tag/home"
4
...on PostsNode {
5
rows{
6
title
7
publishedAt
8
featured
9
reading_time
10
author{
11
name
12
avatar
13
}
14
}
15
}
16
}
17
}
18
19
# by page
20
query Post{
21
post(filters:{slug:"a-page"}){
22
...on Post{
23
title
24
excerpt
25
reading_time
26
author{
27
name
28
avatar
29
bio
30
}
31
}
32
}
33
}
Copied!

If the home page is a collection of posts, you might want to make it unique. Posts can be featured if they are selected from the admin dashboard. Its upto you how you want to create the UI for that.

Display Author Info

If display author info is checked you should display the info of the author, name, avatar and bio.

Reading Time

Every post has a reading_time. You can display it say, near the title.

The html string is the content of a post or a page in html. If a gallery is present, its markup would be as below.
1
<div class="gallery">
2
<figure>
3
<img>
4
</figure>
5
6
<figure>
7
<img />
8
</figure>
9
10
<figure>
11
<img />
12
</figure>
13
</div>
Copied!
You can use only css to build a grid or something similar and also add fullscreen option using javascript. Letterpad only provides the markup.
Footer is a html string. Make sure to render is as html and not as a string.

Lazy loading Images

We take care of the images and add all the necessary attributes to lazy load them. Although lazy loading is supported by most modern browsers, we use lazysizes library to make it more performant. Simply add this script in the head of your document and its done.
1
<script
2
src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js"
3
async
4
/>
Copied!
Last modified 3mo ago