Anchor link langui

src/components/AnchorShare.tsx

@@ -1,6 +1,6 @@
-import { useRouter } from "next/router";
 import { Ico, Icon } from "./Ico";
 import { ToolTip } from "./ToolTip";
+import { AppStaticProps } from "graphql/getAppStaticProps";
 
 /*
  *                                        ╭─────────────╮
@@ -9,18 +9,22 @@ import { ToolTip } from "./ToolTip";
 
 interface Props {
   id: string;
+  langui: AppStaticProps["langui"];
 }
 
 // ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
 
-export const AnchorShare = ({ id }: Props): JSX.Element => (
+export const AnchorShare = ({ id, langui }: Props): JSX.Element => (
   <ToolTip
-    content={"Copy anchor link"}
+    content={langui.copy_anchor_link}
     trigger="mouseenter"
     className="text-sm"
   >
-    {/* TODO: Langui Copied! */}
+    <ToolTip
-    <ToolTip content={"Copied! 👍"} trigger="click" className="text-sm">
+      content={langui.anchor_link_copied}
+      trigger="click"
+      className="text-sm"
+    >
       <Ico
         icon={Icon.Link}
         className="transition-color cursor-pointer hover:text-dark"

src/components/Markdown/Markdawn.tsx

@@ -22,6 +22,7 @@ import { AnchorShare } from "components/AnchorShare";
 interface MarkdawnProps {
   className?: string;
   text: string;
+  langui: AppStaticProps["langui"];
 }
 
 // ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
@@ -29,6 +30,7 @@ interface MarkdawnProps {
 export const Markdawn = ({
   className,
   text: rawText,
+  langui,
 }: MarkdawnProps): JSX.Element => {
   const { playerName } = useAppLayout();
   const router = useRouter();
@@ -85,7 +87,7 @@ export const Markdawn = ({
               }) => (
                 <h1 id={compProps.id} style={compProps.style}>
                   {compProps.children}
-                  <AnchorShare id={compProps.id} />
+                  <AnchorShare id={compProps.id} langui={langui} />
                 </h1>
               ),
             },
@@ -98,7 +100,7 @@ export const Markdawn = ({
               }) => (
                 <h2 id={compProps.id} style={compProps.style}>
                   {compProps.children}
-                  <AnchorShare id={compProps.id} />
+                  <AnchorShare id={compProps.id} langui={langui} />
                 </h2>
               ),
             },
@@ -111,7 +113,7 @@ export const Markdawn = ({
               }) => (
                 <h3 id={compProps.id} style={compProps.style}>
                   {compProps.children}
-                  <AnchorShare id={compProps.id} />
+                  <AnchorShare id={compProps.id} langui={langui} />
                 </h3>
               ),
             },
@@ -124,7 +126,7 @@ export const Markdawn = ({
               }) => (
                 <h4 id={compProps.id} style={compProps.style}>
                   {compProps.children}
-                  <AnchorShare id={compProps.id} />
+                  <AnchorShare id={compProps.id} langui={langui} />
                 </h4>
               ),
             },
@@ -137,7 +139,7 @@ export const Markdawn = ({
               }) => (
                 <h5 id={compProps.id} style={compProps.style}>
                   {compProps.children}
-                  <AnchorShare id={compProps.id} />
+                  <AnchorShare id={compProps.id} langui={langui} />
                 </h5>
               ),
             },
@@ -150,7 +152,7 @@ export const Markdawn = ({
               }) => (
                 <h6 id={compProps.id} style={compProps.style}>
                   {compProps.children}
-                  <AnchorShare id={compProps.id} />
+                  <AnchorShare id={compProps.id} langui={langui} />
                 </h6>
               ),
             },
