Skip to content

Commit 0dffc38

Browse files
rahul-vyas-devrahul-vyas-dev
committed
feat: Add installation guides for Fedora, Ubuntu, Debian, and Raspbian with corresponding images
1 parent 6c5c989 commit 0dffc38

File tree

8 files changed

+629
-56
lines changed

8 files changed

+629
-56
lines changed

‎public/assets/Images/fedora-step1.webp‎

42.4 KB
Loading

‎public/assets/Images/guid-image-1.webp‎

44.8 KB
Loading

‎src/components/Installation-guid/Debian.tsx‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
import { motion } from 'framer-motion';
2+
import img1 from '../../../public/assets/Images/guid-image-1.webp';
3+
4+
function Debian() {
5+
return (
6+
<>
7+
<motion.section
8+
initial={{ opacity: 0, x: 0 }}
9+
whileInView={{ opacity: 1 }}
10+
viewport={{ once: true, amount: 0.3 }}
11+
className="mt-5"
12+
>
13+
<div className="flex flex-col gap-5">
14+
<h2 className="text-center text-4xl font-medium">
15+
Install Sugar on Debian
16+
</h2>
17+
<span className="text-center text-gray-700 text-xl">
18+
Debian is a free, stable Linux distribution. Sugar packages are
19+
available in Debian releases — use the commands below depending on
20+
your Debian version.
21+
<a
22+
href="https://www.debian.org/"
23+
className=" hover:text-blue-800 underline"
24+
>
25+
<b>click here</b>
26+
</a>{' '}
27+
<img src={`${img1}`} alt="Download Sugar for Debian" />
28+
</span>
29+
</div>
30+
</motion.section>
31+
<motion.section
32+
initial={{ opacity: 0, x: 0 }}
33+
whileInView={{ opacity: 1 }}
34+
viewport={{ once: true, amount: 0.3 }}
35+
className="mt-5"
36+
>
37+
<div>
38+
<div className="flex flex-col gap-4">
39+
<h3 className="text-3xl font-semibold text-center">
40+
Using Sugar 0.112 on Debian Buster
41+
</h3>
42+
43+
<p className="text-center text-xl">
44+
Sugar 0.112 will be available in Debian Buster. Install from the
45+
default repositories:
46+
</p>
47+
48+
<p className="text-center text-gray-700 text-xl">
49+
After installation, log out and choose the <strong>Sugar</strong>{' '}
50+
session at the login screen.
51+
</p>
52+
</div>
53+
</div>
54+
</motion.section>{' '}
55+
<motion.section
56+
initial={{ opacity: 0, x: 0 }}
57+
whileInView={{ opacity: 1 }}
58+
viewport={{ once: true, amount: 0.3 }}
59+
className="mt-5"
60+
>
61+
<div>
62+
<div className="flex flex-col gap-4 mt-6">
63+
<h3 className="text-3xl font-semibold text-center">
64+
Using Sugar 0.110 on Debian Stretch
65+
</h3>
66+
67+
<p className="text-center text-xl">
68+
Sugar 0.110 is available in Debian Stretch. To install on a fresh
69+
Stretch installation:
70+
</p>
71+
<p className="text-center text-gray-600">
72+
During the Debian installer, when asked which collections to
73+
include, deselect all to keep a minimal system; then install{' '}
74+
<code>sucrose</code> and a display manager like{' '}
75+
<code>lightdm</code>.
76+
</p>
77+
<b className="text-center">
78+
when the install has completed, log in, install Sugar, a display
79+
manager, and reboot, type
80+
</b>
81+
<div className="flex flex-col items-center gap-3">
82+
<pre>
83+
<code className="font-mono bg-gray-100 px-2 py-1 rounded hover:bg-gray-200">
84+
sudo apt install sucrose lightdm
85+
</code>
86+
</pre>
87+
<button
88+
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
89+
onClick={() =>
90+
navigator.clipboard.writeText(
91+
'sudo apt install sucrose lightdm',
92+
)
93+
}
94+
>
95+
Copy
96+
</button>
97+
98+
<pre>
99+
<code className="font-mono bg-gray-100 px-2 py-1 rounded hover:bg-gray-200">
100+
exec sudo reboot
101+
</code>
102+
</pre>
103+
<button
104+
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
105+
onClick={() =>
106+
navigator.clipboard.writeText('exec sudo reboot')
107+
}
108+
>
109+
Copy
110+
</button>
111+
</div>
112+
113+
<p className="text-center text-gray-700 text-xl">
114+
At the graphical login screen change from the default X session to{' '}
115+
<strong>Sugar</strong>, then log in with the non-root user you
116+
created during install.
117+
</p>
118+
</div>
119+
</div>
120+
</motion.section>
121+
</>
122+
);
123+
}
124+
125+
export default Debian;

