diff --git a/adev/BUILD.bazel b/adev/BUILD.bazel index 655e150816f..69b1474ad45 100644 --- a/adev/BUILD.bazel +++ b/adev/BUILD.bazel @@ -43,6 +43,7 @@ APPLICATION_ASSETS = [ "//adev/src/assets/icons", "//adev/src/assets:api", "//adev/src/assets:content", + "//adev/src/assets:context", ] APPLICATION_DEPS = [ diff --git a/adev/shared-docs/pipeline/guides/extensions/docs-code/docs-code.mts b/adev/shared-docs/pipeline/guides/extensions/docs-code/docs-code.mts index 29b045794f7..71c4d626276 100644 --- a/adev/shared-docs/pipeline/guides/extensions/docs-code/docs-code.mts +++ b/adev/shared-docs/pipeline/guides/extensions/docs-code/docs-code.mts @@ -22,6 +22,7 @@ const singleFileCodeRule = /^\s*]*)?)*)\s*(?:\/>|>(.*?)<\/docs-code>)/s; const pathRule = /path="([^"]*)"/; +const classRule = /class="([^"]*)"/; const headerRule = /header="([^"]*)"/; const linenumsRule = /linenums/; const highlightRule = /highlight="([^"]*)"/; @@ -51,6 +52,7 @@ export const docsCodeExtension = { const visibleLines = visibleLinesRule.exec(attr); const visibleRegion = visibleRegionRule.exec(attr); const preview = previewRule.exec(attr) ? true : false; + const classes = classRule.exec(attr); let code = match[2]?.trim() ?? ''; if (path && path[1]) { @@ -73,6 +75,7 @@ export const docsCodeExtension = { visibleLines: visibleLines?.[1], visibleRegion: visibleRegion?.[1], preview: preview, + classes: classes?.[1]?.split(' '), }; return token; } diff --git a/adev/shared-docs/pipeline/guides/extensions/docs-code/format/index.mts b/adev/shared-docs/pipeline/guides/extensions/docs-code/format/index.mts index 1344a909a14..f057a4a3f1b 100644 --- a/adev/shared-docs/pipeline/guides/extensions/docs-code/format/index.mts +++ b/adev/shared-docs/pipeline/guides/extensions/docs-code/format/index.mts @@ -39,6 +39,9 @@ export interface CodeToken extends Tokens.Generic { /** The generated diff metadata if created in the code formating process. */ diffMetadata?: DiffMetadata; + + // additional classes for the element + classes?: string[]; } export function formatCode(token: CodeToken) { @@ -95,4 +98,8 @@ function applyContainerAttributesAndClasses(el: Element, token: CodeToken) { if (token.language === 'shell') { el.classList.add('shell'); } + + if (token.classes) { + el.classList.add(...token.classes); + } } diff --git a/adev/shared-docs/styles/docs/_code.scss b/adev/shared-docs/styles/docs/_code.scss index cbc8b69f752..862f2eb3f1c 100644 --- a/adev/shared-docs/styles/docs/_code.scss +++ b/adev/shared-docs/styles/docs/_code.scss @@ -115,6 +115,12 @@ $code-font-size: 0.875rem; font-size: $code-font-size; counter-reset: line; } + + &.compact { + pre { + max-height: 300px; + } + } } // shell doesn't have a header, for commands only diff --git a/adev/src/assets/BUILD.bazel b/adev/src/assets/BUILD.bazel index c9fd1b46228..53783d48d33 100644 --- a/adev/src/assets/BUILD.bazel +++ b/adev/src/assets/BUILD.bazel @@ -122,3 +122,13 @@ copy_to_directory( "**/": "", }, ) + +copy_to_directory( + name = "context", + srcs = [ + "//adev/src/context", + ], + replace_prefixes = { + "**/": "", + }, +) diff --git a/adev/src/content/ai/BUILD.bazel b/adev/src/content/ai/BUILD.bazel index 958cbf37949..566c517217b 100644 --- a/adev/src/content/ai/BUILD.bazel +++ b/adev/src/content/ai/BUILD.bazel @@ -7,6 +7,7 @@ generate_guides( ]), data = [ "//adev/src/assets/images:what_is_angular.svg", + "//adev/src/context", ], visibility = ["//adev:__subpackages__"], ) diff --git a/adev/src/content/ai/develop-with-ai.md b/adev/src/content/ai/develop-with-ai.md index 2a71637a798..01eeb63b672 100644 --- a/adev/src/content/ai/develop-with-ai.md +++ b/adev/src/content/ai/develop-with-ai.md @@ -8,16 +8,20 @@ Improve your experience generating code with LLMs by using one of the following NOTE: These files will be updated on a regular basis staying up to date with Angular's conventions. -* best-practices.md - a set of instructions to help LLMs generate correct code that follows Angular best practices. This file can be included as system instructions to your AI tooling or included along with your prompt as context. +Here is a set of instructions to help LLMs generate correct code that follows Angular best practices. This file can be included as system instructions to your AI tooling or included along with your prompt as context. + + + +Click here to download the best-practices.md file. ## Rules Files Several editors, such as Firebase Studio have rules files useful for providing critical context to LLMs. | Environment/IDE | Rules File | Installation Instructions | |:----------------|:----------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------| -| Firebase Studio | airules.md | Configure `airules.md` | -| Cursor | cursor.md | Configure `cursorrules.md` | -| JetBrains IDEs | guidelines.md | Configure `guidelines.md` | +| Firebase Studio | airules.md | Configure `airules.md` | +| Cursor | cursor.md | Configure `cursorrules.md` | +| JetBrains IDEs | guidelines.md | Configure `guidelines.md` | ## Providing Context with `llms.txt` `llms.txt` is a proposed standard for websites designed to help LLMs better understand and process their content. The Angular team has developed two versions of this file to help LLMs and tools that use LLMs for code generation to create better modern Angular code. diff --git a/adev/src/context/BUILD.bazel b/adev/src/context/BUILD.bazel new file mode 100644 index 00000000000..d784cf58737 --- /dev/null +++ b/adev/src/context/BUILD.bazel @@ -0,0 +1,7 @@ +package(default_visibility = ["//adev:__subpackages__"]) + +filegroup( + name = "context", + srcs = glob(["**"]), + visibility = ["//visibility:public"], +)