Improves layout for additional resources section

Lissy93 · Jul 30, 2023 · 507fade · 507fade
1 parent db33228
commit 507fade
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 24 deletions.
diff --git a/src/components/misc/AdditionalResources.tsx b/src/components/misc/AdditionalResources.tsx
@@ -11,9 +11,10 @@ gap: 0.5rem;
 grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
 li a.resource-wrap {
   display: flex;
+  flex-direction: column;
   align-items: start;
   gap: 0.25rem;
-  padding: 0.25rem;
+  padding: 0.25rem 0.5rem;
   background: ${colors.background};
   border-radius: 8px;
   text-decoration: none;
@@ -37,27 +38,32 @@ li a.resource-wrap {
   }
 }
 img {
-  width: 4rem;
+  width: 2.5rem;
   border-radius: 4px;
   margin: 0.25rem 0.1rem 0.1rem 0.1rem;
 }
+p, a {
+  margin: 0;
+}
+a.resource-link {
+  color: ${colors.primary};
+  opacity: 0.75;
+  font-size: 0.9rem;
+  transition: all 0.2s ease-in-out;
+}
+.resource-title {
+  font-weight: bold;
+}
+.resource-lower {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
 .resource-details {
   max-width: 20rem;
   display: flex;
   flex-direction: column;
   gap: 0.1rem;
-  p, a {
-    margin: 0;
-  }
-  a.resource-link {
-    color: ${colors.primary};
-    opacity: 0.75;
-    font-size: 0.9rem;
-    transition: all 0.2s ease-in-out;
-  }
-  .resource-title {
-    font-weight: bold;
-  }
   .resource-description {
     color: ${colors.textColorSecondary};
     font-size: 0.9rem;
@@ -155,6 +161,13 @@ const resources = [
     description: 'Checks the performance, accessibility and SEO of a page on mobile + desktop.',
     searchLink: 'https://developers.google.com/speed/pagespeed/insights/?url={URL}',
   },
+  {
+    title: 'Built With',
+    link: 'https://builtwith.com/',
+    icon: 'https://i.ibb.co/5LXBDfD/Built-with.png',
+    description: 'View the tech stack of a website',
+    searchLink: 'https://builtwith.com/{URL}',
+  },
   {
     title: 'DNS Dumpster',
     link: 'https://dnsdumpster.com/',
@@ -203,12 +216,14 @@ const AdditionalResources = (props: { url?: string }): JSX.Element => {
           return (
             <li>
               <a className="resource-wrap" href={makeLink(resource, props.url)}>
-              <img src={resource.icon} alt="" />
-              <div className="resource-details">
                 <p className="resource-title">{resource.title}</p>
                 <a className="resource-link" href={resource.link} target="_blank" rel="noreferrer">{new URL(resource.link).hostname}</a>
-                <p className="resource-description">{resource.description}</p>
-              </div>
+                <div className="resource-lower">
+                  <img src={resource.icon} alt="" />
+                  <div className="resource-details">
+                    <p className="resource-description">{resource.description}</p>
+                  </div>
+                </div>
               </a>
             </li>
           );

diff --git a/src/utils/docs.ts b/src/utils/docs.ts
@@ -322,14 +322,14 @@ const docs: Doc[] = [
   {
     id: 'tech-stack',
     title: 'Tech Stack',
-    description: 'Checks what technologies a site is built with.'
+    description: 'Checks what technologies a site is built with. '
     + 'This is done by fetching and parsing the site, then comparing it against a bit list of RegEx maintained by Wappalyzer to identify the unique fingerprints that different technologies leave.',
     use: 'Identifying a website\'s tech stack aids in evaluating its security by exposing potential vulnerabilities, '
     + 'informs competitive analyses and development decisions, and can guide tailored marketing strategies. '
     + 'Ethical application of this knowledge is crucial to avoid harmful activities like data theft or unauthorized intrusion.',
     resources: [
-      'https://builtwith.com/',
-      'https://github.com/wappalyzer/wappalyzer/tree/master/src/technologies'
+      { title: 'Wappalyzer fingerprints', link: 'https://github.com/wappalyzer/wappalyzer/tree/master/src/technologies'},
+      { title: 'BuiltWith - Check what tech a site is using', link: 'https://builtwith.com/'},
     ],
   },
   {
@@ -338,9 +338,9 @@ const docs: Doc[] = [
     description: 'This job finds and parses a site\'s listed sitemap. This file lists public sub-pages on the site, which the author wishes to be crawled by search engines. Sitemaps help with SEO, but are also useful for seeing all a sites public content at a glance.',
     use: 'Understand the structure of a site\'s public-facing content, and for site-owners, check that you\'re site\'s sitemap is accessible, parsable and contains everything you wish it to.',
     resources: [
-      'https://developers.google.com/search/docs/crawling-indexing/sitemaps/overview',
-      'https://www.sitemaps.org/protocol.html',
-      'https://www.conductor.com/academy/xml-sitemap/',
+      { title: 'Learn about Sitemaps', link: 'https://developers.google.com/search/docs/crawling-indexing/sitemaps/overview'},
+      { title: 'Sitemap XML spec', link: 'https://www.sitemaps.org/protocol.html'},
+      { title: 'Sitemap tutorial', link: 'https://www.conductor.com/academy/xml-sitemap/'},
     ],
     screenshot: 'https://i.ibb.co/GtrCQYq/Screenshot-from-2023-07-21-12-28-38.png',
   },