Scala projects course page (#339)

daniel-ciocirlan · andreilgeorgescu · web-flow · commit 862edc797ef5 · 2025-08-20T23:41:29.000+03:00
* scala projects course page

* Update scala-projects image file with new version and reduced size

* Add LFS support to checkout step in PR workflow

* Add error message for missing pricing plan in CourseLayout

* Update package.json dependencies for improved performance and security

* Add .nvmrc file and remove packageManager field from package.json

* Add isPreview property to course data and update related components

* Update pnpm version to 10.14.0 in workflows and package.json

* Update newsletter subscription title for course availability notification

* Refactor newsletter subscription form for improved design and user experience

* Hide Curriculum component when in preview mode

---------

Co-authored-by: Andrei Liviu Georgescu &lt;146103342+andreilgeorgescu@users.noreply.github.com&gt;
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -5,7 +5,8 @@
       "autoPull": false
     },
     "ghcr.io/devcontainers/features/node:1": {
-      "version": "22"
+      "version": "22",
+      "pnpmVersion": "10.14.0"
     }
   },
   "customizations": {
diff --git a/.github/workflows/cache.yaml b/.github/workflows/cache.yaml
@@ -19,7 +19,7 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: latest
+          version: 10.14.0
           run_install: false
       - name: Setup Node.js
         uses: actions/setup-node@v4
diff --git a/.github/workflows/pr.yaml b/.github/workflows/pr.yaml
@@ -14,10 +14,12 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+        with:
+          lfs: true
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: latest
+          version: 10.14.0
           run_install: false
       - name: Setup Node.js
         uses: actions/setup-node@v4
@@ -37,7 +39,7 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: latest
+          version: 10.14.0
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
diff --git a/.github/workflows/weekly.yaml b/.github/workflows/weekly.yaml
@@ -20,7 +20,7 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: latest
+          version: 10.14.0
           run_install: false
       - name: Setup Node.js
         uses: actions/setup-node@v4
@@ -43,7 +43,7 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: latest
+          version: 10.14.0
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
@@ -58,11 +58,11 @@ jobs:
           arguments: --github-annotate-new-only=false
   check_broken_links:
     name: Check Broken Links
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: latest
+          node-version: 22
       - name: Check Broken Links
         run: npx linkinator https://rockthejvm.com --recurse
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+22
diff --git a/package.json b/package.json
@@ -80,5 +80,6 @@
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.28.0"
-  }
+  },
+  "packageManager": "pnpm@10.14.0"
 }
