Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor index layout into its own React component #51

Merged
merged 2 commits into from
Sep 7, 2022
Merged

Refactor index layout into its own React component #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
52eb850
Refactor index layout into its own React component
hllywluis Sep 7, 2022
586a4f6
Merge branch 'main' into feature/grid-refactoring
hllywluis Sep 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
100 changes: 100 additions & 0 deletions layouts/grid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import Container from "react-bootstrap/Container"
import Postcard from "../components/postcard"

export default function Grid() {
return (
<>
<Container className="my-auto pt-2">
<div className="row">
<div className="col-md-6 py-2">
<Postcard
title="Welcome to Kleptonix"
author="Luis Bauza"
username="luis"
klepton="kleptonix"
text={
"##### Make yourself at home!\n" +
'Kleptonix allows developers (like you and I) to quickly and easily get in touch with others to create something new. Communities are denoted by "Kleptons," and each Klepton has a different topic. It fits in with the site\'s name, after all!\n' +
"##### How do I subscribe to a Klepton?\n" +
"You'll first want to head to the Klepton's page. Since this website is under construction, Kleptons themselves haven't been implemented yet.\n" +
"##### When will the website be finished?\n" +
"There's always something new to add or a bug to fix. I don't anticipate development ever finishing but most functionality should be implemented within the next few years (this is a side project, after all)."
}
views={1}
replies={1}
/>
</div>
<div className="col-md-6 py-2">
<Postcard
title="The Beauty of JavaScript"
author="John Doe"
username="jdoe"
klepton="javascript"
text={
"##### What is JavaScript?\n" +
'JavaScript is a programming language designed to make your life easier. In fact, this website is made using a subset of JavaScript called TypeScript. You can think of it like an "extension" of JavaScript that allows for more control over types and keeps applications running more reliably.\n' +
"##### Why should I care?\n" +
"In addition to being one of the most widely used languages on the Web, JavaScript is also used for certain desktop applications. Node.js allows developers to create desktop applications using JavaScript. Making web applications becomes much easier and faster using this language. If this website is made using JavaScript, just imagine what you might be able to create using it!"
}
views={0}
replies={0}
/>
</div>
</div>
</Container>
<Container className="my-auto">
<div className="row">
<div className="col py-2">
<Postcard
title="Python is Cool"
author="Bryan Grigorie"
username="bgregz"
klepton="python"
text={
"##### What is Python?\n" +
"Python is one of the most popular programming languages. It's used to make Flask applications, and it's used to make Django applications. I use it everyday at work, and I've also made Django apps in the past for school.\n" +
"##### Why is Python so popular?\n" +
"You'll probably use Python in your job too, if you're not already using it. It's a great language to learn, and it's a great language to use. I've used Python for a lot of things, and I'm pretty sure I'll use it again. It's one of those languages that I don't think will ever die down in popularity, unless something even more efficient becomes available.\n\n" +
"For those that are still learning programming, Python is a great starter language."
}
views={0}
replies={0}
/>
</div>
</div>
</Container>
<Container className="my-auto">
<div className="row">
<div className="col-md-6 py-2">
<Postcard
title="Rust is Uncool"
author="John Doe"
username="jdoe"
klepton="rust"
text={
"##### What is Rust?\n" +
"Rust is a programming language. We don't need to talk about it, unless there's some reason why you need to crunch numbers."
}
views={0}
replies={0}
/>
</div>
<div className="col-md-6 py-2">
<Postcard
title="Java is Not a Programming Language"
author="Luis Bauza"
username="luis"
klepton="java"
text={
"##### What is Java?\n" +
"Believe it or not, most developers don't know that Java refers to a cup of coffee and not a programming language."
}
views={0}
replies={0}
/>
</div>
</div>
</Container>
</>
)
}
10 changes: 5 additions & 5 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,26 +7,26 @@
"start": "next start -p ${PORT:=3000}"
},
"dependencies": {
"@babel/core": "^7.18.13",
"@babel/core": "^7.19.0",
"@popperjs/core": "^2.11.6",
"@prisma/client": "4.3.0",
"@prisma/client": "4.3.1",
"@sourcegraph/src": "^3.43.1",
"bcrypt": "^5.0.1",
"bootstrap": "^5.2.0",
"caniuse-lite": "^1.0.30001387",
"caniuse-lite": "^1.0.30001390",
"html-react-parser": "^3.0.4",
"lodash": "^4.17.21",
"next": "latest",
"next-auth": "^4.10.3",
"prisma": "^4.3.0",
"prisma": "^4.3.1",
"react": "^18.2.0",
"react-bootstrap": "^2.5.0",
"react-dom": "^18.2.0",
"showdown": "^2.1.0",
"swr": "^1.3.0"
},
"devDependencies": {
"@types/node": "^18.7.14",
"@types/node": "^18.7.15",
"typescript": "^4.8.2"
}
}
93 changes: 2 additions & 91 deletions pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Head from "next/head"
import Button from "react-bootstrap/Button"
import Container from "react-bootstrap/Container"

