added example url

aaanh · Oct 24, 2022 · ff0466a · ff0466a
1 parent a724e97
commit ff0466a
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 26 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/frontend/index.html b/frontend/index.html
@@ -6,7 +6,6 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Augmenting Gists</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" referrerpolicy="no-referrer" />
- <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
@@ -24,14 +23,14 @@ <h1 class="text-green-500">Get Raw Gists</h1>
  <div>
 
  <h4 class="text-lg font-bold">Try with this gist URL</h4>
- <pre><code class="language-url">
- https://gist.github.com/aaanh/2d8b322170ec9fa3c2273e7b92b48327
- </code></pre>
+ <pre><p>https://gist.github.com/aaanh/2d8b322170ec9fa3c2273e7b92b48327</p></pre>
+ <br/>
  <h4 class="text-lg font-bold">What is a &apos;gist&apos;?</h4>
  <p>Gist is a code or text snippet that is hosted on Github. <a href="https://docs.github.com/en/get-started/writing-on-github/editing-and-sharing-content-with-gists/creating-gists">Docs</a> here.</p>
  <p>It functions similarly to <a href="https://pastebin.com">pastebin.</a></p>
  </div>
  </div>
  </div>
 </body>
+<script src="script.js"></script>
 </html>
diff --git a/frontend/script.js b/frontend/script.js
@@ -1,22 +1,19 @@
-const copyButtonLabel = "Copy Code";
+const copyButtonLabel = "Copy URL";
 
 // you can use a class selector instead if you, or the syntax highlighting library adds one to the 'pre'. 
 let blocks = document.querySelectorAll("pre");
 
 blocks.forEach((block) => {
- // only add button if browser supports Clipboard API
- if (navigator.clipboard) {
  let button = document.createElement("button");
  button.innerText = copyButtonLabel;
  button.addEventListener("click", copyCode);
  block.appendChild(button);
- }
 });
 
 async function copyCode(event) {
  const button = event.srcElement;
  const pre = button.parentElement;
- let code = pre.querySelector("code");
+ let code = pre.querySelector("p");
  let text = code.innerText;
  await navigator.clipboard.writeText(text);
 

diff --git a/frontend/style.css b/frontend/style.css
@@ -1,5 +1,5 @@
 code {
- color: #123fde
+ color: #123fde;
 }
 
 h1 {
@@ -21,29 +21,36 @@ a:hover {
  background-color: #bbbbbb;
 }
 
-pre[class*="language-"] {
- position:relative;
- overflow: auto;
- margin:5px 0;
- padding:1.75rem 0 1.75rem 1rem;
- border-radius:10px;
-}
-
 button{
  position:absolute;
- top:5px;
- right:5px;
-
+ top:0;
+ right:0;
  font-size:.9rem;
  padding:.15rem;
- background-color:#828282;
- color:1e1e1e;
- border:ridge 1px #7b7b7c;
+ background-color: white;
+ color: #1e1e1e;
+ border:ridge 1px black;
  border-radius:5px;
- text-shadow:#c4c4c4 0 0 2px;
+
+}
+
+pre {
+ position: relative;
+ display: block;
+ width: 80vw;
+ overflow-wrap: break-all;
+ word-wrap: break-all;
+}
+
+code {
+ width: 80vw;
+ overflow-wrap: break-all;
+ word-wrap: break-all;
 }
 
 button:hover{
  cursor:pointer;
- background-color:#bcbabb;
+ background-color: rgb(34 197 94);;
+ color: white;
+ border: transparent;
 }