lightnet 3.9.1 → 3.10.1

package/src/i18n/translations.ts

@@ -1,5 +1,10 @@
 import YAML from "yaml"
 
+import {
+  type AdminTranslationKey,
+  builtInAdminTranslations,
+} from "../admin/i18n/translations"
+
 const builtInTranslations = {
   ar: () => import("./translations/ar.yml?raw"),
   bn: () => import("./translations/bn.yml?raw"),
@@ -32,23 +37,30 @@ const userTranslations = Object.fromEntries(
 )
 
 export const loadTranslations = async (bcp47: string) => ({
-  ...(await loadBuiltInTranslations(bcp47)),
+  ...(await loadBuiltInTranslations(builtInTranslations, bcp47)),
+  ...(await loadBuiltInTranslations(builtInAdminTranslations, bcp47)),
   ...(await loadUserTranslations(bcp47)),
 })
 
-function isBuiltInLanguage(bcp47: string): bcp47 is BuiltInLanguage {
-  return Object.hasOwn(builtInTranslations, bcp47)
+function hasTranslations(
+  translationMap: Record<string, unknown>,
+  bcp47: string,
+): bcp47 is BuiltInLanguage {
+  return Object.hasOwn(translationMap, bcp47)
 }
 
-export const loadBuiltInTranslations = async (bcp47: string) => {
-  if (!isBuiltInLanguage(bcp47)) {
+const loadBuiltInTranslations = async (
+  translationMap: Record<string, () => Promise<typeof import("*?raw")>>,
+  bcp47: string,
+) => {
+  if (!hasTranslations(translationMap, bcp47)) {
     return {}
   }
-  const yml = (await builtInTranslations[bcp47]()).default
+  const yml = (await translationMap[bcp47]()).default
   return YAML.parse(yml)
 }
 
-export const loadUserTranslations = async (bcp47: string) => {
+const loadUserTranslations = async (bcp47: string) => {
   if (!userTranslations[bcp47]) {
     return {}
   }
@@ -81,3 +93,5 @@ export type LightNetTranslationKey =
   | "ln.search.placeholder"
   | "ln.search.title"
   | "ln.share.url-copied-to-clipboard"
+  | "ln.footer.powered-by-lightnet"
+  | AdminTranslationKey

package/src/layouts/Page.astro

@@ -5,6 +5,7 @@ import config from "virtual:lightnet/config"
 
 import { resolveLanguage } from "../i18n/resolve-language"
 import Favicon from "./components/Favicon.astro"
+import Footer from "./components/Footer.astro"
 import Header from "./components/Header.astro"
 import PreloadReact from "./components/PreloadReact"
 import ViewTransition from "./components/ViewTransition.astro"
@@ -30,7 +31,7 @@ const language = resolveLanguage(currentLocale)
     <title>{title ? `${title} | ${configTitle}` : configTitle}</title>
     {description && <meta name="description" content={description} />}
     {config.manifest && <link rel="manifest" href={config.manifest} />}
-    <link rel="prefetch" href="/api/search.json" />
+    <link rel="prefetch" href="/api/internal/search.json" />
     <Favicon />
     <ViewTransition />
   </head>
@@ -41,7 +42,7 @@ const language = resolveLanguage(currentLocale)
     <main class="grow pb-8 pt-14 sm:py-20">
       <slot />
     </main>
-    {CustomFooter && <CustomFooter />}
+    {CustomFooter ? <CustomFooter /> : <Footer />}
     <PreloadReact client:idle />
   </body>
 </html>

package/src/layouts/components/Footer.astro

@@ -0,0 +1,24 @@
+---
+import config from "virtual:lightnet/config"
+
+import LightNetLogo from "./LightNetLogo.svg"
+
+if (!config.credits) {
+  return
+}
+---
+
+<footer class="w-full border-t border-gray-300">
+  <div
+    class="mx-auto flex w-full max-w-screen-xl justify-end px-4 py-4 md:px-8"
+  >
+    <a
+      class="flex items-center gap-2 py-2 text-sm text-gray-800 hover:underline"
+      href="https://lightnet.community"
+      target="_blank"
+    >
+      <img src={LightNetLogo.src} alt="" class="h-5 w-auto" loading="lazy" />
+      {Astro.locals.i18n.t("ln.footer.powered-by-lightnet")}
+    </a>
+  </div>
+</footer>

package/src/layouts/components/LightNetLogo.svg

@@ -0,0 +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>

package/src/pages/details-page/components/MainDetailsSection.astro

@@ -1,6 +1,7 @@
 ---
 import Authors from "./main-details/Authors.astro"
 import CoverImage from "./main-details/CoverImage.astro"
+import EditButton from "./main-details/EditButton.astro"
 import ShareButton from "./main-details/ShareButton.astro"
 import Title from "./main-details/Title.astro"
 
@@ -19,7 +20,10 @@ const { mediaId, imageSize } = Astro.props
   <div class="flex w-full grow flex-col items-center sm:items-start">
     <Title className="text-center sm:text-start" mediaId={mediaId} />
     <Authors className="mt-2" mediaId={mediaId} />
-    <ShareButton className="mt-3" />
+    <div class="mt-4 flex gap-6">
+      <ShareButton />
+      <EditButton mediaId={mediaId} />
+    </div>
     <slot />
   </div>
 </div>

package/src/pages/details-page/components/VideoDetailsSection.astro

@@ -2,6 +2,7 @@
 import VideoPlayer from "../../../components/VideoPlayer.astro"
 import { getMediaItem } from "../../../content/get-media-items"
 import Authors from "./main-details/Authors.astro"
+import EditButton from "./main-details/EditButton.astro"
 import ShareButton from "./main-details/ShareButton.astro"
 import Title from "./main-details/Title.astro"
 
@@ -26,5 +27,8 @@ const item = await getMediaItem(mediaId)
 >
   <Title mediaId={mediaId} />
   <Authors mediaId={mediaId} />
-  <ShareButton className="mt-3" />
+  <div class="mt-4 flex gap-6">
+    <ShareButton />
+    <EditButton mediaId={mediaId} />
+  </div>
 </div>

package/src/pages/details-page/components/main-details/EditButton.astro

@@ -0,0 +1,30 @@
+---
+import config from "virtual:lightnet/config"
+
+import Icon from "../../../../components/Icon"
+
+interface Props {
+  mediaId: string
+}
+
+const { mediaId } = Astro.props
+---
+
+<a
+  class="hidden cursor-pointer items-center gap-2 font-bold text-gray-700 underline"
+  id="edit-btn"
+  data-admin-enabled={config.experimental?.admin?.enabled}
+  href={`/${Astro.currentLocale}/admin/media/${mediaId}`}
+  ><Icon className="mdi--square-edit-outline" ariaLabel="" />
+  {Astro.locals.i18n.t("ln.admin.edit")}</a
+>
+<script>
+  const btn: HTMLAnchorElement | null = document.querySelector("#edit-btn")
+  const showEditButton =
+    btn?.dataset.adminEnabled === "true" &&
+    (import.meta.env.DEV || localStorage.getItem("ln-admin-enabled") === "true")
+  if (showEditButton) {
+    btn?.classList.remove("hidden")
+    btn?.classList.add("flex")
+  }
+</script>

package/src/pages/details-page/components/main-details/ShareButton.astro

@@ -1,5 +1,6 @@
 ---
 import Icon from "../../../../components/Icon"
+import Toast from "../../../../components/Toast"
 
 interface Props {
   className?: string
@@ -13,16 +14,15 @@ interface Props {
   ><Icon className="mdi--share" ariaLabel="" />
   {Astro.locals.i18n.t("ln.details.share")}</button
 >
-<div
-  id="share-success"
-  class="dy-toast pointer-events-none opacity-0 transition-opacity duration-300"
->
-  <div class="dy-alert dy-alert-success">
-    <span>{Astro.locals.i18n.t("ln.share.url-copied-to-clipboard")}</span>
-  </div>
-</div>
+<Toast id="share-success" variant="success">
+  {Astro.locals.i18n.t("ln.share.url-copied-to-clipboard")}
+</Toast>
 <script>
+  import { showToastById } from "../../../../components/showToast"
+
   const btn = document.querySelector("#share-btn")
+  const toastId = "share-success"
+
   btn?.addEventListener("click", () => {
     if (navigator.share) {
       navigator
@@ -34,11 +34,7 @@ interface Props {
       navigator.clipboard
         .writeText(window.location.href)
         .then(() => {
-          const toast = document.querySelector<HTMLElement>("#share-success")!
-          toast.style.opacity = "100%"
-          setTimeout(() => {
-            toast.style.opacity = "0%"
-          }, 3000)
+          showToastById(toastId)
         })
         .catch((error) => console.log("Error copying URL to clipboard:", error))
     }

package/src/pages/{api → search-page/api}/search.ts

@@ -1,9 +1,9 @@
 import type { APIRoute } from "astro"
 import { getImage } from "astro:assets"
 
-import type { MediaItemEntry } from "../../content/content-schema"
-import { getMediaItems } from "../../content/get-media-items"
-import { markdownToText } from "../../utils/markdown"
+import type { MediaItemEntry } from "../../../content/content-schema"
+import { getMediaItems } from "../../../content/get-media-items"
+import { markdownToText } from "../../../utils/markdown"
 import type { SearchItem } from "./search-response"
 
 export const GET: APIRoute = async () => {

package/src/pages/search-page/components/SearchListItem.tsx

@@ -1,7 +1,7 @@
 import CoverImageDecorator from "../../../components/CoverImageDecorator"
 import Icon from "../../../components/Icon"
 import { detailsPagePath } from "../../../utils/paths"
-import type { SearchItem } from "../../api/search-response"
+import type { SearchItem } from "../api/search-response"
 
 export type MediaType = {
   name: string

package/src/pages/search-page/hooks/use-search.ts

@@ -1,7 +1,7 @@
 import Fuse from "fuse.js"
 import { useEffect, useMemo, useRef, useState } from "react"
 
-import type { SearchItem, SearchResponse } from "../../api/search-response"
+import type { SearchItem, SearchResponse } from "../api/search-response"
 import { observeSearchQuery, type SearchQuery } from "../utils/search-query"
 
 interface Context {
@@ -28,10 +28,10 @@ export function useSearch({ categories, mediaTypes, languages }: Context) {
     })
     const fetchData = async () => {
       try {
-        const response = await fetch("/api/search.json")
+        const response = await fetch("/api/internal/search.json")
         if (!response.ok) {
           throw new Error(
-            "Was not able to load search results from /api/search.json.",
+            "Was not able to load search results from /api/internal/search.json.",
           )
         }
         const { items }: SearchResponse = await response.json()

package/tailwind.config.ts

@@ -35,6 +35,7 @@ export function lightnetStyles({
             secondary: primary,
             accent: primary,
             neutral: "#030712",
+            error: "#9f1239",
             "base-100": "#f9fafb",
 
             "--rounded-box": "0.375rem", // border radius rounded-box utility class, used in card and other large boxes