Skip to content

Commit 3469931

Browse files
authored
Feat/docs update (ionic-team#2108)
* init commit * feat(): Custom navbar type working * feat(): Theme switch styled, other small changes * feat(): Added docs demo, centered content * chore(): Remove duplicate styles, etc * chore(navbar): styled icons * fix(): Get search bar to show up * chore(): style toc, markdown width styles, encap pill styles * chore(): Get rid of local theme * chore(styles): Break out style to component partials * chore(): remove docusaurus-theme for now * chore(navbar): Style search * chore(): Style back to top button and sidebar * chore(navbar): spacing * chore(sidebar): Styles * chore(navbar): Styles * fix(api): Link code tabs * chore(sidebar): Styles, mostly spacing * chore(): sidebar/navbar styles * chore(): Navbar/sidebar styles * chore(): Delete legacy files * feat(): Add option to style pages * chore(): Move page styles to components * chore(config): Abstract base url to var * chore(): New Logos * chore(): Delete old logos * chore(meta): Prefer head over frontmatter * chore(meta): Prefer head over frontmatter v2 * chore(): Updated release notes * fix(api): Inline TOC * feat(): Resizable container width from md * chore(navbar): Style navbar-sidebar * chore(): Edit url in TOC and more styles * chore(): Restructure theming components directory * fix(LayeredColorsSelect): Regular Select Box * feat(): Done with NewColorGenerator * chore(): Themed styles for theming components * chore(): Done with input abstraction * chore(): CodeColor API find and replace * chore(): Stepped Color Generator done * chore(): Finished ColorGenerator component * fix(code tabs): GroupIds and v5 docs changes * chore(): Style table of contents * chore(toc): font size * chore(navbar): styles * chore(navbar): style fixes * chore(): styles * chore(): styles * chore(): Warning on swizzle styles, prettierignore * chore(): Small fixes * chore(api list): Make multi version compatible * chore(): Folder structure, pare down theme and separate to components * chore(): Better names for page styles and components * chore(gitignore): No longer worry about src/pages * chore(): Remove src/assets * chore(): contributing.md update * chore(): Delete legacy stencil components and legacy styles * chore(): Remove legacy stencil components pt 2 * chore(): Clean up package.json and unneeded packages * chore(): Remove nojekyll * chore(): Typings * chore(): readme update * chore(): Add back crowdin * chore(): READMES * fix(tsconfig): Don't pass compilerOptions * chore(): Fix docs demo layout * fix(api): encapsulation pill filtering * chore(): Small styles fixes * chore(): mobile style container fix * fix(api script): Better admonition detection * chore(): Better docs demo placement * chore(): Update version dropdown * feat(): Prettier config * chore(): Prettier format all * chore(): Update image paths * chore(): Update styles README * chore(): Ionic framework -> Ionic on landing page * chore(): Page through and fix misc stuff * chore(): Titan updates * fix(): No trailing slash * Revert "fix(): No trailing slash" This reverts commit ec82b1a. * chore(homepage): Manually add canonical
1 parent d0b945c commit 3469931

File tree

986 files changed

+59855
-62024
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

986 files changed

+59855
-62024
lines changed

.gitignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,4 @@
1818

1919
npm-debug.log*
2020
yarn-debug.log*
21-
yarn-error.log*
21+
yarn-error.log*

.prettierignore

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
src/theme/DocItem
2+
src/theme/DocPage
3+
legacy-stencil-components
4+
node_modules
5+
scripts/bak
6+
src/styles.bak
7+
src/pages
8+
docs/api
9+
docs/native
10+
docs/cli/commands
11+
12+
.docusaurus
13+
.github

.prettierrc.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
module.exports = {
2+
...require("@ionic/prettier-config"),
3+
overrides: [
4+
{
5+
files: "*.md",
6+
options: {
7+
"parser": "mdx"
8+
}
9+
}
10+
]
11+
};

CONTRIBUTING.md

Lines changed: 17 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,12 @@ Thanks for your interest in contributing to Ionic's documentation! :tada: Check
77
- [Using VS Code on Windows](#using-vs-code-on-windows)
88
- [Project Structure](#project-structure)
99
- [Directories](#directories)
10-
- [Page Templates](#page-templates)
11-
- [Menu Templates](#menu-templates)
1210
- [Authoring Content](#authoring-content)
1311
- [Authoring Locally](#authoring-locally)
14-
- [Reference Content](#reference-content)
1512
- [Translation](#translation)
1613
- [Reporting Issues](#reporting-issues)
1714
- [Pull Request Guidelines](#pull-request-guidelines)
18-
- [Project Management](#project-management)
15+
<!-- - [Project Management](#project-management) -->
1916
- [Deploying](#deploying)
2017
- [License](#license)
2118

@@ -44,50 +41,25 @@ The Ionic docs were originally built in a Mac-based environment, so Mac-focused
4441

4542
## Project Structure
4643

47-
Ionic's documentation is built using [Stencil](https://stenciljs.com). The content is written as Markdown or pulled in as JSON data from other Ionic repositories.
48-
49-
At a high level, the production documentation works like this:
50-
51-
1. At build time, the `build-pages` script reads the Markdown in `src/pages/` and creates a JSON representation of each page at the same path
52-
```
53-
pages/
54-
├── index.json
55-
└── index.md
56-
```
57-
2. At runtime, the `docs-page` component receives the current path (e.g. `/docs`)
58-
3. The `docs-page` component fetches and parses the [JSON representation](https://ionicframework.com/docs/pages/index.json) of that page
59-
4. The `docs-page` component renders that data using a [template](https://github.com/ionic-team/ionic-docs/tree/master/src/components/page/templates)
60-
61-
> **Note**: most reference content (e.g. APIs, native plugins, CLI commands) is not stored as Markdown. Those pages are created using data provided by other repositories to the `build-pages` script.
44+
Ionic's documentation is built using [Docusaurus](https://docusaurus.io/). The content is either written or generated as Markdown.
6245

6346
### Directories
6447

65-
- `scripts/` - build scripts used to generate JSON representations of each page and other data used in the docs
48+
- `scripts/` - build scripts used to generate markdown or json files
6649
- `src/` - source code and content of the docs
67-
- `assets/` - static assets used on the site, like images and fonts
68-
- `components/` - Stencil components used in the documentation UI
69-
- `demos/` - Self-contained demos, optionally presented by pages via `demoUrl` YAML frontmatter
70-
- `pages/` - Markdown content organized by route and uncommitted JSON representation of each page
71-
- `styles/` - Global and page-specific styles (non-component styles)
72-
73-
### Page Templates
74-
75-
The [`docs-page`](https://github.com/ionic-team/ionic-docs/blob/master/src/components/page/page.tsx) component is responsible for loading and rendering page content. Page content is rendered using one of the templates exported [here](https://github.com/ionic-team/ionic-docs/blob/master/src/components/page/templates/index.ts). Pages can specify a template via the `template` key in their frontmatter, or the default template will be used.
76-
77-
```tsx
78-
const Template = templates[page.template] || template.default;
79-
return <Template page={page} />;
80-
```
81-
82-
### Menu Templates
83-
84-
The [`docs-menu`](https://github.com/ionic-team/ionic-docs/blob/master/src/components/menu/menu.tsx) component is responsible for rendering the side menu. The menu content differs by path and is specified in [per-section templates](https://github.com/ionic-team/ionic-docs/tree/master/src/components/menu/templates).
85-
86-
---
50+
- `components/` - components used across the site
51+
- `global/` - components used globally
52+
- `page/` - components used on a single page or in a limited scope
53+
- `styles/` - global styles and variables
54+
- `components/` - styles split out into the components they target
55+
- `static/`
56+
- `demos/` - self-contained demos, optionally presented by pages via `demoUrl` YAML frontmatter
57+
- `versioned_docs/` - versions of the docs created by the docusaurus versioning command
58+
- `versioned_sitebars/` - versions of the docs sidebars created by the docusaurus versioning command
8759

8860
## Authoring Content
8961

90-
The content of the Ionic docs is written as [Markdown](https://commonmark.org/) in `src/pages`. Each Markdown file corresponds to a route.
62+
The content of the Ionic docs is written as [Markdown](https://commonmark.org/) in `docs/`. Each Markdown file corresponds to a route unless explicitly changed in the frontmatter.
9163

9264
```
9365
/docs/ => src/pages/index.md
@@ -98,50 +70,14 @@ The content of the Ionic docs is written as [Markdown](https://commonmark.org/)
9870

9971
You can make copy edits to the site by [editing the Markdown files directly on GitHub](https://help.github.com/articles/editing-files-in-another-user-s-repository/). In your pull request, please explain what was missing from or inaccurate about the content.
10072

101-
### Authoring Locally
102-
103-
To edit or create content locally, you'll need to [run the development server](#development-workflow). By default, the pages are only built once while starting the server. You can rebuild the pages continuously as you edit them by concurrently running the `watch-pages` script:
104-
105-
```sh
106-
$ npm run watch-pages
107-
```
108-
109-
> **Note**: the `watch-pages` script won't reload the page. You will need to reload the page manually after your page is rebuilt.
110-
11173
### Reference Content
11274

113-
The Markdown in `src/pages` does not contain all of the Ionic documentation's content:
75+
The Markdown in `docs/` does not only contain manually written markdown files:
11476

11577
- Paths matching `/docs/api/*` are built from the [Ionic Framework](https://github.com/ionic-team/ionic) source code
11678
- Paths matching `/docs/native/*` are built from the [Ionic Native](https://github.com/ionic-team/ionic-native) source code
11779
- Paths matching `/docs/cli/commands/*` are built from the [Ionic CLI](https://github.com/ionic-team/ionic-cli) source code
11880

119-
#### Updating Ionic Native Community Plugins
120-
121-
To add or update an Ionic Native [community plugin](/docs/native/community):
122-
1) Open a pull request on the [Ionic Native](https://github.com/ionic-team/ionic-native) repository (both code or documentation).
123-
2) Once the change has been approved and merged into master by the Ionic team, do the following steps:
124-
125-
```shell
126-
# Clone Ionic Native repo
127-
git clone [email protected]:ionic-team/ionic-native.git
128-
cd ionic-native
129-
130-
# Build the Ionic Native project
131-
npm run build
132-
133-
# Run scripts to generate the plugin JSON file
134-
npm ci
135-
npm run docs-json
136-
137-
# Overwrite the ionic-docs native.json file with the new changes
138-
mv scripts/docs-json/plugins.json /path/to/docs/scripts/data/native.json
139-
```
140-
141-
3) Open a PR in the `ionic-docs` repo, submitting the new `native.json` file.
142-
143-
---
144-
14581
## Translation
14682

14783
The Ionic docs have been translated into Japanese and are in the process of being translated into Chinese, French, Portuguese, and Spanish. We've chosen these languages because we believe they have the greatest number of developers where English-only documentation would be a barrier.
@@ -152,26 +88,6 @@ _Please submit translation issues to the Crowdin page and not the Ionic Docs Git
15288

15389
The Japanese translation of the docs were built by an independent team, lead by [rdlabo](https://github.com/rdlabo) and can be found and contributed to on the [ionic-jp group's `ionic-docs` project page](https://github.com/ionic-jp/ionic-docs).
15490

155-
### Add new pages / Updating sidebar menus
156-
157-
When adding new pages to the docs, add a new token representing the page name to the appropriate Menu template (`src/components/menu/templates`).
158-
159-
For example, in `src/components/menu/templates/main.tsx`:
160-
161-
```javascript
162-
// 'token': 'path'
163-
'menu-intro-cli': '/docs/intro/cli',
164-
```
165-
166-
Then, add the token and its translation to each file within the `src/assets/locales` folder:
167-
168-
For example, in `src/assets/locales/en/messages.json`:
169-
170-
```javascript
171-
// 'token': 'translated text'
172-
"menu-intro-cli": "CLI Installation",
173-
```
174-
17591
## Reporting Issues
17692

17793
Before submitting an issue to the Ionic docs repo, please search [existing issues](https://github.com/ionic-team/ionic-docs/issues) to avoid duplicate reports.
@@ -191,11 +107,9 @@ If the issue you're reporting is a bug, please be sure it is an issue with the I
191107

192108
When submitting pull requests, please keep the scope of your change contained to a single feature or bug. When in doubt, err on the side of smaller pull requests. If your pull request is a new feature, we would recommend opening an issue first to come to an agreement about the feature before putting in significant time.
193109

194-
> **Note**: `tslint` will run automatically when you attempt to commit. Our lint rules extend [tslint-ionic-rules](https://github.com/ionic-team/tslint-ionic-rules).
195-
196110
---
197111

198-
## Project Management
112+
<!-- ## Project Management
199113
200114
Internally, the Ionic documentation team uses a [project board](https://github.com/ionic-team/ionic-docs/projects/3) to plan work on the docs. The lanes on the board are:
201115
@@ -207,11 +121,11 @@ Internally, the Ionic documentation team uses a [project board](https://github.c
207121
208122
If you're looking for issues to help out with, we'd recommend either asking about an issue in the backlog or checking for issues labeled [`help-wanted`](https://github.com/ionic-team/ionic-docs/labels/help%20wanted).
209123
210-
---
124+
--- -->
211125

212126
## Deploying
213127

214-
The Ionic documentation's `master` branch is deployed automatically and separately from the [Ionic site](https://github.com/ionic-team/ionic-site) itself. The Ionic site then uses a proxy for paths under `/docs` to request the deployed documentation.
128+
The Ionic documentation's `main` branch is deployed automatically and separately from the [Ionic site](https://github.com/ionic-team/ionic-site) itself. The Ionic site then uses a proxy for paths under `/docs` to request the deployed documentation.
215129

216130
---
217131

README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
# Ionic Docs
22

3-
The official [Ionic](https://ionicframework.com) documentation, built with [Stencil](https://stenciljs.com).
3+
The official [Ionic](https://ionicframework.com) documentation, built with [Docusaurus](https://docusaurus.io/).
44

55
[![Crowdin](https://badges.crowdin.net/ionic-docs/localized.svg)](https://crowdin.com/project/ionic-docs)
66

77
---
88

9-
- [Contributing Guide](https://github.com/ionic-team/ionic-docs/blob/master/CONTRIBUTING.md) :flashlight:
10-
- [Project Board](https://github.com/ionic-team/ionic-docs/projects/3) :pushpin:
9+
- [Contributing Guide](./CONTRIBUTING.md) :flashlight:
10+
<!-- - [Project Board](https://github.com/ionic-team/ionic-docs/projects/3) :pushpin: -->

docs/README.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Docs folder
2+
3+
The `/docs` folder houses all markdown files. The page structure loosely maps to the routing on the site since paths can be changed in the frontmatter.
4+
5+
## Versioning
6+
7+
This folder can also contain components, assets, and whatever else is meant to be versioned when the docusaurus versioning script is run. For example, if there is a page component that is only relevant to the `layout` section in the current version of Ionic, it could be added to a `_components/` folder in `docs/layout/`. When the versioning script is run, the component will be copied to `versioned_docs/verion-{X}/layout/_components/` and there will now be a separate component in `docs/layout/_components/` that can be deleted or updated to the latest version. The same concept applies to images and other files.
8+
9+
If components are meant to be shared across versions, they can be put in `src/components/`. If images and other served files are meant to be shared across versions they can be put in `static/`.
10+
11+
## Auto Generated Files
12+
13+
All markdown files in these directories are generated from [scripts](/scripts):
14+
15+
- `docs/api/`
16+
- `docs/cli/commands/`
17+
- `docs/native/`

0 commit comments

Comments
 (0)