Skip to content

Commit c7de59e

Browse files
authored
New community projects (June 2024) (#79)
1 parent a89e170 commit c7de59e

16 files changed

+249
-3
lines changed

docs/.vitepress/theme/data/community-projects.ts

Lines changed: 57 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export type CardLinkType = 'article'|'podcast'|'repositoryGithub'|'video';
22

3-
export type CommunityProjectCategory = 'ai'|'game'|'ide'|'lowCode'|'tutorial';
3+
export type CommunityProjectCategory = 'ai'|'game'|'ide'|'tool'|'lowCode'|'tutorial';
44
export type CommunityProjectCategories = { [project in CommunityProjectCategory]: {
55
rgb: string;
66
title: string;
@@ -20,7 +20,12 @@ export const communityProjectCategories: CommunityProjectCategories = {
2020
ide: {
2121
rgb: '31, 143, 255',
2222
title: 'Browser IDE',
23-
titlePlural: 'Browser IDEs',
23+
titlePlural: 'Browser IDE',
24+
},
25+
tool: {
26+
rgb: '231, 203, 255',
27+
title: 'Tool',
28+
titlePlural: 'Tools',
2429
},
2530
lowCode: {
2631
rgb: '255, 9, 255',
@@ -56,6 +61,13 @@ export const communityProjectCardData: CommunityProjectCardData[] = [
5661
itemUrl: '/community-projects/stackblitz-codeflow',
5762
thumbnailUrl: '/img/community/codeflow.png',
5863
},
64+
{
65+
category: 'tutorial',
66+
title: 'Angular Tutorial',
67+
description: 'The official Angular Tutorial at angular.dev.',
68+
itemUrl: '/community-projects/angular-tutorial',
69+
thumbnailUrl: '/img/community/angular-tutorial.png',
70+
},
5971
{
6072
category: 'ai',
6173
title: 're:tune',
@@ -83,5 +95,47 @@ export const communityProjectCardData: CommunityProjectCardData[] = [
8395
description: `The API Security Academy is a new interactive learning platform focused on mastering GraphQL security.`,
8496
itemUrl: '/community-projects/api-security-academy',
8597
thumbnailUrl: '/img/community/api_security_academy.png',
86-
}
98+
},
99+
{
100+
category: 'ai',
101+
title: 'Otto Engineer',
102+
description: `The AI sidekick that tests its own code and iterates until it works.`,
103+
itemUrl: '/community-projects/otto-engineer',
104+
thumbnailUrl: '/img/community/otto_engineer.png',
105+
},
106+
{
107+
category: 'ide',
108+
title: 'Stylelint Playground',
109+
description: `A live playground where you can experiment with styleling rulesets using various packages.`,
110+
itemUrl: '/community-projects/stylelint-playground',
111+
thumbnailUrl: '/img/community/stylelint-playground.png',
112+
},
113+
{
114+
category: 'ide',
115+
title: 'builder.io playground',
116+
description: `Explore builder.io's visual editor fully in the browser.`,
117+
itemUrl: '/community-projects/builder-io-playground',
118+
thumbnailUrl: '/img/community/builder-io-playground.png',
119+
},
120+
{
121+
category: 'ide',
122+
title: 'VSLite',
123+
description: `A lighweight IDE-like experience with a fresh Node.js environment for you to play with.`,
124+
itemUrl: '/community-projects/vslite',
125+
thumbnailUrl: '/img/community/vslite.png',
126+
},
127+
{
128+
category: 'tool',
129+
title: 'pkg-size',
130+
description: `Find the true size of an npm package.`,
131+
itemUrl: '/community-projects/pkg-size',
132+
thumbnailUrl: '/img/community/pkg-size.png',
133+
},
134+
{
135+
category: 'tool',
136+
title: 'clack.cc',
137+
description: `Build your own custom CLI with a set of feature-rich components.`,
138+
itemUrl: '/community-projects/clack',
139+
thumbnailUrl: '/img/community/clack.png',
140+
},
87141
];

docs/.vitepress/theme/data/links.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,18 @@ export const tutorialLinks = [
2424
export const communityProjectsLinks = [
2525
{ text: 'All Projects', link: '/community-projects/all-projects' },
2626
{ text: 're:tune', link: '/community-projects/retune' },
27+
{ text: 'Angular Tutorial', link: '/community-projects/angular-tutorial' },
2728
{ text: 'schachnovelle', link: '/community-projects/schachnovelle' },
2829
{ text: 'StackBlitz Codeflow', link: '/community-projects/stackblitz-codeflow' },
2930
{ text: 'StackBlitz Web Publisher', link: '/community-projects/stackblitz-web-publisher' },
3031
{ text: 'SvelteKit', link: '/community-projects/sveltekit' },
3132
{ text: 'API Security Academy', link: '/community-projects/api-security-academy' },
33+
{ text: 'Otto Engineer', link: '/community-projects/otto-engineer' },
34+
{ text: 'Stylelint Playground', link: '/community-projects/stylelint-playground' },
35+
{ text: 'builder.io playground', link: '/community-projects/builder-io-playground' },
36+
{ text: 'VSLite', link: '/community-projects/vslite' },
37+
{ text: 'pkg-size', link: '/community-projects/pkg-size' },
38+
{ text: 'clack.cc', link: '/community-projects/clack' },
3239
];
3340

3441
export const footerSections = [
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
title: &title Angular Tutorial
3+
description: &description The official Angular Tutorial at angular.dev.
4+
outline: [2, 3]
5+
head:
6+
- ['meta', {property: 'og:title', content: *title}]
7+
- ['meta', {property: 'og:image', content: 'https://webcontainers.io/img/og/guide-community_inspirations.png'}]
8+
- ['meta', {name: 'twitter:title', content: *title}]
9+
- ['meta', {name: 'twitter:description', content: *description}]
10+
---
11+
<script setup lang="ts">
12+
import PageHeading from '@theme/components/Helpers/CommunityProjectPageHeading.vue';
13+
import Screenshot from '@theme/components/Helpers/Screenshot.vue';
14+
</script>
15+
16+
<PageHeading title="Angular Tutorial" category="tutorial" />
17+
18+
This interactive tutorial will teach you the basic building blocks to start building great apps with Angular.
19+
20+
You'll need to have basic familiarity with HTML, CSS and JavaScript to understand Angular.
21+
22+
Each step represents a concept in Angular. You can do one, or all of them.
23+
24+
If you get stuck, click "Reveal answer" at the top.
25+
26+
<Screenshot src="/img/community/angular-tutorial.png" alt="Angular Tutorial" href="https://angular.dev/tutorials/learn-angular" />
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
title: &title builder.io playground
3+
description: &description Explore builder.io's visual editor fully in the browser.
4+
outline: [2, 3]
5+
head:
6+
- ['meta', {property: 'og:title', content: *title}]
7+
- ['meta', {property: 'og:image', content: 'https://webcontainers.io/img/og/guide-community_inspirations.png'}]
8+
- ['meta', {name: 'twitter:title', content: *title}]
9+
- ['meta', {name: 'twitter:description', content: *description}]
10+
---
11+
<script setup lang="ts">
12+
import PageHeading from '@theme/components/Helpers/CommunityProjectPageHeading.vue';
13+
import Screenshot from '@theme/components/Helpers/Screenshot.vue';
14+
</script>
15+
16+
<PageHeading title="builder.io playground" category="ide" />
17+
18+
Explore builder.io's visual editor fully in the browser
19+
20+
<Screenshot src="/img/community/builder-io-playground.png" alt="builder.io playground" href="https://playground.builder.io/" />

docs/community-projects/clack.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
title: &title clack.cc
3+
description: &description Build your own custom CLI with a set of feature-rich components.
4+
outline: [2, 3]
5+
head:
6+
- ['meta', {property: 'og:title', content: *title}]
7+
- ['meta', {property: 'og:image', content: 'https://webcontainers.io/img/og/guide-community_inspirations.png'}]
8+
- ['meta', {name: 'twitter:title', content: *title}]
9+
- ['meta', {name: 'twitter:description', content: *description}]
10+
---
11+
<script setup lang="ts">
12+
import PageHeading from '@theme/components/Helpers/CommunityProjectPageHeading.vue';
13+
import Screenshot from '@theme/components/Helpers/Screenshot.vue';
14+
</script>
15+
16+
<PageHeading title="clack" category="tool" />
17+
18+
Building interactive command line applications doesn't have to be so hard. `@clack/core` provides unstyled, feature-rich components designed to be a strong foundation for your custom CLIs.
19+
20+
Of course, sometimes you just want to use something well-designed. That's why `@clack/prompts` comes out-of-the-box with beautiful prompts and a straightforward API.
21+
22+
<Screenshot src="/img/community/clack.png" alt="clack" href="https://www.clack.cc/" />
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
title: &title Otto Engineer | Community Projects
3+
description: &description The AI sidekick that tests its own code and iterates until it works.
4+
outline: [2, 3]
5+
head:
6+
- ['meta', {property: 'og:title', content: *title}]
7+
- ['meta', {property: 'og:image', content: 'https://webcontainers.io/img/og/guide-community_inspirations.png'}]
8+
- ['meta', {name: 'twitter:title', content: *title}]
9+
- ['meta', {name: 'twitter:description', content: *description}]
10+
---
11+
<script setup lang="ts">
12+
import PageHeading from '@theme/components/Helpers/CommunityProjectPageHeading.vue';
13+
import Screenshot from '@theme/components/Helpers/Screenshot.vue';
14+
</script>
15+
16+
<PageHeading title="Otto Engineer" category="ai" />
17+
18+
19+
Otto Engineer is an autonomous agent that takes AI-assisted coding to the next level.
20+
21+
* **Otto checks its work and iterates**: Otto executes its code and tests it to make sure it works. If there are errors, it will keep iterating until the code works 🦾
22+
* **Otto executes its code safely in isolation**: Otto is built on [Web Containers](https://webcontainers.io/guides/introduction), a runtime for executing Node.js and OS commands that runs entirely in the browser, with a virtual, in-memory file system 🤓
23+
* **Otto requires zero setup**: Since it all runs in the browser, you just start a new chat and put Otto to work, watching it run commands and edit code in the embedded terminal and editor 🔥
24+
* **Otto operates in a real environment**: Otto can install and use npm packages, tweak its TS config, and write its own tests. Say goodbye to hallucinated code that doesn't actually work 👋
25+
26+
<Screenshot src="/img/community/otto_engineer.png" alt="AI application" href="https://otto.engineer/" />

docs/community-projects/pkg-size.md

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
---
2+
title: &title pkg-size
3+
description: &description Find the true size of an npm package.
4+
outline: [2, 3]
5+
head:
6+
- ['meta', {property: 'og:title', content: *title}]
7+
- ['meta', {property: 'og:image', content: 'https://webcontainers.io/img/og/guide-community_inspirations.png'}]
8+
- ['meta', {name: 'twitter:title', content: *title}]
9+
- ['meta', {name: 'twitter:description', content: *description}]
10+
---
11+
<script setup lang="ts">
12+
import PageHeading from '@theme/components/Helpers/CommunityProjectPageHeading.vue';
13+
import Screenshot from '@theme/components/Helpers/Screenshot.vue';
14+
</script>
15+
16+
<PageHeading title="pkg-size" category="tool" />
17+
18+
<Screenshot src="/img/community/pkg-size.png" alt="pkg-size" href="https://pkg-size.dev/" />
19+
20+
Find the true size of an npm package.
21+
22+
# Why?
23+
24+
## **For Package Users**
25+
26+
### Get Insights
27+
* **Get insights:** Package dependencies can be deceiving—a package with one direct dependency may actually install 100 indirect dependencies. Find out everything getting installed.
28+
29+
### Install Cost
30+
* **Install cost:** The size of `node_modules` can easily get out of control. Be mindful of what you're installing and keep it in check.
31+
32+
### Bundle Cost
33+
* **Bundle cost:** Importing a large dependency to your web app can easily impact its performance. It can bloat your app, slow-down load time, and increase memory usage. Optimize for ESM packages that are tree-shakeable.
34+
35+
### **For Package Authors**
36+
37+
### Install Speed
38+
* **Install speed:** This is especially important if your package is used by CLI tools that can be loaded with [npx](https://docs.npmjs.com/cli/v8/commands/npx).
39+
40+
### Unideal Environments
41+
* **Unideal environments:** Your package may be downloaded with slow internet, on slow devices, with little storage. It may even be downloaded within the browser via WebContainers.
42+
43+
### Security
44+
* **Security:** Keeping dependencies to a minimum will reduce points of failure: unexpected breaking changes, malicious code, and dependency bloat.
45+
46+
<Screenshot src="/img/community/pkg-size.png" alt="pkg-size" href="https://pkg-size.dev/" />
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
title: &title Stylelint Playgound
3+
description: &description A live playground where you can experiment with styleling rulesets using various packages.
4+
outline: [2, 3]
5+
head:
6+
- ['meta', {property: 'og:title', content: *title}]
7+
- ['meta', {property: 'og:image', content: 'https://webcontainers.io/img/og/guide-community_inspirations.png'}]
8+
- ['meta', {name: 'twitter:title', content: *title}]
9+
- ['meta', {name: 'twitter:description', content: *description}]
10+
---
11+
<script setup lang="ts">
12+
import PageHeading from '@theme/components/Helpers/CommunityProjectPageHeading.vue';
13+
import Screenshot from '@theme/components/Helpers/Screenshot.vue';
14+
</script>
15+
16+
<PageHeading title="Stylelint Playgroung" category="ide" />
17+
18+
19+
With Stylelint playground you can experiment with rulesets defined in different npm packages by specifying them in package.json!
20+
21+
They are actually being installed – just as they would in your project
22+
23+
<Screenshot src="/img/community/stylelint-playground.png" alt="Stylelint Playground" href="https://chimerical-trifle-8d3c21.netlify.app/" />

docs/community-projects/vslite.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
title: &title VSLite
3+
description: &description A lighweight IDE-like experience with a fresh Node.js environment for you to play with.
4+
outline: [2, 3]
5+
head:
6+
- ['meta', {property: 'og:title', content: *title}]
7+
- ['meta', {property: 'og:image', content: 'https://webcontainers.io/img/og/guide-community_inspirations.png'}]
8+
- ['meta', {name: 'twitter:title', content: *title}]
9+
- ['meta', {name: 'twitter:description', content: *description}]
10+
---
11+
<script setup lang="ts">
12+
import PageHeading from '@theme/components/Helpers/CommunityProjectPageHeading.vue';
13+
import Screenshot from '@theme/components/Helpers/Screenshot.vue';
14+
</script>
15+
16+
<PageHeading title="VSLite" category="ide" />
17+
18+
A lighweight IDE-like experience with a fresh Node.js environment for you to play with.
19+
20+
Use terminal and write code using autocomplete-enabled editor:
21+
22+
<Screenshot src="/img/community/vslite.png" alt="vslite" href="https://vslite.dev/" />
312 KB
Loading

0 commit comments

Comments
 (0)