gallery init

pycob · Mar 21, 2023 · b75b26e · b75b26e
1 parent 3ee56e3
commit b75b26e
Show file tree

Hide file tree

Showing 22 changed files with 942 additions and 129 deletions.
diff --git a/Makefile b/Makefile
@@ -11,6 +11,7 @@ flask:
 
 docs/index.html: src/pyvibe/__init.py___ generator/generate.py
 	./$(VENV)/bin/pip install pandas
+	./$(VENV)/bin/pip install plotly
 	./$(VENV)/bin/python3 generator/generate.py
 
 # pdoc: src/pyvibe/__init.py___

diff --git a/docs/about.html b/docs/about.html
@@ -205,10 +205,46 @@
 <div class="  grid gap-6 md:grid-cols-4">
     <div class="block p-6 mb-6 bg-white border border-gray-200 rounded-lg shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 overflow-x-auto max-w-fit mx-auto ">
     <div class="flex flex-col h-full ">
-        <img class="max-w-fit h-auto rounded-lg w-full shadow-lg " src="./img/index.png" alt="index">
-<p class="mb-4 font-extrabold leading-none tracking-tight text-gray-900 dark:text-white mt-1 text-lg sm:text-3xl ">Index</p>
+        <img class="max-w-fit h-auto rounded-lg w-full shadow-lg " src="./img/card.png" alt="card">
+<p class="mb-4 font-extrabold leading-none tracking-tight text-gray-900 dark:text-white mt-1 text-lg sm:text-3xl ">Card</p>
 <p class="text-gray-500 dark:text-gray-400 ">
-    <a href="/gallery/index.html" class="inline-flex items-center font-medium text-blue-600 dark:text-blue-500 hover:underline">
+    <a href="/gallery/card.html" class="inline-flex items-center font-medium text-blue-600 dark:text-blue-500 hover:underline">
+    Preview with Source Code
+    <svg aria-hidden="true" class="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+    </a>
+</p> 
+    </div>
+</div>
+<div class="block p-6 mb-6 bg-white border border-gray-200 rounded-lg shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 overflow-x-auto max-w-fit mx-auto ">
+    <div class="flex flex-col h-full ">
+        <img class="max-w-fit h-auto rounded-lg w-full shadow-lg " src="./img/form.png" alt="form">
+<p class="mb-4 font-extrabold leading-none tracking-tight text-gray-900 dark:text-white mt-1 text-lg sm:text-3xl ">Form</p>
+<p class="text-gray-500 dark:text-gray-400 ">
+    <a href="/gallery/form.html" class="inline-flex items-center font-medium text-blue-600 dark:text-blue-500 hover:underline">
+    Preview with Source Code
+    <svg aria-hidden="true" class="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+    </a>
+</p> 
+    </div>
+</div>
+<div class="block p-6 mb-6 bg-white border border-gray-200 rounded-lg shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 overflow-x-auto max-w-fit mx-auto ">
+    <div class="flex flex-col h-full ">
+        <img class="max-w-fit h-auto rounded-lg w-full shadow-lg " src="./img/chart.png" alt="chart">
+<p class="mb-4 font-extrabold leading-none tracking-tight text-gray-900 dark:text-white mt-1 text-lg sm:text-3xl ">Chart</p>
+<p class="text-gray-500 dark:text-gray-400 ">
+    <a href="/gallery/chart.html" class="inline-flex items-center font-medium text-blue-600 dark:text-blue-500 hover:underline">
+    Preview with Source Code
+    <svg aria-hidden="true" class="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+    </a>
+</p> 
+    </div>
+</div>
+<div class="block p-6 mb-6 bg-white border border-gray-200 rounded-lg shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 overflow-x-auto max-w-fit mx-auto ">
+    <div class="flex flex-col h-full ">
+        <img class="max-w-fit h-auto rounded-lg w-full shadow-lg " src="./img/table.png" alt="table">
+<p class="mb-4 font-extrabold leading-none tracking-tight text-gray-900 dark:text-white mt-1 text-lg sm:text-3xl ">Table</p>
+<p class="text-gray-500 dark:text-gray-400 ">
+    <a href="/gallery/table.html" class="inline-flex items-center font-medium text-blue-600 dark:text-blue-500 hover:underline">
     Preview with Source Code
     <svg aria-hidden="true" class="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
     </a>

