Skip to content

Commit 3fcdcc0

Browse files
terichadbourneterichadbourne
authored
Merge pull request #103 from ProtoSchool/site-structure
WIP: New site structure
2 parents 7c9d8a7 + 47f7c2d commit 3fcdcc0

30 files changed

+812
-224
lines changed

‎.github/ISSUE_TEMPLATE/bug-report.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ assignees: ''
1010
**Describe the bug**
1111
A clear and concise description of what the bug is.
1212

13-
**Does this bug apply to a specific lesson or workshop, or does it appear to be sitewide?**
13+
**Does this bug apply to a specific lesson or tutorial, or does it appear to be sitewide?**
1414
If the bug is specific to a lesson, please include the lesson URL.
1515

1616
**Expected behavior**

‎.github/ISSUE_TEMPLATE/tutorial-proposal.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
name: New Tutorial Proposal
3+
about: Suggest a new tutorial topic
4+
title: 'New Tutorial: [Proposed title]'
5+
labels: new-tutorial
6+
assignees: ''
7+
8+
---
9+
10+
Have an idea for a new tutorial? We'd love to discuss it. Please share some info
11+
to get the discussion started.
12+
13+
**What networking protocol would this tutorial address?**
14+
List specific projects such as IPFS, IPLD, libp2p, Multiformats, etc.
15+
16+
**What will the user know how to do after completing this tutorial?**
17+
Be specific, eg "Upload files using the JS IPFS file API"
18+
19+
**Describe the content of the tutorial.**
20+
Describe the tutorial in more detail. Do you have ideas for the APIs or methods
21+
to be taught, format to be used, or real-world examples to be included?
22+
23+
**What potential challenges do you forsee in building this tutorial?**
24+
For example, does the format you have in mind not fit the current capabilities
25+
of the site?
26+
27+
**Additional context (optional)**
28+
Would this ProtoSchool tutorial fit into a broader initiative to reach a certain
29+
user or use case? Did you get the idea because of a gap you saw while exploring
30+
a current tutorial?
31+
32+
**Would you like to build this tutorial yourself?**
33+
Do you have the time and skills to build this tutorial yourself, after some group
34+
brainstorming, or do you hope that someone else might have the bandwidth to do so?

‎.github/ISSUE_TEMPLATE/workshop-proposal.md

Lines changed: 0 additions & 34 deletions
This file was deleted.

‎README.md

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
# proto.school
22

3-
If you're just interested in doing the workshops check
4-
out https://proto.school.
3+
If you're just interested in doing the tutorials, visit https://proto.school.
4+
5+
If you're interested in building tutorials, keep reading!
56

67
## Developing Lessons
78

@@ -28,8 +29,8 @@ Add your lesson to the routes in `main.js` and to the list of lessons in `Home.v
2829

2930
When adding your routes, it's important that you follow the existing naming
3031
convention, since the code used elsewhere will parse the route path to determine the
31-
shortname of the workshop, the current lesson number, and the total number of
32-
lessons in your workshop. For example, if you add 3 lessons with the following routes:
32+
shortname of the tutorial, the current lesson number, and the total number of
33+
lessons in your tutorial. For example, if you add 3 lessons with the following routes:
3334

3435
```
3536
{ path: '/basics/01', component: LessonBasics01 },

‎public/favicon.png

131 Bytes
Loading

