feat(web): add metadata and logo

web/Dockerfile

@@ -49,8 +49,7 @@ ENV NEXT_TELEMETRY_DISABLED=1
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
 
-# TEMP: bypass build error due to empty public directory
-# COPY --from=builder /app/public ./public
+COPY --from=builder /app/public ./public
 
 # Automatically leverage output traces to reduce image size
 # https://nextjs.org/docs/advanced-features/output-file-tracing

web/src/app/layout.tsx

@@ -1,9 +1,9 @@
-import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Header } from "@/components/header";
 import { Footer } from "@/components/footer";
+export { metadata } from "./metadata";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -15,12 +15,6 @@ const geistMono = Geist_Mono({
   subsets: ["latin"],
 });
 
-export const metadata: Metadata = {
-  title: "FilterLists",
-  description:
-    "FilterLists is the independent, comprehensive directory of filter and host lists for advertisements, trackers, malware, and annoyances. By Collin M. Barrett.",
-};
-
 export default function RootLayout({
   children,
 }: Readonly<{

web/src/app/metadata.ts

@@ -0,0 +1,75 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "FilterLists",
+  description:
+    "FilterLists is the independent, comprehensive directory of filter and host lists for advertisements, trackers, malware, and annoyances. By Collin M. Barrett.",
+  keywords: [
+    "adblock",
+    "filter lists",
+    "blocklists",
+    "host lists",
+    "privacy",
+    "malware",
+    "tracker",
+    "adblock plus",
+    "ublock origin",
+    "adguard",
+    "internet explorer tpl",
+    "dns",
+    "content blocking",
+    "open source",
+    "collin barrett",
+  ],
+  authors: [{ name: "Collin M. Barrett", url: "https://collinmbarrett.com" }],
+  creator: "Collin M. Barrett",
+  publisher: "Collin M. Barrett",
+  metadataBase: new URL("https://filterlists.com"),
+  alternates: {
+    canonical: "https://filterlists.com/",
+  },
+  openGraph: {
+    title: "FilterLists",
+    description:
+      "The independent, comprehensive directory of filter and host lists for advertisements, trackers, malware, and annoyances.",
+    url: "https://filterlists.com/",
+    siteName: "FilterLists",
+    images: [
+      {
+        url: "/logo-filterlists.png",
+        width: 1200,
+        height: 280,
+        alt: "FilterLists logo",
+      },
+    ],
+    locale: "en_US",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "FilterLists",
+    description:
+      "The independent, comprehensive directory of filter and host lists for advertisements, trackers, malware, and annoyances.",
+    images: [
+      {
+        url: "/logo-filterlists.png",
+        alt: "FilterLists logo",
+      },
+    ],
+  },
+  icons: {
+    icon: "/icon.svg",
+  },
+  applicationName: "FilterLists",
+  generator: "Next.js",
+  referrer: "no-referrer",
+  appleWebApp: {
+    capable: true,
+    title: "FilterLists",
+    statusBarStyle: "default",
+  },
+  abstract:
+    "FilterLists is a directory of filter and host lists for adblockers and privacy tools.",
+  category: "Internet",
+  classification: "Web Directory",
+};

web/src/components/header.tsx

@@ -1,15 +0,0 @@
-import { ThemeToggle } from "./theme-toggle";
-
-export function Header() {
-  return (
-    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <div className="container flex h-14 items-center px-2 sm:px-0">
-        <div className="flex flex-1 items-center justify-end space-x-4">
-          <nav className="flex items-center space-x-1">
-            <ThemeToggle />
-          </nav>
-        </div>
-      </div>
-    </header>
-  );
-}

web/src/components/header/index.tsx

@@ -0,0 +1,32 @@
+import { ImageThemed } from "@/components/image-themed";
+import { ThemeToggle } from "../theme-toggle";
+import LogoLight from "./logo-filterlists-light.png";
+import logoDark from "./logo-filterlists-dark.png";
+import styles from "./logoHeader.module.css";
+
+export function Header() {
+  return (
+    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="container flex h-20 items-center px-2 sm:px-0">
+        <div className="flex items-center flex-1 space-x-4">
+          <div className="mr-4 flex-shrink-0">
+            <ImageThemed
+              className={styles.logoHeader}
+              srcLight={LogoLight}
+              srcDark={logoDark}
+              alt="FilterLists logo"
+              width={429}
+              height={100}
+              priority
+            />
+          </div>
+          <div className="flex flex-1 items-center justify-end space-x-4">
+            <nav className="flex items-center space-x-1">
+              <ThemeToggle />
+            </nav>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}

web/src/components/header/logoHeader.module.css

@@ -0,0 +1,6 @@
+@media (max-width: 640px) {
+  .logoHeader {
+    max-width: 222px;
+    max-height: 52px;
+  }
+}