From 85c0019d221488c13ac3c385d8965b8bbf3518bd Mon Sep 17 00:00:00 2001 From: EGOIST Date: Fri, 20 May 2022 01:03:13 +0800 Subject: [PATCH] update temp landing page --- package.json | 1 + pnpm-lock.yaml | 31 ++++- postcss.config.js | 1 + src/components/common/SEOHead.tsx | 8 +- src/components/dashboard/DashboardLayout.tsx | 17 ++- src/components/main/MainLayout.tsx | 115 ++++++++---------- src/components/site/SiteHeader.tsx | 3 - src/components/site/SiteLayout.tsx | 5 +- src/css/prose.css | 2 +- src/lib/auth.client.ts | 2 + src/lib/env.ts | 1 + .../dashboard/[subdomain]/account/profile.tsx | 2 +- src/pages/dashboard/[subdomain]/editor.tsx | 2 +- src/pages/dashboard/[subdomain]/index.tsx | 42 ++++++- src/pages/dashboard/[subdomain]/pages.tsx | 2 +- src/pages/dashboard/[subdomain]/posts.tsx | 2 +- .../[subdomain]/settings/domains.tsx | 5 +- .../[subdomain]/settings/general.tsx | 2 +- .../[subdomain]/settings/navigation.tsx | 12 +- src/pages/dashboard/new-site.tsx | 114 ++++++++--------- src/pages/index.tsx | 48 +++++++- src/router/auth.ts | 3 +- types.d.ts | 18 +-- 23 files changed, 275 insertions(+), 163 deletions(-) diff --git a/package.json b/package.json index dfc6ba0f..0d9d8a7b 100644 --- a/package.json +++ b/package.json @@ -68,6 +68,7 @@ "@types/sortablejs": "^1.13.0", "@types/ua-parser-js": "^0.7.36", "@types/uuid": "^8.3.4", + "autoprefixer": "^10.4.7", "eslint": "^8.15.0", "eslint-config-next": "^12.1.6", "postcss-import": "^14.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 855acc3a..2842208d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -29,6 +29,7 @@ specifiers: '@types/uuid': ^8.3.4 '@web-std/form-data': ^3.0.2 async-busboy: ^1.1.0 + autoprefixer: ^10.4.7 busboy: ^1.6.0 clsx: ^1.1.1 cookie: ^0.5.0 @@ -119,6 +120,7 @@ devDependencies: '@types/sortablejs': 1.13.0 '@types/ua-parser-js': 0.7.36 '@types/uuid': 8.3.4 + autoprefixer: 10.4.7 eslint: 8.15.0 eslint-config-next: 12.1.6_6vdljae35l7howjttefzzsim3e postcss-import: 14.1.0 @@ -1085,6 +1087,21 @@ packages: resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==} dev: false + /autoprefixer/10.4.7: + resolution: {integrity: sha512-ypHju4Y2Oav95SipEcCcI5J7CGPuvz8oat7sUtYj3ClK44bldfvtvcxK6IEK++7rqB7YchDGzweZIBG+SD0ZAA==} + engines: {node: ^10 || ^12 || >=14} + hasBin: true + peerDependencies: + postcss: ^8.1.0 + dependencies: + browserslist: 4.20.3 + caniuse-lite: 1.0.30001338 + fraction.js: 4.2.0 + normalize-range: 0.1.2 + picocolors: 1.0.0 + postcss-value-parser: 4.2.0 + dev: true + /available-typed-arrays/1.0.5: resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==} engines: {node: '>= 0.4'} @@ -1189,7 +1206,6 @@ packages: escalade: 3.1.1 node-releases: 2.0.4 picocolors: 1.0.0 - dev: false /busboy/0.3.1: resolution: {integrity: sha512-y7tTxhGKXcyBxRKAni+awqx8uqaJKrSFSNFSeRG5CsWNdmy2BIK+6VGWEW7TZnIO/533mtMEA4rOevQV815YJw==} @@ -1223,7 +1239,6 @@ packages: /caniuse-lite/1.0.30001338: resolution: {integrity: sha512-1gLHWyfVoRDsHieO+CaeYe7jSo/MT7D7lhaXUiwwbuR5BwQxORs0f1tAwUSQr3YbxRXJvxHM/PA5FfPQRnsPeQ==} - dev: false /chalk/2.4.2: resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==} @@ -1469,7 +1484,6 @@ packages: /electron-to-chromium/1.4.137: resolution: {integrity: sha512-0Rcpald12O11BUogJagX3HsCN3FE83DSqWjgXoHo5a72KUKMSfI39XBgJpgNNxS9fuGzytaFjE06kZkiVFy2qA==} - dev: false /emoji-regex/9.2.2: resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==} @@ -1525,7 +1539,6 @@ packages: /escalade/3.1.1: resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==} engines: {node: '>=6'} - dev: false /escape-string-regexp/1.0.5: resolution: {integrity: sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=} @@ -1896,6 +1909,10 @@ packages: mime-types: 2.1.35 dev: false + /fraction.js/4.2.0: + resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==} + dev: true + /fs.realpath/1.0.0: resolution: {integrity: sha1-FQStJSMVjKpA20onh8sBQRmU6k8=} @@ -2500,13 +2517,17 @@ packages: /node-releases/2.0.4: resolution: {integrity: sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ==} - dev: false /normalize-path/3.0.0: resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==} engines: {node: '>=0.10.0'} dev: true + /normalize-range/0.1.2: + resolution: {integrity: sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=} + engines: {node: '>=0.10.0'} + dev: true + /object-assign/4.1.1: resolution: {integrity: sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=} engines: {node: '>=0.10.0'} diff --git a/postcss.config.js b/postcss.config.js index 96f3bed8..1e712983 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -2,5 +2,6 @@ module.exports = { plugins: { "postcss-import": {}, tailwindcss: {}, + autoprefixer: {}, }, } diff --git a/src/components/common/SEOHead.tsx b/src/components/common/SEOHead.tsx index de74ea31..b35853ee 100644 --- a/src/components/common/SEOHead.tsx +++ b/src/components/common/SEOHead.tsx @@ -1,13 +1,15 @@ import Head from "next/head" export const SEOHead: React.FC<{ - title: string + siteName: string + title: string | undefined description?: string | null image?: string | null -}> = ({ title, description, image }) => { +}> = ({ siteName, title, description, image }) => { return ( - {title} + {title ? `${title} - ${siteName}` : siteName} + diff --git a/src/components/dashboard/DashboardLayout.tsx b/src/components/dashboard/DashboardLayout.tsx index 79e748be..51930962 100644 --- a/src/components/dashboard/DashboardLayout.tsx +++ b/src/components/dashboard/DashboardLayout.tsx @@ -2,25 +2,31 @@ import clsx from "clsx" import Link from "next/link" import { useRouter } from "next/router" import React from "react" +import { APP_NAME } from "~/lib/env" import { getSiteLink } from "~/lib/helpers" import { trpc } from "~/lib/trpc" +import { SEOHead } from "../common/SEOHead" import { DashboardIcon } from "../icons/DashboardIcon" import { UniLink } from "../ui/UniLink" import { DashboardSidebar } from "./DashboardSidebar" import { SiteSwitcher } from "./SiteSwitcher" -export function DashboardLayout({ children }: { children: React.ReactNode }) { +export function DashboardLayout({ + children, + title, +}: { + children: React.ReactNode + title: string +}) { const router = useRouter() const subdomain = router.query.subdomain as string - const subscriptionsQuery = trpc.useQuery( + const { data: subscriptions } = trpc.useQuery( ["user.getSubscriptions", { canManage: true }], {} ) - const subscriptions = subscriptionsQuery.data - const viewerResult = trpc.useQuery(["auth.viewer"]) - const viewer = viewerResult.data + const { data: viewer } = trpc.useQuery(["auth.viewer"]) const links: { href: string @@ -108,6 +114,7 @@ export function DashboardLayout({ children }: { children: React.ReactNode }) { return ( <> +
diff --git a/src/components/main/MainLayout.tsx b/src/components/main/MainLayout.tsx index 4fcd2eaa..7c46ead7 100644 --- a/src/components/main/MainLayout.tsx +++ b/src/components/main/MainLayout.tsx @@ -1,84 +1,77 @@ import Link from "next/link" import { logout } from "~/lib/auth.client" -import { APP_NAME } from "~/lib/env" +import { APP_DESCRIPTION, APP_NAME } from "~/lib/env" import { useStore } from "~/lib/store" +import { truthy } from "~/lib/utils" +import { SEOHead } from "../common/SEOHead" +import { UniLink } from "../ui/UniLink" export function MainLayout({ isLoggedIn, children, region, + title, }: { isLoggedIn: boolean children?: React.ReactNode region: string | null + title?: string }) { const setLoginModalOpened = useStore((store) => store.setLoginModalOpened) - const links: Array<{ text: string; href?: string; onClick?: () => void }> = - isLoggedIn - ? [ - { - text: "Dashboard", - href: "/dashboard", - }, - { - text: "Log out", - onClick() { - logout() - }, - }, - ] - : [ - { - text: "Log in", - onClick() { - setLoginModalOpened(true) - }, - }, - ] return ( <> -
-
-
-
- - {APP_NAME} - -
-
- ..is under early testing, don{`'`}t use this app in production. -
-
- {links.map((link) => { - if (link.href) { - return ( - - - {link.text} - - - ) - } - return ( - - ) - })} -
-
- Region: {region} -
+ +
+
+

{APP_NAME}

+
+ {isLoggedIn ? ( + + Sign Out + + + + + ) : ( + { + setLoginModalOpened(true) + }} + className="bg-indigo-100 rounded-full px-4 h-8 inline-flex items-center text-sm text-indigo-500 font-medium" + > + Sign In + + )}
-
+ {children} +
+
+ © {APP_NAME} + ยท + + Region: {region} + +
+
) } diff --git a/src/components/site/SiteHeader.tsx b/src/components/site/SiteHeader.tsx index 5269d506..7d8457d8 100644 --- a/src/components/site/SiteHeader.tsx +++ b/src/components/site/SiteHeader.tsx @@ -68,9 +68,6 @@ export const SiteHeader: React.FC<{ { label: "Sign out", onClick() { - if (!confirm(`Are you sure you want to log out?`)) { - return - } logout() }, }, diff --git a/src/components/site/SiteLayout.tsx b/src/components/site/SiteLayout.tsx index a94860a9..35015215 100644 --- a/src/components/site/SiteLayout.tsx +++ b/src/components/site/SiteLayout.tsx @@ -28,12 +28,11 @@ export const SiteLayout: React.FC = ({ children, title, }) => { - const docTitle = title ? `${title} - ${site.name}` : site.name - return ( <> diff --git a/src/css/prose.css b/src/css/prose.css index 56c44889..76787921 100644 --- a/src/css/prose.css +++ b/src/css/prose.css @@ -56,7 +56,7 @@ .prose a { @apply text-indigo-600; - @apply underline; + @apply hover:underline; } .prose pre { diff --git a/src/lib/auth.client.ts b/src/lib/auth.client.ts index b7af107a..06e27c17 100644 --- a/src/lib/auth.client.ts +++ b/src/lib/auth.client.ts @@ -1,6 +1,8 @@ import { OUR_DOMAIN } from "./env" export const logout = () => { + if (!confirm(`Are you sure you want to log out?`)) return + const url = new URL(`${location.protocol}//${OUR_DOMAIN}/api/logout`) if (location.host !== OUR_DOMAIN) { url.searchParams.set( diff --git a/src/lib/env.ts b/src/lib/env.ts index 255f03d4..ea70f15c 100644 --- a/src/lib/env.ts +++ b/src/lib/env.ts @@ -4,3 +4,4 @@ export const APP_NAME = process.env.NEXT_PUBLIC_APP_NAME export const OUR_DOMAIN = process.env.NEXT_PUBLIC_OUR_DOMAIN export const SITE_URL = `${IS_PROD ? "https" : "http"}://${OUR_DOMAIN}` export const R2_URL = process.env.NEXT_PUBLIC_R2_URL +export const APP_DESCRIPTION = process.env.APP_DESCRIPTION diff --git a/src/pages/dashboard/[subdomain]/account/profile.tsx b/src/pages/dashboard/[subdomain]/account/profile.tsx index 6ca4eb8b..b1d2a69e 100644 --- a/src/pages/dashboard/[subdomain]/account/profile.tsx +++ b/src/pages/dashboard/[subdomain]/account/profile.tsx @@ -50,7 +50,7 @@ export default function AccountProfilePage() { }, [viewer.data, setValue]) return ( - + {viewer.data && (
diff --git a/src/pages/dashboard/[subdomain]/editor.tsx b/src/pages/dashboard/[subdomain]/editor.tsx index 1c12dd07..93c8b567 100644 --- a/src/pages/dashboard/[subdomain]/editor.tsx +++ b/src/pages/dashboard/[subdomain]/editor.tsx @@ -167,7 +167,7 @@ export default function SubdomainEditor() { }, [page]) return ( - +
diff --git a/src/pages/dashboard/[subdomain]/index.tsx b/src/pages/dashboard/[subdomain]/index.tsx index 76b102a7..4213f62f 100644 --- a/src/pages/dashboard/[subdomain]/index.tsx +++ b/src/pages/dashboard/[subdomain]/index.tsx @@ -1,10 +1,48 @@ +import { useRouter } from "next/router" import { DashboardLayout } from "~/components/dashboard/DashboardLayout" import { DashboardMain } from "~/components/dashboard/DashboardMain" +import { UniLink } from "~/components/ui/UniLink" export default function SubdomainIndex() { + const router = useRouter() + const subdomain = router.query.subdomain as string return ( - - hi + + +
+

+ + + +

+

Hello there,

+

+ This page is quite empty for now, but we will polish it very soon! + Maybe some useful analytics! +

+

Here{`'`}re some useful links:

+
    +
  • + + Create a Post + +
    • +
  • + + Change Site Name or Icon + +
    • +
  • + + Profile Settings + +
    • +
+
+ ) } diff --git a/src/pages/dashboard/[subdomain]/pages.tsx b/src/pages/dashboard/[subdomain]/pages.tsx index 3bffc9a3..cb702187 100644 --- a/src/pages/dashboard/[subdomain]/pages.tsx +++ b/src/pages/dashboard/[subdomain]/pages.tsx @@ -3,7 +3,7 @@ import { PagesManager } from "~/components/dashboard/PagesManager" export default function SubdomainPages() { return ( - + ) diff --git a/src/pages/dashboard/[subdomain]/posts.tsx b/src/pages/dashboard/[subdomain]/posts.tsx index 4213bbe1..058e1128 100644 --- a/src/pages/dashboard/[subdomain]/posts.tsx +++ b/src/pages/dashboard/[subdomain]/posts.tsx @@ -3,7 +3,7 @@ import { PagesManager } from "~/components/dashboard/PagesManager" export default function SubdomainPosts() { return ( - + ) diff --git a/src/pages/dashboard/[subdomain]/settings/domains.tsx b/src/pages/dashboard/[subdomain]/settings/domains.tsx index 0a9aed3c..d0b0ad06 100644 --- a/src/pages/dashboard/[subdomain]/settings/domains.tsx +++ b/src/pages/dashboard/[subdomain]/settings/domains.tsx @@ -52,9 +52,10 @@ export default function SettingsDomainsPage() { } }, [form, siteResult.data]) + const title = "Site Settings" return ( - - + +
+ {site && (
diff --git a/src/pages/dashboard/[subdomain]/settings/navigation.tsx b/src/pages/dashboard/[subdomain]/settings/navigation.tsx index 5bc5d992..f611dbd1 100644 --- a/src/pages/dashboard/[subdomain]/settings/navigation.tsx +++ b/src/pages/dashboard/[subdomain]/settings/navigation.tsx @@ -1,6 +1,6 @@ import { Button } from "~/components/ui/Button" import { Input } from "~/components/ui/Input" -import { FormEvent, useEffect, useMemo, useState } from "react" +import { ChangeEvent, FormEvent, useEffect, useMemo, useState } from "react" import toast from "react-hot-toast" import { SettingsLayout } from "~/components/dashboard/SettingsLayout" import { useRouter } from "next/router" @@ -40,7 +40,9 @@ const SortableNavigationItem: React.FC<{ required id={`${item.id}-label`} value={item.label} - onChange={(e) => updateItem(item.id, { label: e.target.value })} + onChange={(e: ChangeEvent) => + updateItem(item.id, { label: e.target.value }) + } /> updateItem(item.id, { url: e.target.value })} + onChange={(e: ChangeEvent) => + updateItem(item.id, { url: e.target.value }) + } />
+
+
-
-
-

Create a new site

-
-
- -
-
- -
-
- -
-
-
+ ) } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 68182386..1d92bf6b 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,11 +1,15 @@ import { GetServerSideProps } from "next" +import { DashboardIcon } from "~/components/icons/DashboardIcon" import { MainLayout } from "~/components/main/MainLayout" +import { UniLink } from "~/components/ui/UniLink" import { getAuthUser } from "~/lib/auth.server" import { FLY_REGION } from "~/lib/env.server" +import { useStore } from "~/lib/store" export const getServerSideProps: GetServerSideProps = async (ctx) => { const user = await getAuthUser(ctx.req) const isLoggedIn = !!user + return { props: { isLoggedIn, @@ -21,5 +25,47 @@ export default function Home({ isLoggedIn: boolean region: string | null }) { - return + const setLoginModalOpened = useStore((store) => store.setLoginModalOpened) + + return ( + +
+
+
+

+ Content Creating for +
+ Absolutely Everyone +

+

+ Meet Proselog, the open-source blogging and +
+ newsletter platform for everyone. Focus on writing, not + distractions. +

+
+ {isLoggedIn ? ( + + + Dashboard + + ) : ( + { + setLoginModalOpened(true) + }} + className="bg-indigo-500 hover:bg-indigo-600 rounded-full px-4 h-8 inline-flex items-center text-sm text-white font-medium" + > + Getting Started + + )} +
+
+
+
+ + ) } diff --git a/src/router/auth.ts b/src/router/auth.ts index b9658092..60724452 100644 --- a/src/router/auth.ts +++ b/src/router/auth.ts @@ -3,6 +3,7 @@ import { z } from "zod" import { prismaPrimary } from "~/lib/db.server" import { sendLoginEmail } from "~/lib/mailgun.server" import { createRouter } from "~/lib/trpc.server" +import { getViewer } from "~/lib/viewer" export const authRouter = createRouter() .query("viewer", { @@ -17,7 +18,7 @@ export const authRouter = createRouter() }) .nullable(), async resolve({ ctx }) { - return ctx.user || null + return getViewer(ctx.user) }, }) .mutation("requestLoginLink", { diff --git a/types.d.ts b/types.d.ts index 0e667dc4..7f95d91d 100644 --- a/types.d.ts +++ b/types.d.ts @@ -1,24 +1,18 @@ -declare interface ServerEnv { +declare interface CustomEnv { // Additional environment variables - APP_NAME: string + NEXT_PUBLIC_APP_NAME: string + NEXT_PUBLIC_R2_URL: string + DATABASE_URL: string AUTH_COOKIE_NAME: string - OUR_DOMAIN: string + NEXT_PUBLIC_OUR_DOMAIN: string MAILGUN_APIKEY: string MAILGUN_DOMAIN: string FLY_REGION?: string PRIMARY_REGION?: string ENCRYPT_SECRET: string - NEXT_PUBLIC_R2_URL: string - R2_API_TOKEN: string -} - -declare interface BrowserEnv { - APP_NAME: string - OUR_DOMAIN: string - R2_URL: string } declare namespace NodeJS { - interface ProcessEnv extends ServerEnv {} + interface ProcessEnv extends CustomEnv {} }