feat(blog): add first post

EmmaRamirez · Dec 28, 2017 · a62c09e · a62c09e
1 parent 2b2c6ba
commit a62c09e
Show file tree

Hide file tree

Showing 10 changed files with 135 additions and 34 deletions.
diff --git a/docs/bundle.js b/docs/bundle.js
diff --git a/docs/posts/test.html b/docs/posts/test.html
diff --git a/docs/posts/yet-another-blog-post/index.html b/docs/posts/yet-another-blog-post/index.html
@@ -0,0 +1,25 @@
+
+        <html lang='en'>
+            <head>
+                <title>emmaramirez.me</title>
+                <meta charset='utf-8'>
+                <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
+                <link rel="icon" href="/favicon.ico" type="image/x-icon">
+                <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
+            </head>
+            <body class='markdown-body'>
+                <div id='markdown' style='color:white'><h1 id="yet-another-blog-post">Yet Another Blog Post</h1>
+<p>Somewhere in the abyss of my older laptops, lie the carcasses of blog posts past. And among them, there’s a special type: the introductory post.</p>
+<p>You know, that very first post that comes with each re-invention or reincarnation of any of the various blogs I’ve maintained over the past decade. Actually, it’s a terrifying thought: how often I’ve written or drafted a post that would serve as a Hello World to a new domain.
+Domain. Let’s see, there were various discarded tumblrs in my early years, and then there was boltaway.com, and then there was [deadname].code, and a Github hosted site, and emmaramirez.me, only the latter surviving through the maelstrom of html and indecision.</p>
+<p>Maybe my principle problem is that I become enthralled in code, and writing becomes a secondary concern. It doesn’t even matter how much boilerplate comes into the mix, I corrupt it into a full-blown project. (There’s enough shame in it all I force-deleted my old git history on this website’s repo).</p>
+<p>Or I’m just bad at maintaining things (sorry petunias, sorry <code>clickopolis</code>, sorry bag of flour I attempted to raise as a child in high school).*</p>
+<p>A third theory is that life and code both move faster than my ability to freeze them into a blog post, and the fatigue of both anchors me to mediocrity.</p>
+<p>I’m sorry for wasting your time.</p>
+<p>Hello.</p>
+<p><code>*potentionally didn&#39;t happen</code></p>
+</div>
+                <div id='app'></div>
+                <script src='../../bundle.js'></script>
+            </body>
+        </html>
diff --git a/scripts/build.js b/scripts/build.js
@@ -16,6 +16,21 @@ const extension = (element) => {
     return extName === '.md';
 };
 
+const ensureExists = (path, mask, cb) => {
+    if (typeof mask === 'function') {
+        cb = mask;
+        mask = 0777;
+    }
+    fs.mkdir(path, mask, err => {
+        if (err) {
+            if (err.code == 'EEXIST') cb(null);
+            else cb(err);
+        } else {
+            cb(null);
+        }
+    })
+}
+
 const isDirectory = source => fs.lstatSync(source).isDirectory();
 const getDirectories = source => fs.readdirSync(source).map(name => path.join(source, name)).filter(isDirectory);
 
@@ -38,7 +53,30 @@ marked.setOptions({
     smartypants: true
 });
 
-const convertToMarkdown = (data, file) => fs.writeFile(`./docs/posts/${file.split('.')[0]}.html`, (marked(data)), err =>  {
-    if (err) console.error(err);
-    console.log(`Converted ${file} to hml`);
-});
+const buildBlogPost = data => {
+    return `
+        <html lang='en'>
+            <head>
+                <title>emmaramirez.me</title>
+                <meta charset='utf-8'>
+                <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
+                <link rel="icon" href="/favicon.ico" type="image/x-icon">
+                <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
+            </head>
+            <body class='markdown-body'>
+                <div id='markdown' style='color:white'>${marked(data)}</div>
+                <div id='app'></div>
+                <script src='../../bundle.js'></script>
+            </body>
+        </html>`;
+}
+
+const convertToMarkdown = (data, file) => {
+    const fileName = file.split('.')[0];
+    ensureExists(`./docs/posts/${fileName}`, 0744, (err) => noop());
+    const blogPost = buildBlogPost(data);
+    fs.writeFile(`./docs/posts/${fileName}/index.html`, blogPost, err =>  {
+        if (err) console.error(err);
+        console.log(`Converted ${file} to hml`);
+    });
+};
diff --git a/src/components/App/index.ts b/src/components/App/index.ts
@@ -26,25 +26,38 @@ export class App {
     this.data = data || { articles: [], projects: [], links: [] };
   }
 
