From d2335d8e1b843f4b9a7846414cb668d2ddb0e0a2 Mon Sep 17 00:00:00 2001
From: Ada Rose Cannon <ada@ada.is>
Date: Mon, 9 Dec 2019 09:42:00 +0000
Subject: [PATCH] add test to model viewer

---
 _includes/compat-table.html    |  2 +-
 getting-started/modelviewer.md | 14 ++++++-
 highlight.css                  | 67 ++++++++++++++++++++++++++++++++++
 index.html                     |  1 +
 main.css                       |  1 +
 5 files changed, 83 insertions(+), 2 deletions(-)
 create mode 100644 highlight.css

diff --git a/_includes/compat-table.html b/_includes/compat-table.html
index 20f7b44..e8d637b 100644
--- a/_includes/compat-table.html
+++ b/_includes/compat-table.html
@@ -1,4 +1,4 @@
-<p>Note: this table is out of date.</p>
+<p>Note: this table is incomplete.</p>
 <table>
     <thead>
         <tr>
diff --git a/getting-started/modelviewer.md b/getting-started/modelviewer.md
index 8bef8e8..088eb7a 100644
--- a/getting-started/modelviewer.md
+++ b/getting-started/modelviewer.md
@@ -1,3 +1,15 @@
 ---
 title: model-viewer
----
\ No newline at end of file
+---
+[Model viewer](https://modelviewer.dev/) is a custom HTML element for displaying 3D models and vieweing them in AR
+
+# AR
+
+```html
+<!-- Import the component -->
+<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
+<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
+
+<!-- Use it like any other HTML element -->
+<model-viewer src="examples/assets/Astronaut.glb" alt="A 3D model of an astronaut" auto-rotate camera-controls background-color="#455A64"></model-viewer>
+```
\ No newline at end of file
diff --git a/highlight.css b/highlight.css
new file mode 100644
index 0000000..6d4e303
--- /dev/null
+++ b/highlight.css
@@ -0,0 +1,67 @@
+.highlight        {
+    color: white;
+    background-color: #49483e;
+    padding: 0.5em;
+    word-break: break-word;
+    white-space: break-spaces;
+}
+.c      { color: #75715e }      /* Comment          */
+.err    { color: #960050; background-color: #1e0010 } /* Error */
+.k      { color: #66d9ef }      /* Keyword          */
+.l      { color: #ae81ff }      /* Literal          */
+.n      { color: #f8f8f2 }      /* Name  */
+.o      { color: #f92672 }      /* Operator         */
+.p      { color: #f8f8f2 }      /* Punctuation      */
+.cm     { color: #75715e }      /* Comment.Multiline*/
+.cp     { color: #75715e }      /* Comment.Preproc  */
+.c1     { color: #75715e }      /* Comment.Single   */
+.cs     { color: #75715e }      /* Comment.Special  */
+.ge     { font-style: italic }  /* Generic.Emph     */
+.gs     { font-weight: bold }   /* Generic.Strong   */
+.kc     { color: #66d9ef }      /* Keyword.Constant */
+.kd     { color: #66d9ef }      /* Keyword.Declaration         */
+.kn     { color: #f92672 }      /* Keyword.Namespace*/
+.kp     { color: #66d9ef }      /* Keyword.Pseudo   */
+.kr     { color: #66d9ef }      /* Keyword.Reserved */
+.kt     { color: #66d9ef }      /* Keyword.Type     */
+.ld     { color: #e6db74 }      /* Literal.Date     */
+.m      { color: #ae81ff }      /* Literal.Number   */
+.s      { color: #e6db74 }      /* Literal.String   */
+.na     { color: #a6e22e }      /* Name.Attribute   */
+.nb     { color: #f8f8f2 }      /* Name.Builtin     */
+.nc     { color: #a6e22e }      /* Name.Class       */
+.no     { color: #66d9ef }      /* Name.Constant    */
+.nd     { color: #a6e22e }      /* Name.Decorator   */
+.ni     { color: #f8f8f2 }      /* Name.Entity      */
+.ne     { color: #a6e22e }      /* Name.Exception   */
+.nf     { color: #a6e22e }      /* Name.Function    */
+.nl     { color: #f8f8f2 }      /* Name.Label       */
+.nn     { color: #f8f8f2 }      /* Name.Namespace   */
+.nx     { color: #a6e22e }      /* Name.Other       */
+.py     { color: #f8f8f2 }      /* Name.Property    */
+.nt     { color: #f92672 }      /* Name.Tag         */
+.nv     { color: #f8f8f2 }      /* Name.Variable    */
+.ow     { color: #f92672 }      /* Operator.Word    */
+.w      { color: #f8f8f2 }      /* Text.Whitespace  */
+.mf     { color: #ae81ff }      /* Literal.Number.Float        */
+.mh     { color: #ae81ff }      /* Literal.Number.Hex          */
+.mi     { color: #ae81ff }      /* Literal.Number.Integer      */
+.mo     { color: #ae81ff }      /* Literal.Number.Oct          */
+.sb     { color: #e6db74 }      /* Literal.String.Backtick     */
+.sc     { color: #e6db74 }      /* Literal.String.Char         */
+.sd     { color: #e6db74 }      /* Literal.String.Doc          */
+.s2     { color: #e6db74 }      /* Literal.String.Double       */
+.se     { color: #ae81ff }      /* Literal.String.Escape       */
+.sh     { color: #e6db74 }      /* Literal.String.Heredoc      */
+.si     { color: #e6db74 }      /* Literal.String.Interpol     */
+.sx     { color: #e6db74 }      /* Literal.String.Other        */
+.sr     { color: #e6db74 }      /* Literal.String.Regex        */
+.s1     { color: #e6db74 }      /* Literal.String.Single       */
+.ss     { color: #e6db74 }      /* Literal.String.Symbol       */
+.bp     { color: #f8f8f2 }      /* Name.Builtin.Pseudo         */
+.vc     { color: #f8f8f2 }      /* Name.Variable.Class         */
+.vg     { color: #f8f8f2 }      /* Name.Variable.Global        */
+.vi     { color: #f8f8f2 }      /* Name.Variable.Instance      */
+.il     { color: #ae81ff }      /* Literal.Number.Integer.Long */
+.gd     { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+.gd .x  { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
diff --git a/index.html b/index.html
index e4ffc74..2a01fa5 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
 	<link rel="stylesheet" href="/main.css">
+	<link rel="stylesheet" href="/highlight.css">
 	<title>Immersive Web</title>
         <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 <body>
diff --git a/main.css b/main.css
index b7586f7..c959fee 100644
--- a/main.css
+++ b/main.css
@@ -85,6 +85,7 @@ footer {
 
 nav[role="tablist"], .tabs {
     grid-column: 1/-1;
+    max-width: 100%;
 }