diff --git a/docs/gallery.html b/docs/gallery.html
@@ -146,10 +146,58 @@
 <div class="  grid gap-6 md:grid-cols-4">
     <div class="block p-6 mb-6 bg-white border border-gray-200 rounded-lg shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 overflow-x-auto max-w-fit mx-auto ">
     <div class="flex flex-col h-full ">
-        <img class="max-w-fit h-auto rounded-lg w-full shadow-lg " src="./img/index.png" alt="index">
-<p class="mb-4 font-extrabold leading-none tracking-tight text-gray-900 dark:text-white mt-1 text-lg sm:text-3xl ">Index</p>
+        <img class="max-w-fit h-auto rounded-lg w-full shadow-lg " src="./img/grid.png" alt="grid">
+<p class="mb-4 font-extrabold leading-none tracking-tight text-gray-900 dark:text-white mt-1 text-lg sm:text-3xl ">Grid</p>
 <p class="text-gray-500 dark:text-gray-400 ">
-    <a href="/gallery/index.html" class="inline-flex items-center font-medium text-blue-600 dark:text-blue-500 hover:underline">
+    <a href="/gallery/grid.html" class="inline-flex items-center font-medium text-blue-600 dark:text-blue-500 hover:underline">
+    Preview with Source Code
+    <svg aria-hidden="true" class="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+    </a>
+</p> 
+    </div>
+</div>
+<div class="block p-6 mb-6 bg-white border border-gray-200 rounded-lg shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 overflow-x-auto max-w-fit mx-auto ">
+    <div class="flex flex-col h-full ">
+        <img class="max-w-fit h-auto rounded-lg w-full shadow-lg " src="./img/chart.png" alt="chart">
+<p class="mb-4 font-extrabold leading-none tracking-tight text-gray-900 dark:text-white mt-1 text-lg sm:text-3xl ">Chart</p>
+<p class="text-gray-500 dark:text-gray-400 ">
+    <a href="/gallery/chart.html" class="inline-flex items-center font-medium text-blue-600 dark:text-blue-500 hover:underline">
+    Preview with Source Code
+    <svg aria-hidden="true" class="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+    </a>
+</p> 
+    </div>
+</div>
+<div class="block p-6 mb-6 bg-white border border-gray-200 rounded-lg shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 overflow-x-auto max-w-fit mx-auto ">
+    <div class="flex flex-col h-full ">
+        <img class="max-w-fit h-auto rounded-lg w-full shadow-lg " src="./img/card.png" alt="card">
+<p class="mb-4 font-extrabold leading-none tracking-tight text-gray-900 dark:text-white mt-1 text-lg sm:text-3xl ">Card</p>
+<p class="text-gray-500 dark:text-gray-400 ">
+    <a href="/gallery/card.html" class="inline-flex items-center font-medium text-blue-600 dark:text-blue-500 hover:underline">
+    Preview with Source Code
+    <svg aria-hidden="true" class="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+    </a>
+</p> 
+    </div>
+</div>
+<div class="block p-6 mb-6 bg-white border border-gray-200 rounded-lg shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 overflow-x-auto max-w-fit mx-auto ">
+    <div class="flex flex-col h-full ">
+        <img class="max-w-fit h-auto rounded-lg w-full shadow-lg " src="./img/form.png" alt="form">
+<p class="mb-4 font-extrabold leading-none tracking-tight text-gray-900 dark:text-white mt-1 text-lg sm:text-3xl ">Form</p>
+<p class="text-gray-500 dark:text-gray-400 ">
+    <a href="/gallery/form.html" class="inline-flex items-center font-medium text-blue-600 dark:text-blue-500 hover:underline">
+    Preview with Source Code
+    <svg aria-hidden="true" class="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+    </a>
+</p> 
+    </div>
+</div>
+<div class="block p-6 mb-6 bg-white border border-gray-200 rounded-lg shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 overflow-x-auto max-w-fit mx-auto ">
+    <div class="flex flex-col h-full ">
+        <img class="max-w-fit h-auto rounded-lg w-full shadow-lg " src="./img/table.png" alt="table">
+<p class="mb-4 font-extrabold leading-none tracking-tight text-gray-900 dark:text-white mt-1 text-lg sm:text-3xl ">Table</p>
+<p class="text-gray-500 dark:text-gray-400 ">
+    <a href="/gallery/table.html" class="inline-flex items-center font-medium text-blue-600 dark:text-blue-500 hover:underline">
     Preview with Source Code
     <svg aria-hidden="true" class="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
     </a>

