- Notifications
You must be signed in to change notification settings - Fork6
🐙 Turn your github issues into a CMS for your blog.
License
renatorib/github-blog
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Turn your github issues into a CMS for your blog.
The main idea is simple: each issue is a blog post entity.
Taxonomy is managed bylabels and have<key>:<value> structure. Liketype:post,tag:javascript, etc. Labels can be used to filter posts on querying, but is also available on post too. So you can use to add any kind of flags to your post. The built-in label keys are:type,state,tag,flag andslug.
Usetype labels to differentiatepost fromarticle, for example.
Usestate labels to handlepublished anddraft.
Usetag labels to add tags to your posts, liketypescript.
Useflag labels to add any kind of flag to your post, likeoutdated to mark post as outdated.
You can also add anyk:v labels to your post, likefoo:bar.
Let's create your first blog post.
First, you will need to create a repository for your posts.
It can be private, but I recommend you to create a public since it will allow people comment and react to your posts.
Random people will be able to create issues but they can't add labels. So you can control what posts will be shown using some label liketype:post for example. It will prevent random people to post on your blog. Also, by core github-blog only fetches by opened issues. You can close any random issue opened by others to keep posts organized.
Create a issue with your content and add the labelsstate:published,type:post.
Also add an label to your slug likeslug:my-first-post
Tip: Your issue content can have frontmatter data
Here comes github-blog. First install
yarn add github-blog# npm install github-blogNow create a new blog instance passing your repo and your github token.Create your token here.
import{GithubBlog}from"@rena.to/github-blog";constblog=newGithubBlog({repo:"<user>/<repo>",// e.g.: "renatorib/posts"token:"<token>",});
Fetch your post using getPost:
constpost=awaitblog.getPost({query:{slug:"my-first-post"},});
Fetch post comments using getComments:
constcomments=awaitblog.getComments({query:{slug:"my-first-post"},pager:{first:100},});
Fetch all your posts using getPosts:
constposts=awaitblog.getPosts({query:{type:"post",state:"published"},pager:{limit:10,offset:0},});
All query works by AND logic. You can't query by OR because of the nature of github search.
But you can exclude results using prefixnot (notType,notState, etc.)
E.g: If you want to query posts with typepost but it can't have a flagoutdated, you can use:
constposts=awaitblog.getPosts({query:{type:"post",notFlag:"outdated"},pager:{limit:10,offset:0},});
You can also pass an array to most ofquery params:
constposts=awaitblog.getPosts({query:{type:["post","article"],tag:["javascript","react"]},pager:{limit:10,offset:0},});
You can also search for post that contain terms usingquery.search param:
constposts=awaitblog.getPosts({query:{type:"post",state:"published",search:"compiler"},pager:{limit:10,offset:0},});
You can sort results byinteractions,reactions,author-date,created,updated.
All of them are desc by default but you can suffix with-asc. See allhere
constposts=awaitblog.getPosts({query:{type:"post",sort:"interactions"},pager:{limit:10,offset:0},});
You can paginate usingpager.limit andpager.offset as you saw before, but you can also paginate using cursors with the pager paramsafter,before,first andlast.
// first 10 postsconstposts=awaitblog.getPosts({query:{type:"post"},pager:{first:10},});// more 10 postsconstmorePosts=awaitblog.getPosts({query:{type:"post"},pager:{first:10,after:posts.pageInfo.endCursor},});
NOTE:
limitandoffsetusesfirstandafterunder the hood.
So if you pass bothlimitandfirstoroffsetandafter, limit and offset will be ignored.
You can set some defaults for querying right in your blog instance, if you want to avoid some query repetition:
constblog=newGithubBlog({repo:"renatorib/posts",token:process.env.GITHUB_TOKEN,queryDefaults:{state:"published",type:"post",},});constposts=awaitblog.getPosts({pager:{first:10,offset:0},});
You can fetch all post comments using.getComments
// first 10 commentsconstcomments=awaitblog.getComments({query:{slug:"my-first-post"},pager:{first:10},});// more 10 postsconstmoreComments=awaitblog.getComments({query:{slug:"my-first-post"},pager:{first:10,after:comments.pageInfo.endCursor},});
NOTE: Comment pagination bylimit andoffset is still not possible while I figure out on how generate v2 cursors based on offset.
Read more about this issue here, maybe you can help.
constblog=newGithubBlog(ConstructorParams)blog.getPost({query:QueryParams}):Promise<GetPostResult>blog.getPosts({query:QueryParams,pager:PagerParams}):Promise<GetPostsResult>blog.getComments({query:QueryParams,pager:PagerParams}):Promise<GetCommentsResult>
typeConstructorParams={token:string;repo:string;queryDefaults?:Partial<QueryParams>;paginationDefaults?:Partial<PagerParams>;};
typeQueryParams={tag?:string|string[];notTag?:string|string[];flag?:string|string[];notFlag?:string|string[];state?:string|string[];notState?:string|string[];type?:string|string[];notType?:string|string[];author?:string|string[];notAuthor?:string|string[];sort?:|"interactions"|"reactions"|"author-date"|"created"|"updated"|"interactions-asc"|"reactions-asc"|"author-date-asc"|"created-asc"|"updated-asc"|"interactions-desc"|"reactions-desc"|"author-date-desc"|"created-desc"|"updated-desc"|"reactions-+1"|"reactions--1"|"reactions-smile"|"reactions-tada"|"reactions-heart";slug?:string;search?:string;overrides?:string;};
typePagerParams={before?:string;after?:string;first?:number;last?:number;limit?:number;offset?:number;};
typeGetPostResult={post:Post;};
typeGetPostsResult={totalCount:number;pageInfo:{endCursor:string;startCursor:string;hasNextPage:boolean;hasPreviousPage:boolean;};edges:{cursor:string;post:PostReduced;}[];};
typeGetCommentsResult={totalCount:number;pageInfo:{endCursor:string;startCursor:string;hasNextPage:boolean;hasPreviousPage:boolean;};edges:{cursor:string;comment:Comment;}[];};
typePost={id:string;url:string;updatedAt:string;createdAt:string;title:string;body:string;frontmatter:{[key:string]:string;};author:{name:string;login:string;avatarUrl:string;};labels:{[key:string]:string[];};reactions:{THUMBS_UP:number;THUMBS_DOWN:number;LAUGH:number;HOORAY:number;CONFUSED:number;HEART:number;ROCKET:number;EYES:number;};totalComments:number;totalReactions:number;};
Same asPost but withoutbody.
typeComment={id:string;body:string;createdAt:string;lastEditedAt:string|null;isMinimized:boolean;minimizedReason:string|null;author:{name:string;login:string;avatarUrl:string;};reactions:{THUMBS_UP:number;THUMBS_DOWN:number;LAUGH:number;HOORAY:number;CONFUSED:number;HEART:number;ROCKET:number;EYES:number;};totalReactions:number;};
About
🐙 Turn your github issues into a CMS for your blog.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors2
Uh oh!
There was an error while loading.Please reload this page.