Fixed grammar issues on articles. Moved from pixels to em / rem

apps/blog/.env.example

@@ -4,4 +4,7 @@ NEXT_PUBLIC_SITE_BASEURL =
 NEXT_PUBLIC_GOOGLE_ANALYTICS =
 # -------------------------
 # Variables setup in netlify
+# -------------------------
+
+# Planetscale database url
 DATABASE_URL =

apps/blog/src/components/article/ArticleCard.tsx

@@ -49,7 +49,7 @@ const EstimateReadingTime = styled.p({
 const ImageWrapper = styled.div({
   position: 'relative',
   width: '100%',
-  height: '300px',
+  height: '18.750rem',
   marginBottom: theme.sizing.scale600,
   background: theme.colors.backgroundAlwaysDark,
 });

apps/blog/src/components/mdx-components/MdxComponents.tsx

@@ -9,9 +9,9 @@ import {
   HeadingSmall,
   HeadingXSmall,
 } from '@bereghici/design-system.typography';
+import { Block } from '@bereghici/design-system.block';
 import { Link as DSLink } from '@bereghici/design-system.link';
 import { theme } from '@bereghici/design-system.theme';
-
 export const Link = ({
   href = '/',
   children,
@@ -73,4 +73,5 @@ export default {
   pre: Pre,
   code: Code,
   inlineCode: InlineCode,
+  Block,
 };

apps/blog/src/data/blog/angular-tips-and-tricks.mdx

@@ -1,20 +1,20 @@
 ---
 title: Angular - tips and tricks
 description: |
-  This article aims to show some tricks that can be used in Angular to make the code
-  cleaner and improve the performance of your application.
+  This article aims to show some tricks that can be used in Angular to make the code cleaner and improve the performance of your application.
 date: '2018-06-27'
 image: /static/images/angular-tips-and-tricks.jpg
 ---
 
 <Image
-  alt={`React Code`}
+  alt={`Angular logo`}
   src={`/static/images/angular-tips-and-tricks.jpg`}
   blurDataURL={`/static/images/angular-tips-and-tricks.jpg`}
   width={800}
   height={400}
   priority
   placeholder="blur"
+  layout="responsive"
 />
 
 Recently, I completed a project in Angular and along the way, there were some things
@@ -27,7 +27,7 @@ you might want to keep in mind along the way.
 
 Every time a component or directive is destroyed, the subscription to observable
 remains active. So it is important to unsubscribe from it to release the memory
-in the system, otherwise, you will have memory leak.
+in the system, otherwise, you will have a memory leak.
 There are many approaches but I prefer to use **takeUntil** function:
 
 ```js
@@ -166,6 +166,7 @@ This is how visualisation looks like:
   width={800}
   height={450}
   priority
+  layout="responsive"
 />
 
 More information about this tool you can read here:

apps/blog/src/data/blog/build-a-scalable-front-end-with-rush-monorepo-and-react--eslint+lint-staged.mdx

@@ -16,6 +16,7 @@ image: /static/images/build-a-scalable-front-end-with-rush-monorepo-and-react-pa
   height={400}
   priority
   placeholder="blur"
+  layout="responsive"
 />
 
 This is the 3rd part of the blog series "Build a scalable front-end with Rush monorepo and React"
@@ -39,10 +40,10 @@ This is the 3rd part of the blog series "Build a scalable front-end with Rush mo
 
 #### TL;DR
 
-If you're interested to just see the code, you can find it here:
+If you're interested in just see the code, you can find it here:
 [https://github.com/abereghici/rush-monorepo-boilerplate](https://github.com/abereghici/rush-monorepo-boilerplate)
 
-If you want to see an example with Rush used in a real project, at large scale, you can take a look at
+If you want to see an example with Rush used in a real, large project, you can look at
 [ITwin.js](https://github.com/imodeljs/imodeljs), an open-source project developed by Bentley Systems.
 
 ---

apps/blog/src/data/blog/build-a-scalable-front-end-with-rush-monorepo-and-react--github-actions+netlify.mdx

@@ -16,6 +16,7 @@ image: /static/images/build-a-scalable-front-end-with-rush-monorepo-and-react-pa
   height={400}
   priority
   placeholder="blur"
+  layout="responsive"
 />
 
 This is the 4th part of the blog series "Build a scalable front-end with Rush monorepo and React"
@@ -39,16 +40,16 @@ This is the 4th part of the blog series "Build a scalable front-end with Rush mo
 
 #### TL;DR
 
-If you're interested to just see the code, you can find it here:
+If you're interested in just see the code, you can find it here:
 [https://github.com/abereghici/rush-monorepo-boilerplate](https://github.com/abereghici/rush-monorepo-boilerplate)
 
-If you want to see an example with Rush used in a real project, at large scale, you can take a look at
+If you want to see an example with Rush used in a real, large project, you can look at
 [ITwin.js](https://github.com/imodeljs/imodeljs), an open-source project developed by Bentley Systems.
 
 ---
 
 [Netlify](https://www.netlify.com/) allows you to configure the deployment of your project
-directly on their dashboard using a build command. This is working well when you have a
+directly on their dashboard using a build command. This works well when you have a
 project in a single repository and you don't need to deploy it very often.
 They give you a free plan which includes only 300 free build minutes. On the other hand,
 Github Actions is more flexible and they give you 2000 free build minutes.
@@ -362,5 +363,5 @@ If you encountered any issues during the process, you can see the code related t
 [here](https://github.com/abereghici/rush-monorepo-boilerplate).
 
 If you're using VSCode, you might be interested to see some configurations that
-can be enrich your development experience with this monorepo.
+can enrich your development experience with this monorepo.
 See the [next](/blog/build-a-scalable-front-end-with-rush-monorepo-and-react--vscode) post.

apps/blog/src/data/blog/build-a-scalable-front-end-with-rush-monorepo-and-react--repo-setup+import-projects+prettier.mdx

@@ -3,8 +3,8 @@ title: |
   Build a scalable front-end with Rush monorepo and React — Repo Setup + Import projects + Prettier
 description: |
   This is the 1st part of the blog series "Build a scalable front-end with Rush monorepo and React".
-  In this post we'll init a new Rush monorepo and we'll import the projects without loosing git history.
-  We'll also add Prettier to format the code for entire repository.
+  In this post, we'll init a new Rush monorepo and we'll import the projects without losing git history.
+  We'll also add Prettier to format the code for the entire repository.
 date: '2021-08-16'
 image: /static/images/build-a-scalable-front-end-with-rush-monorepo-and-react-part1.jpg
 ---
@@ -17,6 +17,7 @@ image: /static/images/build-a-scalable-front-end-with-rush-monorepo-and-react-pa
   height={400}
   priority
   placeholder="blur"
+  layout="responsive"
 />
 
 This is the 1st part of the blog series "Build a scalable front-end with Rush monorepo and React"
@@ -40,9 +41,9 @@ This is the 1st part of the blog series "Build a scalable front-end with Rush mo
 
 In a multi-repository project structure, it's only a matter of time when
 you'll need to reuse some code from one project to another. Adopting a monorepo
-architecture can help the team to share and contribute code in a simple manner.
+architecture can help the team share and contribute code in a simple manner.
 I won't cover in this article the pros and cons of choosing this approach, because
-there are plenty of resources that debate this topic, instead I'll focus on the
+there are plenty of resources that debate this topic, instead, I'll focus on the
 implementation of a scalable monorepo using Rush.js and React.
 
 #### Tools
@@ -61,8 +62,7 @@ We'll be using the following tools:
 
 #### Goals
 
-Before starting to implement the monorepo, let's define the goals we want to
-achieve using these tools:
+Before implementing the monorepo, let's define the goals we want to achieve using these tools:
 
 - Multiple applications
 - Code sharing between applications
@@ -72,10 +72,10 @@ achieve using these tools:
 
 #### TL;DR
 
-If you're interested to just see the code, you can find it here:
+If you're interested in just see the code, you can find it here:
 [https://github.com/abereghici/rush-monorepo-boilerplate](https://github.com/abereghici/rush-monorepo-boilerplate)
 
-If you want to see an example with Rush used in a real project, at large scale, you can take a look at
+If you want to see an example with Rush used in a real, large project, you can look at
 [ITwin.js](https://github.com/imodeljs/imodeljs), an open-source project developed by Bentley Systems.
 
 #### Guide
@@ -87,7 +87,7 @@ Let's clone it locally and let the magic begin!
 
 ##### Initialize the rush monorepo
 
-Inside of your project folder run the following commands:
+Inside of your project folder, run the following commands:
 
 ```bash
 npm install -g @microsoft/rush
@@ -98,7 +98,7 @@ rush init
 After this command, you'll see a bunch of files and folders created. You can check
 the config files reference [here](https://rushjs.io/pages/advanced/config_files/).
 
-At this point we can remove unnecessary files and create our first commit.
+At this point, we can remove unnecessary files and create our first commit.
 
 ```bash
 rm -rf .travis.yml

apps/blog/src/data/blog/build-a-scalable-front-end-with-rush-monorepo-and-react--vscode.mdx

@@ -16,6 +16,7 @@ image: /static/images/build-a-scalable-front-end-with-rush-monorepo-and-react-pa
   height={400}
   priority
   placeholder="blur"
+  layout="responsive"
 />
 
 This is the 5th part of the blog series "Build a scalable front-end with Rush monorepo and React"
@@ -39,17 +40,17 @@ This is the 5th part of the blog series "Build a scalable front-end with Rush mo
 
 #### TL;DR
 
-If you're interested to just see the code, you can find it here:
+If you're interested in just see the code, you can find it here:
 [https://github.com/abereghici/rush-monorepo-boilerplate](https://github.com/abereghici/rush-monorepo-boilerplate)
 
-If you want to see an example with Rush used in a real project, at large scale, you can take a look at
+If you want to see an example with Rush used in a real, large project, you can look at
 [ITwin.js](https://github.com/imodeljs/imodeljs), an open-source project developed by Bentley Systems.
 
 ---
 
-In previous posts we added `prettier` and `eslint` to format our code and enforce
+In previous posts, we added `prettier` and `eslint` to format our code and enforce
 a consistent code style across our projects. We can save time
-by automatically format pasted code, or fix `lint` errors while writing code,
+by automatically formatting pasted code, or fix `lint` errors while writing code,
 without running lint command to see all the errors.
 
 VSCode provides two different types of settings:
@@ -131,7 +132,7 @@ Create a new file `.vscode/settings.json` in the root of our monorepo and let's
 }
 ```
 
-In this settings we:
+In these settings we:
 
 - set Prettier as default formatter
 - exclude from search some irrelevant folders like `node_modules` and `.nyc_output`
@@ -142,4 +143,4 @@ In this settings we:
 - provide a path to `eslint` plugins. We're helping ESLint extension to pick up
   the right rules for each project.
 
-I hope you'll find this settings useful.
+I hope you'll find these settings useful.

apps/blog/src/data/blog/build-a-scalable-front-end-with-rush-monorepo-and-react--webpack+jest.mdx

@@ -16,6 +16,7 @@ image: /static/images/build-a-scalable-front-end-with-rush-monorepo-and-react-pa
   height={400}
   priority
   placeholder="blur"
+  layout="responsive"
 />
 
 This is the 2nd part of the blog series "Build a scalable front-end with Rush monorepo and React"
@@ -39,22 +40,22 @@ This is the 2nd part of the blog series "Build a scalable front-end with Rush mo
 
 #### TL;DR
 
-If you're interested to just see the code, you can find it here:
+If you're interested in just see the code, you can find it here:
 [https://github.com/abereghici/rush-monorepo-boilerplate](https://github.com/abereghici/rush-monorepo-boilerplate)
 
-If you want to see an example with Rush used in a real project, at large scale, you can take a look at
+If you want to see an example with Rush used in a real, large project, you can look at
 [ITwin.js](https://github.com/imodeljs/imodeljs), an open-source project developed by Bentley Systems.
 
 ---
 
 [create-react-app](https://create-react-app.dev/) is a great tool that allows you
 to develop react applications without having to manually configure build tools.
-When you develop small projects it might be overkill to manage your own build tools and
+When you develop small projects, it might be overkill to manage your own build tools and
 CRA is more than enough, but when you start to build large projects you might find
 CRA configuration lacking. CRA is an opinionated pre-configured tool, so there will
 always be some settings that you aren't happy with and you cannot change them.
 
-In this post we'll create our own build tools, based on [create-react-app](https://create-react-app.dev/).
+In this post, we'll create our own build tools, based on [create-react-app](https://create-react-app.dev/).
 This will give us full control over the build process.
 
 #### Create react-scripts package
@@ -432,8 +433,8 @@ rushx build
 
 #### Setup BrowserList
 
-By default, `react-scripts` expects to find a `browserslist` configuration in each project,
-otherwise it fallbacks to the default `browserslist` configuration.
+By default, `react-scripts` expect to find a `browserslist` configuration in each project,
+otherwise, it fallbacks to the default `browserslist` configuration.
 If you want to use the same configuration for all your projects, you can modify
 `packages/react-scripts/build.js` to use `browserslist` from `package.json` from `@monorepo/react-scripts`.
 

apps/blog/src/data/blog/react-versions-the-newest-features-of-react-16-6-explained-for-everyday-use.mdx

@@ -18,6 +18,7 @@ image: /static/images/react-versions-the-newest-features-of-react.jpg
   height={400}
   priority
   placeholder="blur"
+  layout="responsive"
 />
 
 We’re living in pretty eventful times for React. Late December 2018 saw the release of version 16.7 which included an important performance bugfix for “React.lazy”. But, no other API (application programming interface) changes were delivered.

packages/design-system/primitives/src/layout.ts

@@ -1,6 +1,6 @@
 export const layout = {
-  pageMargin: '24px',
-  maxContentWidth: '800px',
+  pageMargin: '2rem',
+  maxContentWidth: '50rem',
 } as const;
 
 export type Layout = typeof layout;

packages/design-system/primitives/src/mediaQueries.ts

@@ -1,10 +1,10 @@
 export const mediaQueries = {
-  mobile: `@media (max-width: 767px)`,
-  tablet: `@media (min-width: 768px)`,
-  desktop: `@media (min-width: 1024px)`,
-  desktopLarge: `@media (min-width: 1184px)`,
-  tabletOnly: `@media (min-width: 768px) and (max-width: 1023px)`,
-  tabletOrSmaller: `@media (max-width: 1023px)`,
+  mobile: `@media (max-width: 47.938em)`,
+  tablet: `@media (min-width: 48em)`,
+  desktop: `@media (min-width: 64em)`,
+  desktopLarge: `@media (min-width: 74em)`,
+  tabletOnly: `@media (min-width: 48em) and (max-width: 63.938em)`,
+  tabletOrSmaller: `@media (max-width: 63.938em)`,
 } as const;
 
 export type MediaQueries = typeof mediaQueries;

packages/design-system/primitives/src/sizing.ts

@@ -1,26 +1,26 @@
 export const sizing = {
-  scale0: '2px',
-  scale100: '4px',
-  scale200: '6px',
-  scale300: '8px',
-  scale400: '10px',
-  scale500: '12px',
-  scale550: '14px',
-  scale600: '16px',
-  scale650: '18px',
-  scale700: '20px',
-  scale750: '22px',
-  scale800: '24px',
-  scale850: '28px',
-  scale900: '32px',
-  scale950: '36px',
-  scale1000: '40px',
-  scale1200: '48px',
-  scale1400: '56px',
-  scale1600: '64px',
-  scale2400: '96px',
-  scale3200: '128px',
-  scale4800: '192px',
+  scale0: '0.125rem',
+  scale100: '0.250rem',
+  scale200: '0.375rem',
+  scale300: '0.500rem',
+  scale400: '0.625rem',
+  scale500: '0.750rem',
+  scale550: '0.875rem',
+  scale600: '1rem',
+  scale650: '1.125rem',
+  scale700: '1.250rem',
+  scale750: '1.375rem',
+  scale800: '1.5rem',
+  scale850: '1.750rem',
+  scale900: '2rem',
+  scale950: '2.250rem',
+  scale1000: '2.500rem',
+  scale1200: '3rem',
+  scale1400: '3.5rem',
+  scale1600: '4rem',
+  scale2400: '6rem',
+  scale3200: '8rem',
+  scale4800: '12rem',
 } as const;
 
 export type Sizing = typeof sizing;