Added images and posts

astro.config.mjs

@@ -6,7 +6,7 @@ export default /** @type {import('astro').AstroUserConfig} */ ({
   // Comment out "renderers: []" to enable Astro's default component support.
     buildOptions: {
         site: "https://daily-dev-tips.com/",
-        sitemap: true, // Generate sitemap (set to "false" to disable)
+        sitemap: false, // Generate sitemap (set to "false" to disable)
     },
     devOptions: {
         tailwindConfig: "./tailwind.config.js",

src/components/StaticTweet.astro

@@ -75,7 +75,7 @@ const date = new Date(
 
 const parsedDate = moment(date).calendar();
 ---
-
+<div class="not-prose">
 <blockquote
   class="max-w-md mx-auto font-xs bg-white dark:bg-dark flex flex-col transition-all rounded-md shadow-md hover:shadow-lg "
 >
@@ -137,3 +137,4 @@ const parsedDate = moment(date).calendar();
     </a>
   </div>
 </blockquote>
+</div>

src/pages/posts/10-amazing-games-to-learn-css.md

@@ -0,0 +1,147 @@
+---
+layout: ../../layouts/Post.astro
+title: '10 amazing games to learn CSS'
+metaTitle: '10 amazing games to learn CSS'
+metaDesc: 'Learn CSS in a fun way by solving CSS games'
+image: /images/07-03-2022.jpg
+date: 2022-03-07T03:00:00.000Z
+tags:
+  - css
+---
+
+Learning CSS can be quite a challenge. There are no shortcuts, and you will have to get your hands dirty and dive into the magical world of CSS.
+
+But! There are some fun ways to learn this monster called CSS. This article will highlight ten amazing games you can play to learn CSS.
+
+## 1. Flexbox froggy
+
+![Flexbox froggy CSS game](https://cdn.hashnode.com/res/hashnode/image/upload/v1645941286010/IfWgVWMSP.png)
+
+Flexbox froggy was one of the first CSS-solving games I've played, and I love it.
+It's a super fun way to learn flexbox positions across the board.
+
+You use CSS flex to place the frog on the correct Lilly.
+It has 24 levels, and you can quickly see the results.
+
+[Play Flexbox froggy](https://flexboxfroggy.com/)
+
+## 2. Flexbox defense
+
+![Flexbox defense CSS game](https://cdn.hashnode.com/res/hashnode/image/upload/v1645941388346/ISBMoQEJo.png)
+
+Another super cool CSS game to learn flex is flexbox defense. In this game, you have to move around towers to defend a road from being attacked.
+
+It has 12 levels, and it's pretty cool to see multiple answers can be correct.
+
+[Play Flexbox defense](http://www.flexboxdefense.com/)
+
+## 3. Knights of the Flexbox Table
+
+![Knights of the Flexbox table CSS game](https://cdn.hashnode.com/res/hashnode/image/upload/v1645941484909/CE_gI2qjL.png)
+
+If you love Tailwind, this one is amazing!
+It uses tailwind classes to teach you to flex options.
+A super combination if you ask me, and it's well set up.
+
+There are a total of 18 levels that you can clear.
+
+[Play Knights of the Flexbox table](https://knightsoftheflexboxtable.com/)
+
+## 4. Flex Box adventure
+
+![Flex box adventure CSS game](https://cdn.hashnode.com/res/hashnode/image/upload/v1645941641104/ZoNRCPR4T.png)
+
+Another game much like Flexbox froggy, but with a different setup.
+It also has some other challenges and hints from which you might learn a lot.
+
+It has a total of 24 levels you can clear.
+
+[Play flexbox adventure](https://codingfantasy.com/games/flexboxadventure/play)
+
+## 5. Flexbox zombies
+
+![Flexbox zombies CSS game](https://cdn.hashnode.com/res/hashnode/image/upload/v1645941763052/mkpGdXFQ4.png)
+
+This game is super well set up in graphics!
+I am blown away by how cool the storyline is.
+
+It has 12 chapters, with each up to 25 levels. It usually costs money to play this one, but it seems free forever.
+
+[Play Flexbox zombies](https://mastery.games/flexboxzombies)
+
+## 6. Grid garden
+
+![Grid Garden CSS Game](https://cdn.hashnode.com/res/hashnode/image/upload/v1645941872383/5gMB0gxCF.png)
+
+Grid garden is a super fun way to learn CSS Grid. You have to use grid layouts to ensure all the carrots get water.
+
+It has 28 levels to practice a lot of CSS grid options!
+
+[Play Grid garden](https://cssgridgarden.com/)
+
+## 7. Grid attack
+
+![Grid attack CSS Game](https://cdn.hashnode.com/res/hashnode/image/upload/v1645941995081/p6UD5JFH-.png)
+
+This game is by the same creator as Flexbox adventure and super well-executed like the other game!
+
+You have to use CSS Grid to change the land so the demons will not survive.
+
+It comes with 80 levels, which gives you many options and time to learn CSS grid in a super fun way.
+
+[Play Grid Attack](https://codingfantasy.com/games/css-grid-attack/play)
+
+## 8. CSS Diner
+
+![CSS Dinner CSS Game](https://cdn.hashnode.com/res/hashnode/image/upload/v1645942101408/9e003Z5vA.png)
+
+This game is actually really interesting!
+It's a game to learn about CSS selectors and some modern ones.
+
+The game has 32 levels and entertaining animations to showcase what selector you should target.
+
+[Play CSS Diner](https://flukeout.github.io/)
+
+## 9. Guess CSS
+
+![Guess CSS Game](https://cdn.hashnode.com/res/hashnode/image/upload/v1645942238609/Drx0t3YFJ.png)
+
+This game is very similar to CSS Diner, but you have to guess which selector matches the result you see.
+
+This is an excellent concept as you always get to see the perfect result.
+
+It's also not limited to specific CSS parts and includes many different ones.
+
+[Play Guess CSS](https://www.guess-css.app/)
+
+## 10. CSS Speedrun
+
+![CSS Speedrun](https://cdn.hashnode.com/res/hashnode/image/upload/v1645942354518/c4twY1_Ov.png)
+
+In this game, you have to write specific CSS Selectors to target5 the highlighted elements.
+
+However, you have to do it as quickly as possible, making this a great challenge for those who like an extra level of hardness to their games.
+
+The game comes with ten levels, but you can play more often and improve your speed.
+
+[Play CSS Speedrun](https://css-speedrun.netlify.app/)
+
+## Bonus
+
+Once you've mastered these games, you can enter some CSS challenges and battles to showcase all you learned.
+
+Some great website for that are:
+
+- [CSS Battle](https://cssbattle.dev/)
+- [100 days of CSS](https://100dayscss.com/)
+- [CSS Challenges](https://css-challenges.com/)
+
+All these websites have a particular example you have to recreate most efficiently most of the time.
+
+There are some excellent communities around these websites, and you'll have fun solving them.
+
+Let me know what your favorite CSS game is 🙌.
+
+### Thank you for reading, and let's connect!
+
+Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)

src/pages/posts/5-full-stack-projects-to-add-to-your-portfolio-before-2020-ends.md

@@ -5,7 +5,6 @@ metaTitle: '5 full-stack projects to add to your portfolio before 2020 ends 🤯
 metaDesc: 'Add these five amazing full-stack projects to your portfolio before 2020'
 image: /images/28-08-2020.jpg
 date: 2020-08-28T03:00:00.000Z
-top: true
 tags:
   - developer
 ---

src/pages/posts/5-things-i-learned-from-writing-500-tech-articles.md

@@ -5,7 +5,6 @@ metaTitle: '5 things I learned from writing 500 tech articles'
 metaDesc: 'The five things I learned from writing 500 tech articles'
 image: /images/09-08-2021.jpg
 date: 2021-08-09T03:00:00.000Z
-top: true
 tags:
   - developer
 ---

src/pages/posts/8-non-technical-ways-to-contribute-to-open-source.md

@@ -5,7 +5,6 @@ metaTitle: '8 Non-technical ways to contribute to open-source'
 metaDesc: 'Here are eight non-technical ways you can contribute to open-source projects'
 image: /images/07-10-2021.jpg
 date: 2021-10-07T03:00:00.000Z
-top: true
 tags:
   - developer
 ---

src/pages/posts/a-letter-to-my-future-self.md

@@ -5,7 +5,6 @@ metaTitle: 'A letter to my future self 💌'
 metaDesc: 'Experiment time: Writing a letter to my future self'
 image: /images/06-01-2021.jpg
 date: 2021-01-06T03:00:00.000Z
-top: true
 tags:
   - developer
 ---

src/pages/posts/adding-a-sitemap-in-eleventy.md

@@ -59,8 +59,6 @@ permalink: '/sitemap.xml'
 
 All right, this will already create a file called `sitemap.xml`. Now let's add all the pages we want to be found and crawled.
 
-{% raw %}
-
 ```xml
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
@@ -73,8 +71,6 @@ All right, this will already create a file called `sitemap.xml`. Now let's add a
 </urlset>
 ```
 
-{% endraw %}
-
 This will give us the following result:
 
 ```xml
@@ -124,18 +120,12 @@ Let's create a file called `site.json` inside our `src/_data` folder.
 
 You can extend the information in there as much as you like. We can use the variables in the following manner:
 
-{% raw %}
-
 ```html
 {{ site.url }}
 ```
 
-{% endraw %}
-
 So let's add that to our sitemap.
 
-{% raw %}
-
 ```html
 ---
 permalink: /sitemap.xml
@@ -153,8 +143,6 @@ eleventyExcludeFromCollections: true
 </urlset>
 ```
 
-{% endraw %}
-
 That's it. We now get the desired sitemap output!
 
 ## Adding a robots.txt file in Eleventy
@@ -165,8 +153,6 @@ In there, we can also note the sitemap _location_.
 
 Create a file called `robots.njk` inside the `src` directory.
 
-{% raw %}
-
 ```html
 ---
 permalink: '/robots.txt'
@@ -176,8 +162,6 @@ eleventyExcludeFromCollections: true
 User-agent: * Allow: / Sitemap: {{ site.url }}/sitemap.xml
 ```
 
-{% endraw %}
-
 Here we state that the file should be called `robots.txt` and should be excluded from the sitemap.
 
 Then we place the robots' content; in this case, we allow all robots on all paths.

src/pages/posts/adding-a-toc-in-astro.md

@@ -0,0 +1,120 @@
+---
+layout: ../../layouts/Post.astro
+title: 'Adding a TOC in Astro'
+metaTitle: 'Adding a TOC in Astro'
+metaDesc: "Adding a Table of Contents to an Astro markdown powered blog"
+image: /images/05-03-2022.jpg
+date: 2022-03-05T03:00:00.000Z
+tags:
+- astro
+---
+A big part of Markdown is that it's great to write articles and not worry about the markup quickly.
+
+But at the same time, that brings some limitations with it.
+Limitations like how we can add a table of contents? (TOC)
+
+This article will show you how to add one of those TOCs to your Astro-powered website.
+
+> Note: I'll be using Astro v0.23 for this article
+
+## Setting up the framework
+
+Let's set up a basic framework to work with.
+
+```bash
+npm init astro -- --template blog
+```
+
+This will set up a basic Astro blog started, visit the `pages/post` folder and modify the existing post to include a complete markdown structure with some headings.
+
+Headings are created by using the `#` sign. (One for each heading)
+
+```md
+# Heading 1
+## Heading 2
+### Heading 3
+```
+
+Once you are happy with the blog post, run the website and see how it looks.
+
+```bash
+npm run dev
+```
+
+You should have a very minimalistic blog with a detailed article by now.
+
+## Adding the TOC markdown plugin
+
+Luckily, we won't have to create this plugin from scratch.
+There are amazing `rehype` plugins already made that we can use.
+
+First, let's install the plugins we need, which are:
+
+- `rehype-autolink-headings`
+- `rehype-slug`
+- `rehype-toc`
+
+To install them run the following command:
+
+```bash
+npm i rehype-autolink-headings rehype-toc rehype-slug
+``` 
+
+With those installed, we can tell Astro to start using these plugins.
+
+Open up the `astro.config.mjs` file. This file handles all the things around the build of Astro.
+
+The first thing we have to do is import the existing Astro remark rendered. This holds all of Astro's needed config.
+
+```js
+import astroRemark from "@astrojs/markdown-remark";
+```
+
+Then inside the export we need to add a new options for markdown, which will look like this:
+
+```js
+export default /** @type {import('astro').AstroUserConfig} */ ({
+	renderers: [],
+	buildOptions: {
+		site: 'https://example.com/',
+	},
+	markdownOptions: {
+		render: [
+			astroRemark,
+			{
+				rehypePlugins: [
+					"rehype-slug",
+					[
+						"rehype-autolink-headings",
+						{ behavior: "append"},
+					],
+					[
+						"rehype-toc",
+						{ headings: ["h1", "h2"] }
+					]
+				],
+			},
+		],
+	},
+});
+```
+
+As you can see, we added the `markdownOptions`, and inside we added the default `astroRemark` and then the plugins we want to use.
+
+It's important to note the order of these plugins seems to make a difference, so start by adding the `rehype-slug` since the other two rely on that.
+
+You can see the auto-link headings and TOC plugin come with a configuration object. You can modify or change this however you need.
+
+When you re-run your website (it's crucial to re-run as this will only take effect then), you should see a super cool TOC that you can click and navigate from.
+
+![Adding a Table of contents in Astro](https://cdn.hashnode.com/res/hashnode/image/upload/v1645680568141/6UNjnkoEV.gif)
+<!--<video autoplay loop muted playsinline>
+  <source src="https://res.cloudinary.com/daily-dev-tips/video/upload/v1645680567/astro-toc_sgvlun.webm" type="video/webm" />
+  <source src="https://res.cloudinary.com/daily-dev-tips/video/upload/v1645680566/astro-toc_oqrhuc.mp4" type="video/mp4" />
+</video>-->
+
+You can also find the complete code example on [GitHub](https://github.com/rebelchris/astro-toc).
+
+### Thank you for reading, and let's connect!
+
+Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)