Merge pull request #236 from infinum/feature/visual-refresh

Docs visual refresh

Author: iruzevic

website/blog/2022-01-20-initial-setup.md

@@ -10,7 +10,9 @@ As is often the case when trying out something new, you might encounter some hic
 
 <!--truncate-->
 
-> _**Last updated: 23rd August, 2022**_
+:::info Last update
+August 23, 2022
+:::
 
 If you haven't already, be sure to read our official [Eightshift Docs](/docs/welcome).
 
@@ -48,7 +50,9 @@ You may want to try a few of our WP CLI commands to add another component, block
 
 The final tip in this post is related to troubleshooting. Maybe you tried to add a new class or a new feature to one of the existing blocks. And now the site has crashed. In tech support, the number 1 question is **"Have you tried turning it off and on again?"**. In our case, the number 1 question is:
 
-> Have you tried `composer dump-autoload` and re-running `npm start`?
+:::tip
+Have you tried `composer dump-autoload` and re-running `npm start`?
+:::
 
 ## What's next in store?
 

website/blog/2022-01-21-components-and-blocks.md

@@ -13,9 +13,11 @@ One of the things that is really confusing to newcomers is the difference betwee
 
 ## Component
 
-> A component is like a blank slate, a template without context.
+:::note :es-hide-title:
+A component is like a blank slate, a template without context.
+:::
 
-It doesn't know or even care for what it will be used. Can you combine multiple simple components into one complex component? Absolutely! That's exactly what we'll do in the following example. 
+It doesn't know or even care for what it will be used. Can you combine multiple simple components into one complex component? Absolutely! That's exactly what we'll do in the following example.
 
 Let's say we have a component that consists of an image and a heading. Image and heading are two simple components that come with the theme out-of-the-box.
 
@@ -47,7 +49,9 @@ You can even add conditional logic to your options, e.g. to have the option for
 
 So, what about blocks? Blocks can consist of one or more components and, most importantly, allow you to use them in the editor. Technically, blocks can consist of zero components, but we encourage you to build blocks from components because that increases the reusability.
 
-> Blocks give context to the components.
+:::note :es-hide-title:
+Blocks give context to the components.
+:::
 
 Now that we have our component - let's call it `card-simple` - we can use it in a `Featured Posts` block. In **component's** `manifest.json`, we've already defined how we want it to look by setting some defaults. When using this component in our block, we can override some attributes in **block's** `manifest.json`. Since it will be used for displaying featured posts, we can define that `imagePosition` should be set to **top**.
 

website/blog/2022-03-03-adding-blocks-wpcli.md

@@ -7,13 +7,15 @@ date: 2022-03-14
 tags: [eightshift, boilerplate, wpcli, components, blocks]
 hide_table_of_contents: false
 ---
-Although there are a few basic blocks available after creating a project, there are a lot more blocks available in the dev kit. However, you have to add them to your project using WP-CLI (the simplest method). To see the complete list of available components and blocks, visit our [Storybook](/storybook). 
+Although there are a few basic blocks available after creating a project, there are a lot more blocks available in the dev kit. However, you have to add them to your project using WP-CLI (the simplest method). To see the complete list of available components and blocks, visit our [Storybook](/storybook).
 
 These can be used out-of-the-box, but also as a good starting point if you need similar blocks in your projects. It will also speed up your development time since you don't have to build everything from scratch.
 
 <!--truncate-->
 
-> _**Last updated: 23rd August, 2022**_
+:::info Last update
+August 23, 2022
+:::
 
 ## Storybook
 

website/blog/2022-03-04-modifying-blocks.md

@@ -77,7 +77,9 @@ For editors to be able to choose which color theme to use for the Quote block, w
 }
 ```
 
-> Double-check the path of the manifest used in this example. We're adding it inside the Quote component manifest, not the Quote block manifest. 
+:::caution
+Double-check the path of the manifest used in this example. We're adding it inside the Quote component manifest, not the Quote block manifest.
+:::
 
 After that, since we want to have a fixed number of options, we need to define available options. We can do that inside `options` which is on the same level as `attributes`:
 ```json
@@ -193,7 +195,9 @@ $unique = Components::getUnique();
 	//...
 ```
 
-> Both PHP and JS have the same helpers to make writing code for editor and front view as similar as possible.
+:::note
+Both PHP and JS have the same helpers to make writing code for editor and front view as similar as possible.
+:::
 
 ## Adding options
 After adding these snippets, you should already see that your block is using the blue color theme, which we defined as the default value for `quoteColorTheme` in the manifest. We want to have an easy way to change the color theme in the editor. Now we'll add a new option which will do just that.

website/blog/2022-04-08-adding-fonts.md

@@ -18,7 +18,9 @@ Every project is unique. Logo, colors, fonts, etc. are what define the visual id
 - [Everything Fonts](https://everythingfonts.com/ttf-to-woff)
 - [Transfonter](https://transfonter.org/)
 
-> Just make sure you have the proper license for the fonts you are converting.
+:::caution Warning
+Make sure you have the proper license for the fonts you are converting.
+:::
 
 Fonts should go inside your theme's **_/assets/fonts_** folder. Copy the fonts you want to use there. You will also notice that this folder contains an **_index.js_** file, used to import fonts into your project. Here's an example of how I imported my fonts:
 ```js
@@ -51,7 +53,9 @@ import './NotoSerif-Italic.woff2';
 import './NotoSerif-Regular.woff2';
 ```
 
-> If you don't need to support IE11, don't include `.woff` files. This will save you some bandwidth.
+:::tip
+If you don't need to support IE11, don't include `.woff` files. This will save you some bandwidth.
+:::
 
 To add these fonts as your base font and secondary font, go to the global manifest located in **_/src/Blocks_** and add the following inside `globalVariables`:
 ```json

