adding showdown so it parses the message correctly

shijiezhou1 · Aug 2, 2019 · 05e6387 · 05e6387
1 parent 045a448
commit 05e6387
Show file tree

Hide file tree

Showing 8 changed files with 527 additions and 28 deletions.
diff --git a/app/styles/app.scss b/app/styles/app.scss
@@ -45,10 +45,22 @@
   margin-top: 110px;
 }
 
-.postTitleContentStyle {
+// home/
+.postCardStyle {
   img.md-card-image {
     width: 100%;
   }
+  .postCardContentStyle{
+    overflow-wrap: break-word;
+  }
+}
+
+// post/1
+.postContentStyle {
+  width: 600px;
+  img {
+    width: inherit;
+  }
 }
 
 .fakeHeight {

diff --git a/app/templates/components/article-list.hbs b/app/templates/components/article-list.hbs
@@ -1,17 +1,17 @@
 {{#paper-card class=mdWhiteframe_10dp as |card|}}
-  <a class="postTitleContentStyle" href="javascript:void(0);" onClick={{action articleClick value.id}}>
+  <a class="postCardStyle" href="javascript:void(0);" onClick={{action articleClick value.id}}>
     {{card.image  src=value.img alt=value.title title=value.title}}
     {{#card.title as |title|}}
       {{#title.text as |text|}}
         {{#text.headline}}{{value.title}}{{/text.headline}}
       {{/title.text}}
     {{/card.title}}
-    {{#card.content}}
+    {{#card.content class="postCardContentStyle"}}
       {{value.text}}
     {{/card.content}}
   </a>
   {{#card.actions}}
-{{!--    TODO making api call to add like--}}
+  {{!--    TODO making api call to add like--}}
     {{#paper-button iconButton=true onClick=(action (mut oneTimeIcon) "favorite") }}
       {{paper-icon oneTimeIcon}}
     {{/paper-button}}

diff --git a/app/templates/components/article-share-menu.hbs b/app/templates/components/article-share-menu.hbs
@@ -1,23 +1,3 @@
-{{!--{{#paper-speed-dial--}}
-{{!--    animation=animation direction=direction--}}
-{{!--    open=open onToggle=(action (mut open)) as |dial|}}--}}
-{{!--  {{#dial.trigger}}--}}
-{{!--    {{#paper-button iconButton=true}}--}}
-{{!--      {{paper-icon "share"}}--}}
-{{!--    {{/paper-button}}--}}
-{{!--  {{/dial.trigger}}--}}
-
-{{!--  {{#dial.actions as |actions|}}--}}
-{{!--    {{#actions.action}}{{#fb-share-button}}Share{{/fb-share-button}}{{/actions.action}}--}}
-{{!--    {{#actions.action}}{{#vk-share-button}}Share{{/vk-share-button}}{{/actions.action}}--}}
-{{!--    {{#actions.action}}{{#twitter-share-button}}Tweet{{/twitter-share-button}}{{/actions.action}}--}}
-{{!--    {{#actions.action}}{{#linkedin-share-button}}Share{{/linkedin-share-button}}{{/actions.action}}--}}
-{{!--    {{#actions.action}}{{#gplus-share-button}}Share{{/gplus-share-button}}{{/actions.action}}--}}
-{{!--    {{#actions.action}}{{#email-share-button}}Share{{/email-share-button}}{{/actions.action}}--}}
-{{!--    {{#actions.action}}{{#reddit-share-button}}Share{{/reddit-share-button}}{{/actions.action}}--}}
-{{!--  {{/dial.actions}}--}}
-{{!--{{/paper-speed-dial}}--}}
-{{!-- TODO adding all the setting for all the social media element tag. but the linkedin seems bad and the email is not working properly--}}
 {{#ember-popover event="click"}}
   {{#fb-share-button url=url quote=quote}}Share{{/fb-share-button}}<br>
   {{#twitter-share-button url=url title=quote via=url}}Tweet{{/twitter-share-button}}<br>

diff --git a/app/templates/home.hbs b/app/templates/home.hbs
@@ -1,6 +1,7 @@
 {{! TODO find a way to combine application container and flex container together, because we used those tag in three different place already.
   it is alway locate on the center of the page
  }}
+{{!--TODO using ember content loader to show the loading process instead of waiting--}}
 <div class="flex-container">
   {{#each evenPost as |value|}}
     {{article-list value=value articleClick=(action "submit")}}

diff --git a/app/templates/post.hbs b/app/templates/post.hbs
@@ -1,8 +1,10 @@
-<div>
+<div class="postContentStyle">
+  <img src={{model.img}} alt={{model.title}} draggable="false">
   <h3>
     {{model.title}}
   </h3>
-
+  {{markdown-to-html model.text}}
+{{!--  TODO create a side components - markdown-nav or something like that to render all the markdown index link to the id. when user click on the link, it can reposition to the article location.--}}
   {{!-- {{#paper-card as |card|}}
     {{#card.title as |title|}}
       {{#title.text as |text|}}

diff --git a/mirage/fixtures/posts.js b/mirage/fixtures/posts.js
@@ -12,7 +12,7 @@ export default [
   {
     "id": 2,
     "title": "2-Rails is omakase",
-    "text": "Other text",
+    "text": "#Markdown is cool [link](http://emberjs.com) #Markdown is cool [link](http://emberjs.com) #Markdown is cool [link](http://emberjs.com) ### markdown is here as well",
     "img": "https://res.cloudinary.com/practicaldev/image/fetch/s--yuvBDNvQ--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://res.cloudinary.com/practicaldev/image/fetch/s--KDeQCWRL--/c_imagga_scale%2Cf_auto%2Cfl_progressive%2Ch_420%2Cq_auto%2Cw_1000/https://thepracticaldev.s3.amazonaws.com/i/fobvk7m7w88zk809a9b6.png",
     "url": "www.google.com",
     "iconButtonList": {favorite: "favorite", share: "share"},
@@ -22,7 +22,146 @@ export default [
   {
     "id": 3,
     "title": "3-Master infor",
-    "text": "Other random text",
+    "text": "# Ember CLI Showdown\n" +
+      "\n" +
+      "[![Build Status](https://travis-ci.org/gcollazo/ember-cli-showdown.svg?branch=master)](https://travis-ci.org/gcollazo/ember-cli-showdown)\n" +
+      "[![Ember Observer Score](http://emberobserver.com/badges/ember-cli-showdown.svg)](http://emberobserver.com/addons/ember-cli-showdown)\n" +
+      "\n" +
+      "This addon provides a component that transforms [Markdown](http://en.wikipedia.org/wiki/Markdown) into valid HTML.\n" +
+      "\n" +
+      "* Fastboot compatible\n" +
+      "\n" +
+      "## Requirements\n" +
+      "\n" +
+      "* ember-cli >= 2.16.0 (if on older version of ember-cli, target ember-cli-showdown@3)\n" +
+      "\n" +
+      "## Usage\n" +
+      "From within your Ember CLI application, run the following:\n" +
+      "\n" +
+      "- `ember install ember-cli-showdown`\n" +
+      "\n" +
+      "Passing a markdown string inline:\n" +
+      "\n" +
+      "```handlebars\n" +
+      "{{markdown-to-html \"#Markdown is cool [link](http://emberjs.com)\"}}\n" +
+      "```\n" +
+      "\n" +
+      "```html\n" +
+      "<!-- Output -->\n" +
+      "<h1>Markdown is cool <a href=\"http://emberjs.com\">link</a></h1>\n" +
+      "```\n" +
+      "\n" +
+      "You can also pass a bound value:\n" +
+      "\n" +
+      "```handlebars\n" +
+      "{{markdown-to-html postContent}}\n" +
+      "```\n" +
+      "\n" +
+      "### Showdown Options\n" +
+      "\n" +
+      "You can use [configuration settings from Showdown][showdown-config]:\n" +
+      "\n" +
+      "```handlebars\n" +
+      "{{markdown-to-html\n" +
+      "  markdown=postContent\n" +
+      "  strikethrough=true\n" +
+      "  literalMidWordUnderscores=true\n" +
+      "  simplifiedAutoLink=true}}\n" +
+      "```\n" +
+      "\n" +
+      "[showdown-config]: https://github.com/showdownjs/showdown#valid-options\n" +
+      "\n" +
+      "#### Global Showdown Options\n" +
+      "\n" +
+      "Global options are supported as of 2.11.x.  This lets you define options that will be used\n" +
+      "for showdown options that were not provided as an attribute.\n" +
+      "\n" +
+      "An example where you always want to auto link:\n" +
+      "\n" +
+      "```js\n" +
+      "// config/environment.js\n" +
+      "module.exports = function(environment) {\n" +
+      "  var ENV = {\n" +
+      "    showdown: {\n" +
+      "      simplifiedAutoLink: true\n" +
+      "    }\n" +
+      "  }\n" +
+      "\n" +
+      "  return ENV;\n" +
+      "}\n" +
+      "```\n" +
+      "\n" +
+      "### Showdown Extensions\n" +
+      "\n" +
+      "You can load [Showdown Extensions](https://github.com/showdownjs/showdown/wiki/extensions) by specifying the\n" +
+      "\"extensions\" property when initializing your component:\n" +
+      "\n" +
+      "```handlebars\n" +
+      "{{markdown-to-html\n" +
+      "  markdown=postContent\n" +
+      "  extensions=myExtensionList}}\n" +
+      "```\n" +
+      "\n" +
+      "```handlebars\n" +
+      "{{markdown-to-html\n" +
+      "  markdown=postContent\n" +
+      "  extensions='foo bar baz'}}\n" +
+      "```\n" +
+      "\n" +
+      "(`myExtensionList` can be an array of strings or a space separated string)\n" +
+      "\n" +
+      "Note that you'll have to register your extensions with Showdown first.\n" +
+      "For example, in an initializer:\n" +
+      "\n" +
+      "```js\n" +
+      "// app/initializers/register-showdown-extensions.js\n" +
+      "import showdown from 'showdown';\n" +
+      "\n" +
+      "export function initialize() {\n" +
+      "  showdown.extension(\"myExtensionName\", function() {\n" +
+      "    return [{\n" +
+      "      type: 'html',\n" +
+      "      regex: '<blockquote>',\n" +
+      "      replace: '<blockquote class=\"blockquote\">'\n" +
+      "    }];\n" +
+      "  });\n" +
+      "}\n" +
+      "\n" +
+      "export default {\n" +
+      "  name: 'register-showdown-extensions',\n" +
+      "  initialize\n" +
+      "};\n" +
+      "```\n" +
+      "\n" +
+      "[showdown-extensions]: https://github.com/showdownjs/showdown/wiki/extensions\n" +
+      "\n" +
+      "## 3.x to 4.3 migration\n" +
+      "* Global `showdown` is no longer supported.  Must be imported via `import showdown from 'showdown'`\n" +
+      "* Remove any use of `FastBoot.require('require')` with `import showdown from 'showdown'`\n" +
+      "\n" +
+      "## Dependencies\n" +
+      "* [Showdown](https://github.com/showdownjs/showdown)\n" +
+      "\n" +
+      "## Development\n" +
+      "\n" +
+      "* `git clone https://github.com/gcollazo/ember-cli-showdown.git`\n" +
+      "* `cd ember-cli-showdown`\n" +
+      "* `npm install`\n" +
+      "* `bower install`\n" +
+      "\n" +
+      "## Previewing\n" +
+      "\n" +
+      "* `ember server`\n" +
+      "* Visit your app at http://localhost:4200.\n" +
+      "\n" +
+      "## Running Tests\n" +
+      "\n" +
+      "* `ember test`\n" +
+      "* `ember test --server`\n" +
+      "\n" +
+      "## Building\n" +
+      "\n" +
+      "* `ember build`\n",
     "url": "www.google.com",
     "img": "https://res.cloudinary.com/practicaldev/image/fetch/s--yuvBDNvQ--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://res.cloudinary.com/practicaldev/image/fetch/s--KDeQCWRL--/c_imagga_scale%2Cf_auto%2Cfl_progressive%2Ch_420%2Cq_auto%2Cw_1000/https://thepracticaldev.s3.amazonaws.com/i/fobvk7m7w88zk809a9b6.png",
     "iconButtonList": {favorite: "favorite", share: "share"},