v2 init

.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "rules": {
+    }
+}

.firebaserc

@@ -1,5 +1,5 @@
 {
   "projects": {
-    "default": "fireship-app"
+    "default": "fireship-dev-17429"
   }
-}
+}

.github/workflows/deploy.yml

@@ -1,33 +1,31 @@
-# name: Deploy to Firebase Hosting
+name: Deploy to Firebase Hosting
 
-# on:
-#   push:
-#     branches:
-#       - master
+on:
+  push:
+    branches:
+      - master
 
-# env:
-#   FIREBASE_TOKEN: ${{secrets.FIREBASE_TOKEN}}
-#   ALGOLIA_APP_ID: 05VYZFXKNM 
-#   ALGOLIA_ADMIN_KEY: ${{secrets.ALGOLIA_ADMIN_KEY}}
-#   ALGOLIA_INDEX_NAME: content 
-#   ALGOLIA_INDEX_FILE: public/algolia.json
+env:
+  FIREBASE_TOKEN: ${{secrets.FIREBASE_TOKEN}}
+  ALGOLIA_APP_ID: 05VYZFXKNM 
+  ALGOLIA_ADMIN_KEY: ${{secrets.ALGOLIA_ADMIN_KEY}}
+  ALGOLIA_INDEX_NAME: content 
+  ALGOLIA_INDEX_FILE: public/algolia.json
 
 
-# jobs:
-#   build:
-#     runs-on: ubuntu-latest
-#     steps:
-#       - uses: actions/checkout@v2
-#       - uses: actions/setup-node@v1
-#         with:
-#           node-version: 16
-#       - uses: peaceiris/actions-hugo@v2
-#         with:
-#           hugo-version: '0.101.0'
-#           extended: true
-#       - run: npm ci
-#       - run: npm ci
-#         working-directory: ./components
-#       - run: npm run build
-#       - run: npm run algolia
-#       - run: npm run deploy
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 16
+      - uses: peaceiris/actions-hugo@v2
+        with:
+          hugo-version: '0.101.0'
+          extended: true
+      - run: npm ci
+      - run: npm run build
+      - run: npm run algolia
+      - run: npm run deploy

.gitignore

@@ -1,60 +1,33 @@
-# dependencies
-**/node_modules
-/.well_known
-
-/archive
-
-# e2e
-**/e2e/*.js
-**/e2e/*.map
-
-# compiled output
-**/dist
-**/tmp
-**/out-tsc
-.firebase
-public
-
-# cloud functions
-/functions/service-account.json
-/functions/lib
-/functions/etc
-functions/.env
-/functions/.runtimeconfig.json
-/functions/firebase-debug.log
-
-# hugo
-hugo/data/components.json
-hugo/data/webpack_assets.json
-hugo/static/components
-hugo/static/design
-
-# IDEs and editors
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
-.project
-.classpath
-.c9
-.settings
-.vscode
-*.launch
-*.sublime-workspace
-
-# misc
-.env
-.sass-cache
-NOTES.md
-ROADMAP.md
-secrets.json
-connect.lock
-resources
-archive
-coverage
-typings
-libpeerconnection.log
-npm-debug.log
-yarn-error.log
-testem.log
-
-# system files
 .DS_Store
-Thumbs.db
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.hugo_build.lock
+static/svelte/
+public
+.firebaserc
+firebase.json
+.firebase
+resources/
+data/svelte.json
+.env

README.md

@@ -1,82 +1,55 @@
-# [Fireship.io](https://fireship.io/)
-
-Content [designed](https://fireship.io/mission/) to increase developer happiness 😁 and productivity 🚀.
-
-## Project Tour
-
-The monorepo is organized into five sub-projects: 
-
-1. `hugo` - Static Site Generator. This is where the content lives.
-2. `design` - Theme & CSS
-3. `components` - Angular Elements Web Components. [Flamethrower](https://github.com/fireship-io/flamethrower) is used for fast page transitions
-4. `functions` - Firebase Cloud Functions Serverless Backend
-5. `cypress` - End-to-End & Integration Specs
-
+## Fireship 2.0
 
+The [Fireship PRO](https://fireship.io) course platform frontend built with Svelte, Tailwind, Hugo, Firebase, & Flamethrower. 
 
 ## Contributing
 
-Edit and fix the site's content in `hugo/content/`. Feel free to submit PRs for small issues. For large issues or features, open an issue first. 
-
-### Option 1 - Simple Typo Fixes
-
-For small issues, like a typo or broken link, use Github's inline file editor or web editor (open by pressing <kbd>.</kbd> in your fork's code tab) to make the fix and submit a pull request. 
-
-### Option 2 - Work on your own Fork
+All static content is managed with Hugo. You can easily fix typos by modifying the markdown directly in GitHub. 
 
-For more complex contributions, like guest posts and new features, you should work on the project on your local system. 
+### How to Run it
 
-First, fork this repo on GitHub.
+First, install [Hugo Extended](https://gohugo.io/getting-started/installing/) ver `0.101.0` or greater. 
 
-```shell
-git clone <your-forked-repo>
+```
+git clone <this-repo>
 npm install
-npm run dev
-
-git checkout -b my-fix
-# fix some code...
-
-git commit -m "fix: corrected a typo"
-git push origin my-fix
+npm start
 ```
 
-Lastly, open a pull request on GitHub. Once merged, your changes will automatically be deployed to the live site via the CI/CD pipeline. 
+Check it on on `http://localhost:6969/`.
 
-## Running the Site
 
+## Developing Components 
 
-First, install [Hugo](https://gohugo.io/getting-started/installing/).
+Create a Svelte file in the `app/components` directory. It must have a custom element tag. 
 
-```shell
-git clone <fireship-repo>
+```svelte
+<svelte:options tag="hi-mom" />
 
-npm install
+<script>
+    export let greeting: string;
+</script>
 
-npm run dev
+<h1>Hi Mom! {greeting}</h1> 
 ```
 
-Visit `localhost:1313` and you should be live. You do not need the web components for general content development, but they can be built with:
+Export the component from `app/main.ts`:
 
-```shell
-cd components && npm install
-npm run build
+```ts
+export * from './components/hi-mom.svelte';
 ```
 
+Now use it in anywhere in your HTML or Markdown. 
 
-## Contribute a Post
-
-Read the [style guide](https://fireship.io/style-guide/) for some tips before contributing. 
-
-```shell
-cd hugo
-hugo new -k bundle lessons/angularfire-google-oauth
-hugo new snippets/my-cool-snippet.md
+```html
+<hi-mom greeting="i made a web component"></hi-mom>
 ```
 
-### Add Your Bio
-
-First time? Add your bio and social links to `content/contributors`. 
+**Note:** A weird caveat with Svelte web components is that all styles must be encapsulated. You can use Tailwind, BUT only with `@apply` in the component. Global styles will not work.
 
-## Web Component Development
+## Commands
 
-Interactive features are built with Angular Elements web components in `components/`.
+- `npm start`: Main dev server. Runs everything you need. 
+- `npm run dev`: Runs components in isolation. Serves `app/index.html` as a playground for components. 
+- `npm run hugo`: Only runs static site. 
+- `npm run build`: Build for production

app/components/global-data.svelte

@@ -0,0 +1,17 @@
+<svelte:options tag="global-data" />
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { siteData } from '../stores/data';
+
+  export let permalink: string;
+  export let next: string;
+  export let prev: string;
+  export let vimeo: string;
+  export let youtube: string;
+  export let free: string;
+
+  onMount(() => {
+    siteData.set({ permalink, next, prev, vimeo, free, youtube });
+  });
+</script>

app/components/payments/buy-course.svelte

@@ -0,0 +1,48 @@
+<svelte:options tag="buy-course" />
+
+<script lang="ts">
+  import { callUserAPI } from '../../util/firebase';
+  import { currentCourse } from '../../stores/pro';
+  let loading = false;
+  let url: string;
+
+  async function getSession() {
+    loading = true;
+    url = await callUserAPI<string>({ fn: 'createPaymentSession', payload: { productId: $currentCourse.id, price: $currentCourse.price, productType: 'course' } });
+    if (url) window.open(url, '_blank')?.focus();
+    loading = false;
+  }
+  
+</script>
+
+  {#if $currentCourse?.price}
+    <span on:click={getSession} class="btn">
+      {#if loading}<loading-spinner />{/if}
+      { loading ? 'loading...' : 'buy this course' }
+    </span> 
+      for <strong class="font-display">${$currentCourse?.amount}</strong>.
+
+  {:else}
+    <span class="btn yellow">Course not available for single purchase</span>
+  {/if}
+
+
+
+  {#if url}
+    <a target="_blank" href={url}>Open Checkout Page</a>
+  {/if}
+
+
+<style lang="scss">
+  .btn {
+        @apply font-display text-blue-500 cursor-pointer text-xl;
+        &.yellow {
+          @apply text-yellow-500 cursor-default;
+        }
+    }
+
+    a {
+      @apply text-blue-500 block text-center text-sm;
+    }
+    
+</style>