docs: Add VS Code docs and blog post. (#375)

* Start on doc page.

* Add report api.

* Add blog post.

* Fix script.

* Update config.

* Move file...

scripts/release/buildPackages.sh

@@ -5,6 +5,6 @@ cd scripts
 
 # Build all packages with moon itself, so that the order is resolved correctly
 npm install -g pnpm
-pnpm --package @moonrepo/cli@latest dlx moon run :build
+pnpm --package @moonrepo/cli@latest dlx moon run report:build runtime:build types:build
 
 # Note: yarn/npm/npx did not work here, but pnpm does!

website/blog/2022-09-26_v0.15.mdx

@@ -8,7 +8,6 @@ image: ./img/v0.15.png
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import Image from '@site/src/components/Image';
 
 With this release, we've focused heavily on Docker integration and enhancing the `Dockerfile`
 workflow, as well as some minor quality of life improvements for template files and run reports.

website/blog/2022-10-06_v0.16.mdx

@@ -6,10 +6,6 @@ tags: [toolchain, runner, generator, typescript, node]
 image: ./img/v0.16.png
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import Image from '@site/src/components/Image';
-
 With this release, we've landed a long standing request of supporting project-level overrides for
 tools configured in the workspace, as well as some quality of life improvements for TypeScript.
 

website/blog/2022-10-17_vscode-extension.mdx

@@ -0,0 +1,30 @@
+---
+slug: vscode-extension
+title: New VS Code extension!
+authors: [milesj]
+tags: [editors, vscode]
+---
+
+import Image from '@site/src/components/Image';
+
+We're very excited to announce the initial release of our Visual Studio Code extension!
+
+<!--truncate-->
+
+If you're a huge VS Code fan like us, you most likely use extensions in your everyday workflow. We
+want to enhance this experience by providing a fully integrated and interactive moon console! Here's
+a preview of what it looks like:
+
+<Image src={require('../docs/editors/vscode/projects-view.png')} width="40%" />
+
+Excited?? Want to learn more? Check out the official
+[moonrepo.moon-console](https://marketplace.visualstudio.com/items?itemName=moonrepo.moon-console)
+marketplace page, or read the [official documentation](../docs/editors/vscode). This is only the
+first iteration of the extension. Expect more advanced features in the future, like...
+
+- Schema validation for configuration files
+- Autocompletion for configuration files
+- Automatic running/building of projects in the background
+- File type association
+- Integrated language server
+- And much more!

website/docs/editors/vscode.mdx

@@ -0,0 +1,74 @@
+---
+title: VS Code extension
+sidebar_label: VS Code
+---
+
+import Image from '@site/src/components/Image';
+import TwoColumn from '@site/src/components/TwoColumn';
+
+Enhance your VS Code experience with our integrated moon console! Whether you're a fan of the
+command line, or prefer interactive interfaces, our console will be a welcome experience.
+
+> This extension is in its early stages. Expect more advanced features in the future, like
+> autocompletion, config validation, and more!
+
+## Views
+
+<div className="flex">
+  <div className="mr-2">
+    <Image
+    src={require('./vscode/activity-icon.png')}
+    alt="VS Code - Sidebar icon"
+    width="50px"
+    align="left"
+    padding="0"
+  />
+  </div>
+  <div>
+
+All views are available within the moon sidebar. Simply click the moon icon in the left activity
+bar!
+
+  </div>
+</div>
+
+<br />
+
+<TwoColumn aside={<Image src={require('./vscode/projects-view.png')} alt="VS Code view - Projects" />}>
+
+### Projects
+
+The backbone of moon is the projects view. In this view, all moon configured projects will be
+listed, categorized by their [`type`](../config/project#type), and designated with their
+[`language`](../config/project#language).
+
+Each project can then be expanded to view all available tasks. Tasks can be ran by clicking the `▶`
+icon, or using the command palette.
+
+> This view is available in both the "Explorer" and "moon" sidebars.
+
+</TwoColumn>
+
+<TwoColumn
+  aside={<Image src={require('./vscode/last-run-view.png')} alt="VS Code view - Last run" />}
+>
+
+### Last run
+
+Information about the last ran target will be displayed in a beautiful table with detailed stats.
+Only tasks ran from the [projects view](#projects), or with `--report` on the command line will be
+displayed here.
+
+This table displays all actions that were ran alongside the running primary target(s). They are
+ordered topologically via the dependency graph.
+
+</TwoColumn>
+
+## Troubleshooting
+
+View the
+[official VS Code marketplace](https://marketplace.visualstudio.com/items?itemName=moonrepo.moon-console)
+for more information on the extension, its commands, available settings, and more!
+
+If you encounter a bug, or have a feature request, please submit them to the
+[moonrepo/dev](https://github.com/moonrepo/dev/tree/master/packages/vscode-extension) repository!

website/docusaurus.config.js

@@ -68,7 +68,7 @@ const config = {
 				{
 					name: 'keywords',
 					content:
-						'moon, repo, build, system, ci, times, devx, developer, experience, tooling, tools',
+						'moon, repo, build, system, ci, times, devx, developer, experience, tooling, tools, monorepo, polyrepo',
 				},
 				{
 					name: 'og:image',
@@ -116,6 +116,10 @@ const config = {
 								label: '@moonrepo/dev',
 								href: 'https://www.npmjs.com/package/@moonrepo/dev',
 							},
+							{
+								label: '@moonrepo/report',
+								href: 'https://www.npmjs.com/package/@moonrepo/report',
+							},
 							{
 								label: '@moonrepo/types',
 								href: 'https://www.npmjs.com/package/@moonrepo/types',
@@ -184,7 +188,7 @@ const config = {
 								to: 'https://github.com/moonrepo/moon/discussions',
 							},
 							{
-								label: 'Tooling configs',
+								label: 'Developer tools',
 								href: 'https://github.com/moonrepo/dev',
 							},
 							{
@@ -212,9 +216,9 @@ const config = {
 			'docusaurus-plugin-typedoc-api',
 			{
 				projectRoot: path.join(__dirname, '..'),
-				packages: ['packages/runtime', 'packages/types'],
+				packages: ['packages/report', 'packages/runtime', 'packages/types'],
 				minimal: true,
-				readme: true,
+				readmes: true,
 			},
 		],
 		function tailwind() {

website/sidebars.js

@@ -51,6 +51,17 @@ const sidebars = {
 				keywords: ['config'],
 			},
 		},
+		{
+			type: 'category',
+			label: 'Editors',
+			items: ['editors/vscode'],
+			link: {
+				type: 'generated-index',
+				title: 'Editors',
+				slug: '/editors',
+				keywords: ['editors', 'vscode'],
+			},
+		},
 		{
 			type: 'category',
 			label: 'Commands',

website/src/components/Image.tsx

@@ -5,11 +5,20 @@ export interface ImageProps {
 	width?: string;
 	alt?: string;
 	title?: string;
+	align?: 'center' | 'left' | 'right';
+	padding?: string;
 }
 
-export default function Image({ src, width = '90%', alt = '', title }: ImageProps) {
+export default function Image({
+	src,
+	width = '90%',
+	alt = '',
+	title,
+	align = 'center',
+	padding = '1rem',
+}: ImageProps) {
 	return (
-		<div style={{ paddingBottom: '1rem', paddingTop: '1rem', textAlign: 'center' }}>
+		<div style={{ paddingBottom: padding, paddingTop: padding, textAlign: align }}>
 			<img src={src.default} width={width} alt={alt} title={title} />
 		</div>
 	);

website/src/components/TwoColumn.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import clsx from 'clsx';
+
+export interface TwoColumnProps {
+	aside: React.ReactNode;
+	children: React.ReactNode;
+	reversed?: boolean;
+}
+
+export default function TwoColumn({ children, aside, reversed }: TwoColumnProps) {
+	return (
+		<section className="sm:grid gap-2 grid-cols-5 mb-4">
+			<div className={clsx('col-span-3', reversed && 'order-2')}>{children}</div>
+			<aside className={clsx('col-span-2', reversed && 'order-1')}>{aside}</aside>
+		</section>
+	);
+}

website/src/pages/index.tsx

@@ -172,8 +172,13 @@ const additionalFeatures: Feature[] = [
 	{
 		title: 'Editor extensions',
 		icon: faChartTreeMap,
-		description: 'Utilize moon extensions in your favorite editor.',
-		status: 'coming-soon',
+		description: (
+			<>
+				Utilize moon extensions in your favorite editor, like{' '}
+				<Link href="/docs/editors/vscode">Visual Studio Code</Link>.
+			</>
+		),
+		status: 'new',
 	},
 ];