update changelog and team menu infos/ux

changelogs/changelog-001.md

@@ -1,6 +1,7 @@
 ---
 title: 🎉 Introducing Typefully Integration
 publishedAt: 2023-05-26
+slug: changelog-001
 image: changelog-001.webp
 ---
 

changelogs/changelog-002.md

@@ -1,6 +1,7 @@
 ---
 title: 📰 Newsletter
 publishedAt: 2023-06-02
+slug: changelog-002
 image: changelog-002.webp
 ---
 

changelogs/changelog-003.md

@@ -1,6 +1,7 @@
 ---
 title: 🖊️ Introducing Text block
 publishedAt: 2023-06-07
+slug: changelog-003
 image: changelog-003.webp
 ---
 

changelogs/changelog-004.md

@@ -1,5 +1,6 @@
 ---
 title: 🚀 Introducing API for bookmarking
+slug: changelog-004
 publishedAt: 2023-06-15
 image: changelog-004.webp
 ---

changelogs/changelog-005.md

@@ -1,5 +1,6 @@
 ---
 title: 🐦 Tweet / X Embeds
+slug: /changelog-005
 publishedAt: 2023-08-21
 image: changelog-005.webp
 ---

changelogs/changelog-006.md

@@ -1,6 +1,7 @@
 ---
 title: 🌟 Weekly improvement
 publishedAt: 2023-09-19
+slug: changelog-006
 image: changelog-006.webp
 ---
 

changelogs/changelog-007.md

@@ -1,6 +1,7 @@
 ---
 title: 🔮 Discover page, metrics, AI, and more!
 publishedAt: 2023-11-17
+slug: changelog-007
 image: changelog-007.webp
 ---
 

contentlayer.config.ts

@@ -11,6 +11,7 @@ export const Changelog = defineDocumentType(() => ({
       type: 'string',
       required: false,
     },
+    slug: { type: 'string', required: true },
   },
 }));
 

src/app/(app)/(routes)/teams/[teamSlug]/settings/informations/page.tsx

@@ -8,6 +8,7 @@ import { redirect } from 'next/navigation';
 import SettingsPageLayout from '@/components/teams/form/settings/SettingsPageLayout';
 import { routes } from '@/core/constants';
 import { getTeamSettingsPageInfo } from '@/utils/page';
