Merge pull request #82 from AOEpeople/separateNonFeaturedArticlesOnQuadrantView

Separate non featured articles on quadrant view

.env

@@ -1,2 +1,2 @@
 REACT_APP_RADAR_NAME=AOE Technology Radar
-PUBLIC_URL=/techradar
+PUBLIC_URL=/techradar

.lintstagedrc.json

@@ -1,3 +1,3 @@
 {
-  "*.{json, md, yml, js, ts, tsx}": ["prettier --write"]
+  "*.{json, md, yml, js, ts, tsx, scss}": ["prettier --write"]
 }

README.md

@@ -135,8 +135,10 @@ You can integrate images in your markdown. Put the image files in your public fo
 ```
 
 ## Development
+
 For local development you need a `rd.json` in the public folder. You can use `rd_example.json`.
 Then simply start the dev server
+
 ```
 yarn start
 ```

dist_scripts/src/model.js

@@ -16,11 +16,15 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
     return to;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFirstLetter = exports.groupByFirstLetter = exports.groupByQuadrants = exports.featuredOnly = void 0;
+exports.getFirstLetter = exports.groupByFirstLetter = exports.groupByQuadrants = exports.nonFeaturedOnly = exports.featuredOnly = void 0;
 var featuredOnly = function (items) {
     return items.filter(function (item) { return item.featured; });
 };
 exports.featuredOnly = featuredOnly;
+var nonFeaturedOnly = function (items) {
+    return items.filter(function (item) { return !item.featured; });
+};
+exports.nonFeaturedOnly = nonFeaturedOnly;
 var groupByQuadrants = function (items) {
     return items.reduce(function (quadrants, item) {
         var _a;

src/animation.ts

@@ -1,5 +1,9 @@
 import React from "react";
 
+export interface AnimationConfig {
+  [k: string]: Animation | Animation[];
+}
+
 export type Animations = {
   [k: string]: Animation[];
 };
@@ -8,7 +12,7 @@ export type AnimationStates = {
   [k: string]: React.CSSProperties[];
 };
 
-type Animation = {
+export type Animation = {
   stateA: React.CSSProperties;
   stateB: React.CSSProperties;
   delay: number;
@@ -75,7 +79,7 @@ const getMaxAnimationsDuration = (animations: Animations) =>
   );
 
 export const createAnimationRunner = (
-  animationsIn: { [k: string]: Animation | Animation[] },
+  animationsIn: AnimationConfig,
   subscriber: () => void = () => {}
 ): AnimationRunner => {
   const animations = Object.entries(animationsIn).reduce(

src/components/Flag/flag.scss

@@ -7,6 +7,7 @@
   vertical-align: top;
   margin-top: -2px;
   left: 5px;
+  color: var(--color-white);
 
   &--new {
     background: var(--color-red);

src/components/HeadlineGroup/HeadlineGroup.tsx

@@ -1,17 +1,19 @@
 import React from "react";
 import classNames from "classnames";
 import "./headline-group.scss";
-export default function ({
-  children,
-  secondary = false,
-}: React.PropsWithChildren<{ secondary?: boolean }>) {
-  return (
-    <div
-      className={classNames("headline-group", {
-        "headline-group--secondary": secondary,
-      })}
-    >
-      {children}
-    </div>
-  );
+
+interface Props {
+  secondary?: boolean;
 }
+
+const HeadlineGroup: React.FC<Props> = ({ children, secondary = false }) => (
+  <div
+    className={classNames("headline-group", {
+      "headline-group--secondary": secondary,
+    })}
+  >
+    {children}
+  </div>
+);
+
+export default HeadlineGroup;

src/components/HeroHeadline/HeroHeadline.tsx

@@ -1,13 +1,15 @@
 import React from "react";
 import "./hero-headline.scss";
-export default function ({
-  children,
-  alt,
-}: React.PropsWithChildren<{ alt?: string }>) {
-  return (
-    <div className="hero-headline">
-      {children}
-      <span className="hero-headline__alt">{alt}</span>
-    </div>
-  );
+
+interface Props {
+  alt?: string;
 }
+
+const HeroHeadline: React.FC<Props> = ({ children, alt }) => (
+  <div className="hero-headline">
+    {children}
+    <span className="hero-headline__alt">{alt}</span>
+  </div>
+);
+
+export default HeroHeadline;

src/components/Item/Item.tsx

@@ -4,33 +4,40 @@ import Link from "../Link/Link";
 import Flag from "../Flag/Flag";
 import { Item as mItem } from "../../model";
 import "./item.scss";
-type ItemProps = {
+
+type Props = {
   item: mItem;
   noLeadingBorder?: boolean;
   active?: boolean;
   style: React.CSSProperties;
+  greyedOut?: boolean;
 };
 
-export default function Item({
+const Item: React.FC<Props> = ({
   item,
   noLeadingBorder = false,
   active = false,
   style = {},
-}: ItemProps) {
-  return (
-    <Link
-      className={classNames("item", {
-        "item--no-leading-border": noLeadingBorder,
-        "is-active": active,
+  greyedOut = false,
+}) => (
+  <Link
+    className={classNames("item", {
+      "item--no-leading-border": noLeadingBorder,
+      "is-active": active,
+    })}
+    pageName={`${item.quadrant}/${item.name}`}
+    style={style}
+  >
+    <div
+      className={classNames("item__title", {
+        "greyed-out": greyedOut,
       })}
-      pageName={`${item.quadrant}/${item.name}`}
-      style={style}
     >
-      <div className="item__title">
-        {item.title}
-        <Flag item={item} />
-      </div>
-      {item.info && <div className="item__info">{item.info}</div>}
-    </Link>
-  );
-}
+      {item.title}
+      <Flag item={item} />
+    </div>
+    {item.info && <div className="item__info">{item.info}</div>}
+  </Link>
+);
+
+export default Item;

src/components/Item/item.scss

@@ -39,6 +39,10 @@
   &__title {
     font-size: 16px;
     color: var(--color-white);
+
+    &.greyed-out {
+      color: var(--color-gray-light-alt);
+    }
   }
 
   &__info {

src/components/ItemList/ItemList.tsx

@@ -1,7 +1,12 @@
 import React from "react";
 import Item from "../Item/Item";
-import { Item as mItem } from "../../model";
+import {
+  featuredOnly,
+  nonFeaturedOnly,
+  Item as mItem,
+} from "../../model";
 import "./item-list.scss";
+
 type ItemListProps = {
   items: mItem[];
   activeItem?: mItem;
@@ -10,34 +15,45 @@ type ItemListProps = {
   itemStyle?: React.CSSProperties[];
 };
 
-export default function ItemList({
+const ItemList: React.FC<ItemListProps> = ({
   children,
   items,
   activeItem,
   noLeadingBorder,
   headerStyle = {},
   itemStyle = [],
-}: React.PropsWithChildren<ItemListProps>) {
+}) => {
+  const featuredItems = featuredOnly(items);
+  const nonFeaturedItems = nonFeaturedOnly(items);
+  
   return (
-    <div className="item-list">
-      <div className="item-list__header" style={headerStyle}>
-        {children}
-      </div>
-      <div className="item-list__list">
-        {items.map((item, i) => (
-          <Item
-            key={item.name}
-            item={item}
-            noLeadingBorder={noLeadingBorder}
-            active={
-              activeItem !== null &&
-              activeItem !== undefined &&
-              activeItem.name === item.name
-            }
-            style={itemStyle[i]}
-          />
-        ))}
-      </div>
+  <div className="item-list">
+    <div className="item-list__header" style={headerStyle}>
+      {children}
     </div>
-  );
-}
+    <div className="item-list__list">
+      {featuredItems.map((item, i) => (
+        <Item
+          key={item.name}
+          item={item}
+          noLeadingBorder={noLeadingBorder}
+          active={activeItem?.name === item.name}
+          style={itemStyle[i]}
+          greyedOut={false}
+        />
+      ))}
+      {nonFeaturedItems.map((item, i) => (
+        <Item
+          key={item.name}
+          item={item}
+          noLeadingBorder={noLeadingBorder}
+          active={activeItem?.name === item.name}
+          style={itemStyle[featuredItems.length + i]}
+          greyedOut={true}
+        />
+      ))}
+    </div>
+  </div>
+);}
+
+export default ItemList;

src/components/PageItem/PageItem.tsx

@@ -1,18 +1,17 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import Badge from "../Badge/Badge";
 import ItemList from "../ItemList/ItemList";
 import Link from "../Link/Link";
 import FooterEnd from "../FooterEnd/FooterEnd";
 import SetTitle from "../SetTitle";
 import ItemRevisions from "../ItemRevisions/ItemRevisions";
-import {
-  AnimationStates,
-  createAnimation,
-  createAnimationRunner,
-} from "../../animation";
+import { useAnimations } from "./useAnimations";
 import "./item-page.scss";
 import { translate } from "../../config";
-import { groupByQuadrants, Item } from "../../model";
+import {
+  groupByQuadrants,
+  Item,
+} from "../../model";
 
 const getItem = (pageName: string, items: Item[]) => {
   const [quadrantName, itemName] = pageName.split("/");
@@ -26,175 +25,26 @@ const getItemsInRing = (pageName: string, items: Item[]) => {
   return groupByQuadrants(items)[item.quadrant][item.ring];
 };
 
-type PageItemProps = {
+type Props = {
   pageName: string;
   items: Item[];
   leaving: boolean;
   onLeave: () => void;
 };
 
-export default function PageItem({
-  pageName,
-  items,
-  leaving,
-  onLeave,
-}: PageItemProps) {
+const PageItem: React.FC<Props> = ({ pageName, items, leaving, onLeave }) => {
   const itemsInRing = getItemsInRing(pageName, items);
 
-  const animationsIn = {
-    background: createAnimation(
-      {
-        transform: "translateX(calc((100vw - 1200px) / 2 + 800px))",
-        transition: "transform 450ms cubic-bezier(0.24, 1.12, 0.71, 0.98)",
-      },
-      {
-        transition: "transform 450ms cubic-bezier(0.24, 1.12, 0.71, 0.98)",
-        transform: "translateX(0)",
-      },
-      0
-    ),
-    navHeader: createAnimation(
-      {
-        transform: "translateX(-40px)",
-        opacity: "0",
-      },
-      {
-        transition: "opacity 150ms ease-out, transform 300ms ease-out",
-        transform: "translateX(0px)",
-        opacity: "1",
-      },
-      300
-    ),
-    text: createAnimation(
-      {
-        transform: "translateY(-20px)",
-        opacity: "0",
-      },
-      {
-        transition: "opacity 150ms ease-out, transform 300ms ease-out",
-        transform: "translateY(0px)",
-        opacity: "1",
-      },
-      600
-    ),
-    items: itemsInRing.map((item, i) =>
-      createAnimation(
-        {
-          transform: "translateX(-40px)",
-          opacity: "0",
-        },
-        {
-          transition: "opacity 150ms ease-out, transform 300ms ease-out",
-          transform: "translateX(0px)",
-          opacity: "1",
-        },
-        400 + 100 * i
-      )
-    ),
-    footer: createAnimation(
-      {
-        transition: "opacity 150ms ease-out, transform 300ms ease-out",
-        transform: "translateX(-40px)",
-        opacity: "0",
-      },
-      {
-        transition: "opacity 150ms ease-out, transform 300ms ease-out",
-        transform: "translateX(0px)",
-        opacity: "1",
-      },
-      600 + itemsInRing.length * 100
-    ),
-  };
-
-  const animationsOut = {
-    background: createAnimation(
-      animationsIn.background.stateB,
-      animationsIn.background.stateA,
-      300 + itemsInRing.length * 50
-    ),
-    navHeader: createAnimation(
-      animationsIn.navHeader.stateB,
-      {
-        transition: "opacity 150ms ease-out, transform 300ms ease-out",
-        transform: "translateX(40px)",
-        opacity: "0",
-      },
-      0
-    ),
-    text: createAnimation(
-      animationsIn.text.stateB,
-      {
-        transform: "translateY(20px)",
-        transition: "opacity 150ms ease-out, transform 300ms ease-out",
-        opacity: "0",
-      },
-      0
-    ),
-    items: itemsInRing.map((item, i) =>
-      createAnimation(
-        animationsIn.items[i].stateB,
-        {
-          transition: "opacity 150ms ease-out, transform 300ms ease-out",
-          transform: "translateX(40px)",
-          opacity: "0",
-        },
-        100 + 50 * i
-      )
-    ),
-    footer: createAnimation(
-      animationsIn.text.stateB,
-      {
-        transition: "opacity 150ms ease-out, transform 300ms ease-out",
-        transform: "translateX(40px)",
-        opacity: "0",
-      },
-      200 + itemsInRing.length * 50
-    ),
-  };
-
-  const [animations, setAnimations] = useState<AnimationStates>(() => {
-    return leaving ? createAnimationRunner(animationsIn).getState() : {};
+  const { getAnimationState, getAnimationStates } = useAnimations({
+    itemsInRing,
+    onLeave,
+    leaving,
   });
 
-  const [stateLeaving, setStateLeaving] = useState(leaving);
-
-  useEffect(() => {
-    if (!stateLeaving && leaving) {
-      let animationRunner = createAnimationRunner(animationsOut, () =>
-        setAnimations(animationRunner.getState)
-      );
-      animationRunner.run();
-      animationRunner.awaitAnimationComplete(onLeave);
-      setStateLeaving(true);
-    }
-    if (stateLeaving && !leaving) {
-      let animationRunner = createAnimationRunner(animationsIn, () =>
-        setAnimations(animationRunner.getState)
-      );
-      animationRunner.run();
-      setStateLeaving(false);
-    }
-  }, [stateLeaving, leaving, animationsIn, animationsOut, onLeave]);
-
-  const getAnimationStates = (name: string) => {
-    if (!animations) {
-      return undefined;
-    }
-    return animations[name];
-  };
-
-  const getAnimationState = (name: string) => {
-    const animations = getAnimationStates(name);
-    if (animations === undefined || animations.length === 0) {
-      return undefined;
-    }
-    return animations[0];
-  };
-
   const item = getItem(pageName, items);
 
   return (
-    <div>
+    <>
       <SetTitle title={item.title} />
       <div className="item-page">
         <div className="item-page__nav">
@@ -205,7 +55,6 @@ export default function PageItem({
             >
               <h3 className="headline">{translate(item.quadrant)}</h3>
             </div>
-
             <ItemList
               items={itemsInRing}
               activeItem={item}
@@ -226,6 +75,7 @@ export default function PageItem({
                 </div>
               </div>
             </ItemList>
+
             <div
               className="item-page__footer"
               style={getAnimationState("footer")}
@@ -266,6 +116,8 @@ export default function PageItem({
           </div>
         </div>
       </div>
-    </div>
+    </>
   );
-}
+};
+
+export default PageItem;

src/components/PageItem/useAnimations.tsx

@@ -0,0 +1,186 @@
+import { useEffect, useState, useMemo } from "react";
+import {
+  Animation,
+  AnimationStates,
+  createAnimation,
+  createAnimationRunner,
+} from "../../animation";
+import { Item } from "../../model";
+
+interface Props {
+  itemsInRing: Item[];
+  leaving: boolean;
+  onLeave: () => void;
+}
+
+export const useAnimations = ({
+  itemsInRing,
+  leaving,
+  onLeave,
+}: Props) => {
+  type AnimationConfig = {
+    background: Animation;
+    navHeader: Animation;
+    text: Animation;
+    items: Animation[];
+    footer: Animation;
+  }
+
+  type AnimationNames = keyof AnimationConfig;
+
+  const animationsIn: AnimationConfig = useMemo(
+    () => ({
+      background: createAnimation(
+        {
+          transform: "translateX(calc((100vw - 1200px) / 2 + 800px))",
+          transition: "transform 450ms cubic-bezier(0.24, 1.12, 0.71, 0.98)",
+        },
+        {
+          transition: "transform 450ms cubic-bezier(0.24, 1.12, 0.71, 0.98)",
+          transform: "translateX(0)",
+        },
+        0
+      ),
+      navHeader: createAnimation(
+        {
+          transform: "translateX(-40px)",
+          opacity: "0",
+        },
+        {
+          transition: "opacity 150ms ease-out, transform 300ms ease-out",
+          transform: "translateX(0px)",
+          opacity: "1",
+        },
+        300
+      ),
+      text: createAnimation(
+        {
+          transform: "translateY(-20px)",
+          opacity: "0",
+        },
+        {
+          transition: "opacity 150ms ease-out, transform 300ms ease-out",
+          transform: "translateY(0px)",
+          opacity: "1",
+        },
+        600
+      ),
+      items: itemsInRing.map((item, i) =>
+        createAnimation(
+          {
+            transform: "translateX(-40px)",
+            opacity: "0",
+          },
+          {
+            transition: "opacity 150ms ease-out, transform 300ms ease-out",
+            transform: "translateX(0px)",
+            opacity: "1",
+          },
+          400 + 100 * i
+        )
+      ),
+      footer: createAnimation(
+        {
+          transition: "opacity 150ms ease-out, transform 300ms ease-out",
+          transform: "translateX(-40px)",
+          opacity: "0",
+        },
+        {
+          transition: "opacity 150ms ease-out, transform 300ms ease-out",
+          transform: "translateX(0px)",
+          opacity: "1",
+        },
+        600 + itemsInRing.length * 100
+      ),
+    }),
+    [itemsInRing]
+  );
+
+  const animationsOut: AnimationConfig = useMemo(
+    () => ({
+      background: createAnimation(
+        animationsIn.background.stateB,
+        animationsIn.background.stateA,
+        300 + itemsInRing.length * 50
+      ),
+      navHeader: createAnimation(
+        animationsIn.navHeader.stateB,
+        {
+          transition: "opacity 150ms ease-out, transform 300ms ease-out",
+          transform: "translateX(40px)",
+          opacity: "0",
+        },
+        0
+      ),
+      text: createAnimation(
+        animationsIn.text.stateB,
+        {
+          transform: "translateY(20px)",
+          transition: "opacity 150ms ease-out, transform 300ms ease-out",
+          opacity: "0",
+        },
+        0
+      ),
+      items: itemsInRing.map((item, i) =>
+        createAnimation(
+          animationsIn.items[i].stateB,
+          {
+            transition: "opacity 150ms ease-out, transform 300ms ease-out",
+            transform: "translateX(40px)",
+            opacity: "0",
+          },
+          100 + 50 * i
+        )
+      ),
+      footer: createAnimation(
+        animationsIn.text.stateB,
+        {
+          transition: "opacity 150ms ease-out, transform 300ms ease-out",
+          transform: "translateX(40px)",
+          opacity: "0",
+        },
+        200 + itemsInRing.length * 50
+      ),
+    }),
+    [itemsInRing, animationsIn]
+  );
+
+  const [animations, setAnimations] = useState<AnimationStates>(() => {
+    return leaving ? createAnimationRunner(animationsIn).getState() : {};
+  });
+
+  const [stateLeaving, setStateLeaving] = useState(leaving);
+
+  useEffect(() => {
+    if (!stateLeaving && leaving) {
+      let animationRunner = createAnimationRunner(animationsOut, () =>
+        setAnimations(animationRunner.getState)
+      );
+      animationRunner.run();
+      animationRunner.awaitAnimationComplete(onLeave);
+      setStateLeaving(true);
+    }
+    if (stateLeaving && !leaving) {
+      let animationRunner = createAnimationRunner(animationsIn, () =>
+        setAnimations(animationRunner.getState)
+      );
+      animationRunner.run();
+      setStateLeaving(false);
+    }
+  }, [stateLeaving, leaving, animationsIn, animationsOut, onLeave]);
+
+  const getAnimationStates = (name: AnimationNames) => animations[name];
+
+  const getAnimationState = (name: AnimationNames) => {
+    const animations = getAnimationStates(name);
+    if (animations === undefined || animations.length === 0) {
+      return undefined;
+    }
+    return animations[0];
+  };
+
+  return {
+    getAnimationStates,
+    getAnimationState,
+  };
+};

src/index.scss

@@ -16,6 +16,7 @@
   --color-gray-dark-alt2: #434d53;
   --color-gray-normal: #7f858a;
   --color-gray-light: #7d878d;
+  --color-gray-light-alt: #adadad;
 
   --color-white: #fff;
   --color-green: #5cb449;

src/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

src/model.js

@@ -1,85 +0,0 @@
-var __assign =
-  (this && this.__assign) ||
-  function () {
-    __assign =
-      Object.assign ||
-      function (t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-          s = arguments[i];
-          for (var p in s)
-            if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-      };
-    return __assign.apply(this, arguments);
-  };
-var __spreadArray =
-  (this && this.__spreadArray) ||
-  function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-      to[j] = from[i];
-    return to;
-  };
-export var featuredOnly = function (items) {
-  return items.filter(function (item) {
-    return item.featured;
-  });
-};
-export var groupByQuadrants = function (items) {
-  return items.reduce(function (quadrants, item) {
-    var _a;
-    return __assign(
-      __assign({}, quadrants),
-      ((_a = {}),
-      (_a[item.quadrant] = addItemToQuadrant(quadrants[item.quadrant], item)),
-      _a)
-    );
-  }, {});
-};
-export var groupByFirstLetter = function (items) {
-  var index = items.reduce(function (letterIndex, item) {
-    var _a;
-    return __assign(
-      __assign({}, letterIndex),
-      ((_a = {}),
-      (_a[getFirstLetter(item)] = addItemToList(
-        letterIndex[getFirstLetter(item)],
-        item
-      )),
-      _a)
-    );
-  }, {});
-  return Object.keys(index)
-    .sort()
-    .map(function (letter) {
-      return {
-        letter: letter,
-        items: index[letter],
-      };
-    });
-};
-var addItemToQuadrant = function (quadrant, item) {
-  var _a;
-  if (quadrant === void 0) {
-    quadrant = {};
-  }
-  return __assign(
-    __assign({}, quadrant),
-    ((_a = {}), (_a[item.ring] = addItemToRing(quadrant[item.ring], item)), _a)
-  );
-};
-var addItemToList = function (list, item) {
-  if (list === void 0) {
-    list = [];
-  }
-  return __spreadArray(__spreadArray([], list), [item]);
-};
-var addItemToRing = function (ring, item) {
-  if (ring === void 0) {
-    ring = [];
-  }
-  return __spreadArray(__spreadArray([], ring), [item]);
-};
-export var getFirstLetter = function (item) {
-  return item.title.substr(0, 1).toUpperCase();
-};

src/model.ts

@@ -39,6 +39,8 @@ export type Group = {
 
 export const featuredOnly = (items: Item[]) =>
   items.filter((item) => item.featured);
+export const nonFeaturedOnly = (items: Item[]) =>
+  items.filter((item) => !item.featured);
 
 export const groupByQuadrants = (items: Item[]): Group =>
   items.reduce(

src/styles/components/headline.scss

@@ -1,3 +1,7 @@
+h4.headline {
+  font-size: 18px;
+}
+
 .headline {
   margin: 0;
   padding: 0;