2.20.1 Release (#324)

* Rename the directory for the Contact Form from `/form` to `/contact`. (#316)

* Rename success.astro to success.astro

* Update and rename index.astro to index.astro

* Update index.astro

* Update paid.astro

* Update Footer.astro

* Update privacy.astro

* Change the text in the navbar from 'AT Products' to 'Home'.

* Bump version to 2.20.1

* Changed the donations card's content to be a flexbox.

* Removed vr from previous commit

* Move a phrase around in paid terms.

* Rename some main IDs for paidterms and terms.

* Update licenses to include highlight.js and dracula themes

* Update Navbar.astro

* Update licenses to include highlight.js and dracula themes (#318)

* Enable alert.

* Update stories to have a professional layout. (#319)

* Update licenses to include highlight.js and dracula themes

* Update stories to have a professional layout

* Update index.astro

* Update component to include more customize options

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* final fix for tonight

* final final fix

* final final fix

* final final fix

* Add story.

* Commit 2 of story

* Commit 3 of story

* Update Navbar.astro

* Update div.astro

* Update cctv.astro

* Commit 4 of story

* Commit 5 of story

* Commit 6 of story

* Update cctv.astro

* Update Navbar.astro

* Commit 7 of story

* Commit 8 of story

* Commit 9 of story

* Commit 9 of story

* Update cctv.astro

* Update Navbar.astro

* Update Navbar.astro

* Update Navbar.astro

* Update Navbar.astro

* Update cctv.astro

* Update div.astro

* Update cctv.astro

* Update Navbar.astro

* Update Navbar.astro

* Update Navbar.astro

* Update Navbar.astro

* Update div.astro

* Update other.css

* Update div.astro

* Update div.astro

* Update index.astro

* Update Navbar.astro

* Update index.astro

* Update alert-1.js

* Update alert-1.js

* Update alert-2.js

* Update codinghome.astro

* Update codinghome.astro

* Update codinghome.astro

* Update codinghome.astro

* Add more resources to CodingHome. (#322)

* Update codinghome.astro

* Update codinghome.astro

* Update codinghome.astro

* Update privacy.astro

* Added more resources into CodingHome. (#326)

* Add 2 sections to C++ Basics in CodingHome. (#327)

* Add 2 sections to C++ Basics

* Small little fix

* Small little fix 2

* Small little fix 3

* Update codinghome.astro

* Update codinghome.astro

* Small little fix 4

* Add buttons to most basics in CodingHome. (#328)

* Update stories to contain source references.

* Add StoryViewer icon + Redo alt attributes.

* Fix a invaild link.

* Fix a invaild link.

* Reverse logos

* Fix

* Fix

* Replace logos

* Revert "Replace logos"

This reverts commit b1dc39d.

* Replace logos

* Revert "Replace logos"

This reverts commit d2aa7a8.

* Replace logos

* Final fix

* Remove ms on navbar.

* Kept the stories navbar up-to-date.

* Add 2.20.1 Changelog. (#330)

* Add 2.20.1 Changelog

* Add media.

* Fix error in changelog.

* Revise changelog

* Update archive.astro

* Update archive.astro

* Update changelog to reflect #331.

* Properly update

* Add a new section just in case if there is no sections to scroll to in stories.

* Replace logo.

* Add new a story, 'The Internet Now is Dull and Gray'. (#332)

* Add new a story, 'The Internet Now is Dull and Gray'.

* Revert "Add new a story, 'The Internet Now is Dull and Gray'."

This reverts commit 7fb3366.

* Add new a story, 'The Internet Now is Dull and Gray'.

* Revert "Add new a story, 'The Internet Now is Dull and Gray'."

This reverts commit 92b2b38.

* Add new a story, 'The Internet Now is Dull and Gray'.

* Revert "Add new a story, 'The Internet Now is Dull and Gray'."

This reverts commit 7e41695.

* Add media.

* Where did the page go...?

* Add card + replace author

* Add new scrollable section.

* Replace link.

* Add more tabs.

* Add italics

* Fix names

* Replace link.

* Add text-wrap to sources

* Add one more thing...

* Good enough

* Add tabs.

* Replace logos

* Fix date on div story.

* Fix changelog.

README.md

@@ -32,4 +32,4 @@ AT Products LLC, otherwise known as AT Products, is an informative technology co
 The "AT" in AT Products does stand for Alex Toucan.
 <hr>
 <h6>atproducts.xyz is under a MIT license. <a href="https://atproducts.xyz/licenses#ours">View more information</a>.
-<h6>Last Recorded Version: 2.20</h6>
+<h6>Last Recorded Version: 2.20.1</h6>

netlify.toml

@@ -20,7 +20,7 @@
       preload'''
     Content-Security-Policy = '''
       default-src 'none'; 
-      frame-src 'self' https://app.netlify.com/; 
+      frame-src 'self' https://app.netlify.com/ https://codepen.io; 
       form-action 'self'; 
       base-uri 'self'; 
       manifest-src 'self'; 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "atproducts.xyz",
-  "version": "2.20",
+  "version": "2.20.1",
   "config": {
     "version_short": "2.20"
   },
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@astrojs/react": "^3.6.2",
-    "astro": "^4.16.6",
+    "astro": "^4.16.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }

public/static/alert-1.js

@@ -34,7 +34,7 @@ function eraseAlert1Cookie(name) {
 }
 
 $(document).ready(function () {
-    if (pureAlert1Enabled && window.location.pathname.indexOf("/cctv") === -1 && !getAlert1Cookie('pureAlert1Dismiss')) {
+    if (pureAlert1Enabled && window.location.pathname.indexOf("/stories/") === -1 && !getAlert1Cookie('pureAlert1Dismiss')) {
         var header = $('header');
         var alert1Container = $('<div class="alert-container"></div>');
         alert1Container.html('<div class="alert ' + pureAlert1Type + ' alert-dismissible fade show mb-0 d-flex gap-2" role="alert"> <i class="bi ' + pureAlert1Icon + ' h-100"></i><div><strong>' + pureAlert1Title + '</strong> ' + pureAlert1Desc + ' <a class="icon-link icon-link-hover" href="' + pureAlert1Link + '">' + pureAlert1LinkDesc + '<i class="bi bi-arrow-right h-100"></i></a></div><button onclick="pureAlert1Dismiss();" type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div>');

public/static/alert-2.js

@@ -35,7 +35,7 @@ function eraseAlert2Cookie(name) {
 
 /* Comment this section if there is no alert loaded */
 $(document).ready(function () {
-    if (pureAlert2Enabled && window.location.pathname.indexOf("/cctv") === -1 && !getAlert2Cookie('pureAlert2Dismiss')) {
+    if (pureAlert2Enabled && window.location.pathname.indexOf("/stories/") === -1 && !getAlert2Cookie('pureAlert2Dismiss')) {
         var header = $('header');
         var alert2Container = $('<div class="alert-container"></div>');
         alert2Container.html('<div class="alert ' + pureAlert2Type + ' alert-dismissible fade show mb-0 d-flex gap-2" role="alert"> <i class="bi ' + pureAlert2Icon + ' h-100"></i><div><strong>' + pureAlert2Title + '</strong> ' + pureAlert2Desc + ' <a class="icon-link icon-link-hover" href="' + pureAlert2Link + '">' + pureAlert2LinkDesc + '<i class="bi bi-arrow-right h-100"></i></a></div><button onclick="pureAlert2Dismiss();" type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div>');

public/static/other.css

@@ -17,29 +17,33 @@ html, body {
 }
 
 .hero {
-    width: 100%;
-    position: relative;
-    z-index: 1000;
-    background-size: cover !important;
-    background-position: center center !important;
-    background-repeat: no-repeat !important;   
+  width: 100%;
+  position: relative;
+  z-index: 1000;
+  background-size: cover !important;
+  background-position: center center !important;
+  background-repeat: no-repeat !important;   
 }
 
 .hero-back {
-    border-bottom: solid 1px #dee2e6;
-    background-color: rgba(0, 0, 0, 0.6);
+  border-bottom: solid 1px #dee2e6;
+  background-color: rgba(0, 0, 0, 0.6);
 }
 
 .hero-filter {
   filter: drop-shadow(2px 4px 6px black)
 }
 
 .hero-web {
-    background: url('/media/images/hero-web.webp');
+  background: url('/media/images/hero-web.webp');
+}
+
+.hero-stories {
+  background: url('/media/images/hero-stories.webp');
 }
 
 .hero-flash {
-    background: url('/media/images/hero-flash.webp');
+  background: url('/media/images/hero-flash.webp');
 }
 
 .hero-main {
@@ -6458,5 +6462,13 @@ height: calc(100vh - 448px);
 }
 
 .rounded-6 {
-		border-radius: var(--bs-border-radius-2xl) !important;
+	border-radius: var(--bs-border-radius-2xl) !important;
+}
+
+iframe {
+	padding-bottom: 1rem;
 }
+
+.tab {
+  tab-size: 8;
+}

public/static/version.js

@@ -1 +1 @@
-document.write("2.20");
+document.write("2.20.1");

src/components/Footer.astro

@@ -18,6 +18,7 @@ const { author, hr, marginTop } = Astro.props;
           <ul class="nav flex-column">
             <li class="nav-item mb-2"><a href="/paid" class="nav-link p-0 text-body-secondary">Paid Services</a></li>
             <li class="nav-item mb-2"><a href="/web" class="nav-link p-0 text-body-secondary">Web Projects</a></li>
+            <li class="nav-item mb-2"><a href="/stories" class="nav-link p-0 text-body-secondary">Stories</a></li>
             <li class="nav-item mb-2"><a href="/sms" class="nav-link p-0 text-body-secondary">SMS Bomb</a></li>
             <li class="nav-item mb-2"><a href="/pynx" class="nav-link p-0 text-body-secondary">Pynx's Projects</a></li>
           </ul>
@@ -36,7 +37,8 @@ const { author, hr, marginTop } = Astro.props;
           <ul class="nav flex-column">
             <li class="nav-item mb-2"><a href="/terms" class="nav-link p-0 text-body-secondary">Terms of Service</a></li>
             <li class="nav-item mb-2"><a href="/discord" class="nav-link p-0 text-body-secondary">Discord Rules</a></li>
-            <li class="nav-item mb-2"><a href="/policies" class="nav-link p-0 text-body-secondary">Policies</a></li>
+            <li class="nav-item mb-2"><a href="/privacy" class="nav-link p-0 text-body-secondary">Privacy Policy</a></li>
+            <li class="nav-item mb-2"><a href="/policies" class="nav-link p-0 text-body-secondary">Other Policies</a></li>
             <li class="nav-item mb-2"><a href="/licenses" class="nav-link p-0 text-body-secondary">Licenses</a></li>
           </ul>
         </div>
@@ -67,7 +69,7 @@ const { author, hr, marginTop } = Astro.props;
             <li><a class="link-footer" href="https://github.com/Alex-Toucan/atproducts.xyz" aria-label="GitHub"><i class="bi bi-github"></i></a></li>
             <li><a class="link-footer" href="https://x.com/ATProductsLLC" aria-label="Twitter / X"><i class="bi bi-twitter-x"></i></a></li>
             <li><a class="link-footer" href="https://youtube.com/c/AlexToucanAT" aria-label="YouTube"><i class="bi bi-youtube"></i></a></li>
-            <li><a class="link-footer" href="/form/" aria-label="Contact Form / Email"><i class="bi bi-envelope-fill"></i></a></li>
+            <li><a class="link-footer" href="/contact/" aria-label="Contact Form / Email"><i class="bi bi-envelope-fill"></i></a></li>
             <li><a class="link-footer" href="https://x.com/ATPWeather" aria-label="Weather"><i class="bi bi-cloud-sun-fill"></i></a></li>
           </ul>
         </div>

src/components/Navbar.astro

@@ -1,25 +1,27 @@
 ---
 
 ---
+
 <a href="#main-content" class="visually-hidden-focusable btn btn-primary position-fixed m-2 hero-filter" style="z-index: 2000;">Skip to main content</a>
 
 <header>
 <nav class="navbar navbar-expand-lg fixed-top main-navbar">
   <div class="container-fluid">
-    <a class="navbar-brand" href="/"><img src="/media/images/longblack.webp" height="45px" alt="Icon" class="headerimg"></a>
+    <a class="navbar-brand" href="/"><img src="/media/images/longblack.webp" height="45px" alt="AT Products LLC" class="headerimg"></a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="collapsibleNavbar">
       <ul class="navbar-nav me-auto">
         <li class="nav-item">
-          <a class="nav-link" href="/">AT Products</a>
+          <a class="nav-link" href="/">Home</a>
         </li>
         <li class="nav-item dropdown">
           <a class="nav-link dropdown-toggle" href="javascript:void(0)" role="button" data-bs-toggle="dropdown">Products</a>
           <ul class="dropdown-menu">
             <li><a class="dropdown-item" href="/paid">Paid Services</a></li>
             <li><a class="dropdown-item" href="/web">Web Projects</a></li>
+            <li><a class="dropdown-item" href="/stories">Stories</a></li>
             <li><a class="dropdown-item" href="/sms">SMS Bomb</a></li>
             <li><a class="dropdown-item" href="/pynx">Pynx's Projects</a></li>
           </ul>
@@ -38,7 +40,8 @@
             <ul class="dropdown-menu">
               <li><a class="dropdown-item" href="/terms">Terms of Service</a></li>
               <li><a class="dropdown-item" href="/discord">Discord Rules</a></li>
-              <li><a class="dropdown-item" href="/policies">Policies</a></li>
+              <li><a class="dropdown-item" href="/privacy">Privacy Policy</a></li>
+              <li><a class="dropdown-item" href="/policies">Other Policies</a></li>
               <li><a class="dropdown-item" href="/licenses">Licenses</a></li>
             </ul>
           </li>

src/layouts/CardPage.astro

@@ -1,11 +1,14 @@
 ---
-const { id, title, cardLinks, size } = Astro.props;
+const { id, title, description, cardLinks, size } = Astro.props;
 ---
 
 <div class={`hero hero-${id}`} data-bs-theme="dark">
   <div class="hero-back h-100">
     <div class="hero-filter">
       <h1 class="display-4 fw-bold title pt-3 pb-2" set:html={title}></h1>
+      {description && (
+        <p class="fs-4 mt-0 mb-3 text-body-secondary container">{description}</p>
+      )}
       <div class={`d-${size}-flex flex-wrap mx-2`}>
         {cardLinks && cardLinks.map(({ cardTitle, cardDescription, cardImage, cardWidth, cardHref, secondaryHref, additionalImageClasses }, index) => (
           <div class="col-md mt-1 mb-3 m-1">

src/layouts/stories/Navbar.astro

@@ -1,5 +1,5 @@
 ---
-const { breadcrumbcontent } = Astro.props;
+const { breadcrumbcontent, link, pageTitle } = Astro.props;
 ---
 
 <a href="#main-content" class="visually-hidden-focusable btn btn-primary position-fixed m-2 hero-filter" style="z-index: 2000;">Skip to main content</a>
@@ -8,42 +8,42 @@ const { breadcrumbcontent } = Astro.props;
   <nav class="first-navbar navbar navbar-expand-story main-navbar pb-0">
     <div class="container-fluid">
       <a class="navbar-brand d-inline me-3" href="/">
-        <img src="/media/images/longblack.png" height="45px" alt="Icon" class="headerimg"> 
-        <p class="text-disappear d-inline ms-2 align-middle">BookViewer</p>
+        <img src="/media/images/storyviewer-black.png" height="45px" alt="AT Products LLC - StoryViewer" class="headerimg"> 
       </a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar" aria-label="Toggle navigation" aria-expanded="true">
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="navbar-collapse collapse" id="collapsibleNavbar">
-        <div class="vr story-end"></div>
-        <ul class="ms-story-1 navbar-nav me-auto">
-          <li class="nav-item">
-          <a class="nav-link" href="/">AT Products</a>
-          </li>
-          <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Products</a>
-            <ul class="dropdown-menu">
-              <li><a class="dropdown-item" href="/paid">Paid Services</a></li>
-              <li><a class="dropdown-item" href="/web">Web Projects</a></li>
-              <li><a class="dropdown-item" href="/sms">SMS Bomb</a></li>
-              <li><a class="dropdown-item" href="/pynx">Pynx's Projects</a></li>
-            </ul>
-          </li>
-          <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Communities</a>
-            <ul class="dropdown-menu">
-              <li><a class="dropdown-item" href="/ehs">Ethical Hacking Society</a></li>
-              <li><a class="dropdown-item" href="/script">The Script Community</a></li>
-              <li><a class="dropdown-item" href="/codinghome">CodingHome</a></li>
-              <li><a class="dropdown-item" href="/noodle">Noodle Hackerspace</a></li>
-            </ul>
-          </li>
+      <ul class="navbar-nav me-auto">
+        <li class="nav-item">
+          <a class="nav-link" href="/">Home</a>
+        </li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="javascript:void(0)" role="button" data-bs-toggle="dropdown">Products</a>
+          <ul class="dropdown-menu">
+            <li><a class="dropdown-item" href="/paid">Paid Services</a></li>
+            <li><a class="dropdown-item" href="/web">Web Projects</a></li>
+            <li><a class="dropdown-item" href="/stories">Stories</a></li>
+            <li><a class="dropdown-item" href="/sms">SMS Bomb</a></li>
+            <li><a class="dropdown-item" href="/pynx">Pynx's Projects</a></li>
+          </ul>
+        </li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="javascript:void(0)" role="button" data-bs-toggle="dropdown">Communities</a>
+          <ul class="dropdown-menu">
+            <li><a class="dropdown-item" href="/ehs">Ethical Hacking Society</a></li>
+            <li><a class="dropdown-item" href="/script">The Script Community</a></li>
+            <li><a class="dropdown-item" href="/codinghome">CodingHome</a></li>
+            <li><a class="dropdown-item" href="/noodle">Noodle Hackerspace</a></li>
+          </ul>
+        </li>
           <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Documentation</a>
+            <a class="nav-link dropdown-toggle" href="javascript:void(0)" role="button" data-bs-toggle="dropdown">Documentation</a>
             <ul class="dropdown-menu">
               <li><a class="dropdown-item" href="/terms">Terms of Service</a></li>
               <li><a class="dropdown-item" href="/discord">Discord Rules</a></li>
-              <li><a class="dropdown-item" href="/policies">Policies</a></li>
+              <li><a class="dropdown-item" href="/privacy">Privacy Policy</a></li>
+              <li><a class="dropdown-item" href="/policies">Other Policies</a></li>
               <li><a class="dropdown-item" href="/licenses">Licenses</a></li>
             </ul>
           </li>
@@ -82,27 +82,29 @@ const { breadcrumbcontent } = Astro.props;
       </div>
       </div>
       </nav>
-      <nav class="pb-2 navbar navbar-expand-story navbar-main pt-0 border-fix second-navbar"><div class="container-fluid">
+      <nav class="pb-2 navbar navbar-expand-story navbar-main pt-0 border-fix second-navbar">
+      <div class="container-fluid">
         <div class="navbar-collapse collapse" id="collapsibleNavbar">
           <hr class="permhr m-story-2 m-story-0">
           <ol class="navbar-nav breadcrumb m-0">
             <li class="breadcrumb-item"><a href="/">Home</a></li>
-            <li class="breadcrumb-item"><a href="/noodle">Noodle Hackerspace</a>
-              <div class="dropdown d-inline"><a aria-expanded="true" data-bs-toggle="dropdown" type="button" href="/noodle" class="dropdown-toggle footer-info show">
-              </a>
-              <ul class="dropdown-menu dropdown-story" data-bs-popper="static" aria-label="Dropdown">
-                {breadcrumbcontent && breadcrumbcontent.map(({ name, href, name2, href2 }, index) => (
-                  <li><a class="dropdown-item" href={href}>{name}</a>
-                    {name2 && href2 && (<a class="dropdown-item" href={href2}>{name2}</a>)}
-                  </li>
-                ))}
-              </ul>
-            </div>
-            </li>
-            <li class="breadcrumb-item active" aria-current="page">CCTV Interception</li>
+            <li class="breadcrumb-item"><a href="/stories/">Stories</a></li>
+            {link && link.map(({ name, href }, index) => (
+              <li class="breadcrumb-item dropdown d-inline" key={index}>
+                <a href={href} class="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">{name}</a>
+                {breadcrumbcontent && (
+                  <ul class="dropdown-menu dropdown-story" data-bs-popper="static" aria-label="Dropdown">
+                    {breadcrumbcontent.map(({ name, href }, index) => (
+                      <li key={index}><a class="dropdown-item" href={href}>{name}</a></li>
+                    ))}
+                  </ul>
+                )}
+              </li>
+            ))}
+            <li class="breadcrumb-item active" aria-current="page">{pageTitle}</li>
           </ol>
-          </div>
         </div>
+      </div>
     </nav>
 </header>
 <noscript> 

src/layouts/stories/Scrollspy.astro

@@ -5,9 +5,15 @@ const { id, scrollcontent } = Astro.props;
 <main id={id}>
   <div class="bd-toc col-md-3 p-3 pb-0 story-top-buttons">
     <div id={`${id}-list`} class="list-group">
-      {scrollcontent && scrollcontent.map(({ name, href, additionalClasses }, index) => (
-        <a class={`list-group-item list-group-item-action ${additionalClasses}`} href={href}>{name}</a>
-      ))}
+      {scrollcontent ? (
+        scrollcontent.map(({ name, href, additionalClasses }, index) => (
+          <a class={`list-group-item list-group-item-action ${additionalClasses}`} href={href} key={index}>
+            {name}
+          </a>
+        ))
+      ) : (
+        <strong>There are no sections to scroll to in this story.</strong>
+      )}      
     </div>
   </div>
   <div class="col-md-9 p-3 story-top-scroll story-top-body story-scroll" tabindex="0" data-bs-smooth-scroll="true" data-bs-target={`${id}-list`} data-bs-spy="scroll">