‎src/components/Installation-guid/Fedora.tsx‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
import {motion} from 'framer-motion'
2+
import img1 from '../../../public/assets/Images/fedora-step1.webp';
3+
function Fedora() {
4+
return (
5+
<>
6+
<main>
7+
<motion.article className="mx-auto p-6 flex items-center flex-col max-w-10/12">
8+
<h1 className=" text-4xl font-sans font-bold text-center">
9+
Steps to install Sugar using Fedora
10+
</h1>
11+
12+
<motion.section
13+
initial={{ opacity: 0, x: 0 }}
14+
whileInView={{ opacity: 1 }}
15+
viewport={{ once: true, amount: 0.3 }}
16+
className="mt-5"
17+
>
18+
<div className="flex flex-col gap-5">
19+
<div>
20+
<h3 className="font-medium text-gray-600 flex justify-center">
21+
Step 1
22+
</h3>
23+
</div>
24+
<span className="text-3xl text-center">
25+
Install <b>Fedora</b> on your device.
26+
<a
27+
href="https://getfedora.org/"
28+
className=" hover:text-blue-800 underline"
29+
>
30+
{' '}
31+
Click here{' '}
32+
</a>
33+
</span>
34+
<desc className=" text-gray-600 text-center">
35+
Download the Fedora ARM image for your Raspberry Pi from the
36+
official Fedora website. Make sure to select the version that
37+
matches your Raspberry Pi model.
38+
</desc>
39+
</div>
40+
<div>
41+
<img src={`${img1}`} alt="Download Fedora for Raspberry Pi" />
42+
</div>
43+
</motion.section>
44+
45+
<motion.section
46+
initial={{ opacity: 0, x: 0 }}
47+
whileInView={{ opacity: 1 }}
48+
viewport={{ once: true, amount: 0.3 }}
49+
className="mt-5"
50+
>
51+
<div className="flex flex-col gap-5 ">
52+
<h3 className="font-medium text-gray-600 flex justify-center">
53+
Step 2
54+
</h3>
55+
<ol className="flex flex-col gap-5">
56+
<li className=" text-4xl text-center font-medium flex justify-center">
57+
Open the Terminal & Run the command:
58+
</li>
59+
<li className="text-xl text-center flex gap-2.5">
60+
<code className="font-mono bg-gray-100 px-2 py-1 rounded-2xl hover:bg-gray-200 text-wrap">
61+
sudo dnf groupinstall sugar-desktop
62+
</code>
63+
<button
64+
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
65+
onClick={() => {
66+
navigator.clipboard.writeText(
67+
'sudo dnf groupinstall sugar-desktop',
68+
);
69+
}}
70+
>
71+
Copy
72+
</button>
73+
</li>
74+
<div className="flex flex-col gap-3 items-center">
75+
<li className="text-center text-3xl font-medium flex justify-center">
76+
Restart your system:
77+
</li>
78+
<div className="text-center flex items-center gap-2.5">
79+
<pre className="text-center">
80+
<code className="font-mono bg-gray-100 px-2 py-1 rounded hover:bg-gray-200">
81+
sudo reboot
82+
</code>
83+
</pre>{' '}
84+
<button
85+
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
86+
onClick={() => {
87+
navigator.clipboard.writeText('sudo reboot');
88+
}}
89+
>
90+
Copy
91+
</button>
92+
</div>
93+
</div>
94+
<li className="text-center text-3xl font-medium ">
95+
On the login screen, select the <strong>Sugar Desktop</strong>{' '}
96+
session.
97+
</li>
98+
</ol>
99+
</div>
100+
</motion.section>
101+
102+
<motion.section
103+
initial={{ opacity: 0, x: 0 }}
104+
whileInView={{ opacity: 1 }}
105+
viewport={{ once: true, amount: 0.3 }}
106+
className="mt-5"
107+
>
108+
<div className="flex flex-col gap-5">
109+
<h3 className="font-medium text-gray-600 flex justify-center">
110+
Step 3
111+
</h3>
112+
<h2 className="text-center text-4xl font-medium">
113+
Using Sugar Inside GNOME
114+
</h2>
115+
<ol className="flex flex-col gap-4">
116+
<li className="text-center text-3xl">
117+
Select GNOME on Xorg or GNOME Classic at login.
118+
</li>
119+
<li className="text-center">
120+
<span className="text-center text-2xl font-medium">
121+
Open Terminal and run:
122+
</span>
123+
<pre className="flex flex-col text-xl gap-1.5">
124+
<code className="font-mono bg-gray-100 px-2 py-1 rounded hover:bg-gray-200">
125+
sudo dnf groupinstall sugar-desktop
126+
</code>
127+
<button
128+
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
129+
onClick={() => {
130+
navigator.clipboard.writeText(
131+
'sudo dnf groupinstall sugar-desktop',
132+
);
133+
}}
134+
>
135+
Copy
136+
</button>
137+
<code className="font-mono bg-gray-100 px-2 py-1 rounded hover:bg-gray-200">
138+
sudo dnf install sugar-runner
139+
</code>
140+
<button
141+
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
142+
onClick={() => {
143+
navigator.clipboard.writeText(
144+
'sudo dnf install sugar-runner',
145+
);
146+
}}
147+
>
148+
Copy
149+
</button>
150+
</pre>
151+
</li>
152+
<li className="text-center text-xl font-medium">
153+
Start Sugar:
154+
<pre>
155+
<code className="font-mono bg-gray-100 px-2 py-1 rounded hover:bg-gray-200">
156+
sugar-runner
157+
</code>
158+
<button
159+
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
160+
onClick={() => {
161+
navigator.clipboard.writeText('sugar-runner');
162+
}}
163+
>
164+
Copy
165+
</button>
166+
</pre>
167+
</li>
168+
<li>
169+
<strong>Logout from Sugar to return to GNOME.</strong>
170+
</li>
171+
</ol>
172+
</div>
173+
</motion.section>
174+
</motion.article>
175+
</main>
176+
</>
177+
);
178+
}
179+
180+
export default Fedora;

