Skip to content

Commit 60378d9

Browse files
kerbethecoderkerbethecoder
committed
finish redesign on /home, /dev-blueprints
TODO: redesign the rest of the pages
1 parent 8df8e2d commit 60378d9

File tree

6 files changed

+200
-118
lines changed

6 files changed

+200
-118
lines changed

‎app/components/Frontend.jsx

+113
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import { viga, inter } from '@/ui/fonts';
2+
3+
export default function Frontend() {
4+
return (
5+
<section>
6+
<div>
7+
<h2 className={`${viga.className} text-xl`}>Gatsby Quick-Start</h2>
8+
<p className="font-bold text-blck/60">
9+
Personally, creating a Gatsby app using the cli is the ideal way of
10+
starting. There are other methods in the internet if you&apos;re
11+
curious.
12+
</p>
13+
<div className="my-2 space-y-1 px-4 text-sm">
14+
<p>
15+
Install{' '}
16+
<span className={`${inter.className} font-bold`}>gatsby-cli</span>:
17+
</p>
18+
<pre className="w-1/2 rounded bg-blck/80 px-3 py-2">
19+
<code className="font-bold text-yllw">$ npm i -g gatsby-cli</code>
20+
</pre>
21+
<p>Check version to see if it&apos;s installed:</p>
22+
<pre className="w-1/2 rounded bg-blck/80 px-3 py-2">
23+
<code className="font-bold text-yllw">$ gatsby -v</code>
24+
</pre>
25+
<p>
26+
Install the starter site (follow instructions from{' '}
27+
<a
28+
href="https://www.gatsbyjs.com/docs/starters/"
29+
target="_blank"
30+
rel="noopener noreferrer"
31+
className="font-bold text-rd hover:text-rd/70"
32+
>
33+
official docs ↗
34+
</a>
35+
):
36+
</p>
37+
<pre className="w-1/2 whitespace-pre-wrap rounded bg-blck/80 px-3 py-2">
38+
<code className="font-bold text-gry">
39+
# gatsby new dir-name (starter site url)
40+
</code>
41+
<br />
42+
<code className="font-bold text-yllw">
43+
$ gatsby new my-project
44+
https://github.com/gatsbyjs/gatsby-starter-default
45+
</code>
46+
</pre>
47+
<p>Run the final command:</p>
48+
<pre className="w-1/2 whitespace-pre-wrap rounded bg-blck/80 px-3 py-2">
49+
<code className="font-bold text-yllw">$ gatsby develop</code>
50+
</pre>
51+
</div>
52+
</div>
53+
<hr className="my-10 w-3/4 border border-blck/10" />
54+
<div>
55+
<h2 className={`${viga.className} text-xl`}>Creating a NextJS App:</h2>
56+
<div className="my-2 space-y-1 px-4 text-sm">
57+
<p className="mb-2">Start a Next app:</p>
58+
<pre className="w-1/2 whitespace-pre-wrap rounded bg-blck/80 px-3 py-2">
59+
<code className="font-bold text-yllw">
60+
$ npx create-next-app@latest
61+
</code>
62+
</pre>
63+
</div>
64+
<p className="font-bold text-blck/60">
65+
And then follow the prompts! Make sure to use the{' '}
66+
<a
67+
href="https://nextjs.org/docs/app"
68+
target="_blank"
69+
rel="noopener noreferrer"
70+
className="font-bold text-rd hover:text-rd/70"
71+
>
72+
App Router ↗
73+
</a>{' '}
74+
and it is up to you for the other technologies.
75+
</p>
76+
</div>
77+
<hr className="my-10 w-3/4 border border-blck/10" />
78+
<div>
79+
<h2 className={`${viga.className} text-xl`}>Vite Frontend Tooling:</h2>
80+
<div className="my-2 space-y-1 px-4 text-sm">
81+
<p className="mb-2">Starting your first Vite project:</p>
82+
<pre className="w-1/2 whitespace-pre-wrap rounded bg-blck/80 px-3 py-2">
83+
<code className="font-bold text-yllw">
84+
$ npm create vite@latest
85+
</code>
86+
</pre>
87+
<p className="mb-2">Or directly specify the configurations:</p>
88+
<pre className="w-1/2 whitespace-pre-wrap rounded bg-blck/80 px-3 py-2">
89+
<code className="font-bold text-yllw">
90+
$ npm create vite@latest dir_name -- --template vue
91+
</code>
92+
</pre>
93+
<p>
94+
Check the{' '}
95+
<a
96+
href="https://github.com/vitejs/vite/tree/main/packages/create-vite"
97+
target="_blank"
98+
rel="noopener noreferrer"
99+
className="font-bold text-rd hover:text-rd/70"
100+
>
101+
github docs ↗
102+
</a>{' '}
103+
for more template information.
104+
</p>
105+
</div>
106+
<p className="font-bold text-blck/60">
107+
You can also use the &quot;.&quot; for the directory name to scaffold
108+
in the current directory.
109+
</p>
110+
</div>
111+
</section>
112+
);
113+
}

