Merge pull request #77 from adastackio/os_builders

Improve styles, add OS links across the site, general fixes and reorg

assets/icons/index.ts

@@ -7,3 +7,5 @@ export { default as StarIcon } from "./star.svg";
 export { default as CopyIcon } from "./copy.svg";
 export { default as CopySuccessIcon } from "./copy_success.svg";
 export { default as SingleCommitIcon } from "./single_commit.svg";
+export { default as CardanoIcon } from "./cardano.svg";
+export { default as BlankFallback } from "./blank_fallback.svg";

components/HomeHero.jsx

@@ -1,4 +1,3 @@
-// components/HomeHero.jsx
 import Link from "next/link";
 import Image from "next/image";
 import bgImage from "../assets/images/bg.jpg";
@@ -26,7 +25,10 @@ const HomeHero = () => {
         </p>
 
         <div className="flex flex-col items-center gap-2 mb-9 text-gray-300">
-          <div className="flex items-center gap-2 w-[355px] text-[17px]">
+          <div
+            className="flex items-center gap-2 text-[17px]"
+            style={{ maxWidth: "355px" }}
+          >
             <span>
               Adastack is your comprehensive guide to the Cardano ecosystem.
               Open-source knowledge, curated by the Cardano community.

components/LibraryInfoBar.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import RepoShieldIo from "./badges/shield_io_badges/RepoShieldIo";
+import LanguageShieldIo from "./badges/shield_io_badges/LanguageShieldIo";
+import LatestCommitBadgeIo from "./badges/shield_io_badges/LatestCommitBadgeIo";
+
+interface LibraryInfoBarProps {
+  repoURL: string;
+  language: string;
+}
+
+const LibraryInfoBar = ({ repoURL, language }: LibraryInfoBarProps) => {
+  return (
+    <div className="code-library-info-bar flex gap-2 items-center">
+      <LanguageShieldIo language={language} isColorChanging={false} />
+      <LatestCommitBadgeIo repoURL={repoURL} />
+      <RepoShieldIo repoURL={repoURL} />
+    </div>
+  );
+};
+
+export default LibraryInfoBar;

components/badges/Favicon.tsx

@@ -1,16 +1,31 @@
 import Image from "next/image";
+import { useState } from "react";
+import { BlankFallback } from "../../assets/icons";
 
 type FaviconProps = {
   url: string | null;
 };
 
 const Favicon = ({ url }: FaviconProps) => {
+  const [imageError, setImageError] = useState(false);
+  const [src] = useState(
+    `https://www.google.com/s2/favicons?sz=128&domain_url=${url}`
+  );
+
   return (
-    <span className="inline-flex size-6 items-center justify-center shrink-0 rounded-md bg-background p-1 favicon-custom-css">
-      <Image
-        loading="lazy"
-        className="aspect-square h-3"
-        src={`https://www.google.com/s2/favicons?sz=128&domain_url=${url}`} alt={""}      />
+    <span className="inline-flex size-6 items-center justify-center shrink-0 rounded-md bg-background p-1 favicon-custom-css relative h-3 w-3">
+      {imageError ? (
+        <BlankFallback className="h-full w-full" />
+      ) : (
+        <Image
+          loading="lazy"
+          className="aspect-square"
+          src={src}
+          alt="Favicon"
+          fill
+          onError={() => setImageError(true)}
+        />
+      )}
     </span>
   );
 };

components/badges/OS.tsx

@@ -0,0 +1,19 @@
+import { OSIcon } from "../../assets/icons";
+
+const OS = ({ url, className }) => {
+  if (!url) return null;
+
+  const spanClass = className
+    ? `open-source-icon-inline inline-block h-3 w-3 ${className}`
+    : "open-source-icon-inline inline-block h-3 w-3";
+
+  return (
+    <span className={spanClass}>
+      <a href={url} target="_blank" rel="noopener">
+        <OSIcon />
+      </a>
+    </span>
+  );
+};
+
+export default OS;