Removed horizontal line from Return button

src/components/AppLayout.tsx

@@ -25,7 +25,7 @@ import { cIf, cJoin } from "helpers/className";
 import { AppStaticProps } from "graphql/getAppStaticProps";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import { Button } from "components/Inputs/Button";
-import { OpenGraph, TITLE_PREFIX } from "helpers/openGraph";
+import { OpenGraph, TITLE_PREFIX, TITLE_SEPARATOR } from "helpers/openGraph";
 import { getDefaultPreferredLanguages } from "helpers/locales";
 
 /*
@@ -355,10 +355,12 @@ export const AppLayout = ({
               )
             )}
           >
-            {isDefinedAndNotEmpty(
+            {openGraph.title.substring(
-              openGraph.title.substring(TITLE_PREFIX.length)
+              TITLE_PREFIX.length + TITLE_SEPARATOR.length
+            )
+              ? openGraph.title.substring(
+                  TITLE_PREFIX.length + TITLE_SEPARATOR.length
                 )
-              ? openGraph.title.substring(TITLE_PREFIX.length)
               : "Accord’s Library"}
           </p>
           {isDefined(subPanel) && !turnSubIntoContent && (

src/components/PanelComponents/ReturnButton.tsx

@@ -1,5 +1,4 @@
 import { useCallback } from "react";
-import { HorizontalLine } from "components/HorizontalLine";
 import { Icon } from "components/Ico";
 import { Button } from "components/Inputs/Button";
 import { useAppLayout } from "contexts/AppLayoutContext";
@@ -18,7 +17,6 @@ interface Props {
   title: string | null | undefined;
   langui: AppStaticProps["langui"];
   displayOn: ReturnButtonType;
-  horizontalLine?: boolean;
   className?: string;
 }
 
@@ -35,7 +33,6 @@ export const ReturnButton = ({
   title,
   langui,
   displayOn,
-  horizontalLine,
   className,
 }: Props): JSX.Element => {
   const { setSubPanelOpen } = useAppLayout();
@@ -54,7 +51,6 @@ export const ReturnButton = ({
         text={`${langui.return_to} ${title}`}
         icon={Icon.NavigateBefore}
       />
-      {horizontalLine === true && <HorizontalLine />}
     </div>
   );
 };

src/components/PostPage.tsx

@@ -86,12 +86,13 @@ export const PostPage = ({
               title={returnTitle}
               langui={langui}
               displayOn={ReturnButtonType.Desktop}
-              horizontalLine
             />
           )}
 
           {displayCredits && (
             <>
+              <HorizontalLine />
+
               {selectedTranslation && (
                 <div className="grid grid-flow-col place-content-center place-items-center gap-2">
                   <p className="font-headers font-bold">{langui.status}:</p>
@@ -126,13 +127,16 @@ export const PostPage = ({
                   </div>
                 </div>
               )}
-
-              <HorizontalLine />
             </>
           )}
 
           {displayToc && (
-            <TableOfContents text={body} title={title} langui={langui} />
+            <TableOfContents
+              text={body}
+              title={title}
+              langui={langui}
+              horizontalLine
+            />
           )}
         </SubPanel>
       ) : undefined,
@@ -158,7 +162,7 @@ export const PostPage = ({
             title={returnTitle}
             langui={langui}
             displayOn={ReturnButtonType.Mobile}
-            horizontalLine
+            className="mb-10"
           />
         )}
 

src/helpers/openGraph.ts

@@ -15,7 +15,8 @@ const DEFAULT_OG_THUMBNAIL = {
   alt: "Accord's Library Logo",
 };
 
-export const TITLE_PREFIX = "Accord’s Library - ";
+export const TITLE_PREFIX = "Accord’s Library";
+export const TITLE_SEPARATOR = " - "
 
 export interface OpenGraph {
   title: string;
@@ -29,7 +30,7 @@ export const getOpenGraph = (
   description?: string | null | undefined,
   thumbnail?: UploadImageFragment | null | undefined
 ): OpenGraph => ({
-  title: `${TITLE_PREFIX}${isDefinedAndNotEmpty(title) ? `${title}` : ""}`,
+  title: `${TITLE_PREFIX}${isDefinedAndNotEmpty(title) ? `${TITLE_SEPARATOR}${title}` : ""}`,
   description: isDefinedAndNotEmpty(description)
     ? description
     : langui.default_description ?? "",

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

@@ -172,8 +172,10 @@ const Chronicle = ({
           href="/chronicles"
           title={langui.chronicles}
           langui={langui}
-          horizontalLine
         />
+
+        <HorizontalLine />
+
         <div className="grid gap-16">
           {filterHasAttributes(chapters, [
             "attributes.chronicles",

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

@@ -57,6 +57,7 @@ import { useSmartLanguage } from "hooks/useSmartLanguage";
 import { getOpenGraph } from "helpers/openGraph";
 import { getDescription } from "helpers/description";
 import { useIntersectionList } from "hooks/useIntersectionList";
+import { HorizontalLine } from "components/HorizontalLine";
 
 /*
  *                                         ╭─────────────╮
@@ -130,9 +131,10 @@ const LibrarySlug = ({
           title={langui.library}
           langui={langui}
           displayOn={ReturnButtonType.Desktop}
-          horizontalLine
         />
 
+        <HorizontalLine />
+
         <div className="grid gap-4">
           <NavOption
             title={langui.summary}

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

@@ -69,7 +69,6 @@ const WikiPage = ({
           title={langui.wiki}
           langui={langui}
           displayOn={ReturnButtonType.Desktop}
-          horizontalLine
         />
       </SubPanel>
     ),

src/pages/wiki/chronology.tsx

@@ -33,6 +33,7 @@ import { datePickerToDate } from "helpers/date";
 import { TranslatedProps } from "helpers/types/TranslatedProps";
 import { TranslatedNavOption } from "components/PanelComponents/NavOption";
 import { useIntersectionList } from "hooks/useIntersectionList";
+import { HorizontalLine } from "components/HorizontalLine";
 
 /*
  *                                           ╭────────╮
@@ -71,9 +72,10 @@ const Chronology = ({
           title={langui.wiki}
           langui={langui}
           displayOn={ReturnButtonType.Desktop}
-          horizontalLine
         />
 
+        <HorizontalLine />
+
         {filterHasAttributes(chronologyEras, ["attributes", "id"] as const).map(
           (era, index) => (
             <Fragment key={era.id}>