Getting started documentation

src/config/sidebar.yml

@@ -4,10 +4,14 @@
   link: "/"
 - label: "Requirements"
   link: "/requirements"
-- label: "Setup new project"
-  link: "/setup"
-- label: "Getting started"
-  link: "/getting-started"
+- label: Getting started
+  items:
+    - label: "The analysis phase"
+      link: "/getting-started/analysis-phase"
+    - label: "Setup new project"
+      link: "/getting-started/setup"
+    - label: "First steps"
+      link: "/getting-started/first-steps"
 - label: Basics
   items:
     - label: "Customizer settings"
@@ -129,4 +133,4 @@
 - label: Docs software
   items:
     - label: "GitHub"
-      link: "https://github.com/rocketseat/gatsby-themes"
+      link: "https://github.com/rocketseat/gatsby-themes"

src/docs/getting-started/analysis-phase.mdx

@@ -0,0 +1,44 @@
+---
+title: "Analysis phase"
+description: Learn what you need asses at the beginning of your project
+---
+
+Before starting your project in wp-lemon, it's essential to begin with an analysis of the design. 
+A structured analysis lays the foundation for an efficient, scalable, and well-organized implementation. 
+By identifying the recurring elements in the design early on, you can estimate which standardized components you can use and where custom development will be required.
+
+
+## Implementation in combination with standardized modules
+One of wp-lemon’s strengths lies in its use of reusable components and standardized modules. 
+Analyzing your design with this in mind allows you to quickly identify where existing patterns can be applied. 
+This includes leveraging pre-built ACF blocks, card components, navigation elements, or layout wrappers. 
+It also helps you make more accurate time estimates for different parts of the project.
+
+Identify the unique page types present in the design. 
+Are they variations of a single layout, or are there several fundamentally different templates needed? 
+This will help you structure your page templates and define global components such as headers, footers, 
+and other reusable sections.
+
+Take note of the content blocks used throughout the design. Can these be built using existing WP-Lemon blocks, 
+or will custom ones need to be developed? 
+Think of hero sections, testimonials, image grids, call-to-actions, and so on.
+
+Zoom in on the smaller design elements, such as buttons, forms, or interactive components. 
+These can often be set up as standalone components for consistent use across the site. 
+Also consider where hooks might be needed to inject or modify functionality without interfering with 
+the core structure.
+
+Finally, identify parts of the design that go beyond visual layout. 
+This includes dynamic filters, interactive maps, API integrations, 
+or advanced search functionality. These features require extra attention during the analysis phase to 
+ensure they are technically feasible and properly scoped.
+
+Once you have completed your analysis, you can go ahead and move on to the setup phase with a clear understanding of
+what needs to be built and how to best utilize wp-lemon's capabilities. This same analysis will also help you communicate
+effectively with clients and stakeholders about the project scope and timelines.
+
+Dingen waar ik zelf meteen aan moet denken:
+- Hoeveel breedtes zijn er?
+- Hoeveel font families?
+- Hoeveel Font sizes?
+- opzoek gaan naar standaard margins (section)

src/docs/getting-started/first-steps.mdx

