Feature/readme alex (#196)

* Rich-list readme

* little text improvments

* Rich-box-readme

* richbox readme fixes

* richbox readme fixes

* Flickr Images Shortcode Readme

content/product/overview/maps.md

@@ -10,5 +10,5 @@ sidebar: true
 
 Amazing maps created using QGIS
 
-{{< flickr-images showcase="map" quantity="100" columns="6" >}}
+{{< flickr-images showcase="map" columns="gallery" >}}
 {{< content-end  >}}

content/test.md

@@ -8,6 +8,25 @@ heroImage: "img/involve.jpg"
 sidebar: true
 ---
 {{< content-start  >}}
+
+
+
+{{< rich-list listLink="../case-studies"  layoutClass="half" image="/img/map2.png" listTitle="Rich-list with image" listSubtitle="layoutClass=half" >}}
+
+{{< rich-list listLink="../case-studies"  layoutClass="half " image="/img/map2.png" listTitle="Rich-list with image" listSubtitle="layoutClass=half" >}}
+
+
+{{< rich-list listLink="http://documentation.qgis.org"  icon="⭐" layoutClass="third" listTitle="Rich-list with icon" listSubtitle="layoutClass=third" >}}
+
+{{< rich-list listLink="http://documentation.qgis.org"  icon="🌀" layoutClass="third" listTitle="Rich-list with icon" listSubtitle="layoutClass=third" >}}
+
+{{< rich-list listLink="http://documentation.qgis.org"  icon="🔮" layoutClass="third" listTitle="Rich-list with icon" listSubtitle="layoutClass=third" >}}
+
+
+
+
+
+
 ## Ways of Contributing
 💭💬🤔🧑‍🎓🤓🖖✌️🦄🦸⭐🌀🔮🪄🛟💡🕶️
 
@@ -36,6 +55,54 @@ Create, edit, visualise, analyse and publish geospatial information.
 {{< column-end >}}
 {{< columns-end >}}
 
+
+On major and minor release dates, the release branch is created and the release is tagged and tar balls are prepared. Point releases are just tagged and tar balls are created.
+
+
+{{< rich-box-start>}}
+{{< rich-content-start themeClass="coloring-1" >}}
+### Participate in Support Channels
+
+Utilize channels to seek assistance from fellow users and developers or stay updated on current project events.
+
+Feel free to subscribe to any of the lists, and remember to contribute by answering questions and sharing your experiences.
+
+[Community support channels page](#)
+
+{{< rich-content-end >}}
+{{< rich-box-end >}}
+
+{{< rich-box-start>}}
+{{< rich-content-start themeClass="coloring-2" >}}
+### Participate in Support Channels
+
+Utilize channels to seek assistance from fellow users and developers or stay updated on current project events.
+
+Feel free to subscribe to any of the lists, and remember to contribute by answering questions and sharing your experiences.
+
+[Community support channels page](#)
+
+{{< rich-content-end >}}
+{{< rich-box-end >}}
+
+{{< rich-box-start>}}
+{{< rich-content-start themeClass="coloring-6" >}}
+### Participate in Support Channels
+
+Utilize channels to seek assistance from fellow users and developers or stay updated on current project events.
+
+Feel free to subscribe to any of the lists, and remember to contribute by answering questions and sharing your experiences.
+
+[Community support channels page](#)
+
+{{< rich-content-end >}}
+{{< rich-box-end >}}
+
+On major and minor release dates, the release branch is created and the release is tagged and tar balls are prepared. Point releases are just tagged and tar balls are created. On major and minor release dates, the release branch is created and the release is tagged and tar balls are prepared. Point releases are just tagged and tar balls are created.
+
+
+
+
 {{< rich-box-start layoutClass="has-right" >}}
 {{< rich-content-start themeClass="coloring-1" >}}
 ### Participate in Support Channels
@@ -123,6 +190,13 @@ After installing QGIS, the first launch attempt may fail due to security protect
 {{< rich-content-end >}}
 {{< rich-box-end >}}
 
+{{< rich-box-start icon="💁" layoutClass="tips ">}}
+{{< rich-content-start themeClass="coloring-6" >}}
+##### Tips for first launch
+After installing QGIS, the first launch attempt may fail due to security protections. To enable QGIS, control-click on its icon in your Applications folder and select Open in the context menu. A confirmation dialog will display where you need to click the Open button again. This only has to be done once.
+{{< rich-content-end >}}
+{{< rich-box-end >}}
+
 {{< rich-box-start layoutClass="has-right" >}}
 {{< rich-content-start themeClass="coloring-1" >}}
 ### Translate QGIS

docs/shortcodes/flickr-images.md

@@ -0,0 +1,27 @@
+## Flickr Images Shortcode
+
+![flickr.png](img/flickr.png)
+
+The flickr-images shortcode allows you to display images fetched from content/flickr-images directory, with customizable parameters to control the showcase type, quantity, and layout.
+
+### Parameters
+
+- **showcase:** (Optional) Specifies the type of showcase to display. Can get `map` or `screenshot` values. Defaults to an empty string.
+- **quantity:** (Optional) Specifies the maximum number of images to display. Defaults to "100".
+- **columns:** (Optional) Specifies the layout of the images. If set to `gallery`, it displays 2 images on the first row and 3 images on the second row. If set to a numeric value (e.g., `6` for half-width), it determines **how many columns you want out of 12** on the available width.
+
+### Example Usage
+
+To use the flickr-images shortcode, include the desired parameters within the shortcode tag as follows:
+
+```html
+{{< flickr-images showcase="showcase-type" quantity="100" columns="gallery" >}}
+```
+This will fetch images from Flickr based on the specified showcase type, limiting the display to 100 images and arranging them in a gallery layout.
+
+### Additional Notes
+- Ensure that the "showcase" parameter matches the desired showcase type configured in your Flickr images collection.
+- Adjust the "quantity" parameter as needed to limit the number of images displayed.
+- Customize the "columns" parameter to control the layout of the images, either as a gallery or based on specific column widths.
+
+

docs/shortcodes/rich-box.md

@@ -0,0 +1,120 @@
+## Rich Box Shortcode
+
+![rich-box](img/rich-box.png)
+
+The rich box shortcodes allows you to create structured layouts for displaying rich content, with customizable sections to suit your needs.
+
+**3 types of rich-boxes** 
+- Block with content only
+- Tips 
+- Block with right part 
+
+
+### Structure of shortcodes usage
+```
+|rich-box-start 
+||rich-content-start 
+|||content with markdown support 
+||rich-content-end
+||rich-right-start 
+|||image im markdown view like ![](/img/mappp.png) or another shortcode 
+||rich-right-end
+|rich-box-end
+```
+
+### Block with content only
+![rich-box](img/rich-box-simple.png)
+
+#### Shortcodes structure
+```
+|rich-box-start 
+||rich-content-start 
+|||content with markdown support 
+||rich-content-end
+|rich-box-end
+```
+
+#### Parameters
+- **layoutClass:** (Optional) Additional CSS classes to customize the layout of the rich box. Aplicable to rich-content-start shortcode. Supports various layout classes `coloring-1`, `coloring-2`,... `coloring-6` for flexible styling. 
+- **id:** (Optional) Adds an HTML id attribute to the rich box container for targeted styling or scripting purposes.
+
+**Example**
+
+```
+{{< rich-box-start>}}
+{{< rich-content-start themeClass="coloring-1" >}}
+### Participate in Support Channels
+
+Utilize channels to seek assistance from fellow users and developers or stay updated on current project events.
+
+Feel free to subscribe to any of the lists, and remember to contribute by answering questions and sharing your experiences.
+
+[Community support channels page](#)
+
+{{< rich-content-end >}}
+{{< rich-box-end >}}
+```
+
+### Tips
+![rich-box](img/rich-box-tips.png)
+
+#### Shortcodes structure
+```
+|rich-box-start 
+||rich-content-start 
+|||content with markdown support 
+||rich-content-end
+|rich-box-end
+```
+#### How to use:
+
+- To turn on the tips appearance you need to add ``layoutClass="tips"`` parameter to rich-box-start srotcode
+- Add icon="💁" to display emoji in the tip
+- We often used following icons: 💁💭💬🤔🧑‍🎓🤓🖖✌️🦄🦸⭐🌀🔮🪄🛟💡🕶️
+- Also supports various rich-content-start classes `coloring-1`, `coloring-2`,... `coloring-6` for flexible styling.  
+
+**Example**
+```
+{{< rich-box-start icon="💁" layoutClass="tips">}}
+{{< rich-content-start themeClass="coloring-1" >}}
+##### Tips for first launch
+After installing QGIS, the first launch attempt may fail due to security protections. To enable QGIS, control-click on its icon in your Applications folder and select Open in the context menu. A confirmation dialog will display where you need to click the Open button again. This only has to be done once.
+{{< rich-content-end >}}
+{{< rich-box-end >}}
+```
+### Block with right part
+![rich-box-right](img/rich-box-right.png)
+
+#### Shortcodes structure
+```
+|rich-box-start 
+||rich-content-start 
+|||content with markdown support 
+||rich-content-end
+||rich-right-start 
+|||image im markdown view like ![](/img/mappp.png) or another shortcode 
+||rich-right-end
+|rich-box-end
+```
+
+#### How to use:
+
+- To turn on the correct appearance you need to add ``layoutClass="has-right"`` parameter to rich-box-start srotcode
+- Also supports various rich-content-start classes `coloring-1`, `coloring-2`,... `coloring-6` for flexible styling. 
+- rich-right-start has no additional parameters
+
+**Example**
+```
+{{< rich-box-start layoutClass="has-right" >}}
+{{< rich-content-start themeClass="coloring-1" >}}
+### QGIS Documentation
+
+Creating documentation offers an ideal starting point for your first contribution to the project. If you're interested in joining the documentation effort, you can find a gentle introduction and guidelines here:
+
+[How to write documentation](#)
+{{< rich-content-end >}}
+{{< rich-right-start >}}  
+![](img/mappp.png)
+{{< rich-right-end >}}
+{{< rich-box-end >}}
+```

docs/shortcodes/rich-list.md

@@ -0,0 +1,31 @@
+## Rich-list Shortcode
+
+![rich-list](img/rich-list.png)
+
+The richlist shortcode is designed to create a customizable rich list item, ideal for showcasing various types of content such as links, list item, card for article. It supports options for displaying icons, images, titles, and subtitles, allowing for versatile usage in your projects.
+
+### Parameters
+
+- **icon:** The icon to display alongside the list item. Often uses for output emoji in short version.
+- **image:** The URL of the image to display alongside the list item. Image place to the top of the item and convert it to card
+- **layoutClass:** (Optional) Additional CSS classes to customize the layout of the rich list item. Supports various layout classes (`half`, `third`, `inline-block`) for flexible positioning within your content.
+- **listLink:** (Optional) The URL the rich list item should link to. If link starts with http - there will arrear external-link indicator and link will open in new window.
+- **linkAttr:** (Optional) Additional attributes to be added to the anchor tag.
+- **listTitle:** The main title or headline of the rich list item.
+- **listSubtitle:** A brief subtitle or description associated with the rich list item.
+
+### Example Usage
+
+To use the richlist shortcode, include the desired parameters within the shortcode tag as follows:
+
+```html
+{{< richlist icon="icon-name" image="image.jpg" layoutClass="half" listLink="https://example.com" listTitle="Item Title" listSubtitle="A brief description of the item." >}}
+```
+
+This will generate a rich list item with the specified icon, image, title, and subtitle. If a link is provided, the entire item will be clickable.
+
+### Additional Notes
+
+- Ensure that any images referenced in the shortcode are accessible and properly sized for display.
+- Utilize the `linkAttr` parameter for adding custom attributes to the anchor tag, such as `target="_blank"` for opening links in a new tab.
+- Take advantage of the provided Sass code to customize the styling of the rich list items according to your project's design requirements.