Coyenn/card refactorings (#501)

* docs: refactor/flesh out docker docs (#498) * refactor: remove swiper and use embla carousel instead (#499) * fix: grammar error on landing page banner (#500) * refactor: make body of cards with links clickable Co-authored-by: Anthony Campolo <12433465+ajcwebdev@users.noreply.github.com> Co-authored-by: jln13x <85513960+jln13x@users.noreply.github.com> Co-authored-by: Mohit Yadav <www.mohit2004@gmail.com> Co-authored-by: Tim Ritter <timritter@MacBook-Air-von-Tim.local>
t3-oss · Sep 25, 2022 · 712242b · 712242b
1 parent 633bc04
commit 712242b
Show file tree

Hide file tree

Showing 12 changed files with 424 additions and 528 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -57,7 +57,7 @@ Here are some useful scripts for when you are developing:
 | `pnpm lint:fix`  | Lints the code and fixes any errors                     |
 | `pnpm check`     | Checks your code for typeerrors, formatting and linting |
 
-When making commits, make sure to follow the [convential commit](https://www.conventionalcommits.org/en/v1.0.0/) guidelines, i.e. prepending the message with `feat:`, `fix:`, `chore:`, `docs:`, etc... You can use `git status` to double check which files have not yet been staged for commit:
+When making commits, make sure to follow the [conventional commit](https://www.conventionalcommits.org/en/v1.0.0/) guidelines, i.e. prepending the message with `feat:`, `fix:`, `chore:`, `docs:`, etc... You can use `git status` to double check which files have not yet been staged for commit:
 
 ```bash
 git add <file> && git commit -m "feat/fix/chore/docs: commit message"
@@ -91,7 +91,7 @@ When all that's done, it's time to file a pull request to upstream:
 gh pr create --web
 ```
 
-and fill out the title and body appropriately. Again, make sure to follow the [convential commit](https://www.conventionalcommits.org/en/v1.0.0/) guidelines for your title.
+and fill out the title and body appropriately. Again, make sure to follow the [conventional commit](https://www.conventionalcommits.org/en/v1.0.0/) guidelines for your title.
 
 ## Credits
 

diff --git a/cli/template/base/README.md b/cli/template/base/README.md
@@ -41,185 +41,7 @@ We recommend deploying to [Vercel](https://vercel.com/?utm_source=t3-oss&utm_cam
 
 ### Docker
 
-You can also dockerize this stack and deploy a container.
-
-Please note that Next.js requires a different process for buildtime (available in the frontend, prefixed by `NEXT_PUBLIC`) and runtime environment, server-side only, variables. In this demo we are using two variables, `DATABASE_URL` (used by the server) and `NEXT_PUBLIC_CLIENTVAR` (used by the client). Pay attention to their positions in the `Dockerfile`, command-line arguments, and `docker-compose.yml`.
-
-1. In your [next.config.mjs](./next.config.mjs), add the `standalone` output-option to your config:
-
-   ```diff
-     export default defineNextConfig({
-       reactStrictMode: true,
-       swcMinify: true,
-   +   output: "standalone",
-     });
-   ```
-
-2. Remove the `env`-import from [next.config.mjs](./next.config.mjs):
-
-   ```diff
-   - import { env } from "./src/env/server.mjs";
-   ```
-
-3. Create a `.dockerignore` file with the following contents:
-   <details>
-   <summary>.dockerignore</summary>
-
-   ```
-   .env
-   Dockerfile
-   .dockerignore
-   node_modules
-   npm-debug.log
-   README.md
-   .next
-   .git
-   ```
-
-  </details>
-
-4. Create a `Dockerfile` with the following contents:
-   <details>
-   <summary>Dockerfile</summary>
-
-   ```Dockerfile
-   ########################
-   #         DEPS         #
-   ########################
-
-   # Install dependencies only when needed
-   # TODO: re-evaluate if emulation is still necessary on arm64 after moving to node 18
-   FROM --platform=linux/amd64 node:16-alpine AS deps
-   # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
-   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* ./
-   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
-
-   ########################
-   #        BUILDER       #
-   ########################
-
-   # Rebuild the source code only when needed
-   # TODO: re-evaluate if emulation is still necessary on arm64 after moving to node 18
-   FROM --platform=linux/amd64 node:16-alpine AS builder
-
-   ARG DATABASE_URL
-   ARG NEXT_PUBLIC_CLIENTVAR
-
-   WORKDIR /app
-   COPY --from=deps /app/node_modules ./node_modules
-   COPY . .
-
-   # Next.js collects completely anonymous telemetry data about general usage.
-   # Learn more here: https://nextjs.org/telemetry
-   # Uncomment the following line in case you want to disable telemetry during the build.
-   # 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
-
-   ########################
-   #        RUNNER        #
-   ########################
-
-   # Production image, copy all the files and run next
-   # TODO: re-evaluate if emulation is still necessary after moving to node 18
-   FROM --platform=linux/amd64 node:16-alpine AS runner
-   # WORKDIR /usr/app
-   WORKDIR /app
-
-   ENV NODE_ENV production
-   # Uncomment the following line in case you want to disable telemetry during runtime.
-   # ENV NEXT_TELEMETRY_DISABLED 1
-
-   RUN addgroup --system --gid 1001 nodejs
-   RUN adduser --system --uid 1001 nextjs
-
-   COPY --from=builder /app/next.config.mjs ./
-   COPY --from=builder /app/public ./public
-   COPY --from=builder /app/package.json ./package.json
-
-   # Automatically leverage output traces to reduce image size
-   # https://nextjs.org/docs/advanced-features/output-file-tracing
-   COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
-   COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
-
-   USER nextjs
-
-   EXPOSE 3000
-
-   ENV PORT 3000
-
-   CMD ["node", "server.js"]
-   ```
-
-  </details>
-
-5. To build and run this image locally, run:
-
-   ```bash
-   docker build -t ct3a -e NEXT_PUBLIC_CLIENTVAR=clientvar .
-   docker run -p 3000:3000 -e DATABASE_URL="database_url_goes_here" ct3a
-   ```
-
-6. You can also use a PaaS such as [Railway's](https://railway.app) automated [Dockerfile deployments](https://docs.railway.app/deploy/dockerfiles) to deploy your app.
-
-### Docker Compose
-
-You can also use docker compose to build the image and run the container.
-
-1. Follow steps 1-4 above
-
-2. Create a `docker-compose.yml` file with the following:
-
-   <details>
-   <summary>docker-compose.yml</summary>
-
-   ```yaml
-   version: "3.9"
-   services:
-     app:
-       platform: "linux/amd64"
-       build:
-         context: .
-         dockerfile: Dockerfile
-         args:
-           NEXT_PUBLIC_CLIENTVAR: "clientvar"
-       working_dir: /app
-       ports:
-         - "3000:3000"
-       image: t3-app
-       environment:
-         - DATABASE_URL=database_url_goes_here
-   ```
-
-   </details>
-
-3. Run this using `docker compose up`.
-
-### Further reading
-
-Here are some useful references you can further look into:
-
-- [Dockerfile reference](https://docs.docker.com/engine/reference/builder/)
-- [Compose file version 3 reference](https://docs.docker.com/compose/compose-file/compose-file-v3/)
-- [Docker CLI reference](https://docs.docker.com/engine/reference/commandline/docker/)
-- [Docker Compose CLI reference](https://docs.docker.com/compose/reference/)
+You can also dockerize this stack and deploy a container. See the [Docker deployment page](https://create-t3-app-nu.vercel.app/en/deployment/docker) for details.
 
 ## Useful resources
 

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/www/package.json b/www/package.json
@@ -18,7 +18,8 @@
     "@fontsource/inter": "^4.5.12",
     "astro-seo": "^0.6.0",
     "clsx": "^1.2.1",
-    "swiper": "^8.4.2",
+    "embla-carousel": "^7.0.3",
+    "embla-carousel-autoplay": "^7.0.3",
     "tailwind-scrollbar": "^2.0.1"
   },
   "devDependencies": {

diff --git a/www/src/components/landingPage/banner.astro b/www/src/components/landingPage/banner.astro
@@ -22,7 +22,7 @@
               <h1
                 class="mt-4 text-5xl tracking-tight font-bold text-white sm:mt-5 sm:text-6xl sm:tracking-tight lg:mt-6 xl:text-7xl xl:tracking-tight"
               >
-                The best way to setup a
+                The best way to setup an
                 <span class="text-purple-400"> opinionated,</span>
                 <span class="text-purple-600"> full-stack,</span>
                 <span class="text-t3-purple-400"> typesafe</span>

diff --git a/www/src/components/landingPage/stack/card.astro b/www/src/components/landingPage/stack/card.astro
@@ -23,11 +23,10 @@ const { title, href } = Astro.props;
         {title}
       </p>
     </dt>
+    <dd
+      class="m-6 text-sm md:text-base text-t3-purple-100 subpixel-antialiased h-full"
+    >
+      <slot name="description" />
+    </dd>
   </a>
-
-  <dd
-    class="m-6 text-sm md:text-base text-t3-purple-100 subpixel-antialiased h-full"
-  >
-    <slot name="description" />
-  </dd>
 </div>