code · pull · Apr 30, 2025 · Apr 30, 2025 · Apr 30, 2025 · Apr 30, 2025
diff --git a/.docker/Dockerfile b/.docker/Dockerfile
@@ -74,7 +74,6 @@ COPY ghost/api-framework/package.json ghost/api-framework/package.json
 COPY ghost/constants/package.json ghost/constants/package.json
 COPY ghost/core/package.json ghost/core/package.json
 COPY ghost/custom-fonts/package.json ghost/custom-fonts/package.json
-COPY ghost/custom-theme-settings-service/package.json ghost/custom-theme-settings-service/package.json
 COPY ghost/domain-events/package.json ghost/domain-events/package.json
 COPY ghost/donations/package.json ghost/donations/package.json
 COPY ghost/email-addresses/package.json ghost/email-addresses/package.json

diff --git a/.docker/development.entrypoint.sh b/.docker/development.entrypoint.sh
@@ -1,4 +1,6 @@
 #!/bin/bash
 
+yarn nx reset
+
 # Execute the CMD
-exec "$@"
+exec "$@"
diff --git a/apps/admin-x-activitypub/package.json b/apps/admin-x-activitypub/package.json
@@ -33,7 +33,7 @@
     "@testing-library/react": "14.3.1",
     "@types/jest": "29.5.14",
     "@types/react": "18.3.20",
-    "@types/react-dom": "18.3.6",
+    "@types/react-dom": "18.3.7",
     "jest": "29.7.0",
     "ts-jest": "29.3.2"
   },

diff --git a/apps/admin-x-design-system/src/assets/icons/line-dashed.svg b/apps/admin-x-design-system/src/assets/icons/line-dashed.svg
diff --git a/apps/admin-x-design-system/src/assets/icons/line-dotted.svg b/apps/admin-x-design-system/src/assets/icons/line-dotted.svg
diff --git a/apps/admin-x-design-system/src/assets/icons/line-solid.svg b/apps/admin-x-design-system/src/assets/icons/line-solid.svg
diff --git a/apps/admin-x-design-system/src/assets/icons/text-bold.svg b/apps/admin-x-design-system/src/assets/icons/text-bold.svg
diff --git a/apps/admin-x-design-system/src/assets/icons/text-regular.svg b/apps/admin-x-design-system/src/assets/icons/text-regular.svg
diff --git a/apps/admin-x-design-system/src/assets/icons/text-underline.svg b/apps/admin-x-design-system/src/assets/icons/text-underline.svg
diff --git a/apps/admin-x-design-system/src/assets/images/ghost-orb.svg b/apps/admin-x-design-system/src/assets/images/ghost-orb.svg
diff --git a/apps/admin-x-design-system/src/global/ButtonGroup.tsx b/apps/admin-x-design-system/src/global/ButtonGroup.tsx
@@ -1,12 +1,17 @@
 import React from 'react';
 import Button, {ButtonSize} from './Button';
+import Tooltip from './Tooltip';
 
 import {ButtonProps} from './Button';
 import clsx from 'clsx';
 
+export interface ButtonGroupButtonProps extends ButtonProps {
+    tooltip?: string | React.ReactNode;
+}
+
 export interface ButtonGroupProps {
     size?: ButtonSize;
-    buttons: Array<ButtonProps>;
+    buttons: Array<ButtonGroupButtonProps>;
     link?: boolean;
     linkWithPadding?: boolean;
     clearBg?: boolean;
@@ -49,7 +54,12 @@ const ButtonGroup: React.FC<ButtonGroupProps> = ({size = 'md', buttons, link, li
                 }
 
                 return (
-                    <Button key={key} link={link} linkWithPadding={linkWithPadding} size={size} {...buttonProps} />
+                    (props.tooltip ? 
+                        <Tooltip key={key} content={props.tooltip}>
+                            <Button key={`btn-${key}`} link={link} linkWithPadding={linkWithPadding} size={size} {...buttonProps} />
+                        </Tooltip> :
+                        <Button key={key} link={link} linkWithPadding={linkWithPadding} size={size} {...buttonProps} />
+                    )
                 );
             })}
         </div>

diff --git a/apps/admin-x-framework/package.json b/apps/admin-x-framework/package.json
@@ -87,7 +87,7 @@
         "@tryghost/admin-x-design-system": "0.0.0",
         "@tryghost/shade": "0.0.0",
         "@types/react": "18.3.20",
-        "@types/react-dom": "18.3.6",
+        "@types/react-dom": "18.3.7",
         "@vitejs/plugin-react": "4.4.1",
         "react": "18.3.1",
         "react-dom": "18.3.1",