+import Link from 'next/link';
 
 export default async function Page({ params }: TeamPageProps) {
   const teamSlug = params.teamSlug;
@@ -27,7 +28,18 @@ export default async function Page({ params }: TeamPageProps) {
   return (
     <SettingsPageLayout
       title={title}
-      subtitle={subtitle}
+      subtitle={
+        <p>
+          Fill your team informations, they will be displayed on your public{' '}
+          <Link
+            className="underline"
+            href={routes.TEAMS_PUBLIC.replace(':slug', teamSlug)}
+            target="_blank"
+          >
+            team page
+          </Link>
+        </p>
+      }
       menuItems={menuItems}
       breadcrumbItems={[
         {

src/components/changelog/ChangelogPost.tsx

@@ -1,4 +1,3 @@
-import { getEnvHost } from '@/lib/server';
 import { Changelog } from 'contentlayer/generated';
 import Image from 'next/image';
 import React from 'react';
@@ -8,7 +7,7 @@ interface Props {
 }
 
 export default function ChangelogPost({
-  changelog: { title, body, publishedAt, image },
+  changelog: { title, body, publishedAt, image, slug },
 }: Props) {
   const formatDate = (dateString: string) => {
     return new Date(dateString).toLocaleDateString('en-US', {
@@ -46,7 +45,10 @@ export default function ChangelogPost({
             />
           </div>
         )}
-        <h2 className="my-auto m-r-auto font-bold tracking-tight text-gray-800 md:text-4xl overflow-hidden text-ellipsis leading-6 bg-green-50 group-hover:bg-green-100 transition-colors inline py-1 px-2">
+        <h2
+          id={slug}
+          className="my-auto m-r-auto font-bold tracking-tight text-gray-800 md:text-4xl overflow-hidden text-ellipsis leading-6 bg-green-50 group-hover:bg-green-100 transition-colors inline py-1 px-2"
+        >
           {title}
         </h2>
         <div

src/components/teams/form/TeamAPIKey.tsx

@@ -13,6 +13,11 @@ import useCustomToast from '@/hooks/useCustomToast';
 import { useRouter } from 'next/navigation';
 import * as Popover from '@radix-ui/react-popover';
 import generateAPIKey from '@/actions/generate-api-key';
+import { Popover as CustomPopover } from '@/components/Popover';
+import { AiOutlineInfoCircle } from '@react-icons/all-files/ai/AiOutlineInfoCircle';
+import Link from 'next/link';
+import { routes } from '@/core/constants';
+
 interface Props {
   team: Team;
 }
@@ -49,7 +54,36 @@ export default function TeamAPIKeyServer({ team }: Props) {
 
   return (
     <div className=" w-full flex flex-col gap-2 items-stretch">
-      <span className="font-semibold mt-4 mb-4">API Key</span>
+      <div className="flex gap-2 items-center">
+        <span className="font-semibold mt-4 mb-4">API Key</span>
+        <CustomPopover
+          trigger={
+            <span className="flex items-center justify-center">
+              <AiOutlineInfoCircle />
+            </span>
+          }
+        >
+          {' '}
+          <div className="bg-white max-w-[50ch] p-2 pb-3">
+            <h3 className="font-bold text-gray-900 text-md mb-2">
+              What is this ?
+            </h3>
+            <p className="flex flex-col gap-1 list-decimal list-inside">
+              Use this API Key to authenticate your requests to our API.
+            </p>
+            <p>
+              See the documentation{' '}
+              <Link
+                target="_blank"
+                className="underline text-violet-700"
+                href={routes.UPDATES.concat('#changelog-004')}
+              >
+                here
+              </Link>
+            </p>
+          </div>
+        </CustomPopover>
+      </div>
       <div className="flex gap-8 items-center flex-row">
         {team.apiKey ? (
           <>

src/components/teams/form/settings/SettingsPageLayout.tsx

@@ -12,7 +12,13 @@ import { Tooltip } from '@/components/Tooltip';
 import Link from '@/components/Link';
 import { usePathname } from 'next/navigation';
 
-function Header({ title, subtitle }: { title: string; subtitle: string }) {
+function Header({
+  title,
+  subtitle,
+}: {
+  title: string;
+  subtitle: string | React.ReactNode;
+}) {
   return (
     <div className="flex flex-col gap-4 pb-4 pt-4 md:border-b-2 md:border-neutral-100 md:pl-6">
       <div>
@@ -121,7 +127,7 @@ export default function SettingsPageLayout({
 }: {
   children: React.ReactNode;
   title: string;
-  subtitle: string;
+  subtitle: string | React.ReactNode;
   icon?: React.ReactNode;
   breadcrumbItems?: BreadcrumbProps['paths'];
   menuItems: ToolBarItem[];

src/components/teams/form/settings/TeamColorField.tsx

@@ -51,7 +51,7 @@ const TeamColorField = ({
             </h3>
             <p className="flex flex-col gap-1 list-decimal list-inside">
               Your team color is used to customize your newsletter, profile
-              picture and digest cover colors.
+              picture colors.
             </p>
           </div>
         </Popover>

src/components/teams/form/settings/TeamInfo.tsx

@@ -11,8 +11,6 @@ import Button from '@/components/Button';
 import updateTeamInfo from '@/actions/update-team-info';
 import TeamColorField from './TeamColorField';
 import useTransitionRefresh from '@/hooks/useTransitionRefresh';
-import TeamMenuTitle from '../../TeamMenuTitle';
-import TeamMenuContent from '../../TeamMenuContent';
 
 const PRO_FIELDS = ['prompt'];
 

src/core/constants.tsx

@@ -10,6 +10,7 @@ export const routes = {
   LOGIN: '/auth/login',
   ACCOUNT: '/account',
   TEAMS: '/teams',
+  TEAMS_PUBLIC: '/:slug',
   TEAM: '/teams/:slug',
   TEAMS_CREATE: '/teams/create',
   TEAMS_EDIT: '/teams/:slug/settings',