Skip to content

Commit 13f3e59

Browse files
skazi019skazi019
committed
✅ image fullscreen, typography, kaushalsharma.in; 📌 animations?
1 parent 756292d commit 13f3e59

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+218
-671
lines changed

‎.dockerignore

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
2+
/node_modules
3+
/.pnp
4+
.pnp.js
5+
6+
.DS_Store
7+
.env.local
8+
.env.development.local
9+
.env.test.local
10+
.env.production.local
11+
12+
npm-debug.log*
13+
yarn-debug.log*
14+
yarn-error.log*
15+
16+
.venv
17+
.env
18+
/staticfiles
19+
TODO.md
20+
.idea
21+
22+
/public
23+
/src
24+
.gitignore
25+
package.json
26+
package-lock.json
27+
Pipfile
28+
Pipfile.lock
29+
postcss.config.js
30+
README.md
31+
tailwind.config.js
32+
LICENSE

‎.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -26,4 +26,5 @@ yarn-error.log*
2626
.venv
2727
.env
2828
/staticfiles
29-
TODO.md
29+
TODO.md
30+
.idea

‎.idea/.gitignore

-3
This file was deleted.

‎.idea/blog-notion.iml

-17
This file was deleted.

‎.idea/dbnavigator.xml

-459
This file was deleted.

‎.idea/inspectionProfiles/Project_Default.xml

-63
This file was deleted.

‎.idea/inspectionProfiles/profiles_settings.xml

-6
This file was deleted.

‎.idea/misc.xml

-7
This file was deleted.

‎.idea/modules.xml

-8
This file was deleted.

‎.idea/vcs.xml

-6
This file was deleted.

‎README.md

+2-26
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,6 @@
11
# Notion Blog
22

