Skip to content

Commit 9c06008

Browse files
gnbmCopilot
andauthored
docs(vscode): update VS Code Extension page to reflect the deprecation of the previous version (#4207)
* Fixed broken link to @awesome-cordova-plugins/ionic-webview * Added support to run release notes using Windows * Update cspell-wordlist.txt * Update vscode-extension.md * Fix buttons height * Update vscode-extension.md * Update docs/intro/vscode-extension.md Co-authored-by: Copilot <[email protected]> * Added custom styling * Update versioned_docs/version-v5/native/ionic-webview.md Co-authored-by: Copilot <[email protected]> * Update src/styles/custom.scss Co-authored-by: Copilot <[email protected]> * Update docs/intro/vscode-extension.md Co-authored-by: Copilot <[email protected]> * Update vscode-extension.md * Update custom.scss * Update vscode-extension.md * Fix styles broken and semantics * Update src/styles/custom.scss Co-authored-by: Copilot <[email protected]> --------- Co-authored-by: Copilot <[email protected]>
1 parent df879af commit 9c06008

File tree

8 files changed

+137
-117
lines changed

8 files changed

+137
-117
lines changed

cspell-wordlist.txt

Lines changed: 83 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,83 @@
1-
Appflow
2-
Codepen
3-
Firestore
4-
Genymotion
5-
Hygen
6-
Ionicon
7-
Ionicons
8-
Logcat
9-
Maskito
10-
Pluralsight
11-
Swiper
12-
Udemy
13-
Vetur
14-
Wistia
15-
WCAG
16-
17-
actionsheet
18-
fabs
19-
datetime
20-
datetimes
21-
datetimepicker
22-
infinitescroll
23-
searchbar
24-
searchbars
25-
sidemenu
26-
textarea
27-
textareas
28-
29-
appstore
30-
authed
31-
autogrow
32-
automations
33-
autoplay
34-
Callout
35-
comparewith
36-
composables
37-
engageable
38-
flexbox
39-
frontmatter
40-
fullscreen
41-
geolocation
42-
interactives
43-
isopen
44-
jank
45-
janky
46-
jarsigner
47-
jsdelivr
48-
keyframes
49-
keytool
50-
lifecycles
51-
localstorage
52-
mobileweb
53-
phablet
54-
playstore
55-
preconfigured
56-
preflighted
57-
proxying
58-
quickstart
59-
retargeted
60-
runtimes
61-
scroller
62-
subcomponent
63-
subcomponents
64-
swipeable
65-
templating
66-
transpiling
67-
treeshaking
68-
triaging
69-
typeahead
70-
unminified
71-
unsanitized
72-
viewports
73-
webapps
74-
webviews
75-
xlarge
76-
xsmall
77-
78-
allowtransparency
79-
mozallowfullscreen
80-
msallowfullscreen
81-
oallowfullscreen
82-
webkitallowfullscreen
1+
Appflow
2+
Codepen
3+
Firestore
4+
Genymotion
5+
Hygen
6+
Ionicon
7+
Ionicons
8+
Logcat
9+
Maskito
10+
Pluralsight
11+
Swiper
12+
Udemy
13+
Vetur
14+
Wistia
15+
WCAG
16+
17+
actionsheet
18+
fabs
19+
datetime
20+
datetimes
21+
datetimepicker
22+
infinitescroll
23+
searchbar
24+
searchbars
25+
sidemenu
26+
textarea
27+
textareas
28+
29+
appstore
30+
authed
31+
autogrow
32+
automations
33+
autoplay
34+
Callout
35+
comparewith
36+
composables
37+
engageable
38+
flexbox
39+
frontmatter
40+
fullscreen
41+
geolocation
42+
interactives
43+
isopen
44+
jank
45+
janky
46+
jarsigner
47+
jsdelivr
48+
keyframes
49+
keytool
50+
lifecycles
51+
localstorage
52+
mobileweb
53+
phablet
54+
playstore
55+
preconfigured
56+
preflighted
57+
proxying
58+
quickstart
59+
retargeted
60+
runtimes
61+
scroller
62+
subcomponent
63+
subcomponents
64+
swipeable
65+
templating
66+
transpiling
67+
treeshaking
68+
triaging
69+
typeahead
70+
unminified
71+
unsanitized
72+
viewports
73+
webapps
74+
webviews
75+
xlarge
76+
xsmall
77+
78+
allowtransparency
79+
mozallowfullscreen
80+
msallowfullscreen
81+
oallowfullscreen
82+
webkitallowfullscreen
83+
webnative

docs/core-concepts/webview.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ import { Capacitor } from '@capacitor/core';
4242
Capacitor.convertFileSrc(filePath);
4343
```
4444

45-
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).
45+
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).
4646

4747
### Implementations
4848

docs/intro/vscode-extension.md

Lines changed: 19 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,30 @@
11
---
2-
title: Ionic VS Code Extension
2+
title: VS Code Extension
33
---
44

55
<head>
6-
<title>Using the Ionic Visual Studio Code Extension</title>
7-
<meta
8-
name="description"
9-
content="The Ionic Visual Studio Code extension helps you perform various functions that are common to developing an Ionic app"
10-
/>
6+
<title>VS Code Extension</title>
7+
<meta name="description" content="Using the Ionic/Ionic-Framework VS Code Extension" />
118
</head>
129

13-
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.
10+
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.
1411

15-
## Create a New Project
12+
If you have VS Code on this computer click Install below. You can also find the extension by searching for "WebNative".
1613

17-
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.
14+
<a href="vscode:extension/webnative.webnative" target="_self">
15+
<button className="install-button">Install</button>
16+
</a>
17+
<a href="https://webnative.dev/introduction/getting-started/" target="_self">
18+
<button className="docs-button">Docs</button>
19+
</a>
1820

19-
<img
20-
src="https://user-images.githubusercontent.com/84595830/159510276-6766a5b8-132d-4284-a3fa-cd6374d64891.gif"
21-
alt="Video of creating a project"
22-
/>
21+
## Additional Documentation
2322

24-
With the new project created, the extension will provide access to all of the common tasks in your `package.json`.
23+
Full documentation of the WebNative extension can be found at [webnative.dev](https://webnative.dev/introduction/getting-started/) covering topics like:
2524

26-
## Adding Capacitor
27-
28-
You can also add [Capacitor](https://capacitorjs.com/) to your application by choosing "Integrate Capacitor".
29-
30-
<img
31-
src="https://user-images.githubusercontent.com/84595830/159510570-b5a151bb-2e17-42c8-8cab-bffbaa849576.gif"
32-
alt="Video of adding Capacitor"
33-
/>
34-
35-
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.
36-
37-
## Doing More
38-
39-
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).
25+
- Building, debugging and running your Ionic Framework application.
26+
- Bundle analysis, dependency upgrades.
27+
- Migration from Cordova.
28+
- Changing native settings.
29+
- Splash Screens & Icons.
30+
- Developing without a Mac using the WebNative app.

scripts/release-notes.mjs

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import pkg from 'fs-extra';
22
import fetch from 'node-fetch';
3-
import { resolve } from 'path';
3+
import { resolve, dirname } from 'path';
44
import { compare } from 'semver';
5-
import { URL } from 'url';
5+
import { URL, fileURLToPath } from 'url';
66

77
import { renderMarkdown } from './utils.mjs';
88

9-
const __dirname = new URL('.', import.meta.url).pathname;
9+
const __filename = fileURLToPath(import.meta.url);
10+
const __dirname = dirname(__filename);
1011
const OUTPUT_PATH = resolve(__dirname, '../src/components/page/reference/ReleaseNotes/release-notes.json');
1112

1213
// export default {

src/styles/custom.scss

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ html[data-theme='light'] {
6161

6262
--ifm-code-background: var(--c-indigo-10);
6363
--ifm-font-color-base: var(--c-carbon-90);
64+
--ifm-info-color-bg: var(--c-carbon-90);
6465
}
6566

6667
html[data-theme='dark'] {
@@ -82,6 +83,7 @@ html[data-theme='dark'] {
8283
--ifm-font-color-base: var(--c-carbon-10);
8384
--ifm-background-color: var(--token-primary-bg-c);
8485
--ifm-dropdown-background-color: var(--token-secondary-bg-c);
86+
--ifm-info-color-bg: var(--c-carbon-10);
8587

8688
--ifm-menu-link-sublist-icon-filter: invert(100%);
8789
}
@@ -225,3 +227,27 @@ iframe {
225227
}
226228
}
227229
}
230+
231+
.install-button {
232+
background-color: var(--ifm-info-color-bg);
233+
border: 2px solid var(--ifm-font-color-base);
234+
border-radius: 100px;
235+
color: var(--admonition-info-c-bg);
236+
cursor: pointer;
237+
font-weight: bold;
238+
padding: 16px;
239+
padding-left: 32px;
240+
padding-right: 32px;
241+
}
242+
243+
.docs-button {
244+
background-color: transparent;
245+
border: 2px solid var(--ifm-font-color-base);
246+
border-radius: 100px;
247+
color: var(--ifm-font-color-base);
248+
cursor: pointer;
249+
font-weight: bold;
250+
padding: 16px;
251+
padding-left: 32px;
252+
padding-right: 32px;
253+
}

versioned_docs/version-v5/native/ionic-webview.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,9 @@ Requires the Cordova plugin: `cordova-plugin-ionic-webview` > 2.0. For more info
5353
</TabItem>
5454
<TabItem value="Cordova">
5555
<CodeBlock className="language-shell">
56-
$ ionic cordova plugin add cordova-plugin-ionic-webview {'\n'}$ npm install @awesome-cordova-plugins/ionic-webview{' '}
56+
$ ionic cordova plugin add cordova-plugin-ionic-webview {'\n'}$ npm install @awesome-cordova-plugins/ionic-webview
5757
{'\n'}
58+
# For more information, visit: [Awesome Cordova Plugins - Ionic WebView](https://danielsogl.gitbook.io/awesome-cordova-plugins/ionic-webview)
5859
</CodeBlock>
5960
</TabItem>
6061
<TabItem value="Enterprise">

versioned_docs/version-v6/core-concepts/webview.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ import { Capacitor } from '@capacitor/core';
4242
Capacitor.convertFileSrc(filePath);
4343
```
4444

45-
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).
45+
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).
4646

4747
### Implementations
4848

versioned_docs/version-v7/core-concepts/webview.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ import { Capacitor } from '@capacitor/core';
4242
Capacitor.convertFileSrc(filePath);
4343
```
4444

45-
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).
45+
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).
4646

4747
### Implementations
4848

0 commit comments

Comments
 (0)