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

Rewrite styles to scss and use i respective components

Browse Source
This commit is contained in:
Max Karkowski
2020-07-17 08:44:02 +02:00
committed by Bastian
parent be0241674c
commit 73865eb209
94 changed files with 969 additions and 974 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
public/index.html
View File

@@ -1,6 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
@@ -8,10 +7,8 @@
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="%PUBLIC_URL%/styles.css"/>
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=0" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
@@ -39,5 +36,4 @@
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

34
src/components/App.tsx
View File

@@ -1,42 +1,40 @@
import React, { useState } from 'react';
import classNames from 'classnames';
import Header from './Header';
import Footer from './Footer';
import Header from './Header/Header';
import Footer from './Footer/Footer';
import Router from './Router';
import { BrowserRouter, Switch, Route, Redirect, useParams } from 'react-router-dom';
import radardata from '../rd.json'
import radardata from '../rd.json';
import { Item } from '../model';
const A = () => {
const {page} = useParams()
return <Router pageName={page} items={radardata.items as Item[]} releases={radardata.releases as string[]}></Router>
}
const { page } = useParams();
return <Router pageName={page} items={radardata.items as Item[]} releases={radardata.releases as string[]}></Router>;
};
export default function App() {
const [isFaded] = useState(false)
const [isFaded] = useState(false);
return (
<BrowserRouter>
<div>
<div className="page">
<div className="page__header">
<Header pageName="a" />
<div className='page'>
<div className='page__header'>
<Header pageName='a' />
</div>
<div
className={classNames('page__content', { 'is-faded': isFaded })}
>
<div className={classNames('page__content', { 'is-faded': isFaded })}>
<Switch>
<Route path={"/techradar/:page(.+).html"}>
<Route path={'/techradar/:page(.+).html'}>
<A />
</Route>
<Route path={"/"}>
<Redirect to={"/techradar/index.html"}/>
<Route path={'/'}>
<Redirect to={'/techradar/index.html'} />
</Route>
</Switch>
</div>
<div className="page__footer">
<Footer items={radardata.items as Item[]} pageName="a" />
<div className='page__footer'>
<Footer items={radardata.items as Item[]} pageName='a' />
</div>
</div>
</div>

18
src/components/Badge.tsx → src/components/Badge/Badge.tsx
View File

@@ -1,24 +1,20 @@
import React, { MouseEventHandler } from 'react';
import classNames from 'classnames';
import './badge.scss';
type BadgeProps = {
onClick?: MouseEventHandler
big?: boolean
type: "big" | "all" | "adopt" | "trial" | "assess" | "hold" | "empty"
}
onClick?: MouseEventHandler;
big?: boolean;
type: 'big' | 'all' | 'adopt' | 'trial' | 'assess' | 'hold' | 'empty';
};
export default function Badge({ onClick, big, type, children }: React.PropsWithChildren<BadgeProps>) {
const Comp = typeof onClick ? 'a' : 'span';
return (
<Comp
className={classNames(
'badge',
`badge--${type}`,
{
className={classNames('badge', `badge--${type}`, {
'badge--big': big === true,
}
)}
})}
onClick={onClick}
href={Comp === 'a' ? '#' : undefined}
>

0
styles/components/badge.css → src/components/Badge/badge.scss
View File

16
src/components/Branding.tsx → src/components/Branding/Branding.tsx
View File

@@ -1,20 +1,16 @@
import React from 'react';
import classNames from 'classnames';
import './branding.scss';
type BrandingProps = {
logoContent: React.ReactNode
modifier?: "backlink" | "logo" | "content" | "footer"
}
logoContent: React.ReactNode;
modifier?: 'backlink' | 'logo' | 'content' | 'footer';
};
export default function Branding({ logoContent, modifier, children }: React.PropsWithChildren<BrandingProps>) {
return (
<div className={classNames('branding', { [`branding--${modifier}`]: modifier })}>
<div className="branding__logo">
{logoContent}
</div>
<div className="branding__content">
{children}
</div>
<div className='branding__logo'>{logoContent}</div>
<div className='branding__content'>{children}</div>
</div>
);
}

2
styles/components/branding.css → src/components/Branding/branding.scss
View File

@@ -13,6 +13,7 @@
&__logo {
flex: 0 0 200px;
& img {
display: inline-block;
}
@@ -30,6 +31,7 @@
&--footer {
display: block;
text-align: center;
.branding__logo {
margin: 0 0 15px;
}

21
src/components/Fadeable.tsx → src/components/Fadeable/Fadeable.tsx
View File

@@ -1,17 +1,17 @@
import React, { useState, useEffect } from 'react';
import classNames from 'classnames';
import './fadeable.scss';
type FadeableProps = {
leaving: boolean
onLeave: () => void
}
leaving: boolean;
onLeave: () => void;
};
export default function Fadeable({ leaving, onLeave, children }: React.PropsWithChildren<FadeableProps>) {
const [faded, setFaded] = useState(leaving)
const [faded, setFaded] = useState(leaving);
useEffect(() => {
setFaded(leaving)
}, [leaving])
setFaded(leaving);
}, [leaving]);
const handleTransitionEnd = () => {
if (faded) {
@@ -20,11 +20,8 @@ export default function Fadeable({ leaving, onLeave, children }: React.PropsWith
};
return (
<div
className={classNames('fadable', { 'is-faded': faded })}
onTransitionEnd={handleTransitionEnd}
>
<div className={classNames('fadable', { 'is-faded': faded })} onTransitionEnd={handleTransitionEnd}>
{children}
</div>
);
};
}

0
styles/components/fadeable.css → src/components/Fadeable/fadeable.scss
View File

20
src/components/Flag.tsx
View File

@@ -1,20 +0,0 @@
import React from 'react';
interface ItemFlag {
flag: "default" | "new" | "changed"
}
export default function Flag({ item, short = false }: {item: ItemFlag, short?: boolean}) {
const ucFirst = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
if (item.flag !== 'default') {
let name = item.flag.toUpperCase();
let title = ucFirst(item.flag);
if (short === true) {
name = title[0]
}
return <span className={`flag flag--${item.flag}`} title={title}>{name}</span>;
}
return null;
}

24
src/components/Flag/Flag.tsx Normal file
View File

@@ -0,0 +1,24 @@
import React from 'react';
import './flag.scss';
interface ItemFlag {
flag: 'default' | 'new' | 'changed';
}
export default function Flag({ item, short = false }: { item: ItemFlag; short?: boolean }) {
const ucFirst = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
if (item.flag !== 'default') {
let name = item.flag.toUpperCase();
let title = ucFirst(item.flag);
if (short === true) {
name = title[0];
}
return (
<span className={`flag flag--${item.flag}`} title={title}>
{name}
</span>
);
}
return null;
}

0
styles/components/flag.css → src/components/Flag/flag.scss
View File

22
src/components/Footer.tsx
View File

@@ -1,22 +0,0 @@
import React from 'react';
import classNames from 'classnames';
import Branding from './Branding';
import FooterEnd from './FooterEnd';
import { assetUrl, getItemPageNames, isMobileViewport } from '../config';
import { Item } from '../model';
export default function Footer({ items, pageName }: {items: Item[], pageName: string}) {
return (
<div className={classNames('footer', {'is-hidden': !isMobileViewport() && getItemPageNames(items).includes(pageName)})}>
<Branding
modifier="footer"
logoContent={<img src={assetUrl('logo.svg')} width="150px" height="60px" alt="" />}
>
<span className="footnote">
AOE is a leading global provider of services for digital transformation and digital business models. AOE relies exclusively on established Enterprise Open Source technologies. This leads to innovative solutions, digital products and portals in agile software projects, and helps build long-lasting, strategic partnerships with our customers.
</span>
</Branding>
<FooterEnd/>
</div>
);
}

21
src/components/Footer/Footer.tsx Normal file
View File

@@ -0,0 +1,21 @@
import React from 'react';
import classNames from 'classnames';
import Branding from '../Branding/Branding';
import FooterEnd from '../FooterEnd/FooterEnd';
import { assetUrl, getItemPageNames, isMobileViewport } from '../../config';
import { Item } from '../../model';
import './footer.scss';
export default function Footer({ items, pageName }: { items: Item[]; pageName: string }) {
return (
<div className={classNames('footer', { 'is-hidden': !isMobileViewport() && getItemPageNames(items).includes(pageName) })}>
<Branding modifier='footer' logoContent={<img src={assetUrl('logo.svg')} width='150px' height='60px' alt='' />}>
<span className='footnote'>
AOE is a leading global provider of services for digital transformation and digital business models. AOE relies exclusively on established Enterprise
Open Source technologies. This leads to innovative solutions, digital products and portals in agile software projects, and helps build long-lasting,
strategic partnerships with our customers.
</span>
</Branding>
<FooterEnd />
</div>
);
}

0
styles/components/footer.css → src/components/Footer/footer.scss
View File

25
src/components/FooterEnd.tsx
View File

@@ -1,25 +0,0 @@
import React from 'react';
import classNames from 'classnames';
export default function FooterEnd({modifier}: {modifier?: "in-sidebar"}) {
return (
<div className={classNames('footer-end', {[`footer-end__${modifier}`]: modifier})}>
<div className="footer-social">
<div className="footer-social__label">
<p>Follow us:</p>
</div>
<div className="footer-social__links">
<a className="social-links-icon" href="https://www.facebook.com/aoepeople" target="_blank" rel="noopener noreferrer"><i className="socicon-facebook social-icon"></i></a>
<a className="social-links-icon" href="https://twitter.com/aoepeople" target="_blank" rel="noopener noreferrer"><i className="socicon-twitter social-icon"></i></a>
<a className="social-links-icon" href="https://www.linkedin.com/company/aoe" target="_blank" rel="noopener noreferrer"><i className="socicon-linkedin social-icon"></i></a>
<a className="social-links-icon" href="https://www.xing.com/company/aoe" target="_blank" rel="noopener noreferrer"><i className="socicon-xing social-icon"></i></a>
<a className="social-links-icon" href="https://www.youtube.com/user/aoepeople" target="_blank" rel="noopener noreferrer"><i className="socicon-youtube social-icon"></i></a>
<a className="social-links-icon" href="https://github.com/aoepeople" target="_blank" rel="noopener noreferrer"><i className="socicon-github social-icon"></i></a>
</div>
</div>
<div className="footer-copyright">
<p><a href="https://www.aoe.com/en/copyright-meta/legal-information.html" target="_blank" rel="noopener noreferrer">Legal Information</a></p>
</div>
</div>
);
}

41
src/components/FooterEnd/FooterEnd.tsx Normal file
View File

@@ -0,0 +1,41 @@
import React from 'react';
import classNames from 'classnames';
import './footerend.scss';
export default function FooterEnd({ modifier }: { modifier?: 'in-sidebar' }) {
return (
<div className={classNames('footer-end', { [`footer-end__${modifier}`]: modifier })}>
<div className='footer-social'>
<div className='footer-social__label'>
<p>Follow us:</p>
</div>
<div className='footer-social__links'>
<a className='social-links-icon' href='https://www.facebook.com/aoepeople' target='_blank' rel='noopener noreferrer'>
<i className='socicon-facebook social-icon'></i>
</a>
<a className='social-links-icon' href='https://twitter.com/aoepeople' target='_blank' rel='noopener noreferrer'>
<i className='socicon-twitter social-icon'></i>
</a>
<a className='social-links-icon' href='https://www.linkedin.com/company/aoe' target='_blank' rel='noopener noreferrer'>
<i className='socicon-linkedin social-icon'></i>
</a>
<a className='social-links-icon' href='https://www.xing.com/company/aoe' target='_blank' rel='noopener noreferrer'>
<i className='socicon-xing social-icon'></i>
</a>
<a className='social-links-icon' href='https://www.youtube.com/user/aoepeople' target='_blank' rel='noopener noreferrer'>
<i className='socicon-youtube social-icon'></i>
</a>
<a className='social-links-icon' href='https://github.com/aoepeople' target='_blank' rel='noopener noreferrer'>
<i className='socicon-github social-icon'></i>
</a>
</div>
</div>
<div className='footer-copyright'>
<p>
<a href='https://www.aoe.com/en/copyright-meta/legal-information.html' target='_blank' rel='noopener noreferrer'>
Legal Information
</a>
</p>
</div>
</div>
);
}

0
styles/components/footerend.css → src/components/FooterEnd/footerend.scss
View File

76
src/components/Header.tsx
View File

@@ -1,76 +0,0 @@
import React, { useState, useRef, MouseEventHandler } from 'react';
import classNames from 'classnames';
import Branding from './Branding';
import Link from './Link';
import LogoLink from './LogoLink';
import Search from './Search';
import { radarNameShort } from '../config';
import { useHistory } from 'react-router-dom';
export default function Header({ pageName }: { pageName: string }) {
const [searchOpen, setSearchOpen] = useState(false)
const [search, setSearch] = useState('')
const history = useHistory()
const searchRef = useRef<HTMLInputElement>(null)
const openSearch = () => {
setSearchOpen(true)
}
const closeSearch = () => {
setSearchOpen(false)
}
const handleSearchChange = setSearch
const handleSearchSubmit = () => {
history.location.search = search
setSearchOpen(false)
setSearch('')
}
const handleOpenClick = (e: React.MouseEvent<HTMLButtonElement>) => {
// e.preventDefault(); // todo used to be a link
openSearch();
setTimeout(() => {
searchRef?.current?.focus();
}, 0);
}
const smallLogo = pageName !== 'index';
return (
<Branding
logoContent={<LogoLink small={smallLogo} />}
>
<div className="nav">
<div className="nav__item">
<Link pageName="help-and-about-tech-radar" className="icon-link">
<span className="icon icon--question icon-link__icon"></span>How to Use {radarNameShort}?
</Link>
</div>
<div className="nav__item">
<Link pageName="overview" className="icon-link">
<span className="icon icon--overview icon-link__icon"></span>Technologies Overview
</Link>
</div>
<div className="nav__item">
<button className="icon-link" onClick={handleOpenClick}>
<span className="icon icon--search icon-link__icon"></span>Search
</button>
<div className={classNames('nav__search', { 'is-open': searchOpen })}>
<Search
value={search}
onClose={closeSearch}
onSubmit={handleSearchSubmit}
onChange={handleSearchChange}
open={searchOpen}
ref={searchRef}
/>
</div>
</div>
</div>
</Branding>
);
}

67
src/components/Header/Header.tsx Normal file
View File

@@ -0,0 +1,67 @@
import React, { useState, useRef, MouseEventHandler } from 'react';
import classNames from 'classnames';
import Branding from '../Branding/Branding';
import Link from '../Link/Link';
import LogoLink from '../LogoLink/LogoLink';
import Search from '../Search/Search';
import { radarNameShort } from '../../config';
import { useHistory } from 'react-router-dom';
export default function Header({ pageName }: { pageName: string }) {
const [searchOpen, setSearchOpen] = useState(false);
const [search, setSearch] = useState('');
const history = useHistory();
const searchRef = useRef<HTMLInputElement>(null);
const openSearch = () => {
setSearchOpen(true);
};
const closeSearch = () => {
setSearchOpen(false);
};
const handleSearchChange = setSearch;
const handleSearchSubmit = () => {
history.location.search = search;
setSearchOpen(false);
setSearch('');
};
const handleOpenClick = (e: React.MouseEvent<HTMLButtonElement>) => {
// e.preventDefault(); // todo used to be a link
openSearch();
setTimeout(() => {
searchRef?.current?.focus();
}, 0);
};
const smallLogo = pageName !== 'index';
return (
<Branding logoContent={<LogoLink small={smallLogo} />}>
<div className='nav'>
<div className='nav__item'>
<Link pageName='help-and-about-tech-radar' className='icon-link'>
<span className='icon icon--question icon-link__icon'></span>How to Use {radarNameShort}?
</Link>
</div>
<div className='nav__item'>
<Link pageName='overview' className='icon-link'>
<span className='icon icon--overview icon-link__icon'></span>Technologies Overview
</Link>
</div>
<div className='nav__item'>
<button className='icon-link' onClick={handleOpenClick}>
<span className='icon icon--search icon-link__icon'></span>Search
</button>
<div className={classNames('nav__search', { 'is-open': searchOpen })}>
<Search value={search} onClose={closeSearch} onSubmit={handleSearchSubmit} onChange={handleSearchChange} open={searchOpen} ref={searchRef} />
</div>
</div>
</div>
</Branding>
);
}

11
src/components/HeadlineGroup.tsx
View File

@@ -1,11 +0,0 @@
import React from 'react';
import classNames from 'classnames';
export default function({ children, secondary = false }: React.PropsWithChildren<{secondary?: boolean}>) {
return (
<div
className={classNames('headline-group', {'headline-group--secondary': secondary})}>
{children}
</div>
);
}

6
src/components/HeadlineGroup/HeadlineGroup.tsx Normal file
View File

@@ -0,0 +1,6 @@
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>;
}

0
styles/components/headline-group.css → src/components/HeadlineGroup/headline-group.scss
View File

10
src/components/HeroHeadline.tsx
View File

@@ -1,10 +0,0 @@
import React from 'react';
export default function({ children, alt }: React.PropsWithChildren<{alt?: string}>) {
return (
<div className="hero-headline">
{children}
<span className="hero-headline__alt">{alt}</span>
</div>
);
}

10
src/components/HeroHeadline/HeroHeadline.tsx Normal file
View File

@@ -0,0 +1,10 @@
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>
);
}

0
styles/components/hero-headline.css → src/components/HeroHeadline/hero-headline.scss
View File

22
src/components/Item.tsx → src/components/Item/Item.tsx
View File

@@ -1,15 +1,15 @@
import React from 'react';
import classNames from 'classnames';
import Link from './Link';
import Flag from './Flag';
import { Item as mItem } from '../model';
import Link from '../Link/Link';
import Flag from '../Flag/Flag';
import { Item as mItem } from '../../model';
import './item.scss';
type ItemProps = {
item: mItem
noLeadingBorder?: boolean
active?: boolean
style: React.CSSProperties
}
item: mItem;
noLeadingBorder?: boolean;
active?: boolean;
style: React.CSSProperties;
};
export default function Item({ item, noLeadingBorder = false, active = false, style = {} }: ItemProps) {
return (
@@ -21,11 +21,11 @@ export default function Item({ item, noLeadingBorder = false, active = false, st
pageName={`${item.quadrant}/${item.name}`}
style={style}
>
<div className="item__title">
<div className='item__title'>
{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>
);
}

0
styles/components/item.css → src/components/Item/item.scss
View File

34
src/components/ItemList.tsx
View File

@@ -1,34 +0,0 @@
import React from 'react';
import Item from './Item';
import { Item as mItem } from '../model'
type ItemListProps = {
items: mItem[]
activeItem?: mItem
noLeadingBorder?: boolean
headerStyle?: React.CSSProperties
itemStyle?: React.CSSProperties[]
}
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}>
{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>
);
}

32
src/components/ItemList/ItemList.tsx Normal file
View File

@@ -0,0 +1,32 @@
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[];
};
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}>
{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>
);
}

0
styles/components/item-list.css → src/components/ItemList/item-list.scss
View File

15
src/components/ItemRevision.tsx
View File

@@ -1,15 +0,0 @@
import React from 'react';
import Badge from './Badge';
import { formatRelease } from '../date';
import { Revision } from '../model';
export default function ItemRevision({ revision }: {revision: Revision}) {
return (
<div className="item-revision">
<div>
<Badge type={revision.ring}>{revision.ring} | {formatRelease(revision.release)}</Badge>
</div>
<div className="markdown" dangerouslySetInnerHTML={{__html: revision.body}} />
</div>
);
}

17
src/components/ItemRevision/ItemRevision.tsx Normal file
View File

@@ -0,0 +1,17 @@
import React from 'react';
import Badge from '../Badge/Badge';
import { formatRelease } from '../../date';
import { Revision } from '../../model';
export default function ItemRevision({ revision }: { revision: Revision }) {
return (
<div className='item-revision'>
<div>
<Badge type={revision.ring}>
{revision.ring} | {formatRelease(revision.release)}
</Badge>
</div>
<div className='markdown' dangerouslySetInnerHTML={{ __html: revision.body }} />
</div>
);
}

0
styles/components/item-revision.css → src/components/ItemRevision/item-revision.scss
View File

18
src/components/ItemRevisions.tsx
View File

@@ -1,18 +0,0 @@
import React from 'react';
import HeadlineGroup from './HeadlineGroup';
import ItemRevision from './ItemRevision';
import { Revision } from '../model';
export default function ItemRevisions({ revisions }: {revisions: Revision[]}) {
return (
<div className="item-revisions">
<HeadlineGroup secondary>
<h4 className="headline headline--dark">Revisions:</h4>
</HeadlineGroup>
{revisions.map(revision => (
<ItemRevision key={revision.release} revision={revision} />
))}
</div>
);
}

18
src/components/ItemRevisions/ItemRevisions.tsx Normal file
View File

@@ -0,0 +1,18 @@
import React from 'react';
import HeadlineGroup from '../HeadlineGroup/HeadlineGroup';
import ItemRevision from '../ItemRevision/ItemRevision';
import { Revision } from '../../model';
import './item-revisions.scss';
export default function ItemRevisions({ revisions }: { revisions: Revision[] }) {
return (
<div className='item-revisions'>
<HeadlineGroup secondary>
<h4 className='headline headline--dark'>Revisions:</h4>
</HeadlineGroup>
{revisions.map((revision) => (
<ItemRevision key={revision.release} revision={revision} />
))}
</div>
);
}

0
styles/components/item-revisions.css → src/components/ItemRevisions/item-revisions.scss
View File

10
src/components/Link.tsx → src/components/Link/Link.tsx
View File

@@ -1,11 +1,11 @@
import React from 'react';
import { Link as RLink } from 'react-router-dom';
import './link.scss';
type LinkProps = {
pageName: string
style?: React.CSSProperties
className?: string
}
pageName: string;
style?: React.CSSProperties;
className?: string;
};
function Link({ pageName, children, className, style = {} }: React.PropsWithChildren<LinkProps>) {
return (

0
styles/components/link.css → src/components/Link/link.scss
View File

19
src/components/LogoLink.tsx
View File

@@ -1,19 +0,0 @@
import React from 'react';
import classNames from 'classnames';
import Link from './Link';
import { assetUrl, radarNameShort } from '../config';
export default function LogoLink({ small = false }: { small?: boolean }) {
return (
<Link pageName="index" className={classNames('logo-link', { 'logo-link--small': small })}>
<span className="logo-link__icon icon icon--back"></span>
<span className="logo-link__slide">
<img className="logo-link__img" src={assetUrl('logo.svg')} width="150px" height="60px" alt={radarNameShort} />
<span className="logo-link__text">
{radarNameShort}
</span>
</span>
</Link>
);
}

16
src/components/LogoLink/LogoLink.tsx Normal file
View File

@@ -0,0 +1,16 @@
import React from 'react';
import classNames from 'classnames';
import Link from '../Link/Link';
import { assetUrl, radarNameShort } from '../../config';
import './logo-link.scss';
export default function LogoLink({ small = false }: { small?: boolean }) {
return (
<Link pageName='index' className={classNames('logo-link', { 'logo-link--small': small })}>
<span className='logo-link__icon icon icon--back'></span>
<span className='logo-link__slide'>
<img className='logo-link__img' src={assetUrl('logo.svg')} width='150px' height='60px' alt={radarNameShort} />
<span className='logo-link__text'>{radarNameShort}</span>
</span>
</Link>
);
}

0
styles/components/logo-link.css → src/components/LogoLink/logo-link.scss
View File

49
src/components/PageHelp.tsx
View File

@@ -1,49 +0,0 @@
import React from 'react';
import HeroHeadline from './HeroHeadline';
import Fadeable from './Fadeable';
import SetTitle from './SetTitle';
import { radarName } from '../config';
export default function PageHelp({ leaving, onLeave}: {leaving: boolean, onLeave: () => void}) {
return (
<Fadeable leaving={leaving} onLeave={onLeave}>
<SetTitle title={ "How to use the " + radarName } />
<HeroHeadline>How to use the {radarName}</HeroHeadline>
<div className="fullpage-content">
<h3>Introduction</h3>
<p>Technology is moving fast and new technologies and innovations appear continuously.</p>
<p>It's essential for a development and technology company such as AOE to constantly improve and keep track with the latest useful innovations.
It is important to openly look for innovations and new technologies and to question established technologies and methods every now and then.</p>
<p>But, it is also important to wisely choose which technologies to use in our daily work and in the different projects we are carrying out. As we all know: There is no silver bullet.</p>
<h3>What is the {radarName}</h3>
<p>The Tech Radar is an overview of different technologies - from languages, frameworks, tools and patterns to platforms - that we consider "new or mentionable".
The radar therefore doesn't provide an overview of all established technologies - but it focuses on items that have recently gained in importance or changed.
</p>
<h3 >How it is created</h3><p>The items in the technology radar are raised by the different teams and therefore a lot of the items are related to the work and challenges the teams face in the different projects. In fact, we don't include anything on the radar, which we haven't already tried ourselves at least once.</p>
<p>There have been a lot of valuable discussions in different expert groups about the classification and details of each of technologies and innovations. And the result of all this can be found in the latest technology radar.</p>
<h3 >How should it be used</h3>
<p>The radar acts as an overview of technologies that we think everyone in the teams should currently know about.</p>
<p>Its goal is to act as a guide and inspiration for the daily work in the teams. Its purpose is also to provide helpful information and a bird's-eye perspective - so that decisions can be taken with a much deeper understanding of the subject matter. This results in more-informed and better-aligned decisions.</p>
<p>We also hope that developers outside of AOE find the informations in our technologie overview inspirational.</p>
<p>We group or categorize the items in 4 quadrants - (sometimes, when it's not 100% clear where a item belongs, we choose the best fit).</p>
<p>The quadrants are:</p>
<ul>
<li><strong>Languages and Frameworks:</strong> We've placed development languages (such as Scala or Golang) here, as well as more low-level development frameworks (such as Play or Symfony), which are useful for implementing custom software of all kinds. </li>
<li><strong>Tools:</strong> Here we put different software tools - from small helpers to bigger software projects</li>
<li><strong>Methods and Patterns:</strong> Patterns are so important, and a lot of them are valid for a long time (compared to some tools or frameworks). So, this is the category where we put information on methods and patterns concerning development, continuous x, testing, organization, architecture, etc.</li>
<li><strong>Platforms and Services</strong> (including AOE internal Services): Here we include infrastructure platforms and services. We also use this category to communicate news about AOE services that we want all AOE teams to be aware of.</li>
</ul>
<p>Each of the items is classified in one of these rings:</p>
<ul>
<li><strong>Adopt:</strong> We can clearly recommend this technology. We have used it for longer period of time in many teams and it has proven to be stable and useful.</li>
<li><strong>Trial:</strong> We have used it with success and recommend to have a closer look at the technology in this ring. The goal of items here is to look at them more closely, with the goal to bring them to the adopt level.</li>
<li><strong>Assess:</strong> We have tried it out and we find it promising. We recommend having a look at these items when you face a specific need for the technology in your project.</li>
<li><strong>Hold:</strong> This category is a bit special. Unlike the others, we recommend to stop doing or using something. That does not mean that there are bad and it often might be ok to use them in existing projects. But we move things here if we think we shouldn't do them anymore - because we see better options or alternatives now.</li>
</ul>
<p>Contributions and source code of the radar are on github: <a href="https://github.com/AOEpeople/aoe_technology_radar" target="_blank" rel="noopener noreferrer">AOE Tech Radar on Github</a></p>
</div>
</Fadeable>
);
}

95
src/components/PageHelp/PageHelp.tsx Normal file
View File

@@ -0,0 +1,95 @@
import React from 'react';
import HeroHeadline from '../HeroHeadline/HeroHeadline';
import Fadeable from '../Fadeable/Fadeable';
import SetTitle from '../SetTitle';
import { radarName } from '../../config';
export default function PageHelp({ leaving, onLeave }: { leaving: boolean; onLeave: () => void }) {
return (
<Fadeable leaving={leaving} onLeave={onLeave}>
<SetTitle title={'How to use the ' + radarName} />
<HeroHeadline>How to use the {radarName}</HeroHeadline>
<div className='fullpage-content'>
<h3>Introduction</h3>
<p>Technology is moving fast and new technologies and innovations appear continuously.</p>
<p>
It's essential for a development and technology company such as AOE to constantly improve and keep track with the latest useful innovations. It is
important to openly look for innovations and new technologies and to question established technologies and methods every now and then.
</p>
<p>
But, it is also important to wisely choose which technologies to use in our daily work and in the different projects we are carrying out. As we all
know: There is no silver bullet.
</p>
<h3>What is the {radarName}</h3>
<p>
The Tech Radar is an overview of different technologies - from languages, frameworks, tools and patterns to platforms - that we consider "new or
mentionable". The radar therefore doesn't provide an overview of all established technologies - but it focuses on items that have recently gained in
importance or changed.
</p>
<h3>How it is created</h3>
<p>
The items in the technology radar are raised by the different teams and therefore a lot of the items are related to the work and challenges the teams
face in the different projects. In fact, we don't include anything on the radar, which we haven't already tried ourselves at least once.
</p>
<p>
There have been a lot of valuable discussions in different expert groups about the classification and details of each of technologies and innovations.
And the result of all this can be found in the latest technology radar.
</p>
<h3>How should it be used</h3>
<p>The radar acts as an overview of technologies that we think everyone in the teams should currently know about.</p>
<p>
Its goal is to act as a guide and inspiration for the daily work in the teams. Its purpose is also to provide helpful information and a bird's-eye
perspective - so that decisions can be taken with a much deeper understanding of the subject matter. This results in more-informed and better-aligned
decisions.
</p>
<p>We also hope that developers outside of AOE find the informations in our technologie overview inspirational.</p>
<p>We group or categorize the items in 4 quadrants - (sometimes, when it's not 100% clear where a item belongs, we choose the best fit).</p>
<p>The quadrants are:</p>
<ul>
<li>
<strong>Languages and Frameworks:</strong> We've placed development languages (such as Scala or Golang) here, as well as more low-level development
frameworks (such as Play or Symfony), which are useful for implementing custom software of all kinds.{' '}
</li>
<li>
<strong>Tools:</strong> Here we put different software tools - from small helpers to bigger software projects
</li>
<li>
<strong>Methods and Patterns:</strong> Patterns are so important, and a lot of them are valid for a long time (compared to some tools or
frameworks). So, this is the category where we put information on methods and patterns concerning development, continuous x, testing, organization,
architecture, etc.
</li>
<li>
<strong>Platforms and Services</strong> (including AOE internal Services): Here we include infrastructure platforms and services. We also use this
category to communicate news about AOE services that we want all AOE teams to be aware of.
</li>
</ul>
<p>Each of the items is classified in one of these rings:</p>
<ul>
<li>
<strong>Adopt:</strong> We can clearly recommend this technology. We have used it for longer period of time in many teams and it has proven to be
stable and useful.
</li>
<li>
<strong>Trial:</strong> We have used it with success and recommend to have a closer look at the technology in this ring. The goal of items here is
to look at them more closely, with the goal to bring them to the adopt level.
</li>
<li>
<strong>Assess:</strong> We have tried it out and we find it promising. We recommend having a look at these items when you face a specific need for
the technology in your project.
</li>
<li>
<strong>Hold:</strong> This category is a bit special. Unlike the others, we recommend to stop doing or using something. That does not mean that
there are bad and it often might be ok to use them in existing projects. But we move things here if we think we shouldn't do them anymore - because
we see better options or alternatives now.
</li>
</ul>
<p>
Contributions and source code of the radar are on github:{' '}
<a href='https://github.com/AOEpeople/aoe_technology_radar' target='_blank' rel='noopener noreferrer'>
AOE Tech Radar on Github
</a>
</p>
</div>
</Fadeable>
);
}

35
src/components/PageIndex.tsx
View File

@@ -1,35 +0,0 @@
import React from 'react';
import { formatRelease } from '../date';
import { featuredOnly, Item } from '../model';
import HeroHeadline from './HeroHeadline';
import QuadrantGrid from './QuadrantGrid';
import Fadeable from './Fadeable';
import SetTitle from './SetTitle';
import { radarName, radarNameShort } from '../config';
import { MomentInput } from 'moment';
type PageIndexProps = {
leaving: boolean
onLeave: () => void
items: Item[]
releases: MomentInput[]
}
export default function PageIndex({ leaving, onLeave, items, releases }: PageIndexProps) {
const newestRelease = releases.slice(-1)[0];
const numberOfReleases = releases.length;
return (
<Fadeable leaving={leaving} onLeave={onLeave}>
<SetTitle title={radarNameShort} />
<div className="headline-group">
<HeroHeadline alt={`Version #${numberOfReleases}`}>
{radarName}
</HeroHeadline>
</div>
<QuadrantGrid items={featuredOnly(items)} />
<div className="publish-date">
Published {formatRelease(newestRelease)}
</div>
</Fadeable>
);
}

31
src/components/PageIndex/PageIndex.tsx Normal file
View File

@@ -0,0 +1,31 @@
import React from 'react';
import { formatRelease } from '../../date';
import { featuredOnly, Item } from '../../model';
import HeroHeadline from '../HeroHeadline/HeroHeadline';
import QuadrantGrid from '../QuadrantGrid/QuadrantGrid';
import Fadeable from '../Fadeable/Fadeable';
import SetTitle from '../SetTitle';
import { radarName, radarNameShort } from '../../config';
import { MomentInput } from 'moment';
type PageIndexProps = {
leaving: boolean;
onLeave: () => void;
items: Item[];
releases: MomentInput[];
};
export default function PageIndex({ leaving, onLeave, items, releases }: PageIndexProps) {
const newestRelease = releases.slice(-1)[0];
const numberOfReleases = releases.length;
return (
<Fadeable leaving={leaving} onLeave={onLeave}>
<SetTitle title={radarNameShort} />
<div className='headline-group'>
<HeroHeadline alt={`Version #${numberOfReleases}`}>{radarName}</HeroHeadline>
</div>
<QuadrantGrid items={featuredOnly(items)} />
<div className='publish-date'>Published {formatRelease(newestRelease)}</div>
</Fadeable>
);
}

138
src/components/PageItem.tsx → src/components/PageItem/PageItem.tsx
View File

@@ -1,20 +1,18 @@
import React, { useEffect, useState } from 'react';
import Badge from './Badge';
import ItemList from './ItemList';
import Link from './Link';
import FooterEnd from './FooterEnd';
import SetTitle from './SetTitle';
import ItemRevisions from './ItemRevisions';
import { createAnimation, createAnimationRunner } from '../animation';
import { translate } from '../config';
import { groupByQuadrants, Item } from '../model';
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 { createAnimation, createAnimationRunner } from '../../animation';
import './item-page.scss';
import { translate } from '../../config';
import { groupByQuadrants, Item } from '../../model';
const getItem = (pageName: string, items: Item[]) => {
const [quadrantName, itemName] = pageName.split('/');
const item = items.filter(
item => item.quadrant === quadrantName && item.name === itemName,
)[0];
const item = items.filter((item) => item.quadrant === quadrantName && item.name === itemName)[0];
return item;
};
@@ -25,11 +23,11 @@ const getItemsInRing = (pageName: string, items: Item[]) => {
};
type PageItemProps = {
pageName: string
items: Item[]
leaving: boolean
onLeave: () => void
}
pageName: string;
items: Item[];
leaving: boolean;
onLeave: () => void;
};
export default function PageItem({ pageName, items, leaving, onLeave }: PageItemProps) {
const itemsInRing = getItemsInRing(pageName, items);
@@ -44,7 +42,7 @@ export default function PageItem({ pageName, items, leaving, onLeave }: PageItem
transition: 'transform 450ms cubic-bezier(0.24, 1.12, 0.71, 0.98)',
transform: 'translateX(0)',
},
0,
0
),
navHeader: createAnimation(
{
@@ -56,7 +54,7 @@ export default function PageItem({ pageName, items, leaving, onLeave }: PageItem
transform: 'translateX(0px)',
opacity: '1',
},
300,
300
),
text: createAnimation(
{
@@ -68,7 +66,7 @@ export default function PageItem({ pageName, items, leaving, onLeave }: PageItem
transform: 'translateY(0px)',
opacity: '1',
},
600,
600
),
items: itemsInRing.map((item, i) =>
createAnimation(
@@ -81,8 +79,8 @@ export default function PageItem({ pageName, items, leaving, onLeave }: PageItem
transform: 'translateX(0px)',
opacity: '1',
},
400 + 100 * i,
),
400 + 100 * i
)
),
footer: createAnimation(
{
@@ -95,16 +93,12 @@ export default function PageItem({ pageName, items, leaving, onLeave }: PageItem
transform: 'translateX(0px)',
opacity: '1',
},
600 + itemsInRing.length * 100,
600 + itemsInRing.length * 100
),
};
const animationsOut = {
background: createAnimation(
animationsIn.background.stateB,
animationsIn.background.stateA,
300 + itemsInRing.length * 50,
),
background: createAnimation(animationsIn.background.stateB, animationsIn.background.stateA, 300 + itemsInRing.length * 50),
navHeader: createAnimation(
animationsIn.navHeader.stateB,
{
@@ -112,7 +106,7 @@ export default function PageItem({ pageName, items, leaving, onLeave }: PageItem
transform: 'translateX(40px)',
opacity: '0',
},
0,
0
),
text: createAnimation(
animationsIn.text.stateB,
@@ -121,7 +115,7 @@ export default function PageItem({ pageName, items, leaving, onLeave }: PageItem
transition: 'opacity 150ms ease-out, transform 300ms ease-out',
opacity: '0',
},
0,
0
),
items: itemsInRing.map((item, i) =>
createAnimation(
@@ -131,8 +125,8 @@ export default function PageItem({ pageName, items, leaving, onLeave }: PageItem
transform: 'translateX(40px)',
opacity: '0',
},
100 + 50 * i,
),
100 + 50 * i
)
),
footer: createAnimation(
animationsIn.text.stateB,
@@ -141,7 +135,7 @@ export default function PageItem({ pageName, items, leaving, onLeave }: PageItem
transform: 'translateX(40px)',
opacity: '0',
},
200 + itemsInRing.length * 50,
200 + itemsInRing.length * 50
),
};
@@ -153,11 +147,11 @@ export default function PageItem({ pageName, items, leaving, onLeave }: PageItem
// setAnimations(createAnimationRunner(animationsIn).getState())
} else {
// Hard refresh
setAnimations(null)
setAnimations(null);
}
}, [leaving])
}, [leaving]);
const [stateLeaving, setStateLeaving] = useState(leaving)
const [stateLeaving, setStateLeaving] = useState(leaving);
let [animationRunner, setAnimationRunner] = useState<any>();
@@ -198,73 +192,49 @@ export default function PageItem({ pageName, items, leaving, onLeave }: PageItem
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>
<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={getAnimationState('items')}
>
<div className="split">
<div className="split__left">
<ItemList items={itemsInRing} activeItem={item} headerStyle={getAnimationState('navHeader')} itemStyle={getAnimationState('items')}>
<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" />Quadrant
Overview
<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" />
<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 className='markdown' dangerouslySetInnerHTML={{ __html: item.body }} />
{item.revisions.length > 1 && <ItemRevisions revisions={item.revisions.slice(1)} />}
</div>
</div>
</div>

15
styles/components/item-page.css → src/components/PageItem/item-page.scss
View File

@@ -22,19 +22,26 @@
&__nav {
background: var(--color-gray-dark);
flex: 0 0 calc((100vw - 1200px) / 2 + 400px);
&__inner {
flex-grow: 0;
flex-shrink: 0;
flex-basis: calc(((100vw - 1200px) / 2) + 400px);
}
&__nav__inner {
box-sizing: border-box;
float: right;
width: 410px;
padding: 0 40px 0 10px;
}
}
&__content {
transform: translate3d(0, 0, 0);
flex: 0 0 calc((100vw - 1200px) / 2 + 800px);
//flex: 0 0 calc((100vw - 1200px) / 2 + 800px);
flex-grow: 0;
flex-shrink: 0;
flex-basis: calc((100vw - 1200px) / 2 + 800px);
background: var(--color-white);
&__inner {
box-sizing: border-box;
width: 810px;

75
src/components/PageItemMobile.tsx
View File

@@ -1,75 +0,0 @@
import React from 'react';
import Badge from './Badge';
import ItemList from './ItemList';
import Link from './Link';
import Fadeable from './Fadeable';
import SetTitle from './SetTitle';
import ItemRevisions from './ItemRevisions';
import { translate } from '../config';
import { groupByQuadrants, Item } from '../model';
type PageItemMobileProps = {
pageName: string
items: Item[]
leaving: boolean
onLeave: () => void
}
export default function PageItemMobile({ pageName, items, leaving, onLeave }: PageItemMobileProps) {
const getItem = (pageName: string, items: Item[]) => {
const [quadrantName, itemName] = pageName.split('/');
const item = items.filter(item => item.quadrant === quadrantName && item.name === itemName)[0];
return item;
}
const getItemsInRing = (pageName: string, items: Item[]) => {
const item = getItem(pageName, items);
const itemsInRing = groupByQuadrants(items)[item.quadrant][item.ring];
return itemsInRing;
};
const item = getItem(pageName, items);
const itemsInRing = getItemsInRing(pageName, items);
return (
<Fadeable leaving={leaving} onLeave={onLeave}>
<SetTitle title={item.title} />
<div className="mobile-item-page">
<div className="mobile-item-page__content">
<div className="mobile-item-page__content__inner">
<div className="mobile-item-page__header">
<div className="split">
<div className="split__left">
<h3 className="headline">{translate(item.quadrant)}</h3>
<h1 className="hero-headline hero-headline--inverse">{item.title}</h1>
</div>
<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>
</div>
<aside className="mobile-item-page__aside">
<ItemList
items={itemsInRing}
activeItem={item}
>
<div className="split">
<div className="split__left">
<h3 className="headline">{translate(item.quadrant)}</h3>
</div>
<div className="split__right">
<Link className="icon-link" pageName={item.quadrant}>
<span className="icon icon--pie icon-link__icon"></span>Zoom In
</Link>
</div>
</div>
</ItemList>
</aside>
</Fadeable>
);
}

74
src/components/PageItemMobile/PageItemMobile.tsx Normal file
View File

@@ -0,0 +1,74 @@
import React from 'react';
import Badge from '../Badge/Badge';
import ItemList from '../ItemList/ItemList';
import Link from '../Link/Link';
import Fadeable from '../Fadeable/Fadeable';
import SetTitle from '../SetTitle';
import ItemRevisions from '../ItemRevisions/ItemRevisions';
import { translate } from '../../config';
import { groupByQuadrants, Item } from '../../model';
type PageItemMobileProps = {
pageName: string;
items: Item[];
leaving: boolean;
onLeave: () => void;
};
export default function PageItemMobile({ pageName, items, leaving, onLeave }: PageItemMobileProps) {
const getItem = (pageName: string, items: Item[]) => {
const [quadrantName, itemName] = pageName.split('/');
const item = items.filter((item) => item.quadrant === quadrantName && item.name === itemName)[0];
return item;
};
const getItemsInRing = (pageName: string, items: Item[]) => {
const item = getItem(pageName, items);
const itemsInRing = groupByQuadrants(items)[item.quadrant][item.ring];
return itemsInRing;
};
const item = getItem(pageName, items);
const itemsInRing = getItemsInRing(pageName, items);
return (
<Fadeable leaving={leaving} onLeave={onLeave}>
<SetTitle title={item.title} />
<div className='mobile-item-page'>
<div className='mobile-item-page__content'>
<div className='mobile-item-page__content__inner'>
<div className='mobile-item-page__header'>
<div className='split'>
<div className='split__left'>
<h3 className='headline'>{translate(item.quadrant)}</h3>
<h1 className='hero-headline hero-headline--inverse'>{item.title}</h1>
</div>
<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>
</div>
<aside className='mobile-item-page__aside'>
<ItemList items={itemsInRing} activeItem={item}>
<div className='split'>
<div className='split__left'>
<h3 className='headline'>{translate(item.quadrant)}</h3>
</div>
<div className='split__right'>
<Link className='icon-link' pageName={item.quadrant}>
<span className='icon icon--pie icon-link__icon'></span>Zoom In
</Link>
</div>
</div>
</ItemList>
</aside>
</Fadeable>
);
}

150
src/components/PageOverview.tsx
View File

@@ -1,150 +0,0 @@
import React, { useState, useEffect } from 'react';
import HeadlineGroup from './HeadlineGroup';
import HeroHeadline from './HeroHeadline';
import Badge from './Badge';
import Link from './Link';
import Search from './Search';
import Fadeable from './Fadeable';
import SetTitle from './SetTitle';
import Flag from './Flag';
import { groupByFirstLetter, Item } from '../model';
import { translate, ring } from '../config';
const containsSearchTerm = (text = '', term = '') => {
// TODO search refinement
return (
text
.trim()
.toLocaleLowerCase()
.indexOf(term.trim().toLocaleLowerCase()) !== -1
);
};
type PageOverviewProps = {
rings: ring[]
search: string
items: Item[]
leaving: boolean
onLeave: () => void
}
export default function PageOverview({ rings, search: searchProp, items, leaving, onLeave }: PageOverviewProps) {
const [ring, setRing] = useState<ring | "all">("all")
const [search, setSearch] = useState(searchProp)
useEffect(() => {
if (rings.length > 0) {
setRing(rings[0])
}
setSearch(searchProp)
}, [rings, searchProp])
const handleRingClick = (ring: ring) => () => {
setRing(ring)
};
const isRingActive = (ringName: string) => ring === ringName
const itemMatchesRing = (item: Item) => ring === 'all' || item.ring === ring
const itemMatchesSearch = (item: Item) => {
return (
search.trim() === '' ||
containsSearchTerm(item.title, search) ||
containsSearchTerm(item.body, search) ||
containsSearchTerm(item.info, search)
);
};
const isItemVisible = (item: Item) => itemMatchesRing(item) && itemMatchesSearch(item)
const getFilteredAndGroupedItems = () => {
const groups = groupByFirstLetter(items);
const groupsFiltered = groups.map(group => ({
...group,
items: group.items.filter(isItemVisible),
}));
const nonEmptyGroups = groupsFiltered.filter(
group => group.items.length > 0,
);
return nonEmptyGroups;
}
const handleSearchTermChange = setSearch
const groups = getFilteredAndGroupedItems();
return (
<Fadeable leaving={leaving} onLeave={onLeave}>
<SetTitle title="Technologies Overview" />
<HeadlineGroup>
<HeroHeadline>Technologies Overview</HeroHeadline>
</HeadlineGroup>
<div className="filter">
<div className="split split--filter">
<div className="split__left">
<Search
onChange={handleSearchTermChange}
value={search}
/>
</div>
<div className="split__right">
<div className="nav">
{rings.map(ringName => (
<div className="nav__item" key={ringName}>
<Badge
big
onClick={handleRingClick(ringName)}
type={isRingActive(ringName) ? ringName : 'empty'}
>
{ringName}
</Badge>
</div>
))}
</div>
</div>
</div>
</div>
<div className="letter-index">
{groups.map(({ letter, items }) => (
<div key={letter} className="letter-index__group">
<div className="letter-index__letter">{letter}</div>
<div className="letter-index__items">
<div className="item-list">
<div className="item-list__list">
{items.map(item => (
<Link
key={item.name}
className="item item--big item--no-leading-border item--no-trailing-border"
pageName={`${item.quadrant}/${item.name}`}
>
<div className="split split--overview">
<div className="split__left">
<div className="item__title">
{item.title}
<Flag item={item} />
</div>
</div>
<div className="split__right">
<div className="nav nav--relations">
<div className="nav__item">
{translate(item.quadrant)}
</div>
<div className="nav__item">
<Badge type={item.ring}>{item.ring}</Badge>
</div>
</div>
</div>
</div>
</Link>
))}
</div>
</div>
</div>
</div>
))}
</div>
</Fadeable>
);
}

129
src/components/PageOverview/PageOverview.tsx Normal file
View File

@@ -0,0 +1,129 @@
import React, { useState, useEffect } from 'react';
import HeadlineGroup from '../HeadlineGroup/HeadlineGroup';
import HeroHeadline from '../HeroHeadline/HeroHeadline';
import Badge from '../Badge/Badge';
import Link from '../Link/Link';
import Search from '../Search/Search';
import Fadeable from '../Fadeable/Fadeable';
import SetTitle from '../SetTitle';
import Flag from '../Flag/Flag';
import { groupByFirstLetter, Item } from '../../model';
import { translate, ring } from '../../config';
const containsSearchTerm = (text = '', term = '') => {
// TODO search refinement
return text.trim().toLocaleLowerCase().indexOf(term.trim().toLocaleLowerCase()) !== -1;
};
type PageOverviewProps = {
rings: ring[];
search: string;
items: Item[];
leaving: boolean;
onLeave: () => void;
};
export default function PageOverview({ rings, search: searchProp, items, leaving, onLeave }: PageOverviewProps) {
const [ring, setRing] = useState<ring | 'all'>('all');
const [search, setSearch] = useState(searchProp);
useEffect(() => {
if (rings.length > 0) {
setRing(rings[0]);
}
setSearch(searchProp);
}, [rings, searchProp]);
const handleRingClick = (ring: ring) => () => {
setRing(ring);
};
const isRingActive = (ringName: string) => ring === ringName;
const itemMatchesRing = (item: Item) => ring === 'all' || item.ring === ring;
const itemMatchesSearch = (item: Item) => {
return search.trim() === '' || containsSearchTerm(item.title, search) || containsSearchTerm(item.body, search) || containsSearchTerm(item.info, search);
};
const isItemVisible = (item: Item) => itemMatchesRing(item) && itemMatchesSearch(item);
const getFilteredAndGroupedItems = () => {
const groups = groupByFirstLetter(items);
const groupsFiltered = groups.map((group) => ({
...group,
items: group.items.filter(isItemVisible),
}));
const nonEmptyGroups = groupsFiltered.filter((group) => group.items.length > 0);
return nonEmptyGroups;
};
const handleSearchTermChange = setSearch;
const groups = getFilteredAndGroupedItems();
return (
<Fadeable leaving={leaving} onLeave={onLeave}>
<SetTitle title='Technologies Overview' />
<HeadlineGroup>
<HeroHeadline>Technologies Overview</HeroHeadline>
</HeadlineGroup>
<div className='filter'>
<div className='split split--filter'>
<div className='split__left'>
<Search onChange={handleSearchTermChange} value={search} />
</div>
<div className='split__right'>
<div className='nav'>
{rings.map((ringName) => (
<div className='nav__item' key={ringName}>
<Badge big onClick={handleRingClick(ringName)} type={isRingActive(ringName) ? ringName : 'empty'}>
{ringName}
</Badge>
</div>
))}
</div>
</div>
</div>
</div>
<div className='letter-index'>
{groups.map(({ letter, items }) => (
<div key={letter} className='letter-index__group'>
<div className='letter-index__letter'>{letter}</div>
<div className='letter-index__items'>
<div className='item-list'>
<div className='item-list__list'>
{items.map((item) => (
<Link
key={item.name}
className='item item--big item--no-leading-border item--no-trailing-border'
pageName={`${item.quadrant}/${item.name}`}
>
<div className='split split--overview'>
<div className='split__left'>
<div className='item__title'>
{item.title}
<Flag item={item} />
</div>
</div>
<div className='split__right'>
<div className='nav nav--relations'>
<div className='nav__item'>{translate(item.quadrant)}</div>
<div className='nav__item'>
<Badge type={item.ring}>{item.ring}</Badge>
</div>
</div>
</div>
</div>
</Link>
))}
</div>
</div>
</div>
</div>
))}
</div>
</Fadeable>
);
}

24
src/components/PageQuadrant.tsx → src/components/PageQuadrant/PageQuadrant.tsx
View File

@@ -1,19 +1,19 @@
import React from 'react';
import HeroHeadline from './HeroHeadline';
import HeadlineGroup from './HeadlineGroup';
import QuadrantSection from './QuadrantSection';
import Fadeable from './Fadeable';
import SetTitle from './SetTitle';
import HeroHeadline from '../HeroHeadline/HeroHeadline';
import HeadlineGroup from '../HeadlineGroup/HeadlineGroup';
import QuadrantSection from '../QuadrantSection/QuadrantSection';
import Fadeable from '../Fadeable/Fadeable';
import SetTitle from '../SetTitle';
import { translate } from '../config';
import {featuredOnly, groupByQuadrants, Item} from '../model';
import { translate } from '../../config';
import { featuredOnly, groupByQuadrants, Item } from '../../model';
type PageQuadrantProps = {
leaving: boolean
onLeave: () => void
pageName: string
items: Item[]
}
leaving: boolean;
onLeave: () => void;
pageName: string;
items: Item[];
};
export default function PageQuadrant({ leaving, onLeave, pageName, items }: PageQuadrantProps) {
const groups = groupByQuadrants(featuredOnly(items));

17
src/components/PageToolbox.tsx → src/components/PageToolbox/PageToolbox.tsx
View File

@@ -1,14 +1,14 @@
import React from 'react';
import HeroHeadline from './HeroHeadline';
import Fadeable from './Fadeable';
import SetTitle from './SetTitle';
import HeroHeadline from '../HeroHeadline/HeroHeadline';
import Fadeable from '../Fadeable/Fadeable';
import SetTitle from '../SetTitle';
export default function PageToolbox({ leaving, onLeave }: {leaving: boolean, onLeave: () => void}) {
export default function PageToolbox({ leaving, onLeave }: { leaving: boolean; onLeave: () => void }) {
return (
<Fadeable leaving={leaving} onLeave={onLeave}>
<SetTitle title="Small AOE Toolbox" />
<SetTitle title='Small AOE Toolbox' />
<HeroHeadline>Small AOE Toolbox</HeroHeadline>
<div className="fullpage-content">
<div className='fullpage-content'>
<h3>Useful Tools</h3>
<ul>
@@ -24,11 +24,8 @@ export default function PageToolbox({ leaving, onLeave }: {leaving: boolean, onL
<li> Paw Rest Client</li>
</ul>
<h3>Estabilshed Technologies</h3>
<p>
Not mentionable but adopted for a while now:
</p>
<p>Not mentionable but adopted for a while now:</p>
<ul>
<li>Jenkins</li>
<li>Redis</li>

23
src/components/QuadrantGrid.tsx
View File

@@ -1,23 +0,0 @@
import React from 'react';
import { groupByQuadrants, Item, Group } from '../model';
import { quadrants } from '../config';
import QuadrantSection from './QuadrantSection';
const renderQuadrant = (quadrantName: string, groups: Group) => {
return (
<div key={quadrantName} className="quadrant-grid__quadrant">
<QuadrantSection quadrantName={quadrantName} groups={groups} />
</div>
);
}
export default function QuadrantGrid({ items }: { items: Item[] }) {
const groups = groupByQuadrants(items);
return (
<div className="quadrant-grid">
{
quadrants.map((quadrantName) => renderQuadrant(quadrantName, groups))
}
</div>
);
}

17
src/components/QuadrantGrid/QuadrantGrid.tsx Normal file
View File

@@ -0,0 +1,17 @@
import React from 'react';
import { groupByQuadrants, Item, Group } from '../../model';
import { quadrants } from '../../config';
import QuadrantSection from '../QuadrantSection/QuadrantSection';
import './quadrant-grid.scss';
const renderQuadrant = (quadrantName: string, groups: Group) => {
return (
<div key={quadrantName} className='quadrant-grid__quadrant'>
<QuadrantSection quadrantName={quadrantName} groups={groups} />
</div>
);
};
export default function QuadrantGrid({ items }: { items: Item[] }) {
const groups = groupByQuadrants(items);
return <div className='quadrant-grid'>{quadrants.map((quadrantName) => renderQuadrant(quadrantName, groups))}</div>;
}

0
styles/components/quadrant-grid.css → src/components/QuadrantGrid/quadrant-grid.scss
View File

76
src/components/QuadrantSection.tsx
View File

@@ -1,76 +0,0 @@
import React from 'react';
import { translate, rings, ring } from '../config';
import Badge from './Badge';
import Link from './Link';
import ItemList from './ItemList';
import Flag from './Flag';
import { Item, Group } from '../model';
const renderList = (ringName: ring, quadrantName: string, groups: Group, big: boolean) => {
const itemsInRing = groups[quadrantName][ringName];
if (big) {
return (
<ItemList items={itemsInRing} noLeadingBorder>
<Badge type={ringName} big={big}>
{ringName}
</Badge>
</ItemList>
);
}
return (
<div className="ring-list">
<div className="ring-list__header">
<Badge type={ringName}>{ringName}</Badge>
</div>
{itemsInRing.map(item => (
<span key={item.name} className="ring-list__item">
<Link className="link" pageName={`${item.quadrant}/${item.name}`}>
{item.title}
<Flag item={item} short />
</Link>
</span>
))}
</div>
);
};
const renderRing = (ringName: ring, quadrantName: string, groups: Group, big: boolean) => {
if (
!groups[quadrantName] ||
!groups[quadrantName][ringName] ||
groups[quadrantName][ringName].length === 0
) {
return null;
}
return (
<div key={ringName} className="quadrant-section__ring">
{renderList(ringName, quadrantName, groups, big)}
</div>
);
};
export default function QuadrantSection({ quadrantName, groups, big = false }: { quadrantName: string, groups: Group, big?: boolean }) {
return (
<div className="quadrant-section">
<div className="quadrant-section__header">
<div className="split">
<div className="split__left">
<h4 className="headline">{translate(quadrantName)}</h4>
</div>
{!big && (
<div className="split__right">
<Link className="icon-link" pageName={`${quadrantName}`}>
<span className="icon icon--pie icon-link__icon" />Zoom In
</Link>
</div>
)}
</div>
</div>
<div className="quadrant-section__rings">
{rings.map(ringName => renderRing(ringName, quadrantName, groups, big))}
</div>
</div>
);
}

71
src/components/QuadrantSection/QuadrantSection.tsx Normal file
View File

@@ -0,0 +1,71 @@
import React from 'react';
import { translate, rings, ring } from '../../config';
import Badge from '../Badge/Badge';
import Link from '../Link/Link';
import ItemList from '../ItemList/ItemList';
import Flag from '../Flag/Flag';
import { Item, Group } from '../../model';
import './quadrant-section.scss';
const renderList = (ringName: ring, quadrantName: string, groups: Group, big: boolean) => {
const itemsInRing = groups[quadrantName][ringName];
if (big) {
return (
<ItemList items={itemsInRing} noLeadingBorder>
<Badge type={ringName} big={big}>
{ringName}
</Badge>
</ItemList>
);
}
return (
<div className='ring-list'>
<div className='ring-list__header'>
<Badge type={ringName}>{ringName}</Badge>
</div>
{itemsInRing.map((item) => (
<span key={item.name} className='ring-list__item'>
<Link className='link' pageName={`${item.quadrant}/${item.name}`}>
{item.title}
<Flag item={item} short />
</Link>
</span>
))}
</div>
);
};
const renderRing = (ringName: ring, quadrantName: string, groups: Group, big: boolean) => {
if (!groups[quadrantName] || !groups[quadrantName][ringName] || groups[quadrantName][ringName].length === 0) {
return null;
}
return (
<div key={ringName} className='quadrant-section__ring'>
{renderList(ringName, quadrantName, groups, big)}
</div>
);
};
export default function QuadrantSection({ quadrantName, groups, big = false }: { quadrantName: string; groups: Group; big?: boolean }) {
return (
<div className='quadrant-section'>
<div className='quadrant-section__header'>
<div className='split'>
<div className='split__left'>
<h4 className='headline'>{translate(quadrantName)}</h4>
</div>
{!big && (
<div className='split__right'>
<Link className='icon-link' pageName={`${quadrantName}`}>
<span className='icon icon--pie icon-link__icon' />
Zoom In
</Link>
</div>
)}
</div>
</div>
<div className='quadrant-section__rings'>{rings.map((ringName) => renderRing(ringName, quadrantName, groups, big))}</div>
</div>
);
}

0
styles/components/quadrant-section.css → src/components/QuadrantSection/quadrant-section.scss
View File

42
src/components/Router.tsx
View File

@@ -1,14 +1,14 @@
import React, { useState, useEffect } from 'react';
import PageIndex from './PageIndex';
import PageOverview from './PageOverview';
import PageHelp from './PageHelp';
import PageQuadrant from './PageQuadrant';
import PageItem from './PageItem';
import PageItemMobile from './PageItemMobile';
import PageIndex from './PageIndex/PageIndex';
import PageOverview from './PageOverview/PageOverview';
import PageHelp from './PageHelp/PageHelp';
import PageQuadrant from './PageQuadrant/PageQuadrant';
import PageItem from './PageItem/PageItem';
import PageItemMobile from './PageItemMobile/PageItemMobile';
import { quadrants, getItemPageNames, isMobileViewport } from '../config';
import { Item } from '../model';
export default function Router({ pageName, items, releases }: {pageName: string, items: Item[], releases: string[]}) {
export default function Router({ pageName, items, releases }: { pageName: string; items: Item[]; releases: string[] }) {
enum page {
index,
overview,
@@ -37,24 +37,24 @@ export default function Router({ pageName, items, releases }: {pageName: string,
}
return page.notFound;
}
};
const [statePageName, setStatePageName] = useState(pageName);
const [leaving, setLeaving] = useState(false);
const [nextPageName, setNextPageName] = useState<string>("");
const [nextPageName, setNextPageName] = useState<string>('');
useEffect(() => {
const leaving = getPageByName(items, pageName) !== getPageByName(items, statePageName);
if (leaving) {
setLeaving(true)
setLeaving(true);
}
setNextPageName(pageName)
}, [pageName, items, statePageName])
setNextPageName(pageName);
}, [pageName, items, statePageName]);
const handlePageLeave = () => {
setLeaving(true)
setLeaving(true);
setStatePageName(nextPageName);
setNextPageName("")
setNextPageName('');
window.setTimeout(() => {
window.requestAnimationFrame(() => {
@@ -65,18 +65,18 @@ export default function Router({ pageName, items, releases }: {pageName: string,
switch (getPageByName(items, pageName)) {
case page.index:
return <PageIndex leaving={leaving} items={items} onLeave={handlePageLeave} releases={releases} />
return <PageIndex leaving={leaving} items={items} onLeave={handlePageLeave} releases={releases} />;
case page.overview:
return <PageOverview items={items} rings={[]} search={""} leaving={leaving} onLeave={handlePageLeave}/>
return <PageOverview items={items} rings={[]} search={''} leaving={leaving} onLeave={handlePageLeave} />;
case page.help:
return <PageHelp leaving={leaving} onLeave={handlePageLeave}/>
return <PageHelp leaving={leaving} onLeave={handlePageLeave} />;
case page.quadrant:
return <PageQuadrant leaving={leaving} onLeave={handlePageLeave} items={items} pageName={pageName} />
return <PageQuadrant leaving={leaving} onLeave={handlePageLeave} items={items} pageName={pageName} />;
case page.itemMobile:
return <PageItemMobile items={items} pageName={pageName} leaving={leaving} onLeave={handlePageLeave}/>
return <PageItemMobile items={items} pageName={pageName} leaving={leaving} onLeave={handlePageLeave} />;
case page.item:
return <PageItem items={items} pageName={pageName} leaving={leaving} onLeave={handlePageLeave}/>
return <PageItem items={items} pageName={pageName} leaving={leaving} onLeave={handlePageLeave} />;
default:
return <div/>
return <div />;
}
}

46
src/components/Search.tsx → src/components/Search/Search.tsx
View File

@@ -1,17 +1,17 @@
import React, { FormEvent } from 'react';
import classNames from 'classnames';
import './search.scss';
type SearchProps = {
onClose?: () => void
onSubmit?: () => void
value: string
onChange: (value: string) => void
open?: boolean
}
onClose?: () => void;
onSubmit?: () => void;
value: string;
onChange: (value: string) => void;
open?: boolean;
};
export default React.forwardRef((props: SearchProps, ref) => {
return Search(props, ref)
})
return Search(props, ref);
});
function Search({ value, onChange, onClose, open = false, onSubmit = () => {} }: SearchProps, ref: any) {
const closable = onClose !== undefined;
@@ -26,31 +26,31 @@ function Search({ value, onChange, onClose, open = false, onSubmit = () => { }}:
if (onClose != null) {
onClose();
}
}
};
return (
<form className={classNames('search', { 'search--closable': closable })} onSubmit={handleSubmit}>
<input
value={value}
type="text"
onChange={(e) => { onChange(e.target.value); }}
className="search__field"
placeholder="What are you looking for?"
type='text'
onChange={(e) => {
onChange(e.target.value);
}}
className='search__field'
placeholder='What are you looking for?'
ref={ref}
/>
<span className={classNames('search__button', { 'is-open': open })}>
<button type="submit" className="button">
<span className="icon icon--search button__icon" />
<button type='submit' className='button'>
<span className='icon icon--search button__icon' />
Search
</button>
</span>
{
closable && (
<button className={classNames('search__close', { 'is-open': open })} onClick={handleClose}>
<span className="icon icon--close" />
</button>
)
}
{closable && (
<a className={classNames('search__close', { 'is-open': open })} onClick={handleClose}>
<span className='icon icon--close' />
</a>
)}
</form>
);
}

4
styles/components/search.css → src/components/Search/search.scss
View File

@@ -3,13 +3,15 @@
width: 600px;
height: 50px;
position: relative;
left: 20px;
margin: 0;
padding: 0;
&__field {
height: 100%;
width: 100%;
padding: 10px 120px 10px 20px;
//padding: 10px 120px 10px 20px;
padding-left: 20px;
background: #3A444A;
display: block;
border: none;

0
public/fonts/clanot-bold.otf → src/fonts/clanot-bold.otf
View File

0
public/fonts/clanot-medium.otf → src/fonts/clanot-medium.otf
View File

0
public/fonts/clanot-news.otf → src/fonts/clanot-news.otf
View File

0
public/fonts/clanot-thin.otf → src/fonts/clanot-thin.otf
View File

0
public/icons/back.svg → src/icons/back.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 833 B

After

Width:  |  Height:  |  Size: 833 B

0
public/icons/close.svg → src/icons/close.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 830 B

After

Width:  |  Height:  |  Size: 830 B

0
public/icons/overview.svg → src/icons/overview.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

0
public/icons/pie.svg → src/icons/pie.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

0
public/icons/question.svg → src/icons/question.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

0
public/icons/search.svg → src/icons/search.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

16
src/index.css → src/index.scss
View File

@@ -7,7 +7,23 @@ body {
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
@font-face {
font-family: 'DIN';
src: url('./fonts/clanot-news.otf');
font-weight: normal;
}
@font-face {
font-family: 'DIN';
src: url('./fonts/clanot-thin.otf');
font-weight: 300;
}
@import './styles/main.scss'

4
src/index.tsx
View File

@@ -1,11 +1,11 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import './index.scss';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>
,
</React.StrictMode>,
document.getElementById('root')
);

10
styles/base.css → src/styles/base.scss
View File

@@ -19,17 +19,7 @@
@custom-media --until-lg (max-width: 61.875em);
@custom-media --until-xl (max-width: 75em);
@font-face {
font-family: 'DIN';
src: url('../fonts/clanot-news.otf');
font-weight: normal;
}
@font-face {
font-family: 'DIN';
src: url('../fonts/clanot-thin.otf');
font-weight: 300;
}
body {
background: var(--color-gray-dark);

0
styles/components/button.css → src/styles/components/button.scss
View File

0
styles/components/content.css → src/styles/components/content.scss
View File

0
styles/components/filter.css → src/styles/components/filter.scss
View File

0
styles/components/footnote.css → src/styles/components/footnote.scss
View File

0
styles/components/headline.css → src/styles/components/headline.scss
View File

0
styles/components/hljs.css → src/styles/components/hljs.scss
View File

2
styles/components/icon-link.css → src/styles/components/icon-link.scss
View File

@@ -5,6 +5,8 @@
height: 25px;
font-size: 14px;
line-height: 25px;
border: 0;
background: none;
color: var(--color-gray-normal);
&--primary {

33
src/styles/components/icon.scss Normal file
View File

@@ -0,0 +1,33 @@
.icon {
display: inline-block;
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
background-position: 0 0;
vertical-align: middle;
&--pie {
background-image: url('../../icons/pie.svg');
}
&--question {
background-image: url('../../icons/question.svg');
}
&--overview {
background-image: url('../../icons/overview.svg');
}
&--search {
background-image: url('../../icons/search.svg');
}
&--back {
background-image: url('../../icons/back.svg');
}
&--close {
background-image: url('../../icons/close.svg');
}
}

0
styles/components/letter-index.css → src/styles/components/letter-index.scss
View File

0
styles/components/markdown.css → src/styles/components/markdown.scss
View File

0
styles/components/nav.css → src/styles/components/nav.scss
View File

0
styles/components/page.css → src/styles/components/page.scss
View File

0
styles/components/publish-date.css → src/styles/components/publish-date.scss
View File

0
styles/components/ring-list.css → src/styles/components/ring-list.scss
View File

0
styles/components/social-icon.css → src/styles/components/social-icon.scss
View File

0
styles/components/split.css → src/styles/components/split.scss
View File

17
src/styles/main.scss Normal file
View File

@@ -0,0 +1,17 @@
@import "./base";
@import "./components/button";
@import "./components/content";
@import "./components/filter";
@import "./components/footnote";
@import "./components/headline";
@import "./components/hljs";
@import "./components/icon";
@import "./components/icon-link";
@import "./components/letter-index";
@import "./components/markdown";
@import "./components/nav";
@import "./components/page";
@import "./components/publish-date";
@import "./components/ring-list";
@import "./components/social-icon";
@import "./components/split";

33
styles/components/icon.css
View File

@@ -1,33 +0,0 @@
.icon {
display: inline-block;
width: 22px;
height: 22px;
background-size: 22px 22px;
background-repeat: no-repeat;
background-position: 0 0;
vertical-align: middle;
&--pie {
background-image: url('../icons/pie.svg');
}
&--question {
background-image: url('../icons/question.svg');
}
&--overview {
background-image: url('../icons/overview.svg');
}
&--search {
background-image: url('../icons/search.svg');
}
&--back {
background-image: url('../icons/back.svg');
}
&--close {
background-image: url('../icons/close.svg');
}
}

2
styles/main.css
View File

@@ -1,2 +0,0 @@
@import "./base.css";
@import "./components/*.css";