AJR/TechRadarAJR
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

separate non featured articles on quadrant view

Browse Source
This commit is contained in:
dennis.ludwig
2021-06-16 11:53:05 +02:00
parent 61d7fa38f2
commit eff1bcbc2b
14 changed files with 581 additions and 441 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
dist_scripts/src/model.js
View File

@@ -16,15 +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.unfeaturedOnly = 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 unfeaturedOnly = function (items) {
var nonFeaturedOnly = function (items) {
return items.filter(function (item) { return !item.featured; });
};
exports.unfeaturedOnly = unfeaturedOnly;
exports.nonFeaturedOnly = nonFeaturedOnly;
var groupByQuadrants = function (items) {
return items.reduce(function (quadrants, item) {
var _a;

97
src/animation.ts
View File

@@ -1,35 +1,46 @@
import React from 'react';
import React from "react";
export interface AnimationConfig {
[k: string]: Animation | Animation[];
}
export type Animations = {
[k: string]: Animation[]
}
[k: string]: Animation[];
};
export type AnimationStates = {
[k: string]: React.CSSProperties[]
}
[k: string]: React.CSSProperties[];
};
type Animation = {
stateA: React.CSSProperties
stateB: React.CSSProperties
delay: number
run?(callback: (state: any) => any): any // todo fix
prepare?(callback: (state: any) => any): any // todo fix
}
export type Animation = {
stateA: React.CSSProperties;
stateB: React.CSSProperties;
delay: number;
run?(callback: (state: any) => any): any; // todo fix
prepare?(callback: (state: any) => any): any; // todo fix
};
export type AnimationRunner = {
getState(): AnimationStates
run(): any
awaitAnimationComplete(callback: () => void): any
}
getState(): AnimationStates;
run(): any;
awaitAnimationComplete(callback: () => void): any;
};
export const createAnimation = (stateA: React.CSSProperties, stateB: React.CSSProperties, delay: number): Animation => ({
export const createAnimation = (
stateA: React.CSSProperties,
stateB: React.CSSProperties,
delay: number
): Animation => ({
stateA,
stateB,
delay,
});
const getAnimationStates = (animations: Animation[], stateName: 'stateA' | 'stateB' = 'stateA'): React.CSSProperties[] => {
return animations.map(animation => animation[stateName]);
const getAnimationStates = (
animations: Animation[],
stateName: "stateA" | "stateB" = "stateA"
): React.CSSProperties[] => {
return animations.map((animation) => animation[stateName]);
};
const getMaxTransitionTime = (transition: string) => {
@@ -54,25 +65,39 @@ const getAnimationDuration = (animation: Animation | Animation[]): number => {
}
const state = animation.stateB;
const maxTransition = state.transition ? getMaxTransitionTime(state.transition) : 0;
const maxTransition = state.transition
? getMaxTransitionTime(state.transition)
: 0;
return maxTransition + animation.delay;
};
const getMaxAnimationsDuration = (animations: Animations) => (
Math.max(...Object.values(animations).map(animations => getAnimationDuration(Object.values(animations))))
);
const getMaxAnimationsDuration = (animations: Animations) =>
Math.max(
...Object.values(animations).map((animations) =>
getAnimationDuration(Object.values(animations))
)
);
export const createAnimationRunner = (animationsIn: { [k: string]: (Animation | Animation[]) }, subscriber: () => void = () => {
}): AnimationRunner => {
const animations = Object.entries(animationsIn).reduce((state, [name, animation]) => ({
export const createAnimationRunner = (
animationsIn: AnimationConfig,
subscriber: () => void = () => {}
): AnimationRunner => {
const animations = Object.entries(animationsIn).reduce(
(state, [name, animation]) => ({
...state,
[name]: animation instanceof Array ? animation : [animation] as Animation[],
}), {} as Animations);
[name]:
animation instanceof Array ? animation : ([animation] as Animation[]),
}),
{} as Animations
);
let state = Object.entries(animations).reduce((state, [name, animation]) => ({
let state = Object.entries(animations).reduce(
(state, [name, animation]) => ({
...state,
[name]: getAnimationStates(animation),
}), {} as AnimationStates);
}),
{} as AnimationStates
);
const animationsDuration = getMaxAnimationsDuration(animations);
@@ -83,16 +108,16 @@ export const createAnimationRunner = (animationsIn: { [k: string]: (Animation |
state = {
...state,
[name]: [
...(state[name]?.slice(0, index)),
...state[name]?.slice(0, index),
a.stateB,
...(state[name]?.slice(index + 1, state[name].length)),
...state[name]?.slice(index + 1, state[name].length),
],
};
subscriber();
}, a.delay);
});
});
}
};
return {
getState() {
@@ -100,11 +125,11 @@ export const createAnimationRunner = (animationsIn: { [k: string]: (Animation |
},
run() {
Object.entries(animations).forEach(([name, animation]) => {
animate(name, animation)
animate(name, animation);
});
},
awaitAnimationComplete(callback) {
window.setTimeout(callback, animationsDuration);
},
}
}
};
};

44
src/components/Item/Item.tsx
View File

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

4
src/components/Item/item.scss
View File

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

35
src/components/ItemList/ItemList.tsx
View File

@@ -1,32 +1,43 @@
import React from 'react';
import Item from '../Item/Item';
import { Item as mItem } from '../../model';
import './item-list.scss';
import React from "react";
import Item from "../Item/Item";
import { Item as mItem } from "../../model";
import "./item-list.scss";
type ItemListProps = {
items: mItem[];
activeItem?: mItem;
noLeadingBorder?: boolean;
headerStyle?: React.CSSProperties;
itemStyle?: React.CSSProperties[];
greyedOut?: boolean;
};
export default function ItemList({ children, items, activeItem, noLeadingBorder, headerStyle = {}, itemStyle = [] }: React.PropsWithChildren<ItemListProps>) {
return (
<div className='item-list'>
<div className='item-list__header' style={headerStyle}>
const ItemList: React.FC<ItemListProps> = ({
children,
items,
activeItem,
noLeadingBorder,
headerStyle = {},
itemStyle = [],
greyedOut = false,
}) => (
<div className="item-list">
<div className="item-list__header" style={headerStyle}>
{children}
</div>
<div className='item-list__list'>
<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}
active={activeItem?.name === item.name}
style={itemStyle[i]}
greyedOut={greyedOut}
/>
))}
</div>
</div>
);
}
);
export default ItemList;

