Adding dynamic banner and new contributor notes

CONTRIBUTING.md

@@ -0,0 +1,84 @@
+# Contributing to SolidJS
+
+Thank you for investing your time in contributing to our project! ✨.
+
+Read our [Code of Conduct](https://github.com/solidjs/solid/blob/main/CODE_OF_CONDUCT.md) to keep our community approachable and respectable. Solid accepts a number of contributions from the broader community. More hands indeed make lighter work. We're however selective of the types of contributions we receive.
+
+This usually involves vetting code quality, current focus, alignment with team philosophies etc. It's typically a good idea to submit a proposal for a change before spending time implementing it. This is to ensure that your efforts align with the current needs or more practically that work isn't completed by multiple contributors.
+
+Note: If you would like your project listed here please submit a PR or contact a core/ecosystem member on Discord.
+
+## Team Structure & Organization
+
+There are a lot of opportunities to get involved. We organize Solid community efforts via Discord and typically onboard dedicated contributors into focused teams:
+
+- Docs (headed by @Jutanium)
+- Infrastructure (headed by @davedbase)
+- Advocacy (headed by @hindsight)
+- Translators (headed by @davedbase)
+
+Most team members are part of the Ecosystem Team or Core Team. Entry into these groups is selected by Core Members only. We do not accept applications or request for entry. Selections are made ad-hoc according to internal needs. Selections are typically announced at Community Meetings which occur quarterly.
+
+## Meetings and Schedules
+
+SolidJS team members organize via Discord chat and audio channels. Channels exist to manage these conversations and threads within channels are used to focus on specific topics. A number of meetings occur weekly between each group howevere there is no set cadence or recurring schedule. Typically attendance for team members is requested to maintain membership, however we respect and recognize OSS contributions are typically ad hoc and as can be given by our members and generous donors.
+
+## Official Opportunities
+
+As a growing community, Solid has an on-going need for developers, writers, designers and general though leaders. The following is a list of openings and tasks that Core attempts to maintain often.
+
+### Docs Team
+
+- General support
+  - Improve and adapt documentation to future Solid versions
+  - Support docs team with new section writing, tutorial maintenance etc.
+  - Translate documentation or ensure documentation translations are aligned with English formats
+- Solid Start 1.0 API
+  - Learn and implement basic API documentation
+  - Organize and translate incoming tutorials and documentation sets
+
+### Infrastructure Team
+
+- Solid Site
+  - Help maintain the current Solid website by implementing bugs, testing and reporting issues
+  - Port the current website from being an SPA to Solid Start
+  - Website redevelopment project for 2.0
+- Solid Service API
+  - Help implement our API service that powers solid REPL
+  - Test, validate and implement security and bug fixes
+  - Add new missing features
+- Develop new Solid Docs platform and website
+  - Help coordinate creating MDX components
+  - Developer infrastructure for delivering future community documentation platform
+- Solidex (our ecosystem directory)
+  - How maintain a list of ecosystem projects and resources (articles, podcasts etc.)
+  - Vet incoming PR from submissions and merge + deploy updated the directory
+  - Improve workflow and systems for managing Solidex
+  - Implement an API (via Solid Service API) to search and filter resources
+- Solid Dev Tools
+  - We're actively looking for individuals to prototype and experiment on a set of developer tools.
+
+### Solid Start Team
+
+Solid Start is our new meta framework that focuses on enhancing Solid's DX story and general usability. Similar to SvelteKit, Next and other meta frameworks, this project is considered a primary core supported effort. Solid Start is approaching it's beta release and we're looking for developers to test, validate and build on top of it. Join the #solid-start channel on Discord or the [solid-start](https://github.com/solidjs/solid-start) to learn more.
+
+## Ecosystem Opportunities
+
+SolidJS core members maintain a separate project called [SolidJS Community](https://github.com/solidjs-community). This is a large and lush ecosystem community project that encompasses a number of critical core tooling such as Solid Primitives, Solid Aria (similar to React Aria) etc.
+
+The following are projects looking for leaders or support:
+
+- **Solid Aria** (lead by @fabien-ml): A port of React Aria
+- **Solid Examples** (lead by @foolswisdom): A list of examples, patterns and app implementations.
+- **Solid Codemod** (lead by @trivikr): Convert React or other libraries to Solid automatically.
+- **Solid Snippets** (lead by @thetarnav): VSCode snippet libraru
+- **Solid DSL** (lead by @davedbase): A project to explore enhancing JSX or other DSL options.
+- **Solid Primitives** (lead by @davedbase): A large primitives (hooks) library.
+
+Contributing to ecosystem projects is just as important as contributing to Solid core projects. As Solid grows a lush, well supported and high-quality set of packages and learning materials will benefit it's users and future viability.
+
+## Where do I start?
+
+If you haven't found any interesting information on this page then we encourage you to start hacking at a Solid related utility or package that does. Building useful tools for fellow OSS ecosystem and Solid users enhances the whole platform.
+
+We can't wait to see what you build!

README.md

@@ -1,5 +1,5 @@
 <p>
-  <img width="100%" src="https://raw.githubusercontent.com/solidjs/solid/master/banner.png" alt="SolidJS">
+  <img src="https://assets.solidjs.com/banner?project=Library&type=core" alt="SolidJS" />
 </p>
 
 [![Build Status](https://img.shields.io/github/workflow/status/solidjs/solid/Solid%20CI?logo=github&style=for-the-badge)](https://github.com/solidjs/solid/actions/workflows/main-ci.yml)
@@ -15,6 +15,7 @@
 Solid is a declarative JavaScript library for creating user interfaces. Instead of using a Virtual DOM, it compiles its templates to real DOM nodes and updates them with fine-grained reactions. Declare your state and use it throughout your app, and when a piece of state changes, only the code that depends on it will rerun. Check out our [intro video](https://www.youtube.com/watch?v=J70HXl1KhWE&ab_channel=SolidJS) or read on!
 
 ## Key Features
+
 - Fine-grained updates to the real DOM
 - Declarative data: model your state as a system with reactive primitives
 - Render-once mental model: your components are regular JavaScript functions that run once to set up your view
@@ -72,23 +73,26 @@ For TypeScript to work, remember to set your `.tsconfig` to handle Solid's JSX:
   "jsxImportSource": "solid-js",
 }
 ```
-</details>
 
+</details>
 
 ## Why Solid?
 
 ### Performant
+
 Meticulously engineered for performance and with half a decade of research behind it, Solid's performance is almost indistinguishable from optimized vanilla JavaScript (See Solid on the [JS Framework Benchmark](https://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts-results/table.html)). Solid is [small](https://bundlephobia.com/package/solid-js@1.3.15) and completely tree-shakable, and [fast](https://levelup.gitconnected.com/how-we-wrote-the-fastest-javascript-ui-framework-again-db097ddd99b6) when rendering on the server, too. Whether you're writing a fully client-rendered SPA or a server-rendered app, your users see it faster than ever. ([Read more about Solid's performance](https://dev.to/ryansolid/thinking-granular-how-is-solidjs-so-performant-4g37) from the library's creator.)
 
 ### Powerful
+
 Solid is fully-featured with everything you can expect from a modern framework. Performant state management is built-in with Context and Stores: you don't have to reach for a third party library to manage global state (if you don't want to). With Resources, you can use data loaded from the server like any other piece of state and build a responsive UI for it thanks to Suspense and concurrent rendering. And when you're ready to move to the server, Solid has full SSR and serverless support, with streaming and progressive hydration to get to interactive as quickly as possible. (Check out our full [interactive features walkthrough](https://www.solidjs.com/tutorial/introduction_basics).)
 
 ### Pragmatic
+
 Do more with less: use simple, composable primitives without hidden rules and gotchas. In Solid, components are just functions - rendering is determined purely by how your state is used - so you're free to organize your code how you like and you don't have to learn a new rendering system. Solid encourages patterns like declarative code and read-write segregation that help keep your project maintainable, but isn't opinionated enough to get in your way.
 
 ### Productive
-Solid is built on established tools like JSX and TypeScript and integrates with the Vite ecosystem. Solid's bare-metal, minimal abstractions give you direct access to the DOM, making it easy to use your favorite native JavaScript libraries like D3. And the Solid ecosystem is growing fast, with [custom primitives](https://github.com/solidjs-community/solid-primitives), [component libraries](https://hope-ui.com/), and build-time utilities that let you [write Solid code in new ways](https://github.com/LXSMNSYC/solid-labels).
 
+Solid is built on established tools like JSX and TypeScript and integrates with the Vite ecosystem. Solid's bare-metal, minimal abstractions give you direct access to the DOM, making it easy to use your favorite native JavaScript libraries like D3. And the Solid ecosystem is growing fast, with [custom primitives](https://github.com/solidjs-community/solid-primitives), [component libraries](https://hope-ui.com/), and build-time utilities that let you [write Solid code in new ways](https://github.com/LXSMNSYC/solid-labels).
 
 <details>
 <summary>Show Me!</summary>
@@ -98,7 +102,7 @@ import { render } from "solid-js/web";
 import { createSignal } from "solid-js";
 
 // A component is just a function that (optionally) accepts properties and returns a DOM node
-const Counter = (props) => {
+const Counter = props => {
   // Create a piece of reactive state, giving us a accessor, count(), and a setter, setCount()
   const [count, setCount] = createSignal(props.startingCount || 1);
 
@@ -127,11 +131,10 @@ See it in action in our interactive [Playground](https://playground.solidjs.com/
 Solid compiles our JSX down to efficient real DOM expressions updates, still using the same reactive primitives (`createSignal`) at runtime but making sure there's as little rerendering as possible. Here's what that looks like in this example:
 
 ```js
+import { render, createComponent, delegateEvents, insert, template } from "solid-js/web";
+import { createSignal } from "solid-js";
 
-import { render, createComponent, delegateEvents, insert, template } from 'solid-js/web';
-import { createSignal } from 'solid-js';
-
-const _tmpl$ = /*#__PURE__*/template(`<button type="button">Increment </button>`, 2);
+const _tmpl$ = /*#__PURE__*/ template(`<button type="button">Increment </button>`, 2);
 
 const Counter = props => {
   const [count, setCount] = createSignal(props.startingCount || 1);
@@ -142,7 +145,7 @@ const Counter = props => {
   return (() => {
     //_el$ is a real DOM node!
     const _el$ = _tmpl$.cloneNode(true);
-          _el$.firstChild;
+    _el$.firstChild;
 
     _el$.$$click = increment;
 
@@ -153,14 +156,18 @@ const Counter = props => {
   })();
 };
 
-render(() => createComponent(Counter, {
-  startingCount: 2
-}), document.getElementById("app"));
+render(
+  () =>
+    createComponent(Counter, {
+      startingCount: 2
+    }),
+  document.getElementById("app")
+);
 
 delegateEvents(["click"]);
 ```
-</details>
 
+</details>
 
 ## More