fix: fixup

i18n/de/code.json

@@ -483,10 +483,10 @@
     "message": "Datenschutz"
   },
   "theme.common.sdk.placeholder": {
-    "message": "Ihr SDK"
+    "message": "dein SDK"
   },
   "theme.common.connector.placeholder": {
-    "message": "Ihr Anbieter"
+    "message": "dein anbieter"
   },
   "theme.common.sdk.native": {
     "message": "Nativ"

i18n/es/code.json

@@ -483,10 +483,10 @@
     "message": "Privacidad"
   },
   "theme.common.sdk.placeholder": {
-    "message": "Tu SDK"
+    "message": "tu SDK"
   },
   "theme.common.connector.placeholder": {
-    "message": "Tu proveedor"
+    "message": "tu proveedor"
   },
   "theme.common.sdk.native": {
     "message": "Nativo"

i18n/fr/code.json

@@ -483,10 +483,10 @@
     "message": "Confidentialité"
   },
   "theme.common.sdk.placeholder": {
-    "message": "Votre SDK"
+    "message": "ton SDK"
   },
   "theme.common.connector.placeholder": {
-    "message": "Votre fournisseur"
+    "message": "ton fournisseur"
   },
   "theme.common.sdk.native": {
     "message": "Natif"

i18n/pt-BR/code.json

@@ -483,10 +483,10 @@
     "message": "Privacidade"
   },
   "theme.common.sdk.placeholder": {
-    "message": "Seu SDK"
+    "message": "seu SDK"
   },
   "theme.common.connector.placeholder": {
-    "message": "Seu provedor"
+    "message": "seu provedor"
   },
   "theme.common.sdk.native": {
     "message": "Nativo"

src/hooks/use-categorized-tutorial-metadata.ts

@@ -1,4 +1,5 @@
 import { type DocMetadata } from '@docusaurus/plugin-content-docs';
+import { useMemo } from 'react';
 
 import metadata from '@site/tutorial/build-with-logto/metadata.json';
 
@@ -47,16 +48,19 @@ const useCategorizedTutorialMetadata = () => {
     { nativeSdks: [], traditionalSdks: [], spaSdks: [] }
   );
 
-  return {
-    allSdks: sdks,
-    allConnectors: [...socialConnectors, ...emailConnectors, ...smsConnectors],
-    nativeSdks,
-    traditionalSdks,
-    spaSdks,
-    socialConnectors,
-    emailConnectors,
-    smsConnectors,
-  };
+  return useMemo(
+    () => ({
+      allSdks: sdks,
+      allConnectors: [...socialConnectors, ...emailConnectors, ...smsConnectors],
+      nativeSdks,
+      traditionalSdks,
+      spaSdks,
+      socialConnectors,
+      emailConnectors,
+      smsConnectors,
+    }),
+    [sdks, socialConnectors, emailConnectors, smsConnectors, nativeSdks, traditionalSdks, spaSdks]
+  );
 };
 
 export default useCategorizedTutorialMetadata;

src/theme/BlogLayout/index.module.scss

@@ -14,6 +14,7 @@
       flex-direction: column;
       gap: 24px;
       overflow: hidden;
