Move imports to top of file

ltm · ltm · commit 6236de8908df · 2021-06-17T17:13:01.000-04:00
diff --git a/docs/components.md b/docs/components.md
@@ -4,13 +4,13 @@ description: Ionic Framework comes stock with a number of high-level UI componen
 hide_table_of_contents: true
 ---
 
+import DocsCard from '@site/src/components/DocsCard';
+import DocsCards from '@site/src/components/DocsCards';
+
 # UI Components
 
 Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you’re familiar with the basics, refer to the [API Index](/docs/api) for a complete list of each component and sub-component.
 
-import DocsCard from '@site/src/components/DocsCard';
-import DocsCards from '@site/src/components/DocsCards';
-
 <DocsCards>
   <DocsCard header="Action Sheet" href="/docs/api/action-sheet" img="/icons/feature-component-actionsheet-icon.png">
     <p>Action Sheets display a set of options with the ability to confirm or cancel an action.</p>
diff --git a/docs/deployment/progressive-web-app.md b/docs/deployment/progressive-web-app.md
@@ -5,15 +5,15 @@ contributors:
   - mhartington
 ---
 
+import DocsCard from '@site/src/components/DocsCard';
+import DocsCards from '@site/src/components/DocsCards';
+
 # Deploying a Progressive Web App
 
 Because Ionic Apps are built with web technologies, they can run just as well as a Progressive Web App as they can a native app. Not sure what PWAs are? Check out Ionic's <a href="https://ionicframework.com/pwa" target="_blank">PWA Overview</a> or the <a href="/docs/core-concepts/what-are-progressive-web-apps">What are Progressive Web Apps</a> page for more info.
 
 For the frameworks Ionic supports, we've created dedicated guides that go into more detail. Below are links for Angular and React.
 
-import DocsCard from '@site/src/components/DocsCard';
-import DocsCards from '@site/src/components/DocsCards';
-
 <DocsCards>
   <DocsCard header="Angular" href="/docs/angular/pwa" img="/img/frameworks/angular.svg"></DocsCard>
   <DocsCard header="React" href="/docs/react/pwa" img="/img/frameworks/react.svg"></DocsCard>
diff --git a/docs/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md b/docs/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md
@@ -3,6 +3,8 @@ contributors:
   - jsonMartin
 ---
 
+import DocsButton from '@site/src/components/DocsButton';
+
 # Creating a Photo Gallery with Device Storage
 
 Last time, we successfully added the Camera plugin to the Tab2 page of our Tabs app. Currently, the photo is replaced each time a new one is taken. What if we wanted to display multiple photos together? Let’s create a photo gallery. You can follow along with the complete code for this [on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4).
@@ -195,8 +197,6 @@ Sweet! Photos are now saved to your device. To demonstrate that they are indeed
 
 Next up, we’ll look at how to apply a custom theme to an Ionic app.
 
-import DocsButton from '@site/src/components/DocsButton';
-
 <div style={{textAlign: 'right'}}>
   <DocsButton href="/docs/angular/your-first-app/theming">Continue <svg viewBox="0 0 512 512"><path d="M294.1 256L167 129c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.3 34 0L345 239c9.1 9.1 9.3 23.7.7 33.1L201.1 417c-4.7 4.7-10.9 7-17 7s-12.3-2.3-17-7c-9.4-9.4-9.4-24.6 0-33.9l127-127.1z"></path></svg></DocsButton>
 </div>
diff --git a/docs/developing/hardware-back-button.md b/docs/developing/hardware-back-button.md
@@ -1,5 +1,6 @@
 ---
 ---
+
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
diff --git a/docs/developing/keyboard.md b/docs/developing/keyboard.md
@@ -1,5 +1,7 @@
 ---
 ---
+
+import Codepen from '@site/src/components/Codepen';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
@@ -88,8 +90,6 @@ For a list of accepted values, see the <a href="https://developer.mozilla.org/en
 </Tabs>
 ````
 
-import Codepen from '@site/src/components/Codepen';
-
 <Codepen user="ionic" slug="abvJVVv" height="400" />
 
 > The `inputmode` attribute is supported on devices running Chrome 66+ and iOS Safari 12.2+: https://caniuse.com/#search=inputmode
diff --git a/docs/index.md b/docs/index.md
@@ -11,13 +11,13 @@ demoUrl: https://ionic-docs-demo.herokuapp.com/
 demoSourceUrl: https://github.com/ionic-team/docs-demo
 ---
 
+import DocsCard from '@site/src/components/DocsCard';
+import DocsCards from '@site/src/components/DocsCards';
+
 Ionic Framework is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like <a href="/docs/angular/overview"> Angular</a>, <a href="/docs/react/overview">React</a>, and <a href="/docs/vue/overview">Vue</a>.
 
 Get started building by <a href="/docs/intro/cli">installing Ionic</a> or following our <a href="/docs/intro/next#build-your-first-app">First App Tutorial</a> to learn the main concepts.
 
