Skip to content

Create Blog using markdown #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rohit-gohri wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Create Blog using markdown #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dd55aa5
Move init blog fn outside
rohit-gohri Aug 13, 2019
535bf57
Add method to wrie blog through markdown
rohit-gohri Aug 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
124 changes: 77 additions & 47 deletions blog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,86 @@
const _ = require("lodash");
const bluebird = require("bluebird");
const fs = bluebird.promisifyAll(require("fs"));
const marked = require('marked');
const jsdom = require("jsdom").JSDOM,
options = {
resources: "usable"
};
const { updateHTML } = require("./populate");
const { getConfig, getBlog, updateBlog, outDir } = require("./utils");

async function initBlogFiles(folder, blog_data, conf) {
const blogPath = `${outDir}/blog/${folder}/index.html`;
await fs.copyFileAsync(
`${__dirname}/assets/blog/blogTemplate.html`,
blogPath
);
const dom = await jsdom.fromFile(blogPath, options);
const window = dom.window;
const document = window.document;

const icon = document.createElement("link");
icon.setAttribute("rel", "icon");
icon.setAttribute("href", conf[0].userimg);
icon.setAttribute("type", "image/png");
document.getElementsByTagName("head")[0].appendChild(icon);

document.getElementById(
"profile_img_blog"
).style.background = `url('${conf[0].userimg}') center center`;

document.getElementById("username_blog").innerHTML = `
<span style="display:${!conf[0].name ? "none" : "block"};">
${conf[0].name}
</span>
<br>@${conf[0].username}
<br><b id="blog_time" data-iso="${blog_data.created_at.toISOString()}">
${blog_data.created_at.toLocaleDateString()}
</b>`;

if ((conf[0].theme = "dark.css")) {
document.querySelector("#background_overlay").style.background =
"linear-gradient(0deg, rgba(10, 10, 10, 1), rgba(10, 10, 10, 0.1))";
} else {
document.querySelector("#background_overlay").style.background =
"linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.1))";
}

document.getElementsByTagName("title")[0].textContent = blog_data.page_title;
document.getElementById("blog_title").textContent = blog_data.title;
document.getElementById("blog_sub_title").textContent = blog_data.sub_title;

await fs.writeFileAsync(
blogPath,
"<!DOCTYPE html>" + window.document.documentElement.outerHTML
);

if (!fs.existsSync(`${outDir}/blog/${folder}/index.md`)) {
// Create empty md file
await fs.writeFileAsync(`${outDir}/blog/${folder}/index.md`, "Dummy Blog Content!");
}
}

async function updateBlogContent(blogData, conf) {
const blogPath = `${outDir}/blog/${blogData.url_title}/index`;
const markdownContent = await fs.readFileAsync(`${blogPath}.md`);
const html = marked(markdownContent.toString(), {
baseUrl: conf[0].url,
gfm: true,
headerIds: true,
headerPrefix: 'heading-',
});
const dom = await jsdom.fromFile(`${blogPath}.html`, options);
const window = dom.window;
const document = window.document;
document.getElementById("blog").innerHTML = html;

await fs.writeFileAsync(
`${blogPath}.html`,
"<!DOCTYPE html>" + window.document.documentElement.outerHTML
);
}

