Verified Commit 56e25f0a authored by insert's avatar insert

Commit everything changed since January.

parent 495c202e
@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400,700&display=swap');
html, body {
font-family: 'Quicksand', sans-serif;
margin: 0;
}
:global(.prettyprint) {
margin: 0;
padding: 1em !important;
}
.container {
margin: auto;
max-width: 640px;
}
.md {
img {
display: block;
margin: auto;
}
h6 {
text-align: center;
font-size: 0.8em;
margin: 0;
margin-bottom: 1em;
}
}
.hero {
width: 100%;
height: 480px;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
.overline {
font-weight: 300;
font-size: 0.9em;
text-transform: uppercase;
}
img {
max-width: 100%;
}
h1 {
font-weight: 700;
font-size: 4em;
}
h2 {
font-weight: 700;
font-size: 2em;
}
h3 {
font-weight: 700;
font-size: 1.6em;
}
h4 {
font-weight: 500;
font-size: 1.4em;
}
h5 {
font-weight: 500;
font-size: 1.2em;
}
h6 {
font-weight: 500;
font-size: 1em;
}
em {
background: black;
padding: .1em .6em .2em .6em;
border-radius: .3em;
font-style: normal;
color: white;
}
hr {
border: none;
border-top: 1px dotted gray;
}
@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400,700&display=swap');
html, body {
font-family: 'Quicksand', sans-serif;
margin: 0;
}
:global(.prettyprint) {
margin: 0;
padding: 1em !important;
}
.container {
margin: auto;
max-width: 640px;
}
.md {
img {
display: block;
margin: auto;
}
h6 {
text-align: center;
font-size: 0.8em;
margin: 0;
margin-bottom: 1em;
}
}
.hero {
width: 100%;
height: 480px;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
.overline {
font-weight: 300;
font-size: 0.9em;
text-transform: uppercase;
}
img {
max-width: 100%;
}
h1 {
font-weight: 700;
font-size: 4em;
}
h2 {
font-weight: 700;
font-size: 2em;
}
h3 {
font-weight: 700;
font-size: 1.6em;
}
h4 {
font-weight: 500;
font-size: 1.4em;
}
h5 {
font-weight: 500;
font-size: 1.2em;
}
h6 {
font-weight: 500;
font-size: 1em;
}
em {
background: black;
padding: .1em .6em .2em .6em;
border-radius: .3em;
font-style: normal;
color: white;
}
hr {
border: none;
border-top: 1px dotted gray;
}
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}>
<div>
<h2
onMouseEnter={() => animateTo(strings[Math.floor(Math.random() * strings.length)])}
onMouseLeave={() => animateTo("insrt")}>
&gt;{text}<span className={styles.blink}>_</span></h2>
</div>
<div></div>
<span>projects</span>
<span>posts</span>
<span>gitlab</span>
</div>
</div>
</Fragment>
);
}
export function Footer() {
return (
<div className={styles.footer}>&copy; { new Date().getFullYear() } Paul Makles</div>
);
}
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 moment",
"👉😎👉",
];
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}>
<div>
<h2
onMouseEnter={() => animateTo(strings[Math.floor(Math.random() * strings.length)])}
onMouseLeave={() => animateTo("insrt")}>
<a href="/">&gt;{text}<span className={styles.blink}>_</span></a></h2>
</div>
<div></div>
<span className={styles.disabled}>projects</span>
<span className={styles.disabled}>posts</span>
<span><a href="https://gitlab.insrt.uk" target="_blank">gitlab</a></span>
</div>
</div>
</Fragment>
);
}
export function Footer() {
return (
<div className={styles.footer}>&copy; { new Date().getFullYear() } Paul Makles</div>
);
}
.header {
width: 100%;
user-select: none;
border-bottom: 2px dotted rgba(25, 25, 25, 0.14);
margin-bottom: 1em;
}
.innerHeader {
display: flex;
max-width: 640px;
margin: auto;
padding: 0.7em 0;
> :nth-child(1) > h2 {
margin: 0;
min-width: 108px;
}
> :nth-child(2) {
flex-grow: 1;
}
> span {
padding: 0 .6em;
line-height: 40px;
font-weight: 600;
}
}
.blink {
animation: blink 1.3s cubic-bezier(.65,.16,.92,-0.35) infinite;
}
@keyframes blink {
50% {
opacity: 0;
}
}
.footer {
text-align: center;
font-size: 0.9em;
font-weight: 300;
padding: 3em;
margin: auto;
border-top: 2px dotted rgba(25, 25, 25, 0.14);
margin-top: 1em;
}
.header {
width: 100%;
user-select: none;
border-bottom: 2px dotted rgba(25, 25, 25, 0.14);
margin-bottom: 1em;
}
.innerHeader {
display: flex;
max-width: 640px;
margin: auto;
padding: 0.7em 0;
> :nth-child(1) > h2 {
margin: 0;
min-width: 108px;
> a {
text-decoration: none;
}
}
> :nth-child(2) {
flex-grow: 1;
}
> span {
padding: 0 .6em;
line-height: 40px;
font-weight: 600;
> a {
text-decoration: none;
}
}
}
.blink {
animation: blink 1.3s cubic-bezier(.65,.16,.92,-0.35) infinite;
}
@keyframes blink {
50% {
opacity: 0;
}
}
.footer {
text-align: center;
font-size: 0.9em;
font-weight: 300;
padding: 3em;
margin: auto;
border-top: 2px dotted rgba(25, 25, 25, 0.14);
margin-top: 1em;
}
.disabled {
color: gray;
}
a, a:link, a:visited {
color: black;
}
/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next" />
/// <reference types="next/types/global" />
// next.config.js
const withSass = require('@zeit/next-sass')
module.exports = withSass({
cssModules: true,
webpack(config, { isServer }) {
if (!isServer) {
config.node = {
fs: 'empty'
}
}
return config
}
// next.config.js
const withSass = require('@zeit/next-sass')
module.exports = withSass({
cssModules: true,
webpack(config, { isServer }) {
if (!isServer) {
config.node = {
fs: 'empty'
}
}
return config
}
})
\ No newline at end of file
{
"dependencies": {
"@zeit/next-sass": "^1.0.1",
"gray-matter": "^4.0.2",
"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-utterances": "^0.6.4"
},
"name": "website",
"version": "1.0.0",
"main": "dist/index.js",
"license": "MIT",
"repository": "https://gitlab.insrt.uk/insert/website",
"author": "Paul Makles <insrt.uk>",
"scripts": {
"dev": "next",
"build": "next build",
"export": "next export",
"start": "next start"
},
"devDependencies": {
"@types/node": "^13.1.8",
"@types/react": "^16.9.18",
"typescript": "^3.7.5"
}
}
{
"dependencies": {
"@zeit/next-sass": "^1.0.1",
"gray-matter": "^4.0.2",
"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-utterances": "^0.6.4"
},
"name": "website",
"version": "1.0.0",
"main": "dist/index.js",
"license": "MIT",
"repository": "https://gitlab.insrt.uk/insert/website",
"author": "Paul Makles <insrt.uk>",
"scripts": {
"dev": "next",
"build": "next build",
"export": "next export",
"start": "next start"
},
"devDependencies": {
"@types/node": "^13.1.8",
"@types/react": "^16.9.18",
"typescript": "^3.7.5"
}
}
.title {
font-size: 10em;
}
.title {
font-size: 10em;
}
import { NextPage } from 'next'
import styles from './index.scss';
import { global, Header, Footer } from '../components/global';
const Page: NextPage = () => (
<main>
<Header title="Paul Makles" />
<div className={global.container}>
this site is a work in progress<br/>
<a href="/post/website-design">see design reference post</a>
</div>
<Footer />
</main>
)
import { NextPage } from 'next'
import styles from './index.scss';
import { global, Header, Footer } from '../components/global';
const Page: NextPage = () => (
<main>
<Header title="Paul Makles" />
<div className={global.container}>
I have migrated servers hence you're currently seeing the new beta website.<br/>
More stuff to appear soon ™️<br/>
<br/>
<a href="/post/website-design">See the website's design reference post.</a>
</div>
<Footer />
</main>
)
export default Page;
\ No newline at end of file
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, Footer } from '../../components/global';
interface PostProps {
data: {
slug: string,
title: string,
overline: string,
published: string,
hero?: string,
'hero-wide'?: string,
},
content: string,
exists: boolean,
children?: ReactChild,
}
const Page: NextPage = (props: PostProps) => {
if (!props.exists)
return <Error statusCode={404} />
let { slug, title, overline, published, hero } = props.data;
let heroWide = props.data['hero-wide'];
useEffect(() => {
// load prettifier
const classInjector = document.createElement('script');
classInjector.innerHTML = `Array.from(document.querySelectorAll('code')).forEach(x => x.parentNode.tagName === 'PRE' && (x.setAttribute('source', x.innerHTML) || x.parentNode.classList.add('prettyprint')))`;
document.body.appendChild(classInjector);
const styleInjector = document.createElement('script');
styleInjector.src = 'https://cdn.jsdelivr.net/gh/google/[email protected]/loader/run_prettify.js';
styleInjector.async = true;
document.body.appendChild(styleInjector);
}, []);
return (
<main>
<Header title={title} />
<div className={global.container}>
<p className={global.overline}>{overline} &middot; {published}</p>
{ hero && <img src={hero} /> }
</div>
{ heroWide && <div style={{ backgroundImage: `url('${heroWide}')` }} className={global.hero}></div> }
<div className={global.container}>
<ReactMarkdown className={global.md} escapeHtml={false} skipHtml={false} source={props.content} />
<hr/>
{<ReactUtterences repo="insertish/comments" type="pathname" />}
</div>
<Footer />
<link href="https://jmblog.github.io/color-themes-for-google-code-prettify/themes/atelier-cave-dark.min.css" rel="stylesheet" type="text/css" />
</main>
)
}
import { readFileSync, existsSync } from 'fs';
import { ReactChild, useEffect } from 'react'
Page.getInitialProps = async context => {
const { slug } = context.query;
const fn = `posts/${slug}.md`;
if (!existsSync(fn)) {
return {
exists: false,
}
}
const content = readFileSync(fn).toString();
const data = matter(content);
return {
exists: true,
...data,
}
}
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, Footer } from '../../components/global';
interface PostProps {
data: {
slug: string,
title: string,
overline: string,
published: string,
hero?: string,
'hero-wide'?: string,
},
content: string,
exists: boolean,
children?: ReactChild,
}
const Page: NextPage = (props: PostProps) => {
if (!props.exists)
return <Error statusCode={404} />
let { slug, title, overline, published, hero } = props.data;
let heroWide = props.data['hero-wide'];
useEffect(() => {