Technical/issue 133 markdown for blog posts

[thescientist13]

Summary

resolves #133

1. Created a standalone post-template.js for blog posts
2. Moved <app-blog-post> to template instead
3. Testing with one blog post right now
4. Another example of handling route matching and / by using a lastIndexOf hack

TODOs

1. fix <a> link CSS rendering
   
2. refactor all blog posts to use post-template.js
3. Clean up blog-template.js
   • remove the import line for <app-blog-post>
   • remove unrelated / unused CSS
4. Critical - fix invariant error bug with Greenwood

Observations

Should HTML work out of the box without fence blocks.

For this markdown I am getting this HTML

Made this a little while ago but felt it would be fun to share, called <a href="https://github.com/thescientist13/git-explorer" target="_blank" rel="noopener" @onclick="captureOutboundLink('https://github.com/thescientist13/git-explorer'); return false;">**Git Explorer**.</a>

It is a NodeJS package you can install from NPM that will provide a nice browser based comparison tool for any `git` repo on your local machine.

![Project Screenshot](https://raw.githubusercontent.com/thescientist13/git-explorer/master/git-explorer.png)

Checkout the _README.md_ for more info and feel free to submit an issue if you see a bug or would like to request a feature. 👋

I am seeing this escaped HTML.

Maybe a lit-html thing?

edit: above was resolved

[thescientist13]

Tried upgrading to v0.6.0 but still seeing unescaped content using HTML (unless there are no line breaks) or markdown? 🤔

blog/2020/04/07

---
template: 'post'
title: 'Git Explorer'
date: '04.07.2020'
image: '/assets/blog-post-images/git.png'
---


Made this a little while ago but felt it would be fun to share, called <a href="https://github.com/thescientist13/git-explorer" target="_blank" rel="noopener" @onclick="captureOutboundLink('https://github.com/thescientist13/git-explorer'); return false;"><b>Git Explorer</b>.</a>

It is a NodeJS package you can install from NPM that will provide a nice browser based comparison tool for any `git` repo on your local machine.

![Project Screenshot](https://raw.githubusercontent.com/thescientist13/git-explorer/master/git-explorer.png)

Checkout the _README.md_ for more info and feel free to submit an issue if you see a bug or would like to request a feature. 👋

blog/2018/11/19

Notice there that in the screenshot you can see escaped HTML right were all the markup is separated out.

---
template: 'blog'
title: 'Contributary'
---

<app-blog-post
  title='Contributary'
  description='A project for helping connect open source with the open source community.'
  date='11.19.2018' 
  image='https://s3.amazonaws.com/hosted.contributary.community/media/contributary-logo-invert.png'>

  <div>            
    <p>From my own personal experience, I can say getting involved in open source has certainly helped me mature multiple aspects of my professional and personal life.  It was for this reason that as my job responsibilities started to include helping mentoring and training junior developers, I would often use open source as a good jumping off point for getting involved in software development.  Although <i>I</i> knew where to look, for someone new to their respective community and not familiar with all the tools and languages or even GitHub itself, I realized there was a way to help make a difference.</p>

    <p><a target="_blank" href="https//www.contributary.community">Contributary</a> is a new project I have started with the goal of helping connect open source projects with the open source community by providing a webapp and general tools to make searching out and contributing to open source projects easier and more intuitive.  
    </p>

    <img src="https://s3.amazonaws.com/hosted.contributary.community/media/contributary-screenshot-0.2.0.png" alt="Contributary screeshot"/>

    <p>Contributary has only just recently launched in an early release phase and is eager to look for its own set of contributors.  The project is <a target="_blank" href="https://github.com/ContributaryCommunity" @onclick="captureOutboundLink('https://github.com/ContributaryCommunity'); return false;">open source</a> so you can use Contributary to find ways to contribute to Contributary (much meta)! 🤓</p>
  </div>
  
</app-blog-post>

[hutchgrant]

---
title: 'Git Explorer'
---

Made this a little while ago but felt it would be fun to share, called <a href="https://github.com/thescientist13/git-explorer"><b>Git Explorer</b>.</a>

It is a NodeJS package you can install from NPM that will provide a nice browser based comparison tool for any `git` repo on your local machine.

![Project Screenshot](https://raw.githubusercontent.com/thescientist13/git-explorer/master/git-explorer.png)

Checkout the _README.md_ for more info and feel free to submit an issue if you see a bug or would like to request a feature. 👋

Works perfectly fine. So some syntax in your link is bugging it up.

edit: this broke it:

@onclick="captureOutboundLink('https://github.com/thescientist13/git-explorer'); return false;

Yea @onclick did not work properly.

[hutchgrant]

Second one works fine too. Except you have some mysterious blank spaces

---
template: 'blog'
title: 'Contributary'
---

  <div>            
    <p>From my own personal experience, I can say getting involved in open source has certainly helped me mature multiple aspects of my professional and personal life.  It was for this reason that as my job responsibilities started to include helping mentoring and training junior developers, I would often use open source as a good jumping off point for getting involved in software development.  Although <i>I</i> knew where to look, for someone new to their respective community and not familiar with all the tools and languages or even GitHub itself, I realized there was a way to help make a difference.</p>
    
    <p><a target="_blank" href="https//www.contributary.community">Contributary</a> is a new project I have started with the goal of helping connect open source projects with the open source community by providing a webapp and general tools to make searching out and contributing to open source projects easier and more intuitive.  
    </p>
    
    <img src="https://s3.amazonaws.com/hosted.contributary.community/media/contributary-screenshot-0.2.0.png" alt="Contributary screeshot"/>
    
    <p>Contributary has only just recently launched in an early release phase and is eager to look for its own set of contributors.  The project is <a target="_blank" href="https://github.com/ContributaryCommunity" @onclick="captureOutboundLink('https://github.com/ContributaryCommunity'); return false;">open source</a> so you can use Contributary to find ways to contribute to Contributary (much meta)! 🤓</p>
  </div>

[thescientist13]

Thanks for taking a look @hutchgrant

Yea @OnClick did not work properly.

That's Lit's event handling. So that not's supported then? Should I try just HTML onclick? Maybe a parsing / compatibility issue in wc-markdown-loader?

Second one works fine too. Except you have some mysterious blank spaces

Line breaks, or something else? Isn't whitespace ignored in HTML or am I missing. Will play around with it some more either way.

[thescientist13]

Now seeing this issue
ProjectEvergreen/greenwood#371

[thescientist13]

A PR has opened and was also able to confirm that it has solved the problem here in this project! 🎉
ProjectEvergreen/greenwood#383