chore: Made <details> tags pretty (#596)

* chore: styled details and details summary

basically stuck to the default slate color scheme for dark mode and t3-purple for light mode
additionally placed a ring outside the details element and put a bottom border on the summary when details are open

* fix: light mode border color summary

accidentally forgot to include the correct border color for the summary when in lightmode

* feat: details animation

created a script that animates the details elements of the documentation, also had to refactor the docker.md file to
wrap the contents of the details elements in a separate div with the class 'content' otherwise it'd be a whole hassle of getting each child element that's not summary and tallying up their total height this way is simpler.

* refactor: animateDetails.js into pageContent.astro

as requested I've moved the animation script from public/animateDetails.js to docs/pageContent.astro

* fix: inline javascript

added is:inline for proper typing additionally removed the useless left over script include tag

* Update www/src/components/docs/pageContent.astro

* Update www/src/components/docs/pageContent.astro

Co-authored-by: Shoubhit Dash <shoubhit2005@gmail.com>
Co-authored-by: Julius Marminge <julius0216@outlook.com>

www/src/components/docs/pageContent.astro

@@ -101,3 +101,123 @@ const title = frontmatter.title;
     block.appendChild(copyButton);
   });
 </script>
+<script is:inline>
+  //FIXME: We can make this properly typed later
+  /**
+   * Allows us to animate the details element
+   * for it to work make sure the details element contains a summary element
+   * and a div element with the class of content
+   * @param {*} element the details element which we wish to animate
+   */
+  const AnimateDetails = (element) => {
+    const summary = element.querySelector("summary");
+    const content = element.querySelector(".content");
+    let props = { animation: null, isClosing: false, isExpanding: false };
+
+    /**
+     * onClick event handler for the summary element
+     * @param {*} event the event object
+     */
+    const onClick = (event) => {
+      event.preventDefault();
+
+      element.style.overflow = "hidden";
+
+      if (props.isClosing || !element.open) open();
+      else if (props.isExpanded || element.open) close();
+    };
+
+    /**
+     * Closes the details element
+     * This function is in charge of animating the closing of the
+     * details element
+     */
+    const close = () => {
+      props.isClosing = true;
+
+      const startHeight = `${element.offsetHeight}px`;
+      const endHeight = `${summary.offsetHeight}px`;
+
+      if (props.animation) props.animation.cancel();
+
+      props.animation = element.animate(
+        {
+          height: [startHeight, endHeight],
+        },
+        {
+          duration: 300,
+          easing: "ease-in-out",
+        },
+      );
+
+      props.animation.onfinish = () => onAnimationFinish(false);
+      props.animation.oncancel = () => (props.isClosing = false);
+    };
+
+    /**
+     * Opens the details element
+     * requests the animation frame to animate the opening of the details element
+     */
+    const open = () => {
+      element.style.height = `${summary.offsetHeight}px`;
+      element.open = true;
+      window.requestAnimationFrame(() => expand());
+    };
+
+    /**
+     * Expands the details element
+     * This function is in charge of animating the expansion of the
+     * details element
+     */
+    const expand = () => {
+      props.isExpanding = true;
+
+      const startHeight = `${element.offsetHeight}px`;
+      const endHeight = `${content.offsetHeight + summary.offsetHeight}px`;
+
+      if (props.animation) props.animation.cancel();
+
+      props.animation = element.animate(
+        {
+          height: [startHeight, endHeight],
+        },
+        {
+          duration: 300,
+          easing: "ease-in-out",
+        },
+      );
+
+      props.animation.onfinish = () => onAnimationFinish(true);
+      props.animation.oncancel = () => (props.isExpanding = false);
+    };
+
+    /**
+     * Called when the animation is finished
+     * @param {*} open whether the details element is open or not
+     */
+    const onAnimationFinish = (open) => {
+      element.open = open;
+      props.animation = null;
+      props.isClosing = false;
+      props.isExpanding = false;
+
+      element.style.height = element.style.overflow = "";
+    };
+
+    /**
+     * Adds our new event listener to the summary element
+     */
+    summary.addEventListener("click", (event) => onClick(event));
+  };
+
+  /**
+   * Allows us to animate all the details elements on the page
+   * Will check if the details element contains a div element with the class of content
+   */
+  const viableDetails = document.querySelectorAll("details");
+  viableDetails.forEach((element) => {
+    if (element.querySelector(".content")) {
+      AnimateDetails(element);
+    }
+  });
+</script>

www/src/pages/en/deployment/docker.md

