Merge branch 'main' into fix/api-js-script

Author: brandyscarney

.github/CODEOWNERS

@@ -12,5 +12,3 @@
 # This should make it easy to add new rules without breaking existing ones.
 
 * @ionic-team/framework
-
-/_templates/ @mapsandapps

.prettierignore

@@ -7,6 +7,7 @@ docs/api
 docs/native
 versioned_docs/version-v*/native
 docs/cli/commands
+docs/reference/glossary.md
 
 static/code/stackblitz
 

CONTRIBUTING.md

@@ -2,21 +2,24 @@
 
 Thanks for your interest in contributing to Ionic's documentation! :tada: Check the guidelines below for suggestions and requirements before submitting your contribution.
 
-- [Contributing Guide](#contributing-guide)
-  - [Development Workflow](#development-workflow)
-    - [Previewing Changes](#previewing-changes)
-    - [Linting Documentation](#linting-documentation)
-    - [Spell Check](#spell-check)
-  - [Using VS Code on Windows](#using-vs-code-on-windows)
-  - [Project Structure](#project-structure)
-    - [Directories](#directories)
-  - [Authoring Content](#authoring-content)
-    - [Authoring Locally](#authoring-locally)
-  - [Translation](#translation)
-  - [Reporting Issues](#reporting-issues)
-  - [Pull Request Guidelines](#pull-request-guidelines)
-  - [Deploying](#deploying)
-  - [License](#license)
+<sub>
+  <b>TABLE OF CONTENTS</b>
+</sub>
+
+- [Development Workflow](#development-workflow)
+  - [Previewing Changes](#previewing-changes)
+  - [Linting Documentation](#linting-documentation)
+  - [Spell Check](#spell-check)
+- [Using VS Code on Windows](#using-vs-code-on-windows)
+- [Project Structure](#project-structure)
+  - [Directories](#directories)
+- [Authoring Content](#authoring-content)
+  - [Reference Content](#reference-content)
+- [Translation](#translation)
+- [Reporting Issues](#reporting-issues)
+- [Pull Request Guidelines](#pull-request-guidelines)
+- [Deploying](#deploying)
+- [License](#license)
 
 ---
 
@@ -178,4 +181,4 @@ The Ionic documentation's `main` branch is deployed automatically and separately
 
 This repo is licensed and managed separately from Ionic itself.
 
-By contributing to this repo, you agree to have your contributions licensed under the Apache 2.0 license. See [LICENSE](../LICENSE) for the full license text.
+By contributing to this repo, you agree to have your contributions licensed under the Apache 2.0 license. See [LICENSE](LICENSE) for the full license text.

_templates/README.md

@@ -26,7 +26,7 @@ Once you've generated your playground, you need to add it to the main markdown f
 ```
 ## Feature
 
-import Feature from '@site/static/usage/v7/button/feature/index.md';
+import Feature from '@site/static/usage/v8/button/feature/index.md';
 
 <Feature />
 ```

_templates/playground/new/angular.md.ejs.t

@@ -0,0 +1,6 @@
+---
+to: "<%= `static/usage/v${version}/${name}/${path}/angular/example_component_html.md` %>"
+---
+```html
+<<%= component %>></<%= component %>>
+```

_templates/playground/new/angular_example_component_html.md.ejs.t

@@ -1,17 +1,16 @@
 ---
-# this file only gets generated if `angular_ts` (from the command line prompt) is true
-to: "<%= angular_ts ? `static/usage/v${version}/${name}/${path}/angular/example_component_ts.md` : null %>"
+arbitrary: <% pascalComponent = h.changeCase.pascal(component) %>
+to: "<%= `static/usage/v${version}/${name}/${path}/angular/example_component_ts.md` %>"
 ---
 ```ts
 import { Component } from '@angular/core';
+import { <%= pascalComponent %> } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
-<% if (css){ -%>
   styleUrls: ['./example.component.css'],
-<% } -%>
+  imports: [<%= pascalComponent %>],
 })
-export class ExampleComponent {
-}
+export class ExampleComponent {}
 ```

_templates/playground/new/angular_example_component_ts.md.ejs.t

@@ -54,19 +54,14 @@ module.exports = {
               type: 'select',
               name: 'version',
               message: 'Select the Ionic Framework version for the playground',
-              initial: '7',
-              choices: ['6', '7'],
+              initial: '8',
+              choices: ['6', '7', '8'],
             },
             {
               type: 'toggle',
               name: 'css',
               message: 'Generate custom CSS files?',
             },
-            {
-              type: 'toggle',
-              name: 'angular_ts',
-              message: 'Generate an Angular TypeScript file?',
-            },
           ])
           .then((answers) => {
             answers.name = answers.name || answers.component.replace('ion-', '');
@@ -77,7 +72,7 @@ module.exports = {
 
             const playgroundName = changeCase.pascal(answers.path.split('/').pop());
             console.log(
-              `\nTo use this playground in a docs markdown file, include\nthe following:\n\n## ${playgroundName}\n\nimport ${playgroundName} from '@site/static/usage/v7/${answers.name}/${answers.path}/index.md';\n\n<${playgroundName} />\n`
+              `\nTo use this playground in a docs markdown file, include\nthe following:\n\n## ${playgroundName}\n\nimport ${playgroundName} from '@site/static/usage/v${answers.version}/${answers.name}/${answers.path}/index.md';\n\n<${playgroundName} />\n`
             );
 
             return answers;

_templates/playground/new/index.js

@@ -12,17 +12,12 @@ import react_main_css from './react/main_css.md';
 import react from './react.md';
 <% } -%>
 import vue from './vue.md';
-<% if (css || angular_ts){ %>
+
 import angular_example_component_html from './angular/example_component_html.md';
-<% } else { -%>
-import angular from './angular.md';
-<% } -%>
-<% if (angular_ts){ -%>
-import angular_example_component_ts from './angular/example_component_ts.md';
-<% } -%>
 <% if (css){ -%>
 import angular_example_component_css from './angular/example_component_css.md';
 <% } -%>
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="<%= version %>"
@@ -39,21 +34,15 @@ import angular_example_component_css from './angular/example_component_css.md';
     react,
 <% } -%>
     vue,
-<% if (angular_ts || css){ -%>
     angular: {
       files: {
         'src/app/example.component.html': angular_example_component_html,
-<% if (angular_ts){ -%>
-        'src/app/example.component.ts': angular_example_component_ts,
-<% } -%>
 <% if (css){ -%>
         'src/app/example.component.css': angular_example_component_css,
 <% } -%>
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
-<% } else { -%>
-    angular,
-<% } -%>
   }}
   src="usage/v<%= version %>/<%= name %>/<%= path %>/demo.html"
 />

_templates/playground/new/index.md.ejs.t

@@ -11,9 +11,10 @@ import './main.css';<% } %>
 
 function Example() {
   return (
-    <<%= pascalComponent %>></<%= pascalComponent %>>
+    <>
+      <<%= pascalComponent %>></<%= pascalComponent %>>
+    </>
   );
 }
 export default Example;
 ```
-