+      margin-bottom: 50px;
     }
 
     .toc {

src/theme/BlogPostItem/Header/Info/index.tsx

@@ -47,25 +47,29 @@ function Spacer() {
   return <>{' · '}</>;
 }
 
-export default function BlogPostItemHeaderInfo({ className }: Props): JSX.Element {
+export default function BlogPostItemHeaderInfo({ className }: Props) {
   const { metadata } = useBlogPost();
   const { date, readingTime } = metadata;
 
-  // Charles edited this to remove the time from generated "Build X with Y tutorials"
-  const isTutorial = metadata.frontMatter.slug?.startsWith('how-to-build-');
-
   const dateTimeFormat = useDateTimeFormat({
     day: 'numeric',
     month: 'long',
     year: 'numeric',
     timeZone: 'UTC',
   });
 
+  // Charles edited this to remove the time from generated "Build X with Y tutorials"
+  const isTutorial = metadata.frontMatter.slug?.startsWith('how-to-build-');
+
+  if (isTutorial) {
+    return null;
+  }
+
   const formatDate = (blogDate: string) => dateTimeFormat.format(new Date(blogDate));
 
   return (
     <div className={clsx(styles.container, 'margin-vert--md', className)}>
-      {!isTutorial && <DateTime date={date} formattedDate={formatDate(date)} />}
+      <DateTime date={date} formattedDate={formatDate(date)} />
       {readingTime !== undefined && (
         <>
           <Spacer />

src/theme/BlogPostItem/Header/Title/index.tsx

@@ -5,6 +5,7 @@ import type { Props } from '@theme/BlogPostItem/Header/Title';
 import { clsx } from 'clsx';
 import { useCallback, useEffect } from 'react';
 
+import TitleWithHighlights from '../TitleWithHighlights';
 import TitleWithSelectionDropdown from '../TitleWithSelectionDropdown';
 
 import styles from './styles.module.css';
@@ -71,7 +72,11 @@ const Content = ({ className }: Props): JSX.Element => {
         className={clsx(styles.title, !isBlogPostPage && styles.listTitle, className)}
         itemProp="headline"
       >
-        {isBlogPostPage ? <TitleWithSelectionDropdown title={title} metadata={metadata} /> : title}
+        {isBlogPostPage ? (
+          <TitleWithSelectionDropdown metadata={metadata} />
+        ) : (
+          <TitleWithHighlights metadata={metadata} />
+        )}
       </TitleHeading>
     </>
   );

src/theme/BlogPostItem/Header/Title/styles.module.css

@@ -9,18 +9,5 @@
   font: var(--font-body-0);
   font-weight: 500;
   margin: 0;
-}
-
-.highlight {
-  color: var(--logto-link-color);
-}
-
-/**
-  Blog post title should be smaller on smaller devices
-**/
-@media (max-width: 576px) {
-  .listTitle {
-    font-size: 1.5rem;
-    line-height: 40px;
-  }
+  color: var(--logto-color-text);
 }

src/theme/BlogPostItem/Header/TitleWithHighlights/index.module.scss

@@ -0,0 +1,3 @@
+.highlight {
+  color: var(--logto-link-color);
+}

src/theme/BlogPostItem/Header/TitleWithHighlights/index.tsx

@@ -0,0 +1,44 @@
+import { type PropBlogPostMetadata } from '@docusaurus/plugin-content-blog';
+import { condString } from '@silverhand/essentials';
+
+import styles from './index.module.scss';
+
+type Props = {
+  readonly metadata: PropBlogPostMetadata;
+};
+
+/**
+ * Escape potential parentheses in the SDK / connector name.
+ * The result will be used for the regex that splits the title into parts.
+ */
+const normalizeName = (name: string) => name.replaceAll('(', '\\(').replaceAll(')', '\\)');
+
+const TitleWithHighlights = ({ metadata }: Props) => {
+  const { frontMatter, title } = metadata;
+  const sdkName = condString('sdk' in frontMatter && frontMatter.sdk);
+  const connectorName = condString('connector' in frontMatter && frontMatter.connector);
+
+  const titleParts = title
+    .split(new RegExp(`(${normalizeName(connectorName)}|${normalizeName(sdkName)})`, 'g'))
+    .filter(Boolean);
+
+  return titleParts.map((part) => {
+    if (part === sdkName) {
+      return (
+        <span key={`${frontMatter.slug}-${sdkName}`} className={styles.highlight}>
+          {part}
+        </span>
+      );
+    }
+    if (part === connectorName) {
+      return (
+        <span key={`${frontMatter.slug}-${connectorName}`} className={styles.highlight}>
+          {part}
+        </span>
+      );
+    }
+    return part;
+  });
+};
+
+export default TitleWithHighlights;

src/theme/BlogPostItem/Header/TitleWithSelectionDropdown/index.module.scss

@@ -27,20 +27,3 @@
     user-select: none;
   }
 }
-
-/* Hide dropdown anchors from title on smaller devices */
-@media (max-width: 576px) {
-  .dropdownAnchor {
-    padding: 0;
-    outline: none;
-    cursor: default;
-
-    &::after {
-      display: none;
-    }
-
-    &.active {
-      outline: none;
-    }
-  }
-}

src/theme/BlogPostItem/Header/TitleWithSelectionDropdown/index.tsx

@@ -20,7 +20,6 @@ import Dropdown from '../SelectionDropdown';
 import styles from './index.module.scss';
 
 type BlogPostProps = {
-  readonly title: string;
   readonly metadata: PropBlogPostMetadata;
 };
 
@@ -53,7 +52,7 @@ const normalizeName = (name: string) =>
   name.replaceAll('(', '\\(').replaceAll(')', '\\)').replaceAll('$', '\\$');
 
 const TitleWithSelectionDropdown = (props: Props) => {
-  const isBlogPost = 'title' in props;
+  const isBlogPost = 'metadata' in props;
   const { onSelectSdk, onSelectConnector } = props;
   const listViewProps = conditional(!isBlogPost && props);
   const blogPostProps = conditional(isBlogPost && props);
@@ -90,7 +89,7 @@ const TitleWithSelectionDropdown = (props: Props) => {
     : getConnectorDisplayName(defaultConnector);
 
   if (blogPostProps && (!sdkName || !connectorName)) {
-    return blogPostProps.title;
+    return blogPostProps.metadata.title;
   }
 
   const listViewTitle = translate({
@@ -100,12 +99,12 @@ const TitleWithSelectionDropdown = (props: Props) => {
     .replace(sdkTemplateSlot, sdkName || sdkTemplateSlot)
     .replace(connectorTemplateSlot, connectorName || connectorTemplateSlot);
 
-  const normalizedTitle = blogPostProps?.title ?? listViewTitle;
+  const normalizedTitle = blogPostProps?.metadata.title ?? listViewTitle;
 
   const titleParts = normalizedTitle
     .split(
       new RegExp(
-        `(${normalizeName(sdkName || sdkTemplateSlot)}|${normalizeName(connectorName || connectorTemplateSlot)})`,
+        `(${normalizeName(connectorName || connectorTemplateSlot)}|${normalizeName(sdkName || sdkTemplateSlot)})`,
         'g'
       )
     )
@@ -166,7 +165,7 @@ const TitleWithSelectionDropdown = (props: Props) => {
             >
               {part === sdkTemplateSlot ? (
                 <span className={styles.placeholder}>
-                  <Translate id="theme.common.sdk.placeholder">Your SDK</Translate>
+                  <Translate id="theme.common.sdk.placeholder">your SDK</Translate>
                 </span>
               ) : (
                 part
@@ -194,7 +193,7 @@ const TitleWithSelectionDropdown = (props: Props) => {
             >
               {part === connectorTemplateSlot ? (
                 <span className={styles.placeholder}>
-                  <Translate id="theme.common.connector.placeholder">Your provider</Translate>
+                  <Translate id="theme.common.connector.placeholder">your provider</Translate>
                 </span>
               ) : (
                 part
@@ -221,7 +220,13 @@ const TitleWithSelectionDropdown = (props: Props) => {
         onClose={() => {
           setIsDropdownOpen(undefined);
         }}
-        onReset={cond(!isBlogPost && onSelectSdk)}
+        onReset={cond(
+          !isBlogPost &&
+            (() => {
+              onSelectSdk?.(undefined);
+              setIsDropdownOpen(undefined);
+            })
+        )}
       />
       <Dropdown
         anchorRef={connectorNameRef}
@@ -240,7 +245,13 @@ const TitleWithSelectionDropdown = (props: Props) => {
         onClose={() => {
           setIsDropdownOpen(undefined);
         }}
-        onReset={cond(!isBlogPost && onSelectConnector)}
+        onReset={cond(
+          !isBlogPost &&
+            (() => {
+              onSelectConnector?.(undefined);
+              setIsDropdownOpen(undefined);
+            })
+        )}
       />
     </>
   );

src/theme/BlogPostItem/index.module.scss

@@ -5,5 +5,31 @@
   border-radius: 12px;
   box-shadow: var(--logto-shadow-1);
   padding: 20px;
-  width: 100%; 
+  width: 100%;
+  transition: background-color var(--ifm-transition-fast) ease;
+
+  &:hover {
+    background-color: var(--logto-container-info-bg);
+  }
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 60px;
+  margin-inline-end: 12px;
+  border-radius: 10px;
+  background: var(--logto-container-neutral-bg);
+  flex-shrink: 0;
+
+  img {
+    width: 36px;
+    height: 36px;
+  }
+
+  + .logo {
+    margin-inline-end: 28px;
+  }
 }