Adds DrupalPod vscode extension

[mradcliffe]

The Problem/Issue/Bug

Novice contributors or contributors new to DrupalPod should have a Welcome or Startup page for how to use DrupalPod to contribute to Drupal Core and Contrib. This should augment the Community Contribution Guide on drupal.org.

How this PR Solves The Problem

Adds a vscode drupalpod-ext extension that can be published on OpenVSX and added to .gitpod.yml.

Remaining tasks

• Initial extension scaffold
• Adds an initial guide
• Adds a OpenVSX / VISX publish + unit test GitHub Actions
• Adds the extension name to .gitpod.yml
• Opens command on startup

Manual Testing Instructions

Until there's a published extension,

1. Launch DrupalPod
2. In Terminal:
   1. cd src/vscode-extension/drupalpod-ext/
   2. yarn install
   3. yarn package
3. Go to the Extensions tab
4. Press Views and More Actions button (...) > Install from VSIX...
5. Browse to src/vscode-extension/drupalpod-ext/ and choose drupalpod-ext-0.0.2.vsix
6. Open the Command Pallette
7. Run > Drupal: Getting Started Contributing with DrupalPod

See the src/vscode-extension/drupalpod-ext/README.md file

Related Issue Link(s)

Release/Deployment notes

[gitpod-io]

[mradcliffe]

Thinking about the content, I think an initial resolution for this PR would be a non-interactive tour, but ideally we could create something as fancy as we want. We can assume the Gitpod environment.

I think for a basic thing, hard-coding html is fine, but we could pull in remarkable (or markdown-it) as a dependency of the extension if we want to render from markdown files. Or do a fancy CSS Grid image/icon map / menu to link to sections of a document.

Here's what I came up with for an outline of a basic tour from my memory of the DrupalPod demo. What do you think?

Getting Started with DrupalPod

1. Tell the user to wait until Terminal ⬇️ is finished and Drupal installer to the right 🔜.
2. Simple Browser ➡️ you can install and use Drupal from the Simple Browser. Go ahead and install Drupal now. You will use "db" as the username, password, database name and host (Advanced Options) using the MariaDB option.
3. Files ⬅️ Can access and modify files in Drupal core and contrib by going expanding the "repos" directory
4. Remote Explorer ⬅️ Shows the services provided by DrupalPod. Find the 8080 item in the list, clicking the "globe" icon button will open the site in a new browser tab. Clicking the "Open Preview" icon button will open the site in the Simple Browser.
5. Terminal ⬇️ Can use the terminal to run git, ddev and drush. Let's use it to setup your SSH access if you have not done so already.
   • Run the following command in the Terminal, .gitpod/drupal/ssh/00-interactive-ssh-setup.sh and then follow the instructions in the tab that appears.

What's Next?

• Join us on Drupal Slack (d.o. link) in the #contribute channel
• Find a Contributor Task (d.o. link) in the Contributor's Guide (d.o. link)
  • Manually test an issue
  • Write a patch / contribute to an issue fork/merge request
  • Write an automated test
  • Find your role (d.o. link) or skill (d.o. link) to learn more about how to contribute.

[mradcliffe]

do you think the following tasks should be follow-ups once the extension is in the repo so that it can be published and updated initially?

Adds a OpenVSX / VISX publish + unit test GitHub Actions 
Adds the extension name to .gitpod.yml

Then the extension is technically usable by installing it manually.

[mradcliffe]

What's a good alternative directory for vscode and/or browser extension source?

[shaal]

What's a good alternative directory for vscode and/or browser extension source
What do you think about DrupalPod/ directory? or src/ directory?

[mradcliffe]

Is src/ already used by composer PHP files?

Maybe .gitpod/DrupalPod or DrupalPod?

[shaal]

src/ currently used for setting up Drupal core contributions, but can be moved to src/core-compoare or something

[bsnodgrass]

Nice work... Looking at this as a new contributor I expect the links in the Getting started Contributing to Drupal to open somewhere, right click I only have the option to Cut or Copy.

Your comment above seems like you are already thinking of this and the content is still being looked at.

[shaal]

@mradcliffe I propose the following file structure, under src/, divided to these main directories

• browser-extension
• composer
• vscode-extension

And full structure here:

src
├── browser-extension
│   └── drupalpod-browser-extension
│       ├── css
│       │   ├── options.css
│       │   └── popup.css
│       ├── icons
│       │   ├── DrupalPod-128.png
│       │   └── DrupalPod-128x128.png
│       ├── LICENSE
│       ├── manifest.json
│       ├── options.html
│       ├── popup.html
│       ├── README.md
│       └── scripts
│           ├── background.js
│           ├── options.js
│           └── popup.js
├── composer
│   └── ComposerScripts.php
└── vscode-extension
    └── drupalpod-ext
        ├── CHANGELOG.md
        ├── package.json
        ├── README.md
        ├── src
        │   ├── extension.ts
        │   ├── help-content.ts
        │   └── test
        │       ├── runTest.ts
        │       └── suite
        │           ├── extension.test.ts
        │           └── index.ts
        ├── tsconfig.json
        └── yarn.lock

What do you think?

[mradcliffe]

That makes a lot of sense. I moved the files and fixed the current merge conflict with #30 .

[shaal]

@mradcliffe Thank you!! 🎉