-import DocsCard from '@site/src/components/DocsCard';
-import DocsCards from '@site/src/components/DocsCards';
-
 <DocsCards>
   <DocsCard header="Installation Guide" href="/docs/intro/cli" icon="/icons/guide-installation-icon.svg" hover-icon="/icons/guide-installation-icon-hover.svg">
     <p>Step-by-step guides to setting up your system and installing the framework.</p>
diff --git a/docs/intro/first-app.md b/docs/intro/first-app.md
@@ -2,13 +2,13 @@
 hide_table_of_contents: true
 ---
 
+import DocsCard from '@site/src/components/DocsCard';
+import DocsCards from '@site/src/components/DocsCards';
+
 # Build Your First App Tutorial
 
 Pick the JavaScript framework you plan to use while building your Ionic app:
 
-import DocsCard from '@site/src/components/DocsCard';
-import DocsCards from '@site/src/components/DocsCards';
-
 <DocsCards>
   <DocsCard header="Start with Angular" href="/docs/angular/your-first-app" icon="/icons/logo-angular-icon.png">
     <p>A complete guide to get you up to speed with the basics of building Ionic apps with Angular.</p>
diff --git a/docs/intro/next.md b/docs/intro/next.md
@@ -1,15 +1,15 @@
 ---
 ---
 
+import DocsCard from '@site/src/components/DocsCard';
+import DocsCards from '@site/src/components/DocsCards';
+
 # Next Steps
 
 ## Build Your First App
 
 Pick the JavaScript framework you plan to use while building your Ionic app:
 
-import DocsCard from '@site/src/components/DocsCard';
-import DocsCards from '@site/src/components/DocsCards';
-
 <DocsCards>
   <DocsCard header="Start with Angular" href="/docs/angular/your-first-app" icon="/icons/logo-angular-icon.png">
     <p>A complete guide to get you up to speed with the basics of building Ionic apps with Angular.</p>
diff --git a/docs/layout/structure.md b/docs/layout/structure.md
@@ -4,6 +4,9 @@ contributors:
   - brandyscarney
 ---
 
+import DocsCard from '@site/src/components/DocsCard';
+import DocsCards from '@site/src/components/DocsCards';
+
 # Structure
 
 Ionic Framework provides several different layouts that can be used to structure an app. From single page layouts, to split pane views and modals.
@@ -12,9 +15,6 @@ Ionic Framework provides several different layouts that can be used to structure
 
 ### Header
 
-import DocsCard from '@site/src/components/DocsCard';
-import DocsCards from '@site/src/components/DocsCards';
-
 <aside>
   <DocsCard href="/docs/api/header" header="Learn More" icon="/icons/component-header-icon.png">
     <code>ion-header</code> API docs
diff --git a/docs/native.md b/docs/native.md
@@ -5,6 +5,7 @@ meta:
   description: Build native application experiences with open-source Native APIs. Easily add native device functionality to any Ionic app with Capacitor or Cordova.
 hide_table_of_contents: true
 ---
+
 import DocsCard from '@site/src/components/DocsCard';
 import DocsCards from '@site/src/components/DocsCards';
 import { Helmet } from "react-helmet";
diff --git a/docs/native/community.md b/docs/native/community.md
@@ -3,6 +3,7 @@ title: Cordova Community Plugins
 sidebar_label: Setup
 hide_table_of_contents: true
 ---
+
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
diff --git a/docs/react.md b/docs/react.md
@@ -8,6 +8,9 @@ meta:
   description: Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards
 ---
 
+import DocsCard from '@site/src/components/DocsCard';
+import DocsCards from '@site/src/components/DocsCards';
+
 <div class='flex main-flex'>
   <div class="pull-left">
   <h3>One Codebase <br/> Any Platform <br/> <strong>Just React</strong></h3>
@@ -109,9 +112,6 @@ $ ionic serve █
 
 ## Resources
 
-import DocsCard from '@site/src/components/DocsCard';
-import DocsCards from '@site/src/components/DocsCards';
-
 <DocsCards>
   <DocsCard header="Getting Started" href="/docs/react/your-first-app" icon="/icons/feature-component-actionsheet-icon.png">
     <p>Learn the fundamentals you need to know to start building amazing apps with Ionic Framework.</p>
diff --git a/docs/reference/migration.md b/docs/reference/migration.md
@@ -6,6 +6,9 @@ contributors:
   - elylucas
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 # Migration Guide
 
 
@@ -77,9 +80,6 @@ One of the major changes between an Ionic 3 app and an Ionic 4 app is the overal
 
 For example, if an app is using Angular, that project structure will be exactly what an Angular CLI app would be. This change, while not too difficult to accommodate, helps to keep common patterns and documentation consistent.
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 ````mdx-code-block
 <Tabs
   defaultValue="v4"