async function createBlog(
title,
{ subtitle, pagetitle, folder, image, update = false } = {}
Expand All @@ -33,6 +106,7 @@ async function createBlog(
url_title: folder,
title: title,
sub_title: subtitle,
page_title: pagetitle,
top_image:
image ||
"https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450",
Expand All @@ -51,51 +125,7 @@ async function createBlog(
return;
}

const blogPath = `${outDir}/blog/${folder}/index.html`;
await fs.copyFileAsync(
`${__dirname}/assets/blog/blogTemplate.html`,
blogPath
);
const dom = await jsdom.fromFile(blogPath, options);
const window = dom.window;
const document = window.document;

const icon = document.createElement("link");
icon.setAttribute("rel", "icon");
icon.setAttribute("href", conf[0].userimg);
icon.setAttribute("type", "image/png");
document.getElementsByTagName("head")[0].appendChild(icon);

document.getElementById(
"profile_img_blog"
).style.background = `url('${conf[0].userimg}') center center`;

document.getElementById("username_blog").innerHTML = `<span style="display:${
!conf[0].name ? "none" : "block"
};">
${conf[0].name}
</span>
<br>@${conf[0].username}
<br><b id="blog_time" data-iso="${blog_data.created_at.toISOString()}">
${blog_data.created_at.toLocaleDateString()}
</b>`;

if ((conf[0].theme = "dark.css")) {
document.querySelector("#background_overlay").style.background =
"linear-gradient(0deg, rgba(10, 10, 10, 1), rgba(10, 10, 10, 0.1))";
} else {
document.querySelector("#background_overlay").style.background =
"linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.1))";
}

document.getElementsByTagName("title")[0].textContent = pagetitle;
document.getElementById("blog_title").textContent = title;
document.getElementById("blog_sub_title").textContent = subtitle;

await fs.writeFileAsync(
`${outDir}/blog/${folder}/index.html`,
"<!DOCTYPE html>" + window.document.documentElement.outerHTML
);
await initBlogFiles(folder, blog_data, conf);

if (conflicting.length) {
old_blogs.forEach(blog => {
Expand All @@ -108,7 +138,6 @@ async function createBlog(
old_blogs.push(blog_data);
}
await updateBlog(old_blogs);
await updateHTML(conf[0].username, conf[0]);
}

async function blogCommand(title, program) {
Expand All @@ -123,5 +152,6 @@ async function blogCommand(title, program) {
}

module.exports = {
blogCommand
blogCommand,
updateBlogContent,
};
5 changes: 5 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
"handlebars": "^4.1.2",
"jsdom": "^15.1.0",
"lodash": "^4.17.15",
"marked": "^0.7.0",
"ncp": "^2.0.0",
"prettier": "^1.18.2"
}
Expand Down
17 changes: 11 additions & 6 deletions populate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const jsdom = require("jsdom").JSDOM,
options = {
resources: "usable"
};
const {updateBlogContent} = require('./blog');
const { getBlog, getConfig, updateConfig, outDir } = require("./utils");
const { getRepos, getUser } = require("./api");

Expand Down Expand Up @@ -129,26 +130,30 @@ function addMetaTags(document, user, config = {}) {
});
}

async function addBlogs(document) {
async function addAndUpdateBlogs(document, conf) {
const blogConfig = await getBlog();
if (blogConfig.length == 0) {
return (document.getElementById("blog_section").style.display = "none");
}
const blogsEl = document.getElementById("blogs");
for (var i = 0; i < blogConfig.length; i++) {
const blogEl = document.createElement("a");
blogEl.setAttribute("href", `./blog/${blogConfig[i].url_title}/`);
const blogData = blogConfig[i];

blogEl.setAttribute("href", `./blog/${blogData.url_title}/`);
blogEl.setAttribute("target", "_blank");
blogEl.innerHTML = `<section>
<img src="${blogConfig[i].top_image}">
<img src="${blogData.top_image}">
<div class="blog_container">
<div class="section_title">${blogConfig[i].title}</div>
<div class="section_title">${blogData.title}</div>
<div class="about_section">
${blogConfig[i].sub_title}
${blogData.sub_title}
</div>
</div>
</section>`;
blogsEl.appendChild(blogEl);

await updateBlogContent(blogData, conf);
}
}

Expand All @@ -169,7 +174,7 @@ module.exports.updateHTML = async (username, opts) => {
console.log("Building HTML/CSS...");

await addRepoDetails(document, username, opts);
await addBlogs(document);
await addAndUpdateBlogs(document, data);
addMetaTags(document, user, data[0]);

document.getElementById(
Expand Down