diff --git a/public/cat.png b/public/cat.png new file mode 100644 index 00000000..d4be8f21 Binary files /dev/null and b/public/cat.png differ diff --git a/public/js/xregexp-min.js b/public/js/xregexp-min.js new file mode 100644 index 00000000..ade6f9a3 --- /dev/null +++ b/public/js/xregexp-min.js @@ -0,0 +1,2 @@ +//XRegExp 3.0.0 MIT License +var XRegExp=function(a){"use strict";function u(a,d,e,f,g){var h;if(a[c]={captureNames:d},g)return a;if(a.__proto__)a.__proto__=b.prototype;else for(h in b.prototype)a[h]=b.prototype[h];return a[c].source=e,a[c].flags=f?f.split("").sort().join(""):f,a}function v(a){return e.replace.call(a,/([\s\S])(?=[\s\S]*\1)/g,"")}function w(d,f){if(!b.isRegExp(d))throw new TypeError("Type RegExp expected");var g=d[c]||{},h=y(d),i="",j="",k=null,l=null;return f=f||{},f.removeG&&(j+="g"),f.removeY&&(j+="y"),j&&(h=e.replace.call(h,new RegExp("["+j+"]+","g"),"")),f.addG&&(i+="g"),f.addY&&(i+="y"),i&&(h=v(h+i)),f.isInternalOnly||(g.source!==a&&(k=g.source),null!=g.flags&&(l=i?v(g.flags+i):g.flags)),d=u(new RegExp(d.source,h),z(d)?g.captureNames.slice(0):null,k,l,f.isInternalOnly)}function x(a){return parseInt(a,16)}function y(a){return q?a.flags:e.exec.call(/\/([a-z]*)$/i,RegExp.prototype.toString.call(a))[1]}function z(a){return!(!a[c]||!a[c].captureNames)}function A(a){return parseInt(a,10).toString(16)}function B(a,b){var d,c=a.length;for(d=0;c>d;++d)if(a[d]===b)return d;return-1}function C(a,b){return s.call(a)==="[object "+b+"]"}function D(a,b,c){return e.test.call(c.indexOf("x")>-1?/^(?:\s+|#.*|\(\?#[^)]*\))*(?:[?*+]|{\d+(?:,\d*)?})/:/^(?:\(\?#[^)]*\))*(?:[?*+]|{\d+(?:,\d*)?})/,a.slice(b))}function E(a){for(;a.length<4;)a="0"+a;return a}function F(a,b){var c;if(v(b)!==b)throw new SyntaxError("Invalid duplicate regex flag "+b);for(a=e.replace.call(a,/^\(\?([\w$]+)\)/,function(a,c){if(e.test.call(/[gy]/,c))throw new SyntaxError("Cannot use flag g or y in mode modifier "+a);return b=v(b+c),""}),c=0;c"}else if(c)return"\\"+(+c+i);return a};if(!C(a,"Array")||!a.length)throw new TypeError("Must provide a nonempty array of patterns to merge");for(m=0;m1&&B(f,"")>-1&&(h=w(this,{removeG:!0,isInternalOnly:!0}),e.replace.call(String(b).slice(f.index),h,function(){var c,b=arguments.length;for(c=1;b-2>c;++c)arguments[c]===a&&(f[c]=a)})),this[c]&&this[c].captureNames)for(i=1;if.index&&(this.lastIndex=f.index)}return this.global||(this.lastIndex=d),f},f.test=function(a){return!!f.exec.call(this,a)},f.match=function(a){var c;if(b.isRegExp(a)){if(a.global)return c=e.match.apply(this,arguments),a.lastIndex=0,c}else a=new RegExp(a);return f.exec.call(a,L(this))},f.replace=function(d,f){var h,i,j,g=b.isRegExp(d);return g?(d[c]&&(i=d[c].captureNames),h=d.lastIndex):d+="",j=C(f,"Function")?e.replace.call(String(this),d,function(){var c,b=arguments;if(i)for(b[0]=new String(b[0]),c=0;ce)throw new SyntaxError("Backreference to undefined group "+b);return a[e+1]||""}if("$"===d)return"$";if("&"===d||0===+d)return a[0];if("`"===d)return a[a.length-1].slice(0,a[a.length-2]);if("'"===d)return a[a.length-1].slice(a[a.length-2]+a[0].length);if(d=+d,!isNaN(d)){if(d>a.length-3)throw new SyntaxError("Backreference to undefined group "+b);return a[d]||""}throw new SyntaxError("Invalid token "+b)})}),g&&(d.global?d.lastIndex=0:d.lastIndex=h),j},f.split=function(c,d){if(!b.isRegExp(c))return e.split.apply(this,arguments);var j,f=String(this),g=[],h=c.lastIndex,i=0;return d=(d===a?-1:d)>>>0,b.forEach(f,c,function(a){a.index+a[0].length>i&&(g.push(f.slice(i,a.index)),a.length>1&&a.indexd?g.slice(0,d):g},t=b.addToken,t(/\\([ABCE-RTUVXYZaeg-mopqyz]|c(?![A-Za-z])|u(?![\dA-Fa-f]{4}|{[\dA-Fa-f]+})|x(?![\dA-Fa-f]{2}))/,function(a,b){if("B"===a[1]&&b===j)return a[0];throw new SyntaxError("Invalid escape "+a[0])},{scope:"all",leadChar:"\\"}),t(/\\u{([\dA-Fa-f]+)}/,function(a,b,c){var d=x(a[1]);if(d>1114111)throw new SyntaxError("Invalid Unicode code point "+a[0]);if(65535>=d)return"\\u"+E(A(d));if(o&&c.indexOf("u")>-1)return a[0];throw new SyntaxError("Cannot use Unicode code point above \\u{FFFF} without flag u")},{scope:"all",leadChar:"\\"}),t(/\[(\^?)]/,function(a){return a[1]?"[\\s\\S]":"\\b\\B"},{leadChar:"["}),t(/\(\?#[^)]*\)/,function(a,b,c){return D(a.input,a.index+a[0].length,c)?"":"(?:)"},{leadChar:"("}),t(/\s+|#.*/,function(a,b,c){return D(a.input,a.index+a[0].length,c)?"":"(?:)"},{flag:"x"}),t(/\./,function(){return"[\\s\\S]"},{flag:"s",leadChar:"."}),t(/\\k<([\w$]+)>/,function(a){var b=isNaN(a[1])?B(this.captureNames,a[1])+1:+a[1],c=a.index+a[0].length;if(!b||b>this.captureNames.length)throw new SyntaxError("Backreference to undefined group "+a[0]);return"\\"+b+(c===a.input.length||isNaN(a.input.charAt(c))?"":"(?:)")},{leadChar:"\\"}),t(/\\(\d+)/,function(a,b){if(!(b===j&&/^[1-9]/.test(a[1])&&+a[1]<=this.captureNames.length)&&"0"!==a[1])throw new SyntaxError("Cannot use octal escape or backreference to undefined group "+a[0]);return a[0]},{scope:"all",leadChar:"\\"}),t(/\(\?P?<([\w$]+)>/,function(a){if(!isNaN(a[1]))throw new SyntaxError("Cannot use integer as capture name "+a[0]);if("length"===a[1]||"__proto__"===a[1])throw new SyntaxError("Cannot use reserved word as capture name "+a[0]);if(B(this.captureNames,a[1])>-1)throw new SyntaxError("Cannot use same name for multiple groups "+a[0]);return this.captureNames.push(a[1]),this.hasNamedCapture=!0,"("},{leadChar:"("}),t(/\((?!\?)/,function(a,b,c){return c.indexOf("n")>-1?"(?:":(this.captureNames.push(null),"(")},{optionalFlags:"n",leadChar:"("}),b}(); \ No newline at end of file diff --git a/views/tutorial/html/1.erb b/views/tutorial/html/1.erb index 35f421ab..ed984d80 100644 --- a/views/tutorial/html/1.erb +++ b/views/tutorial/html/1.erb @@ -12,14 +12,22 @@ What's your name?
- - Submit + +
diff --git a/views/tutorial/html/2.erb b/views/tutorial/html/2.erb index c32fc741..f0b9ab3e 100644 --- a/views/tutorial/html/2.erb +++ b/views/tutorial/html/2.erb @@ -3,7 +3,7 @@

