Merge pull request #1794 from Patrity/seo-improvements

Seo Improvements
fireship-io · Jan 30, 2025 · b95d25c · b95d25c
2 parents 74dfe39 + 191c894
commit b95d25c
Show file tree

Hide file tree

Showing 163 changed files with 457 additions and 277 deletions.
diff --git a/.gitignore b/.gitignore
@@ -30,4 +30,5 @@ firebase.json
 .firebase
 resources/
 data/svelte.json
-.env
+.env
+/.unlighthouse
diff --git a/config.toml b/config.toml
@@ -19,6 +19,18 @@ mainSections = ["lessons", "snippets"]
 vars = ["title", "description", "summary", "date", "publishdate", "lastmod", "permalink"]
 params = ["tags"]
 
+[params.seoTitles]
+  [params.seoTitles.contributors]
+    suffix = " - Contributors | Fireship.io"
+  [params.seoTitles.courses]
+    prefix = "Learn "
+    suffix = " Online Course | Fireship.io"
+  [params.seoTitles.lessons]
+    prefix = "Tutorial: "
+    suffix = " | Fireship.io"
+  [params.seoTitles.tags]
+    suffix = " - Tags | Fireship.io"
+
 [markup.goldmark.renderer]
 unsafe= true
 

diff --git a/content/contributors/_index.md b/content/contributors/_index.md
@@ -0,0 +1,4 @@
+---
+title: Contributors
+description: Meet the contributors who bring you high-quality content on Fireship.io.
+---
diff --git a/content/contributors/jeroen.ouwehand.md → content/contributors/jeroen-ouwehand.md b/content/contributors/jeroen.ouwehand.md → content/contributors/jeroen-ouwehand.md
@@ -1,6 +1,6 @@
 ---
 title: Jeroen Ouwehand
-featured_img: /img/contributors/jeroen-ouwehand.jpeg
+featured_img: /img/contributors/jeroen-ouwehand.webp
 
 links:
     github: https://github.com/jeroenouw

diff --git a/content/contributors/jorge-dacosta.md b/content/contributors/jorge-dacosta.md
@@ -10,4 +10,4 @@ links:
     github: https://github.com/overlineink
 ---
 
