From 96abb0b89d49ded2501938d7478030baf048e479 Mon Sep 17 00:00:00 2001
From: "Glitch (glitch-hello-website)" <none>
Date: Tue, 28 Feb 2023 11:01:23 +0000
Subject: [PATCH] Exporting to glitchdotcom/glitch-hello-website
 ./style.css:31317407/252 ./script.js:31317407/2018 ./index.html:31317407/6092
 ./README.md:31317407/4962

---
 README.md  | 18 +++++++++++++-
 index.html | 69 ++++++++++++++++--------------------------------------
 script.js  | 31 ++++++++++++++----------
 style.css  | 11 +++++++++
 4 files changed, 67 insertions(+), 62 deletions(-)
diff --git a/README.md b/README.md
index fab4af6..14f6cfe 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 This is a basic HTML starter project you can build on however you like. No need to save. While you develop your site, your changes will happen ✨ immediately in the preview window. On the left you'll see the files that make up your site, including HTML, JavaScript, and CSS. You can upload assets like images or audio in `assets`. The rest is up to you and your imagination. 🦄
 
-_Last updated: 23 Feb 2023_
+_Last updated: 28 Feb 2023_
 
 ## What's in this project?
 
@@ -22,6 +22,22 @@ Take a look in `TODO.md` for next steps you can try out in your new site!
 
 ___Want a minimal version of this project to build your own website? Check out [Blank Website](https://glitch.com/edit/#!/remix/glitch-blank-website)!___
 
+## Ready to share your site?
+
+Add these meta tags for SEO and social sharing between your page `<head></head>` tags, changing the values for your site:
+
+```
+<link rel="canonical" href="https://glitch-hello-website.glitch.me/" />
+<meta name="description" content="A simple website, built with Glitch. Remix it to get your own."/>
+<meta name="robots" content="index,follow" />
+<meta property="og:title" content="Hello World!" />
+<meta property="og:type" content="article" />
+<meta property="og:url" content="https://glitch-hello-website.glitch.me/" />
+<meta property="og:description" content="A simple website, built with Glitch. Remix it to get your own."/>
+<meta property="og:image" content="https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2Fhello-website-social.png?v=1616712748147"/>
+<meta name="twitter:card" content="summary" />
+```
+
 ![Glitch](https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FLogo_Color.svg?v=1602781328576)
 
 ## You built this with Glitch!
diff --git a/index.html b/index.html
index a276ca9..5df8c31 100644
--- a/index.html
+++ b/index.html
@@ -1,88 +1,59 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <!--
-      This is the page head - it contains info the browser uses to display the page
-      You won't see what's in the head in the page
-      Scroll down to the body element for the page content
+    <!-- 
+      This is an HTML comment
+      You can write text in a comment and the content won't be visible in the page
     -->
 
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" href="https://glitch.com/favicon.ico" />
 
-    <!-- 
-      This is an HTML comment
-      You can write text in a comment and the content won't be visible in the page
+    <!--
+      This is the page head - it contains info the browser uses
+      Like the title, which appears on the browser tab but not inside the page
+      Further down you'll see the content that displays in the page
     -->
-
     <title>Hello World!</title>
 
-    <!-- Meta tags for SEO and social sharing -->
-    <link rel="canonical" href="https://glitch-hello-website.glitch.me/" />
-    <meta
-      name="description"
-      content="A simple website, built with Glitch. Remix it to get your own."
-    />
-    <meta name="robots" content="index,follow" />
-    <meta property="og:title" content="Hello World!" />
-    <meta property="og:type" content="article" />
-    <meta property="og:url" content="https://glitch-hello-website.glitch.me/" />
-    <meta
-      property="og:description"
-      content="A simple website, built with Glitch. Remix it to get your own."
-    />
-    <meta
-      property="og:image"
-      content="https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2Fhello-website-social.png?v=1616712748147"
-    />
-    <meta name="twitter:card" content="summary" />
-
-    <!-- Import the webpage's stylesheet -->
+    <!-- The website stylesheet -->
     <link rel="stylesheet" href="/style.css" />
 
-    <!-- Import the webpage's javascript file -->
+    <!-- The website JavaScript file -->
     <script src="/script.js" defer></script>
   </head>
   <body>
     <!--
-      This is the body of the page
-      Look at the elements and see how they appear in the rendered page on the right
-      Each element is defined using tags, with < and > indicating where each one opens and closes
-      There are elements for sections of the page, images, text, and more
-      The elements include attributes referenced in the CSS for the page style
+      The body includes the content you see in the page
+      Each element is defined using tags, like this <div></div>
+      The attributes like class="wrapper" let us style elements in the CSS
     -->
-
-    <!-- The wrapper and content divs set margins and positioning -->
     <div class="wrapper">
       <div class="content" role="main">
-        <!-- This is the start of content for our page -->
         <h1 class="title">Hello World!</h1>
-
         <img
           src="https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2Fillustration.svg?v=1618177344016"
           class="illustration"
           alt="Editor illustration"
           title="Click the image!"
         />
-        <!-- Instructions on using this project -->
         <div class="instructions">
-          <h2>
-            Using this project
-          </h2>
+          <h2>Using this project</h2>
           <p>
             This is the Glitch <strong>Hello Website</strong> project. You can
-            use it to build your own site. Check out README.md in the editor for
-            more info and next steps you can take!
+            use it to build your own site. Check out the code in the editor and open
+            the <span class="fileopener" data-file="TODO.md" data-line="0"
+              >TODO</span> for next steps!
           </p>
-          <!-- ADD BUTTON HERE -->
-          
-          <!-- Once you've added the button from the TODO, click it in the page -->
+          <!--  🚧 TODO: ADD BUTTON HERE -->
+
+          <!-- Once you've added the button from TODO.md, click it in the page -->
           <!-- Check out the function in script.js to see how it works -->
         </div>
       </div>
     </div>
-    <!-- The footer holds our remix button — you can use it for structure or cut it out ✂ -->
+    <!-- The footer holds our remix button — you can keep or delete it ✂ -->
     <footer class="footer">
       <div class="links"></div>
       <a
diff --git a/script.js b/script.js
index b953402..c3696f9 100644
--- a/script.js
+++ b/script.js
@@ -1,6 +1,5 @@
 /*
-This is your site JavaScript code - you can add interactivity and carry out processing
-- Initially the JS writes a message to the console, and moves a button you can add from the TODO
+  This is your site JavaScript code - you can add interactivity!
 */
 
 // Print a message in the browser's dev tools console each time the page loads
@@ -9,19 +8,27 @@ console.log("Hello 🌎");
 
 /* 
 Make the "Click me!" button move when the visitor clicks it:
-- First add the button to the page by following steps in the TODO
+- First add the button to the page by following the steps in the TODO 🚧
 */
 const btn = document.querySelector("button"); // Get the button from the page
-// Detect clicks on the button
-if (btn) {
-  btn.onclick = function() {
-    // The JS works in conjunction with the 'dipped' code in style.css
+if (btn) { // Detect clicks on the button
+  btn.onclick = function () {
+    // The 'dipped' class in style.css changes the appearance on click
     btn.classList.toggle("dipped");
   };
 }
 
-// This is a single line JS comment
-/*
-This is a comment that can span multiple lines 
-- use comments to make your own notes!
-*/
+
+// ----- GLITCH STARTER PROJECT HELPER CODE -----
+
+// Open file when the link in the preview is clicked
+let goto = (file, line) => {
+  window.parent.postMessage(
+    { type: "glitch/go-to-line", payload: { filePath: file, line: line } }, "*"
+  );
+};
+// Get the file opening button from its class name
+const filer = document.querySelectorAll(".fileopener");
+filer.forEach((f) => {
+  f.onclick = () => { goto(f.dataset.file, f.dataset.line); };
+});
diff --git a/style.css b/style.css
index d3d2117..fe73011 100644
--- a/style.css
+++ b/style.css
@@ -182,3 +182,14 @@ h2 {
 .dipped {
   transform: translateY(5px);
 }
+
+/* Links that open files in the editor */
+.fileopener {
+  cursor:pointer;
+  font-weight:bold;
+  border-bottom:3px solid var(--color-primary);
+  color: var(--color-secondary);
+}
+.fileopener:hover {
+  border-bottom:3px solid var(--color-secondary);
+}