‎src/components/Build.vue

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<template>
2+
<div>
3+
<Header/>
4+
<div class="home">
5+
<section class="mw7 center ph2">
6+
<h1 class="mt5">Build an Interactive Tutorial</h1>
7+
<p class="f4 fw5 lh-copy ma0 pv3 ">
8+
We're excited to add new tuorials to our collection, and we'd love your
9+
help brainstorming and building new content about decentralized web
10+
concepts and protocols.
11+
</p>
12+
<p class="f4 fw5 lh-copy ma0 pv3 ">
13+
ProtoSchool is a community-driven effort, and we
14+
rely on contributors like you to create great educational content!
15+
</p>
16+
<h2>Share a tutorial idea</h2>
17+
<p class="f4 fw5 lh-copy ma0 pv3 ">
18+
Have an idea for a new tutorial? Start by looking at the
19+
<a href="https://github.com/protoschool/protoschool.github.io/labels/new%20tutorial">
20+
tutorial ideas</a> flagged with the "new tutorial"
21+
tag in the ProtoSchool issue queue. If there's a similar idea there
22+
already, join the conversation!
23+
</p>
24+
<p class="f4 fw5 lh-copy ma0 pv3 ">
25+
If you have an idea for a new tutorial that has not yet been proposed,
26+
please <a href="https://github.com/ProtoSchool/protoschool.github.io/issues/new?assignees=&labels=new-tutorial&template=tutorial-proposal.md&title=New+Tutorial%3A+%5BProposed+title%5D">
27+
open an new issue</a> so we can share feedback before you get started
28+
building.
29+
</p>
30+
<p class="f4 fw5 lh-copy ma0 pv3 ">
31+
Don't feel like you have the skills to build a tutorial yourself?
32+
Please still go ahead and share your idea!
33+
</p>
34+
35+
<h2>Build a tutorial</h2>
36+
<p class="f4 fw5 lh-copy ma0 pv3 ">
37+
Whether you've shared your own tutorial idea or found an
38+
<a href="https://github.com/protoschool/protoschool.github.io/labels/new%20workshop">
39+
existing proposal</a> you're excited about, we'd love to have your help
40+
building it.
41+
</p>
42+
<p class="f4 fw5 lh-copy ma0 pv3 ">
43+
ProtoSchool tutorials are built using <a href="https://cli.vuejs.org/">
44+
Vue CLI 3</a> with single-file components and use an embedded
45+
<a href="https://www.npmjs.com/package/monaco-editor">Monaco Editor</a>
46+
to enable interactive code challenges. Check out our
47+
<a href="https://github.com/ProtoSchool/protoschool.github.io/blob/code/README.md#developing-lessons">
48+
instructions for developing tutorials</a> to see how the pieces fit together.
49+
</p>
50+
<p class="f4 fw5 lh-copy ma0 pv3 ">
51+
If the type of lesson you're
52+
hoping to create isn't supported by the current lesson structure,
53+
please <a href="https://github.com/ProtoSchool/protoschool.github.io/issues/new?assignees=&labels=new-tutorial&template=tutorial-proposal.md&title=New+Tutorial%3A+%5BProposed+title%5D">
54+
open an issue</a> and tell us more about the format you have in mind.
55+
</p>
56+
57+
<h2>Other ways to contribute</h2>
58+
<p class="f4 fw5 lh-copy ma0 pv3 ">
59+
Not ready to build a tutorial quite yet? We'd love your help improving
60+
existing tutorials, answering technical questions, making our
61+
documentation more clear, or leading a local ProtoSchool chapter.
62+
Learn more about the many
63+
<a href="https://github.com/ProtoSchool/organizing/blob/master/CONTRIBUTING.md#ways-to-contribute">
64+
ways to contribute</a>.
65+
</p>
66+
</section>
67+
</div>
68+
</div>
69+
</template>
70+
71+
<script>
72+
import Header from './Header.vue'
73+
74+
export default {
75+
name: 'Build',
76+
components: {
77+
Header
78+
},
79+
}
80+
</script>

