diff --git a/README.md b/README.md
index 37b25279..73194087 100644
--- a/README.md
+++ b/README.md
@@ -5,10 +5,27 @@
This is the app that serves https://deprecations.emberjs.com/
+## Linking to deprecations
+
+You can link to a specific deprecation by using the ID of the deprecation. For example, to link to the deprecation with the ID `my-old-api`, you can use the following URL:
+`https://deprecations.emberjs.com/id/my-old-api`. These URLs can be generated in advance of adding the deprecation guide, when the deprecation lands in the code.
+When adding a deprecation the filename should match the ID of the deprecation, or the `displayId` should be specified in the frontmatter.
+
## Adding new deprecations
The [content](https://github.com/ember-learn/deprecation-app/tree/main/content/) folder contains all the deprecations that are listed by the website. To add a new deprecation, add it to the appropriate folder by creating a new file. The content of the file needs to follow a specific format for the app to work. You can see [this sample](https://raw.githubusercontent.com/ember-learn/deprecation-app/main/content/ember/v3/getting-the-each-property.md) for reference.
+### Frontmatter
+
+#### Grouping deprecations
+
+```markdown
+ parent: deprecation-id
+```
+
+Can be used to nest deprecations under a parent grouping for the purpose of the UI. The deprecations will still be available via the direct ID URLs.
+
+
## Prerequisites
You will need the following things properly installed on your computer.
diff --git a/app/components/deprecation-article.js b/app/components/deprecation-article.js
index e01c739c..003469d2 100644
--- a/app/components/deprecation-article.js
+++ b/app/components/deprecation-article.js
@@ -1,5 +1,9 @@
import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
export default class DeprecationArticle extends Component {
+ @tracked showChildDeprecations = false;
+
get idForTitle() {
return `toc_${this.args.model.title}`;
}
@@ -7,4 +11,9 @@ export default class DeprecationArticle extends Component {
get idForUntil() {
return `toc_until-${this.args.model.until}`;
}
+
+ @action
+ toggleChildDeprecations() {
+ this.showChildDeprecations = !this.showChildDeprecations;
+ }
}
diff --git a/app/models/content.js b/app/models/content.js
index 030b7933..aefac5c2 100644
--- a/app/models/content.js
+++ b/app/models/content.js
@@ -1,4 +1,4 @@
-import Model, { attr } from '@ember-data/model';
+import Model, { attr, belongsTo, hasMany } from '@ember-data/model';
export default class ContentModel extends Model {
@attr content;
@@ -7,6 +7,8 @@ export default class ContentModel extends Model {
@attr since;
@attr anchor;
@attr displayId;
+ @belongsTo('content', { inverse: 'children', async: false }) parent;
+ @hasMany('content', { inverse: 'parent', async: false }) children;
// v1 has different meta, so conditionally render it
get renderUntil() {
diff --git a/app/templates/components/deprecation-article.hbs b/app/templates/components/deprecation-article.hbs
index 2274f330..6fe13ecc 100644
--- a/app/templates/components/deprecation-article.hbs
+++ b/app/templates/components/deprecation-article.hbs
@@ -3,10 +3,41 @@
{{#if @model.renderUntil}}
until: {{@model.until}}
-
id: {{or @model.displayId @model.id}}
+
since: {{@model.since}}
+
id: {{or @model.displayId @model.id}}
+ {{/if}}
+ {{#if @model.parent}}
+
+ included in:
+
+ {{or @model.parent.displayId @model.parent.id}}
+
+