Verified Commit 4dd81316 authored by insert's avatar insert

Make stuff.

parent aff512a0
.next
node_modules
out
@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400,700&display=swap');
html, body {
font-family: 'Quicksand', sans-serif;
margin: 0;
}
.container {
margin: auto;
max-width: 640px;
}
.overline {
font-weight: 300;
font-size: 0.9em;
text-transform: uppercase;
}
img {
max-width: 100%;
}
h1 {
font-weight: 700;
}
em {
background: black;
padding: .1em .6em .2em .6em;
border-radius: .3em;
font-style: normal;
color: white;
}
import globalStyles from './global.scss';
import styles from './header.scss';
import { Fragment, useState } from 'react';
import Head from 'next/head';
export const global = globalStyles;
const intervals = [];
const strings = [
"haha yes",
"epic time",
"oh yeah yeah",
"bruh moment",
"ayy lmao",
];
export function Header(props: { title: string }) {
let [ text, setText ] = useState('insrt');
function animateTo(string) {
intervals.forEach(i => clearInterval(i));
let target = string.split('');
let current = text;
let clearing = true;
let t = false;
let i = setInterval(() => {
if (clearing) {
if (current.length > 0) {
current = current.substring(0, current.length - 2);
setText(current);
} else {
clearing = false;
}
} else {
t = !t;
if (t) {
return;
}
if (target.length > 0) {
current += target.shift();
setText(current);
} else {
clearInterval(i);
}
}
}, 10);
intervals.push(i);
}
return (
<Fragment>
<Head>
<title>{props.title} – insrt.uk</title>
<link rel="stylesheet" href="//cdn.materialdesignicons.com/4.8.95/css/materialdesignicons.min.css"></link>
</Head>
<div className={styles.header}>
<div className={styles.innerHeader}>
<h1
onMouseEnter={() => animateTo(strings[Math.floor(Math.random() * strings.length)])}
onMouseLeave={() => animateTo("insrt")}>
&gt;{text}<span className={styles.blink}>_</span></h1>
</div>
</div>
</Fragment>
);
}
.header {
width: 100%;
border-bottom: 2px dotted rgba(25, 25, 25, 0.14);
}
.innerHeader {
max-width: 640px;
margin: auto;
padding: 0.7em 0;
> h1 {
margin: 0;
}
}
.blink {
animation: blink 1.3s cubic-bezier(.65,.16,.92,-0.35) infinite;
}
@keyframes blink {
50% {
opacity: 0;
}
}
......@@ -2,11 +2,12 @@
"dependencies": {
"@zeit/next-sass": "^1.0.1",
"gray-matter": "^4.0.2",
"next": "^9.2.0",
"next": "^9.2.1-canary.9",
"node-sass": "^4.13.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-markdown": "^4.3.1"
"react-markdown": "^4.3.1",
"react-utterances": "^0.6.4"
},
"name": "website",
"version": "1.0.0",
......@@ -17,6 +18,7 @@
"scripts": {
"dev": "next",
"build": "next build",
"export": "next export",
"start": "next start"
},
"devDependencies": {
......
import { NextPage } from 'next'
import { global, Header } from '../components/global';
const Page: NextPage = () => (
<main>
<Header title="design" />
<div className={global.container}>
webiste title idk
<br/><br/><br/>
<p className={global.overline}>this is an overline &middot; 22nd January 2020</p>
<h1>doing cool things with <em>css</em> adn yes</h1>
<p>this is a paragraph of text </p>
</div>
</main>
)
export default Page;
\ No newline at end of file
import { NextPage } from 'next'
import { NextPage, NextComponentType } from 'next'
import Error from 'next/error'
import matter from 'gray-matter'
import ReactMarkdown from 'react-markdown'
import ReactUtterences from 'react-utterances'
import { global, Header } from '../../components/global';
interface PostProps {
data: {
title: string,
slug: string,
title: string,
overline: string,
published: string,
hero?: string,
},
content: string,
......@@ -19,16 +25,18 @@ const Page: NextPage = (props: PostProps) => {
if (!props.exists)
return <Error statusCode={404} />
let { title, slug } = props.data;
let { slug, title, overline, published, hero } = props.data;
return (
<main>
<head>
<title>{title} – insrt.uk</title>
</head>
<body>
<ReactMarkdown source={props.content} />
</body>
<Header title={title} />
<div className={global.container}>
<p className={global.overline}>{overline} &middot; {published}</p>
{ hero && <img src={hero} /> }
<ReactMarkdown escapeHtml={false} skipHtml={false} source={props.content} />
{/*<ReactUtterences repo="insertish/comments" type="pathname" />*/}
</div>
</main>
)
}
......
---
title: Hello
slug: hello-world
---
**Hello, world!**
---
slug: how-do-i-make-a-website
title: aaaaaaaaaaaaaaaa
overline: A quick introduction to a, b, and c.
published: 22nd January 2020
hero: https://upload.wikimedia.org/wikipedia/en/thumb/b/bc/Garfield_the_Cat.svg/1200px-Garfield_the_Cat.svg.png
---
# how do i make a *website* i dont know
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro quo reiciendis ipsa, fugit qui aut totam sint minus deserunt nihil facere ex, eum velit libero aliquam, assumenda animi provident delectus?Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro quo reiciendis ipsa, fugit qui aut totam sint minus deserunt nihil facere ex, eum velit libero aliquam, assumenda animi provident delectus?Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro quo reiciendis ipsa, fugit qui aut totam sint minus deserunt nihil facere ex, eum velit libero aliquam, assumenda animi provident delectus?
```
test
```
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro quo reiciendis ipsa, fugit qui aut totam sint minus deserunt nihil facere ex, eum velit libero aliquam, assumenda animi provident delectus?Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro quo reiciendis ipsa, fugit qui aut totam sint minus deserunt nihil facere ex, eum velit libero aliquam, assumenda animi provident delectus?Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro quo reiciendis ipsa, fugit qui aut totam sint minus deserunt nihil facere ex, eum velit libero aliquam, assumenda animi provident delectus?Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro quo reiciendis ipsa, fugit qui aut totam sint minus deserunt nihil facere ex, eum velit libero aliquam, assumenda animi provident delectus?
This diff is collapsed.
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment