Merge pull request #33707 from overleaf/oa-learn-links

[web] Learn Overleaf links

GitOrigin-RevId: af9f72da008ad8b8c86e4c355268123eb6c40bcd

services/web/frontend/js/shared/components/footer/fat-footer.tsx

@@ -5,6 +5,8 @@ import FatFooterBase from './fat-footer-base'
 type FooterLinkProps = {
   href: string
   label: string
+  target?: string
+  rel?: string
 }
 
 type FooterSectionProps = {
@@ -39,12 +41,24 @@ function FatFooter() {
       title: t('Learn'),
       links: [
         {
-          href: '/learn/latex/Learn_LaTeX_in_30_minutes',
-          label: t('latex_in_thirty_minutes'),
+          href: 'https://learn.overleaf.com/101-get-started-with-latex-in-overleaf',
+          label: t('get_started_with_latex'),
+          target: '_blank',
+          rel: 'noopener noreferrer',
         },
         { href: '/latex/templates', label: t('templates') },
-        { href: '/events/webinars', label: t('webinars') },
-        { href: '/learn/latex/Tutorials', label: t('tutorials') },
+        {
+          href: 'https://learn.overleaf.com/calendar',
+          label: t('webinars'),
+          target: '_blank',
+          rel: 'noopener noreferrer',
+        },
+        {
+          href: 'https://learn.overleaf.com/',
+          label: t('overleaf_learning_center'),
+          target: '_blank',
+          rel: 'noopener noreferrer',
+        },
         {
           href: '/learn/latex/Inserting_Images',
           label: t('how_to_insert_images'),
@@ -121,7 +135,9 @@ function FooterSection({ title, links }: FooterSectionProps) {
       <ul className="list-unstyled">
         {links.map(link => (
           <li key={link.href}>
-            <a href={link.href}>{t(link.label)}</a>
+            <a href={link.href} target={link.target} rel={link.rel}>
+              {t(link.label)}
+            </a>
           </li>
         ))}
       </ul>

services/web/frontend/js/shared/components/navbar/nav-dropdown-from-data.tsx

@@ -71,6 +71,7 @@ export function NavDropdownMenuItems({
             <NavDropdownLinkItem
               key={index}
               href={child.url}
+              openInNewWindow={child.openInNewWindow}
               onClick={() => {
                 sendProjectListMB('menu-click', {
                   item: child.trackingKey as ExtraSegmentations['menu-click']['item'],

services/web/frontend/js/shared/components/navbar/nav-dropdown-link-item.tsx

@@ -6,15 +6,25 @@ import { DropdownItemProps } from 'react-bootstrap/DropdownItem'
 export default function NavDropdownLinkItem({
   href,
   onClick,
+  openInNewWindow,
   children,
 }: {
   href: string
   onClick?: DropdownItemProps['onClick']
+  openInNewWindow?: boolean
   children: ReactNode
 }) {
+  const newWindowAttrs = openInNewWindow
+    ? { target: '_blank', rel: 'noopener noreferrer' }
+    : {}
   return (
     <DropdownListItem>
-      <DropdownItem href={href} role="menuitem" onClick={onClick}>
+      <DropdownItem
+        href={href}
+        role="menuitem"
+        onClick={onClick}
+        {...newWindowAttrs}
+      >
         {children}
       </DropdownItem>
     </DropdownListItem>

services/web/frontend/js/shared/components/types/navbar.ts

@@ -16,6 +16,7 @@ export interface NavbarDropdownLinkItem extends NavbarDropdownTextItem {
   url: string
   trackingKey: string
   eventSegmentation?: Record<string, any>
+  openInNewWindow?: boolean
 }
 
 export type NavbarDropdownItem =