From 1fbeee14a28489b8975aab64a0fa1d5fa1e42d0a Mon Sep 17 00:00:00 2001 From: Stuart Taylor Date: Wed, 30 May 2018 10:20:58 +0100 Subject: [PATCH] Add HMTL Intro (#109) --- packages/learn/gatsby-config.js | 33 +++++++++++- packages/learn/package.json | 2 + .../basic-html-and-html5/index.md | 34 ++++++++++++- packages/learn/src/layouts/index.js | 3 +- packages/learn/yarn.lock | 50 +++++++++++++++++++ 5 files changed, 118 insertions(+), 4 deletions(-) diff --git a/packages/learn/gatsby-config.js b/packages/learn/gatsby-config.js index 03fb801859..fea310e145 100644 --- a/packages/learn/gatsby-config.js +++ b/packages/learn/gatsby-config.js @@ -30,7 +30,38 @@ module.exports = { path: path.resolve(__dirname, './src/introductions') } }, - 'gatsby-transformer-remark', + { + resolve: 'gatsby-transformer-remark', + options: { + plugins: [ + { + resolve: 'gatsby-remark-prismjs', + options: { + // Class prefix for 
 tags containing syntax highlighting;
+              // defaults to 'language-' (eg 
).
+              // If your site loads Prism into the browser at runtime,
+              // (eg for use with libraries like react-live),
+              // you may use this to prevent Prism from re-processing syntax.
+              // This is an uncommon use-case though;
+              // If you're unsure, it's best to use the default value.
+              classPrefix: 'language-',
+              // This is used to allow setting a language for inline code
+              // (i.e. single backticks) by creating a separator.
+              // This separator is a string and will do no white-space
+              // stripping.
+              // A suggested value for English speakers is the non-ascii
+              // character '›'.
+              inlineCodeMarker: null,
+              // This lets you set up language aliases.  For example,
+              // setting this to '{ sh: "bash" }' will let you use
+              // the language "sh" which will highlight using the
+              // bash highlighter.
+              aliases: {}
+            }
+          }
+        ]
+      }
+    },
     {
       resolve: 'gatsby-plugin-google-fonts',
       options: {
diff --git a/packages/learn/package.json b/packages/learn/package.json
index 269ebbe248..28935e9056 100644
--- a/packages/learn/package.json
+++ b/packages/learn/package.json
@@ -27,6 +27,7 @@
     "gatsby-plugin-react-helmet": "^2.0.8",
     "gatsby-plugin-react-next": "^1.0.11",
     "gatsby-plugin-sitemap": "^1.2.21",
+    "gatsby-remark-prismjs": "^2.0.2",
     "gatsby-source-filesystem": "^1.5.29",
     "gatsby-source-mongodb": "^1.5.19",
     "gatsby-transformer-json": "^1.0.16",
@@ -35,6 +36,7 @@
     "lodash": "^4.17.5",
     "loop-protect": "^2.1.6",
     "mongodb": "^3.0.5",
+    "prismjs": "^1.14.0",
     "react": "16",
     "react-bootstrap": "^0.32.1",
     "react-dom": "16",
diff --git a/packages/learn/src/introductions/responsive-web-design/basic-html-and-html5/index.md b/packages/learn/src/introductions/responsive-web-design/basic-html-and-html5/index.md
index 8b411f4296..041d971ae8 100644
--- a/packages/learn/src/introductions/responsive-web-design/basic-html-and-html5/index.md
+++ b/packages/learn/src/introductions/responsive-web-design/basic-html-and-html5/index.md
@@ -5,6 +5,36 @@ superBlock: Responsive Web Design
 ---
 ## Introduction to Basic HTML & HTML5
 
-This introduction is a stub
+HTML, or HyperText Markup Language, is a markup language used to describe the structure of a web page. It uses a special syntax or notation to organize and give information about the page to the browser. Elements usually have opening and closing tags that surround and give meaning to content. For example, there are different tag options to place around text to show whether it is a heading, a paragraph, or a list.
 
-Help us make it real on [GitHub](https://github.com/freeCodeCamp/learn/tree/master/src/introductions).
\ No newline at end of file
+For example:
+```html
+
Top level heading: Maybe a page title

+
+
A paragragh of text. Some information we would like to communicate to the viewer. This can be as long or short as we would like.

+
+
    
+  
  1. Number one on the list
    2. 
+  
  2. Number two
    3. 
+  
  3. A third item
    4. 
+

+```
+
+Becomes:
+
+
Top level heading: Maybe a page title

+
+
A paragragh of text. Some information we would like to communicate to the user. This can be as long or short as we would like.

+
+
    
+  
  1. Number one on the list
    2. 
+  
  2. Number two
    3. 
+  
  3. A third item
    4. 
+

+
+---
+The HyperText part of HTML comes from the early days of the web and its original use case. Pages usually contained static documents that contained references to other documents. These references contained hypertext links the would navigate the browser to the reference document so the user could read the reference document without having to manually search for it.
+
+As web pages and web applications grow more complex, the W3 Consortium updates the HTML specification to ensure that a webpage can be shown reliably on any browser. The latest version of HTML is HTML5.
+
+This section introduces how to use HTML elements to give structure and meaning to your web content.
\ No newline at end of file
diff --git a/packages/learn/src/layouts/index.js b/packages/learn/src/layouts/index.js
index 15474b7f92..9acc6a8879 100644
--- a/packages/learn/src/layouts/index.js
+++ b/packages/learn/src/layouts/index.js
@@ -12,8 +12,9 @@ import Header from '../components/Header';
 import MapModal from '../components/MapModal';
 import { fetchUser } from '../redux/app';
 
-import './global.css';
+import 'prismjs/themes/prism.css';
 import 'react-reflex/styles.css';
+import './global.css';
 import './layout.css';
 
 const metaKeywords = [
diff --git a/packages/learn/yarn.lock b/packages/learn/yarn.lock
index 99aeda99fb..4a67e70fcf 100644
--- a/packages/learn/yarn.lock
+++ b/packages/learn/yarn.lock
@@ -2155,6 +2155,14 @@ cli-width@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
 
+clipboard@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.1.tgz#a12481e1c13d8a50f5f036b0560fe5d16d74e46a"
+  dependencies:
+    good-listener "^1.2.2"
+    select "^1.1.2"
+    tiny-emitter "^2.0.0"
+
 clipboardy@1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/clipboardy/-/clipboardy-1.2.3.tgz#0526361bf78724c1f20be248d428e365433c07ef"
@@ -2854,6 +2862,10 @@ delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
 
+delegate@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
+
 delegates@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@@ -4234,6 +4246,14 @@ gatsby-react-router-scroll@^1.0.14:
     scroll-behavior "^0.9.9"
     warning "^3.0.0"
 
+gatsby-remark-prismjs@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-prismjs/-/gatsby-remark-prismjs-2.0.2.tgz#c8bf8ac0c061db7305deebf75ca7a8250a2b65ea"
+  dependencies:
+    babel-runtime "^6.26.0"
+    parse-numeric-range "0.0.2"
+    unist-util-visit "^1.3.0"
+
 gatsby-source-filesystem@^1.5.29:
   version "1.5.29"
   resolved "https://registry.yarnpkg.com/gatsby-source-filesystem/-/gatsby-source-filesystem-1.5.29.tgz#27efb1214d8a326f7a1cb8f0cdee579f96a2be69"
@@ -4617,6 +4637,12 @@ globby@^7.1.1:
     pify "^3.0.0"
     slash "^1.0.0"
 
+good-listener@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+  dependencies:
+    delegate "^3.1.2"
+
 got@^6.7.1:
   version "6.7.1"
   resolved "https://registry.yarnpkg.com/got/-/got-6.7.1.tgz#240cd05785a9a18e561dc1b44b41c763ef1e8db0"
@@ -7599,6 +7625,10 @@ parse-latin@^4.0.0:
     unist-util-modify-children "^1.0.0"
     unist-util-visit-children "^1.0.0"
 
+parse-numeric-range@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/parse-numeric-range/-/parse-numeric-range-0.0.2.tgz#b4f09d413c7adbcd987f6e9233c7b4b210c938e4"
+
 parse-passwd@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
@@ -8346,6 +8376,12 @@ pretty-format@^22.4.3:
     ansi-regex "^3.0.0"
     ansi-styles "^3.2.0"
 
+prismjs@^1.14.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.14.0.tgz#bbccfdb8be5d850d26453933cb50122ca0362ae0"
+  optionalDependencies:
+    clipboard "^2.0.0"
+
 private@^0.1.6, private@^0.1.7:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
@@ -9693,6 +9729,10 @@ scroll-behavior@^0.9.9:
     dom-helpers "^3.2.1"
     invariant "^2.2.2"
 
+select@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+
 semver-diff@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-2.1.0.tgz#4bbb8437c8d37e4b0cf1a68fd726ec6d645d6d36"
@@ -10623,6 +10663,10 @@ timers-browserify@^2.0.2, timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
+tiny-emitter@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.0.2.tgz#82d27468aca5ade8e5fd1e6d22b57dd43ebdfb7c"
+
 tmp@^0.0.31:
   version "0.0.31"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.31.tgz#8f38ab9438e17315e5dbd8b3657e8bfb277ae4a7"
@@ -10963,6 +11007,12 @@ unist-util-visit@^1.0.0, unist-util-visit@^1.1.0, unist-util-visit@^1.1.1:
   dependencies:
     unist-util-is "^2.1.1"
 
+unist-util-visit@^1.3.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.3.1.tgz#c019ac9337a62486be58531bc27e7499ae7d55c7"
+  dependencies:
+    unist-util-is "^2.1.1"
+
 units-css@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/units-css/-/units-css-0.4.0.tgz#d6228653a51983d7c16ff28f8b9dc3b1ffed3a07"