diff --git a/docs/gallery/index.html → docs/gallery/card.html b/docs/gallery/index.html → docs/gallery/card.html
@@ -11,8 +11,8 @@
     <meta name="msapplication-config" content="https://cdn.pycob.com/pyvibe/browserconfig.xml">
     <meta name="theme-color" content="#ffffff">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Gallery</title>
-    <meta property="og:title" content="Gallery">
+    <title>Card Example</title>
+    <meta property="og:title" content="Card Example">
     <meta property="og:description" content="">
     <meta property="og:image" content="">
 
@@ -141,13 +141,11 @@
         <div class="flex">
 
             <div id="page-container" class="container px-5 my-5 mx-auto">
-                <p class="mb-4 font-extrabold leading-none tracking-tight text-gray-900 dark:text-white  text-xl sm:text-5xl ">Gallery</p>
-<p class="mb-6 text-lg font-normal text-gray-500 lg:text-xl dark:text-gray-400">Here are some examples of what you can create with PyVibe.</p>
-<p class="mb-4 font-extrabold leading-none tracking-tight text-gray-900 dark:text-white  text-lg sm:text-2xl ">Basic</p>
+                <p class="mb-4 font-extrabold leading-none tracking-tight text-gray-900 dark:text-white  text-xl sm:text-5xl ">Card Example</p>
 <div class="block p-6 mb-6 bg-white border border-gray-200 rounded-lg shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 overflow-x-auto max-w-fit mx-auto ">
     <div class="flex flex-col h-full ">
-        <p class="mb-4 font-extrabold leading-none tracking-tight text-gray-900 dark:text-white  text-xl sm:text-5xl ">Basic Card</p>
-<p class="mb-6 text-lg font-normal text-gray-500 lg:text-xl dark:text-gray-400">This is a basic card.</p>
+        <p class="mb-4 font-extrabold leading-none tracking-tight text-gray-900 dark:text-white  text-xl sm:text-5xl ">Card Header</p>
+<p class="mb-6 text-lg font-normal text-gray-500 lg:text-xl dark:text-gray-400">This is a card. You can put most types of content in a card.</p>
 <p class="text-gray-500 dark:text-gray-400 ">
     <a href="https://pycob.com" class="inline-flex items-center font-medium text-blue-600 dark:text-blue-500 hover:underline">
     Learn more
@@ -156,79 +154,13 @@
 </p> 
     </div>
 </div>
