Merge pull request #53 from chrisweb/preview

Preview to main

app/web_development/posts/git/page.mdx

@@ -2,7 +2,7 @@
 title: git
 keywords: ['git', 'commit', 'repository', 'branch']
 published: 2024-08-03T11:22:33.444Z
-modified: 2024-08-15T14:22:33.444Z
+modified: 2024-09-04T14:22:33.444Z
 permalink: https://chris.lu/web_development/posts/git
 section: Web development
 ---
@@ -300,4 +300,38 @@ git remote show origin
 git branch --delete BRANCH_NAME
 ```
 
+## Windows: git ignorecase configuration option
+
+If you rename a file on Windows and only change the case, for example, you change a file with all small letters to camelCase, then that change will NOT trigger a commit
+
+Usually, something like this will lead to the problem: you are developing on Windows, where filenames are case agnostic, so importing a file on Windows and using all small letters (filename.ext) for a filename uses camelCase (fileName.ext) will NOT cause an error in your local development environment. Everything will be fine until you deploy your code on your staging (testing) environment, where you will probably use a Linux-based operating system. On staging, your import will trigger a **file not found** error. So now you want to fix your error and update the filename to use only small letters, but after editing the fileName, you realize there is no commit waiting to be done 
+
+To tell git to also commit changes where only the case of the filename changed, you have **2** options:
+
+**Option 1:** Using the config command
+
+In your terminal, go to the root of your repository, then use the following command to change the ignorecase configuration for your **current repository**:
+
+```shell 
+git config core.ignorecase true
+```
+
+If you want to make that change for all repositories (globally), then add the **--global** flag to the command:
+
+```shell 
+git config --global core.ignorecase true
+```
+
+**Option 2:** Edit the configuration file (manually)
+
+Edit the git config in your repository, change **ignorecase** from true to false, and then save the change
+
+```shell title=".git/config" 
+[core]
+	ignorecase = false
+```
+
+> [!MORE]  
+> [git "ignoreCase" documentation](https://www.git-scm.com/docs/git-config/2.14.6#Documentation/git-config.txt-coreignoreCase)
+
 </article>

app/web_development/tutorials/next-js-static-mdx-blog/analytics_and_speed_insights/page.mdx

@@ -3,7 +3,7 @@ title: Vercel Analytics and Speed Insights - Tutorial
 description: Vercel Analytics and Speed Insights - Next.js static MDX blog | www.chris.lu Web development tutorials
 keywords: ['vercel', 'Analytics', 'Speed Insights', 'packages', 'gdpr']
 published: 2024-08-26T20:20:20.444Z
-modified: 2024-08-27T21:22:23.444Z
+modified: 2024-09-04T21:22:23.444Z
 permalink: https://chris.lu/web_development/tutorials/next-js-static-mdx-blog/analytics_and_speed_insights
 section: Web development
 ---
@@ -242,6 +242,35 @@ To see your **Speed Insights** in action, login to your Vercel account, click on
 > [Vercel "Speed Insights" quickstart](https://vercel.com/docs/speed-insights/quickstart)  
 > [Vercel "Speed Insights Configuration" documentation](https://vercel.com/docs/speed-insights/package)  
 
+## CSP directives update
+
+If you use either Vercel Analytics or Speed Insights and have added the CSP header as described in the [Adding CSP Headers in Next.js configuration](/web_development/tutorials/next-js-static-mdx-blog/content-security-policy#adding-csp-headers-in-nextjs-configuration) chapter, then you will have to make a few adjustments to your configuration
+
+Edit your `next.config.mjs` file, and then in the `defaultCSPDirectives` variable, remove the `require-trusted-types-for 'script'` directive
+
+If this directive is enabled, you will get the following errors in your browser console:
+
+```shell
+This document requires 'TrustedScriptURL' assignment.
+```
+
+You might want to add a comment inside of your `next.config.mjs`, to let other developers that might wonder why this directive is missing, why you haven't included it:
+
+```js
+// we removed the
+// require-trusted-types-for 'script';
+// directive from defaultCSPDirectives
+// because of vercel analytics and speed insights
+```
+
+A second change you need to do (when using Vercel analytics), is to add the `https://va.vercel-scripts.com` domain for the **development** environment to the **srcipt-src** directive:
+
+```shell
+script-src 'self' 'unsafe-inline' 'unsafe-eval' https://va.vercel-scripts.com;
+```
+
+This is only needed in development, in development Vercel Analytics does NOT track visits, but it is still loading a script from that domain, which is why we add it to the script-src directive
+
 <Pagination
     previous={{ label: 'Frontmatter plugin', href: '/web_development/tutorials/next-js-static-mdx-blog/frontmatter-plugin' }}
     next={{ label: 'Production release (custom domain)', href: '/web_development/tutorials/next-js-static-mdx-blog/production_release' }}

app/web_development/tutorials/next-js-static-mdx-blog/table-of-contents-plugin/page.mdx

@@ -224,7 +224,7 @@ To make the table of contents a little bit better looking, we are going to add t
 
 Lines 209 to 212: for the `<aside>{:html}` container that has the id **articleToc**, we set a width of 100% but also set the maximum width to 200px
 
-Lines 214 to 217: for the `<nav>{:html}` element that is a child of the `<aside>{:html}` element, we set the position to sticky to make sure it is always visible (even when you scroll down, it stays on top)
+Lines 214 to 217: for the `<nav>{:html}` element (that is a child of the `<aside>{:html}` element), we set the position to sticky to make sure it is always visible (even when you scroll down, it stays on top)
 
 Lines 219 to 212: as the toc consists of `<ul>{:html}` and `<li>{:html}` list elements but we don't want to see the default [list markers](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type) so we set the [list style](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style) to none