Migration method in this page will continue to evolve...
AEM Modernization Agent is a great tool for migrating both AEM sites and other CMS sites to Edge Delivery. The process explained in this post is an alternative method to Migrating Pages with NO Design Standards where Authors do designs on the fly during Page Authoring, effectively creating Author Controlled Layouts
So every page has a Unique Design. There could be some common Section Layouts across pages; key is to find those patterns using AI assistant and speed up the Migration to Edge Delivery. While figuring out the patterns you write Prompts & Skills to solve the migration of content that fits into those section layouts.
Method explained in this post uses JCR .content.xml of the pages migrated to train Claude Code Extension in VSCode to migrate more pages incrementally. Overtime, the migration process becomes faster and easier as Claude will have many JCR .content.xml files to work with to Recognize Patterns and do Page Migration
ONE PAGE -> [AI SKILLS] -> MULTIPLE PAGES -> [AI SKILLS] -> ONE LOCALE SITE -> [AI SKILLS] -> MULTIPE LOCALE SITES
Step 1 - Create the Base Block Library
1) Migrate a page using AEM Modernization Agent or Claude Code Extension of VS Code. The intent of this migration is not do a real migration but create the Starter Block Library and necessary Variations (in addition to the ones provided by Boiler Plate)
2) After identifying different pages and creating necessary blocks using AI, say you end up with these blocks...
accordion, breadcrumb, brightcove-podcast-player, brightcove-video, cards, carousel, columns, cta, custom-embed, custom-image, custom-title, editorial-feed, embed-form, embed, eyebrow-text, fact-card, footer, form, fragment, header, hero-container, hero, inner-grid, linklist, modal, navigation-content, news-feed, pipeline-utility-nav, pipeline, press-releases, product-listing, quote, search-input, search-results, search, separator, social-media, stock-ticker, story-card, story-cards, table, tabs, tag-utility-nav, teaser, text-container, video
A sample block structure....
blocks\accordion
- _accordion.json
- accordion.css
- accordion.js
Step 2 - Lock the Block Library
1) Once you have the base Block Library, test it for all usecases
2) Use AI Assistants to add Code, do Automated and Manual Regression Testing
3) LOCK the Block Library. After this step, any code changes by the Modernization Agent (or any AI Assistant is NOT ALLOWED). When you are migrating a single page, AI has the tendency to generate or modify styles/code for a successful migration of that page. When a different page with an entirely different layout is migrated in another session (or by another developer) the code is modified and may break previous pages migrated using same blocks (as it has no knowledge of previously migrated pages). Remember, we are migrating a site with designs created by authors and the assumption is EVERY PAGE IS UNIQUE wrt. Layout and Content
4) Any CSS or Javascript Changes after the LOCK step will go through a rigorous lead level Manual Review who has knowledge of the project at high level to determine if the change is required and does it mean a breaking change...
Step 3 - First Page Created Manually in Universal Editor
1) Open Universal Editor in AEM and create a sample page eg. /content/eaem-dev-eds/index/drafts/first-and-manual
2) Add a GET <page-path> command skill to get the Starter Page JCR .content.xml to your local file system (so Claude can work with it) from AEM. Here is a sample GET skill (placed in C:\dev\projects\eaem\eaem-eds\.claude\commands\GET.md)
a. In your Claude Code Extension enter eg. GET https://eaem-in--dev-eaem-in--eaem.aem.live/drafts/first-and-manual
b. It executes the necessary scripts to connect to AEM (using a local user claude-migration-user:claude-migration-user)
c. Saves the .content.xml to a primary folder eaem-in-wip eg. C:\dev\projects\eaem\playground\eaem-in-wip\jcr_root\content\content\eaem-dev-eds\drafts\first-and-manual
d. Also puts the same .content.xml in a backup folder (which is GIT versioned). Reason for keeping a versioned backup folder is for times when Claude messes up something and overrides an already migrated page. Here is a sample execution...
Step 4 - Writing First Migration Prompt
1) At this point Claude has access to to your Block Library and a Sample page JCR .content.xml to start the Migration Process. Find a relatively simple page, say the following..
2) To migrate the above Page and First Section, issue the following Prompt in Claude window (in the next steps we'll create a Section Index and Block Index so we don't have to vibe code each section). With no index availability yet, Claude can do about 30-40% of the migration and rest has to be manual in Universal Editor.
migrate page https://experience-aem.blogspot.com/contact-us.html using https://eaem-in--dev-eaem-in--eaem.aem.live/drafts/first-and-manual
for the green header use hero-container block with variant "color"
for "Contact Us" title use the title block
for "If you would like to send..." text use text-container block
3) This invokes the migrate-page skill, which reads sample JCR Content XML for Structure, reads Content from Source Page, adds the necessary Block Element in migrated page's content xml (eg. C:\dev\projects\eaem\playground\eaem-in-wip\jcr_root\content\content\eaem-dev-eds\contactus\.content.xml) and can do other things like convert Scene7 Image Urls to DM Open API Urls.
4) The migrated page will not be perfect wrt. styling (and sometimes content), we have to check it by Uploading to AEM, so invoke the PUT skill. This skill packages it into a JCR ZIP, uploads it to AEM Dev, waits for installation, then Publishes the page...
a. In your Claude Code Extension enter eg. PUT https://eaem-in--dev-eaem-in--eaem.aem.live/contactus
b. It executes the necessary script to connect to AEM, install the package, publish page (using a local user claude-migration-user:claude-migration-user)
Step 5 - Creating & Developing Block Index, Section Index
1) After fixing the Migrated Page in Universal Editor, invoke the GET skill to get the Latest .content.xml from AEM
2) At this point we have a 100% Migrated Page which can be used a Content Xml Source for Other Page Migrations and more importantly create a Block Index. Issue the following prompt to create the index...
Check the content xmls of all pages under C:\dev\projects\eaem\playground\eaem-in-wip, create a 3 column csv of "aueComponentId", "page" and "content xml". One row in the csv has info of which page and content xml to look for block xml element. Find pages which are rich in content when creating the csv
3) Executing the above prompt gives us a block-page-index.csv. This index is frequently updated when a page with some new blocks types is migrated. So Claude knows where to Pick a Block specific content xml element while Assembling Migrated Page..
4) Blocks are atomic on a page and Sections created with Blocks repeat on different pages (Styling and structure of Sections remains almost same with Content being different). So we create a Section Index that helps migrating pages with similar sections, although positioning could be different. Here is the Prompt to create a Section Index
from "C:\dev\projects\eaem\tools\content-xmls\well-being-in-the-workplace\.content.xml" can you get the element "grid_container_6" and write prompt (first column) in "C:\dev\projects\eaem\content-xmls\section-layouts.csv" (load it from file system first)
5) So Claude creates the following Prompt Token for a Section. It basically says use a Grid Container Section with 6 columns for left (image), 1 column for spacer in middle, 5 columns for the right (title, text and cta).
6-1-5-left-image-right-custom-title-h3-text-container-cta-default-bg-f1f3ff-light-lavender-content-wide
6) When Claude encounters a prompt with above token it refers to section-layouts.csv, picks the necessary content xml element and migrates content into that xml element while assembling migrated page...
1) So after Migrating few Pages you now have a Rich Block Index & Section Index. Now lets migrate a complex page using the following prompt (it has both natural language and section layout tokens to refer to, in the index)
migrate page https://www.eaem.in/ using https://eaem-in--dev-eaem-in--eaem.aem.live/join-us, since its the home page, name the page "index" and place it under "in/en"
below hero-container, "Recognition" "products" "JOIN US" are 3 blocks of type fact-card
for section "Science & Innovation", use teaser block
for section "Our science: First, faster, and for patients", 6-3-3 grid container; left: inner-grid with custom-image to left, eyebrow-text custom-title cta to right; middle : fact-card; right: fact-card
for section "People. Passion" its a "quote" block with "Animation" variation
for section "a culture of curiosity", use teaser block
for section "We are recognized on a number of", 4-4-4 grid container, each with custom-image followed by text-container
for section "Explore opportunities" use 10-2-left-custom-title-h3-h4size-text-container-right-cta-default-bg-0066f5-blue-medium-radius-content-regular
for section "Aligning our work with our Principles" use 6-1-5-left-eyebrow-pretitle-image-right-custom-title-h5-text-container-bg-light-gray (no eyebrow in left, add cta in right)
for section "ENVIRONMENTAL, SOCIAL AND GOVERNANCE", use teaser block
for section "Environmental Stewardship" use 1-3-8-spacer-fact-card-inner-grid-cols-6-6-eyebrow-content-wide-large-radius-height-tall-bg-image (but 3-3-6 grid container, left: fact-card, middle: eyebrow-text, custom-title, cta; right: 6-6 inner-grid with eyebrow and custom-title on left and linklist on right)
2) You spend about 5-10 minutes to write the prompt, Claude takes about 5-10 minutes to extract content from live page, refer to index tables, assemble the migrated page, package, upload, install, publish in AEM. With a Detailed Prompt and Real Content Xmls to refer to, it gets the migrated page on EDS sometimes close to 90-95% of live source page (in terms of content and styling).
3) Once the Page Package is installed in AEM using PUT skill, you do the rest 5-10% by adjusting the Page Manually in Universal Editor
Step 7 - Additional Useful Skills
1) SCREENSHOT Skill - When you execute this skill, Claude takes a screenshot of the migrated page in Desktop, Tablet, Mobile views. eg. SCREENSHOT https://eaem-in--dev-eaem-in--eaem.aem.live/
2) LAST-MODIFIED-BY Skill - Skill to get the last modified pages grouped by author under a particular root eg. LAST-MODIFIED-BY https://eaem-in--dev-eaem-in--eaem.aem.live/
3) PREPARE-PACKAGE-FOR-QA Skill - Make necessary changes in content xmls to make the pages appropriate for QA eg. PREPARE-PACKAGE-FOR-QA https://eaem-in--dev-eaem-in--eaem.aem.live/
No comments:
Post a Comment