ci: fix build

webpage/src/pages/_app.tsx

@@ -4,6 +4,8 @@ import type { AppProps } from 'next/app';
 import Head from 'next/head';
 import '@fontsource/merriweather';
 import '@fontsource/pacifico';
+import '@fontsource/space-grotesk/700.css';
+import '@fontsource/black-ops-one';
 import { ThemeProvider } from '../theme/provider';
 import { createTheme } from '../theme/create';
 import chroma from 'chroma-js';
@@ -34,6 +36,7 @@ const GlobalStyle = createGlobalStyle`
 
   a {
     text-decoration: none;
+    font-weight: bold;
   }
 `;
 

webpage/src/pages/articles/[slug].tsx

@@ -1,15 +1,19 @@
 import { getArticles } from '@morten-olsen/personal-webpage-articles';
 import { GetStaticPaths, GetStaticProps } from 'next';
 import styled from 'styled-components';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
 import { Jumbo, Overline } from 'typography';
+import { ThemeProvider } from 'theme/provider';
+import { createTheme } from 'theme/create';
 
 type Props = {
   article: ReturnType<typeof getArticles>[number];
 };
 
-const Wrapper = styled.div``;
+const Wrapper = styled.div`
+  background: ${({ theme }) => theme.colors.background};
+`;
 
 const ArticleWrapper = styled.article`
   margin-right: 40%;
@@ -40,7 +44,6 @@ const ArticleContent = styled.div`
     float: left;
     padding: 1rem;
     margin: 0px 2rem;
-    font-weight: 100;
     margin-left: 0rem;
   }
 
@@ -73,6 +76,7 @@ const ArticleContent = styled.div`
     margin: 5px 0;
     background: ${({ theme }) => theme.colors.primary};
     color: ${({ theme }) => theme.colors.foreground};
+    font-family: 'Black Ops One', sans-serif;
 
     @media only screen and (max-width: 700px) {
       background: transparent;
@@ -92,7 +96,7 @@ const AsideWrapper = styled.aside<{
   background: ${({ theme }) => theme.colors.primary};
   background-size: cover;
   background-position: center;
-  opacity: 0.5;
+  opacity: 0.7;
   ${({ image }) => (image ? `background-image: url(${image});` : '')}
 
   @media only screen and (max-width: 700px) {
@@ -105,16 +109,23 @@ const AsideWrapper = styled.aside<{
 `;
 
 const Title = styled(Jumbo)`
-  font-size: 60px;
-  line-height: 80px;
+  font-size: 4rem;
+  line-height: 4.1rem;
   display: inline-block;
   background: ${({ theme }) => theme.colors.primary};
   color: ${({ theme }) => theme.colors.foreground};
   padding: 0 15px;
   text-transform: uppercase;
   margin: 5px;
+  font-family: 'Black Ops One', sans-serif;
+
+  @media only screen and (max-width: 900px) {
+    font-size: 2.5rem;
+    line-height: 3.1rem;
+  }
 
   @media only screen and (max-width: 700px) {
+    padding: 5px;
     font-size: 2rem;
     line-height: 2.1rem;
   }
@@ -125,28 +136,37 @@ const Meta = styled(Overline)`
 `;
 
 const Article: React.FC<Props> = ({ article }) => {
+  const theme = useMemo(
+    () =>
+      createTheme({
+        baseColor: article.meta.color,
+      }),
+    [article.meta.color]
+  );
   return (
-    <Wrapper>
-      <ArticleWrapper>
-        <ArticleContent>
-          {article.title.split(' ').map((word, index) => (
-            <Title key={index}>{word}</Title>
-          ))}
-          <div>
-            <Meta>
-              By Morten Olsen - 5 min read{' '}
-              {article.pdf && (
-                <a href={article.pdf} target="_blank">
-                  download as PDF
-                </a>
-              )}
-            </Meta>
-          </div>
-          <AsideWrapper image={article.cover} />
-          <ReactMarkdown>{article.content}</ReactMarkdown>
-        </ArticleContent>
-      </ArticleWrapper>
-    </Wrapper>
+    <ThemeProvider theme={theme}>
+      <Wrapper>
+        <ArticleWrapper>
+          <ArticleContent>
+            {article.title.split(' ').map((word, index) => (
+              <Title key={index}>{word}</Title>
+            ))}
+            <div>
+              <Meta>
+                By Morten Olsen - {article.stats.text}{' '}
+                {article.pdf && (
+                  <a href={article.pdf} target="_blank">
+                    download as PDF
+                  </a>
+                )}
+              </Meta>
+            </div>
+            <AsideWrapper image={article.cover} />
+            <ReactMarkdown>{article.content}</ReactMarkdown>
+          </ArticleContent>
+        </ArticleWrapper>
+      </Wrapper>
+    </ThemeProvider>
   );
 };
 

webpage/src/pages/index.tsx

@@ -5,7 +5,8 @@ import { getArticles } from '@morten-olsen/personal-webpage-articles/dist/index'
 import { GetStaticProps } from 'next';
 import { getPositions, Position } from '@morten-olsen/personal-webpage-profile';
 import { Sheet } from '../components/sheet';
-import ArticlePreview from 'components/articles/preview';
+import { ArticleGrid } from 'components/articles/grid';
+const cover = require('./cover.png');
 
 type Props = {
   articles: ReturnType<typeof getArticles>;
@@ -25,29 +26,48 @@ const Title = styled(Jumbo)`
   color: ${({ theme }) => theme.colors.foreground};
   padding: 0 15px;
   text-transform: uppercase;
