feat: ssr

server-side-rendering/.env.example

@@ -0,0 +1,3 @@
+PUBLIC_APPWRITE_ENDPOINT=
+PUBLIC_APPWRITE_PROJECT_ID=
+APPWRITE_KEY=

server-side-rendering/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

server-side-rendering/README.md

@@ -0,0 +1,75 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

server-side-rendering/env.d.ts

@@ -0,0 +1,7 @@
+import type { Models } from "node-appwrite";
+
+declare module "h3" {
+  interface H3EventContext {
+    user?: Models.User<Models.Preferences>;
+  }
+}

server-side-rendering/layouts/default.vue

@@ -0,0 +1,124 @@
+<script setup>
+import "@appwrite.io/pink";
+import "@appwrite.io/pink-icons";
+import LoginDarkMode from "assets/login-dark-mode.png";
+
+useHead({
+  bodyAttrs: {
+    class: "theme-dark",
+  },
+});
+</script>
+<template>
+  <main class="grid-1-1 is-full-page" id="main">
+    <section
+      class="u-flex u-flex-vertical"
+      :style="{ backgroundImage: `url(${LoginDarkMode})` }"
+    >
+      <div class="tag-line is-not-mobile">
+        <p>Server side rendering<span class="underscore">_</span></p>
+      </div>
+      <div class="u-flex u-stretch"></div>
+      <div class="logo u-flex u-gap-16">
+        <nuxt-link to="/">
+          <img
+            src="~/assets/appwrite-logo-dark.svg"
+            width="160"
+            class="u-block"
+            alt="Appwrite Logo"
+          />
+        </nuxt-link>
+      </div>
+    </section>
+    <section
+      class="grid-1-1-col-2 u-flex u-main-center u-cross-center _u-padding-16-mobile"
+    >
+      <div
+        class="container u-flex u-flex-vertical u-cross-center u-main-center"
+      >
+        <slot></slot>
+      </div>
+    </section>
+  </main>
+</template>
+
+<style>
+#main section:first-child {
+  padding-block-start: 2.25rem;
+  padding-block-end: 2rem;
+}
+
+#main section:first-child div {
+  padding-inline-start: 1rem;
+  padding-inline-end: 1rem;
+  padding-block-end: 1rem;
+}
+
+#main section:first-child .tag-line {
+  font-size: 4rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 100%; /* 80px */
+  letter-spacing: -1.6px;
+  backdrop-filter: blur(0.5rem);
+}
+
+#main section:first-child .tag-line .underscore {
+  -webkit-text-fill-color: #f02e65;
+}
+
+@media (min-width: 768px) {
+  #main section:first-child {
+    background: var(--url);
+    background-repeat: no-repeat;
+    background-position: top;
+    background-size: cover;
+    padding-block-start: 6.25rem;
+    padding-block-end: 6.875rem;
+  }
+
+  #main section:first-child div {
+    padding-inline-start: 2.625rem;
+    padding-inline-end: 2rem;
+  }
+}
+
+@media (min-width: 1199px) {
+  #main section:first-child div {
+    padding-inline-start: 5.625rem;
+    padding-inline-end: 5rem;
+  }
+
+  #main section:first-child .tag-line {
+    font-size: 5rem;
+  }
+}
+
+.tag-line {
+  background: linear-gradient(45deg, white, white 60%, #fd376f);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+</style>
+
+<style global>
+.with-separators {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  text-transform: uppercase;
+  width: 100%;
+  color: var(--separator-text);
+  --separator-color: hsl(var(--color-neutral-85));
+  --separator-text: hsl(var(--color-neutral-60));
+}
+
+.with-separators:before,
+.with-separators:after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--separator-color);
+}
+</style>

server-side-rendering/nuxt.config.ts

@@ -0,0 +1,11 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  devtools: { enabled: true },
+  runtimeConfig: {
+    appwriteKey: process.env.APPWRITE_KEY,
+    public: {
+      appwriteEndpoint: process.env.PUBLIC_APPWRITE_ENDPOINT,
+      appwriteProjectId: process.env.PUBLIC_APPWRITE_PROJECT_ID,
+    },
+  },
+});