Merge pull request #1314 from ThatConference/next/feature

feat: upgrades event pages

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "that-us",
-	"version": "3.0.4",
+	"version": "3.1.0",
 	"description": "THAT.us website",
 	"main": "index.js",
 	"type": "module",
@@ -24,15 +24,15 @@
 		"build:sitemap": "npx sitemap-generator-cli https://that.us --last-mod --change-freq weekly --filepath ./static/sitemap.xml --priority-map 1.0"
 	},
 	"devDependencies": {
-		"@auth0/nextjs-auth0": "^1.9.1",
+		"@auth0/nextjs-auth0": "^1.9.2",
 		"@commitlint/cli": "^17.1.2",
 		"@commitlint/config-conventional": "^17.1.0",
 		"@fortawesome/free-regular-svg-icons": "^6.2.0",
 		"@fullhuman/postcss-purgecss": "^5.0.0",
 		"@okrad/svelte-progressbar": "^1.11.3",
-		"@sentry/svelte": "^7.14.2",
-		"@sentry/tracing": "^7.14.2",
-		"@stripe/stripe-js": "^1.38.1",
+		"@sentry/svelte": "^7.16.0",
+		"@sentry/tracing": "^7.16.0",
+		"@stripe/stripe-js": "^1.42.0",
 		"@sveltejs/adapter-auto": "next",
 		"@sveltejs/kit": "next",
 		"@tailwindcss/aspect-ratio": "^0.4.2",
@@ -41,32 +41,32 @@
 		"@tailwindcss/typography": "^0.5.7",
 		"@xstate/inspect": "^0.7.0",
 		"@xstate/svelte": "^2.0.0",
-		"all-contributors-cli": "^6.23.0",
+		"all-contributors-cli": "^6.24.0",
 		"archieml": "^0.5.0",
 		"autoprefixer": "^10.4.12",
 		"clipboard": "^2.0.11",
 		"concurrently": "^7.4.0",
 		"cssnano": "^5.1.13",
 		"dayjs": "^1.11.5",
 		"env-cmd": "^10.1.0",
-		"esbuild": "^0.15.10",
-		"eslint": "^8.24.0",
+		"esbuild": "^0.15.12",
+		"eslint": "^8.25.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte3": "^4.0.0",
 		"fetch-retry": "^5.0.3",
 		"fuse.js": "^6.6.2",
 		"husky": "^8.0.1",
-		"ical-generator": "^3.5.2",
+		"ical-generator": "^3.6.0",
 		"install": "^0.13.0",
 		"isomorphic-fetch": "^3.0.0",
 		"lazysizes": "^5.3.2",
 		"lodash": "^4.17.21",
 		"logrocket": "^3.0.1",
 		"marked": "^4.1.1",
 		"mdsvex": "^0.10.6",
-		"moment-timezone": "^0.5.37",
+		"moment-timezone": "^0.5.38",
 		"omit-deep": "^0.3.0",
-		"postcss": "^8.4.17",
+		"postcss": "^8.4.18",
 		"postcss-cli": "^10.0.0",
 		"postcss-load-config": "^4.0.1",
 		"prettier": "^2.7.1",
@@ -77,24 +77,24 @@
 		"rehype-slug": "^5.0.1",
 		"remark-preview": "^1.0.2",
 		"remark-reading-time": "1.0.1",
-		"svelte": "^3.50.1",
+		"svelte": "^3.52.0",
 		"svelte-awesome": "^3.0.0",
 		"svelte-checkbox": "^1.0.1",
 		"svelte-content-loader": "^1.1.3",
 		"svelte-flatpickr": "^3.2.6",
 		"svelte-headroom": "^2.2.1",
 		"svelte-infinite-scroll": "^2.0.1",
 		"svelte-input-mask": "^1.1.0",
-		"svelte-loading-spinners": "^0.1.7",
+		"svelte-loading-spinners": "^0.3.4",
 		"svelte-preprocess": "^4.10.7",
 		"svelte-scrollto": "^0.2.0",
 		"svelte-select": "^4.4.7",
 		"svelte-tags-input": "^3.0.0",
 		"sveltejs-forms": "^2.1.2",
-		"tailwindcss": "^3.1.8",
+		"tailwindcss": "^3.2.0",
 		"uuid": "^9.0.0",
-		"vite": "^3.1.4",
-		"vite-plugin-sentry": "^1.1.5",
+		"vite": "^3.1.8",
+		"vite-plugin-sentry": "^1.1.6",
 		"xstate": "^4.33.6",
 		"yup": "^0.32.11"
 	}