292
src/components/PageItem/PageItem.tsx
View File

@@ -1,22 +1,25 @@
import React, {useEffect, useState} 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 React, { useEffect, useState, useMemo } 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 { useAnimations } from "./useAnimations";
import "./item-page.scss";
import { translate } from "../../config";
import {
AnimationStates,
createAnimation,
createAnimationRunner
} from '../../animation';
import './item-page.scss';
import {translate} from '../../config';
import {groupByQuadrants, Item} from '../../model';
featuredOnly,
nonFeaturedOnly,
groupByQuadrants,
Item,
} from "../../model";
const getItem = (pageName: string, items: Item[]) => {
const [quadrantName, itemName] = pageName.split('/');
return items.filter((item) => item.quadrant === quadrantName && item.name === itemName)[0];
const [quadrantName, itemName] = pageName.split("/");
return items.filter(
(item) => item.quadrant === quadrantName && item.name === itemName
)[0];
};
const getItemsInRing = (pageName: string, items: Item[]) => {
@@ -24,216 +27,121 @@ 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 featuredItemsInRing = featuredOnly(itemsInRing);
const nonFeaturedItemsInRing = nonFeaturedOnly(itemsInRing);
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,
featuredItemsInRing,
nonFeaturedItemsInRing,
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'>
<div className='item-page__nav__inner'>
<div className='item-page__header' style={getAnimationState('navHeader')}>
<h3 className='headline'>{translate(item.quadrant)}</h3>
<>
<SetTitle title={item.title} />
<div className="item-page">
<div className="item-page__nav">
<div className="item-page__nav__inner">
<div
className="item-page__header"
style={getAnimationState("navHeader")}
>
<h3 className="headline">{translate(item.quadrant)}</h3>
</div>
<ItemList items={itemsInRing} activeItem={item} headerStyle={getAnimationState('navHeader')}
itemStyle={getAnimationStates('items')}>
<div className='split'>
<div className='split__left'>
<ItemList
items={featuredItemsInRing}
activeItem={item}
headerStyle={getAnimationState("navHeader")}
itemStyle={getAnimationStates("featuredItems")}
>
<div className="split">
<div className="split__left">
<Badge big type={item.ring}>
{item.ring}
</Badge>
</div>
<div className='split__right'>
<Link className='icon-link' pageName={item.quadrant}>
<span className='icon icon--pie icon-link__icon'/>
<div className="split__right">
<Link className="icon-link" pageName={item.quadrant}>
<span className="icon icon--pie icon-link__icon" />
Quadrant Overview
</Link>
</div>
</div>
</ItemList>
<div className='item-page__footer' style={getAnimationState('footer')}>
<FooterEnd modifier='in-sidebar'/>
{nonFeaturedItemsInRing.length > 0 && (
<div className="item-page__non-featured-items">
<ItemList
items={nonFeaturedItemsInRing}
activeItem={item}
headerStyle={getAnimationState("nonFeaturedItems")}
itemStyle={getAnimationStates("nonFeaturedItems")}
greyedOut={true}
>
<div className="split">
<div className="split__left">
<h4 className="headline">Not featured anymore</h4>
</div>
</div>
</ItemList>
</div>
)}
<div
className="item-page__footer"
style={getAnimationState("footer")}
>
<FooterEnd modifier="in-sidebar" />
</div>
</div>
</div>
<div className='item-page__content' style={getAnimationState('background')}>
<div className='item-page__content__inner' style={getAnimationState('text')}>
<div className='item-page__header'>
<div className='split'>
<div className='split__left'>
<h1 className='hero-headline hero-headline--inverse'>{item.title}</h1>
<div
className="item-page__content"
style={getAnimationState("background")}
>
<div
className="item-page__content__inner"
style={getAnimationState("text")}
>
<div className="item-page__header">
<div className="split">
<div className="split__left">
<h1 className="hero-headline hero-headline--inverse">
{item.title}
</h1>
</div>
<div className='split__right'>
<div className="split__right">
<Badge big type={item.ring}>
{item.ring}
</Badge>
</div>
</div>
</div>
<div className='markdown' dangerouslySetInnerHTML={{__html: item.body}}/>
{item.revisions.length > 1 && <ItemRevisions revisions={item.revisions.slice(1)}/>}
</div>
<div
className="markdown"
dangerouslySetInnerHTML={{ __html: item.body }}
/>
{item.revisions.length > 1 && (
<ItemRevisions revisions={item.revisions.slice(1)} />
)}
</div>
</div>
</div>
</>
);
}
};
export default PageItem;

