Mobile (#128)

* Cleaner mobile bar

* Improved mobile layout

* Update styles.ts

* Now we have a metadata line

* Clean up the MetaDataLine

* Cleaner layout

* Improved link list

* Better blog button

* Cleaner cards

* Lint

* Clean up

* Clean up

* Update components.ts

* Update EntryList.test.tsx

* Update website/components/StarSupport.tsx

Co-authored-by: Copilot <[email protected]>

* Update website/layouts/LayoutDefault.tsx

Co-authored-by: Copilot <[email protected]>

---------

Co-authored-by: fretchen <[email protected]>
Co-authored-by: Copilot <[email protected]>

Author: 3 people

website/components/Card.tsx

@@ -1,19 +1,18 @@
 import * as React from "react";
 import { Link } from "./Link";
 import { CardProps } from "../types/components";
-import { card } from "../layouts/styles";
+import { baseContentCard } from "../layouts/styles";
 
-// Einfache Card-Komponente
+// Einheitliche Card-Komponente mit verbesserter mobiler Erfahrung
 export const Card: React.FC<CardProps> = ({ title, description, link }) => {
   return (
-    <div className={card.container}>
-      <div className={card.content}>
-        <div className={card.text}>
-          <h3 className={card.title}>{title}</h3>
-          <p className={card.description}>{description}</p>
+    <Link href={link} className={baseContentCard.container}>
+      <div className={baseContentCard.content}>
+        <div className={baseContentCard.text}>
+          <h3 className={baseContentCard.title}>{title}</h3>
+          <p className={baseContentCard.description}>{description}</p>
         </div>
-        <Link href={link}>Read more →</Link>
       </div>
-    </div>
+    </Link>
   );
 };

website/components/EntryList.tsx

@@ -30,9 +30,10 @@ const EntryList: React.FC<EntryListProps> = ({
       {displayBlogs.map((blog, index) => {
         // Calculates the correct index for links when order is reversed
         const linkIndex = reverseOrder ? blogs.length - 1 - index : index;
+        const entryUrl = `${basePath}/${linkIndex}`;
 
         return (
-          <div key={linkIndex} className={entryList.entry}>
+          <Link key={linkIndex} href={entryUrl} className={entryList.entry}>
             <div className={entryList.entryContent}>
               {/* Large NFT image on the left side of the entire entry */}
               {(blog.tokenID || blog.nftMetadata?.imageUrl) && (
@@ -45,20 +46,19 @@ const EntryList: React.FC<EntryListProps> = ({
 
               {/* Text content */}
               <div className={entryList.entryText}>
-                {/* Date */}
-                {showDate && blog.publishing_date && <p className={entryList.entryDate}>{blog.publishing_date}</p>}
+                <div className={entryList.entryTextContent}>
+                  {/* Date */}
+                  {showDate && blog.publishing_date && <p className={entryList.entryDate}>{blog.publishing_date}</p>}
 
-                {/* Title */}
-                <h3 className={`${entryList.entryTitle} ${titleClassName || ""}`}>{blog.title}</h3>
+                  {/* Title */}
+                  <h3 className={`${entryList.entryTitle} ${titleClassName || ""}`}>{blog.title}</h3>
 
-                {/* Description */}
-                {blog.description && <p className={entryList.entryDescription}>{blog.description}</p>}
+                  {/* Description */}
+                  {blog.description && <p className={entryList.entryDescription}>{blog.description}</p>}
+                </div>
               </div>
-
-              {/* Read more link */}
-              <Link href={`${basePath}/${linkIndex}`}>Read more →</Link>
             </div>
-          </div>
+          </Link>
         );
       })}
 

website/components/Footer.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { layout } from "../layouts/styles";
+
+/**
+ * Footer Component
+ *
+ * Displays discrete attribution and footer information
+ */
+const Footer: React.FC = () => {
+  return (
+    <footer className={layout.footer}>
+      <span className={layout.footerAttribution}>by fretchen</span>
+    </footer>
+  );
+};
+
+export default Footer;

website/components/Link.tsx

@@ -2,15 +2,15 @@ import React from "react";
 import { usePageContext } from "vike-react/usePageContext";
 import { css } from "../styled-system/css";
 
-export function Link({ href, children }: { href: string; children: React.ReactNode }) {
+export function Link({ href, children, className }: { href: string; children: React.ReactNode; className?: string }) {
   const pageContext = usePageContext();
   const { urlPathname } = pageContext;
   const isActive = href === "/" ? urlPathname === href : urlPathname.startsWith(href);
 
   return (
     <a
       href={href}
-      className={css({
+      className={`${css({
         // Grundlegende Link-Styles
         color: "token(colors.primary)",
 
@@ -23,7 +23,7 @@ export function Link({ href, children }: { href: string; children: React.ReactNo
         _hover: {
           backgroundColor: isActive ? "token(colors.border)" : "token(colors.background)",
         },
-      })}
+      })} ${className || ""}`}
     >
       {children}
     </a>

website/components/MetadataLine.tsx

@@ -0,0 +1,96 @@
+import * as React from "react";
+import { useSupportAction } from "../hooks/useSupportAction";
+import { usePageContext } from "vike-react/usePageContext";
+import { metadataLine } from "../layouts/styles";
+
+interface MetadataLineProps {
+  publishingDate?: string;
+  showSupport?: boolean;
+  className?: string;
+}
+
+/**
+ * MetadataLine Component
+ *
+ * Displays content metadata in a discrete, natural way:
+ * "January 15, 2025  •  ⭐ 12 supporters"
+ *
+ * Integrates support functionality seamlessly with other metadata.
+ */
+export default function MetadataLine({ publishingDate, showSupport = false, className }: MetadataLineProps) {
+  const pageContext = usePageContext();
+  const currentUrl = pageContext.urlPathname;
+
+  // Support functionality (only load if needed)
+  const { supportCount, isLoading, isSuccess, errorMessage, isConnected, handleSupport, isReadPending, readError } =
+    useSupportAction(showSupport ? currentUrl : "");
+
+  // Format publishing date
+  const formatDate = (dateString: string) => {
+    try {
+      const date = new Date(dateString);
+      return date.toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      });
+    } catch {
+      return dateString; // Fallback to original string if parsing fails
+    }
+  };
+
+  // Handle support click
+  const handleSupportClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    if (!isConnected) {
+      // Could show a connect wallet message
+      return;
+    }
+    handleSupport();
+  };
+
+  // Render support section
+  const renderSupportSection = () => {
+    if (!showSupport) return null;
+
+    if (isReadPending) {
+      return "⭐ Loading...";
+    }
+
+    if (readError) {
+      return "⭐ Error";
+    }
+
+    const count = parseInt(supportCount) || 0;
+    const supportText = count === 1 ? "supporter" : "supporters";
+
+    return (
+      <button
+        onClick={handleSupportClick}
+        disabled={isLoading || !isConnected}
+        className={metadataLine.supportButton}
+        title={errorMessage || (isConnected ? "Support this content" : "Connect wallet to support")}
+      >
+        {isLoading ? "⭐ Supporting..." : isSuccess ? `★ ${count} ${supportText}` : `⭐ ${count} ${supportText}`}
+      </button>
+    );
+  };
+
+  // Build metadata items
+  const metadataItems = [publishingDate && formatDate(publishingDate), renderSupportSection()].filter(Boolean);
+
+  if (metadataItems.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={`${metadataLine.container} ${className || ""}`}>
+      {metadataItems.map((item, index) => (
+        <React.Fragment key={index}>
+          {index > 0 && <span className={metadataLine.separator}>•</span>}
+          {item}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}

website/components/Post.tsx

@@ -5,10 +5,10 @@ import rehypeKatex from "rehype-katex";
 import remarkGfm from "remark-gfm";
 import rehypeRaw from "rehype-raw";
 import { PostProps } from "../types/components";
-import TitleBar from "./TitleBar";
+import MetadataLine from "./MetadataLine";
 import { Link } from "./Link";
 import { NFTFloatImage } from "./NFTFloatImage";
-import { post } from "../layouts/styles";
+import { post, titleBar } from "../layouts/styles";
 import "katex/dist/katex.min.css";
 
 import Giscus from "@giscus/react";
@@ -144,8 +144,8 @@ export function Post({
 
   return (
     <>
-      <TitleBar title={title} />
-      {publishing_date && <p className={post.publishingDate}>Published on: {publishing_date}</p>}
+      <h1 className={titleBar.title}>{title}</h1>
+      <MetadataLine publishingDate={publishing_date} showSupport={true} />
 
       {/* Render based on post type */}
       {type === "react" && componentPath ? (

website/components/StarSupport.tsx

@@ -0,0 +1,124 @@
+import * as React from "react";
+import { usePageContext } from "vike-react/usePageContext";
+import { useSupportAction } from "../hooks/useSupportAction";
+import { starSupport } from "../layouts/styles";
+
+interface StarSupportProps {
+  variant?: "progress" | "inline";
+  className?: string;
+}
+
+/**
+ * StarSupport Component
+ *
+ * Compact star-based support button with two variants:
+ * - progress: Integrated with reading progress bar (sticky top)
+ * - inline: Inline content placement
+ */
+export default function StarSupport({ variant = "progress", className }: StarSupportProps) {
+  const pageContext = usePageContext();
+  const currentUrl = pageContext.urlPathname;
+
+  // Reading progress state
+  const [readingProgress, setReadingProgress] = React.useState(0);
+  const [isVisible, setIsVisible] = React.useState(false);
+  const [showTooltip, setShowTooltip] = React.useState(false);
+
+  // Support functionality
+  const { supportCount, isLoading, isSuccess, errorMessage, isConnected, handleSupport } = useSupportAction(currentUrl);
+
+  // Reading progress calculation
+  React.useEffect(() => {
+    if (variant !== "progress") return;
+
+    const calculateProgress = () => {
+      const scrollTop = window.pageYOffset;
+      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+      const progress = Math.min((scrollTop / docHeight) * 100, 100);
+
+      setReadingProgress(progress);
+      setIsVisible(progress > 5); // Show after 5% scroll
+    };
+
+    calculateProgress();
+    window.addEventListener("scroll", calculateProgress);
+    window.addEventListener("resize", calculateProgress);
+
+    return () => {
+      window.removeEventListener("scroll", calculateProgress);
+      window.removeEventListener("resize", calculateProgress);
+    };
+  }, [variant]);
+
+  // Handle support click
+  const handleSupportClick = () => {
+    setShowTooltip(false);
+    handleSupport();
+  };
+
+  // Show tooltip on hover if there's an error
+  const handleMouseEnter = () => {
+    if (errorMessage) {
+      setShowTooltip(true);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    setShowTooltip(false);
+  };
+
+  // Render star icon
+  const renderStarIcon = () => {
+    if (isLoading) {
+      return "⏳";
+    }
+    if (isSuccess) {
+      return <span className={`${starSupport.starIcon} ${starSupport.starIconFilled}`}>★</span>;
+    }
+    return <span className={starSupport.starIcon}>☆</span>;
+  };
+
+  // Render support button
+  const renderSupportButton = (buttonClass: string) => (
+    <div style={{ position: "relative" }}>
+      <button
+        onClick={handleSupportClick}
+        disabled={!isConnected || isLoading}
+        className={`${buttonClass} ${isSuccess ? starSupport.supportButtonActive : ""}`}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
+        {renderStarIcon()}
+        <span className={starSupport.supportCount}>{isLoading ? "..." : supportCount}</span>
+      </button>
+
+      {/* Tooltip for errors */}
+      {showTooltip && errorMessage && <div className={starSupport.tooltip}>{errorMessage}</div>}
+    </div>
+  );
+
+  // Progress variant (sticky top bar)
+  if (variant === "progress") {
+    return (
+      <div className={`${starSupport.progressContainer} ${className || ""}`} data-visible={isVisible}>
+        <div className={starSupport.progressBar}>
+          <div className={starSupport.progressFill} style={{ width: `${readingProgress}%` }} />
+        </div>
+
+        {renderSupportButton(starSupport.supportButton)}
+      </div>
+    );
+  }
+
+  // Inline variant (content placement)
+  return (
+    <div className={`${starSupport.inlineContainer} ${className || ""}`}>
+      <div className={starSupport.inlineText}>
+        ⭐ Quality content? Support the creator!
+        {parseInt(supportCount, 10) > 0 && ` ${supportCount} others already did.`}
+      </div>
+
+      {renderSupportButton(starSupport.inlineButton)}
+    </div>
+  );
+}