diff --git a/apps/admin-x-framework/src/api/newsletters.ts b/apps/admin-x-framework/src/api/newsletters.ts
@@ -40,6 +40,8 @@ export type Newsletter = {
     divider_color: string | null;
     button_corners: string | null;
     button_style: string | null;
+    link_style: string | null;
+    divider_style: string | null;
     created_at: string;
     updated_at: string;
     count?: {

diff --git a/apps/admin-x-framework/src/api/stats.ts b/apps/admin-x-framework/src/api/stats.ts
@@ -0,0 +1,23 @@
+import {Meta, createQuery} from '../utils/api/hooks';
+
+// Types
+
+export type TopContentItem = {
+    pathname: string;
+    visits: number;
+    title?: string;
+}
+
+export type TopContentResponseType = {
+    stats: TopContentItem[];
+    meta: Meta;
+}
+
+// Requests
+
+const dataType = 'TopContentResponseType';
+
+export const useTopContent = createQuery<TopContentResponseType>({
+    dataType,
+    path: '/stats/top-content/'
+});
diff --git a/apps/admin-x-framework/src/test/responses/newsletters.json b/apps/admin-x-framework/src/test/responses/newsletters.json
@@ -36,6 +36,8 @@
             "button_style": "fill",
             "button_corners": null,
             "link_color": null,
+            "link_style": null,
+            "divider_style": null,
             "title_color": null,
             "divider_color": null,
             "created_at": "2023-05-05T00:55:16.000Z",
@@ -80,6 +82,8 @@
             "button_style": "fill",
             "button_corners": null,
             "link_color": null,
+            "link_style": null,
+            "divider_style": null,
             "title_color": null,
             "divider_color": null,
             "created_at": "2023-08-03T16:39:36.000Z",

diff --git a/apps/admin-x-settings/package.json b/apps/admin-x-settings/package.json
@@ -51,7 +51,7 @@
     "@tryghost/admin-x-framework": "0.0.0",
     "@tryghost/custom-fonts": "0.0.0",
     "@types/react": "18.3.20",
-    "@types/react-dom": "18.3.6",
+    "@types/react-dom": "18.3.7",
     "@types/validator": "13.15.0",
     "@vitejs/plugin-react": "4.4.1",
     "eslint-plugin-react-hooks": "4.6.2",

diff --git a/.../admin-x-settings/src/components/settings/email/newsletters/NewsletterDetailModalLabs.tsx b/.../admin-x-settings/src/components/settings/email/newsletters/NewsletterDetailModalLabs.tsx
@@ -381,24 +381,20 @@ const Sidebar: React.FC<{
             contents:
             <>
                 <Form className='mt-6' gap='xs' margins='lg' title='Typography'>
-                    <div className="w-full">
-                        <Select
-                            disabled={!newsletter.show_post_title_section}
-                            options={fontOptions}
-                            selectedOption={fontOptions.find(option => option.value === newsletter.title_font_category)}
-                            title='Heading font'
-                            onSelect={option => updateNewsletter({title_font_category: option?.value})}
-                        />
-                    </div>
-                    <div className='w-full'>
-                        <Select
-                            disabled={!newsletter.show_post_title_section}
-                            options={fontWeightOptions}
-                            selectedOption={fontWeightOptions.find(option => option.value === newsletter.title_font_weight)}
-                            title='Heading weight'
-                            onSelect={option => updateNewsletter({title_font_weight: option?.value})}
-                        />
-                    </div>
+                    <Select
+                        disabled={!newsletter.show_post_title_section}
+                        options={fontOptions}
+                        selectedOption={fontOptions.find(option => option.value === newsletter.title_font_category)}
+                        title='Heading font'
+                        onSelect={option => updateNewsletter({title_font_category: option?.value})}
+                    />
+                    <Select
+                        disabled={!newsletter.show_post_title_section}
+                        options={fontWeightOptions}
+                        selectedOption={fontWeightOptions.find(option => option.value === newsletter.title_font_weight)}
+                        title='Heading weight'
+                        onSelect={option => updateNewsletter({title_font_weight: option?.value})}
+                    />
                     <Select
                         options={fontOptions}
                         selectedOption={fontOptions.find(option => option.value === newsletter.body_font_category)}
@@ -527,6 +523,7 @@ const Sidebar: React.FC<{
                                 key: 'left',
                                 icon: 'align-left',
                                 label: 'Align left',
+                                tooltip: 'Left',
                                 hideLabel: true,
                                 link: false,
                                 size: 'sm',
@@ -537,6 +534,7 @@ const Sidebar: React.FC<{
                                 key: 'center',
                                 icon: 'align-center',
                                 label: 'Align center',
+                                tooltip: 'Center',
                                 hideLabel: true,
                                 link: false,
                                 size: 'sm',
@@ -552,6 +550,7 @@ const Sidebar: React.FC<{
                                 key: 'fill',
                                 icon: 'squircle-fill',
                                 label: 'Fill',
+                                tooltip: 'Fill',
                                 hideLabel: true,
                                 link: false,
                                 size: 'sm',
@@ -561,6 +560,7 @@ const Sidebar: React.FC<{
                                 key: 'outline',
                                 icon: 'squircle',
                                 label: 'Outline',
+                                tooltip: 'Outline',
                                 hideLabel: true,
                                 link: false,
                                 size: 'sm',
@@ -575,6 +575,7 @@ const Sidebar: React.FC<{
                                 key: 'square',
                                 icon: 'square',
                                 label: 'Square',
+                                tooltip: 'Squared',
                                 hideLabel: true,
                                 link: false,
                                 size: 'sm',
@@ -584,6 +585,7 @@ const Sidebar: React.FC<{
                                 key: 'squircle',
                                 icon: 'squircle',
                                 label: 'Squircle',
+                                tooltip: 'Slightly rounded',
                                 hideLabel: true,
                                 link: false,
                                 size: 'sm',
@@ -593,15 +595,84 @@ const Sidebar: React.FC<{
                                 key: 'rounded',
                                 icon: 'circle',
                                 label: 'Rounded',
+                                tooltip: 'Fully rounded',
                                 hideLabel: true,
                                 link: false,
                                 size: 'sm',
                                 onClick: () => updateNewsletter({button_corners: 'rounded'})
                             }
                         ]} clearBg={false} />
                     </div>
-                    <div>Link style</div>
-                    <div>Divider style</div>
+                    <div className='flex w-full justify-between'>
+                        <div>Link style</div>
+                        <ButtonGroup activeKey={newsletter.link_style || 'underline'} buttons={[
+                            {
+                                key: 'underline',
+                                icon: 'text-underline',
+                                label: 'Underline',
+                                tooltip: 'Underline',
+                                hideLabel: true,
+                                link: false,
+                                size: 'sm',
+                                onClick: () => updateNewsletter({link_style: 'underline'})
+                            },
+                            {
+                                key: 'regular',
+                                icon: 'text-regular',
+                                label: 'Regular',
+                                tooltip: 'Regular',
+                                hideLabel: true,
+                                link: false,
+                                size: 'sm',
+                                onClick: () => updateNewsletter({link_style: 'regular'})
+                            },
+                            {
+                                key: 'bold',
+                                icon: 'text-bold',
+                                label: 'Bold',
+                                tooltip: 'Bold',
+                                hideLabel: true,
+                                link: false,
+                                size: 'sm',
+                                onClick: () => updateNewsletter({link_style: 'bold'})
+                            }
+                        ]} clearBg={false} />
+                    </div>
+                    <div className='flex w-full justify-between'>
+                        <div>Divider style</div>
+                        <ButtonGroup activeKey={newsletter.divider_style || 'solid'} buttons={[
+                            {
+                                key: 'solid',
+                                icon: 'line-solid',
+                                label: 'Solid',
+                                tooltip: 'Solid',
+                                hideLabel: true,
+                                link: false,
+                                size: 'sm',
+                                onClick: () => updateNewsletter({divider_style: 'solid'})
+                            },
+                            {
+                                key: 'dashed',
+                                icon: 'line-dashed',
+                                label: 'Dashed',
+                                tooltip: 'Dashed',
+                                hideLabel: true,
+                                link: false,
+                                size: 'sm',
+                                onClick: () => updateNewsletter({divider_style: 'dashed'})
+                            },
+                            {
+                                key: 'dotted',
+                                icon: 'line-dotted',
+                                label: 'Dotted',
+                                tooltip: 'Dotted',
+                                hideLabel: true,
+                                link: false,
+                                size: 'sm',
+                                onClick: () => updateNewsletter({divider_style: 'dotted'})
+                            }
+                        ]} clearBg={false} />
+                    </div>
                 </Form>
             </>
         }

diff --git a/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterPreview.tsx b/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterPreview.tsx
@@ -154,11 +154,13 @@ const NewsletterPreview: React.FC<{newsletter: Newsletter}> = ({newsletter}) =>
         bodyFontCategory={newsletter.body_font_category}
         buttonCorners={newsletter.button_corners || 'squircle'}
         buttonStyle={newsletter.button_style || 'fill'}
+        dividerStyle={newsletter.divider_style || 'solid'}
         footerContent={newsletter.footer_content}
         headerIcon={newsletter.show_header_icon ? icon : undefined}
         headerImage={newsletter.header_image}
         headerSubtitle={headerSubtitle}
         headerTitle={headerTitle}
+        linkStyle={newsletter.link_style || 'underline'}
         senderEmail={renderSenderEmail(newsletter, config, defaultEmailAddress)}
         senderName={newsletter.sender_name || title}
         senderReplyTo={renderReplyToEmail(newsletter, config, supportEmailAddress, defaultEmailAddress)}