4
src/components/PageItem/item-page.scss
View File

@@ -48,6 +48,10 @@
padding: 0 10px 0 100px;
}
}
&__non-featured-items {
margin-top: 45px;
}
}
.mobile-item-page {

217
src/components/PageItem/useAnimations.tsx Normal file
View File

@@ -0,0 +1,217 @@
import React, { useEffect, useState, useMemo } from "react";
import {
Animation,
AnimationConfig as AbstractAnimationConfig,
AnimationStates,
createAnimation,
createAnimationRunner,
} from "../../animation";
import { Item } from "../../model";
interface Props {
itemsInRing: Item[];
featuredItemsInRing: Item[];
nonFeaturedItemsInRing: Item[];
leaving: boolean;
onLeave: () => void;
}
export const useAnimations = ({
itemsInRing,
featuredItemsInRing,
nonFeaturedItemsInRing,
leaving,
onLeave,
}: Props) => {
interface AnimationConfig extends AbstractAnimationConfig {
background: Animation;
navHeader: Animation;
text: Animation;
featuredItems: Animation[];
nonFeaturedItems: 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
),
featuredItems: featuredItemsInRing.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
)
),
nonFeaturedItems: nonFeaturedItemsInRing.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 * (featuredItemsInRing.length + 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, featuredItemsInRing, nonFeaturedItemsInRing]
);
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
),
featuredItems: featuredItemsInRing.map((item, i) =>
createAnimation(
animationsIn.featuredItems[i].stateB,
{
transition: "opacity 150ms ease-out, transform 300ms ease-out",
transform: "translateX(40px)",
opacity: "0",
},
100 + 50 * i
)
),
nonFeaturedItems: nonFeaturedItemsInRing.map((item, i) =>
createAnimation(
animationsIn.nonFeaturedItems[i].stateB,
{
transition: "opacity 150ms ease-out, transform 300ms ease-out",
transform: "translateX(40px)",
opacity: "0",
},
100 + 50 * (featuredItemsInRing.length + 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, featuredItemsInRing, nonFeaturedItemsInRing, 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,
};
};

1
src/index.scss
View File

@@ -17,6 +17,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;

1
src/logo.svg
View File

@@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB

49
src/model.js
View File

@@ -1,49 +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(); };

