caraya/alternatives.html

## alternatives.html
<!doctype html>
<!--
This is how I would like to use athena-document
-->
<html>
<head>
  <meta
        name="viewport"
        content="width=device-width, minimum-scale=1.0, initial-scale=1.0,
        user-scalable=yes">
  <title>athena-document: Demo</title>

  <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
  <link rel="import" href="athena-document.html">

</head>
<body unresolved>
  <athena-document url="alternatives.md"></athena-document>
</body>
</html>

## alternatives.md

      
    Raw
  

              alternatives.md
            
          
    Markdown Alternatives

There are 3 different markdown components that look promising
marked-element

marked-element was created asa part of the Polymer elements and was the first markdown parsing element that I saw. It looks promising except for one thing: I haven't figured out how to use highlight.js with it. This renders the tool less than ideal for the kind of writing I want to do.
re-markable

re-markable
juicy-markdown

juicy-markdown presents the best selection of markdown elements. It allows you to use Github Flavored Markdown but it forces you to use the download of a scrapped version of the Github CSS file. This doesn't always work.
Others

webcomponents.info has a selection of Markdown viewer and editor components. re-markable and juicy-markdown were selected from that list.

  
## athena-document.html
<link rel="import" href="bower_components/polymer/polymer.html">
<!-- athena-document specific-->
<!-- AJAX to pull content -->
<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">
<!-- Markdown Parser -->
<link rel="import" href="bower_components/juicy-markdown/juicy-markdown.html">
<!-- Fonts -->
<!-- Roboto -->
<link rel="import" href="bower_components/font-roboto/roboto.html">
<!-- Source Code Pro -->
<link rel="import" href="sourcecode.html">


<dom-module id="athena-document">

  <template>
    <iron-ajax url="{{url}}" last-response="[[data]]" auto></iron-ajax>
    <juicy-markdown value="[[data]]"></juicy-markdown>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'athena-document',
    properties: {
      url: {
        type:String,
        value: ''
      },
      value: {
        type: String,
        value: '',
        notify: true,
        observer: 'dataChanged'
        // dataChanged is defined in juicy-markdown. Do I need to define it here too?
      }
    }
 });
</script>

## explanation.txt
Rob,

Here's an explanation of what I'd like athena-document to do.

Use it as a markdown viewer in an web page so that I can insert the content of alternatives.md into alternatives.html using athena-document
	<!doctype html>
	<!--
	This is how I would like to use athena-document
	-->
	<html>
	<head>
	<meta
	name="viewport"
	content="width=device-width, minimum-scale=1.0, initial-scale=1.0,
	user-scalable=yes">
	<title>athena-document: Demo</title>

	<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
	<link rel="import" href="athena-document.html">

	</head>
	<body unresolved>
	<athena-document url="alternatives.md"></athena-document>
	</body>
	</html>
	<link rel="import" href="bower_components/polymer/polymer.html">
	<!-- athena-document specific-->
	<!-- AJAX to pull content -->
	<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">
	<!-- Markdown Parser -->
	<link rel="import" href="bower_components/juicy-markdown/juicy-markdown.html">
	<!-- Fonts -->
	<!-- Roboto -->
	<link rel="import" href="bower_components/font-roboto/roboto.html">
	<!-- Source Code Pro -->
	<link rel="import" href="sourcecode.html">


	<dom-module id="athena-document">

	<template>
	<iron-ajax url="{{url}}" last-response="[[data]]" auto></iron-ajax>
	<juicy-markdown value="[[data]]"></juicy-markdown>
	</template>
	</dom-module>
	<script>
	Polymer({
	is: 'athena-document',
	properties: {
	url: {
	type:String,
	value: ''
	},
	value: {
	type: String,
	value: '',
	notify: true,
	observer: 'dataChanged'
	// dataChanged is defined in juicy-markdown. Do I need to define it here too?
	}
	}
	});
	</script>
	Rob,

	Here's an explanation of what I'd like athena-document to do.

	Use it as a markdown viewer in an web page so that I can insert the content of alternatives.md into alternatives.html using athena-document