‎src/components/Contribute.vue

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<template>
2+
<div>
3+
<Header/>
4+
<div>
5+
<section class="mw7 center ph2">
6+
<h1 class="mt5">Contribute to the Community</h1>
7+
<p class="f4 fw5 lh-copy ma0 pv3">
8+
ProtoSchool is a community-driven open source project dedicated to
9+
making it easy to get started with decentralized web technologies.
10+
We accomplish this by <strong>creating interactive tutorials</strong>
11+
and <strong>hosting community learning events</strong>.
12+
</p>
13+
<h2>Interactive Tutorials</h2>
14+
<p class="f4 fw5 lh-copy ma0 pv3">
15+
Our <router-link to="/tutorials">interactive tutorials</router-link> are
16+
the heart of our educational mission. Each browser-based tutorial
17+
consists of lessons of increasing difficulty, in which a new
18+
concept is explained and the learner is given a code challenge
19+
to solve to apply their learning. The learner submits their solution
20+
when ready, and receives contextual feedback if needed to try again.
21+
If their code passes, they move on to the next lesson in the tutorial.
22+
</p>
23+
24+
<p class="f4 fw5 lh-copy ma0 pv3 ">
25+
For contributors <router-link to="/build">building new tutorials,</router-link>
26+
the process feels similar to creating a unit test suite
27+
which the learner must pass by implementing the correct code.
28+
</p>
29+
30+
31+
<h2>Topics</h2>
32+
<p class="f4 fw5 lh-copy ma0 pv3 ">
33+
ProtoSchool content is designed to introduce learners to the concepts,
34+
protocols, and tools that support the decentralized web. We're excited
35+
to add new tutorials to our collection, and we'd love your help building
36+
content about projects such as
37+
<a href="https://ipfs.io/" target="blank">IPFS</a>,
38+
<a href="https://ipld.io/" target="blank">IPLD</a>,
39+
<a href="https://libp2p.io/" target="blank">libp2p</a>,
40+
<a href="https://multiformats.io/" target="blank">Multiformats</a>,
41+
and more.
42+
</p>
43+
44+
<h2>Chapter Events</h2>
45+
<p class="f4 fw5 lh-copy ma0 pv3 ">
46+
Community events around the world provide an opportunity for learners
47+
to explore ProtoSchool tutorials with guidance from mentors in their
48+
<router-link to="/chapters">local chapters</router-link>. Anyone can
49+
<router-link to="/host">host a ProtoSchool chapter</router-link>, and we
50+
provide tools and tips for managing local chapters and organizing events
51+
that are fun and welcoming for everyone.
52+
</p>
53+
54+
<h2>Contributing</h2>
55+
<p class="f4 fw5 lh-copy ma0 pv3 ">
56+
ProtoSchool is a community-driven effort, and we depend on contributors
57+
to <router-link to="/host">build tutorials</router-link>,
58+
<router-link to="/host">organize chapter events</router-link>,
59+
improve our existing tutorials and documentation, and answer community
60+
questions. Learn more about
61+
<a href="https://github.com/ProtoSchool/organizing/blob/master/CONTRIBUTING.md" target="blank">
62+
ways to contribute</a>.
63+
</p>
64+
65+
<h2>Get in Touch</h2>
66+
<p class="f4 fw5 lh-copy ma0 pv3 ">
67+
We use GitHub to organize ProtoSchool. The best place to get in touch
68+
with questions about chapter leadership and community engagement is our
69+
<a href="https://github.com/ProtoSchool/organizing" target="blank">organizing
70+
repository</a>, where you can open a new issue and organizers will be
71+
notified and respond. If you have a new tutorial idea or suggestions for
72+
improving the ProtoSchool site, please open an issue in the
73+
<a href="https://github.com/ProtoSchool/protoschool.github.io" target="blank">
74+
website repository</a>.
75+
</p>
76+
77+
<h2>Code of Conduct</h2>
78+
<p class="f4 fw5 lh-copy ma0 pv3 ">
79+
We strive to make ProtoSchool a welcoming place for all community members.
80+
All community members, including chapter organizers, must abide by the
81+
<a href="https://github.com/protoschool/organizing/blob/master/CODE_OF_CONDUCT.md">
82+
Code of Conduct</a> outlined in our organizing repository.
83+
</p>
84+
85+
<p class="f4 fw5 lh-copy ma0 pv3 ">
86+
Additionally, each ProtoSchool chapter is responsible for maintaining
87+
their own Code of Conduct for chapter events and repos. If you have questions about the
88+
Code of Conduct for a specific chapter, you can open an issue in their
89+
associated GitHub repository.
90+
</p>
91+
</section>
92+
</div>
93+
</div>
94+
</template>
95+
96+
<script>
97+
import Header from './Header.vue'
98+
99+
export default {
100+
name: 'Community',
101+
components: {
102+
Header
103+
},
104+
}
105+
</script>

‎src/components/Header.vue

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<template>
2+
<div class="home">
3+
<header>
4+
<section class="flex items-center bg-navy white pv3">
5+
<div class="flex-auto">
6+
<div class="pseudo-logo center mw7">
7+
<a href="/">
8+
<img src="../images/ps_symbol_color.svg" alt="ProtoSchool" class="mr3" />
9+
</a>
10+
<div class="header-text">
11+
<h1 class="ma0 fw4">
12+
<span class="montserrat fw4">Proto</span>
13+
<span class="montserrat fw2">School</span>
14+
</h1>
15+
<h2 class="ma0 montserrat fw3">
16+
Interactive tutorials on decentralized web protocols
17+
</h2>
18+
</div>
19+
</div>
20+
</div>
21+
</section>
22+
<Navigation/>
23+
</header>
24+
</div>
25+
</template>
26+
27+
<script>
28+
import Navigation from './Navigation.vue'
29+
export default {
30+
name: 'Header',
31+
components: {
32+
Navigation
33+
}
34+
}
35+
</script>
36+
37+
<style scoped>
38+
39+
.header-text h1 {
40+
font-size: 32px;
41+
}
42+
.header-text h2 {
43+
font-size: 16px;
44+
}
45+
.pseudo-logo {
46+
display: flex;
47+
align-items: center;
48+
}
49+
.pseudo-logo img {
50+
height: 80px;
51+
}
52+
53+
@media screen and (min-width: 530px) {
54+
.header-text h1 {
55+
font-size: 40px;
56+
}
57+
.header-text h2 {
58+
font-size: 20px;
59+
}
60+
.pseudo-logo img {
61+
height: 100px;
62+
}
63+
}
64+
65+
@media screen and (max-width: 435px) {
66+
.header-text h1 {
67+
font-size: 24px;
68+
}
69+
.header-text h2 {
70+
font-size: 12px;
71+
}
72+
.pseudo-logo img {
73+
height: 60px;
74+
}
75+
}
76+
</style>

0 commit comments

Comments
 (0)