Skip to content

Commit

Permalink
Add blog (#16)
Browse files Browse the repository at this point in the history
* Add blog

* Add node types

* Update tsconfig

* Fix type issues

* Update build settings

* Rename blog route
  • Loading branch information
TejasQ committed Jan 14, 2020
1 parent 2a9d355 commit 08904f2
Show file tree
Hide file tree
Showing 43 changed files with 630 additions and 120 deletions.
17 changes: 13 additions & 4 deletions README.md
Expand Up @@ -10,23 +10,32 @@ This website is meant to be _fun_ and _funny_ and all kinds of wonderful. Here a

#### Tej-variants

On every load of the web page, a different "nickname" of mine is displayed. I call these "Tej-variants". [See for yourself!](https://tejaskumar.com) You could [add your own](https://github.com/TejasQ/tejaskumar.com/edit/master/util/tej-variants.ts) interesting Tej-variant (like **Tejackson** or something) if you like.
On every load of the web page, a different "nickname" of mine is displayed. I call these "Tej-variants".
[See for yourself!](https://tejaskumar.com) You could
[add your own](https://github.com/TejasQ/tejaskumar.com/edit/master/util/tej-variants.ts) interesting Tej-variant (like
**Tejackson** or something) if you like.

#### Photos

As you move your cursor (desktop) or tap (mobile), [you see different pictures of me](https://tejaskumar.com) Including [me as a flower 🌷](https://github.com/TejasQ/tejaskumar.com/blob/master/static/tejass/13.png). You could add a picture of me as weird as you'd like [like this](https://github.com/TejasQ/tejaskumar.com/pull/2/files) and we can have some fun.
As you move your cursor (desktop) or tap (mobile), [you see different pictures of me](https://tejaskumar.com) Including
[me as a flower 🌷](https://github.com/TejasQ/tejaskumar.com/blob/master/public/tejass/13.png). You could add a picture
of me as weird as you'd like [like this](https://github.com/TejasQ/tejaskumar.com/pull/2/files) and we can have some
fun.

### Lighthouse

![Current Lighthouse Status](https://raw.githubusercontent.com/TejasQ/tejaskumar.com/master/img/audit.png)

If you're into [lighthouse metrics](https://developers.google.com/web/tools/lighthouse/), let's try to get this site to have a 100% lighthouse score together!
If you're into [lighthouse metrics](https://developers.google.com/web/tools/lighthouse/), let's try to get this site to
have a 100% lighthouse score together!

To help improve it:

1. Open your **Chrome DevTools**
1. Go to **Audits**
1. Start an audit
1. Identify [action steps from the audit](https://raw.githubusercontent.com/TejasQ/tejaskumar.com/master/img/audit-2.png) and do them
1. Identify
[action steps from the audit](https://raw.githubusercontent.com/TejasQ/tejaskumar.com/master/img/audit-2.png) and do
them
1. Open a PR with your changes
1. Let's merge it and learn about web performance together! 🚀
21 changes: 16 additions & 5 deletions components/A.tsx
@@ -1,11 +1,22 @@
import styled from "@emotion/styled";

const A = styled.a`
text-decoration: none;
color: ${({ color }) => color || "black"};
const A = styled.a<{ size?: number; color?: string }>`
display: block;
text-decoration: none !important;
color: ${({ color }) => color || "black"} !important;
font-size: ${({ size }) => `${size}px` || "inherit"};
transition: 0.3s transform ease, 0.3s margin ease;
:hover {
text-decoration: underline;
@media (prefers-color-scheme: dark) {
color: ${({ color }) => color || "white"} !important;
}
@media (hover: hover) {
:hover {
text-decoration: underline;
transform: translateY(8px) scale(1.5);
margin: 0 16px;
}
}
`;

Expand Down
46 changes: 46 additions & 0 deletions components/BlogPost.tsx
@@ -0,0 +1,46 @@
import styled from "@emotion/styled";

import { navHeight } from "./Nav";

const BlogPost = styled.div`
margin: 0 auto;
max-width: 768px;
padding: 0 16px;
font-family: Georgia, serif;
font-size: 18px;
height: calc(100vh - ${navHeight}px);
overflow: auto;
-webkit-overflow-scrolling: touch;
backdrop-filter: blur(20px);
border-top: 1px solid #fff2;
border-left: 1px solid #fff2;
border-right: 1px solid #fff2;
border-top-left-radius: 4px;
border-top-right-radius: 4px;

h2 {
margin-top: 40px;
::after {
content: "";
display: block;
height: 1px;
background: #ccc;
margin-top: 4px;
}
}

@media (min-width: 768px) {
padding: 16px;
}

@media (prefers-color-scheme: dark) {
background-color: #0002;
box-shadow: 0 12px 32px #0006;

h2::after {
background: #fff2;
}
}
`;

export default BlogPost;
35 changes: 35 additions & 0 deletions components/Breadcrumb.tsx
@@ -0,0 +1,35 @@
import React, { FC, Fragment } from "react";
import styled from "@emotion/styled";

const Container = styled.div`
display: none;
@media (min-width: 768px) {
display: flex;
font-size: 14px;
letter-spacing: 1px;
}
`;

const Separator = styled.span`
margin: 0 8px;
`;

const Breadcrumb: FC<{ path: Array<{ label: string; link?: string }> }> = ({ path }) => {
return (
<Container>
{path.map((part, index) =>
part.link ? (
<Fragment key={part.link}>
<a href={part.link}>{part.label}</a>
{index < path.length - 1 && <Separator>/</Separator>}
</Fragment>
) : (
part.label
),
)}
</Container>
);
};

export default Breadcrumb;
42 changes: 42 additions & 0 deletions components/Card.tsx
@@ -0,0 +1,42 @@
import styled from "@emotion/styled";

const Card = styled.div<{ center?: boolean }>`
max-width: 768px;
border-radius: 4px;
box-shadow: 0 6px 8px #0001;
padding: 24px;
backdrop-filter: blur(20px);
transition: box-shadow 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
cursor: pointer;
z-index: 2;
background-color: #fff;
border: 1px solid #0002;
${({ center }) => {
if (center) {
return `display: grid; align-items: center; justify-content: center;text-align: center;`;
}
return "";
}}
:hover {
transform: translateY(-4px);
background-color: #fff1;
box-shadow: 0 12px 32px #0003;
}
h2 {
font-size: 24px;
margin: 0;
}
@media (prefers-color-scheme: dark) {
background-color: #0002;
border: 1px solid #fff2;
box-shadow: 0 6px 8px #0003;
:hover {
box-shadow: 0 12px 32px #0006;
}
}
`;

export default Card;
12 changes: 0 additions & 12 deletions components/Container.tsx

This file was deleted.

12 changes: 12 additions & 0 deletions components/Nav.tsx
@@ -1,5 +1,7 @@
import styled from "@emotion/styled";

export const navHeight = 50;

const Nav = styled.nav`
position: fixed;
top: 40px;
Expand All @@ -8,6 +10,12 @@ const Nav = styled.nav`
margin: 0 auto;
font-size: 14px;
letter-spacing: 1px;
height: ${navHeight}px;
display: flex;
top: 0;
background: #fffd;
backdrop-filter: blur(10px);
z-index: 100;
ul {
padding: 0;
Expand All @@ -21,6 +29,10 @@ const Nav = styled.nav`
li + li {
margin-left: 16px;
}
@media (prefers-color-scheme: dark) {
background: #0003;
}
`;

export default Nav;
11 changes: 11 additions & 0 deletions components/SectionHeading.tsx
@@ -0,0 +1,11 @@
import styled from "@emotion/styled";

const SectionHeading = styled.span`
text-transform: uppercase;
margin-top: 40px;
margin-bottom: 8px;
font-family: "DM Sans";
font-weight: bold;
`;

export default SectionHeading;
6 changes: 4 additions & 2 deletions components/Title.tsx
@@ -1,16 +1,18 @@
import styled from "@emotion/styled";

const Title = styled.h1<{ length: number }>`
const Title = styled.h1<{ length: number; color?: string }>`
font-size: ${({ length }) => (length > 9 ? 12 : 17)}vw;
font-weight: 400;
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0;
padding: 0;
z-index: -1;
z-index: 1;
line-height: 1;
width: 100%;
text-align: center;
color: ${({ color }) => color || "inherit"};
`;

export default Title;
55 changes: 55 additions & 0 deletions hooks/useBlog.ts
@@ -0,0 +1,55 @@
import { useState, useEffect } from "react";

type Posts = {
title: string;
excerpt: string;
}[];

export const useBlog = () => {
const [posts, setPosts] = useState<Posts | null>(null);

useEffect(() => {
fetch("https://api.github.com/graphql", {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${process.env.GITHUB_TOKEN}`,
},
method: "POST",
body: JSON.stringify({
query: `{
repository(name: "tejaskumar.com", owner: "TejasQ") {
object(expression: "master:blog") {
... on Tree {
entries {
name
object {
... on Blob {
text
}
}
}
}
}
}
}
`,
}),
})
.then(r => r.json())
.then(r =>
setPosts(
r.data.repository.object.entries.reverse().map((e: {name:string,object:{text:string}}) => ({
title: e.name.replace(".md", ""),
excerpt:
e.object.text
.split("\n")
.slice(1)
.join("\n")
.slice(0, 260) + "...",
})),
),
);
}, []);

return posts;
};
2 changes: 2 additions & 0 deletions next-env.d.ts
@@ -0,0 +1,2 @@
/// <reference types="next" />
/// <reference types="next/types/global" />
22 changes: 4 additions & 18 deletions next.config.js
@@ -1,19 +1,5 @@
// next.config.js
const withTypescript = require("@zeit/next-typescript");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");

module.exports = withTypescript({
target: "serverless",

webpack(config, options) {
// Do not run type checking twice:
if (options.isServer) config.plugins.push(new ForkTsCheckerWebpackPlugin());

return {
...config,
node: {
fs: "empty",
},
};
module.exports = {
env: {
GITHUB_TOKEN: process.env.GITHUB_TOKEN,
},
});
};
11 changes: 8 additions & 3 deletions now.json
@@ -1,8 +1,13 @@
{
"version": 2,
"builds": [{ "src": "package.json", "use": "@now/next@canary" }],
"routes": [{ "src": "/static/tejass/.*", "headers": { "cache-control": "s-maxage=31557600" } }],
"builds": [{ "src": "package.json", "use": "@now/next" }],
"routes": [{ "src": "/public/tejass/.*", "headers": { "cache-control": "s-maxage=31557600" } }],
"public": true,
"regions": ["all"],
"alias": ["tejaskumar.com", "www.tejaskumar.com", "xn--pn8hl7g.ws"]
"alias": ["tejaskumar.com", "www.tejaskumar.com", "xn--pn8hl7g.ws"],
"build": {
"env": {
"GITHUB_TOKEN": "@github-token"
}
}
}
3 changes: 2 additions & 1 deletion package.json
Expand Up @@ -14,14 +14,15 @@
"@emotion/styled": "^10.0.6",
"@types/react": "^16.8.1",
"@zeit/next-typescript": "^1.1.1",
"case": "^1.6.2",
"next": "^9.1.7",
"react": "^16.8.0-alpha.1",
"react-dom": "^16.8.0-alpha.1",
"react-ga": "^2.5.7",
"react-markdown": "^4.3.1"
},
"devDependencies": {
"@types/node": "^12.0.8",
"@types/node": "^13.1.6",
"@types/react-ga": "^2.3.0",
"fork-ts-checker-webpack-plugin": "^0.5.2",
"typescript": "^3.4.0-dev.20190202"
Expand Down

1 comment on commit 08904f2

@vercel
Copy link

@vercel vercel bot commented on 08904f2 Jan 14, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.