@@ -39,6 +39,7 @@ Remove the `env`-import from [`next.config.mjs`](https://github.com/t3-oss/creat
     <summary>
       Click here and include contents in <code>.dockerignore</code>:
     </summary>
+<div class="content">
 
 ```
 .env
@@ -51,6 +52,8 @@ README.md
 .git
 ```
 
+</div>
+
 </details>
 
 ### 4. Create Dockerfile
@@ -59,6 +62,7 @@ README.md
     <summary>
       Click here and include contents in <code>Dockerfile</code>:
     </summary>
+<div class="content">
 
 ```docker
 ##### DEPENDENCIES
@@ -68,17 +72,19 @@ RUN apk add --no-cache libc6-compat openssl
 WORKDIR /app
 
 # Install Prisma Client - remove if not using Prisma
+
 COPY prisma ./
 
 # Install dependencies based on the preferred package manager
-COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml\* ./
 
 RUN \
-  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
-  elif [ -f package-lock.json ]; then npm ci; \
-  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i; \
-  else echo "Lockfile not found." && exit 1; \
-  fi
+ if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+ elif [ -f package-lock.json ]; then npm ci; \
+ elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i; \
+ else echo "Lockfile not found." && exit 1; \
+ fi
 
 ##### BUILDER
 
@@ -92,18 +98,19 @@ COPY . .
 # ENV NEXT_TELEMETRY_DISABLED 1
 
 RUN \
-  if [ -f yarn.lock ]; then yarn build; \
-  elif [ -f package-lock.json ]; then npm run build; \
-  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm run build; \
-  else echo "Lockfile not found." && exit 1; \
-  fi
+ if [ -f yarn.lock ]; then yarn build; \
+ elif [ -f package-lock.json ]; then npm run build; \
+ elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm run build; \
+ else echo "Lockfile not found." && exit 1; \
+ fi
 
 ##### RUNNER
 
 FROM --platform=linux/amd64 node:16-alpine AS runner
 WORKDIR /app
 
 ENV NODE_ENV production
+
 # ENV NEXT_TELEMETRY_DISABLED 1
 
 RUN addgroup --system --gid 1001 nodejs
@@ -121,6 +128,7 @@ EXPOSE 3000
 ENV PORT 3000
 
 CMD ["node", "server.js"]
+
 ```
 
 > **_Notes_**
@@ -129,6 +137,7 @@ CMD ["node", "server.js"]
 > - _See [`node:alpine`](https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine) to understand why `libc6-compat` might be needed._
 > - _Next.js collects [anonymous telemetry data about general usage](https://nextjs.org/telemetry). Uncomment the first instance of `ENV NEXT_TELEMETRY_DISABLED 1` to disable telemetry during the build. Uncomment the second instance to disable telemetry during runtime._
 
+</div>
 </details>
 
 ## Build and Run Image Locally
@@ -150,6 +159,7 @@ You can also use Docker Compose to build the image and run the container.
     <summary>
       Follow steps 1-4 above, click here, and include contents in <code>docker-compose.yml</code>:
     </summary>
+<div class="content">
 
 ```yaml
 version: "3.9"
@@ -177,6 +187,7 @@ docker compose up
 
 Open [localhost:3000](http://localhost:3000/) to see your running application.
 
+</div>
 </details>
 
 ## Deploy to Railway

www/src/styles/global.css

@@ -148,7 +148,10 @@
     @apply mb-0 text-sm;
   }
   .markdown a {
-    @apply text-t3-purple-500 underline decoration-slate-500 decoration-dotted underline-offset-2 hover:text-t3-purple-700 dark:text-t3-purple-200 dark:decoration-t3-purple-200 dark:hover:text-t3-purple-300;
+    @apply text-t3-purple-500 underline decoration-slate-500 
+          decoration-dotted underline-offset-2  
+          hover:text-t3-purple-700 dark:text-t3-purple-200 
+          dark:decoration-t3-purple-200 dark:hover:text-t3-purple-300;
   }
   .markdown pre {
     @apply my-3 mx-auto rounded-md p-2 pl-3 font-mono sm:pt-2;
@@ -159,9 +162,16 @@
   }
 
   .markdown details {
-    @apply w-full rounded-md bg-t3-purple-200/50 px-3 pb-0.5 dark:bg-slate-700;
+    @apply mt-2 w-full rounded-md bg-t3-purple-200/50 px-3 pb-0.5 ring 
+          ring-t3-purple-200 transition-all duration-75 ease-in-out
+          dark:bg-slate-700 dark:ring-slate-500;
+  }
+  .markdown details > summary {
+    @apply cursor-pointer text-t3-purple-700 dark:text-slate-300;
+  }
+  .markdown details[open] > summary {
+    @apply border-b-2 border-t3-purple-200 dark:border-slate-500;
   }
-
   .markdown summary {
     @apply py-3;
   }