diff --git a/src/collections/courses.ts b/src/collections/courses.ts
@@ -95,6 +95,7 @@ export default defineCollection({
           .min(1, "At least 1 instructor is required")
           .default(["daniel-ciocirlan"]),
         isFree: z.boolean().default(false),
+        isPreview: z.boolean().default(false),
         pricingPlanId: z.number().int().nonnegative(),
         publishedDate: z.date().optional(),
         question: z
diff --git a/src/components/NewsletterSection.astro b/src/components/NewsletterSection.astro
@@ -2,58 +2,127 @@
 interface Props {
   stacked?: boolean;
   title?: string;
+  isPreview?: boolean;
 }
 
-const { stacked = false, title } = Astro.props;
+const { stacked = false, title, isPreview = false } = Astro.props;
 ---
 
 {
   stacked ? (
-    <div class="bg-bkg py-8 md:py-0">
-      <div class="mx-auto max-w-7xl px-6">
-        {title && (
-          <h2 class="max-w-xl text-balance text-xl font-semibold tracking-tight text-content-1 sm:text-2xl">
-            {title}
-          </h2>
-        )}
-        <form id="newsletter-form" class="w-full max-w-md pt-2 lg:col-span-5">
-          <div class="flex gap-x-4">
-            <label for="email" class="sr-only">
-              {" "}
-              Email address{" "}
-            </label>
-            <input
-              id="email"
-              name="email"
-              type="email"
-              autocomplete="email"
-              required
-              class="min-w-0 flex-auto rounded-md bg-white px-3.5 py-2 text-base text-black placeholder-black outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-black focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
-              placeholder="Enter your email"
-            />
-            <button
-              type="submit"
-              class="flex-none rounded-md bg-cta px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-accent-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-            >
-              Subscribe
-            </button>
-          </div>
-          <p class="mt-4 text-sm/6 text-content-1">
-            This site is built on trust, and your data is safe. Check out the{" "}
-            <a href="/policies/privacy" class="font-semibold">
-              privacy&nbsp;policy
-            </a>
-            .
+    isPreview ? (
+      <div class="mb-4 mt-10 bg-transparent py-8 md:py-0">
+        <div class="mx-auto max-w-2xl px-6 text-center underline decoration-white">
+          {title && (
+            <h2 class="text-lg font-medium text-gray-200 sm:text-xl">
+              {title}
+            </h2>
+          )}
+
+          <form id="newsletter-form" class="mt-6">
+            <div class="mx-auto max-w-xl overflow-hidden rounded-2xl bg-white/10 p-2 shadow-xl ring-1 ring-black/10 backdrop-blur-md dark:ring-white/15">
+              <div class="flex flex-col gap-2 sm:flex-row">
+                <div class="relative flex-1">
+                  <svg
+                    aria-hidden="true"
+                    viewBox="0 0 24 24"
+                    class="pointer-events-none absolute left-3 top-1/2 size-5 -translate-y-1/2 opacity-70"
+                  >
+                    <path
+                      fill="white"
+                      d="M20 6H4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2Zm0 2v.01L12 13 4 8.01V8h16ZM4 16V9.7l7.4 4.63a1 1 0 0 0 1.2 0L20 9.7V16H4Z"
+                    />
+                  </svg>
+                  <label for="email" class="sr-only">
+                    Email address
+                  </label>
+                  <input
+                    id="email"
+                    name="email"
+                    type="email"
+                    autocomplete="email"
+                    required
+                    placeholder="Enter your email"
+                    class="w-full rounded-xl border-0 bg-transparent py-3 pl-11 pr-4 text-base text-gray-100 placeholder-gray-300 outline-none focus:ring-2 focus:ring-cta/70"
+                  />
+                </div>
+
+                <button
+                  type="submit"
+                  class="rounded-xl bg-cta px-5 py-3 text-base font-semibold text-ctatext shadow-lg transition-all hover:-translate-y-0.5 hover:bg-accent-1 hover:shadow-xl focus:ring-2 focus:ring-cta/80 focus:ring-offset-2 focus:ring-offset-black focus-visible:outline-none active:translate-y-0"
+                >
+                  Subscribe
+                </button>
+              </div>
+
+              <p class="mt-2 text-center text-xs text-gray-200/85">
+                We'll only email about this course. Read our{" "}
+                <a
+                  href="/policies/privacy"
+                  class="font-semibold text-gray-100 underline-offset-2 hover:underline"
+                >
+                  privacy policy
+                </a>
+                .
+              </p>
+            </div>
+          </form>
+
+          <p
+            id="confirmation-message"
+            class="mt-4 hidden text-sm/6 text-green-200"
+          >
+            Thank you for subscribing! Check your email for confirmation.
           </p>
-        </form>
-        <p
-          id="confirmation-message"
-          class="mt-4 hidden text-sm/6 text-green-200"
-        >
-          Thank you for subscribing! Check your email for confirmation.
-        </p>
+        </div>
       </div>
-    </div>
+    ) : (
+      <div class="bg-transparent py-8 md:py-0">
+        <div class="mx-auto max-w-7xl px-6">
+          {title && (
+            <h2 class="max-w-xl text-balance text-xl font-semibold tracking-tight text-content-1 sm:text-2xl">
+              {title}
+            </h2>
+          )}
+          <form id="newsletter-form" class="w-full max-w-md pt-2 lg:col-span-5">
+            <div class="flex gap-x-4">
+              <label for="email" class="sr-only">
+                {" "}
+                Email address{" "}
+              </label>
+              <input
+                id="email"
+                name="email"
+                type="email"
+                autocomplete="email"
+                required
+                class="min-w-0 flex-auto rounded-xl bg-white px-3.5 py-2 text-base text-black placeholder-black outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-black focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
+                placeholder="Enter your email"
+              />
+              <button
+                type="submit"
+                class="flex-none rounded-md bg-cta px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-accent-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+              >
+                Subscribe
+              </button>
+            </div>
+            <p class="mt-4 text-sm/6 text-content-1">
+              This site is built on trust, and your data is safe. Check out the{" "}
+              <a href="/policies/privacy" class="font-semibold">
+                privacy&nbsp;policy
+              </a>
+              .
+            </p>
+          </form>
+          <p
+            id="confirmation-message"
+            class="mt-4 hidden text-sm/6 text-green-200"
+          >
+            Thank you for subscribing! Check your email for confirmation.
+          </p>
+        </div>
+      </div>
+    )
   ) : (
     <div class="bg-bkg py-8 sm:py-12 lg:py-16">
       <div class="mx-auto grid max-w-7xl grid-cols-1 gap-10 px-6 lg:grid-cols-12 lg:gap-8 lg:px-8">
diff --git a/src/data/courseCategories.yaml b/src/data/courseCategories.yaml
@@ -19,6 +19,7 @@
   members:
     - scala-at-light-speed
     - scala-essentials
+    - scala-projects
     - advanced-scala
     - scala-macros-and-metaprogramming
     - scala-and-functional-programming-interview-practice
diff --git a/src/data/courses/scala-projects/images/scala-projects.png b/src/data/courses/scala-projects/images/scala-projects.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f17f5ff2ba9caa69a33a377f7ba50dbf115bbf9ff7aea55017e96b5d04224279
+size 551719
diff --git a/src/data/courses/scala-projects/index.mdx b/src/data/courses/scala-projects/index.mdx
@@ -0,0 +1,69 @@
+---
+benefits:
+    hours: 12
+    linesOfCode: 3000
+category: scala
+description: Learn and practice Scala with real-life projects. Ideal for developers who have just learned the fundamentals of Scala, and want to get practical experience by building real applications.
+difficulty: intermediate
+excerpt: <p>Get practical experience with Scala by building real things &mdash; file synchronizers, photo processors, AI agents and more</p>
+heroImage: images/scala-projects.png
+title: Scala Projects
+isPreview: true
+pricingPlanId: 6340608
+publishedDate: 2025-09-01
+tags: [scala, project]
+---
+
+import CourseLayout from "@/pages/courses/_layouts/CourseLayout.astro";
+
+<CourseLayout>
+<Fragment slot="goal">
+### Build real things with Scala.
+
+So you've just learned Scala. You know the basics, you can write some code, but you don't feel comfortable enough to build real applications.
+
+Maybe you'd like to start building your own projects, but you don't know where to start. Looking for some ideas of practical and fun projects to build, so that you can say you're a real Scala developer.
+
+This course is for you. In here, you will build real applications with Scala, from scratch. Maybe one of them will be the starting point for your next startup.
+
+</Fragment>
+<Fragment slot="skills">
+### After this course, you'll be able to:
+- use Scala as a fast, productive language for the task at hand
+- pick the right tools and libraries for a Scala project
+- use either plain Scala or straightforward libraries (instead of effect systems or magical frameworks) for powerful applications
+- deploy your Scala applications to the target of your choice
+
+### The applications you'll build:
+
+- Photo processor
+    - Java interop
+    - photo manipulation techniques
+    - practical math
+    - custom command line
+- Website scraper
+    - JVM scraping libraries
+    - mapping to your own domain model
+    - data extraction techniques
+    - email newsletters
+- Static site generator
+    - server-side rendering
+    - website packaging
+    - configurations
+    - build pipelines & deployment
+- Full-stack web application
+    - full-stack layered architecture
+    - HTTP APIs
+    - database access
+    - frontend integration
+- File synchronizers
+    - system access
+    - concurrency
+    - process communication
+- AI agents
+    - data ingestion
+    - agent fine-tuning
+    - exposing chat interfaces
+
+</Fragment>
+</CourseLayout>
diff --git a/src/data/courses/the-scala-bundle/index.mdx b/src/data/courses/the-scala-bundle/index.mdx
@@ -3,6 +3,7 @@ bundledCourses:
   - scala-at-light-speed
   - scala-essentials
   - advanced-scala
+  - scala-projects
   - scala-macros-and-metaprogramming
   - scala-3-new-features
   - scala-and-functional-programming-interview-practice
diff --git a/src/pages/courses/_data/prerequisites.yaml b/src/pages/courses/_data/prerequisites.yaml
@@ -26,12 +26,15 @@
     - scala-and-functional-programming-interview-practice
     - scala-essentials
     - scala-macros-and-metaprogramming
+    - scala-projects
     - typelevel-rite-of-passage
     - zio
     - zio-rite-of-passage
   edges:
     - from: scala-essentials
       to: advanced-scala
+    - from: scala-essentials
+      to: scala-projects
     - from: advanced-scala
       to: scala-macros-and-metaprogramming
     - from: advanced-scala
diff --git a/src/pages/courses/_layouts/CourseLayout.astro b/src/pages/courses/_layouts/CourseLayout.astro
diff --git a/src/pages/courses/_sections/Hero.astro b/src/pages/courses/_sections/Hero.astro

Original file line number	Diff line number	Diff line change
`@@ -80,5 +80,6 @@`
`80`	`80`	`"tailwindcss-animate": "^1.0.7",`
`81`	`81`	`"typescript": "^5.8.2",`
`82`	`82`	`"typescript-eslint": "^8.28.0"`
`83`		`- }`
	`83`	`+ },`
	`84`	`+ "packageManager": "[email protected]"`
`84`	`85`	`}`