feat: view transitions (#57)

* chore(deps): update astro to v3 * feat: view transitions
PlanBee-dev · Sep 25, 2023 · 0a4f490 · 0a4f490
1 parent 5582dc6
commit 0a4f490
Show file tree

Hide file tree

Showing 9 changed files with 631 additions and 350 deletions.
diff --git a/packages/api/.dev.vars.example b/packages/api/.dev.vars.example
@@ -4,4 +4,4 @@ GITHUB_PR_LABEL =
 GITHUB_APP_ID = 
 GITHUB_APP_INSTALLATION_ID = 
 GITHUB_APP_PRIVATE_KEY = "-----BEGIN PRIVATE KEY-----\n-----END PRIVATE KEY-----"
-ALLOWED_ORIGIN = http://localhost:3000
+ALLOWED_ORIGIN = http://localhost:4321
diff --git a/packages/api/test/createIssue.test.ts b/packages/api/test/createIssue.test.ts
@@ -12,10 +12,10 @@ test('Calls github api to create an issue (happy path)', async () => {
   shouldCreateIssueFail.mockReturnValue(false);
 
   const response = await handler.fetch(
-    new Request('http://localhost:3000', {
+    new Request('http://localhost:4321', {
       method: 'POST',
       headers: {
-        Origin: 'http://localhost:3000',
+        Origin: 'http://localhost:4321',
         'Content-Type': 'application/json',
       },
       body: JSON.stringify({
@@ -53,10 +53,10 @@ test('Returns 500 when call to github api fails', async () => {
   vi.useFakeTimers();
 
   const promise = handler.fetch(
-    new Request('http://localhost:3000', {
+    new Request('http://localhost:4321', {
       method: 'POST',
       headers: {
-        Origin: 'http://localhost:3000',
+        Origin: 'http://localhost:4321',
         'Content-Type': 'application/json',
       },
       body: JSON.stringify({

diff --git a/packages/api/test/json.test.ts b/packages/api/test/json.test.ts
@@ -8,7 +8,7 @@ test('Manages invalid json', async () => {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
-        Origin: 'http://localhost:3000',
+        Origin: 'http://localhost:4321',
       },
       body: JSON.stringify({ name: 'world' }),
     }),
@@ -103,7 +103,7 @@ test('Manages malformed JSON', async () => {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
-        Origin: 'http://localhost:3000',
+        Origin: 'http://localhost:4321',
       },
       body: '{',
     }),

diff --git a/packages/site/.env.local b/packages/site/.env.local
@@ -1 +1 @@
-PUBLIC_API_BASE_URL=http://localhost:3000/oulu-dev-meetups/api
+PUBLIC_API_BASE_URL=http://localhost:4321/oulu-dev-meetups/api
diff --git a/packages/site/package.json b/packages/site/package.json
@@ -13,15 +13,15 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@astrojs/mdx": "^0.19.7",
-    "@astrojs/rss": "^2.4.3",
-    "@astrojs/sitemap": "^2.0.1",
-    "@astrojs/tailwind": "^4.0.0",
-    "meetup-shared": "workspace:*",
+    "@astrojs/mdx": "^1.1.0",
+    "@astrojs/rss": "^3.0.0",
+    "@astrojs/sitemap": "^3.0.0",
+    "@astrojs/tailwind": "^5.0.0",
     "@tailwindcss/forms": "^0.5.4",
     "@tailwindcss/typography": "^0.5.9",
-    "astro": "^2.9.0",
+    "astro": "^3.1.3",
     "date-fns": "^2.30.0",
+    "meetup-shared": "workspace:*",
     "tailwindcss": "^3.3.3"
   },
   "devDependencies": {

diff --git a/packages/site/src/layouts/PageLayout.astro b/packages/site/src/layouts/PageLayout.astro
@@ -1,4 +1,5 @@
 ---
+import { ViewTransitions } from 'astro:transitions';
 import Footer from '../components/Footer.astro';
 import Header from '../components/Header.astro';
 import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
@@ -22,6 +23,7 @@ const {
 <html class="h-full">
   <head>
     <BaseHead title={title} description={description} image={image} />
+    <ViewTransitions />
   </head>
   <body class="h-full">
     <div class="flex h-full flex-col">

diff --git a/packages/site/test/index.test.ts b/packages/site/test/index.test.ts
@@ -13,7 +13,7 @@ test('meta is correct', async () => {
   const page = await browser.newPage();
   page.on('console', (msg) => console.log(msg.text()));
 
-  await page.goto('http://localhost:3000/');
+  await page.goto('http://localhost:4321/');
 
   const title = await page.title();
   expect(title).toBe('Oulu developer meetups');
@@ -23,7 +23,7 @@ test('main heading is set', async () => {
   const page = await browser.newPage();
   page.on('console', (msg) => console.log(msg.text()));
 
-  await page.goto('http://localhost:3000/');
+  await page.goto('http://localhost:4321/');
 
   expect(
     await page

diff --git a/packages/site/test/submit.test.ts b/packages/site/test/submit.test.ts
@@ -15,7 +15,7 @@ test('main heading is set', async () => {
   const page = await browser.newPage();
   page.on('console', (msg) => console.log(msg.text()));
 
-  await page.goto('http://localhost:3000/submit');
+  await page.goto('http://localhost:4321/submit');
 
   expect(
     await page