import Grid from "../layouts/grid"
import KleptonixNavbar from "../components/navbar"
import Postcard from "../components/postcard"
import { linkStyle } from "../styles/linkStyle"
Expand Down Expand Up @@ -123,97 +124,7 @@ export default function Home({ user }) {
)}

{/* TODO: Add post functionality below this comment. */}
<Container className="my-auto pt-2">
<div className="row">
<div className="col-md-6 py-2">
<Postcard
title="Welcome to Kleptonix"
author="Luis Bauza"
username="luis"
klepton="kleptonix"
text={
"##### Make yourself at home!\n" +
'Kleptonix allows developers (like you and I) to quickly and easily get in touch with others to create something new. Communities are denoted by "Kleptons," and each Klepton has a different topic. It fits in with the site\'s name, after all!\n' +
"##### How do I subscribe to a Klepton?\n" +
"You'll first want to head to the Klepton's page. Since this website is under construction, Kleptons themselves haven't been implemented yet.\n" +
"##### When will the website be finished?\n" +
"There's always something new to add or a bug to fix. I don't anticipate development ever finishing but most functionality should be implemented within the next few years (this is a side project, after all)."
}
views={1}
replies={1}
/>
</div>
<div className="col-md-6 py-2">
<Postcard
title="The Beauty of JavaScript"
author="John Doe"
username="jdoe"
klepton="javascript"
text={
"##### What is JavaScript?\n" +
'JavaScript is a programming language designed to make your life easier. In fact, this website is made using a subset of JavaScript called TypeScript. You can think of it like an "extension" of JavaScript that allows for more control over types and keeps applications running more reliably.\n' +
"##### Why should I care?\n" +
"In addition to being one of the most widely used languages on the Web, JavaScript is also used for certain desktop applications. Node.js allows developers to create desktop applications using JavaScript. Making web applications becomes much easier and faster using this language. If this website is made using JavaScript, just imagine what you might be able to create using it!"
}
views={0}
replies={0}
/>
</div>
</div>
</Container>
<Container className="my-auto">
<div className="row">
<div className="col py-2">
<Postcard
title="Python is Cool"
author="Bryan Grigorie"
username="bgregz"
klepton="python"
text={
"##### What is Python?\n" +
"Python is one of the most popular programming languages. It's used to make Flask applications, and it's used to make Django applications. I use it everyday at work, and I've also made Django apps in the past for school.\n" +
"##### Why is Python so popular?\n" +
"You'll probably use Python in your job too, if you're not already using it. It's a great language to learn, and it's a great language to use. I've used Python for a lot of things, and I'm pretty sure I'll use it again. It's one of those languages that I don't think will ever die down in popularity, unless something even more efficient becomes available.\n\n" +
"For those that are still learning programming, Python is a great starter language."
}
views={0}
replies={0}
/>
</div>
</div>
</Container>
<Container className="my-auto">
<div className="row">
<div className="col-md-6 py-2">
<Postcard
title="Rust is Uncool"
author="John Doe"
username="jdoe"
klepton="rust"
text={
"##### What is Rust?\n" +
"Rust is a programming language. We don't need to talk about it, unless there's some reason why you need to crunch numbers."
}
views={0}
replies={0}
/>
</div>
<div className="col-md-6 py-2">
<Postcard
title="Java is Not a Programming Language"
author="Luis Bauza"
username="luis"
klepton="java"
text={
"##### What is Java?\n" +
"Believe it or not, most developers don't know that Java refers to a cup of coffee and not a programming language."
}
views={0}
replies={0}
/>
</div>
</div>
</Container>
<Grid />
</>
</Container>
</>
Expand Down