Merge pull request dart-lang/markdown#120 from srawlins/website
Website
diff --git a/pkgs/markdown/example/app.dart b/pkgs/markdown/example/app.dart
new file mode 100644
index 0000000..015a267
--- /dev/null
+++ b/pkgs/markdown/example/app.dart
@@ -0,0 +1,56 @@
+import 'dart:async';
+import 'dart:html';
+import 'package:markdown/markdown.dart' as md;
+
+final markdownInput = querySelector('#markdown') as TextAreaElement;
+final htmlDiv = querySelector('#html') as DivElement;
+final nullSanitizer = new NullTreeSanitizer();
+const typing = const Duration(milliseconds: 150);
+final introText = r'''Markdown is the **best**!
+
+* It has lists.
+* It has [links](http://dartlang.org).
+* It has _so much more_...''';
+
+void main() {
+ markdownInput.onKeyUp.listen(_renderMarkdown);
+
+ String savedMarkdown = window.localStorage['markdown'];
+
+ if (savedMarkdown != null &&
+ savedMarkdown.isNotEmpty &&
+ savedMarkdown != introText) {
+ markdownInput.value = savedMarkdown;
+ _renderMarkdown();
+ } else {
+ _typeItOut(introText, 82);
+ }
+}
+
+void _renderMarkdown([Event event]) {
+ var markdown = markdownInput.value;
+ htmlDiv.setInnerHtml(md.markdownToHtml(markdown),
+ treeSanitizer: nullSanitizer);
+ if (event != null) {
+ // Not simulated typing. Store it.
+ window.localStorage['markdown'] = markdown;
+ }
+}
+
+void _typeItOut(String msg, int pos) {
+ addCharacter() {
+ if (pos > msg.length) {
+ return;
+ }
+ markdownInput.value = msg.substring(0, pos);
+ markdownInput.focus();
+ _renderMarkdown();
+ pos++;
+ new Timer(typing, addCharacter);
+ }
+ new Timer(typing, addCharacter);
+}
+
+class NullTreeSanitizer implements NodeTreeSanitizer {
+ void sanitizeTree(Node node) {}
+}
diff --git a/pkgs/markdown/example/index.html b/pkgs/markdown/example/index.html
new file mode 100644
index 0000000..adb95cd
--- /dev/null
+++ b/pkgs/markdown/example/index.html
@@ -0,0 +1,42 @@
+<html>
+ <head>
+ <link rel="stylesheet" href="style.css"></link>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic">
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400">
+ <script type="application/dart" src="app.dart"></script>
+ <script src="packages/browser/dart.js"></script>
+ <title>Dart Markdown Live Editor</title>
+ </head>
+ <body>
+ <div class="container">
+ <header>
+ <div class="toolbar">
+ <h2>Dart Markdown Live Editor</h2>
+ <span style="display: flex; flex: 1;"></span>
+ <a class="" href="https://github.com/dart-lang/markdown">
+ <svg class="octicon" height="32" version="1.1" viewBox="0 0 16 16" width="32">
+ <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
+ </svg>
+ </a>
+ </div>
+ </header>
+ <div class="main">
+ <div class="card">
+ <div class="toolbar">
+ <h2>Markdown</h2>
+ </div>
+ <div style="padding: 8px; display: flex; height: 100%;">
+ <textarea rows="16" id="markdown">
+ </textarea>
+ </div>
+ </div>
+ <div class="card">
+ <div class="toolbar">
+ <h2>HTML</h2>
+ </div>
+ <div style="padding: 8px;" id="html"></div>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/pkgs/markdown/example/style.css b/pkgs/markdown/example/style.css
new file mode 100644
index 0000000..069ff97
--- /dev/null
+++ b/pkgs/markdown/example/style.css
@@ -0,0 +1,104 @@
+html, body {
+ background-color: rgb(250, 250, 250);
+ font-family: Roboto,"Helvetica Neue",sans-serif;
+ font-size: 16px;
+ margin: 0;
+}
+
+.container {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ width: 100%;
+}
+
+.main {
+ align-items: stretch;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ height: 100%;
+ margin: 32px;
+}
+
+.card {
+ /* Styled like Material Cards. */
+ color: rgba(0, 0, 0, 0.87);
+ background-color: white;
+ border-radius: 2px;
+ box-sizing: border-box;
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2),
+ 0 1px 1px 0 rgba(0, 0, 0, .14),
+ 0 2px 1px -1px rgba(0, 0, 0, .12);
+ margin: 8px;
+
+ /* Positioned next to each other. */
+ display: flex;
+ flex: 1 1 50%;
+ flex-direction: column;
+ max-height: 100%;
+ max-width: 50%;
+ min-height: 400px;
+}
+
+.toolbar {
+ /* Styled like Material Toolbar. */
+ align-items: center;
+ background-color: #22d3c5; /* Taken from webdev.dartlang.org. */
+ box-sizing: border-box;
+ color: rgba(0, 0, 0, 0.87);
+ display: flex;
+ font-size: 20px;
+ line-height: 1.4;
+ margin: 0;
+ min-height: 64px;
+ padding: 0 16px;
+ position: relative;
+ width: 100%;
+}
+
+.toolbar h2 {
+ font-size: inherit;
+ font-weight: inherit;
+ margin: inherit;
+}
+
+.toolbar a:link,
+.toolbar a:visited {
+ color: rgba(0, 0, 0, 0.87);
+}
+
+.toolbar svg {
+ fill: currentColor;
+}
+
+.card .toolbar {
+ border-radius: 3px 3px 0 0;
+}
+
+.textarea-container {
+ display: flex;
+ height: 100%;
+ padding: 8px;
+}
+
+textarea {
+ border-color: rgba(0, 0, 0, 0.12);
+ border-width: 0 0 1px;
+ box-sizing: border-box;
+ color: rgba(0, 0, 0, 0.87);
+ font-family: "Roboto Mono",monospace;
+ font-size: 100%;
+ line-height: 26px;
+ overflow: hidden;
+ padding: 2px 2px 1px;
+ width: 100%;
+}
+
+textarea:focus {
+ border-color: #22d3c5; /* Taken from webdev.dartlang.org. */
+ border-width: 0 0 2px;
+ outline: 0;
+ padding-bottom: 0;
+}
diff --git a/pkgs/markdown/pubspec.yaml b/pkgs/markdown/pubspec.yaml
index 96d67d1..1bd960e 100644
--- a/pkgs/markdown/pubspec.yaml
+++ b/pkgs/markdown/pubspec.yaml
@@ -7,6 +7,8 @@
sdk: '>=1.12.0 <2.0.0'
dev_dependencies:
args: '^0.13.3+1'
+ # Only for example/app.dart.
+ browser: any
collection: ^1.2.0
html: '^0.12.2'
path: '^1.3.1'