@@ -199,7 +201,7 @@ export const Markdawn = ({
               component: (compProps) => (
                 <>
                   <strong className="!my-0 text-dark/60 mobile:!-mb-4">
-                    <Markdawn text={compProps.name} />
+                    <Markdawn text={compProps.name} langui={langui} />
                   </strong>
                   <p className="whitespace-pre-line">{compProps.children}</p>
                 </>

src/components/PostPage.tsx

@@ -195,7 +195,7 @@ export const PostPage = ({
         )}
 
         {prependBody}
-        <Markdawn text={body} />
+        <Markdawn text={body} langui={langui} />
         {appendBody}
       </ContentPanel>
     ),

src/components/RecorderChip.tsx

@@ -55,7 +55,9 @@ export const RecorderChip = ({ recorder, langui }: Props): JSX.Element => (
             )}
           </div>
         </div>
-        {recorder.bio?.[0] && <Markdawn text={recorder.bio[0].bio ?? ""} />}
+        {recorder.bio?.[0] && (
+          <Markdawn text={recorder.bio[0].bio ?? ""} langui={langui} />
+        )}
       </div>
     }
     placement="top"

src/components/ThumbnailHeader.tsx

@@ -107,7 +107,7 @@ export const ThumbnailHeader = ({
       </div>
       {description && (
         <InsetBox className="mt-8">
-          {<Markdawn text={description}></Markdawn>}
+          {<Markdawn text={description} langui={langui} />}
         </InsetBox>
       )}
     </>

src/graphql/operations/getWebsiteInterface.graphql

@@ -168,6 +168,8 @@ query getWebsiteInterface($language_code: String) {
         cover
         tags
         no_source_warning
+        copy_anchor_link
+        anchor_link_copied
       }
     }
   }

src/pages/chronicles/[slug]/index.tsx

@@ -111,7 +111,7 @@ const Chronicle = ({
             )}
 
             {isDefined(selectedTranslation.body) && (
-              <Markdawn text={selectedTranslation.body.body} />
+              <Markdawn text={selectedTranslation.body.body} langui={langui} />
             )}
           </>
         ) : (
@@ -139,7 +139,10 @@ const Chronicle = ({
                 <HorizontalLine />
 
                 {selectedContentTranslation.text_set?.text && (
-                  <Markdawn text={selectedContentTranslation.text_set.text} />
+                  <Markdawn
+                    text={selectedContentTranslation.text_set.text}
+                    langui={langui}
+                  />
                 )}
               </>
             )}

src/pages/contents/[slug]/index.tsx

@@ -212,7 +212,10 @@ const Content = ({
               <div>
                 <p className="font-headers font-bold">{langui.notes}:</p>
                 <div className="grid place-content-center place-items-center gap-2">
-                  <Markdawn text={selectedTranslation.text_set.notes} />
+                  <Markdawn
+                    text={selectedTranslation.text_set.notes}
+                    langui={langui}
+                  />
                 </div>
               </div>
             )}
@@ -393,7 +396,10 @@ const Content = ({
 
           <HorizontalLine />
 
-          <Markdawn text={selectedTranslation?.text_set?.text ?? ""} />
+          <Markdawn
+            text={selectedTranslation?.text_set?.text ?? ""}
+            langui={langui}
+          />
 
           {nextContent?.attributes && (
             <>

src/pages/dev/editor.tsx

@@ -442,7 +442,7 @@ const Editor = ({ langui, ...otherProps }: Props): JSX.Element => {
           <div>
             <h2>Preview</h2>
             <div className="h-[70vh] overflow-scroll rounded-xl bg-mid bg-opacity-40 p-8">
-              <Markdawn className="w-full" text={markdown} />
+              <Markdawn className="w-full" text={markdown} langui={langui} />
             </div>
           </div>
         </div>

src/pages/wiki/chronology.tsx

@@ -210,7 +210,7 @@ const ChronologyEra = ({
       <InsetBox className="my-8 grid gap-4 text-center">
         <h2 className="flex place-content-center gap-3 text-2xl">
           {title}
-          <AnchorShare id={id} />
+          <AnchorShare id={id} langui={langui} />
         </h2>
 
         {isDefinedAndNotEmpty(description) && (
@@ -437,7 +437,7 @@ export const ChronologyEvent = ({
             </p>
 
             <span className="flex-shrink">
-              <AnchorShare id={id} />
+              <AnchorShare id={id} langui={langui} />
             </span>
           </div>