6 files changed, 156 insertions(+), 8 deletions(-)

M grita.rb
M views/grito.haml
M views/index.haml
M views/layout.haml
M views/style.css
M views/style.less

@@ 6,6 6,7 @@ require 'dm-validations'
 require 'dm-timestamps'
 require 'dm-migrations'
 require 'rqr'
+require 'rdiscount'
 
 #config
 set :haml, :format => :html5


@@ 43,6 44,9 @@ end
 get '/:grito' do
     @grito = Grito.first(:id => params[:grito].to_i(36))
     raise "Invalid Post" if @grito.nil?
+    
+    @markdown = RDiscount.new(@grito.text)
+    
     haml :grito
 end
 

@@ 1,5 1,8 @@
 %h1= @grito.title
-%p= @grito.text
-%h2 Share
-%p=	"http://grita.heroku.com/#{@grito.gethash}"
+= @markdown.to_html
+%hr
+%h1 Comparte este texto.
+%p Puedes usar esta dirección para pasar a tus amigos por web:
+%input.url{:value => "http://grita.heroku.com/#{@grito.gethash}"}
+%p o puedes usar esta imagen para imprimirla y compartir físicamente con el mundo:
 %img#qrcode{:alt=>"Código QR", :src=>"/qr/#{@grito.gethash}.png"}=
\ No newline at end of file

@@ 10,9 10,18 @@
 				Su texto ha sido guardado!
 				%a{:href=>"/#{@grito.gethash}"} De click aquí para verlo.
 	%h1 Título
-	%input.title{:type => 'text', :name => 'title'}
+	-unless @grito.nil?
+		-unless @grito.errors.empty?
+			%input.title{:type => 'text', :name => 'title', :Value => @grito.title}
+		-else
+			%input.title{:type => 'text', :name => 'title'}
+	-else
+		%input.title{:type => 'text', :name => 'title'}
 	%br
 	%h1 Texto
 	%textarea.text{:name => 'text', :cols => '76', :rows => '20'}
+		-unless @grito.nil?
+			-unless @grito.errors.empty?
+				=@grito.text
 	%br
 	%input.submit{:type => 'submit', :value => 'Gritalo!'}=
\ No newline at end of file

@@ 1,7 1,11 @@
 !!! 5
 %html
 	%head
-		%title ¡Grita!
+		-unless @grito.nil?
+			-if @grito.errors.empty?
+				%title= "#{@grito.title} - ¡Grita!"
+			-else
+				%title ¡Grita!
 		%link{:rel => 'stylesheet', :type => 'text/css', :href => '/style.css', :title => 'default'}
 		%meta{'http-equiv' => 'Contet-Type', :content => 'text/html; charset=utf-8' }/
 	%body

@@ 2,6 2,7 @@
   margin: 0;
   padding: 0;
 }
+img { border: 0; }
 body {
   color: #666666;
   background-color: #ffffff;


@@ 35,6 36,16 @@ body {
   font-size: 2.4em;
   color: #222222;
 }
+#body h2 {
+  margin: 20px 90px;
+  font-size: 1.8em;
+  color: #222222;
+}
+#body h3 {
+  margin: 20px 90px;
+  font-size: 1.6em;
+  color: #222222;
+}
 #body p {
   margin: 20px 90px;
   font-size: 1.6em;


@@ 42,6 53,53 @@ body {
   text-indent: 3em;
   text-align: justify;
 }
+#body ul {
+  margin: 20px 90px;
+  font-size: 1.4em;
+  line-height: 1.8em;
+}
+#body ol {
+  margin: 20px 90px;
+  font-size: 1.4em;
+  line-height: 1.8em;
+}
+#body ul li p {
+  font-size: 1em;
+  margin: 0;
+  line-height: 1em;
+  text-indent: 0;
+}
+#body ol li p {
+  font-size: 1em;
+  margin: 0;
+  line-height: 1em;
+  text-indent: 0;
+}
+#body ul li { margin-left: 80px; }
+#body ol li { margin-left: 80px; }
+#body blockquote {
+  margin: 20px 170px;
+  text-align: justify;
+  border-left: 2px solid #eeeeee;
+  padding-left: 5px;
+}
+#body blockquote blockquote { margin: 10px; }
+#body pre {
+  margin: 20px 170px;
+  border: 1px solid #999999;
+  background-color: #eeeeee;
+  padding: 10px;
+}
+#body pre code {
+  font-size: 1.6em;
+  line-height: 1.8em;
+}
+#body blockquote p {
+  margin: 5px 0;
+  text-indent: 0;
+  font-size: 1.4em;
+  line-height: 1.8em;
+}
 hr {
   margin: 10px;
   border: 0;


@@ 49,7 107,7 @@ hr {
 }
 #body #qrcode {
   display: block;
-  margin: 10px 250px;
+  margin: 10px 90px;
 }
 #body input.title {
   border: 1px solid #eeeeee;


@@ 58,6 116,13 @@ hr {
   margin: 0 90px;
   width: 770px;
 }
+#body input.url {
+  border: 1px solid #eeeeee;
+  font-size: 1.6em;
+  padding: 5px;
+  margin: 0 90px;
+  width: 770px;
+}
 #body textarea.text {
   border: 1px solid #eeeeee;
   font-size: 1.6em;

@@ 13,6 13,10 @@
 	padding: 0;
 }
 
+img{
+	border: 0;
+}
+
 body{
 	color: @text_color;
 	background-color: @background_color;


@@ 54,6 58,18 @@ body{
 	color: @emphasis_color;
 }
 
+#body h2{
+	margin: 20px 90px;
+	font-size: 1.8em;
+	color: @emphasis_color;
+}
+
+#body h3{
+	margin: 20px 90px;
+	font-size: 1.6em;
+	color: @emphasis_color;
+}
+
 #body p{
 	margin: 20px 90px;
 	font-size: 1.6em;


@@ 62,6 78,53 @@ body{
 	text-align: justify;
 }
 
+#body ul, #body ol{
+	margin: 20px 90px;
+	font-size: 1.4em;
+	line-height: 1.8em;
+}
+
+#body ul li p, #body ol li p{
+	font-size: 1em;
+	margin: 0;
+	line-height: 1em;
+	text-indent: 0;
+}
+
+#body ul li, #body ol li{
+	margin-left: 80px;
+}
+
+#body blockquote{
+	margin: 20px 170px;
+	text-align: justify;
+	border-left: 2px solid @border_color;
+	padding-left: 5px;
+}
+
+#body blockquote blockquote{
+	margin: 10px;
+}
+
+#body pre{
+	margin: 20px 170px;
+	border: 1px solid @light_color;
+	background-color: @border_color;
+	padding: 10px;
+}
+
+#body pre code{
+	font-size: 1.6em;
+	line-height: 1.8em;
+}
+
+#body blockquote p{
+	margin: 5px 0;
+	text-indent: 0;
+	font-size: 1.4em;
+	line-height: 1.8em;
+}
+
 hr{
 	margin: 10px;
 	border: 0;


@@ 70,10 133,10 @@ hr{
 
 #body #qrcode{
 	display: block;
-	margin: 10px 250px;
+	margin: 10px 90px;
 }
 
-#body input.title{
+#body input.title, #body input.url{
 	border: 1px solid @border_color;
 	font-size: 1.6em;
 	padding: 5px;