@lightspeed/crane 2.0.5 → 3.0.0

package/template/preview/shared/preview.ts

@@ -2,9 +2,18 @@
 import { getExternalContentMock } from './mock';
 import { loadModule, renderServerModule } from './utils';
 
+export type BlockType = 'sections' | 'headers' | 'footers';
+export const BLOCK_TYPES: BlockType[] = ['sections', 'headers', 'footers'];
+
+const BLOCK_TYPE_LABELS: Record<BlockType, string> = {
+  sections: 'Section',
+  headers: 'Header',
+  footers: 'Footer',
+};
+
 let distFolderPath: string | null = null;
 let currentApp: any = null;
-let currentSectionName: string | null = null;
+let currentBlockKey: string | null = null;
 
 export function setDistFolderPath(path: string): void {
   distFolderPath = path;
@@ -17,8 +26,8 @@ export function setDistFolderPath(path: string): void {
 /**
  * Loads all required modules for a showcase.
  */
-async function loadShowcaseModules(sectionName: string, showcaseId: string, distFolder: string): Promise<[any, any, any, any, any]> {
-  const basePath = `${distFolder}/sections/${sectionName}`;
+async function loadShowcaseModules(blockType: BlockType, blockName: string, showcaseId: string, distFolder: string): Promise<[any, any, any, any, any]> {
+  const basePath = `${distFolder}/${blockType}/${blockName}`;
   return Promise.all([
     loadModule(`${basePath}/js/settings/content.mjs`),
     loadModule(`${basePath}/js/settings/translations.mjs`),
@@ -230,7 +239,7 @@ export function mergeDesign(
   return result;
 }
 
-export function designTransformer(design: Record<string, any>, showCaseDesign: Record<string, any>): Record<string, any> {
+export function designTransformer(design: Record<string, any>, showCaseDesign: Record<string, any>, isApiRender: boolean = false): Record<string, any> {
   const parsedDesign: Record<string, any> = {};
   const parsedShowcaseDesign: Record<string, any> = {};
   Object.entries(design || {}).forEach(([key, comp]) => {
@@ -267,15 +276,17 @@ export function designTransformer(design: Record<string, any>, showCaseDesign: R
     console.error('[Preview] Failed to update hex colors:', error);
   }
 
-  replaceGlobalFont(overridenDesign, 'Roboto');
+  if ( !isApiRender ) {
+    replaceGlobalFont(overridenDesign, 'Roboto');
+  }
   return overridenDesign;
 }
 
-function processImage(component: any, sectionName: string, key: string, isApiRender: boolean = false): Record<string, any> {
+function processImage(component: any, blockType: BlockType, blockName: string, key: string, isApiRender: boolean = false): Record<string, any> {
   try {
     const assetLocation = isApiRender ?
-      `http://${distFolderPath}/sections/${sectionName}/assets/` :
-      `${distFolderPath}/sections/${sectionName}/assets/`;
+      `http://${distFolderPath}/${blockType}/${blockName}/assets/` :
+      `${distFolderPath}/${blockType}/${blockName}/assets/`;
 
     const set = component.defaults?.imageData?.set || component.imageData?.set;
     const newSet = {
@@ -297,7 +308,7 @@ function processImage(component: any, sectionName: string, key: string, isApiRen
   }
 }
 
-export function processComponent(key: string, component: any, translations: any, sectionName?: string,
+export function processComponent(key: string, component: any, translations: any, blockType?: BlockType, blockName?: string,
   isApiRender: boolean = false, extraParams?: Record<string, any>): any {
   if (!component?.type) return {};
   switch (component.type) {
@@ -313,16 +324,16 @@ export function processComponent(key: string, component: any, translations: any,
       if (defaultSettings) {
         const result: Record<string, any> = {};
         Object.entries(defaultSettings).forEach(([k, c]) => {
-          Object.assign(result, processComponent(k, c, translations, sectionName, isApiRender));
+          Object.assign(result, processComponent(k, c, translations, blockType, blockName, isApiRender));
         });
         return { [key]: result };
       } else {
         const cards = component.cards.map((card: any, index: number) => {
           const cardContent: Record<string, any> = {};
           Object.entries(card.settings).forEach(([k, c]) => {
-            Object.assign(cardContent, processComponent(k, c, translations, sectionName, isApiRender));
+            Object.assign(cardContent, processComponent(k, c, translations, blockType, blockName, isApiRender));
           });
-          return { settings: cardContent, id: index.toString(), title: extraParams?.deckCardLabel};
+          return { settings: cardContent, id: index.toString(), title: extraParams?.deckCardLabel };
         });
         return { [key]: { cards } };
       }
@@ -340,14 +351,14 @@ export function processComponent(key: string, component: any, translations: any,
     case 'TOGGLE': {
       return {
         [key]: {
-          enabled: component.defaults?.enabled ?? component.enabled
-        }
+          enabled: component.defaults?.enabled ?? component.enabled,
+        },
       };
     }
     case 'SELECTBOX':
       return { [key]: component.defaults?.value ?? component.value };
     case 'IMAGE':
-      return processImage(component, sectionName!, key, isApiRender);
+      return processImage(component, blockType!, blockName!, key, isApiRender);
     case 'INFO':
       return {
         [key]: {
@@ -359,11 +370,38 @@ export function processComponent(key: string, component: any, translations: any,
           },
         },
       };
-    // Leaving PRODUCT_SELECTOR and CATEGORY_SELECTOR references for future implementation
     case 'PRODUCT_SELECTOR':
-      return {};
+      return {
+        [key]: {
+          maxProducts: component?.maxProducts ?? component?.defaults?.maxProducts,
+          products: {
+            selectionType: 'MANUAL',
+          },
+        },
+      };
     case 'CATEGORY_SELECTOR':
-      return {};
+      return {
+        [key]: {
+          maxCategories: component?.maxCategories ?? component?.defaults?.maxCategories,
+          categories: {
+            selectionType: 'ROOT',
+          },
+        },
+      };
+    case 'NAVIGATION_MENU':
+      return {
+        [key]: {
+          items: component.items ?? component?.defaults?.items ?? [],
+        },
+      };
+    case 'LOGO':
+      return {
+        [key]: {
+          text: translations[component?.text ?? component?.defaults?.text ?? ''],
+          type: component.logoType,
+          image: component.image,
+        },
+      };
     default:
       return {};
   }
@@ -374,7 +412,8 @@ function getContentToRender(
   showcase: any,
   contentTranslations: any,
   showcaseTranslations: any,
-  sectionName: string,
+  blockType: BlockType,
+  blockName: string,
   isApiRender: boolean = false,
 ): any {
   let deckCardLabel: string | undefined = undefined;
@@ -382,12 +421,11 @@ function getContentToRender(
     if ((c as any).type === 'DECK') {
       deckCardLabel = contentTranslations[(c as any).cards?.defaultCardContent?.label];
     }
-    return { ...acc, ...processComponent(k, c, contentTranslations, sectionName, isApiRender) };
+    return { ...acc, ...processComponent(k, c, contentTranslations, blockType, blockName, isApiRender) };
   }, {});
 
-
   const parsedShowcase = Object.entries(showcase || {}).reduce((acc, [k, c]) => {
-    return { ...acc, ...processComponent(k, c, showcaseTranslations, sectionName, isApiRender, {deckCardLabel}) };
+    return { ...acc, ...processComponent(k, c, showcaseTranslations, blockType, blockName, isApiRender, { deckCardLabel }) };
   }, {});
 
   return overrideSettingsFromShowcase(parsedContent, parsedShowcase);
@@ -395,44 +433,34 @@ function getContentToRender(
 
 export function dropdownOptions(showcaseModules: Record<string, any>): Array<{ value: string; label: string }> {
   return Object.keys(showcaseModules).map((path) => {
-    const match = path.match(/\/sections\/([^/]+)\/js\/showcases\/(\d+)\.mjs$/);
+    const match = path.match(/\/(sections|headers|footers)\/([^/]+)\/js\/showcases\/(\d+)\.mjs$/);
     if (!match) return null;
+    const blockType = match[1] as BlockType;
+    const blockName = match[2];
+    const showcaseId = match[3];
     return {
-      value: `${match[1]}:${match[2]}`,
-      label: `${match[1]}: showcase ${match[2]}`,
+      value: `${blockType}:${blockName}:${showcaseId}`,
+      label: `${BLOCK_TYPE_LABELS[blockType]}: ${blockName} - Showcase ${showcaseId}`,
     };
   }).filter(Boolean) as Array<{ value: string; label: string }>;
 }
 
-export function loadSectionCss(sectionName: string): void {
-  const cssHref = `${distFolderPath}/sections/${sectionName}/js/main/client/assets/client.css`;
-
-  // Check if CSS for this section is already loaded
-  const existingLink = document.querySelector(`link[href="${cssHref}"]`);
-  if (existingLink) {
-    return; // CSS already loaded
-  }
-
-  // Remove CSS from other sections (cleanup)
-  const oldLinks = document.querySelectorAll('link[data-section-css]');
-  oldLinks.forEach(link => link.remove());
-
+export function loadBlockCss(blockType: BlockType, blockName: string): void {
   const link = document.createElement('link');
   link.rel = 'stylesheet';
-  link.href = `${distFolderPath}/sections/${sectionName}/js/main/client/assets/client.css`;
-  link.setAttribute('data-section-css', sectionName);
+  link.href = `${distFolderPath}/${blockType}/${blockName}/js/main/client/assets/client.css`;
   document.head.appendChild(link);
 }
 
 /**
  * Renders a showcase in the browser (client-side).
  */
-export async function renderShowcase(sectionName: string, showcaseId: string): Promise<void> {
+export async function renderShowcase(blockType: BlockType, blockName: string, showcaseId: string): Promise<void> {
   if (!distFolderPath) throw new Error('distFolderPath not set');
 
-  const basePath = `${distFolderPath}/sections/${sectionName}`;
+  const basePath = `${distFolderPath}/${blockType}/${blockName}`;
   const [content, contentTranslations, showcaseTranslations, showcase, design]
-    = await loadShowcaseModules(sectionName, showcaseId, distFolderPath);
+    = await loadShowcaseModules(blockType, blockName, showcaseId, distFolderPath);
 
   const client = await loadModule(`${basePath}/js/main/client/client.js`) as any;
 
@@ -448,11 +476,12 @@ export async function renderShowcase(sectionName: string, showcaseId: string): P
     (showcase as any).default.content || {},
     (contentTranslations as any).default.en,
     (showcaseTranslations as any).default.en,
-    sectionName,
+    blockType,
+    blockName,
   );
 
   // Load CSS
-  loadSectionCss(sectionName);
+  loadBlockCss(blockType, blockName);
 
   // Prepare state
   const state = {
@@ -466,63 +495,63 @@ export async function renderShowcase(sectionName: string, showcaseId: string): P
     },
   };
 
-  // Check if we're switching to a different section
-  const isSameSection = currentSectionName === sectionName;
+  // Check if we're switching to a different block
+  const blockKey = `${blockType}:${blockName}`;
+  const isSameBlock = currentBlockKey === blockKey;
 
   // Mount or update app
-  if (currentApp && isSameSection) {
-    // Same section, just update with new showcase data
+  if (currentApp && isSameBlock) {
     currentApp.update(state);
   } else {
-    // Different section or first load - unmount old app and mount new one
     if (currentApp) {
       currentApp.unmount();
-      // Clear the app container
       const appContainer = document.getElementById('app');
       if (appContainer) {
         appContainer.innerHTML = '';
       }
     }
-
     const { mount, update, unmount } = (client as any).default.init();
     currentApp = { update, unmount };
-    currentSectionName = sectionName;
+    currentBlockKey = blockKey;
     mount('#app', state);
   }
 }
 
-async function getLayout(showcase: any, sectionName: string, distFolder: string) {
+async function getLayout(showcase: any, blockType: BlockType, blockName: string, distFolder: string) {
   // First, try to get layoutId from showcase
   if (showcase.default?.layoutId) {
     return showcase.default.layoutId;
   }
 
-  // If not present in showcase, read from section's layout.mjs
-  const basePath = `${distFolder}/sections/${sectionName}`;
-  const layoutModule = await loadModule(`${basePath}/js/settings/layout.mjs`) as any;
+  // If not in showcase, try reading from section's layout.mjs (optional)
+  try {
+    const basePath = `${distFolder}/${blockType}/${blockName}`;
+    const layoutModule = await loadModule(`${basePath}/js/settings/layout.mjs`) as any;
 
-  // layout.mjs exports an array of layout configurations
-  // Return the first element's layoutId
-  if (Array.isArray(layoutModule.default) && layoutModule.default.length > 0) {
-    return layoutModule.default[0].layoutId;
+    // layout.mjs exports an array of layout configurations
+    // Return the first element's layoutId
+    if (Array.isArray(layoutModule.default) && layoutModule.default.length > 0) {
+      return layoutModule.default[0].layoutId;
+    }
+  } catch {
+    // Layout file is optional
   }
-  throw new Error('Layout module is not an array or is empty');
 }
 
 /**
  * Prepares showcase data (content and design) without rendering.
  * Used by API routes to return tile data.
  */
-export async function getShowcaseData(sectionName: string, showcaseId: string, distFolder: string) {
+export async function getShowcaseData(blockType: BlockType, blockName: string, showcaseId: string, distFolder: string) {
   const [content, contentTranslations, showcaseTranslations, showcase, design]
-    = await loadShowcaseModules(sectionName, showcaseId, distFolder);
+    = await loadShowcaseModules(blockType, blockName, showcaseId, distFolder);
 
   // Prepare design
   const showcaseBackground = (showcase as any).default?.design?.background;
   const backgroundDesign = createBackgroundDesign(showcaseBackground, true); // API render
-  const overriddenDesign = designTransformer((design as any).default, (showcase as any).default.design || {});
+  const overriddenDesign = designTransformer((design as any).default, (showcase as any).default.design || {}, true);
   overriddenDesign.background = backgroundDesign;
-  overriddenDesign.layout = await getLayout(showcase, sectionName, distFolder);
+  overriddenDesign.layout = await getLayout(showcase, blockType, blockName, distFolder);
 
   // Prepare content
   const overriddenContent = getContentToRender(
@@ -530,8 +559,9 @@ export async function getShowcaseData(sectionName: string, showcaseId: string, d
     (showcase as any).default.content || {},
     (contentTranslations as any).default.en,
     (showcaseTranslations as any).default.en,
-    sectionName,
-    true
+    blockType,
+    blockName,
+    true,
   );
 
   return {
@@ -544,20 +574,26 @@ export async function getShowcaseData(sectionName: string, showcaseId: string, d
  * Gets the showcase state by rendering server-side.
  * Uses renderServerModule to get HTML directly from the SSR server.
  */
-export async function getShowcaseState(sectionName: string, showcaseId: string, distFolder: string, context: Record<string, any>) {
+export async function getShowcaseState(
+  blockType: BlockType,
+  blockName: string,
+  showcaseId: string,
+  distFolder: string,
+  context: Record<string, any>,
+  externalContent: Record<string, any>) {
   const { content: overriddenContent, design: overriddenDesign }
-    = await getShowcaseData(sectionName, showcaseId, distFolder);
+    = await getShowcaseData(blockType, blockName, showcaseId, distFolder);
 
   const data = {
     content: overriddenContent,
     design: overriddenDesign,
     defaults: {},
     background: {},
-    externalContent: getExternalContentMock(),
+    externalContent: externalContent,
   };
 
   // Render server-side using the SSR server
-  const basePath = `${distFolder}/sections/${sectionName}`;
+  const basePath = `${distFolder}/${blockType}/${blockName}`;
   const serverModulePath = `${basePath}/js/main/server/server.js`;
   const html = await renderServerModule(serverModulePath, context, data);
 

package/template/preview/shared/utils.ts

@@ -2,7 +2,7 @@
 import * as fs from 'fs';
 import * as path from 'path';
 
-import { getShowcaseState } from './preview';
+import { getShowcaseState, BlockType, BLOCK_TYPES } from './preview';
 
 /**
  * Renders a server.js module by directly calling the SSR server.
@@ -107,21 +107,19 @@ export function updateTilesSection(
 ): any {
   const targetPattern = `_${sectionName}_${showcaseId}`;
 
-  const targetItem = tilesResponse.tiles.find((item: any) => {
+  const updatedTiles = tilesResponse.tiles.map((item: any) => {
     const itemId = item.sourceId;
-    if (itemId && typeof itemId === 'string') {
-      return itemId.includes(targetPattern);
+    if (itemId && typeof itemId === 'string' && itemId.includes(targetPattern)) {
+      item.content = content;
+      // If new design has no layout, use CUSTOM_LAYOUT
+      const layout = design.layout || 'CUSTOM_LAYOUT';
+      item.design = design;
+      item.design.layout = layout;
     }
-    return false;
+    return item;
   });
 
-  if (targetItem) {
-    // Replace only content and design, preserve all other properties including tils
-    targetItem.content = content;
-    targetItem.design = design;
-  }
-
-  return tilesResponse;
+  return { ...tilesResponse, tiles: updatedTiles };
 }
 
 /**
@@ -154,17 +152,18 @@ export async function getSectionIds(sectionName: string, showcaseId: string, aut
 }
 
 /**
- * Gets all showcase IDs for a given section
- * @param sectionName - The section name (e.g., 'example-section')
+ * Gets all showcase IDs for a given block
+ * @param blockType - The block type ('sections', 'headers', 'footers')
+ * @param blockName - The block name (e.g., 'example-section')
  * @param distPath - The dist path
  * @returns Array of showcase IDs
  */
-export function getShowcaseIds(sectionName: string, distPath: string): string[] {
+export function getShowcaseIds(blockType: BlockType, blockName: string, distPath: string): string[] {
   try {
-    const showcasesPath = path.join(distPath, 'sections', sectionName, 'js', 'showcases');
+    const showcasesPath = path.join(distPath, blockType, blockName, 'js', 'showcases');
 
     if (!fs.existsSync(showcasesPath)) {
-      console.error(`Showcases directory not found for section: ${sectionName}`);
+      console.error(`Showcases directory not found for ${blockType}: ${blockName}`);
       return [];
     }
 
@@ -174,23 +173,38 @@ export function getShowcaseIds(sectionName: string, distPath: string): string[]
 
     return showcaseIds;
   } catch (error) {
-    console.error(`Error getting showcase IDs for section ${sectionName}:`, error);
+    console.error(`Error getting showcase IDs for ${blockType} ${blockName}:`, error);
     return [];
   }
 }
 
 /**
- * Updates all matching section showcases in custom content
- * @param sectionName - The section name
+ * Determine the block type by checking which folder contains the block
+ */
+export function getBlockType(blockName: string, distPath: string): BlockType | null {
+  for (const blockType of BLOCK_TYPES) {
+    const blockPath = path.join(distPath, blockType, blockName);
+    if (fs.existsSync(blockPath)) {
+      return blockType;
+    }
+  }
+  return null;
+}
+
+/**
+ * Updates all matching block showcases in custom content
+ * @param blockType - The block type ('sections', 'headers', 'footers')
+ * @param blockName - The block name
  * @param showcaseId - The showcase ID
  * @param distPath - The dist path
  * @param customContentSections - The sections array from custom content
  * @param authToken - Bearer token
  * @param tilesUrl - The tiles URL
- * @returns True if at least one section was updated successfully, false otherwise
+ * @returns True if at least one block was updated successfully, false otherwise
  */
-async function updateSectionShowcase(
-  sectionName: string,
+async function updateBlockShowcase(
+  blockType: BlockType,
+  blockName: string,
   showcaseId: string,
   distPath: string,
   customContentSections: Array<Record<string, unknown>>,
@@ -198,61 +212,62 @@ async function updateSectionShowcase(
   tilesUrl?: string,
 ): Promise<boolean> {
   try {
-    // Get all section IDs from tiles
-    const sectionIds = await getSectionIds(sectionName, showcaseId, authToken, tilesUrl);
+    // Get all section IDs from tiles matching this block/showcase
+    const sectionIds = await getSectionIds(blockName, showcaseId, authToken, tilesUrl);
 
     if (!sectionIds || sectionIds.length === 0) {
       return false;
-    }
-    // Process each section ID
+    }// Process each section ID
     for (const sectionId of sectionIds) {
-      // Find the section by ID in custom content
-      const targetSection = customContentSections.find((section) => {
+      // Find the block by block ID in custom content
+      const targetBlock = customContentSections.find((section) => {
         const state = section.state as Record<string, unknown>;
         const data = state.data as Record<string, unknown>;
         return data.tileId === sectionId;
       });
 
-      if (!targetSection) {
-        console.error(`Section not found in custom content with ID: ${sectionId}`);
+      if (!targetBlock) {
+        console.error(`Block not found in custom content with ID: ${sectionId}`);
         continue;
       }
 
       // Fetch content, design, and html using getShowcaseState
-      const state = targetSection.state as Record<string, unknown>;
+      const state = targetBlock.state as Record<string, unknown>;
       // eslint-disable-next-line no-await-in-loop
       const { content, design, html } = await getShowcaseState(
-        sectionName,
+        blockType,
+        blockName,
         showcaseId,
         distPath,
         state.context as Record<string, unknown>,
+        (state.data as Record<string, unknown>).externalContent as Record<string, unknown>,
       );
 
       // Update content, design, and html
       const data = state.data as Record<string, unknown>;
       data.content = JSON.stringify(content);
       data.design = JSON.stringify(design);
-      targetSection.html = html;
+      targetBlock.html = html;
     }
 
     return true;
   } catch (error) {
-    console.error(`Error updating ${sectionName} showcase ${showcaseId}:`, error);
+    console.error(`Error updating ${blockType} ${blockName} showcase ${showcaseId}:`, error);
     return false;
   }
 }
 
 /**
  * Fetches custom content and updates all specified sections with their showcases
- * @param sectionNames - Array of section names to update (e.g., ['example-section', 'test-section'])
+ * @param blockNames - Array of block names to update (e.g., ['about-us', 'example-header', 'example-footer'])
  * @param distPath - The dist path for getContentAndDesign
  * @param authToken - Bearer token from request header (e.g., "Bearer xxx")
  * @param customContentUrl - The custom content URL
- * @param tilesUrl - The tiles URL to fetch section IDs
+ * @param tilesUrl - The tiles URL to fetch block IDs
  * @returns The updated custom content response or null if failed
  */
 export async function updateCustomContent(
-  sectionNames: string[],
+  blockNames: string[],
   distPath: string,
   authToken?: string,
   customContentUrl?: string,
@@ -290,13 +305,18 @@ export async function updateCustomContent(
     }
 
     const customContentSections = customContent.sections as Array<Record<string, unknown>>;
+    // Process all blocks and showcases in parallel
+    const updatePromises = blockNames.flatMap((sectionName) => {
+      const blockType = getBlockType(sectionName, distPath);
+      if (!blockType) {
+        console.warn(`Block not found: ${sectionName}`);
+        return [];
+      }
 
-    // Process all sections and showcases in parallel
-    const updatePromises = sectionNames.flatMap((sectionName) => {
-      const showcaseIds = getShowcaseIds(sectionName, distPath);
-
+      const showcaseIds = getShowcaseIds(blockType, sectionName, distPath);
       return showcaseIds.map(showcaseId =>
-        updateSectionShowcase(
+        updateBlockShowcase(
+          blockType,
           sectionName,
           showcaseId,
           distPath,

package/template/preview/ssr-server.ts

@@ -391,7 +391,7 @@ const server = http.createServer(async (req: http.IncomingMessage, res: http.Ser
         const { render } = serverModule.init();
 
         // Call render with context and data
-        const result = await render(context, data || { defaults: {}, background: {}, externalContent: {} });
+        const result = await render(context, data || { defaults: {}, background: {} });
 
         res.statusCode = 200;
         res.setHeader('Content-Type', 'application/json');

package/template/reference/sections/about-us/AboutUs.vue

@@ -43,31 +43,29 @@ const backgroundStyle = computed<CSSProperties>(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-.about-us-section {
-  &__wrapper {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 75px;
+<style scoped>
+.about-us-section__wrapper {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 75px;
 
-    @media screen and (min-width: 900px) {
-      grid-template-columns: 1fr 1fr;
-      align-items: center;
-      gap: 100px;
-    }
+  @media screen and (min-width: 900px) {
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+    gap: 100px;
   }
+}
 
-  &__image {
-    max-width: 479px;
-    max-height: 610px;
-    margin: 0 auto;
-  }
+.about-us-section__image {
+  max-width: 479px;
+  max-height: 610px;
+  margin: 0 auto;
+}
 
-  &__content {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-self: center;
-  }
+.about-us-section__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-self: center;
 }
 </style>