Prerequisites

docs/package.json

@@ -14,7 +14,7 @@
     "@astrojs/tailwind": "^4.0.0",
     "@docsearch/js": "^3.5.1",
     "@tailwindcss/typography": "^0.5.9",
-    "astro": "^2.10.7",
+    "astro": "^2.10.15",
     "tailwindcss": "^3.3.3"
   },
   "devDependencies": {

docs/src/components/Footer.astro

@@ -1,11 +1,30 @@
 <footer 
   transition:persist
-  class="h-36 pt-12 flex flex-col items-center justify-center">
+  class="flex justify-center items-center my-2">
   <a
     class="mx-2 text-sm underline"
-    href="https://github.com/codediodeio/sveltefire">Source Code</a
+    href="https://github.com/codediodeio/sveltefire">
+    <svg aria-hidden="true" data-prefix="fab" data-icon="github" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" class="svggithub "><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg>
+    Github</a
+  >
+  <a
+    class="mx-2 text-sm underline"
+    href="https://discord.gg/SpDdJ3qaKK">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"></path></svg>
+    Discord</a
+  >
+  <a
+  class="mx-2 text-sm underline"
+  href="https://twitter.com/fireship_dev">
+  <svg aria-hidden="true" data-prefix="fab" data-icon="twitter" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svgtwitter  "><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>
+  Twitter</a
+  >
+  <a
+  class="mx-2 text-sm underline"
+  href=" https://www.youtube.com/c/Fireship">
+  <svg aria-hidden="true" data-prefix="fab" data-icon="youtube" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="svgyoutube  "><path fill="currentColor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path></svg>
+  Youtube</a
   >
-
   <a
     class="github-button"
     href="https://github.com/codediodeio/sveltefire"
@@ -15,3 +34,5 @@
     aria-label="Star codediodeio/sveltefire on GitHub">Star</a
   >
 </footer>
+
+<h6 class="flex justify-center items-center my-2">Helpful Links</h6>

docs/src/components/SideNav.astro

@@ -1,5 +1,6 @@
-<nav id="sidebar" class="pt-12 w-1/6 min-w-[16rem] bg-gray1 dark:bg-gray7 hidden lg:block">
-  <ul class="pl-8 font-code mb-20">
+<nav id="sidebar" class="absolute z-10 w-full pt-12 lg:relative lg:w-1/6 min-w-[16rem] bg-gray1 dark:bg-gray7 hidden lg:block">  <ul class="pl-8 font-code mb-20">
+    <li class="heading">Prerequisites</li>
+    <li><a href="/prerequisites/prerequisites">&ltPrerequisites&gt</a></li>
     <li class="heading">guide</li>
     <li><a href="/">why?</a></li>
     <li><a href="/guide/start">get started</a></li>
@@ -23,6 +24,11 @@
     <li><a href="/storage/storage-list">&ltStorageList&gt</a></li>
     <li class="heading">analytics</li>
     <li><a href="/guide/todo">&ltPageView&gt</a></li>
+    <li class="heading">aboutCreator</li>
+    <li><a href="/about/jeff-delaney">&ltJeffDelaney&gt</a></li>
+    <li><a href="/about/contributors">&ltContributors&gt</a></li>
+    <li class="heading">contactUS</li>
+    <li><a href="/contactus/contact-form">&ltContactForm&gt</a></li>
   </ul>
 </nav>
 

docs/src/components/TopNav.astro

@@ -81,8 +81,10 @@ import Search from './Search.astro'
   document.getElementById("dark")!.addEventListener("click", dark);
 
   const sidebarBtn = document.getElementById("sidebarBtn");
+  const article = document.querySelector("article")
   sidebarBtn.onclick = function () {
     const sidebar = document.getElementById("sidebar");
     sidebar.classList.toggle("hidden");
+    article.classList.toggle("hidden")
   };
 </script>

docs/src/layouts/MainLayout.astro

@@ -23,12 +23,12 @@ import Footer from "../components/Footer.astro";
   </head>
   <body class="dark:bg-gray6 dark:text-white transition-colors duration-500">
     <TopNav />
-    <div class="flex items-stretch overflow-x-hidden">
+    <div class="relative flex items-stretch overflow-x-hidden">
       <SideNav />
       <main
         class="max-w-screen-2xl min-h-screen p-6 lg:p-20 mx-auto prose dark:prose-invert w-full flex flex-col justify-between"
       >
-        <article>
+        <article >
           <slot />
         </article>
 

docs/src/pages/about/contributors.md

@@ -0,0 +1,32 @@
+---
+title: Contributors Component
+pubDate: 2023-08-10
+description: SvelteFire DownloadURL Component API reference
+layout: ../../layouts/MainLayout.astro
+---
+
+# Contributors Creator
+
+Primary Contributors to SvelteFire Library
+
+### Sabz
+
+- Sabz is a self-taught developer && designer. He is interested in web, desktop development.
+
+### Jarrett Helton
+
+- Jarrett is a code enthusiast from the Central Michigan area. He is a jack-of-all-trades engineer with experiences in just about everything you can shake a stick at. When not slangin’ code for federal health care contracts, he finds enjoyment with side projects through different LLCs and is always open for more consultations. 
+
+- On the occasion he is not coding or sleeping, you can find him chilling with his wife and daughter.
+
+### Kyle Leary
+
+- Kyle aka “Klutch” or “KlutchDev” is a battle-hardened fullstack JavaScript/React && Firebase developer from western Massachusetts. Klutch is currently learning Rust, TypeScript, and preparing for the OSWE exam. 
+
+- When not writing code he is relaxing at home with his long time sweetheart Chelsea and cats Murph/Zelda or shredding guitar.
+
+### Shawn Eubanks
+
+- devEUBE = technology geek and expert problem solver. I love to learn anything new, and I am especially interested and passionate about emerging technologies in cloud computing and web development. I am driven and passionate about sharing skills and knowledge with others and helping others succeed using new and innovative technologies.
+
+- Passionate Hobbies: Learning New Media, Gaming and Design / Development of media and web presences.

docs/src/pages/about/jeff-delaney.md

@@ -0,0 +1,24 @@
+---
+title: About Creator Component
+pubDate: 2023-08-10
+description: SvelteFire DownloadURL Component API reference
+layout: ../../layouts/MainLayout.astro
+---
+
+# About Creator
+
+Delaney is the creator and mastermind behind Fireship.io, famous for his enigmatic voice, his "100 seconds of Code" series and dry humour.
+Jeff Delaney is a Google Developer Expert and the creator of fireship.io. When not writing code, he is out seeking adventure with his wife and 3 boys.
+
+
+Jeff Delaney (known online as Fireship), is an American variety web development YouTuber who does tutorials on full-stack web development, explanations for various aspects of web technologies, and many original series of tech related videos such as The Code Report, 100 Seconds of Code and Code This, Not That.
+
+Jeff originally started as Angular Firebase, posting tutorials of using Angular, a JavaScript UI framework alongside with Firebase, a service for building databases and back-end infrastructure. By 2018, he published his first popular non-Firebase video about VS Code tips and tricks, up until he finally rebranded as Fireship by 2019.
+
+He currently has three running video series:
+
+- 100 Seconds of X - a short, 100 second video where Jeff provides a very condensed crash course about a particular concept, such as "DNS Explained in 100 Seconds", or a programming language, such as "Python in 100 Seconds". He regularly goes beyond 100 seconds, discussing and explaining further than the regular format, and often invites professional and experienced people to be featured in the video, assisting in the "beyond" section of the video.
+
+- Code This Not That - a varied video format where Jeff showcases common mistakes or non productive habits commonly seen in development environments, one of these is "10 CSS Pro Tips - Code this, NOT that!", where he showcases 10 tips and tricks about CSS.
+
+- The Code Report - A series of news-like of major events in the tech industry, the first episode: "How a CS student tracks Elon’s Private Jet with Python // The Code Report", where Jeff reports the story of Jack Sweeney, a then 19-year-old Python developer, created a bot that tracked and disseminated information about Elon Musk's one and only private jet. He also covers JavaScript frameworks and AI-related news as well.

docs/src/pages/contactus/contact-form.md

@@ -0,0 +1,13 @@
+---
+title: Contact US Component
+pubDate: 2023-08-10
+description: SvelteFire DownloadURL Component API reference
+layout: ../../layouts/MainLayout.astro
+---
+
+# Contact US
+
+<!-- [Click here to open the form](https://opnform.com/forms/contact-form-cehnv0){:target="_blank" rel="noopener noreferrer"} -->
+<div style="padding: 20px;">
+<iframe style="border:none;width:100%;" height="600px" src="https://opnform.com/forms/contact-form-ddaxag"></iframe>
+</div>

docs/src/pages/prerequisites/prerequisites.md

@@ -0,0 +1,34 @@
+---
+title: Prerequisites Component
+pubDate: 2023-08-10
+description: SvelteFire DownloadURL Component API reference
+layout: ../../layouts/MainLayout.astro
+---
+
+# Prerequisites
+
+## Svelte : [Svelte Docs](https://svelte.dev/).
+
+
+- compiled
+Svelte shifts as much work as possible out of the browser and into your build step. No more manual optimisations — just faster, more efficient apps.
+
+- compact
+Write breathtakingly concise components using languages you already know — HTML, CSS and JavaScript. Oh, and your application bundles will be tiny as well.
+
+- complete
+Built-in scoped styling, state management, motion primitives, form bindings and more — don't waste time trawling npm for the bare essentials. It's all here.
+
+
+## Firebase : [Firebase Docs](https://firebase.google.com/docs) 
+
+- Firebase, Inc is a set of backend cloud computing services and application development platforms provided by Google. It hosts databases, services, authentication, and integration for a variety of applications, including Android, iOS, JavaScript, Node.js, Java, Unity, PHP, and C++.
+
+- Build
+Build powerful apps. Spin up your backend without managing servers. Effortlessly scale to support millions of users with Firebase databases, machine learning infrastructure, hosting and storage solutions, and Cloud Functions.
+
+- Release & Monitor
+Improve app quality in less time with less effort. Simplify testing, triaging, and troubleshooting. Carefully roll out features and monitor adoption. Pinpoint, prioritize, and fix stability and performance issues early.
+
+- Engage
+Boost user engagement with rich analytics, A/B testing, and messaging campaigns. Understand your users to better support and retain them. Run experiments to test ideas and uncover new insights. Customize your app for different user segments