website/blog/2022-04-25-using-assets.md

@@ -31,7 +31,9 @@ The filter we are using is called `manifest-item` and we use it to get the URL o
 
 You can see how this is being used for rendering both favicon and header logo in your theme's **_header.php_** file.
 
-> **Tip**: Don't hardcode the filter name in the `apply_filters` function. Always call it via class constants.
+:::tip
+Don't hardcode the filter name in the `apply_filters` function. Always call it via class constants.
+:::
 
 For better organization, you can add additional folders (e.g. **_icons_**, **_placeholders_**) inside the **_assets/images_** folder. Here's an example of how to include them:
 
@@ -48,7 +50,9 @@ import './placeholders/page.png';
 
 If you recall from a previous blog post about [Modifying Blocks](/blog/modifying-blocks-color-theme), you might have already seen an alternative approach to including SVG files in your block or component.
 
-> If you don't have it in your project, be sure to read our blog post about adding blocks and components by using [WP CLI](/blog/adding-blocks-wpcli).
+:::info :es-hide-title:
+If you don't have it in your project, be sure to read our blog post about adding blocks and components by using [WP CLI](/blog/adding-blocks-wpcli).
+:::
 
 Open **_src/Blocks/components/quote/manifest.json_** and you'll see that the icon used by the component is defined inside `resources` as a key-value pair. Key represents the name that we will use to fetch the icon, while the value is SVG code.
 

website/blog/2022-05-10-acf-in-a-project.md

@@ -60,7 +60,7 @@ class IntroAcfMeta extends AbstractAcfMeta
 	 * Intro field name.
 	 */
 	public const INTRO_FIELD_NAME = 'intro';
-	
+
 	/**
 	 * Render acf fields.
 	 *
@@ -104,7 +104,9 @@ if (function_exists('get_field')) {
 }
 ```
 
-> It's better to use class constants because if you decide to change the field name, you will have to change it only in one place.
+:::tip
+It's better to use class constants because if you decide to change the field name, you will have to change it only in one place.
+:::
 
 ## Theme Options
 

website/blog/2022-09-07-block-variations.md

@@ -15,7 +15,9 @@ Let's picture the following scenario: You just created a block with many options
 
 Block variations allow us to override default block attributes. We can select a variation from the block list with all preset options instead of manually setting them.
 
-> Please note that you cannot add new attributes in variations. Only attributes that exist in the parent block can be used.
+:::note
+You cannot add new attributes in variations. Only attributes that exist in the parent block can be used.
+:::
 
 For example, we have a `Card` block. If we want to use it for something like downloading PDF files, we may not need image or paragraph components. A simple text that describes type of the file, title of the file and a download button are all we need in this case.
 
@@ -61,7 +63,9 @@ Other than overriding default attributes with variations, you can do much more w
 
 The following example is very basic, but it will give you an idea of how to provide inner block data. It can easily be reproduced with our `Carousel` block if you want to try it yourself.
 
-> If you don't have Carousel block in your project yet, you can add it with the following WP-CLI command: `wp boilerplate blocks use-block --name="carousel"`
+:::note
+If you don't have Carousel block in your project yet, you can add it with the following WP-CLI command: `wp boilerplate blocks use-block --name="carousel"`
+:::
 
 Once you have the `Carousel` block up and running, create a variation called `Carousel Loop`. For this variation, we want the following:
 - loop

website/blog/2022-12-13-using-cpts-and-taxonomies.md

@@ -23,7 +23,9 @@ For this exercise, we'll create a new post type called `Projects`. To make the p
 wp boilerplate create post-type --label='Project' --plural_label='Projects' --slug='project' --rewrite_url='project' --rest_endpoint_slug='projects'
 ```
 
-> If your new CPT is not working, try flushing rewrite rules by re-saving the settings in **Settings -> Permalinks** or by using `wp cache flush` CLI command
+:::tip
+If your new CPT is not working, try flushing rewrite rules by re-saving the settings in **Settings -> Permalinks** or by using `wp cache flush` CLI command
+:::
 
 Your new post type is registered and ready to use! Easy, right?
 

website/docs/basics/autowiring.md

@@ -81,15 +81,19 @@ This works out of the box, but you shouldn't really do this.
 
 A good coding practice is that your class should never depend on the concrete class implementation because you have tightly coupled your class to another class. This makes it hard to test and your code becomes hard to modify. Imagine that you have put a concrete implementation as a dependency, only to get feedback from the client that you need to change that implementation for a completely different one. Making the changes means that you'll need to track all the places in your codebase where you have used some functionality from this class, and change it completely.
 
-> You should always code against interfaces and not implementation.
+:::success Good practices
+You should always code against interfaces and not implementation.
+:::
 
 We can't stress this enough because as your project grows, so will your headaches. Also, when you start testing your code, that is when your hair will begin to fall off. We recommend reading Uncle Bob Martin's [Clean Code](http://cleancoder.com/products). That will save you a lot of sleepless nights, and you'll learn tons of tips and tricks for writing clean code.
 
 ### What if my class has an interface parameter inside the constructor method?
 
 This will automatically be resolved (same as with class parameters) if you follow one simple rule:
 
-> Variable name in your constructor method needs to match the class name (which implements the interface) in camelCase.
+:::caution Important
+Variable name in your constructor method needs to match the class name (which implements the interface) in camelCase.
+:::
 
 For example, let's say you have a `SteeringWheel` class: