Skip to content

Commit

Permalink
sidebar related sites
Browse files Browse the repository at this point in the history
  • Loading branch information
@pogseal
pogseal committed Aug 30, 2024
1 parent d98b7be commit ef1b390
Show file tree
Hide file tree
Showing 9 changed files with 183 additions and 37 deletions.
6 changes: 6 additions & 0 deletions app/db/collections/sites/site-config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,12 @@ export const Sites: CollectionConfig = {
relationTo: "collections",
hasMany: true,
},
{
name: "partnerSites",
type: "relationship",
relationTo: "sites",
hasMany: true,
},
{
name: "menu",
type: "array",
Expand Down
2 changes: 1 addition & 1 deletion app/routes/_editor+/core/components/BlockSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,7 @@ export function BlockSelector({ element, editor, isSelectorOpen }: Props) {
type: BlockType.Table,
id: nanoid(),
tableLayout: "fixed",
tableStyle: "default",
tableStyle: "rounded",
children: [
//@ts-ignore
{
Expand Down
2 changes: 1 addition & 1 deletion app/routes/_editor+/core/components/EditorCommandBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ export const EditorCommandBar = ({
if (!_secondaryOptions) _secondaryOptions = secondaryOptions;
return (
<>
<div className={clsx(isSection ? "" : "fixed h-full z-50")}>
<div className={clsx(isSection ? "" : "fixed h-full z-10")}>
<div
className={clsx(
isSection
Expand Down
70 changes: 70 additions & 0 deletions app/routes/_site+/_components/BrandingFooter.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import { Link } from "@remix-run/react";

import { Image } from "~/components/Image";
import { LogoText } from "~/components/Logo";
import type { Site } from "~/db/payload-types";
import { LoggedOut } from "~/routes/_auth+/components/LoggedOut";
import { useTheme } from "~/utils/client-hints";

import { DarkModeToggle } from "../action+/theme-toggle";

export function BrandingFooter({ site }: { site: Site }) {
const theme = useTheme();

return (
<div className="max-laptop:py-5 border-t border-color h-[54px] bg-2 flex items-center px-3.5 laptop:w-[333px] z-40">
<div className="justify-between w-full flex items-center max-laptop:max-w-[728px] mx-auto gap-3">
{!site.isWhiteLabel && (
<Link
to="https://mana.wiki"
className="flex items-center gap-1.5 justify-start laptop:justify-end group"
>
<span className="dark:text-zinc-500 text-zinc-400 text-xs font-semibold">
Powered by
</span>
<LogoText className="w-12 text-1 group-hover:dark:text-zinc-300 group-hover:text-zinc-600" />
</Link>
)}
{site.isWhiteLabel &&
site?.logoDarkImage?.url &&
site?.logoLightImage?.url &&
site?.logoURL && (
<Link
to={site?.logoURL}
className="flex-grow flex items-center justify-start"
>
<Image
className="object-contain flex-grow text-left h-6 max-w-[140px]"
width={280}
height={48}
url={
theme === "light"
? site?.logoLightImage?.url
: site?.logoDarkImage?.url
}
/>
</Link>
)}
<div className="flex items-center gap-4 text-xs text-1">
<DarkModeToggle className="!size-3.5" />
<LoggedOut>
<Link
to="/join"
className="group relative inline-flex h-7 items-center justify-center overflow-hidden flex-none
rounded-lg laptop:rounded-md px-2.5 font-medium text-indigo-600 transition duration-300 ease-out shadow-sm shadow-1"
>
<span className="absolute inset-0 h-full w-full bg-gradient-to-br from-yellow-500 via-blue-500 to-purple-600"></span>
<span
className="ease absolute bottom-0 right-0 mb-32 mr-4 block h-64 w-64 origin-bottom-left translate-x-24
rotate-45 transform rounded-full bg-teal-500 opacity-30 transition duration-500 group-hover:rotate-90"
></span>
<span className="relative text-xs laptop:text-[10px] font-bold text-white uppercase">
Sign up
</span>
</Link>
</LoggedOut>
</div>
</div>
</div>
);
}
49 changes: 45 additions & 4 deletions app/routes/_site+/_components/Column-1-Menu.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { Link, useLocation } from "@remix-run/react";

import { Avatar } from "~/components/Avatar";
import { Avatar, AvatarButton } from "~/components/Avatar";
import { Icon } from "~/components/Icon";
import { Tooltip, TooltipTrigger, TooltipContent } from "~/components/Tooltip";
import type { Site } from "~/db/payload-types";
import { LoggedIn } from "~/routes/_auth+/components/LoggedIn";
import { LoggedOut } from "~/routes/_auth+/components/LoggedOut";
import { Staff } from "~/routes/_auth+/components/Staff";
import { NewSiteModal } from "~/routes/_site+/action+/new-site-modal";
import { DarkModeToggle } from "~/routes/_site+/action+/theme-toggle";
import { useRootLoaderData } from "~/utils/useSiteLoaderData";

import { SidebarItem } from "./SidebarItem";
Expand All @@ -23,8 +23,49 @@ export function ColumnOneMenu({ site }: { site?: Site }) {
<>
{site && (
<LoggedOut>
<div className="relative flex items-center justify-center pb-3">
<div className="relative flex items-center flex-col justify-center pb-3 gap-3">
<SidebarItem isLoggedOut site={site} />
{site?.partnerSites && site?.partnerSites?.length > 0 && (
<>
<div className="px-4 w-full h-full">
<div className="border-t h-1 w-full border-zinc-300 dark:border-dark400 border-dashed block" />
</div>
<div className="relative flex flex-col items-center gap-3.5 py-0.5">
{site?.partnerSites?.map((partnerSite) => {
const path = partnerSite.domain
? `https://${partnerSite.domain}`
: `https://${partnerSite.slug}.mana.wiki`;
return (
<Tooltip
key={partnerSite.id}
placement="right"
>
<TooltipTrigger asChild>
<AvatarButton
href={path}
square
src={partnerSite?.icon?.url}
initials={partnerSite?.name?.charAt(
0,
)}
alt="Site Logo"
options="aspect_ratio=1:1&height=120&width=120"
className="size-9 transition duration-300 active:translate-y-0.5"
/>
</TooltipTrigger>
<TooltipContent>
{partnerSite.name}
</TooltipContent>
</Tooltip>
);
})}
</div>
<div className="px-4 w-full h-full">
<div className="border-t h-1 w-full border-zinc-300 dark:border-dark400 border-dashed block" />
</div>
<NewSiteModal />
</>
)}
</div>
</LoggedOut>
)}
Expand Down Expand Up @@ -66,7 +107,7 @@ export function ColumnOneMenu({ site }: { site?: Site }) {
className="text-center max-laptop:flex max-laptop:flex-grow
max-laptop:gap-3 laptop:mb-4 laptop:space-y-3"
>
{following?.map((item) => (
{following?.map((item: any) => (
<li key={item.id}>
<div className="relative flex items-center justify-center">
<SidebarItem site={item} siteSlug={siteSlug} />
Expand Down
63 changes: 44 additions & 19 deletions app/routes/_site+/_components/Column-4.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { Link, useLoaderData } from "@remix-run/react";
import { Splide, SplideSlide, SplideTrack } from "@splidejs/react-splide";
import clsx from "clsx";

import { Button } from "~/components/Button";
import { Avatar } from "~/components/Avatar";
import { Icon } from "~/components/Icon";
import { Image } from "~/components/Image";
import { LogoText } from "~/components/Logo";
Expand Down Expand Up @@ -175,7 +175,7 @@ export function ColumnFour() {
{groupedTrendingPages.length > 0 ? (
<>
<TabGroup
className="flex-grow overflow-auto max-h-[672px] z-20 scrollbar
className="flex-grow overflow-auto z-20 scrollbar
dark:scrollbar-thumb-zinc-500 dark:scrollbar-track-dark450
scrollbar-thumb-zinc-300 scrollbar-track-zinc-100"
>
Expand Down Expand Up @@ -249,7 +249,7 @@ export function ColumnFour() {
laptop:w-[310px] laptop:ml-3 dark:hover:bg-dark450 tablet:border tablet:border-zinc-100
dark:tablet:border-zinc-700 dark:laptop:border-zinc-700/50"
>
<div className="size-8 flex items-center justify-center flex-none">
<div className="size-[30px] flex items-center justify-center flex-none">
{nestedRow.data?.icon
?.url ? (
<Image
Expand Down Expand Up @@ -283,22 +283,16 @@ export function ColumnFour() {
))}
</SplideTrack>
<div
className="splide__arrows bg-gradient-to-t laptop:from-white laptop:to-white/10 dark:laptop:from-bg2Dark laptop:to-bg2Dark/20 flex items-center justify-between
w-full laptop:w-[333px] gap-1.5 px-3 laptop:fixed laptop:bottom-[54px] right-0 z-30"
className="splide__arrows bg-gradient-to-t laptop:from-white laptop:to-white/10 dark:laptop:from-bg2Dark max-laptop:mt-3 pb-3 flex items-center justify-between
w-full laptop:w-[333px] max-laptop:mx-auto max-w-[752px] gap-1.5 px-3 laptop:fixed laptop:bottom-[54px] right-0 z-30"
>
<Button
plain
className="splide__arrow splide__arrow--prev !p-1"
>
<button className="splide__arrow splide__arrow--prev size-7 flex items-center justify-center bg-zinc-200 laptop:bg-zinc-100 hover:bg-zinc-200/80 dark:hover:bg-dark500 laptop:dark:hover:bg-dark400 dark:bg-dark450 laptop:dark:bg-dark350 rounded-lg">
<Icon name="chevron-left" size={18} />
</Button>
<ul className="splide__pagination flex items-center gap-2.5 py-4"></ul>
<Button
plain
className="splide__arrow splide__arrow--next !p-1"
>
</button>
<ul className="splide__pagination flex items-center gap-2.5"></ul>
<button className="splide__arrow splide__arrow--next size-7 flex items-center justify-center bg-zinc-200 laptop:bg-zinc-100 hover:bg-zinc-200/80 dark:hover:bg-dark500 laptop:dark:hover:bg-dark400 dark:bg-dark450 laptop:dark:bg-dark350 rounded-lg">
<Icon name="chevron-right" size={18} />
</Button>
</button>
</div>
</Splide>
)}
Expand All @@ -310,7 +304,38 @@ export function ColumnFour() {
</TabGroup>
</>
) : undefined}
<div className="max-laptop:py-5 border-t border-color h-[54px] bg-2 flex items-center px-3.5 laptop:w-[333px] z-40 laptop:fixed bottom-0 right-0">
<LoggedOut>
{site?.partnerSites && site?.partnerSites?.length > 0 && (
<div className="z-20 laptop:hidden py-4 px-3 border-t border-color">
<div className="max-w-[728px] mx-auto shadow-sm overflow-hidden shadow-zinc-50 dark:shadow-zinc-800/30 divide-y dark:divide-zinc-600/40 border dark:border-zinc-600/40 gap-2 rounded-xl bg-zinc-50 dark:bg-dark400">
{site?.partnerSites?.map((partnerSite) => {
const path = partnerSite.domain
? `https://${partnerSite.domain}`
: `https://${partnerSite.slug}.mana.wiki`;
return (
<Link
to={path}
className="flex items-center gap-2.5 p-2 dark:hover:bg-dark400"
key={partnerSite.id}
>
<Avatar
src={partnerSite?.icon?.url}
initials={partnerSite?.name?.charAt(0)}
alt="Site Logo"
options="aspect_ratio=1:1&height=120&width=120"
className="size-7 transition duration-300 active:translate-y-0.5"
/>
<span className="font-semibold text-sm">
{partnerSite?.name}
</span>
</Link>
);
})}
</div>
</div>
)}
</LoggedOut>
<div className="max-laptop:py-4 border-t border-color laptop:h-[54px] bg-zinc-50 laptop:bg-white dark:bg-dark350 laptop:dark:bg-dark350/20 flex items-center px-3.5 laptop:w-[333px] z-40 laptop:fixed bottom-0 right-0">
<div className="justify-between w-full flex items-center max-laptop:max-w-[728px] mx-auto gap-3">
{!site.isWhiteLabel && (
<Link
Expand All @@ -332,7 +357,7 @@ export function ColumnFour() {
className="flex-grow flex items-center justify-start"
>
<Image
className="object-contain flex-grow text-left h-6 max-w-[140px]"
className="object-contain flex-grow text-left laptop:h-6 max-w-[170px] laptop:max-w-[140px]"
width={280}
height={48}
url={
Expand All @@ -348,7 +373,7 @@ export function ColumnFour() {
<LoggedOut>
<Link
to="/join"
className="group relative inline-flex h-7 items-center justify-center overflow-hidden flex-none
className="group relative inline-flex h-8 laptop:h-7 items-center justify-center overflow-hidden flex-none
rounded-lg laptop:rounded-md px-2.5 font-medium text-indigo-600 transition duration-300 ease-out shadow-sm shadow-1"
>
<span className="absolute inset-0 h-full w-full bg-gradient-to-br from-yellow-500 via-blue-500 to-purple-600"></span>
Expand Down
9 changes: 9 additions & 0 deletions app/routes/_site+/_utils/fetchSite.server.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,15 @@ const QUERY = gql`
trendingPages
isWhiteLabel
logoURL
partnerSites {
id
slug
name
domain
icon {
url
}
}
logoDarkImage {
url
}
Expand Down
9 changes: 2 additions & 7 deletions app/routes/_site+/action+/new-site-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,11 +67,6 @@ export function NewSiteModal() {
open={isOpen}
>
<LoggedOut>
<div className="space-y-2 pb-8 pt-6">
<div className="text-center font-header text-xl font-bold">
Login to create a new wiki on Mana!
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<Link
to="/join"
Expand All @@ -88,8 +83,8 @@ export function NewSiteModal() {
</span>
</Link>
<Link
className="border-color bg-3 shadow-1 flex h-10 items-center
justify-center rounded-full border text-center text-sm
className="border-color dark:bg-white bg-zinc-900 dark:text-zinc-800 shadow-1 flex h-10 items-center
justify-center rounded-full border text-center text-sm text-white
font-bold shadow-sm"
to="/login"
>
Expand Down
10 changes: 5 additions & 5 deletions app/styles/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,22 +155,22 @@ html.dark {
/* --------------- Rounded Table ---------------*/

table.rounded-table {
@apply rounded-lg border border-color-sub border-spacing-0 border-separate;
@apply rounded-lg border border-zinc-300/60 dark:border-zinc-600/60 border-spacing-0 border-separate shadow-sm shadow-zinc-100 dark:shadow-zinc-800/50;
}

table.default-table {
@apply border border-color-sub;
@apply border border-zinc-300/60 dark:border-zinc-600/60;
}

table.default-table th,
table.default-table td {
@apply border border-color-sub;
@apply border border-zinc-300/60 dark:border-zinc-600/60;
}

/* Apply a border to the right of all but the last column */
table.rounded-table th:not(:last-child),
table.rounded-table td:not(:last-child) {
@apply border-color-sub border-r;
@apply border-zinc-300/60 dark:border-zinc-600/60 border-r;
}

/* Apply a border to the bottom of all but the last row */
Expand All @@ -185,7 +185,7 @@ table.rounded-table > tr:not(:last-child) > th,
table.rounded-table > thead:not(:last-child),
table.rounded-table > tbody:not(:last-child),
table.rounded-table > tfoot:not(:last-child) {
@apply border-color-sub border-b;
@apply border-zinc-300/60 dark:border-zinc-600/60 border-b;
}

/* --------------- Date/Time Picker ---------------*/
Expand Down

0 comments on commit ef1b390

Please sign in to comment.