-  margin: 5px;
+  margin: 10px;
+  font-family: 'Black Ops One', sans-serif;
 
   @media only screen and (max-width: 700px) {
+    margin: 5px;
     font-size: 2rem;
     line-height: 2.1rem;
   }
 `;
 
-const ArticleList = styled.div`
+const Arrow = styled.div`
+  position: absolute;
+  bottom: 20px;
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  margin: 0 auto;
   align-items: center;
   justify-content: center;
+
+  :after {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: ${({ theme }) => theme.colors.primary};
+    border-radius: 50%;
+    width: 80px;
+    height: 80px;
+    content: '↓';
+    font-size: 50px;
+
+    @media only screen and (max-width: 700px) {
+      width: 40px;
+      height: 40px;
+    }
+  }
 `;
 
-const Index: FC<Props> = ({ articles, positions }) => {
+const Index: FC<Props> = ({ articles }) => {
   return (
     <>
-      <Sheet backgroundColor="red">
+      <Sheet color="#c85279" background={cover}>
+        <Arrow />
         <Hero>
-          {"Hi, I'm Morten Olsen".split(' ').map((char, index) => (
+          {"Hi, I'm Morten".split(' ').map((char, index) => (
             <Title key={index}>{char}</Title>
           ))}
         </Hero>
@@ -57,18 +77,13 @@ const Index: FC<Props> = ({ articles, positions }) => {
           ))}
         </Hero>
       </Sheet>
-      <Sheet backgroundColor="#273c75">
-        <h2>Articles</h2>
-        <ArticleList>
-          {articles.map((article) => (
-            <ArticlePreview key={article.title} article={article} />
+      <Sheet color="#ef23e2">
+        <Hero>
+          {'Table of Content'.split(' ').map((char, index) => (
+            <Title key={index}>{char}</Title>
           ))}
-        </ArticleList>
-      </Sheet>
-      <Sheet backgroundColor="red">
-        {positions.map((position) => (
-          <div>{position.attributes.title}</div>
-        ))}
+        </Hero>
+        <ArticleGrid articles={articles} />
       </Sheet>
     </>
   );
@@ -77,7 +92,6 @@ const Index: FC<Props> = ({ articles, positions }) => {
 export const getStaticProps: GetStaticProps<Props> = async () => {
   const articles = getArticles();
   const positions = getPositions();
-  console.log(articles);
   return {
     props: {
       articles,