‎app/components/GitCmds.jsx

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { viga, inter } from '@/ui/fonts';
2+
3+
export default function GitCmds() {
4+
return (
5+
<section>
6+
<div>
7+
<h2 className={`${viga.className} text-xl`}>Git Connection</h2>
8+
<div className="my-2 space-y-1 px-4 text-sm">
9+
<p>Connecting local machine to github repo:</p>
10+
<pre className="w-1/2 rounded bg-blck/80 px-3 py-2">
11+
<code className="font-bold text-yllw">
12+
$ git remote add origin ssh_or_https_path
13+
</code>
14+
</pre>
15+
<p>Check if the remote path is added or not:</p>
16+
<pre className="w-1/2 rounded bg-blck/80 px-3 py-2">
17+
<code className="font-bold text-yllw">$ git remote -v</code>
18+
</pre>
19+
<p>
20+
Push to your repo. Add{' '}
21+
<span className={`${inter.className} font-bold`}>-u flag</span> for
22+
first time.
23+
</p>
24+
<pre className="w-1/2 rounded bg-blck/80 px-3 py-2">
25+
<code className="font-bold text-yllw">
26+
$ git push -u origin branch_name
27+
</code>
28+
</pre>
29+
</div>
30+
</div>
31+
</section>
32+
);
33+
}

‎app/components/NavigableTabs.jsx

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
'use client';
2+
3+
import React from 'react';
4+
import { Frontend, GitCmds } from '@/components/index';
5+
6+
export default function NavigableTabs() {
7+
const [activeTab, setActiveTab] = React.useState('Tab1');
8+
const handleTabChange = (newTab) => setActiveTab(newTab);
9+
10+
return (
11+
<section>
12+
<nav className="">
13+
{[
14+
['Tab1', 'front-end'],
15+
['Tab2', 'git cmds'],
16+
].map(([tab, title]) => (
17+
<button
18+
key={tab}
19+
className={`cursor-pointer px-6 py-2 font-bold transition duration-300 ${activeTab === tab ? 'border-b border-blck/40' : 'opacity-40 hover:opacity-100'}`}
20+
onClick={() => handleTabChange(tab)}
21+
>
22+
{title}
23+
</button>
24+
))}
25+
</nav>
26+
27+
<div className={activeTab === 'Tab1' ? 'px-3 py-10' : 'hidden'}>
28+
<Frontend />
29+
</div>
30+
<div className={activeTab === 'Tab2' ? 'px-3 py-10' : 'hidden'}>
31+
<GitCmds />
32+
</div>
33+
</section>
34+
);
35+
}

‎app/components/index.js

+3
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
11
export { default as Nav } from '@/components/Nav';
22
export { default as Footer } from '@/components/Footer';
3+
export { default as NavigableTabs } from '@/components/NavigableTabs';
4+
export { default as Frontend } from '@/components/Frontend';
5+
export { default as GitCmds } from '@/components/GitCmds';

‎app/dev-blueprints/page.jsx

+4-106
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { viga, inter } from '@/ui/fonts';
1+
import { viga } from '@/ui/fonts';
2+
import { NavigableTabs } from '@/components/index';
23

