skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: embeded best practices in page (#62173) (#62198)

Browse Source 
PR Close #62198
This commit is contained in:
Saujan Ghimire
2025-06-23 00:19:35 +01:00
committed by Jessica Janiuk
parent 23b2730e47
commit 0c2c74c83c
8 changed files with 43 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
adev/BUILD.bazel
+1
View File
@@ -43,6 +43,7 @@ APPLICATION_ASSETS = [
"//adev/src/assets/icons",
"//adev/src/assets:api",
"//adev/src/assets:content",
"//adev/src/assets:context",
]
APPLICATION_DEPS = [
adev/shared-docs/pipeline/guides/extensions/docs-code/docs-code.mts
+3
View File
@@ -22,6 +22,7 @@ const singleFileCodeRule =
/^\s*<docs-code((?:\s+[\w-]+(?:="[^"]*"|='[^']*'|=[^\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;
}
adev/shared-docs/pipeline/guides/extensions/docs-code/format/index.mts
+7
View File
@@ -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);
}
}
adev/shared-docs/styles/docs/_code.scss
+6
View File
@@ -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
adev/src/assets/BUILD.bazel
+10
View File
@@ -122,3 +122,13 @@ copy_to_directory(
"**/": "",
},
)
copy_to_directory(
name = "context",
srcs = [
"//adev/src/context",
],
replace_prefixes = {
"**/": "",
},
)
adev/src/content/ai/BUILD.bazel
+1
View File
@@ -7,6 +7,7 @@ generate_guides(
]),
data = [
"//adev/src/assets/images:what_is_angular.svg",
"//adev/src/context",
],
visibility = ["//adev:__subpackages__"],
)
adev/src/content/ai/develop-with-ai.md
+8 -4
View File
@@ -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.
* <a href="/context/best-practices.md" target="_blank">best-practices.md</a> - 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.
<docs-code language="md" path="adev/src/context/best-practices.md" class="compact"/>
<a download href="/context/best-practices.md" target="_blank">Click here to download the best-practices.md file.</a>
## Rules Files
Several editors, such as <a href="https://studio.firebase.google.com?utm_source=adev&utm_medium=website&utm_campaign=BUILD_WITH_AI_ANGULAR&utm_term=angular_devrel&utm_content=build_with_ai_angular_firebase_studio">Firebase Studio</a> have rules files useful for providing critical context to LLMs.
| Environment/IDE | Rules File | Installation Instructions |
|:----------------|:----------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------|
| Firebase Studio | <a download href="/context/airules.md" target="_blank">airules.md</a> | <a href="https://firebase.google.com/docs/studio/set-up-gemini#custom-instructions">Configure `airules.md`</a> |
| Cursor | <a download href="/context/angular-20.mdc" target="_blank">cursor.md</a> | <a href="https://docs.cursor.com/context/rules" target="_blank">Configure `cursorrules.md`</a> |
| JetBrains IDEs | <a download href="/context/guidelines.md" target="_blank">guidelines.md</a> | <a href="https://www.jetbrains.com/help/junie/customize-guidelines.html" target="_blank">Configure `guidelines.md`</a> |
| Firebase Studio | <a download href="/assets/context/airules.md" target="_blank">airules.md</a> | <a href="https://firebase.google.com/docs/studio/set-up-gemini#custom-instructions">Configure `airules.md`</a> |
| Cursor | <a download href="/assets/context/angular-20.mdc" target="_blank">cursor.md</a> | <a href="https://docs.cursor.com/context/rules" target="_blank">Configure `cursorrules.md`</a> |
| JetBrains IDEs | <a download href="/assets/context/guidelines.md" target="_blank">guidelines.md</a> | <a href="https://www.jetbrains.com/help/junie/customize-guidelines.html" target="_blank">Configure `guidelines.md`</a> |
## 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.
adev/src/context/BUILD.bazel
+7
View File
@@ -0,0 +1,7 @@
package(default_visibility = ["//adev:__subpackages__"])
filegroup(
name = "context",
srcs = glob(["**"]),
visibility = ["//visibility:public"],
)