@jant/core 0.6.15 → 0.7.0

package/src/ui/dash/settings/LanguageContent.tsx

@@ -0,0 +1,409 @@
+/**
+ * Language settings page.
+ *
+ * Server-side template that renders the <jant-settings-language> Lit element
+ * with its labels and initial state. Every language-related setting lives here
+ * — the site's content language, the dashboard's UI language, and multilingual
+ * content — so there is one place to look rather than two.
+ *
+ * The page is called "Language" rather than "Multilingual" on purpose: it also
+ * holds settings a single-language author owns, and they should not have to
+ * recognize a feature name they never turned on to find their site's language.
+ */
+
+import { msg } from "@lingui/core/macro";
+import { useLingui } from "../../../i18n/context.js";
+import { getSupportedLocaleEntries } from "../../../i18n/supported-locales.js";
+import type { Locale } from "../../../i18n/locales.js";
+import { getJantDocsUrl } from "../../../lib/jant-docs.js";
+
+/**
+ * A value that renders as its own placeholder.
+ *
+ * Lingui resolves an ICU message completely at `i18n._()` time, so a message
+ * whose value is only known in the browser cannot simply be shipped as a
+ * template — its plurals would be formatted against `undefined`. Passing the
+ * placeholder back as the value leaves that one slot intact for the component
+ * to fill, while everything else in the message is translated and formatted
+ * here as usual.
+ *
+ * @param name - Placeholder name in the message
+ * @returns The literal `{name}` text
+ * @example
+ * i18n._(msg({ message: "Remove {language}" }), {
+ *   language: keepPlaceholder("language"),
+ * }); // => "Remove {language}"
+ */
+function keepPlaceholder(name: string): string {
+  return `{${name}}`;
+}
+
+export interface LanguageContentProps {
+  /** Site content language, and primary language when multilingual is on. */
+  contentLanguage: string;
+  /** Explicit dashboard catalog locale, or `""` when it follows the content. */
+  dashboardLanguage: Locale | "";
+  /** Whether per-language browsing views are being served. */
+  multilingualEnabled: boolean;
+  /** Additional languages in switcher order. */
+  additionalLanguages: string[];
+  /** Posts with no language yet — the number the enable dialog quotes. */
+  unmarkedPostCount: number;
+  sitePathPrefix: string;
+}
+
+export function LanguageContent({
+  contentLanguage,
+  dashboardLanguage,
+  multilingualEnabled,
+  additionalLanguages,
+  unmarkedPostCount,
+  sitePathPrefix,
+}: LanguageContentProps) {
+  const { i18n } = useLingui();
+
+  const labels = JSON.stringify({
+    siteSection: i18n._(
+      msg({
+        message: "Site",
+        comment:
+          "@context: Language settings section for reader-facing settings",
+      }),
+    ),
+    dashboardSection: i18n._(
+      msg({
+        message: "Dashboard",
+        comment:
+          "@context: Language settings section for author-facing settings",
+      }),
+    ),
+    contentLanguage: i18n._(
+      msg({
+        message: "Content language",
+        comment: "@context: Language settings field — the site's language",
+      }),
+    ),
+    contentLanguageHelp: i18n._(
+      msg({
+        message: "The language you write in.",
+        comment: "@context: Help text for the content language field",
+      }),
+    ),
+    primaryLanguage: i18n._(
+      msg({
+        message: "Primary language",
+        comment:
+          "@context: Label the content language field takes once multilingual is on",
+      }),
+    ),
+    primaryLanguageHelp: i18n._(
+      msg({
+        message: "The root address (/, /feed) shows this language.",
+        comment: "@context: Help text for the primary language field",
+      }),
+    ),
+    languagesLabel: i18n._(
+      msg({
+        message: "Languages",
+        comment: "@context: Label above the list of the site's languages",
+      }),
+    ),
+    primaryBadge: i18n._(
+      msg({
+        message: "Primary",
+        comment: "@context: Badge on the language served at the root address",
+      }),
+    ),
+    makePrimary: i18n._(
+      msg({
+        message: "Make primary",
+        comment:
+          "@context: Button that moves a language to the site's root address",
+      }),
+    ),
+    dashboardLanguage: i18n._(
+      msg({
+        message: "Dashboard language",
+        comment: "@context: Language settings field — the admin UI language",
+      }),
+    ),
+    dashboardLanguageHelp: i18n._(
+      msg({
+        message: "The language of your admin pages. Only you see this.",
+        comment: "@context: Help text for the dashboard language field",
+      }),
+    ),
+    followContent: i18n._(
+      msg({
+        message: "Follow content language",
+        comment:
+          "@context: Dashboard language option that follows the site language",
+      }),
+    ),
+    multilingual: i18n._(
+      msg({
+        message: "Multilingual content",
+        comment: "@context: Language settings toggle for multilingual content",
+      }),
+    ),
+    multilingualHelp: i18n._(
+      msg({
+        message:
+          "Give each language its own home page, archive, and feed. Once it's on, you pick a language when you publish, and can link an existing post to a version of it in another language.",
+        comment: "@context: Help text for the multilingual content toggle",
+      }),
+    ),
+    multilingualDocs: i18n._(
+      msg({
+        message: "Multilingual guide",
+        comment:
+          "@context: Link to multilingual documentation on the Language settings page",
+      }),
+    ),
+    multilingualDocsHelp: i18n._(
+      msg({
+        message: "URL structure, per-language feeds, and linking translations.",
+        comment: "@context: Description of the multilingual documentation link",
+      }),
+    ),
+    statusOn: i18n._(
+      msg({
+        message: "On",
+        comment: "@context: Status badge — multilingual content is on",
+      }),
+    ),
+    turnOn: i18n._(
+      msg({
+        message: "Turn on",
+        comment:
+          "@context: Link in the multilingual section that opens the setup dialog",
+      }),
+    ),
+    addMissingLanguage: i18n._(
+      msg({
+        message: "Add {language}",
+        comment:
+          "@context: One-click fix in the multilingual dialog, putting a language with posts back on the list",
+      }),
+      { language: keepPlaceholder("language") },
+    ),
+    viewPosts: i18n._(
+      msg({
+        message: "View these posts",
+        comment:
+          "@context: Link in the cannot-remove-language error, leading to that language's archive",
+      }),
+    ),
+    otherLanguages: i18n._(
+      msg({
+        message: "Other languages",
+        comment: "@context: Label for the list of non-primary languages",
+      }),
+    ),
+    addLanguage: i18n._(
+      msg({
+        message: "Add language",
+        comment: "@context: Button that adds another content language",
+      }),
+    ),
+    removeLanguage: i18n._(
+      msg({
+        message: "Remove {language}",
+        comment: "@context: Accessible label on the button removing a language",
+      }),
+      { language: keepPlaceholder("language") },
+    ),
+    languageMenu: i18n._(
+      msg({
+        message: "Options for {language}",
+        comment:
+          "@context: Accessible label on a language row's actions menu trigger",
+      }),
+      { language: keepPlaceholder("language") },
+    ),
+    enableTitle: i18n._(
+      msg({
+        message: "Turn on multilingual content",
+        comment:
+          "@context: Title of the dialog that configures languages and turns multilingual on",
+      }),
+    ),
+    enableReassurance: i18n._(
+      msg({
+        message:
+          "Post addresses do not change, and you can turn this off again at any time.",
+        comment:
+          "@context: Reassurance line at the bottom of the multilingual dialog",
+      }),
+    ),
+    enableMarkTitle: i18n._(
+      msg({
+        message: "One-time change to your existing posts",
+        comment:
+          "@context: Title of the stamping warning in the multilingual dialog",
+      }),
+    ),
+    enableMarkWarning: i18n._(
+      msg({
+        message:
+          "{count, plural, one {# existing post} other {# existing posts}} with no language yet will be marked as {language}.",
+        comment:
+          "@context: Warning in the multilingual dialog about stamping posts that have no language",
+      }),
+      // The count is fixed for this page load, so Lingui resolves the plural
+      // here. The language is picked inside the dialog, so its placeholder is
+      // carried through untouched and filled in by the component.
+      { count: unmarkedPostCount, language: keepPlaceholder("language") },
+    ),
+    enableFixHint: i18n._(
+      msg({
+        message:
+          "Any post written in another language can be corrected from its own menu afterwards.",
+        comment: "@context: Follow-up hint under the stamping warning",
+      }),
+    ),
+    enableNeedsLanguage: i18n._(
+      msg({
+        message: "Add at least one more language to turn this on.",
+        comment:
+          "@context: Validation message when the multilingual dialog has no second language",
+      }),
+    ),
+    changePrimaryTitle: i18n._(
+      msg({
+        message: "Change the primary language?",
+        comment: "@context: Title of the change-primary-language dialog",
+      }),
+    ),
+    changePrimaryBody: i18n._(
+      msg({
+        message:
+          "{next} will be served at the root address (/, /feed, /archive), and {previous} moves to {prefix}. Post addresses do not change, but anyone subscribed to /feed starts receiving {next} posts.",
+        comment: "@context: Body of the change-primary-language dialog",
+      }),
+      {
+        next: keepPlaceholder("next"),
+        previous: keepPlaceholder("previous"),
+        prefix: keepPlaceholder("prefix"),
+      },
+    ),
+    changePrimaryConfirm: i18n._(
+      msg({
+        message: "Switch",
+        comment:
+          "@context: Confirm button in the change-primary-language dialog",
+      }),
+    ),
+    disableTitle: i18n._(
+      msg({
+        message: "Turn off multilingual content?",
+        comment: "@context: Title of the disable-multilingual dialog",
+      }),
+    ),
+    disableBody: i18n._(
+      msg({
+        message:
+          "The root address goes back to showing every language, and addresses like {prefix} redirect to it, so existing links and feed subscriptions keep working. Post addresses and each post's language are unchanged, so you can turn this back on any time.",
+        comment: "@context: Body of the disable-multilingual dialog",
+      }),
+      { prefix: keepPlaceholder("prefix") },
+    ),
+    disableConfirm: i18n._(
+      msg({
+        message: "Turn off",
+        comment: "@context: Confirm button in the disable-multilingual dialog",
+      }),
+    ),
+    removeLastTitle: i18n._(
+      msg({
+        message: "Turn off multilingual content?",
+        comment:
+          "@context: Title of the dialog confirming removal of the last additional language",
+      }),
+    ),
+    removeLastBody: i18n._(
+      msg({
+        message:
+          "{language} is the only other language on this site, so removing it turns multilingual content off. The root address goes back to showing every language, {prefix} stops working, and each post keeps the language it is written in.",
+        comment:
+          "@context: Body of the dialog confirming removal of the last additional language",
+      }),
+      {
+        language: keepPlaceholder("language"),
+        prefix: keepPlaceholder("prefix"),
+      },
+    ),
+    removeLastConfirm: i18n._(
+      msg({
+        message: "Remove and turn off",
+        comment:
+          "@context: Confirm button when removing the last additional language",
+      }),
+    ),
+    cancel: i18n._(
+      msg({ message: "Cancel", comment: "@context: Dialog cancel button" }),
+    ),
+    save: i18n._(
+      msg({ message: "Save", comment: "@context: Settings save button" }),
+    ),
+    saving: i18n._(
+      msg({
+        message: "Saving…",
+        comment: "@context: Settings save in progress",
+      }),
+    ),
+    searchPlaceholder: i18n._(
+      msg({
+        message: "Search…",
+        comment: "@context: Placeholder in the language picker search box",
+      }),
+    ),
+    noMatches: i18n._(
+      msg({
+        message: "No matches.",
+        comment: "@context: Empty state in the language picker",
+      }),
+    ),
+  }).replace(/</g, "\\u003c");
+
+  const locales = JSON.stringify(
+    getSupportedLocaleEntries().map((entry) => ({
+      tag: entry.tag,
+      native: entry.native,
+      english: entry.english,
+      coverage: entry.coverage,
+    })),
+  ).replace(/</g, "\\u003c");
+
+  const initialState = JSON.stringify({
+    contentLanguage,
+    dashboardLanguage,
+    multilingualEnabled,
+    additionalLanguages,
+    unmarkedPostCount,
+    sitePathPrefix,
+    // Resolved here because the docs host depends on the build environment,
+    // which the browser bundle cannot see.
+    multilingualDocsUrl: getJantDocsUrl("multilingual"),
+  }).replace(/</g, "\\u003c");
+
+  return (
+    <>
+      <div class="flex flex-col max-w-form">
+        <jant-settings-language labels={labels} locales={locales}>
+          {/* SSR fallback skeleton */}
+          <div>
+            <h2 class="skel-label" />
+            <div class="skel-section-lg" />
+          </div>
+        </jant-settings-language>
+      </div>
+
+      <script
+        type="application/json"
+        id="language-settings-initial-data"
+        dangerouslySetInnerHTML={{ __html: initialState }}
+      />
+    </>
+  );
+}