34
export default function DevBlueprints() {
45
const templates = {
@@ -60,6 +61,7 @@ export default function DevBlueprints() {
6061
practical insights for developers.
6162
</p>
6263
<div className="custom-scrollbar my-6 flex flex-row gap-4 overflow-x-auto py-4">
64+
{/* TODO: put this on a separate page */}
6365
{Object.keys(templates).map((template, index) => (
6466
<div
6567
key={index}
@@ -97,111 +99,7 @@ export default function DevBlueprints() {
9799
))}
98100
</div>
99101
<hr className="my-14 border border-blck/10" />
100-
<div>
101-
<h2 className={`${viga.className} text-xl`}>Gatsby Quick-Start</h2>
102-
<p className="font-bold text-blck/60">
103-
Personally, creating a Gatsby app using the cli is the ideal way of
104-
starting. There are other methods in the internet if you&apos;re
105-
curious.
106-
</p>
107-
<div className="my-2 space-y-1 px-4 text-sm">
108-
<p>
109-
Install{' '}
110-
<span className={`${inter.className} font-bold`}>gatsby-cli</span>:
111-
</p>
112-
<pre className="w-1/2 rounded bg-blck/80 px-3 py-2">
113-
<code className="font-bold text-yllw">$ npm i -g gatsby-cli</code>
114-
</pre>
115-
<p>Check version to see if it&apos;s installed:</p>
116-
<pre className="w-1/2 rounded bg-blck/80 px-3 py-2">
117-
<code className="font-bold text-yllw">$ gatsby -v</code>
118-
</pre>
119-
<p>
120-
Install the starter site (follow instructions from{' '}
121-
<a
122-
href="https://www.gatsbyjs.com/docs/starters/"
123-
target="_blank"
124-
rel="noopener noreferrer"
125-
className="font-bold text-rd hover:text-rd/70"
126-
>
127-
official docs ↗
128-
</a>
129-
):
130-
</p>
131-
<pre className="w-1/2 whitespace-pre-wrap rounded bg-blck/80 px-3 py-2">
132-
<code className="font-bold text-gry">
133-
# gatsby new dir-name (starter site url)
134-
</code>
135-
<br />
136-
<code className="font-bold text-yllw">
137-
$ gatsby new my-project
138-
https://github.com/gatsbyjs/gatsby-starter-default
139-
</code>
140-
</pre>
141-
<p>Run the final command:</p>
142-
<pre className="w-1/2 whitespace-pre-wrap rounded bg-blck/80 px-3 py-2">
143-
<code className="font-bold text-yllw">$ gatsby develop</code>
144-
</pre>
145-
</div>
146-
</div>
147-
<hr className="my-10 border border-blck/10" />
148-
<div>
149-
<h2 className={`${viga.className} text-xl`}>Creating a NextJS App:</h2>
150-
<div className="my-2 space-y-1 px-4 text-sm">
151-
<p className="mb-2">Start a Next app:</p>
152-
<pre className="w-1/2 whitespace-pre-wrap rounded bg-blck/80 px-3 py-2">
153-
<code className="font-bold text-yllw">
154-
$ npx create-next-app@latest
155-
</code>
156-
</pre>
157-
</div>
158-
<p className="font-bold text-blck/60">
159-
And then follow the prompts! Make sure to use the{' '}
160-
<a
161-
href="https://nextjs.org/docs/app"
162-
target="_blank"
163-
rel="noopener noreferrer"
164-
className="font-bold text-rd hover:text-rd/70"
165-
>
166-
App Router ↗
167-
</a>{' '}
168-
and it is up to you for the other technologies.
169-
</p>
170-
</div>
171-
<hr className="my-10 border border-blck/10" />
172-
<div>
173-
<h2 className={`${viga.className} text-xl`}>Vite Frontend Tooling:</h2>
174-
<div className="my-2 space-y-1 px-4 text-sm">
175-
<p className="mb-2">Starting your first Vite project:</p>
176-
<pre className="w-1/2 whitespace-pre-wrap rounded bg-blck/80 px-3 py-2">
177-
<code className="font-bold text-yllw">
178-
$ npm create vite@latest
179-
</code>
180-
</pre>
181-
<p className="mb-2">Or directly specify the configurations:</p>
182-
<pre className="w-1/2 whitespace-pre-wrap rounded bg-blck/80 px-3 py-2">
183-
<code className="font-bold text-yllw">
184-
$ npm create vite@latest dir_name -- --template vue
185-
</code>
186-
</pre>
187-
<p>
188-
Check the{' '}
189-
<a
190-
href="https://github.com/vitejs/vite/tree/main/packages/create-vite"
191-
target="_blank"
192-
rel="noopener noreferrer"
193-
className="font-bold text-rd hover:text-rd/70"
194-
>
195-
github docs ↗
196-
</a>{' '}
197-
for more template information.
198-
</p>
199-
</div>
200-
<p className="font-bold text-blck/60">
201-
You can also use the &quot;.&quot; for the directory name to scaffold
202-
in the current directory.
203-
</p>
204-
</div>
102+
<NavigableTabs />
205103
</main>
206104
);
207105
}

‎tailwind.config.js

+12-12
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,18 @@ module.exports = {
1212
'gradient-conic':
1313
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
1414
},
15-
},
16-
colors: {
17-
yllw: '#F6BD60',
18-
whte: '#EEEEEE',
19-
rd: '#E76F51',
20-
cyn: '#CBF3F0',
21-
blgrn: '#2EC4B6',
22-
bge: '#F7EDE2',
23-
blck: '#1A1A1A',
24-
gry: '#999999',
25-
drkgry: '#636363',
26-
outline: '#3F3F3F',
15+
colors: {
16+
yllw: '#F6BD60',
17+
whte: '#EEEEEE',
18+
rd: '#E76F51',
19+
cyn: '#CBF3F0',
20+
blgrn: '#2EC4B6',
21+
bge: '#F7EDE2',
22+
blck: '#1A1A1A',
23+
gry: '#999999',
24+
drkgry: '#636363',
25+
outline: '#3F3F3F',
26+
},
2727
},
2828
},
2929
plugins: [],

0 commit comments

Comments
 (0)