lightnet 4.3.0 → 4.4.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # lightnet
 
+## 4.4.0
+
+### Minor Changes
+
+- [#409](https://github.com/LightNetDev/LightNet/pull/409) [`6d214f6`](https://github.com/LightNetDev/LightNet/commit/6d214f6b620dc00b8860da50006778649e977d59) - Add ` disallowSearchIndexing` settings to exclude entire site or pages from search engines.
+
+### Patch Changes
+
+- [#409](https://github.com/LightNetDev/LightNet/pull/409) [`6d214f6`](https://github.com/LightNetDev/LightNet/commit/6d214f6b620dc00b8860da50006778649e977d59) - Improved footer layout
+
 ## 4.3.0
 
 ### Minor Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "LightNet makes it easy to run your own digital media library.",
   "type": "module",
   "license": "MIT",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/LightNetDev/lightnet",

package/src/astro-integration/config.ts

@@ -110,22 +110,10 @@ export const configSchema = z.object({
    */
   favicon: faviconSchema.array().optional(),
   /**
-   * Enable displaying a “Powered by LightNet” link in your site’s footer.
-   */
-  credits: z.boolean().default(false),
-  /**
-   * Optional localized text to display in your site's footer.
-   *
-   * Use `{{year}}` to render the current calendar year.
-   *
-   * @example { en: "Copyright {{year}} LightNet" }
-   */
-  footerText: translationMapSchema.optional(),
-  /**
-   * Optional links to display in your site's footer.
+   * If set too true, this sets robots meta tag to no index to tell search engines like google to
+   * not add any page of this media library to their search results.
    */
-  footerLinks: z.array(linkSchema).optional(),
-
+  disallowSearchIndexing: z.boolean().optional(),
   /**
    * Link to manifest file within public/ folder
    */
@@ -186,6 +174,22 @@ export const configSchema = z.object({
    * @example "./src/components/MyHeadTag.astro"
    */
   headComponent: z.string().optional(),
+  /**
+   * Enable displaying a “Powered by LightNet” link in your site’s footer.
+   */
+  credits: z.boolean().default(false),
+  /**
+   * Optional localized text to display in your site's footer.
+   *
+   * Use `{{year}}` to render the current calendar year.
+   *
+   * @example { en: "Copyright {{year}} LightNet" }
+   */
+  footerText: translationMapSchema.optional(),
+  /**
+   * Optional links to display in your site's footer.
+   */
+  footerLinks: z.array(linkSchema).optional(),
   /**
    * Path to an Astro component to be added at the bottom of all pages.
    *

package/src/layouts/Page.astro

@@ -7,10 +7,10 @@ import config from "virtual:lightnet/config"
 
 import { resolveLanguage } from "../i18n/resolve-language"
 import { pathWithBase } from "../utils/paths"
-import Favicon from "./components/Favicon.astro"
-import Footer from "./components/Footer.astro"
-import Header from "./components/Header.astro"
-import ViewTransition from "./components/ViewTransition.astro"
+import Footer from "./components/footer/Footer.astro"
+import Header from "./components/header/Header.astro"
+import Favicon from "./components/meta/Favicon.astro"
+import ViewTransition from "./components/meta/ViewTransition.astro"
 
 export interface Props {
   /**
@@ -37,10 +37,26 @@ export interface Props {
    * analytics providers that choose to respect it. e.g. @lightnet/plausible-analytics
    */
   disableShouldTrack?: boolean
+  /**
+   * Disallow search indexing for this page from search tools like google.
+   * This tells them to not index content on this page.
+   *
+   * There is also a global setting to disable search indexing for all pages.
+   * The page specific setting will take precedence.
+   *
+   * default: false
+   */
+  disallowSearchIndexing?: boolean
 }
 
-const { title, description, mainClass, locale, disableShouldTrack } =
-  Astro.props
+const {
+  title,
+  description,
+  mainClass,
+  locale,
+  disableShouldTrack,
+  disallowSearchIndexing,
+} = Astro.props
 const { currentLocale: pathCurrentLocale, tConfigField } = Astro.locals.i18n
 const currentLocale = locale ?? pathCurrentLocale
 const configTitle = tConfigField(config.title, config)
@@ -56,6 +72,11 @@ const { direction } = resolveLanguage(currentLocale)
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    {
+      (disallowSearchIndexing ?? config.disallowSearchIndexing) && (
+        <meta name="robots" content="noindex" />
+      )
+    }
     {CustomHead && <CustomHead />}
     <title>{title ? `${title} | ${configTitle}` : configTitle}</title>
     {description && <meta name="description" content={description} />}

package/src/layouts/components/footer/Credits.astro

@@ -0,0 +1,14 @@
+---
+import { getLinkAttributes } from "../../../utils/link-attributes"
+import LightNetLogo from "./LightNetLogo.svg"
+
+const { t } = Astro.locals.i18n
+---
+
+<a
+  class="inline-flex items-center gap-2 whitespace-nowrap underline-offset-4 hover:underline"
+  {...getLinkAttributes("https://lightnet.community")}
+>
+  <img src={LightNetLogo.src} alt="" class="h-5 w-auto" loading="lazy" />
+  <span>{t("ln.footer.powered-by-lightnet")}</span>
+</a>

package/src/layouts/components/footer/Footer.astro

@@ -0,0 +1,88 @@
+---
+import config from "virtual:lightnet/config"
+
+import { getLinkAttributes } from "../../../utils/link-attributes"
+import { localizePath } from "../../../utils/paths"
+import Credits from "./Credits.astro"
+import { formatFooterText } from "./format-footer-text"
+import LanguageSelectionMenu from "./LanguageSelectionMenu.astro"
+
+const { tConfigField, currentLocale } = Astro.locals.i18n
+
+// Resolve optional footer text for the current locale.
+const footerText = config.footerText
+  ? formatFooterText(tConfigField(config.footerText, config))
+  : undefined
+
+// Prepare footer links using the same locale rules as the main menu.
+const footerLinks = (config.footerLinks ?? []).map(
+  ({ href, label, requiresLocale }) => {
+    return {
+      href: requiresLocale ? localizePath(currentLocale, href) : href,
+      label: tConfigField(label, config),
+    }
+  },
+)
+
+const shouldShowLanguageSelectionMenu = config.locales.length > 1
+
+// Hide the footer entirely when there is nothing to show.
+const shouldRenderFooter =
+  config.credits ||
+  !!footerText ||
+  footerLinks.length > 0 ||
+  shouldShowLanguageSelectionMenu
+
+if (!shouldRenderFooter) {
+  return
+}
+
+const footerItems = [
+  ...(footerText ? [{ type: "text" as const, label: footerText }] : []),
+  ...footerLinks.map((link) => ({ type: "link" as const, ...link })),
+]
+---
+
+<footer class="w-full border-t border-gray-200 bg-white text-sm text-gray-800">
+  <div
+    class="mx-auto flex w-full max-w-screen-xl px-4 py-4 md:px-8 md:py-6"
+    class:list={footerItems.length === 0
+      ? "flex-col justify-between gap-4 sm:flex-row sm:items-center"
+      : "flex-col gap-2"}
+  >
+    {shouldShowLanguageSelectionMenu && <LanguageSelectionMenu />}
+    {
+      (footerItems.length > 0 || config.credits) && (
+        <div class="flex shrink flex-col gap-6 md:flex-row md:items-start md:justify-between">
+          {footerItems.length > 0 && (
+            <div class="flex w-full min-w-0 flex-1 shrink flex-wrap">
+              {footerItems.map((item, index) => (
+                <span class="inline-flex">
+                  {item.type === "text" ? (
+                    <span>{item.label}</span>
+                  ) : (
+                    <a
+                      {...getLinkAttributes(item.href)}
+                      class="underline-offset-4 hover:underline"
+                    >
+                      {item.label}
+                    </a>
+                  )}
+                  {index !== footerItems.length - 1 && (
+                    <span
+                      class="shrink-0 px-2 text-gray-400"
+                      aria-hidden="true"
+                    >
+                      &middot;
+                    </span>
+                  )}
+                </span>
+              ))}
+            </div>
+          )}
+          {config.credits && <Credits />}
+        </div>
+      )
+    }
+  </div>
+</footer>

package/src/layouts/components/footer/LanguageSelectionMenu.astro

@@ -0,0 +1,44 @@
+---
+import { GlobeIcon } from "lucide-react"
+
+import { getLanguageSelectionMenuItems } from "../get-language-selection-menu-items"
+
+const { t, tConfigField, currentLocale } = Astro.locals.i18n
+
+const { links: languageMenuItems } = getLanguageSelectionMenuItems({
+  currentLocale,
+  pathname: Astro.url.pathname,
+  tConfigField,
+})
+---
+
+<label class="inline-flex items-center gap-2 py-2 font-medium">
+  <GlobeIcon className="h-5 w-5 shrink-0 text-gray-600" aria-hidden="true" />
+  <span class="sr-only">{t("ln.select-language")}</span>
+  <select
+    class="min-w-0 cursor-pointer appearance-none border-0 bg-transparent p-0 pr-0 outline-none focus:ring-0"
+    aria-label={t("ln.select-language")}
+    data-footer-language-select
+  >
+    {
+      languageMenuItems.map(({ href, label, locale, active }) => (
+        <option value={href} selected={active} lang={locale}>
+          {label}
+        </option>
+      ))
+    }
+  </select>
+</label>
+<script>
+  const footerLanguageSelect = document.querySelector<HTMLSelectElement>(
+    "[data-footer-language-select]",
+  )
+
+  footerLanguageSelect?.addEventListener("change", () => {
+    if (!footerLanguageSelect.value) {
+      return
+    }
+
+    window.location.assign(footerLanguageSelect.value)
+  })
+</script>

package/src/layouts/components/{LightNetLogo.svg → footer/LightNetLogo.svg}

@@ -1 +1 @@
-<svg viewBox="16 16 141 173" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M88.007 180.642c-21.767-5.846-39.688-19.304-40.574-42.862-.887-23.558 17.751-43.334 45.426-40.84v-7.844c.011-4.03 4.977-5.495 8.021-2.928l29.136 23.729c2.155 1.821 2.15 5.16-.019 7.08l-29.117 24.152c-3.059 2.72-8.031.681-8.02-3.349v-8.005c-2.916-.453-5.137-.579-6.708-.453-25.207 2.016-23.083 44.6 20.454 42.388 18.705-.951 49.148-21.73 50.394-53.985 0-48.62-60.4-64.433-45.205-97.762 1.529-3.354-4.627-4.867-8.501-3.393-15.573 4.29-32.752 13.714-42.526 41.693-1.251 3.581-2.824 12.038-4.168 15.558-1.242 3.533-3.034 11.445-7.996 11.025-6.501-.55-4.236-11.168-2.815-15.74 1.197-3.854-4.14-7.109-9.028-2.073-8.3 8.549-16.598 19.982-19.804 37.823-1.259 7.001-1.327 16.903.101 25.208 6.204 36.183 37.705 59.276 68.356 58.915 7.58-.09 7.787-6.942 2.593-8.337Z" fill="#374151"/></svg>
+<svg viewBox="16 16 141 173" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M88.007 180.642c-21.767-5.846-39.688-19.304-40.574-42.862-.887-23.558 17.751-43.334 45.426-40.84v-7.844c.011-4.03 4.977-5.495 8.021-2.928l29.136 23.729c2.155 1.821 2.15 5.16-.019 7.08l-29.117 24.152c-3.059 2.72-8.031.681-8.02-3.349v-8.005c-2.916-.453-5.137-.579-6.708-.453-25.207 2.016-23.083 44.6 20.454 42.388 18.705-.951 49.148-21.73 50.394-53.985 0-48.62-60.4-64.433-45.205-97.762 1.529-3.354-4.627-4.867-8.501-3.393-15.573 4.29-32.752 13.714-42.526 41.693-1.251 3.581-2.824 12.038-4.168 15.558-1.242 3.533-3.034 11.445-7.996 11.025-6.501-.55-4.236-11.168-2.815-15.74 1.197-3.854-4.14-7.109-9.028-2.073-8.3 8.549-16.598 19.982-19.804 37.823-1.259 7.001-1.327 16.903.101 25.208 6.204 36.183 37.705 59.276 68.356 58.915 7.58-.09 7.787-6.942 2.593-8.337Z" fill="#4b5563"/></svg>

package/src/layouts/components/{LanguagePicker.astro → header/LanguageSelectionMenu.astro}

@@ -1,7 +1,7 @@
 ---
 import { GlobeIcon } from "lucide-react"
 
-import { getLanguageSelectionMenuItems } from "./get-language-selection-menu-items"
+import { getLanguageSelectionMenuItems } from "../get-language-selection-menu-items"
 import Menu from "./Menu.astro"
 import MenuItem from "./MenuItem.astro"
 

package/src/layouts/components/{MenuItem.astro → header/MenuItem.astro}

@@ -1,5 +1,5 @@
 ---
-import { getLinkAttributes } from "../../utils/link-attributes"
+import { getLinkAttributes } from "../../../utils/link-attributes"
 
 interface Props {
   href: string

package/src/layouts/components/{PageNavigation.astro → header/PageNavigation.astro}

@@ -2,9 +2,9 @@
 import { ExternalLinkIcon, MenuIcon, SearchIcon } from "lucide-react"
 import config from "virtual:lightnet/config"
 
-import { isExternalUrl } from "../../utils/is-external-url"
-import { localizePath, searchPagePath } from "../../utils/paths"
-import LanguagePicker from "./LanguagePicker.astro"
+import { isExternalUrl } from "../../../utils/is-external-url"
+import { localizePath, searchPagePath } from "../../../utils/paths"
+import LanguageSelectionMenu from "./LanguageSelectionMenu.astro"
 import Menu from "./Menu.astro"
 import MenuItem from "./MenuItem.astro"
 
@@ -40,7 +40,7 @@ const items = (config.mainMenu ?? []).map(({ href, label, requiresLocale }) => {
     )
   }
 
-  <LanguagePicker />
+  <LanguageSelectionMenu />
 
   {
     !!items.length && (

package/src/layouts/components/{PageTitle.astro → header/PageTitle.astro}

@@ -4,7 +4,7 @@ import { Image } from "astro:assets"
 import config from "virtual:lightnet/config"
 import logo from "virtual:lightnet/logo"
 
-import { localizePath } from "../../utils/paths"
+import { localizePath } from "../../../utils/paths"
 
 function getWidth(logo: ImageMetadata) {
   const size = config.logo?.size ?? 28

package/src/layouts/components/Footer.astro

@@ -1,149 +0,0 @@
----
-import { GlobeIcon } from "lucide-react"
-import config from "virtual:lightnet/config"
-
-import { getLinkAttributes } from "../../utils/link-attributes"
-import { localizePath } from "../../utils/paths"
-import { formatFooterText } from "./format-footer-text"
-import { getLanguageSelectionMenuItems } from "./get-language-selection-menu-items"
-import LightNetLogo from "./LightNetLogo.svg"
-
-const { t, tConfigField, currentLocale } = Astro.locals.i18n
-
-// Resolve optional footer text for the current locale.
-const footerText = config.footerText
-  ? formatFooterText(tConfigField(config.footerText, config))
-  : undefined
-
-// Prepare footer links using the same locale rules as the main menu.
-const footerLinks = (config.footerLinks ?? []).map(
-  ({ href, label, requiresLocale }) => {
-    return {
-      href: requiresLocale ? localizePath(currentLocale, href) : href,
-      label: tConfigField(label, config),
-    }
-  },
-)
-
-const { links: languageMenuItems } = getLanguageSelectionMenuItems({
-  currentLocale,
-  pathname: Astro.url.pathname,
-  tConfigField,
-})
-
-const shouldShowLanguageSelector = languageMenuItems.length > 1
-
-// Hide the footer entirely when there is nothing to show.
-const shouldRenderFooter =
-  config.credits ||
-  !!footerText ||
-  footerLinks.length > 0 ||
-  shouldShowLanguageSelector
-
-if (!shouldRenderFooter) {
-  return
-}
-
-const footerItems = [
-  ...(footerText ? [{ type: "text" as const, label: footerText }] : []),
-  ...footerLinks.map((link) => ({ type: "link" as const, ...link })),
-]
----
-
-<footer class="w-full border-t border-gray-200 bg-white">
-  <div class="mx-auto w-full max-w-screen-xl px-4 md:px-8">
-    <div class="flex flex-col gap-4 py-6">
-      {
-        shouldShowLanguageSelector && (
-          <div class="flex w-full justify-start">
-            <label class="inline-flex items-center gap-2 bg-white py-2 text-sm text-gray-800">
-              <GlobeIcon
-                className="h-4 w-4 shrink-0 text-gray-500"
-                aria-hidden="true"
-              />
-              <span class="sr-only">{t("ln.select-language")}</span>
-              <select
-                class="min-w-0 cursor-pointer appearance-none border-0 bg-transparent p-0 pr-0 text-sm font-medium text-gray-800 outline-none focus:ring-0"
-                aria-label={t("ln.select-language")}
-                data-footer-language-select
-              >
-                {languageMenuItems.map(({ href, label, locale, active }) => (
-                  <option value={href} selected={active} lang={locale}>
-                    {label}
-                  </option>
-                ))}
-              </select>
-            </label>
-          </div>
-        )
-      }
-
-      <div
-        class="flex w-full flex-col gap-4 text-sm text-gray-800 md:flex-row md:items-center md:justify-between md:gap-6"
-      >
-        {
-          footerItems.length > 0 && (
-            <div class="flex w-full flex-row flex-wrap items-center gap-x-2 gap-y-1 md:w-auto">
-              {footerItems.map((item, index) => (
-                <span class="inline-flex items-center gap-1.5">
-                  <span
-                    class:list={[
-                      "w-3 shrink-0 justify-center text-center text-[0.8em] leading-none text-gray-400",
-                      index === 0 ? "hidden" : "inline-flex",
-                    ]}
-                    aria-hidden="true"
-                  >
-                    &middot;
-                  </span>
-                  {item.type === "text" ? (
-                    <span class="text-gray-800">{item.label}</span>
-                  ) : (
-                    <a
-                      {...getLinkAttributes(item.href)}
-                      class="text-gray-800 underline-offset-4 hover:underline"
-                    >
-                      {item.label}
-                    </a>
-                  )}
-                </span>
-              ))}
-            </div>
-          )
-        }
-
-        {
-          config.credits && (
-            <div class="flex w-full items-center justify-start md:w-auto md:justify-end">
-              <a
-                class="flex items-center gap-2 whitespace-nowrap text-gray-800 underline-offset-4 hover:underline"
-                {...getLinkAttributes("https://lightnet.community")}
-              >
-                <img
-                  src={LightNetLogo.src}
-                  alt=""
-                  class="h-5 w-auto"
-                  loading="lazy"
-                />
-                <span>{t("ln.footer.powered-by-lightnet")}</span>
-              </a>
-            </div>
-          )
-        }
-      </div>
-    </div>
-  </div>
-</footer>
-
-<script>
-  const footerLanguageSelect = document.querySelector<HTMLSelectElement>(
-    "[data-footer-language-select]",
-  )
-
-  footerLanguageSelect?.addEventListener("change", () => {
-    if (!footerLanguageSelect.value) {
-      return
-    }
-
-    window.location.assign(footerLanguageSelect.value)
-  })
-</script>