Skip to content

Commit

Permalink
Merge branch 'manawiki:main' into main
Browse files Browse the repository at this point in the history
  • Loading branch information
@pogseal
pogseal authored Sep 21, 2024
2 parents e5bf30c + 9f4c05b commit 06a2ae6
Show file tree
Hide file tree
Showing 8 changed files with 237 additions and 113 deletions.
3 changes: 2 additions & 1 deletion Dockerfile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,10 @@ RUN apk add --no-cache supervisor
# Copy over built assets for production
COPY supervisord.conf package.json ./
COPY --from=production /app/node_modules /app/node_modules
COPY --from=custom /app/build /app/build
COPY --from=core /app/build /app/build
COPY --from=core /app/public /app/public
COPY --from=custom /app/build /app/build
COPY --from=custom /app/public /app/public

# Start the server using supervisor
EXPOSE 3000
Expand Down
109 changes: 109 additions & 0 deletions app/components/TableOfContentsTemplate.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
import { Link } from "@remix-run/react";
import clsx from "clsx";

import { Icon } from "~/components/Icon";
import type { Collection } from "~/db/payload-types";

export function TableOfContentsTemplate({
sections,
}: {
sections:
| Collection["sections"]
| { id: string; slug: string; name: string }[];
}) {
console.log(sections);
return (
<>
{sections && sections?.length > 1 && (
<section className="relative w-full">
<div className="text-sm border-y tablet:border border-color-sub overflow-hidden shadow-sm shadow-1 tablet:rounded-lg bg-zinc-50 dark:bg-dark350">
<div className="py-3 px-2.5 font-bold text-xs flex items-center justify-between gap-2.5 border-b border-color shadow-zinc-100/70 dark:shadow-zinc-800/70 shadow-sm">
<div className="flex items-center gap-2.5">
<Icon
name="list"
size={18}
className="dark:text-zinc-500 text-zinc-400"
/>
<span>Table of Contents</span>
</div>
</div>
<div className="py-3.5 space-y-2.5">
{sections?.map((section) => (
<div key={section.id}>
<div className="group flex items-center relative -ml-1.5 hover:underline dark:decoration-zinc-500 decoration-zinc-300">
<div
className="size-3 border group-hover:bg-zinc-200 dark:border-zinc-600 border-zinc-300 dark:group-hover:border-zinc-500
bg-zinc-100 dark:bg-dark450 rounded-full dark:shadow-zinc-800 dark:group-hover:bg-dark500"
/>
<div className="w-3 h-[1px] dark:bg-zinc-700 bg-zinc-200" />
<Link
to={`#${section?.slug}`}
className={clsx(
section?.subSections &&
section?.subSections?.length > 1
? "rounded-t-lg border-b-0"
: "rounded-lg shadow-sm shadow-zinc-100 dark:shadow-zinc-800/40",
"font-bold pl-2 pr-2.5 mr-3 py-1.5 flex items-center w-full gap-1.5 dark:hover:bg-dark450 border border-color-sub bg-white dark:bg-dark400 hover:bg-zinc-100 ",
)}
>
<Icon
name="hash"
size={12}
className="dark:text-zinc-500 text-zinc-400"
/>
<span className="pr-1">{section.name}</span>
<div className="border-t border-dotted border-zinc-300/80 dark:border-zinc-600 flex-grow" />
<Icon
name="chevron-down"
size={14}
className="dark:text-zinc-500 text-zinc-400"
/>
</Link>
</div>
{section?.subSections &&
section?.subSections?.length > 0 ? (
<div
className={clsx(
section?.subSections &&
section?.subSections?.length > 1
? "rounded-b-lg"
: "rounded-lg",
"border border-color-sub overflow-hidden divide-y divide-color-sub mr-3 ml-[16.5px] tablet:ml-[17px] bg-3-sub shadow-sm shadow-zinc-100 dark:shadow-zinc-800/50",
)}
>
{section.subSections?.map((subSection) => (
<Link
key={subSection.id}
className="group flex w-full items-center justify-between relative dark:hover:bg-dark450 hover:bg-zinc-50 dark:decoration-zinc-500 decoration-zinc-300 px-2.5 py-2 text-xs font-bold"
to={
section.viewType == "rows"
? `#${subSection?.slug}`
: `?section=${subSection?.slug}#${section?.slug}`
}
>
<div className="flex items-center gap-2">
<Icon
name="corner-down-right"
size={14}
className="dark:text-zinc-500 text-zinc-400"
/>
<span>{subSection.name}</span>
</div>
<Icon
name="chevron-down"
size={14}
className="dark:text-zinc-500 text-zinc-400"
/>
</Link>
))}
</div>
) : null}
</div>
))}
</div>
</div>
</section>
)}
</>
);
}
56 changes: 56 additions & 0 deletions app/root.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,11 @@ import {
Outlet,
Scripts,
useLoaderData,
useLocation,
useNavigation,
} from "@remix-run/react";
import splideCSS from "@splidejs/splide/dist/css/splide-core.min.css";
import { useNProgress } from "@tanem/react-nprogress";
import { useTranslation } from "react-i18next";
import reactCropUrl from "react-image-crop/dist/ReactCrop.css";
import rdtStylesheet from "remix-development-tools/index.css";
Expand Down Expand Up @@ -145,6 +148,7 @@ function App() {
const { i18n } = useTranslation();
const isBot = useIsBot();
const theme = useTheme();
const navigation = useNavigation();

useChangeLanguage(locale);
const { site } = useSiteLoaderData();
Expand All @@ -160,6 +164,17 @@ function App() {
}, [toast]);