diff --git a/docs/studio.md b/docs/studio.md
@@ -2,6 +2,9 @@
 hide_table_of_contents: true
 ---
 
+import DocsCard from '@site/src/components/DocsCard';
+import DocsCards from '@site/src/components/DocsCards';
+
 # Welcome to Studio
 
 Ionic Studio is a fast and easy app builder that helps teams build and prototype apps with minimal coding.
@@ -13,9 +16,6 @@ fully supports bringing code back into the tool, something virtually unheard of
 
 Studio is a desktop tool and requires a subscription, and is only for Ionic Angular 4.x+ projects. To get started, sign up below:
 
-import DocsCard from '@site/src/components/DocsCard';
-import DocsCards from '@site/src/components/DocsCards';
-
 <DocsCards class="static-width">
   <DocsCard header="Get Studio" href="https://ionicframework.com/studio?utm_source=docs&utm_medium=website&utm_campaign=studio%20launch" icon="/icons/guide-installation-icon.png">
     <p>Sign up for Studio and start building today.</p>
diff --git a/docs/techniques/security.md b/docs/techniques/security.md
@@ -3,6 +3,7 @@ disableHtmlPreviews: true
 contributors:
   - liamdebeasi
 ---
+
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
diff --git a/docs/theming/advanced.md b/docs/theming/advanced.md
@@ -7,6 +7,8 @@ contributors:
   - marcjulian
 ---
 
+import CodeColor from '@site/src/components/CodeColor';
+
 # Advanced Theming
 
 CSS-based theming enables apps to customize the colors quickly by loading a CSS file or changing a few CSS property values.
@@ -128,8 +130,6 @@ $text-darker: darken($text, 15);
 $text-lighter: lighten($text, 15);
 ```
 
-import CodeColor from '@site/src/components/CodeColor';
-
 After running through the Sass compiler, the colors will have the following values:
 
 | Variable            | Value                                                     |
diff --git a/docs/theming/basics.md b/docs/theming/basics.md
@@ -4,6 +4,8 @@ contributors:
   - brandyscarney
 ---
 
+import ColorAccordion from '@site/src/components/ColorAccordion';
+
 # Theming Basics
 
 Ionic Framework is built to be a blank slate that can easily be customized and modified to fit a brand, while still following the standards of the different platforms. Theming Ionic apps is now easier than ever. Because the framework is built with CSS, it comes with pre-baked default styles which are extremely easy to change and modify.
@@ -14,8 +16,6 @@ Ionic has nine default colors that can be used to change the color of many compo
 
 When changing a color, it is important to set all of the related properties. This can be done easily with the [Color Generator](/docs/theming/color-generator) tool, but these can also be manually written if desired. For more information on Ionic colors, see [Colors](/docs/theming/colors).
 
-import ColorAccordion from '@site/src/components/ColorAccordion';
-
 <ColorAccordion />
 
 ## Platform Standards
diff --git a/docs/theming/colors.md b/docs/theming/colors.md
@@ -3,6 +3,9 @@ initialTab: 'preview'
 inlineHtmlPreviews: true
 ---
 
+import LayeredColorsSelect from '@site/src/components/LayeredColorsSelect';
+import CodeColor from '@site/src/components/CodeColor';
+
 # Colors
 
 Ionic has nine default colors that can be used to change the color of many components. Each color is actually a collection of multiple properties, including a `shade` and `tint`, used throughout Ionic.
@@ -26,14 +29,10 @@ A color can be applied to an Ionic component in order to change the default colo
 
 Each color consists of the following properties: a `base`, `contrast`, `shade`, and `tint`. The `base` and `contrast` colors also require a `rgb` property which is the same color, just in <a href="https://developer.mozilla.org/en-US/docs/Glossary/RGB" target="_blank">rgb format</a>. See [The Alpha Problem](./advanced#the-alpha-problem) for an explanation of why the `rgb` property is also needed. Select from the dropdown below to see all of the default colors Ionic provides and their variations.
 
-import LayeredColorsSelect from '@site/src/components/LayeredColorsSelect';
-
 <LayeredColorsSelect />
 
 ## Modifying Colors
 
-import CodeColor from '@site/src/components/CodeColor';
-
 To change the default values of a color, all of the listed variations for that color should be set. For example, to change the secondary color to <CodeColor mode="md" value="#006600"></CodeColor>, set the following CSS properties:
 
 ```css
diff --git a/docs/theming/dark-mode.md b/docs/theming/dark-mode.md
@@ -3,6 +3,8 @@ initialTab: 'preview'
 inlineHtmlPreviews: true
 ---
 