66
src/model.ts
View File

@@ -1,43 +1,46 @@
import { Ring } from "./config"
import { Ring } from "./config";
export type ItemAttributes = {
name: string
ring: Ring
quadrant: string
title: string
featured: boolean
}
name: string;
ring: Ring;
quadrant: string;
title: string;
featured: boolean;
};
export type FlagType = 'new' | 'changed' | 'default'
export type FlagType = "new" | "changed" | "default";
export type Item = ItemAttributes & {
featured: boolean
body: string
info: string
flag: FlagType
revisions: Revision[]
}
featured: boolean;
body: string;
info: string;
flag: FlagType;
revisions: Revision[];
};
export type Revision = ItemAttributes & {
body: string
fileName: string
release: string
}
body: string;
fileName: string;
release: string;
};
export type Quadrant = {
[name: string]: Item[]
}
[name: string]: Item[];
};
export type Radar = {
items: Item[]
releases: string[]
}
items: Item[];
releases: string[];
};
export type Group = {
[quadrant: string]: Quadrant
}
[quadrant: string]: Quadrant;
};
export const featuredOnly = (items: Item[]) => items.filter(item => item.featured);
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(
@@ -45,7 +48,7 @@ export const groupByQuadrants = (items: Item[]): Group =>
...quadrants,
[item.quadrant]: addItemToQuadrant(quadrants[item.quadrant], item),
}),
{} as {[k: string]: Quadrant},
{} as { [k: string]: Quadrant }
);
export const groupByFirstLetter = (items: Item[]) => {
@@ -54,15 +57,15 @@ export const groupByFirstLetter = (items: Item[]) => {
...letterIndex,
[getFirstLetter(item)]: addItemToList(
letterIndex[getFirstLetter(item)],
item,
item
),
}),
{} as {[k: string]: Item[]},
{} as { [k: string]: Item[] }
);
return Object.keys(index)
.sort()
.map(letter => ({
.map((letter) => ({
letter,
items: index[letter],
}));
@@ -77,4 +80,5 @@ const addItemToList = (list: Item[] = [], item: Item) => [...list, item];
const addItemToRing = (ring: Item[] = [], item: Item) => [...ring, item];
export const getFirstLetter = (item: Item) => item.title.substr(0, 1).toUpperCase();
export const getFirstLetter = (item: Item) =>
item.title.substr(0, 1).toUpperCase();

4
src/styles/components/headline.scss
View File

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