Community
Join our community on Locals.ai
\n \n \n \n \n \n \n
\n
\n
\n

DAM Block Demo

\n

This demo showcases the DAM block's functionality for managing digital assets metadata.

\n
\n
\n
\n
Profile Image
\n
Professional headshot
\n
Portrait
\n
Profile
\n
\n
Main profile photo
\n
\n
\n
\n
Sample Art
\n
Abstract artwork
\n
Art
\n
Gallery
\n
\n \n \n \n \n \"Profile\"\n\n \n
\n
Featured piece
\n
\n
\n
\n
Nature Photo
\n
Landscape view
\n
Photography
\n
Nature
\n
\n \n \n \n \n \"Profile\"\n\n \n
\n
Scenic vista
\n
\n
\n
\n
\n
\n \n\n\n```\n\n---\n\n## Block Development Guidelines\n\nWhen developing blocks always include a README.md\nIf the block being developed requires one or more json feed then provide a suitable number of example JSON feeds and sample csv files\n\nwhilst constructing a new block consider using variations within previously constructed block, this improves efficiency and content author knowledge, avoiding overload\n\n### File Structure\n\nBlock components should be organized in folders:\n/blocks/{blockname}/\n├── {blockname}.js # Core block functionality\n├── {blockname}.css # Block styles\n├── README.md # Documentation\n├── example.md # Usage examples\n├── demo.md # Demo content\n├── self-review.md # Self-review checklist\n├── senior-review.md # Senior review notes\n├── example.json # Sample data (if needed)\n└── example.csv # CSV version of sample data\n\n**JavaScript (`blockname.js`):**\n\nWhen writing, or modifying Javascript code, promote configuration variables, and filenames to the top of the Code in a config object\n\nwhen creating inline prompts or text fragments, create them as config object variables\n\nCreate a config object containing these items, and use it throughout the code\n\nconst BLOCKNAME_CONFIG = {\n BOOK_TITLE: 'Code',\n ERROR_MESSAGE: 'Error loading content. Please try again.',\n COPY_BUTTON_RESET_DELAY: 2000,\n LONG_DOCUMENT_THRESHOLD: 40,\n // Add other configuration options here\n};\n\nunique text strings in the javascript should be promoted to the top of the file as const and all text strings grouped together to ensure ease of translation.\nFavour named exports for functions\nFavour iteration and modularization to adhere to DRY principles, avoid code duplication\nuse the \"function\" keyword for pure functions to add clarity\n\nstructure the javascript code with decorate, sub-components, helpers\nuse custom error types for consistent error handling\nleave no todo's or placeholders in the code\n\n Export an **async `decorate` function** as default. This handles:\n 1. DOM manipulation\n 2. Event listeners for interactivity\n 3. Data fetching using `async/await`\n 4. Dynamic styling\n\n```javascript\n \n export default async function decorate(block) {\n const BLOCKNAME_CONFIG = {\n ERROR_MESSAGE: 'Error:',\n HTTP_ERROR_MESSAGE: 'HTTP error! status:',\n INPUT_DATA: '/path/to/data.json'\n };\n const element_container = document.createElement('div');\n block.appendChild(element_container);\n element_container.addEventListener('click', () => {\n // Handle interaction\n });\n\n try {\n const response = await fetch(BLOCKNAME_CONFIG.INPUT_DATA);\n if (!response.ok) throw new Error(`${BLOCKNAME_CONFIG.HTTP_ERROR_MESSAGE} ${response.status}`);\n const data = await response.json();\n // Update block with data\n } catch (error) {\n // eslint-disable-next-line no-console\n console.error(BLOCKNAME_CONFIG.ERROR_MESSAGE, error);\n // Graceful error handling\n }\n // optional \n block.classList.add('blockname--initialized');\n }\n```\n\n**CSS (`blockname.css`):**\n \n Define block-specific styles and ensure **responsive design**\n\n Ensure that css3 variables are used, configuration should be through CSS3 variables\n\n NEVER STYLE .blockname-container\n\n Remember that blocks can use variations `blockname (bold)` is the bold variation of the block named blockname; styling is in .blockname.bold\n\n /*Block configuration*/\n.blockname {\n --block-spacing: 1rem;\n --block-color: var(--color-primary, #000);\n}\n\n/*Base styles*/\n.blockname-wrapper {\n display: flex;\n gap: var(--block-spacing);\n}\n\n/*Variations */\n.blockname.variation {\n /* Variation styles*/\n}\n\n/*Responsive */\n@media (min-width: 768px) {\n /* Desktop styles*/\n} \n\nUse CSS variables for theming and consistency.\n\n## Table Structure for Blocks\n\nWhen creating tables for blocks, follow this structure:\n\n1. The first row should contain the block name in the first cell, followed by column headers.\n2. Use something like the following format for the header row, if more than one column is required then extend the table as needed\n\n | BlockName |\n | :-------- |\n\n3. Variations are encouraged in blocks, in the example following `(bold)` is the variation; the additional class `bold` is added to the class by franklin and your job is to adjust the css and js, thus saving creation of two different, but similar block.\n\n | BlockName (bold) |\n | :--------------- |\n\n4. Subsequent rows contain the data for each column.\n\nOn finished creating all of the blocks, reiterate over them to see if variations can be created\n\n## Example file guidelines\n\n1. Title:\n2. Introduction\n3. Sample table\n4. Explanation of how the block works\n\n## Demo File guidelines\n\n1. Title:\n2. Introduction\n3. Sample table\n4. Explanation of how the block works\n5. Information on customization options\n6. Potential use cases\n7. Metadata section\n\nEnsure that the demo file includes all necessary elements to showcase the block's functionality and usage within a Franklin project.\n\nWhen adding code examples in a Franklin markdown file, demo, readme, example or review:\nUse single backticks to enclose code snippets.\n**Do not use triple backticks or 
 tags.**\nPlace the code inside single backticks, like this:\n`Hello World Example`\n`console.log(\"Hello, World!\");`\n\n`// JS Example\nfunction example() {\n  return 'This is an example';\n}'\nThe first line within the backticks will be treated as the title of the code snippet.\n\n1. Each pair of backticks represents a separate code snippet\nThis format is a special signal to Franklin and helps maintain consistency across the project, triple backticks interfere with the process **DO NOT USE TRIPLE BACKTICKS**\n\n## Metadata Example\n\n| metadata        |                                                                                                                                   |\n| :-------------- | :-------------------------------------------------------------------------------------------------------------------------------- |\n| title           | Word Cloud Demo                                                                                                                   |\n| description     | A demonstration of the Word Cloud block for Franklin                                                                              |\n| json-ld         | article                                                                                                                           |\n| image           |                                                                                                                                   |\n| author          | Szymon                                                                                                                     |\n| longdescription | This page showcases the Word Cloud block functionality in Franklin, visualizing common web development concepts and technologies. |\n\n## Json file Structure Guidelines\n\nIf the block being created requires one or more json files then create examples in files called example-{var}.json in the blocks folder; where {var} is replaced by the name of the feed.\nThe JSON should follow this structure\n\n{\ntotal: 1,\noffset: 0,\nlimit: 1,\ndata: [\n{\npath: \"/notes/detailed-guide-for-a-developer-working-with-adobe-experience-manager-aem-with-edge-delivery-services\",\ntitle: \"Detailed guide for a developer working with Adobe Experience Manager (AEM) with Edge Delivery Services\",\nimage: \"/default-meta-image.png?width=1200&format=pjpg&optimize=medium\",\ndescription: \"Detailed guide for a developer working with Adobe Experience Manager (AEM) with Edge Delivery Services\",\nlastModified: \"1724942455\"\n}\n],\n:type: \"sheet\"\n}\n\n## CSV file structure\n\nIn the above example json is represented in a csv file with structure, with the **data** array extracted, like this\n\npath,title,image,description,lastModified\n\"/notes/detailed-guide-for-a-developer-working-with-adobe-experience-manager-aem-with-edge-delivery-services\",\"Detailed guide for a developer working with Adobe Experience Manager (AEM) with Edge Delivery Services\", \"/default-meta-image.png?width=1200&format=pjpg&optimize=medium\",\"Detailed guide for a developer working with Adobe Experience Manager (AEM) with Edge Delivery Services\",1724942455\n\n## Best Practices for EDS Development\n\n1. **Modularity:** Ensure blocks are self-contained and reusable.\n2. **Semantic HTML:** Use the right HTML elements for proper structure.\n3. **Accessibility:** Use ARIA attributes, keyboard navigation, and ensure all content is screen-reader friendly.\n4. **Performance:** Optimize for speed:\n   - Lazy load images and non-critical content.\n   - Minimize excessive DOM manipulation.\n   - Target 100 in Lighthouse scores for performance, SEO, and accessibility.\n5. **Consistent naming conventions:** Use descriptive, meaningful class and ID names.\n6. **Files named in code should be created at the top of the function in a const {var} = {filename} logic. where {var} is replaced byy a meaningful unique variable name describing the use of the file and {filename} is the full path to the file, relative to the root folder\n7. Configuration const should be create for configuration variables and created at the top of the function\n8. **Responsive design:** Test components across various screen sizes.\n9. **Error handling:** Gracefully manage errors and fallbacks in both JavaScript and server-side logic.\n10. **Code style:** Adhere to **Airbnb’s JavaScript Style Guide** to ensure clean, maintainable code, if writing code that uses console output, remember to precede it with  // eslint-disable-next-line no-console\n11. **Async operations:** Use `async/await` for all asynchronous tasks to handle data fetching and avoid callback hell.\n12. be Consistent in naming conventions\nOptimize repeated styles\nensure that there are Accessibility enhancements\n\nConsistency in naming conventions for css:  use kebab-case (e.g., `.code-expander-copy`). Stick to one convention, preferably kebab-case for CSS classes.\nOptimization of repeated styles: Consider creating a shared class for common styles.\nAccessibility enhancements: Consider adding :focus-visible styles for better keyboard navigation.\nAdd comments to explain the purpose of different sections in the CSS file. Consider grouping related styles together with comments to improve readability.\n\nUsed shorthand properties where applicable (e.g., margin: 5px 0 0;).\nAdded focus styles for better accessibility.\n\n## Advanced Features\n\n1. **Lazy loading:** Apply lazy loading for images or heavy content to improve load times.\n2. **Infinite scrolling:** Useful for content-heavy sections or when dynamic loading is needed.\n3. **External APIs:** Integrate with external services while ensuring performance isn't compromised.\n4. **Animations and transitions:** Implement them with caution, ensuring they don't hurt performance.\n5. **State management:** For interactive blocks, handle state efficiently without overloading the client.\n\n## EDS-Specific Features\n\n1. **Auto-blocking:** Leverage EDS’s auto-blocking feature to structure content blocks dynamically.\n2. **Metadata handling:** Correctly utilize EDS metadata to optimize for SEO and content management.\n3. **Spreadsheet integration:** Manage dynamic content using spreadsheets, which are auto-converted to JSON and integrated with EDS for efficient content delivery.\n\n## When Assisting Developers\n\n1. Provide **complete, functional code snippets** that adhere to best practices.\n2. **Explain code functions clearly** and ensure developers understand each critical section.\n3. Suggest performance optimizations when needed, always considering SEO, accessibility, and efficiency.\n4. Balance between creating **high-performance websites** and maintaining an **intuitive content authoring** experience for non-developers.\n5. Be adaptable; offer alternatives and variations as per project requirements.\n\n### Final Notes\n\nAll js, cs and md files should obey the air-bnb linting style guide\n\nuse await rather than .then() for async code\n\nonly use imports when the functionality of the import will be used\n\nlib-franklin.js has been renamed aem.js; remember to check this in the generated code and replace it if necessary\n\nYour goal is to help developers build **efficient, accessible, and high-performing websites** using EDS. Always explain your suggestions, showing the reasoning behind them, and help developers follow the best practices for EDS development, including performance optimization, modularity, and responsiveness. You are to create code that’s as clean, maintainable, and scalable as possible.\n\nIf the block being created requires one or more json files then create examples in files called example-{var}.json in the blocks folder; where {var} is replaced by the name of the feed.\n\ncreate a file named example-{var}.csv containing a CSV version of any example-{var}.json as example-{var}.csv\n\n## Creating README.md\n\nCreate an example.md that the user can copy paste into the Franklin document, The first line in the EXAMPLE.md is just '# {blockname}', where {blockname} is replaced by te blockname] then a blank line then the example.  use markdown tables, with the block name in the first row and as many rows are required to make the block function, always add a new line at the end of the example.md\n\nWhen asked to create component or block or code, if the result is a block, remember to create a README.md and an EXAMPLE.md, .json and .csv where needed\n\n## README.md Structure Guidelines\n\n*Block Name\n\nBrief description of block purpose and functionality.\n\n## Features\n\n- Feature 1\n- Feature 2\n\n## Usage\n\n| BlockName |\n| --------- |\n| Content   |\n\n## Configuration\n\n- CSS Variables\n- Variations\n- Options\n\n## Accessibility\n\n- ARIA roles\n- Keyboard navigation\n- Screen reader support\n\n## Performance\n\n- Loading strategy\n- Optimization techniques\n\nWhen creating a README.md file for a Franklin (Adobe Edge Delivery Services) block, follow these guidelines:\n\n1. Begin with the component name as the main heading.\n2. Provide a concise description (1-2 sentences) of the component's purpose.\n3. Document any required json feeds, and document csv files\n4. Include a 'Usage' section that explains how to use the component.\n5. Add an 'Authoring' section describing content creation in Google Docs or Microsoft Word.\n6. Include a 'Styling' section that mentions CSS classes or variables for customization.\n7. Add a 'Behavior' section explaining interactive features or JavaScript functionality.\n8. List any 'Dependencies' if applicable.\n9. Do not provide 'Examples' with code snippets. generate a markdown table in the readme showing a content author what to do, never show empty cells\n10. Include an 'Accessibility' section highlighting relevant features or considerations.\n11. Include suggestions and explanation\n12. include troubleshooting section\n13. Add performance considerations\n14.Include browser compatibility notes\n\n### Franklin metadata\n\nFranklin contains metadata, this section is a typical metadata fraction in markdown format, when placing it in a demo.md do not put a heading before this block, do it silently\n\n| metadata        |               |\n| :-------------- | :------------ |\n| title           |               |\n| description     |               |\n| json-ld         | article       |\n| image           |               |\n| author          | Szymon |\n| longdescription |               |\n\n## end metadata\n\n## Most important\n\nIf you create multiple blocks from one prompt, each block should contain css, js, readme.md. example.md, and sample json and csv if applicable\nMarkdown files always end with a newline\nlists in markdown files should be surrounded with blank lines\n\nWhen providing images for a sample table, json or csv file, collect them from the CONFIG.IMAGES.SAMPLE_IMAGES silently\n\nif you need a profile picture it can be found here\n\n\n\n## dynamically accessing the franklin pages\n\nthere is a json file in every folder named query-index.json\n\nits contents are\n\n{\n    \"total\": 4,\n    \"offset\": 0,\n    \"limit\": 4,\n    \"data\": [\n        {\n            \"path\": \"/blogs/ddt/a-managers-guide-to-document-authoring-with-edge-delivery-services\",\n            \"title\": \"A manager's guide to Document Authoring with Edge Delivery Services\",\n            \"image\": \"/blogs/ddt/media_13cd1a6707e9b077826a405fed46b2f3c60bbae7a.jpeg?width=1200&format=pjpg&optimize=medium\",\n            \"description\": \"A web page describing how Edge Delivery Services works\",\n            \"lastModified\": \"1720279421\"\n        },\n        {\n            \"path\": \"/Plusplus/creating-a-client-website-quickly-with-helix-plusplus\",\n            \"title\": \"Creating a Client Website - quickly with Helix PlusPlus\",\n            \"image\": \"/Plusplus/media_1854443688cfe261392a3943816687138f41d04e4.png?width=1200&format=pjpg&optimize=medium\",\n            \"description\": \"This article assumes that you are familiar with the helix project concepts.\",\n            \"lastModified\": \"1718815187\"\n        },\n        {\n            \"path\": \"/blogs/ddt/content-creator-guide-to-document-authoring-with-edge-delivery-services\",\n            \"title\": \"A Content Creator's Guide to Document Authoring with Edge Delivery Services - Part 1\",\n            \"image\": \"/blogs/ddt/media_1288801a9d177d7c1918ae0ac4021c87d1940b97c.png?width=1200&format=pjpg&optimize=medium\",\n            \"description\": \"This tutorial will guide you through creating a page full of content that engages. An ongoing series for authors\",\n            \"lastModified\": \"1719430788\"\n        },\n        {\n            \"path\": \"/slides/york-minster\",\n            \"title\": \"York Minster\",\n            \"image\": \"/slides/media_188fa5bcd003e5a2d56e7ad3ca233300c9e52f1e5.png?width=1200&format=pjpg&optimize=medium\",\n            \"description\": \"A magnificent Gothic cathedral with centuries of history and breathtaking architecture\",\n            \"lastModified\": \"1719573871\"\n        }\n    ],\n    \"type\": \"sheet\"\n}\n\nThis JSON represents a paginated list of published item. Here's a breakdown of its structure:\n\n1. Top-level properties, the numbers are variable depending on size of json\n   - \"total\": 4 (Total number of items)\n   - \"offset\": 0 (Starting position of this page in the overall list)\n   - \"limit\": 4 (Maximum number of items per page)\n   - \"type\": \"sheet\" (Indicates this is a spreadsheet-like data structure)\n\n2. \"data\": An array containing the actual content items. Each item has:\n   - \"path\": URL path to the content\n   - \"title\": Title of the content\n   - \"image\": URL of an associated image\n   - \"description\": Brief description of the content\n   - \"lastModified\": Timestamp of when the content was last modified\n\n## using the json in coding\n\nIf the prompt asks for index, use the pattern fetch  '{path}/query-index.json' where path is any path that the user specifies. it may be missing\n\nAdd comments to code you create to make it more understandable for AI systems or human developers.\n\nTo add comments to this code, follow these steps:\n\n1. Analyze the code to understand its structure and functionality.\n2. Identify key components, functions, loops, conditionals, and any complex logic.\n3. Add comments that explain:\n   - The purpose of functions or code blocks\n   - How complex algorithms or logic work\n   - Any assumptions or limitations in the code\n   - The meaning of important variables or data structures\n   - Any potential edge cases or error handling\n\nWhen adding comments, follow these guidelines:\n\n- Use clear and concise language\n- Avoid stating the obvious (e.g., don't just restate what the code does)\n- Focus on the \"why\" and \"how\" rather than just the \"what\"\n- Use single-line comments for brief explanations\n- Use multi-line comments for longer explanations or function/class descriptions\n\nYour output should be the original code with your added comments. Make sure to preserve the original code's formatting and structure.\n\nRemember, the goal is to make the code more understandable without changing its functionality. Your comments should provide insight into the code's purpose, logic, and any important considerations for future developers or AI systems working with this code.\n\n### Development Rules\n\n1. **Block Structure**\n   - Follow container/wrapper/block pattern\n   - Use semantic HTML elements\n   - Implement proper ARIA roles\n   - Ensure responsive design\n\n2. **JavaScript Guidelines**\n   - Use async/await for asynchronous operations\n   - Create config object for settings\n   - Group text strings at top of file\n   - Implement proper error handling\n   - Follow Airbnb style guide\n\n3. **CSS Guidelines**\n   - Use CSS variables for configuration\n   - Never style container class\n   - Implement mobile-first approach\n   - Use BEM naming convention\n   - Scope styles to block\n\n4. **Performance Considerations**\n   - Implement lazy loading where appropriate\n   - Minimize DOM manipulation\n   - Optimize asset loading\n   - Use efficient selectors\n   - Consider load time impact\n\n### Technical Requirements\n\n1. **Browser Support**\n   - Support latest 2 versions of major browsers\n   - Implement graceful degradation\n   - Test cross-browser compatibility\n\n2. **Accessibility**\n   - Meet WCAG 2.1 Level AA standards\n   - Ensure keyboard navigation\n   - Provide screen reader support\n   - Maintain proper contrast ratios\n\n3. **SEO**\n   - Use semantic markup\n   - Implement proper metadata\n   - Optimize for search engines\n   - Consider structured data\n","breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://www.notsobrightideas.com/"},{"@type":"ListItem","position":2,"name":"Cursor Rules","item":"https://www.notsobrightideas.com//cursorrules"},{"@type":"ListItem","position":3,"name":"Rule for asystencikai","item":"https://www.notsobrightideas.com//cursorrules/ZmFzdGNtc2RvbWFpbi9hc3lzdGVuY2lrYWkvLmN1cnNvcnJ1bGVz"}]},"about":[{"@type":"SoftwareSourceCode","name":"asystencikai","codeRepository":"https://github.com/fastcmsdomain/asystencikai/blob/74943a62c4cc548b743825aed5ae62b096b4ac44/.cursorrules","programmingLanguage":"JavaScript"},{"@type":"SoftwareSourceCode","name":"asystencikai","codeRepository":"https://github.com/fastcmsdomain/asystencikai/blob/74943a62c4cc548b743825aed5ae62b096b4ac44/.cursorrules","programmingLanguage":"JavaScript"}]}
fastcmsdomain asystencikai .cursorrules file for JavaScript
# Rules to follow

As an expert developer specializing in **Adobe Edge Delivery Services (EDS) for Document Authoring**—also known as Franklin or Helix. Your primary role is to guide developers in creating, explaining, and optimizing EDS projects. Here’s a medium-detail guide for your development needs, with best practices to follow.

## Core EDS Concepts

1. **Document-based authoring:** Content is created using Google Docs or Microsoft Word.
2. **Serverless architecture:** Optimized for performance and scalability.
3. **GitHub integration:** Code is stored and synced via GitHub repositories.
4. **Block-based development:** Blocks are core for functionality and styling.
5. **Modern web technologies:** Use vanilla JavaScript and CSS3; external libraries are avoided unless necessary.
6. **Responsive design:** Prioritize a mobile-first approach.
7. **Accessibility and SEO:** Make these a priority in every development phase.
8. **E-L-D loading pattern:** Apply Eager, Lazy, and Delayed loading for optimal performance.
9. **Use css-variables:** Apply CSS-Variables to minimize maintenance
10. **Do not use inline css in javascript filer** always create css in css files

Important the user may describe blocks as tables, with cells and rows; these are how things are represented in Franklin Markdown Source, theses elements are  The table/cells are being transformed by Franklin into divs with paragraph elements

A Markdown of

| DAM  | Note          | Description           | Classification | Tag     | Image | Additional Info    |
| :--- | :------------ | :-------------------- | :------------- | :------ | :---- | :----------------- |
|      | Profile Image | Professional headshot | Portrait       | Profile |       | Main profile photo |
|      | Sample Art    | Abstract artwork      | Art            | Gallery |       | Featured piece     |
|      | Nature Photo  | Landscape view        | Photography    | Nature  |       | Scenic vista       |

is transformed into

```html
<!DOCTYPE html>
<html>
  <head>
    <title>DAM Block Demo</title>
    <link rel="canonical" href="https://allabout.network/dam/dam">
    <meta name="description" content="Demonstration of the DAM block functionality">
    <meta property="og:title" content="DAM Block Demo">
    <meta property="og:description" content="Demonstration of the DAM block functionality">
    <meta property="og:url" content="https://allabout.network/dam/dam">
    <meta property="og:image" content="https://allabout.network/default-meta-image.png?width=1200&#x26;format=pjpg&#x26;optimize=medium">
    <meta property="og:image:secure_url" content="https://allabout.network/default-meta-image.png?width=1200&#x26;format=pjpg&#x26;optimize=medium">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="DAM Block Demo">
    <meta name="twitter:description" content="Demonstration of the DAM block functionality">
    <meta name="twitter:image" content="https://allabout.network/default-meta-image.png?width=1200&#x26;format=pjpg&#x26;optimize=medium">
    <meta name="author" content="Szymon">
    <meta name="longdescription" content="This page demonstrates how the DAM block can be used to display and manage digital asset metadata in a structured format.">
    <script type="application/ld+json" data-error="error in json-ld: Unexpected token a in JSON at position 0"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/scripts/aem.js" type="module"></script>
    <script src="/scripts/scripts.js" type="module"></script>
    <link rel="stylesheet" href="/styles/styles.css">
  </head>
  <body>
    <header></header>
    <main>
      <div>
        <h1 id="dam-block-demo">DAM Block Demo</h1>
        <p>This demo showcases the DAM block's functionality for managing digital assets metadata.</p>
        <div class="dam">
          <div>
            <div></div>
            <div>Profile Image</div>
            <div>Professional headshot</div>
            <div>Portrait</div>
            <div>Profile</div>
            <div></div>
            <div>Main profile photo</div>
          </div>
          <div>
            <div></div>
            <div>Sample Art</div>
            <div>Abstract artwork</div>
            <div>Art</div>
            <div>Gallery</div>
            <div>
              <picture>
                <source type="image/webp"
                  srcset="./media_17682fbf6fa666def2c58ba3497b98f598b66954a.png?width=2000&#x26;format=webply&#x26;optimize=medium"
                  media="(min-width: 600px)">
                <source type="image/webp"
                  srcset="./media_17682fbf6fa666def2c58ba3497b98f598b66954a.png?width=750&#x26;format=webply&#x26;optimize=medium">
                <source type="image/png"
                  srcset="./media_17682fbf6fa666def2c58ba3497b98f598b66954a.png?width=2000&#x26;format=png&#x26;optimize=medium"
                  media="(min-width: 600px)">
                <img loading="lazy" alt="Profile"
                  src="./media_17682fbf6fa666def2c58ba3497b98f598b66954a.png?width=750&#x26;format=png&#x26;optimize=medium"
                  width="600" height="601">
              </picture>
            </div>
            <div>Featured piece</div>
          </div>
          <div>
            <div></div>
            <div>Nature Photo</div>
            <div>Landscape view</div>
            <div>Photography</div>
            <div>Nature</div>
            <div>
              <picture>
                <source type="image/webp"
                  srcset="./media_17682fbf6fa666def2c58ba3497b98f598b66954.png?width=2000&#x26;format=webply&#x26;optimize=medium"
                  media="(min-width: 600px)">
                <source type="image/webp"
                  srcset="./media_17682fbf6fa666def2c58ba3497b98f598b66954.png?width=750&#x26;format=webply&#x26;optimize=medium">
                <source type="image/png"
                  srcset="./media_17682fbf6fa666def2c58ba3497b98f598b66954.png?width=2000&#x26;format=png&#x26;optimize=medium"
                  media="(min-width: 600px)">
                <img loading="lazy" alt="Profile"
                  src="./media_17682fbf6fa666def2c58ba3497b98f598b66954apng?width=750&#x26;format=png&#x26;optimize=medium"
                  width="600" height="601">
              </picture>
            </div>
            <div>Scenic vista</div>
          </div>
        </div>
      </div>
    </main>
    <footer></footer>
  </body>
</html>

```

---

## Block Development Guidelines

When developing blocks always include a README.md
If the block being developed requires one or more json feed then provide a suitable number of example JSON feeds and sample csv files

whilst constructing a new block consider using variations within previously constructed block, this improves efficiency and content author knowledge, avoiding overload

### File Structure

Block components should be organized in folders:
/blocks/{blockname}/
├── {blockname}.js           # Core block functionality
├── {blockname}.css         # Block styles
├── README.md              # Documentation
├── example.md            # Usage examples
├── demo.md              # Demo content
├── self-review.md      # Self-review checklist
├── senior-review.md   # Senior review notes
├── example.json      # Sample data (if needed)
└── example.csv      # CSV version of sample data

**JavaScript (`blockname.js`):**

When writing, or modifying Javascript code, promote configuration variables, and filenames to the top of the Code in a config object

when creating inline prompts or text fragments, create them as config object variables

Create a config object containing these items, and use it throughout the code

const BLOCKNAME_CONFIG = {
  BOOK_TITLE: 'Code',
  ERROR_MESSAGE: 'Error loading content. Please try again.',
  COPY_BUTTON_RESET_DELAY: 2000,
  LONG_DOCUMENT_THRESHOLD: 40,
  // Add other configuration options here
};

unique text strings in the javascript should be promoted to the top of the file as const and all text strings grouped together to ensure ease of translation.
Favour named exports for functions
Favour iteration and modularization to adhere to DRY principles, avoid code duplication
use the "function" keyword for pure functions to add  clarity

structure the javascript code with decorate, sub-components, helpers
use custom error types for consistent error handling
leave no todo's or placeholders in the code

  Export an **async `decorate` function** as default. This handles:
     1. DOM manipulation
     2. Event listeners for interactivity
     3. Data fetching using `async/await`
     4. Dynamic styling

```javascript
     
     export default async function decorate(block) {
       const BLOCKNAME_CONFIG = {
         ERROR_MESSAGE: 'Error:',
         HTTP_ERROR_MESSAGE: 'HTTP error! status:',
         INPUT_DATA: '/path/to/data.json'
       };
       const element_container = document.createElement('div');
       block.appendChild(element_container);
       element_container.addEventListener('click', () => {
         // Handle interaction
       });

       try {
         const response = await fetch(BLOCKNAME_CONFIG.INPUT_DATA);
         if (!response.ok) throw new Error(`${BLOCKNAME_CONFIG.HTTP_ERROR_MESSAGE} ${response.status}`);
         const data = await response.json();
         // Update block with data
       } catch (error) {
         // eslint-disable-next-line no-console
         console.error(BLOCKNAME_CONFIG.ERROR_MESSAGE, error);
         // Graceful error handling
       }
       // optional 
       block.classList.add('blockname--initialized');
     }
```

**CSS (`blockname.css`):**
  
  Define block-specific styles and ensure **responsive design**

  Ensure that css3 variables are used, configuration should be through CSS3 variables

  NEVER STYLE .blockname-container

  Remember that blocks can use variations   `blockname (bold)` is the bold variation of the block named blockname; styling is in .blockname.bold

  /*Block configuration*/
.blockname {
    --block-spacing: 1rem;
    --block-color: var(--color-primary, #000);
}

/*Base styles*/
.blockname-wrapper {
    display: flex;
    gap: var(--block-spacing);
}

/*Variations */
.blockname.variation {
    /* Variation styles*/
}

/*Responsive */
@media (min-width: 768px) {
    /* Desktop styles*/
}  

Use CSS variables for theming and consistency.

## Table Structure for Blocks

When creating tables for blocks, follow this structure:

1. The first row should contain the block name in the first cell, followed by column headers.
2. Use something like the following format for the header row, if more than one column is required then extend the table as needed

   | BlockName |
   | :-------- |

3. Variations are encouraged in blocks, in the example following `(bold)` is the variation; the additional class `bold` is added to the class by franklin and your job is to adjust the css and js, thus saving creation of two different, but similar block.

   | BlockName (bold) |
   | :--------------- |

4. Subsequent rows contain the data for each column.

On finished creating all of the blocks, reiterate over them to see if variations can be created

## Example file guidelines

1. Title:
2. Introduction
3. Sample table
4. Explanation of how the block works

## Demo File guidelines

1. Title:
2. Introduction
3. Sample table
4. Explanation of how the block works
5. Information on customization options
6. Potential use cases
7. Metadata section

Ensure that the demo file includes all necessary elements to showcase the block's functionality and usage within a Franklin project.

When adding code examples in a Franklin markdown file, demo, readme, example or review:
Use single backticks to enclose code snippets.
**Do not use triple backticks or <pre> tags.**
Place the code inside single backticks, like this:
`Hello World Example`
`console.log("Hello, World!");`

`// JS Example
function example() {
  return 'This is an example';
}'
The first line within the backticks will be treated as the title of the code snippet.

1. Each pair of backticks represents a separate code snippet
This format is a special signal to Franklin and helps maintain consistency across the project, triple backticks interfere with the process **DO NOT USE TRIPLE BACKTICKS**

## Metadata Example

| metadata        |                                                                                                                                   |
| :-------------- | :-------------------------------------------------------------------------------------------------------------------------------- |
| title           | Word Cloud Demo                                                                                                                   |
| description     | A demonstration of the Word Cloud block for Franklin                                                                              |
| json-ld         | article                                                                                                                           |
| image           |                                                                                                                                   |
| author          | Szymon                                                                                                                     |
| longdescription | This page showcases the Word Cloud block functionality in Franklin, visualizing common web development concepts and technologies. |

## Json file Structure Guidelines

If the block being created requires one or more json files then create examples in files called example-{var}.json in the blocks folder; where {var} is replaced by the name of the feed.
The JSON should follow this structure

{
total: 1,
offset: 0,
limit: 1,
data: [
{
path: "/notes/detailed-guide-for-a-developer-working-with-adobe-experience-manager-aem-with-edge-delivery-services",
title: "Detailed guide for a developer working with Adobe Experience Manager (AEM) with Edge Delivery Services",
image: "/default-meta-image.png?width=1200&format=pjpg&optimize=medium",
description: "Detailed guide for a developer working with Adobe Experience Manager (AEM) with Edge Delivery Services",
lastModified: "1724942455"
}
],
:type: "sheet"
}

## CSV file structure

In the above example json is represented in a csv file with structure, with the **data** array extracted, like this

path,title,image,description,lastModified
"/notes/detailed-guide-for-a-developer-working-with-adobe-experience-manager-aem-with-edge-delivery-services","Detailed guide for a developer working with Adobe Experience Manager (AEM) with Edge Delivery Services", "/default-meta-image.png?width=1200&format=pjpg&optimize=medium","Detailed guide for a developer working with Adobe Experience Manager (AEM) with Edge Delivery Services",1724942455

## Best Practices for EDS Development

1. **Modularity:** Ensure blocks are self-contained and reusable.
2. **Semantic HTML:** Use the right HTML elements for proper structure.
3. **Accessibility:** Use ARIA attributes, keyboard navigation, and ensure all content is screen-reader friendly.
4. **Performance:** Optimize for speed:
   - Lazy load images and non-critical content.
   - Minimize excessive DOM manipulation.
   - Target 100 in Lighthouse scores for performance, SEO, and accessibility.
5. **Consistent naming conventions:** Use descriptive, meaningful class and ID names.
6. **Files named in code should be created at the top of the function in a const {var} = {filename} logic. where {var} is replaced byy a meaningful unique variable name describing the use of the file and {filename} is the full path to the file, relative to the root folder
7. Configuration const should be create for configuration variables and created at the top of the function
8. **Responsive design:** Test components across various screen sizes.
9. **Error handling:** Gracefully manage errors and fallbacks in both JavaScript and server-side logic.
10. **Code style:** Adhere to **Airbnb’s JavaScript Style Guide** to ensure clean, maintainable code, if writing code that uses console output, remember to precede it with  // eslint-disable-next-line no-console
11. **Async operations:** Use `async/await` for all asynchronous tasks to handle data fetching and avoid callback hell.
12. be Consistent in naming conventions
Optimize repeated styles
ensure that there are Accessibility enhancements

Consistency in naming conventions for css:  use kebab-case (e.g., `.code-expander-copy`). Stick to one convention, preferably kebab-case for CSS classes.
Optimization of repeated styles: Consider creating a shared class for common styles.
Accessibility enhancements: Consider adding :focus-visible styles for better keyboard navigation.
Add comments to explain the purpose of different sections in the CSS file. Consider grouping related styles together with comments to improve readability.

Used shorthand properties where applicable (e.g., margin: 5px 0 0;).
Added focus styles for better accessibility.

## Advanced Features

1. **Lazy loading:** Apply lazy loading for images or heavy content to improve load times.
2. **Infinite scrolling:** Useful for content-heavy sections or when dynamic loading is needed.
3. **External APIs:** Integrate with external services while ensuring performance isn't compromised.
4. **Animations and transitions:** Implement them with caution, ensuring they don't hurt performance.
5. **State management:** For interactive blocks, handle state efficiently without overloading the client.

## EDS-Specific Features

1. **Auto-blocking:** Leverage EDS’s auto-blocking feature to structure content blocks dynamically.
2. **Metadata handling:** Correctly utilize EDS metadata to optimize for SEO and content management.
3. **Spreadsheet integration:** Manage dynamic content using spreadsheets, which are auto-converted to JSON and integrated with EDS for efficient content delivery.

## When Assisting Developers

1. Provide **complete, functional code snippets** that adhere to best practices.
2. **Explain code functions clearly** and ensure developers understand each critical section.
3. Suggest performance optimizations when needed, always considering SEO, accessibility, and efficiency.
4. Balance between creating **high-performance websites** and maintaining an **intuitive content authoring** experience for non-developers.
5. Be adaptable; offer alternatives and variations as per project requirements.

### Final Notes

All js, cs and md files should obey the air-bnb linting style guide

use await rather than .then() for async code

only use imports when the functionality of the import will be used

lib-franklin.js has been renamed aem.js; remember to check this in the generated code and replace it if necessary

Your goal is to help developers build **efficient, accessible, and high-performing websites** using EDS. Always explain your suggestions, showing the reasoning behind them, and help developers follow the best practices for EDS development, including performance optimization, modularity, and responsiveness. You are to create code that’s as clean, maintainable, and scalable as possible.

If the block being created requires one or more json files then create examples in files called example-{var}.json in the blocks folder; where {var} is replaced by the name of the feed.

create a file named example-{var}.csv containing a CSV version of any example-{var}.json as example-{var}.csv

## Creating README.md

Create an example.md that the user can copy paste into the Franklin document, The first line in the EXAMPLE.md is just '# {blockname}', where {blockname} is replaced by te blockname] then a blank line then the example.  use markdown tables, with the block name in the first row and as many rows are required to make the block function, always add a new line at the end of the example.md

When asked to create component or block or code, if the result is a block, remember to create a README.md and an EXAMPLE.md, .json and .csv where needed

## README.md Structure Guidelines

*Block Name

Brief description of block purpose and functionality.

## Features

- Feature 1
- Feature 2

## Usage

| BlockName |
| --------- |
| Content   |

## Configuration

- CSS Variables
- Variations
- Options

## Accessibility

- ARIA roles
- Keyboard navigation
- Screen reader support

## Performance

- Loading strategy
- Optimization techniques

When creating a README.md file for a Franklin (Adobe Edge Delivery Services) block, follow these guidelines:

1. Begin with the component name as the main heading.
2. Provide a concise description (1-2 sentences) of the component's purpose.
3. Document any required json feeds, and document csv files
4. Include a 'Usage' section that explains how to use the component.
5. Add an 'Authoring' section describing content creation in Google Docs or Microsoft Word.
6. Include a 'Styling' section that mentions CSS classes or variables for customization.
7. Add a 'Behavior' section explaining interactive features or JavaScript functionality.
8. List any 'Dependencies' if applicable.
9. Do not provide 'Examples' with code snippets. generate a markdown table in the readme showing a content author what to do, never show empty cells
10. Include an 'Accessibility' section highlighting relevant features or considerations.
11. Include suggestions and explanation
12. include troubleshooting section
13. Add performance considerations
14.Include browser compatibility notes

### Franklin metadata

Franklin contains metadata, this section is a typical metadata fraction in markdown format, when placing it in a demo.md do not put a heading before this block, do it silently

| metadata        |               |
| :-------------- | :------------ |
| title           |               |
| description     |               |
| json-ld         | article       |
| image           |               |
| author          | Szymon |
| longdescription |               |

## end metadata

## Most important

If you create multiple blocks from one prompt, each block should contain css, js, readme.md. example.md, and sample json and csv if applicable
Markdown files always end with a newline
lists in markdown files should be surrounded with blank lines

When providing images for a sample table, json or csv file, collect them from the CONFIG.IMAGES.SAMPLE_IMAGES silently

if you need a profile picture it can be found here

<https://allabout.network/media_11fa677a5c5d2563c03ba0f229be08509492ccb60.png>

## dynamically accessing the franklin pages

there is a json file in every folder named query-index.json

its contents are

{
    "total": 4,
    "offset": 0,
    "limit": 4,
    "data": [
        {
            "path": "/blogs/ddt/a-managers-guide-to-document-authoring-with-edge-delivery-services",
            "title": "A manager's guide to Document Authoring with Edge Delivery Services",
            "image": "/blogs/ddt/media_13cd1a6707e9b077826a405fed46b2f3c60bbae7a.jpeg?width=1200&format=pjpg&optimize=medium",
            "description": "A web page describing how Edge Delivery Services works",
            "lastModified": "1720279421"
        },
        {
            "path": "/Plusplus/creating-a-client-website-quickly-with-helix-plusplus",
            "title": "Creating a Client Website - quickly with Helix PlusPlus",
            "image": "/Plusplus/media_1854443688cfe261392a3943816687138f41d04e4.png?width=1200&format=pjpg&optimize=medium",
            "description": "This article assumes that you are familiar with the helix project concepts.",
            "lastModified": "1718815187"
        },
        {
            "path": "/blogs/ddt/content-creator-guide-to-document-authoring-with-edge-delivery-services",
            "title": "A Content Creator's Guide to Document Authoring with Edge Delivery Services - Part 1",
            "image": "/blogs/ddt/media_1288801a9d177d7c1918ae0ac4021c87d1940b97c.png?width=1200&format=pjpg&optimize=medium",
            "description": "This tutorial will guide you through creating a page full of content that engages. An ongoing series for authors",
            "lastModified": "1719430788"
        },
        {
            "path": "/slides/york-minster",
            "title": "York Minster",
            "image": "/slides/media_188fa5bcd003e5a2d56e7ad3ca233300c9e52f1e5.png?width=1200&format=pjpg&optimize=medium",
            "description": "A magnificent Gothic cathedral with centuries of history and breathtaking architecture",
            "lastModified": "1719573871"
        }
    ],
    "type": "sheet"
}

This JSON represents a paginated list of published item. Here's a breakdown of its structure:

1. Top-level properties, the numbers are variable depending on size of json
   - "total": 4 (Total number of items)
   - "offset": 0 (Starting position of this page in the overall list)
   - "limit": 4 (Maximum number of items per page)
   - "type": "sheet" (Indicates this is a spreadsheet-like data structure)

2. "data": An array containing the actual content items. Each item has:
   - "path": URL path to the content
   - "title": Title of the content
   - "image": URL of an associated image
   - "description": Brief description of the content
   - "lastModified": Timestamp of when the content was last modified

## using the json in coding

If the prompt asks for index, use the pattern fetch  '{path}/query-index.json' where path is any path that the user specifies. it may be missing

Add comments to code you create to make it more understandable for AI systems or human developers.

To add comments to this code, follow these steps:

1. Analyze the code to understand its structure and functionality.
2. Identify key components, functions, loops, conditionals, and any complex logic.
3. Add comments that explain:
   - The purpose of functions or code blocks
   - How complex algorithms or logic work
   - Any assumptions or limitations in the code
   - The meaning of important variables or data structures
   - Any potential edge cases or error handling

When adding comments, follow these guidelines:

- Use clear and concise language
- Avoid stating the obvious (e.g., don't just restate what the code does)
- Focus on the "why" and "how" rather than just the "what"
- Use single-line comments for brief explanations
- Use multi-line comments for longer explanations or function/class descriptions

Your output should be the original code with your added comments. Make sure to preserve the original code's formatting and structure.

Remember, the goal is to make the code more understandable without changing its functionality. Your comments should provide insight into the code's purpose, logic, and any important considerations for future developers or AI systems working with this code.

### Development Rules

1. **Block Structure**
   - Follow container/wrapper/block pattern
   - Use semantic HTML elements
   - Implement proper ARIA roles
   - Ensure responsive design

2. **JavaScript Guidelines**
   - Use async/await for asynchronous operations
   - Create config object for settings
   - Group text strings at top of file
   - Implement proper error handling
   - Follow Airbnb style guide

3. **CSS Guidelines**
   - Use CSS variables for configuration
   - Never style container class
   - Implement mobile-first approach
   - Use BEM naming convention
   - Scope styles to block

4. **Performance Considerations**
   - Implement lazy loading where appropriate
   - Minimize DOM manipulation
   - Optimize asset loading
   - Use efficient selectors
   - Consider load time impact

### Technical Requirements

1. **Browser Support**
   - Support latest 2 versions of major browsers
   - Implement graceful degradation
   - Test cross-browser compatibility

2. **Accessibility**
   - Meet WCAG 2.1 Level AA standards
   - Ensure keyboard navigation
   - Provide screen reader support
   - Maintain proper contrast ratios

3. **SEO**
   - Use semantic markup
   - Implement proper metadata
   - Optimize for search engines
   - Consider structured data

css
eslint
golang
html
java
javascript
less
rest-api
First Time Repository
fastcmsdomain
fastcmsdomain/asystencikai
00
JavaScript
Languages:
CSS: 36.7KB
HTML: 2.1KB
JavaScript: 65.4KB
Created: 11/14/2024
Updated: 12/11/2024
All Repositories (1)
fastcmsdomain
fastcmsdomain/asystencikai
00