chore(meta): docs folder

Author: avivkeller

COLLABORATOR_GUIDE.md

@@ -0,0 +1,39 @@
+# Node.js Website Documentation
+
+This directory contains documentation for contributing to the Node.js website project.
+
+## Getting Started
+
+New to contributing? Start here:
+
+- **[Getting Started](./getting-started.md)** - Set up your development environment and make your first contribution
+- **[Adding Pages](./adding-pages.md)** - Learn how to create new pages and content
+
+## Development Guidelines
+
+- **[Code Style](./code-style.md)** - Coding standards and formatting guidelines
+- **[Creating Components](./creating-components.md)** - Best practices for React component development
+- **[Writing Tests](./writing-tests.md)** - Testing guidelines for unit tests, E2E tests, and Storybooks
+
+## Technical Documentation
+
+- **[Technologies](./technologies.md)** - Overview of the tech stack and architecture decisions
+- **[Downloads Page](./downloads-page.md)** - How to add installation methods and package managers
+- **[Package Publishing](./package-publishing.md)** - Guidelines for publishing packages in our monorepo
+
+## For Collaborators
+
+- **[Collaborator Guide](./collaborator-guide.md)** - Guidelines specific to project collaborators with write access
+
+## Additional Resources
+
+- [Translation Guidelines](./translation.md) - Website translation policy
+- [Dependency Pinning](./dependency-pinning.md) - Package management guidelines
+- [Code of Conduct](https://github.com/nodejs/node/blob/HEAD/CODE_OF_CONDUCT.md)
+
+## Quick Reference
+
+- **Repository Structure**: See [Technologies](./technologies.md#structure-of-this-repository)
+- **Component Guidelines**: See [Creating Components](./creating-components.md)
+- **Commit Guidelines**: See [Code Style](./code-style.md#commit-guidelines)
+- **Pull Request Policy**: See [Collaborator Guide](./collaborator-guide.md#pull-request-policy)

CONTRIBUTING.md

@@ -0,0 +1,313 @@
+# Adding Pages
+
+This guide explains how to create new pages and content for the Node.js website.
+
+## Table of Contents
+
+- [Page Creation Process](#page-creation-process)
+  - [1. Create the Page Content](#1-create-the-page-content)
+  - [2. Configure the Frontmatter](#2-configure-the-frontmatter)
+  - [3. Choose the Appropriate Layout](#3-choose-the-appropriate-layout)
+  - [4. Update Navigation (if needed)](#4-update-navigation-if-needed)
+- [Adding Learn Pages](#adding-learn-pages)
+  - [Learn Page Structure](#learn-page-structure)
+  - [Learn Page Frontmatter](#learn-page-frontmatter)
+    - [Frontmatter Fields](#frontmatter-fields)
+  - [Update Learn Navigation](#update-learn-navigation)
+  - [Add Translation Keys](#add-translation-keys)
+- [Content Guidelines](#content-guidelines)
+  - [Markdown Features](#markdown-features)
+  - [Code Blocks](#code-blocks)
+  - [Multiple Code Tabs](#multiple-code-tabs)
+  - [Accessible Components](#accessible-components)
+- [File Organization](#file-organization)
+  - [Content Structure](#content-structure)
+  - [Asset Management](#asset-management)
+- [Internationalization](#internationalization)
+  - [Translation Process](#translation-process)
+  - [Translation Guidelines](#translation-guidelines)
+- [Page Types and Examples](#page-types-and-examples)
+  - [Standard Content Page](#standard-content-page)
+  - [Blog Post](#blog-post)
+  - [Learn Article](#learn-article)
+- [Validation and Testing](#validation-and-testing)
+  - [Before Publishing](#before-publishing)
+  - [Content Review](#content-review)
+- [Advanced Features](#advanced-features)
+  - [Custom Layouts](#custom-layouts)
+  - [Dynamic Content](#dynamic-content)
+
+## Page Creation Process
+
+### 1. Create the Page Content
+
+Create a new markdown file in `apps/site/pages/en/` with the appropriate subdirectory structure.
+
+```markdown
+---
+title: Title of the Page
+layout: layout-name
+---
+
+# Page Title
+
+Your content goes here...
+```
+
+### 2. Configure the Frontmatter
+
+The frontmatter (YAML block at the top) configures page metadata:
+
+- `title`: The page title displayed in the browser tab and used for SEO
+- `layout`: The layout template to use (see available layouts below)
+- `description`: Optional meta description for SEO
+- `authors`: For learn pages, list of GitHub usernames
+
+### 3. Choose the Appropriate Layout
+
+Available layouts are defined in `apps/site/layouts/`. Common layouts include:
+
+- `page`: Default layout for most content pages
+- `blog`: For blog posts and announcements
+- `learn`: For educational content and tutorials
+- `download`: For download-related pages
+- `docs`: For API documentation
+
+> **Note**: Layout components are currently mapped in `components/withLayout`. This location may change in future updates.
+
+### 4. Update Navigation (if needed)
+
+If your page should appear in the site navigation, update the relevant layout or navigation configuration:
+
+- Main navigation: Update `apps/site/layouts` components
+- Learn section: Update `app/site/navigation.json`
+
+## Adding Learn Pages
+
+The Learn section has special requirements and structure.
+
+### Learn Page Structure
+
+```
+apps/site/pages/en/learn/
+├── category-name/
+│   ├── article-name.md
+│   └── another-article.md
+└── another-category/
+    └── article.md
+```
+
+### Learn Page Frontmatter
+
+```yaml
+---
+title: A Super Cool Tutorial
+layout: learn
+authors: github_username, another_github_username
+---
+```
+
+#### Frontmatter Fields
+
+- `title`: Article title (use same as navigation entry)
+- `layout`: Must be set to `learn`
+- `authors`: Comma-separated list of GitHub usernames (used for profile pictures)
+
+### Update Learn Navigation
+
+Add your new article to `app/site/navigation.json`:
+
+```json
+{
+  "sideNavigation": {
+    "learn": [
+      {
+        "label": "Category Name",
+        "items": {
+          "articleName": {
+            "link": "/learn/category-name/article-name",
+            "label": "components.navigation.learn.category-name.article-name"
+          }
+        }
+      }
+    ]
+  }
+}
+```
+
+### Add Translation Keys
+
+Create translation keys for your navigation entries in the appropriate locale files:
+
+```json
+// packages/i18n/locales/en.json
+{
+  "components": {
+    "navigation": {
+      "learn": {
+        "category-name": {
+          "article-name": "Your Article Title"
+        }
+      }
+    }
+  }
+}
+```
+
+## Content Guidelines
+
+### Markdown Features
+
+The website supports GitHub Flavored Markdown plus MDX components:
+
+- Standard Markdown syntax
+- Code blocks with syntax highlighting
+- Tables, lists, and formatting
+- Custom React components within content
+
+### Code Blocks
+
+Use fenced code blocks with language specification:
+
+````markdown
+```javascript
+const example = 'Hello World';
+console.log(example);
+```
+````
+
+### Multiple Code Tabs
+
+Consecutive code blocks create tabbed interfaces:
+
+````markdown
+```cjs
+const http = require('node:http');
+```
+
+```mjs
+import http from 'node:http';
+```
+````
+
+### Accessible Components
+
+Use built-in accessible components when needed:
+
+- **Codebox**: Automatic syntax highlighting and tabbed interfaces
+- **Links**: Use standard Markdown links for best accessibility
+- **Images**: Include descriptive alt text
+
+## File Organization
+
+### Content Structure
+
+```
+apps/site/pages/
+├── en/                    # English content (source)
+│   ├── learn/            # Learn section
+│   ├── blog/             # Blog posts
+│   ├── download/         # Download pages
+│   └── about/            # About pages
+└── {locale}/             # Translated content
+    └── ...               # Same structure as en/
+```
+
+### Asset Management
+
+- **Images**: Store in `apps/site/public/static/images/`
+- **Documents**: Store in `apps/site/public/static/documents/`
+- **Icons**: Use existing icon system or add to `@node-core/ui-components/Icons/`
+
+## Internationalization
+
+### Translation Process
+
+1. Create the English version first in `apps/site/pages/en/`
+2. Translators will create localized versions in `apps/site/pages/{locale}/`
+3. Non-translated pages automatically fall back to English content with localized navigation
+
+### Translation Guidelines
+
+- Keep file paths consistent across locales
+- Use the same frontmatter structure
+- Reference the [Translation Guidelines](./translation.md) for detailed policies
+
+## Page Types and Examples
+
+### Standard Content Page
+
+```markdown
+---
+title: About Node.js
+layout: page
+description: Learn about the Node.js runtime and its ecosystem
+---
+
+# About Node.js
+
+Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine...
+```
+
+### Blog Post
+
+```markdown
+---
+title: Node.js 20.0.0 Released
+layout: blog
+date: 2023-04-18
+author: Node.js Team
+---
+
+# Node.js 20.0.0 Now Available
+
+We're excited to announce the release of Node.js 20.0.0...
+```
+
+### Learn Article
+
+```markdown
+---
+title: Getting Started with Node.js
+layout: learn
+authors: nodejs-team, community-contributor
+---
+
+# Getting Started with Node.js
+
+This tutorial will guide you through...
+```
+
+## Validation and Testing
+
+### Before Publishing
+
+1. **Preview locally**: Use `pnpm dev` to preview your changes
+2. **Check formatting**: Run `pnpm format` to ensure proper formatting
+3. **Validate links**: Ensure all internal links work correctly
+4. **Test responsive design**: Check page layout on different screen sizes
+
+### Content Review
+
+- Ensure content follows our style guide
+- Verify technical accuracy
+- Check for proper grammar and spelling
+- Confirm accessibility of any custom elements
+
+## Advanced Features
+
+### Custom Layouts
+
+To create a custom layout:
+
+1. Add your layout component to `apps/site/layouts/`
+2. Update the layout mapping in `apps/site/components/withLayout.tsx`
+3. Document the layout purpose and usage
+
+### Dynamic Content
+
+For pages that need dynamic data:
+
+1. Use build-time data fetching in `apps/site/next-data/`
+2. Configure data sources in the appropriate scripts
+3. Access data through layout props or context