-<p class="mb-4 font-extrabold leading-none tracking-tight text-gray-900 dark:text-white  text-lg sm:text-2xl ">Advanced</p>
-<div class="block p-6 mb-6 bg-white border border-gray-200 rounded-lg shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 overflow-x-auto max-w-fit mx-auto ">
-    <div class="flex flex-col h-full ">
-        <p class="mb-4 font-extrabold leading-none tracking-tight text-gray-900 dark:text-white  text-xl sm:text-5xl ">Advanced Card</p>
-<p class="mb-6 text-lg font-normal text-gray-500 lg:text-xl dark:text-gray-400">This is an advanced card.</p>
-<p class="text-gray-500 dark:text-gray-400 ">
-    <a href="https://pycob.com" class="inline-flex items-center font-medium text-blue-600 dark:text-blue-500 hover:underline">
-    Learn more
-    <svg aria-hidden="true" class="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-    </a>
-</p>
-<img class="max-w-fit h-auto rounded-lg w-1/2 " src="https://cdn.pycob.com/pyvibe.svg" alt="logo">
-<p class="mb-6 text-lg font-normal text-gray-500 lg:text-xl dark:text-gray-400">You can add images, text, and links to cards.</p> 
-    </div>
-</div>
-<p class="mb-4 font-extrabold leading-none tracking-tight text-gray-900 dark:text-white  text-lg sm:text-2xl ">Grid</p>
-<div class="  grid gap-6 md:grid-cols-2">
-    <div class="block p-6 mb-6 bg-white border border-gray-200 rounded-lg shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 overflow-x-auto max-w-fit mx-auto ">
-    <div class="flex flex-col h-full ">
-        <p class="mb-4 font-extrabold leading-none tracking-tight text-gray-900 dark:text-white  text-xl sm:text-5xl ">Card 1</p>
-<p class="mb-6 text-lg font-normal text-gray-500 lg:text-xl dark:text-gray-400">This is card 1.</p>
-<p class="text-gray-500 dark:text-gray-400 ">
-    <a href="https://pycob.com" class="inline-flex items-center font-medium text-blue-600 dark:text-blue-500 hover:underline">
-    Learn more
-    <svg aria-hidden="true" class="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-    </a>
-</p> 
-    </div>
-</div>
-<div class="block p-6 mb-6 bg-white border border-gray-200 rounded-lg shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 overflow-x-auto max-w-fit mx-auto ">
-    <div class="flex flex-col h-full ">
-        <p class="mb-4 font-extrabold leading-none tracking-tight text-gray-900 dark:text-white  text-xl sm:text-5xl ">Card 2</p>
-<p class="mb-6 text-lg font-normal text-gray-500 lg:text-xl dark:text-gray-400">This is card 2.</p>
-<p class="text-gray-500 dark:text-gray-400 ">
-    <a href="https://pycob.com" class="inline-flex items-center font-medium text-blue-600 dark:text-blue-500 hover:underline">
-    Learn more
-    <svg aria-hidden="true" class="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-    </a>
-</p> 
-    </div>
-</div>
-<div class="block p-6 mb-6 bg-white border border-gray-200 rounded-lg shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 overflow-x-auto max-w-fit mx-auto ">
-    <div class="flex flex-col h-full ">
-        <p class="mb-4 font-extrabold leading-none tracking-tight text-gray-900 dark:text-white  text-xl sm:text-5xl ">Card 3</p>
-<p class="mb-6 text-lg font-normal text-gray-500 lg:text-xl dark:text-gray-400">This is card 3.</p>
-<p class="text-gray-500 dark:text-gray-400 ">
-    <a href="https://pycob.com" class="inline-flex items-center font-medium text-blue-600 dark:text-blue-500 hover:underline">
-    Learn more
-    <svg aria-hidden="true" class="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-    </a>
-</p> 
-    </div>
-</div>
-<div class="block p-6 mb-6 bg-white border border-gray-200 rounded-lg shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 overflow-x-auto max-w-fit mx-auto ">
-    <div class="flex flex-col h-full ">
-        <p class="mb-4 font-extrabold leading-none tracking-tight text-gray-900 dark:text-white  text-xl sm:text-5xl ">Card 4</p>
-<p class="mb-6 text-lg font-normal text-gray-500 lg:text-xl dark:text-gray-400">This is card 4.</p>
-<p class="text-gray-500 dark:text-gray-400 ">
-    <a href="https://pycob.com" class="inline-flex items-center font-medium text-blue-600 dark:text-blue-500 hover:underline">
-    Learn more
-    <svg aria-hidden="true" class="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-    </a>
-</p> 
-    </div>
-</div> 
-</div>
 <p class="mb-4 font-extrabold leading-none tracking-tight text-gray-900 dark:text-white  text-xl sm:text-5xl ">Python Source</p>
 <p class="mb-6 text-lg font-normal text-gray-500 lg:text-xl dark:text-gray-400">This is the source code for the current page.</p>
 
-    <script src="https://emgithub.com/embed-v2.js?target=https%3A//github.com/pycob/pyvibe/blob/main/generator/gallery/index.py&style=vs2015&type=code&showBorder=on&showLineNumbers=on&showFileMeta=on&showFullPath=on&showCopy=on&fetchFromJsDelivr=on"></script>
+    <script src="https://emgithub.com/embed-v2.js?target=https%3A//github.com/pycob/pyvibe/blob/main/generator/gallery/card.py&style=vs2015&type=code&showBorder=on&showLineNumbers=on&showFileMeta=on&showFullPath=on&showCopy=on&fetchFromJsDelivr=on"></script>
 
 <p class="text-gray-500 dark:text-gray-400 ">
-    <a href="https://github.com/pycob/pyvibe/blob/main/generator/gallery/index.py" class="inline-flex items-center font-medium text-blue-600 dark:text-blue-500 hover:underline">
+    <a href="https://github.com/pycob/pyvibe/blob/main/generator/gallery/card.py" class="inline-flex items-center font-medium text-blue-600 dark:text-blue-500 hover:underline">
     View Source
     <svg aria-hidden="true" class="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
     </a>