diff --git a/cspell-wordlist.txt b/cspell-wordlist.txt index 0889274c70b..13a8a710581 100644 --- a/cspell-wordlist.txt +++ b/cspell-wordlist.txt @@ -1,82 +1,83 @@ -Appflow -Codepen -Firestore -Genymotion -Hygen -Ionicon -Ionicons -Logcat -Maskito -Pluralsight -Swiper -Udemy -Vetur -Wistia -WCAG - -actionsheet -fabs -datetime -datetimes -datetimepicker -infinitescroll -searchbar -searchbars -sidemenu -textarea -textareas - -appstore -authed -autogrow -automations -autoplay -Callout -comparewith -composables -engageable -flexbox -frontmatter -fullscreen -geolocation -interactives -isopen -jank -janky -jarsigner -jsdelivr -keyframes -keytool -lifecycles -localstorage -mobileweb -phablet -playstore -preconfigured -preflighted -proxying -quickstart -retargeted -runtimes -scroller -subcomponent -subcomponents -swipeable -templating -transpiling -treeshaking -triaging -typeahead -unminified -unsanitized -viewports -webapps -webviews -xlarge -xsmall - -allowtransparency -mozallowfullscreen -msallowfullscreen -oallowfullscreen -webkitallowfullscreen +Appflow +Codepen +Firestore +Genymotion +Hygen +Ionicon +Ionicons +Logcat +Maskito +Pluralsight +Swiper +Udemy +Vetur +Wistia +WCAG + +actionsheet +fabs +datetime +datetimes +datetimepicker +infinitescroll +searchbar +searchbars +sidemenu +textarea +textareas + +appstore +authed +autogrow +automations +autoplay +Callout +comparewith +composables +engageable +flexbox +frontmatter +fullscreen +geolocation +interactives +isopen +jank +janky +jarsigner +jsdelivr +keyframes +keytool +lifecycles +localstorage +mobileweb +phablet +playstore +preconfigured +preflighted +proxying +quickstart +retargeted +runtimes +scroller +subcomponent +subcomponents +swipeable +templating +transpiling +treeshaking +triaging +typeahead +unminified +unsanitized +viewports +webapps +webviews +xlarge +xsmall + +allowtransparency +mozallowfullscreen +msallowfullscreen +oallowfullscreen +webkitallowfullscreen +webnative diff --git a/docs/core-concepts/webview.md b/docs/core-concepts/webview.md index 17382c430e1..d32f338a4dc 100644 --- a/docs/core-concepts/webview.md +++ b/docs/core-concepts/webview.md @@ -42,7 +42,7 @@ import { Capacitor } from '@capacitor/core'; Capacitor.convertFileSrc(filePath); ``` -For Cordova apps, the [Ionic Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview) provides a utility function for converting File URIs: `window.Ionic.WebView.convertFileSrc()`. There is also a corresponding Ionic Native plugin: [`@awesome-cordova-plugins/ionic-webview`](../native/ionic-webview.md). +For Cordova apps, the [Ionic Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview) provides a utility function for converting File URIs: `window.Ionic.WebView.convertFileSrc()`. There is also a corresponding Ionic Native plugin: [`@awesome-cordova-plugins/ionic-webview`](https://danielsogl.gitbook.io/awesome-cordova-plugins/ionic-webview). ### Implementations diff --git a/docs/intro/vscode-extension.md b/docs/intro/vscode-extension.md index 4c4a58e9791..2a4d3bddeac 100644 --- a/docs/intro/vscode-extension.md +++ b/docs/intro/vscode-extension.md @@ -1,39 +1,30 @@ --- -title: Ionic VS Code Extension +title: VS Code Extension --- - Using the Ionic Visual Studio Code Extension - + VS Code Extension + -The Ionic Visual Studio Code extension helps you perform various functions that are common to developing an Ionic app, all without leaving your VS Code window. You can install the [extension on the Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ionic.ionic). Once you have the extension installed, you'll see the Ionic logo in the activity bar. +The [WebNative Visual Studio Code extension](https://marketplace.visualstudio.com/items?itemName=WebNative.webnative) is a community-maintained plugin that helps you perform common Ionic Framework development tasks without needing to remember CLI commands. -## Create a New Project +If you have VS Code on this computer click Install below. You can also find the extension by searching for "WebNative". -From an empty directory, you can create a new Angular, React, or Vue project by clicking one of the template options and providing an app name. + + + + + + -Video of creating a project +## Additional Documentation -With the new project created, the extension will provide access to all of the common tasks in your `package.json`. +Full documentation of the WebNative extension can be found at [webnative.dev](https://webnative.dev/introduction/getting-started/) covering topics like: -## Adding Capacitor - -You can also add [Capacitor](https://capacitorjs.com/) to your application by choosing "Integrate Capacitor". - -Video of adding Capacitor - -With Capacitor integrated, you can now run your app on web, Android, and iOS with the "Run On Web", "Run On Android", and "Run On iOS" options. - -## Doing More - -There is so much the Ionic VS Code extension can help with, including migrations, debugging, monorepo support, and more. For the full list of all of the extension's capabilities, checkout the [extension overview on the VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=ionic.ionic). +- Building, debugging and running your Ionic Framework application. +- Bundle analysis, dependency upgrades. +- Migration from Cordova. +- Changing native settings. +- Splash Screens & Icons. +- Developing without a Mac using the WebNative app. diff --git a/scripts/release-notes.mjs b/scripts/release-notes.mjs index 6e3effd8dbe..a4e82310881 100644 --- a/scripts/release-notes.mjs +++ b/scripts/release-notes.mjs @@ -1,12 +1,13 @@ import pkg from 'fs-extra'; import fetch from 'node-fetch'; -import { resolve } from 'path'; +import { resolve, dirname } from 'path'; import { compare } from 'semver'; -import { URL } from 'url'; +import { URL, fileURLToPath } from 'url'; import { renderMarkdown } from './utils.mjs'; -const __dirname = new URL('.', import.meta.url).pathname; +const __filename = fileURLToPath(import.meta.url); +const __dirname = dirname(__filename); const OUTPUT_PATH = resolve(__dirname, '../src/components/page/reference/ReleaseNotes/release-notes.json'); // export default { diff --git a/src/styles/custom.scss b/src/styles/custom.scss index 0dba75fe64e..b518dd5de32 100644 --- a/src/styles/custom.scss +++ b/src/styles/custom.scss @@ -61,6 +61,7 @@ html[data-theme='light'] { --ifm-code-background: var(--c-indigo-10); --ifm-font-color-base: var(--c-carbon-90); + --ifm-info-color-bg: var(--c-carbon-90); } html[data-theme='dark'] { @@ -82,6 +83,7 @@ html[data-theme='dark'] { --ifm-font-color-base: var(--c-carbon-10); --ifm-background-color: var(--token-primary-bg-c); --ifm-dropdown-background-color: var(--token-secondary-bg-c); + --ifm-info-color-bg: var(--c-carbon-10); --ifm-menu-link-sublist-icon-filter: invert(100%); } @@ -225,3 +227,27 @@ iframe { } } } + +.install-button { + background-color: var(--ifm-info-color-bg); + border: 2px solid var(--ifm-font-color-base); + border-radius: 100px; + color: var(--admonition-info-c-bg); + cursor: pointer; + font-weight: bold; + padding: 16px; + padding-left: 32px; + padding-right: 32px; +} + +.docs-button { + background-color: transparent; + border: 2px solid var(--ifm-font-color-base); + border-radius: 100px; + color: var(--ifm-font-color-base); + cursor: pointer; + font-weight: bold; + padding: 16px; + padding-left: 32px; + padding-right: 32px; +} diff --git a/versioned_docs/version-v5/native/ionic-webview.md b/versioned_docs/version-v5/native/ionic-webview.md index 9f519d62ebc..0942368d3f4 100644 --- a/versioned_docs/version-v5/native/ionic-webview.md +++ b/versioned_docs/version-v5/native/ionic-webview.md @@ -53,8 +53,9 @@ Requires the Cordova plugin: `cordova-plugin-ionic-webview` > 2.0. For more info - $ ionic cordova plugin add cordova-plugin-ionic-webview {'\n'}$ npm install @awesome-cordova-plugins/ionic-webview{' '} + $ ionic cordova plugin add cordova-plugin-ionic-webview {'\n'}$ npm install @awesome-cordova-plugins/ionic-webview {'\n'} + # For more information, visit: [Awesome Cordova Plugins - Ionic WebView](https://danielsogl.gitbook.io/awesome-cordova-plugins/ionic-webview) diff --git a/versioned_docs/version-v6/core-concepts/webview.md b/versioned_docs/version-v6/core-concepts/webview.md index 359ead6fae3..7d1f6aaac1f 100644 --- a/versioned_docs/version-v6/core-concepts/webview.md +++ b/versioned_docs/version-v6/core-concepts/webview.md @@ -42,7 +42,7 @@ import { Capacitor } from '@capacitor/core'; Capacitor.convertFileSrc(filePath); ``` -For Cordova apps, the [Ionic Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview) provides a utility function for converting File URIs: `window.Ionic.WebView.convertFileSrc()`. There is also a corresponding Ionic Native plugin: [`@awesome-cordova-plugins/ionic-webview`](../native/ionic-webview.md). +For Cordova apps, the [Ionic Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview) provides a utility function for converting File URIs: `window.Ionic.WebView.convertFileSrc()`. There is also a corresponding Ionic Native plugin: [`@awesome-cordova-plugins/ionic-webview`](https://danielsogl.gitbook.io/awesome-cordova-plugins/ionic-webview). ### Implementations diff --git a/versioned_docs/version-v7/core-concepts/webview.md b/versioned_docs/version-v7/core-concepts/webview.md index 17382c430e1..d32f338a4dc 100644 --- a/versioned_docs/version-v7/core-concepts/webview.md +++ b/versioned_docs/version-v7/core-concepts/webview.md @@ -42,7 +42,7 @@ import { Capacitor } from '@capacitor/core'; Capacitor.convertFileSrc(filePath); ``` -For Cordova apps, the [Ionic Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview) provides a utility function for converting File URIs: `window.Ionic.WebView.convertFileSrc()`. There is also a corresponding Ionic Native plugin: [`@awesome-cordova-plugins/ionic-webview`](../native/ionic-webview.md). +For Cordova apps, the [Ionic Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview) provides a utility function for converting File URIs: `window.Ionic.WebView.convertFileSrc()`. There is also a corresponding Ionic Native plugin: [`@awesome-cordova-plugins/ionic-webview`](https://danielsogl.gitbook.io/awesome-cordova-plugins/ionic-webview). ### Implementations