‎src/components/Installation-guid/Raspbian.tsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { motion } from 'framer-motion';
2+
import img1 from '../../../public/assets/Images/fedora-step1.webp';
3+
function Raspbian() {
4+
return (
5+
<div className="w-full max-w-3xl mx-auto p-6 space-y-6">
6+
<h1 className="text-3xl font-bold">Installing Sugar on Raspberry Pi</h1>
7+
8+
<p className="text-base leading-relaxed">
9+
Raspberry Pi devices are small, low-cost computers that work well with
10+
Sugar. To use Sugar, you'll need a display, keyboard, and mouse.
11+
</p>
12+
<img src={ `${img1}`} alt="" />
13+
<motion.section
14+
className="space-y-3"
15+
initial={{ opacity: 0, x: 0 }}
16+
whileInView={{ opacity: 1 }}
17+
viewport={{ once: true, amount: 0.3 }}
18+
>
19+
<h2 className="text-2xl font-semibold">
20+
Recommended Method: Sugar on a Stick(SoaS)
21+
</h2>
22+
<p>
23+
The most reliable way to run Sugar on a Raspberry Pi is by using{' '}
24+
<b>Sugar on a Stick</b>, a Fedora-based build that ships with many
25+
activities and receives regular security updates.
26+
<a
27+
href="https://wiki.sugarlabs.org/go/Installation"
28+
className=" hover:text-blue-800 underline"
29+
>
30+
<b> Click here for more info</b>
31+
</a>
32+
</p>
33+
</motion.section>
34+
35+
<motion.section
36+
className="space-y-3"
37+
initial={{ opacity: 0, x: 0 }}
38+
whileInView={{ opacity: 1 }}
39+
viewport={{ once: true, amount: 0.3 }}
40+
>
41+
<h2 className="text-2xl font-semibold">Other Installation Options</h2>
42+
<ul className="list-disc ml-6 space-y-2">
43+
<li>
44+
<b>Fedora:</b> Actively used for Sugar development and provides
45+
strong tooling.
46+
</li>
47+
<li>
48+
<b>Debian:</b> Stable environment with good ARM support for
49+
Raspberry Pi.
50+
</li>
51+
<li>
52+
<b>Ubuntu:</b> Works well for general Sugar usage and familiar
53+
workflows.
54+
</li>
55+
</ul>
56+
</motion.section>
57+
58+
<motion.section
59+
className="space-y-3"
60+
initial={{ opacity: 0, x: 0 }}
61+
whileInView={{ opacity: 1 }}
62+
viewport={{ once: true, amount: 0.3 }}
63+
>
64+
<h2 className="text-2xl font-semibold">Development Notes</h2>
65+
<p>
66+
Developers usually choose <b>Fedora</b> or <b>Debian</b> when setting
67+
up a development environment for Sugar on Raspberry Pi, since both
68+
align closely with the platforms used for Sugar development on
69+
standard computers.
70+
</p>
71+
</motion.section>
72+
</div>
73+
);
74+
}
75+
76+
export default Raspbian;

0 commit comments

Comments
 (0)