Skip to content

Commit 8c5046d

Browse files
authored
Merge pull request #247 from Dumb-Code/docs
Start Docs Setup
2 parents 75a7548 + 48d9919 commit 8c5046d

File tree

29 files changed

+1559
-12
lines changed

29 files changed

+1559
-12
lines changed

components/docs/Footer.tsx

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import Link from 'next/link';
2+
import { SvgPoweredByVercel } from '../../src/components/Icons';
3+
4+
const Footer = () => {
5+
return (
6+
<footer className="footer bg-gray-900 xl:px-60 lg:px-20 px-0 py-20">
7+
<div className="grid grid-flow-row md:grid-cols-4 px-4 md:px-20 lg:grid-cols-7 gap-y-10 gap-x-10 lg:gap-x-2">
8+
<div className="text-gray-700 text-xs mx-4 w-full col-span-2">
9+
<h1 className="text-3xl">Stay Connected</h1>
10+
<p>Join our community of over 1300 users following our mod. We post updates on all our products on our media locations.</p>
11+
<a className="text-blue-500" href="https://discord.gg/6mygAnq">Discord</a><br />
12+
<a className="text-blue-500" href="https://github.com/Dumb-Code">GitHub</a><br />
13+
<a className="text-blue-500" href="https://twitter.com/dumbcodemc">Twitter</a><br />
14+
<a className="text-blue-500" href="https://www.deviantart.com/projectnublar">Devianart</a><br />
15+
<a className="text-blue-500" href="https://www.youtube.com/channel/UCjGWjtS8OMznjzTzpxQ0QYQ">YouTube</a><br />
16+
<a className="text-blue-500" href="https://www.artstation.com/dumbcodemc">ArtStation</a><br />
17+
</div>
18+
<div className="text-gray-700 text-xs mx-4 w-full col-span-2">
19+
<h1 className="text-3xl">Our Mission</h1>
20+
<div>The DumbCode <div className="text-blue-500 inline-block"><Link href="/team">Team</Link></div> is commited to bringing high quality content to members of our community and expanding our community to new interested people. We believe in equal opportunity to contributors and we will strive to create a fair workplace while keeping the progress organized and thought out.</div>
21+
</div>
22+
<div className="mx-4 w-full col-span-2 lg:col-span-1">
23+
<div className="text-gray-700 text-xs">
24+
<h1 className="text-3xl">Our Stuff</h1>
25+
</div>
26+
<div className="text-gray-700 text-xs">
27+
<p className="my-0">Mods</p>
28+
<div className="text-blue-500"><Link href="/mods/projectnublar">Project: Nublar</Link></div>
29+
<div className="text-blue-500"><Link href="/mods/dumblibrary">Dumb Library</Link></div>
30+
</div>
31+
<br />
32+
<div className="text-gray-700 text-xs">
33+
<p className="my-0">Tools</p>
34+
<div className="text-blue-500"><Link href="/studio">Dumbcode Studio</Link></div>
35+
<div className="text-blue-500"><Link href="/mods/gradlehook">Gradlehook</Link></div>
36+
</div>
37+
</div>
38+
<div className="mx-4 w-full col-span-2">
39+
<div className="text-gray-700 text-xs">
40+
<h1 className="text-3xl">Other Stuff</h1>
41+
<p>DumbCode is in no way affiliated with Minecraft or its owners Mojang Studios. Our content licenses are placed under their corresponding code repositories and should be treated as true pieces of software.</p>
42+
<div className="text-gray-700 text-xs mt-2 mb-10">DumbCode Website updated 2021.</div>
43+
<a href="https://vercel.com/?utm_source=dumbcode&utm_campaign=oss"><SvgPoweredByVercel /></a>
44+
</div>
45+
</div>
46+
</div>
47+
</footer>
48+
);
49+
}
50+
51+
export default Footer;