3-
> A simple blog built using Django RestFramework and React using Notion as a CMS
4-
5-
<br />
6-
7-
### Table of Contents
8-
- [Notion Blog](#notion-blog)
9-
- [Table of Contents](#table-of-contents)
10-
- [Motivation](#motivation)
11-
- [Features](#features)
12-
- [Why is backend required? Why not just build it in React?](#why-is-backend-required-why-not-just-build-it-in-react)
13-
- [Techstack](#techstack)
14-
- [Why React?](#why-react)
15-
- [Why Django?](#why-django)
16-
- [Why Notion?](#why-notion)
17-
- [Main Challenges Faced?](#main-challenges-faced)
18-
- [Nesting lists till the end(used recursion or DFS)](#nesting-lists-till-the-endused-recursion-or-dfs)
19-
- [Run it Locally](#run-it-locally)
20-
- [Backend](#backend)
21-
- [Frontend](#frontend)
22-
- [Port backend to another language](#port-backend-to-another-language)
23-
- [Perparing for Production](#perparing-for-production)
24-
- [Deployment](#deployment)
25-
- [Unsuppported Blocks](#unsuppported-blocks)
3+
> A simple blog built using **Django** **RestFramework** and **React** using **Notion** as a CMS
264
275
<br />
286

@@ -46,7 +24,7 @@
4624
- Twitter
4725
- WhatsApp
4826
- Clipboard
49-
- Ease of use - Notion as a CMS
27+
- Ease of publishing and styling - Notion as a CMS
5028
- Analytics(google analytics)
5129
- Once deployed, no wrangling with code again
5230

@@ -66,8 +44,6 @@ Due to this there's not much to be done in the backend, just calling the officia
6644
## Why React?
6745
I'm currently learning react and being a beginner I wanted to build a real world project with it to learn and understand about its fundamentals as well as state management
6846

69-
<br />
70-
7147
## Why Django?
7248
I'm primaryly a python developer and have some expeirence with django and django rest framework so that felt the optimum choice instead of learning node/express getting even more frustrated than I already am.
7349

‎fly.toml

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# fly.toml file generated for notion-blog on 2022-10-12T16:02:48+05:30
1+
# fly.toml file generated for notion-blog on 2022-10-17T10:43:35+05:30
22

33
app = "notion-blog"
44

@@ -8,10 +8,11 @@ processes = []
88

99
[env]
1010
PORT = "8080"
11-
REACT_APP_BACKEND_URI="https://notion-blog.fly.dev"
11+
REACT_APP_BACKEND_URI="https://kaushalsharma.in"
1212
DJANGO_KEY="hg0$b@rixdadqlv^&tbkxqoh4dj+ky_tq2zx_8^vbyduzn(f$8ad9f2q3*(YUY97y98Y01IE20937GP08yf89h490FHJ8HF98HFP09SYS8(Y98Y*DD9yf9834hr93f#$(*"
1313
NOTION_TOKEN="secret_zYUFAxASmO0srxa1yzOEYcGsU6Ub0vRNXaRE6RXHur0"
1414
NOTION_DATABASE_ID="045eeab65ac04ca88c8b450a5deffcb2"
15+
REACT_APP_GA_MEASUREMENT_ID="G-D3YVT4NVL7"
1516

1617
[experimental]
1718
allowed_public_ports = []

‎public/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33

44
<head>
55
<meta charset="utf-8" />
6-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<link rel="icon" href="%PUBLIC_URL%/logos/KS logo-04.png" />
77
<meta name="viewport" content="width=device-width, initial-scale=1" />
88
<meta name="theme-color" content="#000000" />
99
<meta name="description"
1010
content="Kaushal's blog is where I jot down all the tech stuff or problem solutions I discover on my fullstack software engineering journey exploring premises of languages such as python and it's framework like django and django rest framework and javascript and its various frameworks like react." />
11-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
11+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logos/KS logo-04.png" />
1212
<!--
1313
manifest.json provides metadata used when your web app is installed on a
1414
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

‎public/logos/KS logo-01.png

242 KB
Loading

‎public/logos/KS logo-03.png

443 KB
Loading

‎public/logos/KS logo-04.png

276 KB
Loading

‎public/logos/KS logo-07.png

351 KB
Loading

‎src/App.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ export default function App() {
1515

1616

1717
return (
18-
<main className="min-h-screen w-screen dark:bg-neutral-800 dark:text-gray-200">
19-
<section className="transition flex flex-col justify-center items-center pb-8">
18+
<main className="min-h-screen w-screen transition duration-300 dark:bg-neutral-800 dark:text-gray-200">
19+
<section className="flex flex-col justify-center items-center pb-8">
2020
<div className="place-self-end p-4">
2121
<DarkMode />
2222
</div>

‎src/Components/NotionComponents/bookmark.jsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,15 @@ import Text from './text';
44
export default function Bookmark(props) {
55
const text = props.text;
66
const url = props.url;
7+
const fontType = props.fontType;
78

89
return (
910
<div className='my-4'>
1011
<a href={url} target="_brank" className='p-4 border rounded flex flex-row justify-start items-start gap-2'>
1112
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
1213
<path strokeLinecap="round" strokeLinejoin="round" d="M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9" />
1314
</svg>
14-
<Text text={text} />
15+
<Text text={text} fontType={fontType} />
1516
</a>
1617
</div>
1718

‎src/Components/NotionComponents/callout.jsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@ import { colorToClass } from './colors';
55
export default function Callout(props) {
66
const text = props.text;
77
const color = props.color;
8+
const fontType = props.fontType;
89

910
return (
1011
<div className={`transition mx-8 my-4 p-4 rounded-md ${colorToClass[color]}`}>
11-
<Text text={text} />
12+
<Text text={text} fontType={fontType} />
1213
</div>
1314
)
1415
}

‎src/Components/NotionComponents/heading.jsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ export default function Heading(props) {
66
const type = props.type;
77

88
const headingClasses = {
9-
"heading_1": "text-3xl font-medium pb-2 pt-4",
10-
"heading_2": "text-2xl font-medium pb-2 pt-4",
11-
"heading_3": "text-xl font-medium pb-2 pt-4",
9+
"heading_1": "text-3xl font-semibold pb-2 pt-4",
10+
"heading_2": "text-2xl font-semibold pb-2 pt-4",
11+
"heading_3": "text-xl font-semibold pb-2 pt-4",
1212
}
1313

1414
const headingTag = function (type, text, classes) {

‎src/Components/NotionComponents/image.jsx

+9-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,19 @@
1-
import React from 'react'
1+
import React, { useRef } from 'react'
22

33
export default function Image(props) {
44
const src = props.src;
55
const caption = props.caption
66

7+
const imageRef = useRef();
8+
9+
const openImg = () => {
10+
window.open(imageRef.current.src);
11+
}
12+
13+
714
return (
815
<figure className='flex flex-col justify-center items-center'>
9-
<img src={src} alt={caption} className='rounded-md' loading='lazy' />
16+
<img ref={imageRef} onClick={openImg} src={src} alt={caption} className='rounded-md cursor-zoom-in' loading='lazy' />
1017
{caption && <figcaption className='italic text-sm text-gray-400'>{caption}</figcaption>}
1118
</figure>
1219
);

‎src/Components/NotionComponents/lists.jsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,17 @@ export default function List(props) {
66
const text = props.text;
77
const type = props.type;
88
const children = props.children ? props.children : false;
9+
const fontType = props.fontType;
910

10-
const listTag = function (type, text) {
11+
const listTag = function (type, text, font) {
1112

1213
switch (type) {
1314
case 'numbered_list_item':
1415
case 'bulleted_list_item':
1516
return (
1617
<ul className='list-disc'>
1718
<li>
18-
<Text text={text} />
19+
<Text text={text} fontType={font} />
1920
</li>
2021
{
2122
children ? (
@@ -36,7 +37,7 @@ export default function List(props) {
3637

3738
return (
3839
<div className={`px-8`}>
39-
{listTag(type, text)}
40+
{listTag(type, text, fontType)}
4041
</div>
4142
);
4243
}

‎src/Components/NotionComponents/pararaph.jsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@ import Text from "./text";
22

33
export default function Paragraph(props) {
44
const text = props.text;
5+
const fontType = props.fontType;
56
const extraClasses = props.extraClasses;
67

78
return (
89
<p>
9-
<Text text={text} extraClasses={extraClasses} />
10+
<Text text={text} extraClasses={extraClasses} fontType={fontType} />
1011
</p>
1112
);
1213

‎src/Components/NotionComponents/quote.jsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@ export default function Quote(props) {
44
const text = props.text
55
const id = props.id
66
const color = props.color
7+
const fontType = props.fontType;
78

89
const colorToClass = {
9-
"default": "border-l-4 border-gray-600",
10+
"default": "border-l-4 border-slate-800",
1011
"gray": "border-l-4 border-gray-600",
1112
"brown": "border-l-4 border-amber-500",
1213
"orange": "border-l-4 border-orange-500",
@@ -29,8 +30,8 @@ export default function Quote(props) {
2930

3031
return (
3132
<div className="px-8 my-8">
32-
<blockquote id={id} className={`p-2 text-xl italic text-zinc-500 dark:text-zinc-300 ${colorToClass[color]}`}>
33-
<Text text={text} extraClasses="pl-2" />
33+
<blockquote id={id} className={`p-2 text-lg font-semibold italic text-zinc-500 dark:text-zinc-300 ${colorToClass[color]}`}>
34+
<Text text={text} extraClasses="pl-2" fontType={fontType} />
3435
</blockquote>
3536
</div>
3637
);

0 commit comments

Comments
 (0)