src/_blog/posts/2020-that-online-tickets-available/index.md

@@ -9,7 +9,7 @@ layout: blog
 ---
 
 <div style="text-align: center; padding: 4rem 0;">
-  <a href="https://ti.to/that-conference/that-conference-2020" class="linkButton" target="_blank">
+  <a href="https://ti.to/that-conference/that-conference-2020" class="linkButton" target="_blank" rel="external noreferrer noopener">
     Get Your Ticket Here
   </a>
 </div>
@@ -49,7 +49,7 @@ You will need a ticket to enter camp. This year we’ve restructured our tickets
 All tickets, at time of purchase, will provide you with an option to add-on exclusive 2020 merchandise in a color not available in the THAT Conference store. A THAT Conference login is required to access the event. Tickets and add-on merchandise are non-refundable after purchase.
 
 <div style="text-align: center; padding: 4rem 0;">
-  <a href="https://ti.to/that-conference/that-conference-2020" class="linkButton" target="_blank">
+  <a href="https://ti.to/that-conference/that-conference-2020" class="linkButton" target="_blank" rel="external noreferrer noopener">
     Get Your Ticket Here
   </a>
 </div>

src/_components/activities/ActivityDetails.svelte

@@ -28,10 +28,10 @@
 	import { page } from '$app/stores';
 	import lodash from 'lodash';
 
+	import favorites, { toggle } from '$lib/stores/favorites';
 	import buildImageSrc from '$utils/image';
 	import config from '$utils/config.public';
-	import favoritesApi from '$dataSources/api.that.tech/favorites';
-	import currentEvent from '$stores/currentEvent';
+
 	import { Avatars, Tag } from '$elements';
 
 	// import CalendarButton from './elements/CalendarButton.svelte';
@@ -69,7 +69,6 @@
 	} = activity;
 
 	let dropDownKeyValuePairs = getContext('DROP_DOWN_KEY_VALUE_PAIRS');
-	const { toggle, get: getFavorites, favoritesStore: favorites } = favoritesApi();
 	const isDailyActivity = config.eventId === eventId;
 
 	// Enum Lookups
@@ -96,17 +95,11 @@
 
 	const handleToggle = async () => {
 		favoriteDisabled = true;
-		await toggle(id, $currentEvent.eventId);
+		await toggle(id, eventId);
 		favoriteDisabled = false;
 	};
 
-	let isFavorite = false;
-
-	favorites.subscribe((favs) => {
-		let found = find(favs, (i) => i.id === id);
-
-		found ? (isFavorite = true) : (isFavorite = false);
-	});
+	$: isFavorite = find($favorites, (i) => i.id === id) ? true : false;
 
 	let isInWindow = false;
 	$: canJoin = isInWindow;
@@ -128,8 +121,6 @@
 	onMount(async () => {
 		window.history.replaceState({}, null, `/activities/${id}`);
 
-		if ($page.data.user.isAuthenticated) await getFavorites($currentEvent.eventId);
-
 		let endTime = (durationInMinutes ? durationInMinutes : 60) + 10;
 
 		if (status === 'ACCEPTED') {
@@ -255,10 +246,17 @@
                   duration-150 ease-in-out
                   hover:text-gray-500 focus:border-blue-300 focus:outline-none active:bg-gray-50
                   active:text-gray-800">
-								<Icon data={heart} class="-ml-1 mr-2 h-4 w-4" />
 								{#if isFavorite}
-									<span>Unfavorite</span>
-								{:else}<span>Favorite</span>{/if}
+									<div class="text-red-500">
+										<Icon data={heart} class="-ml-1 mr-2 h-4 w-4" />
+										<span>Unfavorite</span>
+									</div>
+								{:else}
+									<div>
+										<Icon data={heartO} class="-ml-1 mr-2 h-4 w-4" />
+										<span>Favorite</span>
+									</div>
+								{/if}
 							</button>
 						</div>
 					{:else}
@@ -478,7 +476,7 @@
 										<Icon data={externalLink} class="h-4 w-4" />
 									</div>
 									<div class="flex-grow rounded-md p-2">
-										<a target="_blank" rel="external" href={sa.url}>
+										<a target="_blank" rel="external noopener" href={sa.url}>
 											<p>{sa.name}</p>
 											<p class="mt-1 text-sm text-gray-400">{sa.description}</p>
 										</a>