docs(nx-dev): rename images with invalid Windows filenames

Author: philipjfulcher

docs/blog/2021-10-14-step-by-step-guide-on-creating-a-monorepo-for-react-native-apps-using-nx.md

@@ -2,15 +2,15 @@
 title: 'Step by Step Guide on Creating a Monorepo for React Native Apps using Nx'
 slug: 'step-by-step-guide-on-creating-a-monorepo-for-react-native-apps-using-nx'
 authors: ['Emily Xiong']
-cover_image: '/blog/images/2021-10-14/1*92uzyqB8oJ8tZJB9wAdoWQ.png'
+cover_image: '/blog/images/2021-10-14/92uzyqB8oJ8tZJB9wAdoWQ.png'
 tags: [nx, tutorial]
 ---
 
 Do you want to have both mobile and web apps in the same repo? Do you wish that you could share code between mobile and web apps? This blog post shows you how to create a React Native mobile app and a React web app in the same repo with shared libraries using Nx.
 
 It goes through how to create a simple 2-page app that shows your daily horoscope based on your zodiac sign.
 
-![](/blog/images/2021-10-14/1*yqKU8cqFWP4nzAkttVyE1w.avif)
+![](/blog/images/2021-10-14/yqKU8cqFWP4nzAkttVyE1w.avif)
 _Screenshots of Daily Horoscope App_
 
 TL;DR — GitHub repo: [xiongemi/aztro-daily-horoscope](https://github.com/xiongemi/aztro-daily-horoscope)
@@ -44,7 +44,7 @@ nx generate application **daily-horoscope-app**
 
 This should generate `daily-horoscope-app` folder under apps:
 
-![](/blog/images/2021-10-14/1*WWfQWoOHTgH8l9uCnstTVQ.avif)
+![](/blog/images/2021-10-14/WWfQWoOHTgH8l9uCnstTVQ.avif)
 _daily-horoscope-app folder_
 
 Now you install the starter project of Nx React Native. If you run:
@@ -144,7 +144,7 @@ nx generate lib models
 
 This should generate a models folder under libs:
 
-![](/blog/images/2021-10-14/1*CduoANBuFeigb68ZIiebxg.avif)
+![](/blog/images/2021-10-14/CduoANBuFeigb68ZIiebxg.avif)
 _models folder under libs_
 
 Then under this models folder, create a file to have the below enum that contains all the zodiac signs:
@@ -300,14 +300,14 @@ export default App;
 
 If you run `nx run-ios daily-horoscope-app` and `nx run-android daily-horoscope-app`, you should see something like:
 
-![](/blog/images/2021-10-14/1*-6HpGqGYxKk0xoqdYo1ihg.avif)
+![](/blog/images/2021-10-14/6HpGqGYxKk0xoqdYo1ihg.avif)
 _Left: iOS simulator, right: Android simulator_
 
 You have created the first page of your app.
 
 If you run the command `nx dep-graph`, you should see what the dependency graph looks like below:
 
-![](/blog/images/2021-10-14/1*Gwhu91TPPZzjtDIMU07__w.avif)
+![](/blog/images/2021-10-14/Gwhu91TPPZzjtDIMU07__w.avif)
 _Dependency graph_
 
 The next step is to handle action when users pressed on a list item. To achieve that, it is going to use Redux.
@@ -561,14 +561,14 @@ Since the code is running in simulators, how to use the Redux Devtools extension
 
 Open the debug menu in the simulator by entering `d` in the terminal that runs the start command. Then in the debug menu, choose “Debug with Chrome” for iOS and “Debug” for Android.
 
-![](/blog/images/2021-10-14/1*4QVoNHRjzW0agHGnxyWvpw.avif)
+![](/blog/images/2021-10-14/4QVoNHRjzW0agHGnxyWvpw.avif)
 _Debug Menu in iOS and Android_
 
 Install tool React Native Debugger: [https://github.com/jhen0409/react-native-debugger](https://github.com/jhen0409/react-native-debugger).
 
 Now inside React Native Debugger, you should be able to use Redux Devtools and Redux Logger. Now if you press any zodiac sign from the list, you should see action `horoscope/setUserZodiacSignItem` got dispatched and the state is updated.
 
-![](/blog/images/2021-10-14/1*pTbVOfaAbCvW1Kcn3RzzfQ.avif)
+![](/blog/images/2021-10-14/pTbVOfaAbCvW1Kcn3RzzfQ.avif)
 _React Native Debugger_
 
 Now you have successfully set up the Redux store for your app. The next step is to navigate to a different screen when you have successfully selected a zodiac sign.
@@ -648,7 +648,7 @@ export default App;
 
 If you run the code in the simulator, the app should look similar to before except for the header.
 
-![](/blog/images/2021-10-14/1*X_A3v107SDFSmYWwBhki1A.avif)
+![](/blog/images/2021-10-14/X_A3v107SDFSmYWwBhki1A.avif)
 _Add React Navigation in iOS and Android simulator_
 
 ### Create Second Page
@@ -782,7 +782,7 @@ export const ZodiacSignListContainer = connect(
 
 Now you should be able to navigate between 2 screens.
 
-![](/blog/images/2021-10-14/1*kA79kriH_l3OTWSvB5iQZQ.avif)
+![](/blog/images/2021-10-14/kA79kriH_l3OTWSvB5iQZQ.avif)
 _Navigate between 2 screens_
 
 ## Integrate with API
@@ -1214,14 +1214,14 @@ In the App component, replace `HoroscopeCard` with `HoroscopeCardContainer`:
 
 Now when you run the app, it should display the horoscope according to the zodiac user selected.
 
-![](/blog/images/2021-10-14/1*yqKU8cqFWP4nzAkttVyE1w.avif)
+![](/blog/images/2021-10-14/yqKU8cqFWP4nzAkttVyE1w.avif)
 _Horoscope Card integrated with API_
 
 Finally, you got a mobile app that runs on both Android and iOS. You could reuse the libraries to create a web app.
 
 If you run command `nx dep-graph`, you should see the dependency graph looks like below:
 
-![](/blog/images/2021-10-14/1*gel7mQ8k4jDkCABq3-itpw.avif)
+![](/blog/images/2021-10-14/gel7mQ8k4jDkCABq3-itpw.avif)
 _Dependency Graph_
 
 ## Create Web App
@@ -1367,12 +1367,12 @@ Also in `workspace.json`, change the webpackConfig under daily-horoscope-web to
 
 Now if you run `nx serve daily-horoscope-web`, it should the web app in the browser.
 
-![](/blog/images/2021-10-14/1*w7SscyvUFlujPqwXb-QN-w.avif)
+![](/blog/images/2021-10-14/w7SscyvUFlujPqwXb-QN-w.avif)
 _Web App_
 
 Now the dependency graph should look like:
 
-![](/blog/images/2021-10-14/1*hIHwQPhh9_DOGIJokxLX4g.avif)
+![](/blog/images/2021-10-14/hIHwQPhh9_DOGIJokxLX4g.avif)
 _Dependency Graph_
 
 ## Conclusion

docs/blog/2021-12-17-mastering-the-project-boundaries-in-nx.md

@@ -2,7 +2,7 @@
 title: 'Taming Code Organization with Module Boundaries in Nx'
 slug: 'mastering-the-project-boundaries-in-nx'
 authors: ['Miroslav Jonaš']
-cover_image: '/blog/images/2021-12-17/1*PIUl1QGk7mOpSFdEwFQ8OA.png'
+cover_image: '/blog/images/2021-12-17/PIUl1QGk7mOpSFdEwFQ8OA.png'
 tags: [nx]
 ---
 
@@ -79,7 +79,7 @@ Finally, the flag `enforceBuildableLibDependency` prevents us from importing a n
 
 To best express the need for the boundaries and assist us through the explanation, we will be using the repository represented by the following graph:
 
-![](/blog/images/2021-12-17/1*z3ap5kyCXG4p8bcBQXx9tA.avif)
+![](/blog/images/2021-12-17/z3ap5kyCXG4p8bcBQXx9tA.avif)
 _The graph representation of the repository_
 
 Our repository consists of two applications — Store and Admin. Each of them is composed of several feature libraries — Products (for Store), Sales, and Invoices (for Admin). Also, both of these applications depend on the Core library, and every project in our repo depends on our Shared library. Using common sense, we would like to enforce certain boundaries:
@@ -109,7 +109,7 @@ Your changed project configuration should now have the tags section defined.
 
 Your enhanced graph will now look similar to this:
 
-![](/blog/images/2021-12-17/1*kTiRazA4qhZ7kD-lGgGyjg.avif)
+![](/blog/images/2021-12-17/kTiRazA4qhZ7kD-lGgGyjg.avif)
 _Graph with type tags set_
 
 The above list of library types is not complete. You might add specific ones for E2E projects or UI component libraries. Using the naming format `type:*` is just a suggestion. Consider this being a hashtag on your favorite social app. You can use any prefix or format you feel fitting. The important thing is that it's readable and intuitive to all the members of your team.
@@ -149,7 +149,7 @@ Now, that we have marked all of our projects, we can continue to define the rule
 
 We said that a feature library can depend on any other feature library, but there is a small catch. Our two apps could be built with a different framework so mixing feature libraries would not be possible. To avoid any future impediments, we don’t want to allow a feature library used in `Store` to depend on the feature library from `Admin` and vice versa. Additionally, only our apps should be able to load the `Core` library.
 
-![](/blog/images/2021-12-17/1*mr_MbGgWVbBcfBhss0hNqA.avif)
+![](/blog/images/2021-12-17/mr_MbGgWVbBcfBhss0hNqA.avif)
 _Project graph with type tags and technology badges_
 
 Let’s add another dimension to allow such restrictions. We will define the necessary scope tags:
@@ -161,7 +161,7 @@ Let’s add another dimension to allow such restrictions. We will define the nec
 
 Our diagram should now look like this:
 
-![](/blog/images/2021-12-17/1*KeO1ZnEkUtmS2uj8M2rqKA.avif)
+![](/blog/images/2021-12-17/KeO1ZnEkUtmS2uj8M2rqKA.avif)
 _Full project graph with two-dimensional tags_
 
 Let us now define our missing rules!

docs/blog/2021-12-23-single-file-monorepo-config-custom-workspace-presets-improved-tailwind-support-and-more-in-nx-13.md

@@ -2,7 +2,7 @@
 title: 'Single File Monorepo Config, Custom Workspace Presets, Improved Tailwind Support, and more in Nx 13.4!'
 slug: 'single-file-monorepo-config-custom-workspace-presets-improved-tailwind-support-and-more-in-nx-13'
 authors: ['Brandon Roberts']
-cover_image: '/blog/images/2021-12-23/1*_4u3Fw49H5U-sqgyBoGsqw.png'
+cover_image: '/blog/images/2021-12-23/4u3Fw49H5U-sqgyBoGsqw.png'
 tags: [nx, release]
 ---
 
@@ -12,7 +12,7 @@ Nx is a smart, extensible build framework to help you architect, test, and build
 
 Nx reached a major milestone this week of one million weekly downloads. Nx has been working to push monorepos forward for a long time, and this milestone is a reflection of work between us and the Nx community to grow and expand in this space.
 
-![](/blog/images/2021-12-23/1*WC4RQRZhTtOCsiATOL1cBg.avif)
+![](/blog/images/2021-12-23/WC4RQRZhTtOCsiATOL1cBg.avif)
 _One million weekly downloads_
 
 ## Single File Monorepo Configuration ☝️
@@ -55,7 +55,7 @@ Read all the details on [our new TypeScript guide](/getting-started/intro) or ch
 
 ## Improved Tailwind support for Angular 💅
 
-![](/blog/images/2021-12-23/0*1yacozydc1muZ74G.avif)
+![](/blog/images/2021-12-23/1yacozydc1muZ74G.avif)
 _Tailwind Logo_
 
 Tailwind is a utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup. If you’ve used Tailwind with Angular applications previously, it's supported out of the box with Nx. We’re continually looking to improve the developer experience of using Tailwind in Angular applications and libraries. We already added support to the Angular plugin for Nx, and have added a new generator to configure Tailwind in **existing** apps and buildable/publishable libs, allowing you to set up and configure Tailwind without manual steps. The ability to configure new apps and libs is also supported, with support for Tailwind V2 and the latest V3 release.

docs/blog/2022-01-25-new-terminal-output-performance-improvements-in-nx-13-5.md

@@ -2,7 +2,7 @@
 title: 'New Terminal Output & Performance Improvements in Nx 13.5'
 slug: 'new-terminal-output-performance-improvements-in-nx-13-5'
 authors: ['Juri Strumpflohner']
-cover_image: '/blog/images/2022-01-25/1*PIUl1QGk7mOpSFdEwFQ8OA.png'
+cover_image: '/blog/images/2022-01-25/PIUl1QGk7mOpSFdEwFQ8OA.png'
 tags: [nx]
 ---
 
@@ -12,7 +12,7 @@ Nx is a smart, extensible build framework to help you architect, test, and build
 
 Folks that have been following along in our journey for quite some time know already that at Nx we strive for the best possible DX. The current terminal output was always something we haven’t been super happy with, especially if you run some of the commands that trigger the execution of multiple tasks (e.g. affected commands, run-many etc). This is why we’re even more excited about this feature: the new dynamic Nx terminal output is now the default for everyone.
 
-![](/blog/images/2022-01-25/1*81krRElSXV5w2T54DiCBAA.avif)
+![](/blog/images/2022-01-25/81krRElSXV5w2T54DiCBAA.avif)
 _New dynamic terminal output in Nx 13.5_
 
 It clearly separates the terminal output into an upper part where all the completed tasks and their corresponding execution time are listed and a lower part where the currently running tasks show up. Of course, errors are always shown immediately and therefore easy to spot.
@@ -39,7 +39,7 @@ When running an Nx command there might potentially be many tasks running at diff
 
 That’s why we introduced the ability to profile and visualize Nx commands in the Chrome Devtools.
 
-![](/blog/images/2022-01-25/1*7vk8AUWRGkDI0vcVX4Ql-g.avif)
+![](/blog/images/2022-01-25/7vk8AUWRGkDI0vcVX4Ql-g.avif)
 
 Use the `NX_PROFILE=<filename>` environment variable attached to your Nx CLI command:
 
@@ -64,7 +64,7 @@ The project graph is always a nice feature to show off in videos, talks, and blo
 
 In v13.5 we now also store the current filter status in the URL. That makes it easy to pinpoint a certain view and share it with a co-worker. Actually, this could just be the beginning of some more interesting features when we think about CI and visualizations 🤔.
 
-![](/blog/images/2022-01-25/1*RM9hDFIsgLn1X4EX5qsgGg.avif)
+![](/blog/images/2022-01-25/RM9hDFIsgLn1X4EX5qsgGg.avif)
 _Nx dep graph now stores filters in the URL_
 
 Here’s our deployed live example of the above screenshot: [https://nrwl-nx-examples-dep-graph.netlify.app/?focus=products-home-page](https://nrwl-nx-examples-dep-graph.netlify.app/?focus=products-home-page)

docs/blog/2022-01-28-set-up-tailwind-css-with-angular-in-an-nx-workspace.md

@@ -2,7 +2,7 @@
 title: 'Set up Tailwind CSS with Angular in an Nx workspace'
 slug: 'set-up-tailwind-css-with-angular-in-an-nx-workspace'
 authors: ['Leosvel Pérez Espinosa']
-cover_image: '/blog/images/2022-01-28/1*igoocYqr8gj8n9t8qr5cuA.png'
+cover_image: '/blog/images/2022-01-28/igoocYqr8gj8n9t8qr5cuA.png'
 tags: [nx]
 ---
 
@@ -20,7 +20,7 @@ The final result of what we are going to be building can be found in this Github
 
 We are going to create 2 simple applications with the following layout:
 
-![](/blog/images/2022-01-28/1*OXo64rzyF-5nKO2fbpG4xg.avif)
+![](/blog/images/2022-01-28/OXo64rzyF-5nKO2fbpG4xg.avif)
 _Applications mockup_
 
 We’ll start by creating one application with the required markup and **Tailwind CSS** utility classes to achieve the above layout. Then, we’re going to leverage **Nx**’s library support and extract some common UI components into 2 different shared libraries:
@@ -200,7 +200,7 @@ npx nx run app1:serve
 
 Visiting [https://localhost:4200](https://localhost:4200) in your browser should show the application looking like the following screenshot:
 
-![](/blog/images/2022-01-28/1*TkIVfzbeier6j0nlAeX7ig.avif)
+![](/blog/images/2022-01-28/TkIVfzbeier6j0nlAeX7ig.avif)
 _Application 1 screenshot_
 
 That’s it! We have successfully created our application to fulfill the requirements we had. Next, we are going to start extracting pieces of the UI into shared libraries to reuse them with the second application.
@@ -260,7 +260,7 @@ Since we have our application configured to scan the relevant files within itsel
 
 Below is a small decision tree to check whether a **Tailwind CSS** configuration is needed for your library in an **Nx** workspace:
 
-![](/blog/images/2022-01-28/1*x_nZUiADymUMNsmDpAU3aA.avif)
+![](/blog/images/2022-01-28/x_nZUiADymUMNsmDpAU3aA.avif)
 _Decision tree for the need of Tailwind CSS configuration in Angular libraries_
 
 ## Extracting the header into a library
@@ -655,7 +655,7 @@ Once again, if we serve our application everything should still be working as ex
 
 Also, if we visualize the workspace projects we’ll see how `app1` and `lib2` now have a dependency on `tailwind-preset`:
 
-![](/blog/images/2022-01-28/1*F1p0OfL4WrmubTQ2QPX04Q.avif)
+![](/blog/images/2022-01-28/F1p0OfL4WrmubTQ2QPX04Q.avif)
 _Project graph showing dependencies between the projects in the workspace_
 
 ## Creating the second application
@@ -782,7 +782,7 @@ npx nx run app2:serve
 
 Now, open your browser and navigate to it where you should see the application looking like the following screenshot:
 
-![](/blog/images/2022-01-28/1*LoOmmjSzfB33ho9NhcqQKQ.avif)
+![](/blog/images/2022-01-28/LoOmmjSzfB33ho9NhcqQKQ.avif)
 _Application 2 screenshot_
 
 That does indeed look different, but something is off. The card background color is not right, it’s still the same used for `app1` even though we provided a different theme. Also, some of the spacing for the elements within the card doesn’t seem to have changed according to our configuration.
@@ -896,7 +896,7 @@ We need to do the same for `app1`. Edit the `apps/app1/src/styles.css` file with
 
 Let’s serve again `app2` and navigate to it to check the results of our changes:
 
-![](/blog/images/2022-01-28/1*TwcAfPTrKRm1D9ydEFwWWA.avif)
+![](/blog/images/2022-01-28/TwcAfPTrKRm1D9ydEFwWWA.avif)
 _Application 2 screenshot_
 
 Now we are talking!
@@ -1200,7 +1200,7 @@ npx nx run lib3:build
 
 If we check the output folder `dist/libs/lib3`, we’ll see there’s a `themes` folder in it with a couple of files `indigo.css` and `teal.css`:
 
-![](/blog/images/2022-01-28/1*vcHqTWEppPbVtGRlVIqEPg.avif)
+![](/blog/images/2022-01-28/vcHqTWEppPbVtGRlVIqEPg.avif)
 _Publishable library with the produced theme files highlighted_
 
 These theme files can now be used by the consumers of our library to properly style the components exposed by it. All they would need to do is to import one of those themes into their application styles entry point or `index.html` file.