-Jorge Dacosta is Co-Founder of [Splash Ink](https://splashink.gq/) (🇦🇴 🇿🇦), Graphic Designer and Open Source (OSS) enthusiast who loves share his knowledge.
+Jorge Dacosta is Co-Founder of Splash Ink (🇦🇴 🇿🇦), Graphic Designer and Open Source (OSS) enthusiast who loves share his knowledge.
diff --git a/content/courses/_index.md b/content/courses/_index.md
@@ -1,3 +1,4 @@
 ---
 title: Courses
+description: Explore Fireship's diverse range of courses to learn coding, frameworks, and tools.
 ---
diff --git a/content/courses/cloud-functions/intro-deployment.md b/content/courses/cloud-functions/intro-deployment.md
@@ -15,7 +15,7 @@ emoji: 👶
 firebase deploy --only functions
 ```
 
-# or 
+## or 
 
 ```
 firebase deploy --only functions:your-function-name

diff --git a/content/courses/firebase-security/intro-get-started.md b/content/courses/firebase-security/intro-get-started.md
@@ -32,7 +32,7 @@ npm init -y
 npx create-react-app myapp
 ```
 
-# 3. Connect your Local Code to Firebase
+## 3. Connect your Local Code to Firebase
 
 {{< file "terminal" "command line" >}}
 ```bash

diff --git a/content/courses/firestore-data-modeling/_index.md b/content/courses/firestore-data-modeling/_index.md
@@ -1,5 +1,5 @@
 ---
-lastmod: 2021-8-26T10:23:30-09:00
+lastmod: 2021-08-26T10:23:30-09:00
 title: Firestore Data Modeling
 description: Learn how to query and model data in Firestore by example.
 weight: 0

diff --git a/content/courses/flutter-firebase/auth-google.md b/content/courses/flutter-firebase/auth-google.md
@@ -9,7 +9,7 @@ vimeo: 645764833
 video_length: 3:15
 ---
 
-# Auth Service
+## Auth Service
 
 Implement Google Login in the auth service.
 

diff --git a/content/courses/flutter-firebase/auth-login-screen.md b/content/courses/flutter-firebase/auth-login-screen.md
@@ -9,7 +9,7 @@ vimeo: 645764917
 video_length: 3:53
 ---
 
-# Anonymous Auth
+## Anonymous Auth
 
 Enable anonymous auth in the Firebase console, then implemment it in the auth service. 
 

diff --git a/content/courses/flutter-firebase/auth-stream.md b/content/courses/flutter-firebase/auth-stream.md
@@ -10,7 +10,7 @@ video_length: 3:18
 chapter_start: User Authentication
 ---
 
-# Auth Service
+## Auth Service
 
 Create a file named `auth.dart` in the `services` directory.
 

diff --git a/content/courses/flutter-firebase/project-google-fonts.md b/content/courses/flutter-firebase/project-google-fonts.md
@@ -11,7 +11,7 @@ video_length: 0:45
 
 Add the Google Fonts package to your `pubspec.yaml` file.
 
-# Customize the Global Font
+## Customize the Global Font
 
 {{< file "flutter" "theme.dart" >}}
 ```dart

diff --git a/content/courses/react/basics-suspense.md b/content/courses/react/basics-suspense.md
@@ -9,6 +9,6 @@ emoji: 🧪
 video_length: wip
 ---
 
-# WIP
+## WIP
 
 This section is unfinished. Check back for updates soon.
diff --git a/content/courses/supabase/intro-react-basics.md b/content/courses/supabase/intro-react-basics.md
@@ -15,6 +15,6 @@ quiz: true
   <h6>Which Hook is used to run code when a component is first mounted to the DOM?</h6>
 </quiz-modal>
 
-# Optional
+## Optional
 
 This video was originally released on YouTube and is intended to be a primer for React. It is not required to build the main demo app in the course.
diff --git a/content/dashboard.html b/content/dashboard.html
@@ -2,6 +2,7 @@
 title: Dashboard
 ---
 <div class="max-w-3xl mx-auto">
+<h1 class="text-5xl text-center">Fireship Dashboard</h1>
 <if-user>
     <h2 class="text-5xl text-center"><span class="text-green-500 font-display"><user-data field="xp-raw"></user-data></span>XP</h2>
     <div class="mx-auto w-24 h-1 my-12 bg-gradient-to-r from-green-600 to-green-400 rounded-full"></div>

diff --git a/content/lessons/_index.md b/content/lessons/_index.md
@@ -1,3 +1,4 @@
 ---
 title: Lessons
+description: Access lessons on web development, programming, and more on Fireship.io.
 ---
diff --git a/content/lessons/advanced-cloud-vision-ocr-text-extraction/index.md b/content/lessons/advanced-cloud-vision-ocr-text-extraction/index.md
@@ -151,7 +151,7 @@ export const imageTagger = functions.storage
 
 Our cloud function saves the response from the function in the Firestore Database. Simply listen to the corresponding document and display its properties as needed. In this example, we unwrap the object observable and display various properties in the UI. 
 
-<img class="content-image" src="/images/cloud-vision-doc.png" alt="Sample response from cloud vision API in firestore" /> 
+<!-- <img class="content-image" src="/images/cloud-vision-doc.png" alt="Sample response from cloud vision API in firestore" />  -->
 
 {{< figure src="img/cloud-vision-doc.png" caption="Data returned from the Cloud Vision API" >}}
 

diff --git a/content/lessons/angular-ngrx-redux-starter-guide/index.md b/content/lessons/angular-ngrx-redux-starter-guide/index.md
@@ -82,7 +82,7 @@ npm install @ngrx/core @ngrx/store  --save
 
 Let's start by building the most simple ngrx pattern possible. Our app state will consist of one single variable - a hello world message in English. Then we will create two actions that will translate this message into French or Spanish.
 
-<img src="/images/ngrx-redux-angular-simple-example.gif" alt="A simple example of ngrx redux in Angular4" class="content-image" />
+{{< figure src="img/ngrx-redux-angular-simple-example.gif" caption="A simple example of ngrx redux in Angular4" >}}
 
 ### app.module.ts
 
@@ -439,7 +439,7 @@ export class AppModule { }
 When you activate the plugin in Chrome, you get nice breakdown of state changes in browser. The plugin will tell you exactly which properties have changed after each event. This makes debugging incredibly easy when get unexpected results in your data store.
 
 
-{{< figure src="img/redux-plugin-ngrx.gif" caption="The redux plugin for Chrome makes debugging NgRx a breeze" >}}
+<!-- {{< figure src="img/redux-plugin-ngrx.gif" caption="The redux plugin for Chrome makes debugging NgRx a breeze" >}} -->
 
 ## Up next
 

diff --git a/content/lessons/apple-signin-with-firebase-tutorial/index.md b/content/lessons/apple-signin-with-firebase-tutorial/index.md
@@ -40,15 +40,15 @@ Follow the steps outlined below to implement [Sign In with Apple](https://develo
 
 From the Apple Developer Portal go to [Certificates, Identifiers & Profiles >> Identifiers](https://help.apple.com/developer-account/#/devcdfbb56a3). Create a new **App ID** or update an existing app and give it the  **Sign In with Apple** capability. 
 
-{{< figure src="/img/snippets/apple-signin-app1.png" alt="Apple Developer Portal App IDs" >}}
-{{< figure src="/img/snippets/apple-signin-app2.png" caption="Make sure Sign In with Apple is Enabled" >}}
+<!-- {{< figure src="/img/snippets/apple-signin-app1.png" alt="Apple Developer Portal App IDs" >}}
+{{< figure src="/img/snippets/apple-signin-app2.png" caption="Make sure Sign In with Apple is Enabled" >}} -->
 
 ### Step 2 - Create and Configure a Service ID
 
 
 From *Certificates, Identifiers & Profiles >> Identifiers*, create a new **Service ID** and make sure it is linked to your primary App ID. Configure it to point to your Firebase hosting URL. 
 
-{{< figure src="/img/snippets/apple-signin-web-config.png" caption="Replace the project ID for your domain" >}}
+<!-- {{< figure src="/img/snippets/apple-signin-web-config.png" caption="Replace the project ID for your domain" >}} -->
 
 
 ### Step 3 - Verify Domain Ownership
@@ -62,27 +62,27 @@ Deploy this file to your domain so Apple can verify it.
 firebase deploy --only hosting
 ```
 
-{{< figure src="/img/snippets/apple-signin-verify.png" caption="You should see a green checkmark next to the domain" >}}
+<!-- {{< figure src="/img/snippets/apple-signin-verify.png" caption="You should see a green checkmark next to the domain" >}} -->
 
 ### Step 4 - Register a Private Key
 
 From *Certificates, Identifiers & Profiles >> Identifiers*, create and download a new private key - keep it private. It is used to validate requests from Apple with your Firebase project. 
 
-{{< figure src="/img/snippets/apple-signin-private-key.png" caption="Download the private key. Do not expose it publicly." >}}
+<!-- {{< figure src="/img/snippets/apple-signin-private-key.png" caption="Download the private key. Do not expose it publicly." >}} -->
 
 
 ### Step 5 - Enable SignIn Method on Firebase
 
 Head over the to the [Firebase Console](https://console.firebase.google.com/) and go to the *Authentication >> Sign-in Method* tab. Enable Apple and enter the required details.  
 
-{{< figure src="/img/snippets/apple-signin-firebase-console.png" caption="Copy the contents of the private key in the console" >}}
+<!-- {{< figure src="/img/snippets/apple-signin-firebase-console.png" caption="Copy the contents of the private key in the console" >}} -->
 
 
 ## Frontend Code
 
 We now have all the pieces in place to implement SignIn with Apple into our web app. Because this is Firebase, it only requires a few lines of code. Assuming you have [Firebase installed](/snippets/install-angularfire/) in your project, simply make a reference to the provider and call `signInWithPopup()`.
 
-{{< figure src="/img/snippets/apple-signin-popup.png" caption="SignIn with Apple popup seen by the end-user" >}}
+<!-- {{< figure src="/img/snippets/apple-signin-popup.png" caption="SignIn with Apple popup seen by the end-user" >}} -->
 
 ### Basic JavaScript Implementation
 

diff --git a/content/lessons/async-form-validation-in-firebase-enforce-uniqueness/index.md b/content/lessons/async-form-validation-in-firebase-enforce-uniqueness/index.md
@@ -40,7 +40,7 @@ This tutorial assumes you have...
 - You have a collection of users with usernames (so we have something to validate uniqueness against)
 
 
-<img src="/images/firebase-username-data.png" alt="username data as it appears in Firestore" class="content-image" />  
+<!-- <img src="/images/firebase-username-data.png" alt="username data as it appears in Firestore" class="content-image" />   -->
 
 Your `app.module.ts` should have the following imports: 
 

diff --git a/content/lessons/deckgl-google-maps-tutorial/index.md b/content/lessons/deckgl-google-maps-tutorial/index.md
@@ -39,7 +39,7 @@ You can use Deck.gl with any framework, but this demo uses vanilla JavaScript wi
 
 First, create a Google Cloud (or Firebase) project and obtain a browser API key for [Google Maps JS](https://developers.google.com/maps/documentation/javascript/get-api-key). 
 
-{{< figure src="/img/snippets/google-maps-enable.png" caption="Enable the Google Maps JavaScript API from a GCP project. Copy the browser API key from the credentials page." >}}
+<!-- {{< figure src="/img/snippets/google-maps-enable.png" caption="Enable the Google Maps JavaScript API from a GCP project. Copy the browser API key from the credentials page." >}} -->
 
 ### Create a Webpack project
 

diff --git a/content/lessons/deploy-multiple-sites-to-firebase-hosting/index.md b/content/lessons/deploy-multiple-sites-to-firebase-hosting/index.md
@@ -60,7 +60,7 @@ Managing multiple sites in Firebase Hosting just requires a few simiple configur
 
 Go to the hosting tab on the Firebase console and add your sites. Each site can have its own custom domain and deployment history. 
 
-<img class="content-image" src="/images/multisite-hosting.png" alt="Add multiple sites from firebase console" /> 
+<!-- <img class="content-image" src="/images/multisite-hosting.png" alt="Add multiple sites from firebase console" />  -->
 
 {{< figure src="img/multisite-hosting.png" caption="Add multiple sites from the Firebase Console" >}}
 

diff --git a/content/lessons/firebase-emulator-advanced/index.md b/content/lessons/firebase-emulator-advanced/index.md
@@ -28,7 +28,7 @@ vimeo: 424882834
 The [Firebase emulator suite](https://firebase.google.com/docs/emulator-suite) allows developers to run a mock Firebase environment locally. Last week, Firebase released a new feature called the [Emulator UI](https://firebase.googleblog.com/2020/05/local-firebase-emulator-ui.html) to visualize and manage Firestore (and Realtime DB) from the browser. The following lesson contains a variety of advanced techniques for setting up a Firebase development environment.
 
 <div class="flex-center">
-    {{< tweet 1267220417896255488 >}}
+    {{< tweet user="fireship_dev" id="1267220417896255488" >}}
 </div>
 
 

diff --git a/...-by-example/img/root-col-firestire-08.png → ...ata-modeling-by-example/img/root-cols.png b/...-by-example/img/root-col-firestire-08.png → ...ata-modeling-by-example/img/root-cols.png
diff --git a/content/lessons/firestore-nosql-data-modeling-by-example/index.md b/content/lessons/firestore-nosql-data-modeling-by-example/index.md
@@ -47,7 +47,7 @@ Now let's look at the [three fundamental ways](https://firebase.google.com/docs/
 A root collection keeps all documents of a certain type at the root, providing maximum query flexibility. If you're unsure of the optimal data model, a root collection your safest bet. 
 
 
-{{< figure src="root-col-firestire-08.png" caption="Root Collection" >}}
+{{< figure src="img/root-cols.png" caption="Root Collection" >}}
 
 You can model relational data with a root collection by making a reference to a sibling document. For example, every `tweet` document can be assigned a `userId` property that points to the user who posted it. 
 

diff --git a/content/lessons/regex-cheat-sheet-js/index.md b/content/lessons/regex-cheat-sheet-js/index.md
@@ -30,7 +30,7 @@ github:
 
 Much like Gif vs Jif, the proper pronunciation of RegEx is passionately debated among developers. Based on my limited twitter poll, in looks like most prefer the hard G over the soft J. 
 
-{{< tweet 1262408319282458625 >}}
+    {{< tweet user="fireship_dev" id="1262408319282458625" >}}
 
 ## Regex Reference
 

diff --git a/...nt/lessons/role-based-authorization-with-firestore-nosql-and-angular-5/index.md b/...nt/lessons/role-based-authorization-with-firestore-nosql-and-angular-5/index.md
@@ -273,7 +273,7 @@ An easier approach is to block unauthorized users at the router level. In this c
 1. Activate routes only for users with the  `admin` role. 
 2. Activate routes only for users roles assigned to the `canRead` ability.
 
-<img src="/images/role-route-guard.gif" alt="firestore role based auth router guard demo" class="content-image" /> 
+{{< figure src="img/role-route-guard.gif" caption="Role-based auth demo" >}}
 
 ### Admin Guard
 

diff --git a/content/lessons/rxjs-basic-pro-tips/index.md b/content/lessons/rxjs-basic-pro-tips/index.md
@@ -45,7 +45,7 @@ I like to think of RxJS terminology in a highly simplified way.
 3. Emit - When an Observable spits out a value because something subscribed to it.
 4. Operator - Functions that alter the the way Observables emit values. 
 
-<img src="/images/observable-animation.gif" alt="animation of rx observable" class="content-image" />
+<!-- <img src="/images/observable-animation.gif" alt="animation of rx observable" class="content-image" /> -->
 
 ### Excellent Resources
 

diff --git a/content/lessons/secure-firebase-cloud-functions/index.md b/content/lessons/secure-firebase-cloud-functions/index.md
@@ -86,7 +86,7 @@ Now if you try to update data on this node without being logged in with a matchi
 
 It is not always feasible to use database triggers, so how do we secure an HTTP Firebase Cloud Function? The answer is to [decode an authentication token header](https://firebase.google.com/docs/auth/admin/verify-id-tokens) in the cloud function environment. 
 
-<img src="/images/secure-https-cloud-function.gif" alt="A secure endpoint on Firebase cloud functions" class="content-image" />
+<!-- <img src="/images/secure-https-cloud-function.gif" alt="A secure endpoint on Firebase cloud functions" class="content-image" /> -->
 
 Google has put together an [example](https://github.com/firebase/functions-samples/tree/master/authorized-https-endpoint) of an authorized endpoint in the cloud functions samples repo. I have modified the function to my own preferences and added a way to trigger it with the Angular HTTP module. 
 

diff --git a/content/lessons/the-ultimate-beginners-guide-to-firebase/index.md b/content/lessons/the-ultimate-beginners-guide-to-firebase/index.md
@@ -116,8 +116,6 @@ Run the function above by binding it to a button click event.
 
 That should authenticate the user into your app and create the user in Firebase as shown below:
 
-<img class="content-image" src="/images/basics-auth.png" alt="User auth in Firebase simple code snippet" /> 
-
 {{< figure src="img/basics-auth.png" caption="User authentication in Firebase" >}}
 
 ## 3. Cloud Firestore Database

diff --git a/content/lessons/vue-autosaving-forms-with-firestore/index.md b/content/lessons/vue-autosaving-forms-with-firestore/index.md
@@ -28,7 +28,7 @@ Modern applications that accept complex user inputs often provide an automatic s
 
 The following lesson builds a reactive Vue form that automatically syncs the user's input to a backend database -  [Firestore](/tags/firestore). It keeps track of the state of the form, and when modified, waits for a short debounce before writing the changes to the backend database. From a UX perspective, this feature allows a user to save their progress and access it later from any device.  Also, see the [Angular Auto-saving Forms Demo](/lessons/auto-save-reactive-forms-with-firestore/) demo. 
 
-{{< tweet 1247955207448924161 >}}
+{{< tweet user="fireship_dev" id="1247955207448924161" >}}
 
 ## Initial Setup
 

diff --git a/content/privacy.md b/content/privacy.md
@@ -4,7 +4,7 @@ lastmod: 2022-09-11T08:36:36-07:00
 draft: false
 ---
 
-## Privacy Policy
+# Privacy Policy
 
 Fireship.io ("Fireship" "we" or "us") is committed to protecting your privacy. This Privacy Policy explains the methods and reasons we collect, use, disclose, transfer, and store your information. If you have any questions about the contents of this policy, don’t hesitate to contact us.
 

diff --git a/content/snippets/delete-firestore-collection.md b/content/snippets/delete-firestore-collection.md
@@ -20,6 +20,7 @@ tags:
 # versions: 
 #     - "rxjs": 6.3
 ---
+# How To Delete a Firestore Collection
 
 Deleting an entire collection from Firestore should be handled on a backend server. Collections can grow infinitely large, so deleting a millions of documents can be an excessively large workload to put on a clientside web or mobile app. 
 

diff --git a/content/tags/_index.md b/content/tags/_index.md
@@ -0,0 +1,4 @@
+---
+title: Tags
+description: Browse topics and tags to find the tutorials and guides you need on Fireship.io.
+---
diff --git a/content/tags/advanced/_index.md b/content/tags/advanced/_index.md
@@ -0,0 +1,4 @@
+---
+title: Advanced
+description: Explore advanced programming concepts with in-depth guides and tutorials on Fireship.io.
+---
diff --git a/content/tags/algolia/_index.md b/content/tags/algolia/_index.md
@@ -0,0 +1,4 @@
+---
+title: Algolia
+description: Learn how to implement powerful search features with Algolia through step-by-step tutorials.
+---
diff --git a/content/tags/analytics/_index.md b/content/tags/analytics/_index.md
@@ -0,0 +1,4 @@
+---
+title: Animation
+description: Dive into animation techniques to create dynamic and engaging user experiences.
+---
diff --git a/content/tags/animation/_index.md b/content/tags/animation/_index.md
@@ -0,0 +1,4 @@
+---
+title: Algolia
+description: Master analytics tools and techniques to track, analyze, and optimize performance.
+---
diff --git a/content/tags/apollo/_index.md b/content/tags/apollo/_index.md
@@ -0,0 +1,4 @@
+---
+title: Apollo
+description: Understand Apollo for efficient state management and GraphQL server-side solutions.
+---
diff --git a/content/tags/auth/_index.md b/content/tags/auth/_index.md
@@ -0,0 +1,4 @@
+---
+title: Auth
+description: Enhance your authentication systems with tutorials on security best practices.
+---
diff --git a/content/tags/authentication/_index.md b/content/tags/authentication/_index.md
@@ -0,0 +1,4 @@
+---
+title: Authentication
+description: Build secure and scalable authentication systems with in-depth guides.
+---
diff --git a/content/tags/aws/_index.md b/content/tags/aws/_index.md
@@ -0,0 +1,4 @@
+---
+title: Aws
+description: Leverage AWS cloud computing services with practical, hands-on tutorials.
+---
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,7 +15,7 @@ emoji: 👶 @@
     firebase deploy --only functions
     ```
-    # or
+    ## or
     ```
     firebase deploy --only functions:your-function-name
@@ Expand Down @@