New project page

.gitignore

@@ -38,9 +38,6 @@ testem.log
 .DS_Store
 Thumbs.db
 
-.nx/cache
-.nx/workspace-data
-
 # Nuxt dev/build outputs
 .output
 .data
@@ -54,3 +51,4 @@ apps/frontend/src/generated
 .turbo
 target
 generated
+.env

apps/frontend/.env

@@ -0,0 +1,2 @@
+BASE_URL=https://api.modrinth.com/v2/
+BROWSER_BASE_URL=https://api.modrinth.com/v2/

apps/frontend/src/assets/styles/components.scss

@@ -1299,7 +1299,7 @@ svg.inline-svg {
 
   .tag-list__item {
     background-color: var(--color-button-bg);
-    padding: var(--gap-2) var(--gap-6);
+    padding: var(--gap-4) var(--gap-8);
     border-radius: var(--radius-max);
     font-weight: var(--weight-bold);
     font-size: var(--text-14);

apps/frontend/src/assets/styles/layout.scss

@@ -64,10 +64,6 @@
   }
 }
 
-.site-header {
-  margin: 0 0.75rem;
-}
-
 @media (min-width: 1024px) {
   .full-page {
     margin: 0 auto;
@@ -119,3 +115,40 @@
     overflow-x: hidden;
   }
 }
+
+.new-page {
+  display: grid;
+  margin: 0 auto;
+  max-width: 80rem;
+  column-gap: 0.75rem;
+  padding: 0 0.75rem;
+
+  grid-template:
+    "header"
+    "content"
+    "sidebar"
+    / 100%;
+
+  @media screen and (min-width: 1024px) {
+    grid-template:
+      "header header" auto
+      "content sidebar" auto
+      "content dummy" 1fr
+      / 1fr 20rem;
+
+    .normal-page__sidebar {
+      min-width: 20rem;
+      width: 20rem;
+    }
+  }
+
+  .normal-page__sidebar {
+    grid-area: sidebar;
+  }
+
+  .normal-page__content {
+    grid-area: content;
+    max-width: calc(60rem - 0.75rem);
+    overflow-x: hidden;
+  }
+}

apps/frontend/src/components/ui/Pagination.vue

@@ -118,6 +118,7 @@ export default {
 
 <style scoped lang="scss">
 a {
+  position: relative;
   color: var(--color-button-text);
   box-shadow: var(--shadow-raised), var(--shadow-inset);
 

apps/frontend/src/composables/user.js

@@ -107,29 +107,26 @@ export const userCollectProject = async (collection, projectId) => {
 export const userFollowProject = async (project) => {
   const user = (await useUser()).value;
 
-  user.follows = user.follows.concat(project);
-  project.followers++;
-
-  setTimeout(() => {
-    useBaseFetch(`project/${project.id}/follow`, {
-      method: "POST",
+  if (user.follows.find((x) => x.id === project.id)) {
+    user.follows = user.follows.filter((x) => x.id !== project.id);
+    project.followers--;
+
+    setTimeout(() => {
+      useBaseFetch(`project/${project.id}/follow`, {
+        method: "DELETE",
+      });
     });
-  });
-};
-
-export const userUnfollowProject = async (project) => {
-  const user = (await useUser()).value;
-
-  user.follows = user.follows.filter((x) => x.id !== project.id);
-  project.followers--;
-
-  setTimeout(() => {
-    useBaseFetch(`project/${project.id}/follow`, {
-      method: "DELETE",
+  } else {
+    user.follows = user.follows.concat(project);
+    project.followers++;
+
+    setTimeout(() => {
+      useBaseFetch(`project/${project.id}/follow`, {
+        method: "POST",
+      });
     });
-  });
+  }
 };
-
 export const resendVerifyEmail = async () => {
   const app = useNuxtApp();
 

apps/frontend/src/layouts/default.vue

@@ -786,8 +786,7 @@ function hideStagingBanner() {
     }
 
     .navbar {
-      padding: 0 var(--spacing-card-lg);
-      margin: 0 var(--spacing-card-lg);
+      padding: 0 0.75rem;
       max-width: 1280px;
       margin-left: auto;
       margin-right: auto;