+  public appBody() {
+    if (document.body.className === 'markdown-body') {
+      const md = document.getElementById('markdown');
+      const markdown = (md ? md : { innerHTML: false }).innerHTML;
+      (md ? md : { innerHTML: false }).innerHTML = '';
+      return markdown;
+    }
+    return `
+      <div class='posts'>
+          <h2>Writing</h2>
+          ${new List(this.data.articles).render()}
+          <h2>Projects</h2>
+          ${new List(this.data.projects, {
+            target: '_blank'
+          }).render()}
+          <img style='display: block; margin: 3rem auto' src='./palms.webp' />
+          <br />
+          <h2>Elsewhere</h2>
+          ${new ElsewhereLinks(this.data.links, {
+            target: '_blank'
+          }).render()}
+          <div class='monospace'>Bitcoin: 16mM8fFqLsAFZ9J6v1Efr3Ba8mT18RuZLW</div>
+          <div class='monospace'>Ethereum: 0x67cee0981f84Cc86A0eC7491e2d19cd8476d0A42</div>
+      </div>`;
+  }
+
   public render() {
     return `
             <div class='app'>
                 ${this.Header.render()}
-                <div class='posts'>
-                    <h2>Writing</h2>
-                    ${new List(this.data.articles).render()}
-                    <h2>Projects</h2>
-                    ${new List(this.data.projects, {
-                      target: '_blank'
-                    }).render()}
-                    <img style='display: block; margin: 3rem auto' src='./palms.webp' />
-                    <br />
-                    <h2>Elsewhere</h2>
-                    ${new ElsewhereLinks(this.data.links, {
-                      target: '_blank'
-                    }).render()}
-                    <div class='monospace'>Bitcoin: 16mM8fFqLsAFZ9J6v1Efr3Ba8mT18RuZLW</div>
-                    <div class='monospace'>Ethereum: 0x67cee0981f84Cc86A0eC7491e2d19cd8476d0A42</div>
+                <div class='blog-post'>
+                  ${this.appBody()}
                 </div>
             </div>
         `;

diff --git a/src/data.json b/src/data.json
@@ -1,8 +1,8 @@
 {
     "articles": [
         {
-            "link": "#",
-            "title": "None Yet"
+            "link": "./posts/yet-another-blog-post",
+            "title": "Yet Another Blog Post"
         }
     ],
 

diff --git a/src/global.styl b/src/global.styl
@@ -31,4 +31,22 @@ h2
         opacity 1
 
 .dark .elsewhere-link
-    filter invert(100%)
+    filter invert(100%)
+
+.blog-post
+    font-size 1.15rem
+    margin 0 auto
+    max-width 60rem
+    h1
+        font-size 2rem
+        font-weight light
+        margin-bottom 1rem
+        margin-left 1rem
+        margin-top 3rem
+    p
+        font-size 1.25rem
+        line-height 1.4
+        margin 1rem
+    code
+        background #eee
+        padding .25rem
diff --git a/src/posts/12-25-17/test.json b/src/posts/12-25-17/test.json
diff --git a/src/posts/12-25-17/test.md b/src/posts/12-25-17/test.md
diff --git a/src/posts/12-25-17/yet-another-blog-post.md b/src/posts/12-25-17/yet-another-blog-post.md
@@ -0,0 +1,18 @@
+# Yet Another Blog Post
+
+Somewhere in the abyss of my older laptops, lie the carcasses of blog posts past. And among them, there's a special type: the introductory post.
+
+You know, that very first post that comes with each re-invention or reincarnation of any of the various blogs I've maintained over the past decade. Actually, it's a terrifying thought: how often I've written or drafted a post that would serve as a Hello World to a new domain.
+Domain. Let's see, there were various discarded tumblrs in my early years, and then there was boltaway.com, and then there was [deadname].code, and a Github hosted site, and emmaramirez.me, only the latter surviving through the maelstrom of html and indecision.
+
+Maybe my principle problem is that I become enthralled in code, and writing becomes a secondary concern. It doesn't even matter how much boilerplate comes into the mix, I corrupt it into a full-blown project. (There's enough shame in it all I force-deleted my old git history on this website's repo).
+
+Or I'm just bad at maintaining things (sorry petunias, sorry `clickopolis`, sorry bag of flour I attempted to raise as a child in high school).*
+
+A third theory is that life and code both move faster than my ability to freeze them into a blog post, and the fatigue of both anchors me to mediocrity.
+
+I'm sorry for wasting your time.
+
+Hello.
+
+`*potentionally didn't happen`