morten/morten-olsen.github.io
1
0
Fork 0
mirror of https://github.com/morten-olsen/morten-olsen.github.io.git synced 2026-02-08 01:46:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

cleanup

Browse Source
This commit is contained in:
Morten Olsen
2023-03-28 08:10:46 +02:00
parent 9b1a067d56
commit 7adf03c83f
44 changed files with 1780 additions and 411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
content/templates/react/components/article/grid/index.tsx
View File

@@ -1,9 +1,9 @@
import React, { useMemo } from "react";
import styled from "styled-components";
import ArticlePreview from "../preview";
import { JumboArticlePreview } from "../preview/jumbo";
import { MiniArticlePreview } from "../preview/mini";
import { Article } from "types";
import React, { useMemo } from 'react';
import styled from 'styled-components';
import ArticlePreview from '../preview';
import { JumboArticlePreview } from '../preview/jumbo';
import { MiniArticlePreview } from '../preview/mini';
import { Article } from 'types';
type Props = {
articles: Article[];
@@ -47,7 +47,7 @@ const ArticleGrid: React.FC<Props> = ({ articles }) => {
// new Date(b.published).getTime() -
// new Date(a.published).getTime()
// ),
[articles]
[articles],
);
const featured1 = useMemo(() => sorted.slice(0, 1)[0], [sorted]);

20
content/templates/react/components/article/preview/index.tsx
View File

@@ -1,9 +1,9 @@
import React, { useMemo } from "react";
import styled from "styled-components";
import { Title1 } from "@/typography";
import { createTheme } from "@/theme/create";
import { ThemeProvider } from "@/theme/provider";
import { Article } from "types";
import React, { useMemo } from 'react';
import styled from 'styled-components';
import { Title1 } from '@/typography';
import { createTheme } from '@/theme/create';
import { ThemeProvider } from '@/theme/provider';
import { Article } from 'types';
type Props = {
article: Article;
@@ -28,7 +28,7 @@ const Wrapper = styled.a`
const Title = styled(Title1)`
background: ${({ theme }) => theme.colors.primary};
line-height: 40px;
font-family: "Black Ops One", sans-serif;
font-family: 'Black Ops One', sans-serif;
font-size: 25px;
padding: 0 5px;
margin: 5px 0;
@@ -48,7 +48,7 @@ const AsideWrapper = styled.aside<{
background: ${({ theme }) => theme.colors.primary};
background-size: cover;
background-position: center;
${({ image }) => (image ? `background-image: url(${image});` : "")}
${({ image }) => (image ? `background-image: url(${image});` : '')}
flex: 1;
top: 0;
bottom: 0;
@@ -63,14 +63,14 @@ const ArticlePreview: React.FC<Props> = ({ article }) => {
createTheme({
baseColor: article.color,
}),
[article.color]
[article.color],
);
return (
<ThemeProvider theme={theme}>
<Wrapper href={`/articles/${article.slug}`}>
<AsideWrapper image={article.thumbUrl} />
<MetaWrapper>
{article.title.split(" ").map((word, index) => (
{article.title.split(' ').map((word, index) => (
<Title key={index}>{word}</Title>
))}
</MetaWrapper>

12
content/templates/react/components/article/preview/jumbo.tsx
View File

@@ -1,7 +1,7 @@
import React from "react";
import styled from "styled-components";
import { Title1, Body1 } from "@/typography";
import { Article } from "types";
import React from 'react';
import styled from 'styled-components';
import { Title1, Body1 } from '@/typography';
import { Article } from 'types';
type Props = {
article: Article;
@@ -24,7 +24,7 @@ const Wrapper = styled.a`
const Title = styled(Title1)`
line-height: 40px;
font-family: "Black Ops One", sans-serif;
font-family: 'Black Ops One', sans-serif;
font-size: 25px;
padding: 0 5px;
margin: 5px 0;
@@ -55,7 +55,7 @@ const AsideWrapper = styled.aside<{
background: ${({ theme }) => theme.colors.primary};
background-size: cover;
background-position: center;
${({ image }) => (image ? `background-image: url(${image});` : "")}
${({ image }) => (image ? `background-image: url(${image});` : '')}
flex: 1;
top: 0;
bottom: 0;

20
content/templates/react/components/article/preview/mini.tsx
View File

@@ -1,9 +1,9 @@
import React, { useMemo } from "react";
import styled from "styled-components";
import { Title1 } from "@/typography";
import { createTheme } from "@/theme/create";
import { ThemeProvider } from "@/theme/provider";
import { Article } from "types";
import React, { useMemo } from 'react';
import styled from 'styled-components';
import { Title1 } from '@/typography';
import { createTheme } from '@/theme/create';
import { ThemeProvider } from '@/theme/provider';
import { Article } from 'types';
type Props = {
article: Article;
@@ -26,7 +26,7 @@ const Title = styled(Title1)`
line-height: 20px;
font-size: 20px;
padding: 5px 5px;
font-family: "Black Ops One", sans-serif;
font-family: 'Black Ops One', sans-serif;
margin: 5px 0;
background: ${({ theme }) => theme.colors.background};
`;
@@ -46,7 +46,7 @@ const AsideWrapper = styled.aside<{
background: ${({ theme }) => theme.colors.primary};
background-size: cover;
background-position: center;
${({ image }) => (image ? `background-image: url(${image});` : "")}
${({ image }) => (image ? `background-image: url(${image});` : '')}
position: absolute;
top: 0;
bottom: 0;
@@ -61,14 +61,14 @@ const MiniArticlePreview: React.FC<Props> = ({ article }) => {
createTheme({
baseColor: article.color,
}),
[article.color]
[article.color],
);
return (
<ThemeProvider theme={theme}>
<Wrapper href={`/articles/${article.slug}`}>
<AsideWrapper image={article.thumbUrl} />
<MetaWrapper>
{article.title.split(" ").map((word, index) => (
{article.title.split(' ').map((word, index) => (
<Title key={index}>{word}</Title>
))}
</MetaWrapper>

9
content/templates/react/components/html/index.tsx
View File

@@ -1,4 +1,4 @@
import { FC, ReactNode } from "react"
import { FC, ReactNode } from 'react';
type HtmlProps = {
body: ReactNode;
@@ -17,8 +17,11 @@ const Html: FC<HtmlProps> = ({ body, head, scripts }) => {
))}
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous"/>
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Black+Ops+One&family=Merriweather:wght@400;700&display=swap" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
<link
href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Black+Ops+One&family=Merriweather:wght@400;700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div id="root">{body}</div>

12
content/templates/react/components/sheet/index.tsx
View File

@@ -1,7 +1,7 @@
import React, { ReactNode, useMemo } from "react";
import styled from "styled-components";
import { createTheme } from "@/theme/create";
import { ThemeProvider } from "@/theme/provider";
import React, { ReactNode, useMemo } from 'react';
import styled from 'styled-components';
import { createTheme } from '@/theme/create';
import { ThemeProvider } from '@/theme/provider';
const Wrapper = styled.div`
background: ${({ theme }) => theme.colors.background};
@@ -25,7 +25,7 @@ const BackgroundWrapper = styled.div<{
background-size: cover;
background-position: center;
opacity: 0.2;
${({ image }) => (image ? `background-image: url(${image});` : "")}
${({ image }) => (image ? `background-image: url(${image});` : '')}
`;
const Content = styled.div`
@@ -50,7 +50,7 @@ const Sheet: React.FC<Props> = ({ color, background, children }) => {
createTheme({
baseColor: color,
}),
[color]
[color],
);
return (
<ThemeProvider theme={theme}>