All you need to build your first site is a computer language called HTML.

HTML is made of tags - there's usually an opening tag and a closing tag, with content in between them.

- And here's some HTML, right in this box! Let's make a change. Replace Hello World with Victoria's Website, and click save! + And here's some HTML, right in this box! Let's make a change. Replace Hello World with The Website of , and click save!

You'll see the results here.

@@ -15,14 +15,29 @@

Welcome to HTML!

-

HTML stands for HyperText Markup Language. +

HTML stands for HyperText Markup Language. Hypertext refers to text that has links, and markup refers to the tags.

Don't worry if anything seems confusing - you'll get the hang of it once you try coding! If you ever get stuck, click the Help link below.

diff --git a/views/tutorial/html/3.erb b/views/tutorial/html/3.erb index f50093c0..c9a3ad87 100644 --- a/views/tutorial/html/3.erb +++ b/views/tutorial/html/3.erb @@ -1,14 +1,14 @@
- Great! - Check out your site at victoria.neocities.org. + Great! + Check out your site at victoria.neocities.org. You did it!
- But... hm... it needs a little something more. Let's make your name a heading by putting a Heading Level 1 tag around it. + But... hm... it needs a little something more. Let's make your name a heading by putting a Heading Level 1 tag around it.
- Change the text to this: [h1]Victoria's Website[/h1] + Change the text to this: and click save.
@@ -28,7 +28,22 @@
diff --git a/views/tutorial/html/4.erb b/views/tutorial/html/4.erb index e3f25b4d..e8c913ae 100644 --- a/views/tutorial/html/4.erb +++ b/views/tutorial/html/4.erb @@ -1,15 +1,26 @@
- Now let's add a paragraph of text below the heading. Perhaps "Welcome to my website" or your favorite quote. + Now let's add a paragraph of text below the heading (h1). Perhaps "Welcome to my website" or your favorite quote.
- To make a paragraph, surround your text with the [p] tag. So it should look something like - [p]Hello![/p] + To make a paragraph, surround your text with the <p> tag. So it should look something like + <p>Hello!<p>
diff --git a/views/tutorial/html/5.erb b/views/tutorial/html/5.erb index 8f6e4b87..427d02aa 100644 --- a/views/tutorial/html/5.erb +++ b/views/tutorial/html/5.erb @@ -5,9 +5,9 @@

