Content from Dark Alleys and Twisted Paths

components/ability-item.tsx

@@ -18,6 +18,11 @@ interface AbilityItemP {
   description: Ability["description"];
   feats: Ability["feats"] | PartialFeat[];
   usage: Ability["usage"];
+  version: Ability["version"];
+  variant: Ability["variant"];
+  tier: Ability["tier"];
+  source: Ability["source"];
+  replaced_by: Ability["replaced_by"];
 }
 
 export default function AbilityItem({
@@ -26,6 +31,7 @@ export default function AbilityItem({
   description,
   feats,
   usage,
+  source
 }: AbilityItemP): JSX.Element {
   const headerBgMap: Record<NonNullable<Ability["usage"]>, string> = {
     "at-will":
@@ -38,8 +44,13 @@ export default function AbilityItem({
     recharge: "from-sky-600 to-sky-800 dark:from-sky-700 dark:to-sky-900",
   };
 
+  const isSubItem = type && (type.startsWith("Domain Spell") || type.startsWith("Death Knight Rune") || type.startsWith("Bonus Power") || type.startsWith("Arcane Shot"))
+
   return (
-    <section className="text-base m-0 text-stone-950 dark:text-stone-50 relative">
+    <section className={clsx(
+       isSubItem ? "ml-16": "",
+      "text-base m-0 text-stone-950 dark:text-stone-50 relative"
+    )}>
       <div className="absolute -inset-[2px] border-2 border-stone-100 dark:border-stone-950 pointer-events-none" />
       <header
         className={clsx(
@@ -49,6 +60,11 @@ export default function AbilityItem({
       >
         <Label as="h1" variant="title" className="text-left">
           {name}
+            {source !== undefined && (
+              <Label as="div" variant="title" className="text-gray-400 text-sm">
+                {source}
+              </Label>
+            )}
         </Label>
         <Label variant="label" className="text-right ordinal">
           {type}

components/book-selector.tsx

@@ -0,0 +1,63 @@
+import { useMemo } from "react";
+import { Popover, Switch, Transition } from "@headlessui/react";
+import { useTranslation } from "next-i18next";
+import BookIcon from "@heroicons/react/20/solid/BookOpenIcon";
+import { useBookStore } from "@/lib/books";
+
+export function BookSelector() {
+  const { t } = useTranslation();
+  const {enabledBooks, toggleEnabledBook} = useBookStore();
+
+  const ThemeIcon = useMemo(() => {
+    return BookIcon;
+  });
+
+  return (
+    <Popover as="div" horizontal="true">
+            <Popover.Button
+              className="flex p-2 items-center justify-center shadow-md shadow-black/5 ring-1 bg-stone-800 ring-inset ring-white/5"
+              aria-label={t("theme-switcher") as string}
+            >
+              <ThemeIcon className="block h-5 w-5 fill-stone-400" />
+            </Popover.Button>
+
+          <Transition
+            enter="transition duration-200 ease-out"
+            enterFrom="transform opacity-0"
+            enterTo="transform opacity-100"
+            leave="transition duration-200 ease-out"
+            leaveFrom="transform opacity-100"
+            leaveTo="transform opacity-0"
+          >
+          <Popover.Panel
+                className="absolute top-full mt-0 w-72 right-0 text-sm font-medium shadow-md shadow-black/5 ring-1 bg-stone-900 ring-white/5"
+                >
+                <>
+                <h3 className="font-serif font-bold text-center p-2">Additional content</h3>
+                {enabledBooks.map( (book, index) => (
+                  <div className="text-stone-400 p-2" key={book[0]}>
+                  <Switch
+                    checked={book[2]}
+                    onChange={ () => toggleEnabledBook(index) }
+                    className={(book[2] ? 'bg-amber-500' : 'bg-amber-900') +
+                    " relative inline-flex h-4 w-8 items-center rounded-full"}>
+                      {({checked}) => (
+                        <>
+                          <span 
+                            className={`${
+                              checked ? 'translate-x-4' : 'translate-x-1'
+                            } translate-x-1 inline-block h-3 w-3 transform rounded-full bg-white transition`}>
+                          </span>
+                        </>
+                    )}
+                  </Switch>
+                  <span className="w-fit p-2">{book[1]}</span>
+                  </div>
+                ))}
+                </>
+          </Popover.Panel>
+          </Transition>
+    </Popover>
+  );
+
+}

components/compendium-ability.tsx

@@ -2,6 +2,7 @@ import { Ability } from "@/.contentlayer/generated";
 import clsx from "clsx";
 import { map, size } from "lodash-es";
 import AbilityItem from "./ability-item";
+import { useBookStore, isSourceEnabled, isVVEnabled } from "@/lib/books";
 
 interface AbilityListP {
   abilities?: Ability[];
@@ -19,6 +20,16 @@ export default function AbilityList({
     2: "lg:grid-cols-2",
     3: "lg:grid-cols-3",
   };
+  const bookstore = useBookStore( (state) => state);
+  const isAbilityHidden = (ability) => {
+    return (ability.source && !isSourceEnabled(bookstore,ability.source)) ||
+    (ability.version && !isVVEnabled(bookstore,"version",ability.version)) ||
+    (ability.variant && !isVVEnabled(bookstore,"variant",ability.version)) ||
+    (ability.replaced_by && isSourceEnabled(bookstore,ability.replaced_by))
+  };
+
+  // so far this is the only sourcebook that uses spell schools
+  const displaySchools = isSourceEnabled(bookstore,"DATP");
 
   return (
     <div
@@ -28,14 +39,17 @@ export default function AbilityList({
         columnClassesMap[columns]
       )}
     >
-      {map(abilities, (ability) => (
+      {map(abilities, (ability) => isAbilityHidden(ability) || (
         <div role="listitem" key={ability.name}>
           <AbilityItem
-            type={ability._type}
+            type={ability.school && displaySchools ? 
+              ability.school + " " + ability._type :
+              ability._type}
             name={ability.name}
             description={ability.description}
             feats={ability.feats}
             usage={ability.usage}
+            source={ability.source}
           />
         </div>
       ))}

components/compendium-header.tsx

@@ -1,18 +1,79 @@
 import CompendiumTitle from "./compendium-title";
+import { RadioGroup } from '@headlessui/react'
+import { useBookStore, isSourceEnabled, getVV } from "@/lib/books";
 
 export default function VaultHeader({
   primaryLabel,
   secondaryLabel,
+  versions = null,
+  variants = null
 }: {
   primaryLabel: string;
   secondaryLabel: string;
+  versions: any;
+  variants: any;
 }) {
+
+  const bookStore = useBookStore((state) => state); // everything in the store can affect the render!
+  const getVersion = () => {
+    // this is not a pure getter - it also makes sure the store has an entry for the current page
+    let currentVersion = getVV(bookStore,"version"); 
+    if(currentVersion) // it's possible the sourcebook containing the version is no longer enabled
+    {
+      const matchingVersionObj = versions.filter((version) => version.name == currentVersion);
+      if (matchingVersionObj && matchingVersionObj[0].source && !isSourceEnabled(bookStore, matchingVersionObj[0].source))
+        currentVersion = null;
+    }
+    if(!currentVersion)
+    {
+      bookStore.setDocumentVV(primaryLabel,"version",versions[0].name);
+      return versions[0].name;
+    }
+    return currentVersion;
+  };
+  const hasMultipleOptions = () => {
+    const options = versions.filter( (version) => 
+      !version.source || isSourceEnabled(bookStore,version.source)) 
+    return options.length > 1;
+  }
+  bookStore.setCurrentDocument(primaryLabel);
   return (
     <header className="not-prose">
-      <CompendiumTitle>{primaryLabel}</CompendiumTitle>
-      <p className="my-0 font-serif font-medium italic text-black/50 dark:text-stone-400">
-        {secondaryLabel}
-      </p>
+      <div className="flex flex-row justify-between">
+      <div>
+        <CompendiumTitle>{primaryLabel}</CompendiumTitle>
+        <p className="my-0 font-serif font-medium italic text-black/50 dark:text-stone-400">
+          {secondaryLabel}
+        </p>
+      </div>
+      {versions && (
+        <RadioGroup value={getVersion()} onChange={(value)=>bookStore.setDocumentVV(primaryLabel,"version",value)}
+        as="div" className="max-w-[80%]"
+        >
+        <div className="flex-row justify-end">
+          {hasMultipleOptions() &&  versions.map((version) => {
+            if(version.source && !isSourceEnabled(bookStore, version.source))
+            {
+              return null;
+            }
+            return (
+              <RadioGroup.Option key={version.name} value={version.name} 
+                as="div" className="inline-block">
+                {({active, checked}) => (
+                  <div className={(checked? 
+                    'bg-amber-500 text-black border-amber-500':
+                    'bg-white/5 border-black hover:border-amber-500')+ 
+                    ' py-0.5 px-2 border-2 border-solid'}>
+                    {version.name}
+                  </div>
+                )}
+              </RadioGroup.Option>
+            )}
+          )}
+        </div>
+        </RadioGroup>
+      )}
+      </div>
     </header>
   );
 }

components/compendium-side-nav.tsx

@@ -11,12 +11,14 @@ function NavLink({
   href,
   active = false,
   children,
+  isOriginRendered
 }: {
   href: string;
   active?: boolean;
   children: ReactNode;
+  isOriginRendered: boolean;
 }) {
-  return (
+  return isOriginRendered && (
     <a
       href={href}
       aria-current={active ? "page" : undefined}
@@ -72,7 +74,7 @@ function VisibleSectionHighlight() {
 function NavigationGroup({ section }: any) {
   return (
     <li>
-      <NavLink href={`#${section.id}`}>{section.title}</NavLink>
+      <NavLink href={`#${section.id}`} isOriginRendered={section.rendered}>{section.title}</NavLink>
     </li>
   );
 }

components/content-layer-page.tsx

@@ -10,6 +10,7 @@ import { SectionProvider } from "./section-provider";
 import CompendiumSideNav from "./compendium-side-nav";
 import ContentLink from "./content-link";
 import { defaultLocale } from "@/lib/locales";
+import { useBookStore, isSourceEnabled, isVVEnabled } from "@/lib/books";
 
 interface ContentLayerRendererP {
   data: any;
@@ -34,7 +35,11 @@ export default function ContentLayerPage({
   const quote = get(pageDress, "quote");
   const title = `${primaryLabel} - 13 Vaults`;
   const sections = get(data, "sections", []);
+  const bookstore = useBookStore();
   const lead = get(pageDress, "lead");
+  const If = (props) => (props.source && isSourceEnabled(bookstore, props.source)) ||
+                        (props.version && isVVEnabled(bookstore,"version", props.version))  ?
+                          props.children : null
   return (
     <>
       <Head>
@@ -88,6 +93,8 @@ export default function ContentLayerPage({
           <VaultHeader
             primaryLabel={primaryLabel}
             secondaryLabel={secondaryLabel}
+            versions={data.versions}
+            variants={data.variants}
           />
           {quote ? (
             <figure>
@@ -113,13 +120,23 @@ export default function ContentLayerPage({
             getAbilitiesByType={(type: string) =>
               filter(get(data, "abilities"), ["_type", type])
             }
+            getAbilitiesByTypeAndTier={(type: string, tier: string) =>
+              filter(get(data, "abilities"), {
+                "_type": type, "tier": tier })
+            }
             getAbilitiesByTypes={(types: string[]) =>
               filter(get(data, "abilities"), (ability) =>
                 includes(types, get(ability, "_type"))
               )
             }
+            getAbilitiesByTypesAndTier={(types: string[], tier: string) =>
+              filter(get(data, "abilities"), (ability) =>
+                includes(types, get(ability, "_type")) && ability["tier"] == tier)
+            }
+            isSourceEnabled = {(name:string) => isSourceEnabled(bookstore,name)}
             components={{
               Vault: Vault,
+              If: If,
               h2: ({ id, children, ...rest }) => (
                 <Heading level={2} id={id!} headingProps={rest}>
                   {children}

components/heading.tsx

@@ -18,11 +18,13 @@ export default function Heading({
   const Component = `h${level}`;
   const reference = useRef<Element>(null);
   const registerHeading = useSectionStore((s: any) => s.registerHeading);
+  const unregisterHeading = useSectionStore((s: any) => s.unregisterHeading);
 
   useEffect(() => {
     if (level === 2) {
       registerHeading({ id, ref: reference, offsetRem: 10 });
     }
+    return (() => level === 2 ? unregisterHeading(id) : null)
   }, [id, level, registerHeading]);
 
   const { className, ...restHeadingProperties } = headingProps;

components/mega-nav.tsx

@@ -22,6 +22,7 @@ import {
   useReducedMotion,
 } from "framer-motion";
 import Button from "./button";
+import { BookSelector } from "./book-selector";
 import { ThemeSelector } from "./theme-selector";
 
 interface MobileSubnavP {
@@ -364,6 +365,9 @@ export default function MegaNav({ navigation }: { navigation: Navigation }) {
                       )}
                     </div>
                     <div className="flex gap-4 items-center">
+                      <div className="hidden lg:block relative">
+                        <BookSelector />
+                      </div>
                       <div className="hidden lg:block relative">
                         <ThemeSelector />
                       </div>
@@ -391,7 +395,8 @@ export default function MegaNav({ navigation }: { navigation: Navigation }) {
                   </Link>
                 </div>
 
-                <div className="lg:hidden relative">
+                <div className="lg:hidden relative flex space-x-2">
+                  <BookSelector />
                   <ThemeSelector />
                 </div>
               </div>

components/section-provider.tsx

@@ -43,12 +43,22 @@ function createSectionStore(sections: Section[]) {
                 ...section,
                 headingRef: ref,
                 offsetRem,
+                rendered:true
               };
             }
             return section;
           }),
         };
       }),
+    unregisterHeading: (id:string) =>
+      set((state) => {
+        return {
+          sections: state.sections.map((section) => section.id == id ? {
+                ...section,
+                rendered: false
+          } : section)  
+        };
+      }),
   }));
 }