128 lines
4.5 KiB
TypeScript
128 lines
4.5 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { z } from 'zod';
|
|
|
|
/** This block below was generated by ChatGPT using GPT-4 on 2023-09-18 */
|
|
/** Original source: plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/constants.ts */
|
|
const fontChoices = [
|
|
{
|
|
pair_name: 'Inter + Inter',
|
|
fonts: {
|
|
Inter: 'A highly legible sans-serif, optimized for UI design.',
|
|
},
|
|
settings: 'Inter is used for buttons and general typography.',
|
|
},
|
|
{
|
|
pair_name: 'Bodoni Moda + Overpass',
|
|
fonts: {
|
|
'Bodoni Moda':
|
|
'A modern serif font with high contrast between thick and thin lines, commonly used for headings.',
|
|
Overpass:
|
|
'A clean, modern sans-serif, originally inspired by Highway Gothic. Good for text and UI elements.',
|
|
},
|
|
settings:
|
|
'Overpass is used for buttons and general typography, while Bodoni Moda is specified for headings and some core blocks like site title and post navigation link.',
|
|
},
|
|
{
|
|
pair_name: 'Commissioner + Crimson Pro',
|
|
fonts: {
|
|
Commissioner:
|
|
'A low-contrast, geometric sans-serif, designed for legibility and readability in long texts.',
|
|
'Crimson Pro':
|
|
'A serif typeface designed for readability and long-form text.',
|
|
},
|
|
settings:
|
|
'Commissioner dominates elements like buttons, headings, and core blocks, while Crimson Pro is set for general typography.',
|
|
},
|
|
{
|
|
pair_name: 'Libre Baskerville + DM Sans',
|
|
fonts: {
|
|
'Libre Baskerville':
|
|
'A serif typeface with a classic feel, good for long reading and often used for body text in books.',
|
|
'DM Sans':
|
|
'A clean, geometric sans-serif, often used for UI and short text.',
|
|
},
|
|
settings:
|
|
'Libre Baskerville is used for headings and core blocks, whereas DM Sans is used for buttons and general typography.',
|
|
},
|
|
{
|
|
pair_name: 'Libre Franklin + EB Garamond',
|
|
fonts: {
|
|
'Libre Franklin':
|
|
'A sans-serif that offers readability, suitable for both text and display.',
|
|
'EB Garamond':
|
|
"A revival of the classical 'Garamond' typefaces, suitable for long-form text.",
|
|
},
|
|
settings:
|
|
'Libre Franklin is predominantly used for elements like buttons, headings, and core blocks. EB Garamond is set for general typography.',
|
|
},
|
|
{
|
|
pair_name: 'Montserrat + Arvo',
|
|
fonts: {
|
|
Montserrat:
|
|
'A geometric sans-serif, popular for its modern clean lines.',
|
|
Arvo: 'A slab-serif font with a more traditional feel, suitable for print and screen.',
|
|
},
|
|
settings:
|
|
'Montserrat is used for buttons, headings, and core blocks. Arvo is used for general typography.',
|
|
},
|
|
{
|
|
pair_name: 'Playfair Display + Fira Sans',
|
|
fonts: {
|
|
'Playfair Display':
|
|
'A high-contrast serif designed for headings and offers a modern take on older serif fonts.',
|
|
'Fira Sans':
|
|
'A sans-serif designed for readability at small sizes, making it suitable for both UI and text.',
|
|
},
|
|
settings:
|
|
'Playfair Display is used in italics for headings and core blocks, while Fira Sans is used for buttons and general typography.',
|
|
},
|
|
{
|
|
pair_name: 'Rubik + Inter',
|
|
fonts: {
|
|
Rubik: 'A sans-serif with slightly rounded corners, designed for a softer, more modern look.',
|
|
Inter: 'A highly legible sans-serif, optimized for UI design.',
|
|
},
|
|
settings:
|
|
'Rubik is applied for headings and core blocks. Inter is used for buttons and general typography.',
|
|
},
|
|
{
|
|
pair_name: 'Space Mono + Roboto',
|
|
fonts: {
|
|
'Space Mono': 'A monospace typeface with a futuristic vibe.',
|
|
Roboto: 'A neo-grotesque sans-serif, known for its flexibility and modern design.',
|
|
},
|
|
settings:
|
|
'Space Mono is used for headings, while Roboto takes care of buttons and general typography.',
|
|
},
|
|
];
|
|
|
|
const allowedFontChoices = fontChoices.map( ( config ) => config.pair_name );
|
|
|
|
export const fontChoiceValidator = z.object( {
|
|
pair_name: z
|
|
.string()
|
|
.refine( ( name ) => allowedFontChoices.includes( name ), {
|
|
message: 'Font choice not part of allowed list',
|
|
} ),
|
|
} );
|
|
|
|
export const fontPairings = {
|
|
queryId: 'font_pairings',
|
|
version: '2023-09-18',
|
|
prompt: ( businessDescription: string, look: string, tone: string ) => {
|
|
return `
|
|
You are a WordPress theme expert. Analyse the following store description, merchant's chosen look and tone, and determine the most appropriate font pairing.
|
|
Respond only with one font pairing and and in the format: '{"pair_name":"font 1 + font 2"}'.
|
|
|
|
Chosen look and tone: ${ look } look, ${ tone } tone.
|
|
Business description: ${ businessDescription }
|
|
|
|
Font pairings to choose from:
|
|
${ JSON.stringify( fontChoices ) }
|
|
`;
|
|
},
|
|
responseValidation: fontChoiceValidator.parse,
|
|
};
|