diff --git a/adev-ja/src/content/examples/i18n/readme.md b/adev-ja/src/content/examples/i18n/readme.md deleted file mode 100644 index a724b587a4..0000000000 --- a/adev-ja/src/content/examples/i18n/readme.md +++ /dev/null @@ -1,27 +0,0 @@ -# Angular i18n Internationalization Example - -This sample comes from the Angular documentation's "[Example Angular Internationalization application](https://angular.dev/guide/i18n/example)" page. - -## Install and Run the Download - -1. `npm install` the node_module packages -2. `npm start` to see it run in English -3. `npm run start:fr` to see it run with French translation. - -> See the scripts in `package.json` for an explanation of these commands. - -## Run in Stackblitz - -Stackblitz compiles and runs the English version by default. - -To see the example translate to French with Angular i18n: - -1. Open the `project.json` file and add the following to the bottom: - -```json - "stackblitz": { - "startCommand": "npm run start:fr" - } -``` - -1. Click the "Fork" button in the stackblitz header. That makes a new copy for you with this change and re-runs the example in French. diff --git a/adev-ja/src/content/examples/service-worker-getting-started/src/app/readme.md b/adev-ja/src/content/examples/service-worker-getting-started/src/app/readme.md deleted file mode 100644 index a616d6ae0f..0000000000 --- a/adev-ja/src/content/examples/service-worker-getting-started/src/app/readme.md +++ /dev/null @@ -1,9 +0,0 @@ -# Instructions for Angular Universal Example Download - -This is the downloaded sample code for the [Angular Universal (Standalone) guide](https://angular.dev/guide/ssr). - -## Install and Run - -1. `npm install` to install the `node_module` packages -2. `npm run dev:ssr` to launch the server and application -3. Launch the browser to `http://localhost:4200` diff --git a/adev-ja/src/content/examples/ssr/readme.md b/adev-ja/src/content/examples/ssr/readme.md deleted file mode 100644 index 26a204eabc..0000000000 --- a/adev-ja/src/content/examples/ssr/readme.md +++ /dev/null @@ -1,9 +0,0 @@ -# Instructions for Angular SSR Example Download - -This is the downloaded sample code for the [Angular SSR (Standalone) guide](https://angular.io/guide/ssr). - -## Install and Run - -1. `npm install` to install the `node_module` packages -2. `ng serve` to launch the dev-server -3. Launch the browser to `http://localhost:4200` diff --git a/adev-ja/src/content/kitchen-sink.md b/adev-ja/src/content/kitchen-sink.md deleted file mode 100644 index 8d07f9ae77..0000000000 --- a/adev-ja/src/content/kitchen-sink.md +++ /dev/null @@ -1,366 +0,0 @@ - -This is a visual list of all custom components and styles for Angular.dev. - - -As a design system, this page contains visual and Markdown authoring guidance for: - -- Custom Angular docs elements: [`docs-card`](#cards), [`docs-callout`](#callouts), [`docs-pill`](#pills), and [`docs-steps`](#workflow) -- Custom text elements: [alerts](#alerts) -- Code examples: [`docs-code`](#code) -- Built-in Markdown styled elements: links, lists, [headers](#headers-h2), [horizontal lines](#horizontal-line-divider) -- and more! - -Get ready to: - -1. Write... -2. great... -3. docs! - -## Headers (h2) - -### Smaller headers (h3) - -#### Even smaller (h4) - -##### Even more smaller (h5) - -###### The smallest! (h6) - -## Cards - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare ligula nisi - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare ligula nisi - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare ligula nisi - - - -### `` Attributes - -| Attributes | Details | -| :---------------------- | :------------------------------------------------ | -| `` | All cards must be nested inside a container | -| `title` | Card title | -| card body contents | Anything between `` and `` | -| `link` | (Optional) Call to Action link text | -| `href` | (Optional) Call to Action link href | - -## Callouts - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus metus blandit semper faucibus. Sed blandit diam quis tellus maximus, ac scelerisque ex egestas. Ut euismod lobortis mauris pretium iaculis. Quisque ullamcorper, elit ut lacinia blandit, magna sem finibus urna, vel suscipit tortor dolor id risus. - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus metus blandit semper faucibus. Sed blandit diam quis tellus maximus, ac scelerisque ex egestas. Ut euismod lobortis mauris pretium iaculis. Quisque ullamcorper, elit ut lacinia blandit, magna sem finibus urna, vel suscipit tortor dolor id risus. - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus metus blandit semper faucibus. Sed blandit diam quis tellus maximus, ac scelerisque ex egestas. Ut euismod lobortis mauris pretium iaculis. Quisque ullamcorper, elit ut lacinia blandit, magna sem finibus urna, vel suscipit tortor dolor id risus. - - -### `` Attributes - -| Attributes | Details | -| :----------------------------------------------- | :-------------------------------------------------------- | -| `title` | Callout title | -| card body contents | Anything between `` and `` | -| `helpful` (default) \| `critical` \| `important` | (Optional) Adds styling and icons based on severity level | - -## Pills - -Pill rows are helpful as a sort of navigation with links to helpful resources. - - - - - - - - - - -### `` Attributes - -| Attributes | Details | -| :--------------- | :----------------------------------------- | -| `` element. - - -import { Component } from '@angular/core'; - -@Component({ -selector: 'example-code', -template: '

Hello World!