components/docs/Navbar.tsx

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import Image from "next/image";
2+
import { useRouter } from "next/router";
3+
import { useState } from "react";
4+
import { SvgDiscord, SvgGithub } from "../../src/components/Icons";
5+
6+
const logo = '/images/brand/logo.svg'
7+
8+
const Navbar = () => {
9+
10+
return (
11+
<div className="border-b border-black shadow-xl shadow-black">
12+
<div className="hidden lg:block w-screen">
13+
<DesktopNavbar />
14+
</div>
15+
<div className="lg:hidden w-screen">
16+
<MobileNavbar />
17+
</div>
18+
</div>
19+
);
20+
}
21+
22+
const MobileNavbar = () => {
23+
24+
const [open, setOpen] = useState(false);
25+
26+
const toggleOpen = () => {
27+
setOpen(!open);
28+
}
29+
30+
return (
31+
<>
32+
<div className="bg-gray-900 w-screen h-14 md:pl-10 flex flex-row">
33+
<NavbarBrandButton />
34+
<div className="flex-grow"></div>
35+
<MobileNavOpenButton open={open} toggleOpen={toggleOpen} />
36+
</div>
37+
{open && <MobileNavbarItems />}
38+
</>
39+
);
40+
}
41+
42+
const MobileNavOpenButton = ({ open, toggleOpen }: { open: boolean, toggleOpen: () => void }) => {
43+
return (
44+
<div className="mt-5 mr-2 md:mr-10 group" onClick={toggleOpen}>
45+
<div className={(open ? "translate-y-1 -rotate-45 group-hover:bg-red-500" : "-translate-y-2 group-hover:bg-gray-500") + " rounded-full h-1 w-8 bg-white transition-all"}></div>
46+
<div className={(open ? "opacity-0 group-hover:bg-red-500" : "opacity-100 group-hover:bg-gray-500") + " rounded-full h-1 w-8 bg-white transition-all"}></div>
47+
<div className={(open ? "-translate-y-1 rotate-45 group-hover:bg-red-500" : "translate-y-2 group-hover:bg-gray-500") + " rounded-full h-1 w-8 bg-white transition-all"}></div>
48+
</div>
49+
);
50+
}
51+
52+
const DesktopNavbar = () => {
53+
54+
return (
55+
<div className="bg-gray-900 w-screen h-14 flex flex-row z-50">
56+
<div className="relative w-1/4">
57+
<div className="absolute right-0 w-72">
58+
<NavbarBrandButton />
59+
</div>
60+
</div>
61+
<div className="lg:w-1/2 px-16 object-right flex flex-row-reverse">
62+
<NavbarButton name="STUDIO" route="/" />
63+
<NavbarButton name="DOCS" route="/studio" />
64+
</div>
65+
<div className="lg:w-1/4 lg:mr-10 pt-3 flex flex-row bg-gray-900 pb-4 lg:pb-0">
66+
<div className="lg:hidden flex-grow"></div>
67+
<NavbarIconButton icon={<SvgDiscord className="h-6 w-6 text-center" />} route="https://discord.gg/6mygAnq" />
68+
<NavbarIconButton icon={<SvgGithub className="h-6 w-6 text-center" />} route="https://github.com/Dumb-Code" />
69+
<div className="lg:hidden flex-grow"></div>
70+
</div>
71+
</div>
72+
);
73+
}
74+
75+
const NavbarBrandButton = () => {
76+
77+
const router = useRouter();
78+
const takeHome = (e: { preventDefault: () => void; }) => {
79+
e.preventDefault();
80+
router.push("/");
81+
}
82+
83+
return (
84+
<div className="bg-gray-900 px-4 text-white text-xs capitalize hover:bg-gray-700 h-full font-semibold flex flex-row cursor-pointer"
85+
onClick={takeHome}>
86+
<div className="mt-4 mr-2 h-6 w-6 relative bg-gray-300">
87+
<Image alt="logo" src={logo} layout="fill" />
88+
</div>
89+
<p className="pt-5">DUMBCODE STUDIO DOCS</p>
90+
</div>
91+
);
92+
}
93+
94+
const MobileNavbarItems = () => {
95+
return (
96+
<div className="w-full lg:flex lg:flex-row lg:bg-gray-900 bg-gray-800 relative top-0 z-50">
97+
<div className="lg:flex-grow">
98+
<NavbarButton name="STUDIO" route="/" />
99+
<NavbarButton name="DOCS" route="/studio" />
100+
</div>
101+
<div className="lg:pr-4 lg:mr-10 pt-3 flex flex-row bg-gray-900 pb-4 lg:pb-0">
102+
<div className="lg:hidden flex-grow"></div>
103+
<NavbarIconButton icon={<SvgDiscord className="h-6 w-6 text-center" />} route="https://discord.gg/6mygAnq" />
104+
<NavbarIconButton icon={<SvgGithub className="h-6 w-6 text-center" />} route="https://github.com/Dumb-Code" />
105+
<div className="lg:hidden flex-grow"></div>
106+
</div>
107+
</div>
108+
);
109+
}
110+
111+
const NavbarButton = ({ name, route }: { name: string, route: string }) => {
112+
113+
const router = useRouter();
114+
const handleClick = (e: { preventDefault: () => void; }) => {
115+
e.preventDefault();
116+
router.push(route);
117+
}
118+
119+
return (
120+
<button className="bg-gray-900 px-4 text-white text-xs capitalize hover:bg-gray-700 lg:h-full font-semibold transition-colors lg:w-auto w-full h-10"
121+
onClick={handleClick}>
122+
{name}
123+
</button>
124+
);
125+
}
126+
127+
const NavbarIconButton = ({ icon, route }: { icon: JSX.Element, route: string }) => {
128+
129+
return (
130+
<a target="_blank" rel="noreferrer" href={route} className="bg-gray-900 pl-1 pt-1 text-white text-xs capitalize hover:bg-gray-700 h-8 w-8 rounded-full font-semibold transition-all mx-1 hover:scale-110">
131+
{icon}
132+
</a>
133+
);
134+
}
135+
136+
export default Navbar;

components/docs/Test.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { useState } from "react";
2+
3+
const Test = ({ data }: { data: string }) => {
4+
const [number, setNumber] = useState(0);
5+
return (
6+
<div className="bg-red-300 flex flex-col w-min">
7+
<div className="w-32">
8+
Hello({data}) - {number}
9+
</div>
10+
<button className="rounded bg-blue-500" onClick={() => setNumber(number + 1)}>Click Me</button>
11+
</div>
12+
)
13+
}
14+
15+
export default Test

docs/0-testing/testing/header.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"en": {
3+
"name": "Testing (in English)",
4+
"description": "Testing (in English)"
5+
},
6+
"de": {
7+
"name": "Testing (in Deutsch)",
8+
"description": "Test (in Deutsch)"
9+
}
10+
}
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Hallo Welt
2+
Hallo (Before Counter)
3+
<Test data="testde" />
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Hello World
2+
<Test data="test" />
3+
4+
# Some Heading
5+
6+
Hello
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Good Bye
2+
In english
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Good bye (in frenfh)
2+
Bye
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Tab Bar
2+
3+
In this section we will go over the Studio's Tab bar.
4+
5+
TODO
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"en": {
3+
"name": "Interface",
4+
"description": "This section we will be going over the general orginazation of the studio."
5+
}
6+
}

0 commit comments

Comments
 (0)