package/src/ui/dash/settings/SettingsRootContent.tsx

@@ -17,6 +17,7 @@ const ICONS = {
   settings: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>`,
   image: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>`,
   menu: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>`,
+  languages: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>`,
   palette: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/></svg>`,
   type: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" x2="15" y1="20" y2="20"/><line x1="12" x2="12" y1="4" y2="20"/></svg>`,
   code: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>`,
@@ -114,11 +115,28 @@ export function SettingsRootContent({
           )}
           description={i18n._(
             msg({
-              message: "Name, metadata, language, and search defaults",
+              message: "Name, visibility, feeds, and time zone",
               comment: "@context: Settings item description for general",
             }),
           )}
         />
+        <SettingsDirectoryLink
+          href={toPublicPath("/settings/language", sitePathPrefix)}
+          icon={ICONS.languages}
+          tone="subtle"
+          name={i18n._(
+            msg({
+              message: "Language",
+              comment: "@context: Settings item — language settings",
+            }),
+          )}
+          description={i18n._(
+            msg({
+              message: "Content language, dashboard language, multilingual",
+              comment: "@context: Settings item description for language",
+            }),
+          )}
+        />
         <SettingsDirectoryLink
           href={toPublicPath("/settings/custom-urls", sitePathPrefix)}
           icon={ICONS.arrowRightLeft}