For example, links look like this:

-

[a href="http://neocities.org"]Check out Neocities![/a]

- -

Add a link to your favorite site to the end of the paragraph, right before the [/p] closing tag!

+

<a href="http://neocities.org">Check out Neocities!</a>

+ +

Add a link to your favorite site to the end of the paragraph, right before the </p> closing tag!

@@ -26,6 +26,18 @@ But this isn't! diff --git a/views/tutorial/html/6.erb b/views/tutorial/html/6.erb index ac85d843..0b386182 100644 --- a/views/tutorial/html/6.erb +++ b/views/tutorial/html/6.erb @@ -3,10 +3,10 @@ Great job! You can see what you've done so far at victoria.neocities.org. Now let's try an image.
- Your Neocities web directory already includes a portrait of me called cat.png. + Your Neocities web directory already includes a portrait of me called cat.png.
- Add it to your page like so: [img src="cat.png"] + Add it to your page like so: <img src="/cat.png">
That's it! No closing tag needed for images. @@ -22,6 +22,18 @@ diff --git a/views/tutorial/html/7.erb b/views/tutorial/html/7.erb index 242ec6fb..b1fbf81e 100644 --- a/views/tutorial/html/7.erb +++ b/views/tutorial/html/7.erb @@ -8,7 +8,7 @@
- First, add a list to your page, but replace my favorite activities with your own! + First, add a list to your page, but replace my favorite activities with your own!
Second, put an h2 header above the list with some kind of title, like "Interests." @@ -27,6 +27,18 @@ diff --git a/views/tutorial/html/8.erb b/views/tutorial/html/8.erb index 9cf9dadd..e64dbb5f 100644 --- a/views/tutorial/html/8.erb +++ b/views/tutorial/html/8.erb @@ -22,6 +22,18 @@ diff --git a/views/tutorial/layout.erb b/views/tutorial/layout.erb index cccaa87e..ea130f55 100644 --- a/views/tutorial/layout.erb +++ b/views/tutorial/layout.erb @@ -1,14 +1,22 @@
+ <% if request.path =~ /\/html\/10?/ %> +
+ <% else %>
+ <% end %>

<%= @section.upcase %> Tutorial

Page <%= @page %>/10

<%== erb "tutorial/#{@section}/#{@page}".to_sym, layout: false %>
+ <% if request.path =~ /\/html\/10?/ %> + <% else %> +
+

HTML

Site Preview

-
+
+ + <% end %> +
@@ -35,4 +46,28 @@ window.location.href = '/tutorial/<%= @section %>/<%= @page.to_i+1 %>' } }) + + $('.tutorial #reset').on('click', function() { + var editor = $('#editor') + editor.val(editor.text()) + }) + + $('.tutorial textarea').on('keypress keyup', function() { + refreshIframe() + }) + + var tutorialHtml = sessionStorage.getItem('tutorialHtml') + if(tutorialHtml) + $('#editor').text(tutorialHtml) + + function refreshIframe() { + var editor = $('#editor') + $('.tutorial iframe').contents().find('html').html(editor.val()) + } + + $(function() { + refreshIframe() + }) + +