From 632c27b7ec133d15d890eb28c98eb9716ca01407 Mon Sep 17 00:00:00 2001
From: Zane Helton <me@zaaane.com>
Date: Wed, 23 Aug 2023 18:14:23 -0400
Subject: [PATCH] docs: update `hosting.md` with Vercel hosting instructions
 (#406)

* Update hosting.md with Vercel hosting instructions

* Update docs/hosting.md

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

* Update docs/hosting.md

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

* Run npm run format

---------

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
---
 docs/hosting.md                       | 50 +++++++++++++++++++++++++++
 docs/showcase.md                      |  2 +-
 quartz/components/styles/popover.scss |  4 +--
 quartz/components/styles/search.scss  |  4 +--
 quartz/components/styles/toc.scss     |  4 +--
 5 files changed, 54 insertions(+), 10 deletions(-)

diff --git a/docs/hosting.md b/docs/hosting.md
index d648f55..01d130f 100644
--- a/docs/hosting.md
+++ b/docs/hosting.md
@@ -116,3 +116,53 @@ See the [GitHub documentation](https://docs.github.com/en/pages/configuring-a-cu
 > There could be many different reasons why your changes aren't showing up but the most likely reason is that you forgot to push your changes to GitHub.
 >
 > Make sure you save your changes to Git and sync it to GitHub by doing `npx quartz sync`. This will also make sure to pull any updates you may have made from other devices so you have them locally.
+
+## Vercel
+
+### Fix URLs
+
+Before deploying to Vercel, a `vercel.json` file is required at the root of the project directory. It needs to contain the following configuration so that URLs don't require the `.html` extension:
+
+```json title="vercel.json"
+{
+  "cleanUrls": true
+}
+```
+
+### Deploy to Vercel
+
+1. Log in to the [Vercel Dashboard](https://vercel.com/dashboard) and click "Add New..." > Project
+2. Import the Git repository containing your Quartz project.
+3. Give the project a name (lowercase characters and hyphens only)
+4. Check that these configuration options are set:
+
+| Configuration option                      | Value              |
+| ----------------------------------------- | ------------------ |
+| Framework Preset                          | `Other`            |
+| Root Directory                            | `./`               |
+| Build and Output Settings > Build Command | `npx quartz build` |
+
+5. Press Deploy. Once it's live, you'll have 2 `*.vercel.app` URLs to view the page.
+
+### Custom Domain
+
+> [!note]
+> If there is something already hosted on the domain, these steps will not work without replacing the previous content. As a workaround, you could use Next.js rewrites or use the next section to create a subdomain.
+
+1. Update the `baseUrl` in `quartz.config.js` if necessary.
+2. Go to the [Domains - Dashboard](https://vercel.com/dashboard/domains) page in Vercel.
+3. Connect the domain to Vercel
+4. Press "Add" to connect a custom domain to Vercel.
+5. Select your Quartz repository and press Continue.
+6. Enter the domain you want to connect it to.
+7. Follow the instructions to update your DNS records until you see "Valid Configuration"
+
+### Use a Subdomain
+
+Using `docs.example.com` is an example of a subdomain. They're a simple way of connecting multiple deployments to one domain.
+
+1. Update the `baseUrl` in `quartz.config.js` if necessary.
+2. Ensure your domain has been added to the [Domains - Dashboard](https://vercel.com/dashboard/domains) page in Vercel.
+3. Go to the [Vercel Dashboard](https://vercel.com/dashboard) and select your Quartz project.
+4. Go to the Settings tab and then click Domains in the sidebar
+5. Enter your subdomain into the field and press Add
diff --git a/docs/showcase.md b/docs/showcase.md
index ef8afb8..d4a9da2 100644
--- a/docs/showcase.md
+++ b/docs/showcase.md
@@ -12,7 +12,7 @@ Want to see what Quartz can do? Here are some cool community gardens:
 - [Course notes for Information Technology Advanced Theory](https://a2itnotes.github.io/quartz/)
 - [Data Dictionary 🧠](https://glossary.airbyte.com/)
 - [sspaeti.com's Second Brain](https://brain.sspaeti.com/)
-- [oldwinterの数字花园](https://garden.oldwinter.top/)
+- [oldwinter の数字花园](https://garden.oldwinter.top/)
 - [Abhijeet's Math Wiki](https://abhmul.github.io/quartz/Math-Wiki/)
 - [Mike's AI Garden 🤖🪴](https://mwalton.me/)
 - [Matt Dunn's Second Brain](https://mattdunn.info/)
diff --git a/quartz/components/styles/popover.scss b/quartz/components/styles/popover.scss
index fae0e12..55d38c9 100644
--- a/quartz/components/styles/popover.scss
+++ b/quartz/components/styles/popover.scss
@@ -43,9 +43,7 @@
 
   visibility: hidden;
   opacity: 0;
-  transition:
-    opacity 0.3s ease,
-    visibility 0.3s ease;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
 
   @media all and (max-width: $mobileBreakpoint) {
     display: none !important;
diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss
index 4d5ad95..a77c630 100644
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -67,9 +67,7 @@
         width: 100%;
         border-radius: 5px;
         background: var(--light);
-        box-shadow:
-          0 14px 50px rgba(27, 33, 48, 0.12),
-          0 10px 30px rgba(27, 33, 48, 0.16);
+        box-shadow: 0 14px 50px rgba(27, 33, 48, 0.12), 0 10px 30px rgba(27, 33, 48, 0.16);
         margin-bottom: 2em;
       }
 
diff --git a/quartz/components/styles/toc.scss b/quartz/components/styles/toc.scss
index 3fac443..e696864 100644
--- a/quartz/components/styles/toc.scss
+++ b/quartz/components/styles/toc.scss
@@ -42,9 +42,7 @@ button#toc {
     & > li > a {
       color: var(--dark);
       opacity: 0.35;
-      transition:
-        0.5s ease opacity,
-        0.3s ease color;
+      transition: 0.5s ease opacity, 0.3s ease color;
       &.in-view {
         opacity: 0.75;
       }