Skip to content

Commit

Permalink
push
Browse files Browse the repository at this point in the history
  • Loading branch information
@tsarchghs
tsarchghs committed Jan 2, 2022
1 parent af44638 commit 2dc5b0f
Show file tree
Hide file tree
Showing 10 changed files with 316 additions and 68 deletions.
Binary file removed build/942db92a36e5ac025548.png
View file
Binary file not shown.
11 changes: 0 additions & 11 deletions build/css/index.css
View file

This file was deleted.

1 change: 0 additions & 1 deletion build/css/index.css.map
View file

This file was deleted.

8 changes: 4 additions & 4 deletions build/index.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion build/index.js.map
View file

Large diffs are not rendered by default.

14 changes: 7 additions & 7 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@hodgef/js-library-boilerplate-basic",
"version": "1.6.35",
"description": "Javascript Minimal Starter Kit for building libraries",
"name": "@bloggrs/bloggrsjs",
"version": "0.0.1",
"description": "bloggrs.js is a JavaScript library for building performant and custom blog platforms with Bloggrs.",
"main": "build/index.js",
"scripts": {
"start": "webpack serve --config webpack.config.demo.js",
Expand All @@ -13,14 +13,14 @@
},
"repository": {
"type": "git",
"url": "https://github.com/hodgef/js-library-boilerplate-basic"
"url": "https://github.com/bloggrs/bloggrs.js"
},
"author": "Francisco Hodge <hello@franciscohodge.com> (https://github.com/hodgef)",
"author": "Gjergj Kadriu <gjergjk71@gmail.com> (https://github.com/gjergjk71)",
"license": "MIT",
"bugs": {
"url": "https://github.com/hodgef/js-library-boilerplate-basic/issues"
"url": "https://github.com/bloggrs/bloggrs.js/issues"
},
"homepage": "https://github.com/hodgef/js-library-boilerplate-basic",
"homepage": "https://github.com/bloggrs/bloggrs.js",
"keywords": [
"library",
"starter",
Expand Down
227 changes: 227 additions & 0 deletions src/lib/bloggrs-client/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,227 @@
import BloggrsAPI from "../bloggrs-sdk";

class BloggrsClient {
constructor({ blog_id, secret }) {
this.blog_id = blog_id;
this.secret = secret;
this.bloggrsApi = new BloggrsAPI({ blog_id, secret });
}
handleCreatePagesListWidget = async (el) => {
const pages = await this.bloggrsApi.getPages();
const div = `
<div class="w-3/12 hidden sm:block sm:ml-6">
<div class="flex space-x-4">
<!-- Current: "bg-slate-900 text-white", Default: "text-slate-300 hover:bg-slate-700 hover:text-white" -->
${pages
.map(
(page) =>
`<a href="${page.slug}" class="
text-slate-600
hover:text-slate-900
px-3
py-2
rounded-md
text-base
font-medium
">${page.name}</a>`
)
.join(" ")}
</div>
</div>
`;
el.innerHTML = div;
return div;
};
handleCreateHeaderWidget = async (el) => {
const blog = await this.bloggrsApi.getBlog();
const div = `
<nav class="bg-white shadow-md max-h-96 py-5">
<div class="mx-32 px-2 sm:px-6 lg:px-8">
<div class="relative flex items-center justify-between h-16">
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
<!-- Mobile menu button-->
<button type="button" class="
inline-flex
items-center
justify-center
p-2
rounded-md
text-slate-400
hover:text-white hover:bg-slate-700
focus:outline-none
focus:ring-2
focus:ring-inset
focus:ring-white
" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!--
Icon when menu is closed.
Heroicon name: outline/menu
Menu open: "hidden", Menu closed: "block"
-->
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
<!--
Icon when menu is open.
Heroicon name: outline/x
Menu open: "block", Menu closed: "hidden"
-->
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="flex-1 flex items-center justify-center sm:justify-start">
<div class="w-9/12 flex-shrink-0 flex items-center">
<img class="block w-40 lg:hidden h-8 w-auto h-auto" src="/dist/static/logo-placeholder-image.png" alt="Workflow">
<img class="hidden absolute lg:block h-32 w-auto h-auto" style="width: 12rem;" src="/dist/static/logo-placeholder-image.png" alt="Workflow">
<h1 class="text-xl lg:px-52 md:px-22 font-bold text-slate-700">${blog.name}</h1>
</div>
<div id="pages_list"></div>
</div>
</div>
</div>
<!-- Mobile menu, show/hide based on menu state. -->
<div class="sm:hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1">
<!-- Current: "bg-slate-900 text-white", Default: "text-slate-300 hover:text-slate-900" -->
<a href="#" class="
bg-slate-900
text-white
block
px-3
py-2
rounded-md
text-base
font-medium
" aria-current="page">Dashboard</a>
<a href="#" class="
text-slate-300
hover:text-slate-900
block
px-3
py-2
rounded-md
text-base
font-medium
">Features</a>
<a href="#" class="
text-slate-300
hover:text-slate-900
block
px-3
py-2
rounded-md
text-base
font-medium
">Pricing</a>
<a href="#" class="
text-slate-300
hover:text-slate-900
block
px-3
py-2
rounded-md
text-base
font-medium
">Blog</a>
</div>
</div>
</nav>
`;
el.innerHTML = div;
const pages_list_el = el.querySelector("#pages_list");
this.createWidget(pages_list_el, { type: "pages_list" });
return div;
};
handleCreateCategoriesWidget = async (el) => {
console.log(this.bloggrsApi, this.bloggrsApi, this.secret);
const categories = await this.bloggrsApi.getCategories();
const div = document.createElement("div");
div.className =
"my-50 mb-14 bg-white shadow-md max-h-1/2 w-3/4 rounded-md justify-center";
const div__div2 = document.createElement("div");
div__div2.className = "mx-6";
const div2__h1 = document.createElement("h1");
div2__h1.className = "py-3 mb-4 text-slate-700 font-medium text-xl";
div2__h1.innerHTML = "Categories";
const div2__ul = document.createElement("ul");
div2__ul.className = "py-4 mx-5 list-disc space-y-3";
for (let category of categories) {
const ul__li = document.createElement("li");
ul__li.innerHTML = `${category.name} (${category.meta.posts_count})`;
div2__ul.appendChild(ul__li);
}
//
div__div2.appendChild(div2__h1);
div__div2.appendChild(div2__ul);
div.appendChild(div__div2);
el.appendChild(div);
return div;
};
handleCreatePostsListWidget = async (el) => {
const posts = await this.bloggrsApi.getPosts();
const div = `
<div class="h-full grid grid-rows-3 grid-flow-col col-span-2 gap-4">
${posts
.map((post) => {
return `
<div class="border-b-2 border-b-slate-300 col-span-3 h-full flex">
<div class="bg-white shadow-md h-3/4 w-1/2 rounded-md"></div>
<div class="px-3 h-3/4 w-3/4">
<h1 class="text-slate-700 font-medium text-xl">
${post.title}
</h1>
<p class="py-2 text-slate-400 font-normal text-sm">
${post.html_content}
</p>
<div class="flex">
<p class="ml-24text-slate-700 font-normal text-sm">
Wednesday, December 22, 2021 &nbsp;&nbsp;&nbsp; |
</p>
<p class="mx-4 text-slate-700 font-normal text-sm">
John Cena
</p>
</div>
<div class="flex my-2 w-full">
<p class="w-1/2 text-blue-300 font-medium text-sm flex ">
<img src="/dist/static/icons8-heart-80.png">
<span class="mx-2 text-center my-2">${post.meta.likes_count} likes</span>
</p>
<p class="w-1/2 right-0 text-blue-400 font-normal text-sm flex items-center justify-center">
<img src="/dist/static/icons8-comments-80.png">
<span class="mx-2">${post.meta.comments_count} comments</span>
</p>
</div>
</div>
</div>
`;
})
.join(" ")}
</div>
`;
el.innerHTML = div;
return div;
};
createWidget(el, { type }) {
const widgets = {
categories: this.handleCreateCategoriesWidget,
pages_list: this.handleCreatePagesListWidget,
header: this.handleCreateHeaderWidget,
posts_list: this.handleCreatePostsListWidget,
};
return widgets[type](el);
}
}

export default BloggrsClient;
39 changes: 39 additions & 0 deletions src/lib/bloggrs-sdk/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
class BloggrsAPI {
constructor({ blog_id, secret }) {
this.blog_id = blog_id;
this.secret = secret;
this.base_url = "http://localhost:4000/api/v1";
}
async getCategories() {
const res = await fetch(
`${this.base_url}/blogs/${this.blog_id}/categories`
);
const {
data: { categories },
} = await res.json();
return categories;
}
async getPosts() {
const res = await fetch(`${this.base_url}/blogs/${this.blog_id}/posts`);
const {
data: { posts },
} = await res.json();
return posts;
}
async getPages() {
const res = await fetch(`${this.base_url}/blogs/${this.blog_id}/pages`);
const {
data: { pages },
} = await res.json();
return pages;
}
async getBlog() {
const res = await fetch(`${this.base_url}/blogs/${this.blog_id}`);
const {
data: { blog },
} = await res.json();
return blog;
}
}

export default BloggrsAPI;
15 changes: 3 additions & 12 deletions src/lib/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,4 @@
import "./index.css";
import bloggrs from "./bloggrs-client";
// import "./index.css";

class MyLibrary {
constructor() {
console.log("Library constructor loaded");
}

myMethod = () => {
console.log("Library method fired");
};
}

export default MyLibrary;
export default bloggrs;
Loading

0 comments on commit 2dc5b0f

Please sign in to comment.