const [searchToggle, setSearchToggle] = useState(false);
const [isLoading, setIsLoading] = useState(false);

useEffect(() => {
// when the state is idle then we can to complete the progress bar
if (navigation.state === "idle") setIsLoading(false);
// and when it's something else it means it's either submitting a form or
// waiting for the loaders of the next location so we start it
else setIsLoading(true);
}, [navigation.state]);

const location = useLocation();

return (
<html
Expand Down Expand Up @@ -219,6 +234,7 @@ function App() {
<Links />
</head>
<body className="text-light dark:text-dark">
<Progress isAnimating={isLoading} key={location.key} />
<div
data-vaul-drawer-wrapper=""
className="max-laptop:min-h-screen bg-white dark:bg-bg3Dark"
Expand Down Expand Up @@ -265,3 +281,43 @@ export function shouldRevalidate({
? false
: defaultShouldRevalidate;
}

const Bar: React.FC<{
animationDuration: number;
progress: number;
}> = ({ animationDuration, progress }) => (
<div
className="bg-blue-500 h-0.5 left-0 top-0 w-full fixed"
style={{
marginLeft: `${(-1 + progress) * 100}%`,
transition: `margin-left ${animationDuration}ms linear`,
zIndex: 99999,
}}
>
<div
className="h-full opacity-100 absolute block right-0"
style={{
boxShadow: "0 0 10px #3b82f6, 0 0 5px #3b82f6",
transform: "rotate(3deg) translate(0px, -4px)",
width: 100,
}}
/>
</div>
);

const Progress: React.FC<{ isAnimating: boolean }> = ({ isAnimating }) => {
const { animationDuration, isFinished, progress } = useNProgress({
isAnimating,
});
return (
<div
style={{
opacity: isFinished ? 0 : 1,
pointerEvents: "none",
transition: `opacity ${animationDuration}ms linear`,
}}
>
<Bar animationDuration={animationDuration} progress={progress} />
</div>
);
};
34 changes: 34 additions & 0 deletions app/routes/_editor+/blocks+/link/_link.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,40 @@ export async function loader({

//Otherwise, return site
default:
// Determine if the path is a custom page
try {
const customPageData = await payload.find({
collection: "customPages",
where: {
site: {
equals: site?.id,
},
slug: {
equals: pathSection[1],
},
},
depth: 1,
overrideAccess: false,
user,
});

const customPage = customPageData?.docs[0];

if (customPage == undefined)
return {
message: "ok",
};

return {
name: customPage?.name,
icon: {
//@ts-ignore
url: customPage?.icon?.url,
},
};
} catch (err: unknown) {
payload.logger.error(`${err}`);
}
return {
message: "ok",
};
Expand Down
29 changes: 17 additions & 12 deletions app/routes/_site+/c_+/$collectionId_.$entryId/components/SectionTitle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,26 @@ import type { Collection } from "~/db/payload-types";
import type { Flatten } from "./Section";

export function SectionTitle({
customSlug,
section,
customTitle,
}: {
customSlug?: string;
section?: Flatten<Collection["sections"]>;
customTitle?: string;
}) {
const hasTitle = section?.showTitle && section.name;

if (hasTitle || customTitle)
return (
<div className="max-w-[728px] mx-auto">
{!customTitle ? (
<Link to={`#${section?.slug}`}>
<div
id={customSlug && !section ? customSlug : undefined}
className="max-w-[728px] mx-auto scroll-mt-[72px] z-50 relative"
>
{!customSlug && !section ? (
<div>
<h2
className="dark:border-zinc-600 border-zinc-300 relative bg-zinc-100
className="dark:border-zinc-600 border-zinc-300 relative bg-zinc-100
mt-8 overflow-hidden rounded-lg shadow-sm dark:shadow-black/20 mb-2.5 border-2
font-header text-xl font-bold dark:bg-dark450"
>
Expand All @@ -30,30 +35,30 @@ export function SectionTitle({
/>
<div className="flex items-center gap-2">
<div className="relative h-full px-3.5 flex-grow py-2.5">
{customTitle ?? section?.name}
{customTitle}
</div>
</div>
</h2>
</Link>
</div>
) : (
<div>
<Link to={`#${section?.slug ?? customSlug}`}>
<h2
className="dark:border-zinc-600 border-zinc-300 relative bg-zinc-100
mt-8 overflow-hidden rounded-lg shadow-sm dark:shadow-black/20 mb-2.5 border-2
font-header text-xl font-bold dark:bg-dark450"
mt-8 overflow-hidden rounded-lg shadow-sm dark:shadow-black/20 mb-2.5 border-2
font-header text-xl font-bold dark:bg-dark450"
>
<div
className="pattern-dots absolute left-0 top-0 -z-0 h-full
w-full pattern-bg-white pattern-zinc-500 pattern-opacity-10
pattern-size-4 dark:pattern-zinc-400 dark:pattern-bg-bg3Dark"
w-full pattern-bg-white pattern-zinc-500 pattern-opacity-10
pattern-size-4 dark:pattern-zinc-400 dark:pattern-bg-bg3Dark"
/>
<div className="flex items-center gap-2">
<div className="relative h-full px-3.5 flex-grow py-2.5">
{customTitle ?? section?.name}
</div>
</div>
</h2>
</div>
</Link>
)}
</div>
);
Expand Down
Loading

0 comments on commit 06a2ae6

Please sign in to comment.