lightnet 3.10.0 → 3.10.2

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 {}
   }
@@ -82,3 +94,4 @@ export type LightNetTranslationKey =
   | "ln.search.title"
   | "ln.share.url-copied-to-clipboard"
   | "ln.footer.powered-by-lightnet"
+  | AdminTranslationKey

package/src/layouts/Page.astro

@@ -31,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>

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/LoadingSkeleton.tsx

@@ -1,6 +1,8 @@
 import Icon from "../../../components/Icon"
+import { useI18n } from "../../../i18n/react/useI18n"
 
-export default function LoadingSkeleton({ direction }: { direction: string }) {
+export default function LoadingSkeleton() {
+  const { direction } = useI18n()
   return (
     <div className="flex h-52 animate-pulse items-center overflow-hidden py-2 sm:h-64">
       <div className="h-36 w-36 shrink-0 rounded-md bg-gray-200"></div>

package/src/pages/search-page/components/SearchFilter.astro

@@ -4,7 +4,7 @@ import config from "virtual:lightnet/config"
 import { getUsedCategories } from "../../../content/get-categories"
 import { contentLanguages } from "../../../content/get-languages"
 import { getMediaTypes } from "../../../content/get-media-types"
-import { provideTranslations } from "../utils/search-filter-translations"
+import { prepareI18nConfig } from "../../../i18n/react/prepare-i18n-config"
 import SearchFilterReact from "./SearchFilter.tsx"
 
 const { t, currentLocale } = Astro.locals.i18n
@@ -49,7 +49,16 @@ if (
 ) {
   initialLanguageFilter = currentLocale
 }
-const translations = provideTranslations(t)
+const i18nConfig = prepareI18nConfig(Astro.locals.i18n, [
+  "ln.search.title",
+  "ln.language",
+  "ln.search.placeholder",
+  "ln.search.all-languages",
+  "ln.type",
+  "ln.search.all-types",
+  "ln.category",
+  "ln.search.all-categories",
+])
 ---
 
 <SearchFilterReact
@@ -57,7 +66,7 @@ const translations = provideTranslations(t)
   languages={languages}
   mediaTypes={mediaTypes}
   categories={categories}
-  translations={translations}
+  i18nConfig={i18nConfig}
   languageFilterEnabled={languageFilterEnabled}
   typesFilterEnabled={typesFilterEnabled}
   categoriesFilterEnabled={categoriesFilterEnabled}

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

@@ -1,12 +1,9 @@
 import { useRef } from "react"
 
 import Icon from "../../../components/Icon"
+import { createI18n, type I18nConfig } from "../../../i18n/react/i18n-context"
 import { useDebounce } from "../hooks/use-debounce"
 import { useSearchQueryParam } from "../hooks/use-search-query-param"
-import type {
-  TranslationKey,
-  Translations,
-} from "../utils/search-filter-translations"
 import { CATEGORY, LANGUAGE, SEARCH, TYPE } from "../utils/search-query"
 import Select from "./Select"
 
@@ -16,7 +13,7 @@ interface Props {
   languages: FilterValue[]
   categories: FilterValue[]
   mediaTypes: FilterValue[]
-  translations: Translations
+  i18nConfig: I18nConfig
   languageFilterEnabled: boolean
   typesFilterEnabled: boolean
   categoriesFilterEnabled: boolean
@@ -26,7 +23,7 @@ interface Props {
 export default function SearchFilter({
   categories,
   mediaTypes,
-  translations,
+  i18nConfig,
   languages,
   languageFilterEnabled,
   typesFilterEnabled,
@@ -40,7 +37,7 @@ export default function SearchFilter({
 
   const searchInput = useRef<HTMLInputElement | null>(null)
 
-  const t = (key: TranslationKey) => translations[key]
+  const { t } = createI18n(i18nConfig)
 
   const debouncedSetSearch = useDebounce((value: string) => {
     setSearch(value)

package/src/pages/search-page/components/SearchList.astro

@@ -4,10 +4,10 @@ import { getCollection } from "astro:content"
 import { getUsedCategories } from "../../../content/get-categories"
 import { contentLanguages } from "../../../content/get-languages"
 import { getMediaTypes } from "../../../content/get-media-types"
-import { provideTranslations } from "../utils/search-translations"
+import { prepareI18nConfig } from "../../../i18n/react/prepare-i18n-config"
 import SearchListReact from "./SearchList.tsx"
 
-const { t, currentLocale, direction } = Astro.locals.i18n
+const { t, currentLocale } = Astro.locals.i18n
 
 const categories: Record<string, string> = {}
 for (const { id, name } of await getUsedCategories(currentLocale, t)) {
@@ -34,15 +34,16 @@ const languages = Object.fromEntries(
 
 const mediaItemsTotal = (await getCollection("media")).length
 
-const translations = provideTranslations(t)
 const showLanguage = contentLanguages.length > 1
+
+const i18nConfig = prepareI18nConfig(Astro.locals.i18n, [
+  "ln.search.no-results",
+])
 ---
 
 <SearchListReact
   client:load
-  currentLocale={currentLocale}
-  direction={direction}
-  translations={translations}
+  i18nConfig={i18nConfig}
   categories={categories}
   mediaTypes={mediaTypes}
   languages={languages}

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

@@ -1,8 +1,12 @@
 import { useWindowVirtualizer } from "@tanstack/react-virtual"
 import { useEffect, useRef, useState } from "react"
 
+import {
+  createI18n,
+  type I18nConfig,
+  I18nContext,
+} from "../../../i18n/react/i18n-context"
 import { useSearch } from "../hooks/use-search"
-import type { TranslationKey, Translations } from "../utils/search-translations"
 import LoadingSkeleton from "./LoadingSkeleton"
 import SearchListItem, {
   type MediaType,
@@ -10,9 +14,7 @@ import SearchListItem, {
 } from "./SearchListItem"
 
 interface Props {
-  currentLocale: string | undefined
-  translations: Translations
-  direction: "rtl" | "ltr"
+  i18nConfig: I18nConfig
   categories: Record<string, string>
   languages: Record<string, TranslatedLanguage>
   showLanguage: boolean
@@ -21,11 +23,9 @@ interface Props {
 }
 
 export default function SearchList({
-  currentLocale,
   categories,
-  translations,
+  i18nConfig,
   languages,
-  direction,
   showLanguage,
   mediaTypes,
   mediaItemsTotal,
@@ -63,11 +63,10 @@ export default function SearchList({
       observer.disconnect()
     }
   }, [])
-
-  const t = (key: TranslationKey) => translations[key]
+  const i18n = createI18n(i18nConfig)
 
   return (
-    <>
+    <I18nContext.Provider value={i18n}>
       <div ref={listRef} className="px-4 md:px-8">
         <ol
           className="relative w-full divide-y divide-gray-200"
@@ -89,13 +88,11 @@ export default function SearchList({
                 }}
               >
                 {isLoading ? (
-                  <LoadingSkeleton direction={direction} />
+                  <LoadingSkeleton />
                 ) : (
                   <SearchListItem
                     item={item}
-                    direction={direction}
                     showLanguage={showLanguage}
-                    currentLocale={currentLocale}
                     categories={categories}
                     languages={languages}
                     mediaTypes={mediaTypes}
@@ -108,9 +105,9 @@ export default function SearchList({
       </div>
       {!results.length && !isLoading && (
         <div className="mt-24 text-center font-bold text-gray-500">
-          {t("ln.search.no-results")}
+          {i18n.t("ln.search.no-results")}
         </div>
       )}
-    </>
+    </I18nContext.Provider>
   )
 }

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

@@ -1,7 +1,8 @@
 import CoverImageDecorator from "../../../components/CoverImageDecorator"
 import Icon from "../../../components/Icon"
+import { useI18n } from "../../../i18n/react/useI18n"
 import { detailsPagePath } from "../../../utils/paths"
-import type { SearchItem } from "../../api/search-response"
+import type { SearchItem } from "../api/search-response"
 
 export type MediaType = {
   name: string
@@ -16,8 +17,6 @@ export type TranslatedLanguage = {
 
 interface Props {
   item: SearchItem
-  currentLocale: string | undefined
-  direction: "rtl" | "ltr"
   categories: Record<string, string>
   languages: Record<string, TranslatedLanguage>
   showLanguage: boolean
@@ -26,13 +25,12 @@ interface Props {
 
 export default function SearchListItem({
   item,
-  currentLocale,
   categories,
   languages,
-  direction,
   showLanguage,
   mediaTypes,
 }: Props) {
+  const { currentLocale, direction } = useI18n()
   const coverImageStyle = mediaTypes[item.type].coverImageStyle
   return (
     <a

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

package/src/pages/search-page/utils/search-filter-translations.ts

@@ -1,20 +0,0 @@
-const translationKeys = [
-  "ln.search.title",
-  "ln.language",
-  "ln.search.placeholder",
-  "ln.search.all-languages",
-  "ln.type",
-  "ln.search.all-types",
-  "ln.category",
-  "ln.search.all-categories",
-] as const
-
-export type TranslationKey = (typeof translationKeys)[number]
-
-export type Translations = Record<TranslationKey, string>
-
-export const provideTranslations = (translate: (key: string) => string) => {
-  return Object.fromEntries(
-    translationKeys.map((key) => [key, translate(key)]),
-  ) as Translations
-}

package/src/pages/search-page/utils/search-translations.ts

@@ -1,11 +0,0 @@
-const translationKeys = ["ln.search.no-results"] as const
-
-export type TranslationKey = (typeof translationKeys)[number]
-
-export type Translations = Record<TranslationKey, string>
-
-export const provideTranslations = (translate: (key: string) => string) => {
-  return Object.fromEntries(
-    translationKeys.map((key) => [key, translate(key)]),
-  ) as Translations
-}