', -}) -export class ComponentOverviewComponent {} - - -### Styling the example - -Here's a code example fully styled: - - - - -We also have styling for the terminal, just set the language as `shell`: - -```shell -npm install @angular/material --save -``` - -#### `` Attributes - -| Attributes | Type | Details | -| :-------------- | :------------------- | :--------------------------------------------------- | -| code | `string` | Anything between tags is treated as code | -| `path` | `string` | Path to code example (root: `content/examples/`) | -| `header` | `string` | Title of the example (default: `file-name`) | -| `language` | `string` | code language | -| `linenums` | `boolean` | (False) displays line numbers | -| `highlight` | `string of number[]` | lines highlighted | -| `diff` | `string` | path to changed code | -| `visibleLines` | `string of number[]` | range of lines for collapse mode | -| `visibleRegion` | `string` | **DEPRECATED** FOR `visibleLines` | -| `preview` | `boolean` | (False) display preview | -| `hideCode` | `boolean` | (False) Whether to collapse code example by default. | - -### Multifile examples - -You can create multifile examples by wrapping the examples inside a ``. - - - - - - - -#### `` Attributes - -| Attributes | Type | Details | -| :------------ | :-------- | :--------------------------------------------------- | -| body contents | `string` | nested tabs of `docs-code` examples | -| `path` | `string` | Path to code example for preview and external link | -| `preview` | `boolean` | (False) display preview | -| `hideCode` | `boolean` | (False) Whether to collapse code example by default. | - -### Adding `preview` to your code example - -Adding the `preview` flag builds a running example of the code below the code snippet. This also automatically adds a button to open the running example in Stackblitz. - -NOTE: `preview` only works with standalone. - -### Styling example previews with Tailwind CSS - -Tailwind utility classes can be used within code examples. - - - - - - -## Tabs - - - - - - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus metus blandit semper faucibus. Sed blandit diam quis tellus maximus, ac scelerisque ex egestas. Ut euismod lobortis mauris pretium iaculis. Quisque ullamcorper, elit ut lacinia blandit, magna sem finibus urna, vel suscipit tortor dolor id risus. - - - -## Workflow - -Style numbered steps using ``. Numbering is created using CSS (handy!). - -### `` and `` Attributes - -| Attributes | Details | -| :----------------- | :------------------------------------------------ | -| `` | All steps must be nested inside a workflow | -| `title` | Step title | -| step body contents | Anything between `` and `` | - -Steps must start on a new line, and can contain `docs-code`s and other nested elements and styles. - - - - - You use the Angular CLI to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment. - -To install the Angular CLI, open a terminal window and run the following command: - -```shell -npm install -g @angular/cli -``` - - - - - You develop apps in the context of an Angular workspace. - -To create a new workspace and initial starter app: - -- Run the CLI command `ng new` and provide the name `my-app`, as shown here: - - ```shell - ng new my-app - ``` - -- The ng new command prompts you for information about features to include in the initial app. Accept the defaults by pressing the Enter or Return key. - - The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes. - - The CLI creates a new workspace and a simple Welcome app, ready to run. - - - - The Angular CLI includes a server, for you to build and serve your app locally. - -1. Navigate to the workspace folder, such as `my-app`. -2. Run the following command: - - ```shell - cd my-app - ng serve --open - ``` - -The `ng serve` command launches the server, watches your files, and rebuilds the app as you make changes to those files. - -The `--open` (or just `-o`) option automatically opens your browser to . -If your installation and setup was successful, you should see a page similar to the following. - - - - That's all the docs components! Now: - - - - - - - - - - - -## Images and video - -You can add images using the semantic Markdown image: - -![Rhubarb the cat](assets/images/kitchen-sink/rhubarb.jpg 'Optional title') - -### Add `#small` and `#medium` to change the image size - -![Rhubarb the small cat](assets/images/kitchen-sink/rhubarb.jpg#small) -![Rhubarb the medium cat](assets/images/kitchen-sink/rhubarb.jpg#medium) - -Embedded videos are created with `docs-video` and just need a `src` and `alt`: - - - -## Charts & Graphs - -Write diagrams and charts using [Mermaid](http://mermaid.js.org/) by setting the code language to `mermaid`, all theming is built-in. - -```mermaid - graph TD; - A-->B; - A-->C; - B-->D; - C-->D; -``` - -```mermaid - sequenceDiagram - Alice->>+John: Hello John, how are you? - Alice->>+John: John, can you hear me? - John-->>-Alice: Hi Alice, I can hear you! - John-->>-Alice: I feel great! -``` - -```mermaid - pie title Pets adopted by volunteers - "Dogs" : 386 - "Cats" : 85 - "Rats" : 15 -``` - -## Horizontal Line Divider - -This can be used to separate page sections, like we're about to do below. These styles will be added by default, nothing custom needed. - -
- -The end! diff --git a/tools/update-origin.ts b/tools/update-origin.ts index 66dfa2a79f..007cd3cfc2 100644 --- a/tools/update-origin.ts +++ b/tools/update-origin.ts @@ -8,7 +8,12 @@ import { adevJaDir, rootDir } from './lib/workspace'; const localizedFilePatterns: Array = [ // Text contents - ['src/content/**/*.md', '!src/content/**/license.md'], + [ + 'src/content/**/*.md', + '!src/content/**/license.md', + '!src/content/kitchen-sink.md', + '!src/content/examples/**/readme.md', + ], // Tutorial config files 'src/content/tutorials/**/config.json', // Update home files