+import Codepen from '@site/src/components/Codepen';
+
 # Dark Mode
 
 Ionic makes it easy to change the themes of your app, including supporting dark color schemes. With growing support for dark mode in native apps, developers are now looking to add it to their apps to support user preferences.
@@ -77,8 +79,6 @@ function toggleDarkTheme(shouldAdd) {
 
 > Tip: make sure to view the Codepen below in a [supported browser](https://caniuse.com/#feat=prefers-color-scheme) and then try changing the system preferences on your device between light & dark mode. Here's [how to enable dark mode on Windows 10](https://blogs.windows.com/windowsexperience/2016/08/08/windows-10-tip-personalize-your-pc-by-enabling-the-dark-theme/) and [how to enable it on a Mac](https://support.apple.com/en-us/HT208976).
 
-import Codepen from '@site/src/components/Codepen';
-
 <!-- Codepen https://codepen.io/ionic/pen/jONzJpG -->
 <Codepen preview="false" user="ionic" slug="jONzJpG" height="550px" default-tab="js,result" />
 
diff --git a/docs/theming/themes.md b/docs/theming/themes.md
@@ -3,6 +3,8 @@ initialTab: 'preview'
 inlineHtmlPreviews: true
 ---
 
+import CodeColor from '@site/src/components/CodeColor';
+
 # Themes
 
 Ionic provides several global variables that are used throughout components to change the default theme of an entire application. [Application Colors](#application-colors) are useful to change the look of most of the Ionic components, and [Stepped Colors](#stepped-colors) are used as variations in some of the Ionic components.
@@ -50,8 +52,6 @@ After exploring different ways to customize the Ionic theme, we found that we co
 
 While updating the background (`--ion-background-color`) and text (`--ion-text-color`) variables will change the look of the app for most components, there are certain Ionic components where it may look off, or broken. This will be more apparent when applying a darker theme.
 
-import CodeColor from '@site/src/components/CodeColor';
-
 In some components we use a shade darker than the background or lighter than the text. For example, an item heading text may need to be <CodeColor mode="md" value="#404040"></CodeColor>, which is a few shades lighter than our default text color. Meanwhile, the loading component background is a shade darker than white, using <CodeColor mode="md" value="#f2f2f2"></CodeColor>. We use stepped colors in order to define these slight variations. It is important to update the stepped colors when updating the background or text color of an application.
 
 By default, the Ionic stepped colors start at the default background color value <CodeColor mode="md" value="#ffffff"></CodeColor> and mix with the text color value <CodeColor mode="md" value="#000000"></CodeColor> using an increasing percentage. The full list of stepped colors is shown in the generator below.
diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md
@@ -1,5 +1,7 @@
 ---
 ---
+
+import Codepen from '@site/src/components/Codepen';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
@@ -204,8 +206,6 @@ In the example above, an animation that changes the opacity on the `.square` ele
 
 By default, all Ionic Animations are paused until the `play` method is called.
 
-import Codepen from '@site/src/components/Codepen';
-
 <Codepen user="ionic" slug="bGbMojP" />
 
 ## Keyframe Animations
diff --git a/docs/utilities/gestures.md b/docs/utilities/gestures.md
@@ -1,5 +1,7 @@
 ---
 ---
+
+import Codepen from '@site/src/components/Codepen';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
@@ -258,8 +260,6 @@ const onMove = (detail) => {
 
 In this example, our app listens for gestures on the `.rectangle` element. When a gesture movement is detected, the `onMove` function is called, and our app logs the current gesture information.
 
-import Codepen from '@site/src/components/Codepen';
-
 <Codepen user="ionic" slug="xxKBYdL" />
 
 ## Double Click Gesture
diff --git a/docs/vue/overview.md b/docs/vue/overview.md
@@ -2,6 +2,9 @@
 sidebar_label: Overview
 ---
 
+import DocsCard from '@site/src/components/DocsCard';
+import DocsCards from '@site/src/components/DocsCards';
+
 # Ionic Vue Overview
 
 `@ionic/vue` combines the core Ionic Framework experience with the tooling and APIs that are tailored to Vue Developers.
@@ -36,9 +39,6 @@ $ ionic serve █
 
 ## Resources
 
-import DocsCard from '@site/src/components/DocsCard';
-import DocsCards from '@site/src/components/DocsCards';
-
 <DocsCards>
   <DocsCard header="Getting Started" href="/docs/vue/your-first-app" icon="/icons/feature-component-actionsheet-icon.png">
     <p>Learn the fundamentals you need to know to start building amazing apps with Ionic Framework.</p>

-Original file line number
+Diff line change
@@ @@ -1,5 +1,6 @@ @@
 ---
 ---
++
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';