@@ -0,0 +1,216 @@
+---
+title: "Set up phase"
+description: Learn what the first things are you need to set up in your project
+---
+
+Once you’ve completed the design analysis and have a clear overview of the project’s structure, 
+you can move on to the setup phase. This phase focuses on establishing your technical foundation — 
+setting up post types, blocks, branding elements, and configuring the CMS so you can begin implementing 
+your design efficiently.
+
+## Posttypes/taxonomies aanmaken
+Since WordPress began as a blogging platform, post objects have always been an inherent part of its ecosystem. 
+In WP-Lemon, we’ve expanded the default post type functionality to make it more flexible, intuitive, 
+and aligned with modern development workflows.
+
+By default, WP-Lemon hides the native Posts post type and introduces its own custom post types — 
+News, Team, and Jobs. These serve as examples of how structured content can be implemented using WP-Lemon’s 
+extended post object.
+
+Of course, you can easily create your own post types and taxonomies to fit your project’s needs. 
+To see how to do this, check out the [Custom Post Types](/working-with-posts/post-type-registration) documentation.
+
+## Custom blocks
+Custom ACF blocks are one of WP-Lemon’s core features.
+Once you have identified which content blocks you’ll need during the design analysis, 
+you can start creating them. To learn how to create custom ACF blocks, please take a look at our 
+[documentation on blocks](/blocks/key-concepts).
+
+## First branding
+
+### logo's en favicons
+#### Logo's
+WP Lemon comes with default logo's that you can overwrite. You can create a `images/logo.svg` and a `images/logo-footer.svg` file in `resources/assets/images/`. After running one of the webpack commands your new files will be loaded.
+
+We recommend running the following checks on your logo's:
+
+- Check if there are no bloated elements in your SVG
+- Are there unnneeded transforms? Remove them via a tool like Affinity Designer
+- Is your logo minified? If not, use a tool like https://jakearchibald.github.io/svgomg/ to minify the source file.
+
+If you want to use other formats or you want to inject a svg file directly, please see [global context](/extend/add-context)
+
+#### Favicons
+wp-lemon comes with a class that automatically checks for the right icons and then pass them to WordPress. This way the favicon get's displayed on all theme pages. It also handles the generation of a  `site.webmanifest`.
+
+wp-lemon comes with a very obvious set of default favicons. This is to force you to create your own. Luckily it is very easy to create your own set. [Real Favicon Generator](https://realfavicongenerator.net/) you can create your own set of favicons.
+
+After generating your own set please place them in `/web/app/themes/YOURCHILDTHEME/resources/favicons`.
+
+The following method checks if `android-chrome-512x512.png` is present in your new favicon folder. If so, your new generated files will be loaded instead of the default ones provided by the parent theme.
+
+```php
+HighGround\Bulldozer\Site_Icons::filter_favicon_path
+```
+
+### Colors
+#### Create color variables
+The first things you'll want to do is to define your brand colors. 
+Extract your theme/brand colors from the design document or handoff file and convert them to scss variables. 
+I recommend using a tool like [Name that color (website)](https://chir.ag/projects/name-that-color/#6195ED) or [Name that color (vs code extension)](https://marketplace.visualstudio.com/items?itemName=guillaumedoutriaux.name-that-color) to 
+transform colors into distinguishable names.
+
+```scss
+$color-viridian: #588068ff;
+$color-dark-sea-green: #85b498ff;
+$color-antique-brass: #c88e65ff;
+$color-dark-salmon: #e19782ff;
+$color-peach-puff: #e9cfb4ff;
+```
+
+#### Create $brand-colors
+You can now create your brand colors. 
+These are the colors that will be available in the color palette inside the WordPress editor.
+
+```scss
+$brand-colors: (
+  "white": $white,
+  "black": $black,
+  "gray": #e9e9e9,
+  "dark-green": $color-viridian,
+  "green": $color-dark-sea-green,
+  "orange": $color-antique-brass,
+  "pink": $color-dark-salmon,
+  "peach": $color-peach-puff,
+);
+```
+The name on the left side is used to create matching class names that will be utilized by the editor.
+
+> ⚠️
+> You need to restart your watch process before the new colors will be available inside your editor.
+
+#### Overwrite default variables
+wp-lemon comes with a set of default SCSS variables that provides the default look. 
+These colors can be overwritten to your liking too define your own look and feel. 
+When taking a look at `wp-lemon/resources/assets/styles/01-settings/_variables.scss` you will find all 
+variables that are at your disposal. By simply copying the variables that you want to overwrite to 
+your `_variables.scss` and change their value you can overwrite things like colors, font sizes, 
+background colors, logo-widths, etc.
+
+For example, when you want to overwrite the default navigation colors:
+
+```scss
+$nav-text: (
+  "font-weight": 400,
+  "font-size": 16px,
+  "transform": "uppercase",
+  "color": $base-color,
+  "hover": darken($highlight2, 20%),
+  "active": $highlight1,
+);
+```
+
+You can copy over as much variables as you want to overwrite.
+
+
+### Fonts
+When creating a new website you'll probably want to add your own fonts as well. You can do this in two ways.
+
+#### Using an enqueue hook (external hosting)
+
+The first is to enqueue an external stylesheet by using the `wp_enqueue_scripts` and `enqueue_block_editor_assets` hooks in your child theme.
+
+#### Add them to your assets (provide fonts locally).
+
+You might want to host the fonts locally for several reasons. One of them is that you are not dependent on external CDN's. If the design requires a Google font you can [download it locally](https://gwfh.mranftl.com/fonts) via this tool.
+
+Once downloaded you can add the fonts to the resources/fonts/FONTNAME folder and include the generated stylesheet to `resources/style/01-settings/_fonts.scss`
+
+> ⚠️
+> Make sure to update the filepath when generating the font when using the above tool.
+
+#### Add font-family value to variables
+
+When you've added your font you will now have to add the font variables in your `_variables.scss`. Read [basic styling](/basics/basic-styling) for more information about overwriting variables.
+
+```scss
+$base-font: "Lato", sans-serif;
+$secondary-font: "Noto Serif", serif;
+```
+
+## CMS inrichten
+
+### Pagina's & menu's aanmaken
+Create the core pages (Home, About, Contact, etc.).
+Add placeholder or draft content to ensure layouts display correctly.
+Create your primary and secondary navigation menus via the WordPress menu editor.
+
+### Customizer settings
+We tried to strike a good balance between managing settings via the customizer and WordPress filters.
+The settings that you can manage via the customizer are:
+
+- Site title and description (Native WordPress)
+- Create menus (Native WordPress)
+- Archive pages
+- social links
+- Contact information
+- 404 page settings
+- analytics and tracking codes
+- Add additional important pages like terms of service and contact page
+
+It is recommended to create your menu structure, add your custom post types and after that set your archive pages.
+
+
+
+
+## Manifest
+The manifest is also handled by wp-lemon. `Site_Icons` creates a virtual `site.webmanifest` file in your site root and adds it to the head of your site as well. This way you do not have to worry about setting the proper URLs etc. It comes with sane default that you can overwrite.
+
+If you're coming from version < 2.3 please add the following to your child theme.
+
+```php title=library/child-setup.php lineNumbers=true
+use HighGround\Bulldozer\Site_Icons;
+...
+...
+/**
+
+ * Setup Site icons and manifest.
+ */
+$icons                   = new Site_Icons;
+$icons->name             = 'Name';             //defaults to site name
+$icons->short_name       = 'Short name';       //defaults to '' https://developer.mozilla.org/en-US/docs/Web/Manifest/short_name
+$icons->display          = 'standalone';       // can be fullscreen, standalone, minimal-ui, browser
+$icons->orientation      = 'portrait';         // can be portrait, landscape, any
+$icons->background_color = '#f7d600';          // must be hex color
+$icons->theme_color      = '#f7d600';          // must be hex color
+```
+
+This way you can overwrite the short name, background color and theme color. See [Mozilla docs for more info](https://developer.mozilla.org/en-US/docs/Web/Manifest).
+
+
+
+
+Once the setup of your new project is complete, you can start developing your theme. This guide will help you get started with the basics of wp-lemon in a order that makes sense to the development workflow.
+
+## Create post types and taxonomies
+As a first step it is recommended to create the post types that you will need for your project. This will help you to get a better understanding of the data structure of your project and in a later step, you can link the post types to a custom archive page.
+
+You can read more about creating post types and taxonomies in the [post types guide](/extend/add-models).
+
+You can also deregister existing post types via library/models/modify-post-types.php
+
+## Create menu structure via the customizer
+
+Its recommended to create the menu structure of your project via the customizer. This way you can easily add pages to the menu and preview the output directly.
+
+## Set defaults via the customizer
+After that you can set the default values for your project. This includes the archive pages for your post types, setting contact information among other things.
+
+## Create footer
+Via template parts in the WordPress admin you can create the footer of your project. The default footer is setup with 3 "widget" blocks which you can use to display text or a menu for example.
+
+## Setup colors, fonts, logos and favicons
+Its now time to setup some basic branding for your project. Please read [basic styling](/basics/basic-styling), [how to create fonts](/basics/fonts), [Logo's](/basics/logos) and [favicons](/basics/favicons-manifest) for more information.
+
+## Start creating your blocks
+Based on your design, you can figure out what blocks you can use to create the pages of your project. You can use the default set of blocks available in wp-lemon and you can create your own for unique blocks. You can read more about creating blocks in the [blocks guide](/blocks/key-concepts).