New site structure

.github/ISSUE_TEMPLATE/bug-report.md

@@ -10,7 +10,7 @@ assignees: ''
 **Describe the bug**
 A clear and concise description of what the bug is.
 
-**Does this bug apply to a specific lesson or workshop, or does it appear to be sitewide?**
+**Does this bug apply to a specific lesson or tutorial, or does it appear to be sitewide?**
 If the bug is specific to a lesson, please include the lesson URL.
 
 **Expected behavior**

.github/ISSUE_TEMPLATE/tutorial-proposal.md

@@ -0,0 +1,34 @@
+---
+name: New Tutorial Proposal
+about: Suggest a new tutorial topic
+title: 'New Tutorial: [Proposed title]'
+labels: new-tutorial
+assignees: ''
+
+---
+
+Have an idea for a new tutorial? We'd love to discuss it. Please share some info
+to get the discussion started.
+
+**What networking protocol would this tutorial address?**
+List specific projects such as IPFS, IPLD, libp2p, Multiformats, etc.
+
+**What will the user know how to do after completing this tutorial?**
+Be specific, eg "Upload files using the JS IPFS file API"
+
+**Describe the content of the tutorial.**
+Describe the tutorial in more detail. Do you have ideas for the APIs or methods
+to be taught, format to be used, or real-world examples to be included?
+
+**What potential challenges do you forsee in building this tutorial?**
+For example, does the format you have in mind not fit the current capabilities
+of the site?
+
+**Additional context (optional)**
+Would this ProtoSchool tutorial fit into a broader initiative to reach a certain
+user or use case? Did you get the idea because of a gap you saw while exploring
+a current tutorial?
+
+**Would you like to build this tutorial yourself?**
+Do you have the time and skills to build this tutorial yourself, after some group
+brainstorming, or do you hope that someone else might have the bandwidth to do so?

README.md

@@ -1,7 +1,8 @@
 # proto.school
 
-If you're just interested in doing the workshops check
-out https://proto.school.
+If you're just interested in doing the tutorials, visit https://proto.school.
+
+If you're interested in building tutorials, keep reading!
 
 ## Developing Lessons
 
@@ -28,8 +29,8 @@ Add your lesson to the routes in `main.js` and to the list of lessons in `Home.v
 
 When adding your routes, it's important that you follow the existing naming
 convention, since the code used elsewhere will parse the route path to determine the
-shortname of the workshop, the current lesson number, and the total number of
-lessons in your workshop. For example, if you add 3 lessons with the following routes:
+shortname of the tutorial, the current lesson number, and the total number of
+lessons in your tutorial. For example, if you add 3 lessons with the following routes:
 
 ```
 { path: '/basics/01', component: LessonBasics01 },

src/components/Build.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <Header/>
+    <div class="home">
+      <section class="mw7 center ph2">
+        <h1 class="mt5">Build an Interactive Tutorial</h1>
+        <p class="f4 fw5 lh-copy ma0 pv3  ">
+        We're excited to add new tuorials to our collection, and we'd love your
+        help brainstorming and building new content about decentralized web
+        concepts and protocols.
+        </p>
+        <p class="f4 fw5 lh-copy ma0 pv3  ">
+        ProtoSchool is a community-driven effort, and we
+        rely on contributors like you to create great educational content!
+        </p>
+        <h2>Share a tutorial idea</h2>
+        <p class="f4 fw5 lh-copy ma0 pv3  ">
+        Have an idea for a new tutorial? Start by looking at the
+        <a href="https://github.com/protoschool/protoschool.github.io/labels/new%20tutorial">
+        tutorial ideas</a> flagged with the "new tutorial"
+        tag in the ProtoSchool issue queue. If there's a similar idea there
+        already, join the conversation!
+        </p>
+        <p class="f4 fw5 lh-copy ma0 pv3  ">
+        If you have an idea for a new tutorial that has not yet been proposed,
+        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">
+        open an new issue</a> so we can share feedback before you get started
+        building.
+        </p>
+        <p class="f4 fw5 lh-copy ma0 pv3  ">
+        Don't feel like you have the skills to build a tutorial yourself?
+        Please still go ahead and share your idea!
+        </p>
+
+        <h2>Build a tutorial</h2>
+        <p class="f4 fw5 lh-copy ma0 pv3  ">
+        Whether you've shared your own tutorial idea or found an
+        <a href="https://github.com/protoschool/protoschool.github.io/labels/new%20workshop">
+        existing proposal</a> you're excited about, we'd love to have your help
+        building it.
+        </p>
+        <p class="f4 fw5 lh-copy ma0 pv3  ">
+        ProtoSchool tutorials are built using <a href="https://cli.vuejs.org/">
+        Vue CLI 3</a> with single-file components and use an embedded
+        <a href="https://www.npmjs.com/package/monaco-editor">Monaco Editor</a>
+        to enable interactive code challenges. Check out our
+        <a href="https://github.com/ProtoSchool/protoschool.github.io/blob/code/README.md#developing-lessons">
+        instructions for developing tutorials</a> to see how the pieces fit together.
+        </p>
+        <p class="f4 fw5 lh-copy ma0 pv3  ">
+        If the type of lesson you're
+        hoping to create isn't supported by the current lesson structure,
+        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">
+        open an issue</a> and tell us more about the format you have in mind.
+        </p>
+
+        <h2>Other ways to contribute</h2>
+        <p class="f4 fw5 lh-copy ma0 pv3  ">
+        Not ready to build a tutorial quite yet? We'd love your help improving
+        existing tutorials, answering technical questions, making our
+        documentation more clear, or leading a local ProtoSchool chapter.
+        Learn more about the many
+        <a href="https://github.com/ProtoSchool/organizing/blob/master/CONTRIBUTING.md#ways-to-contribute">
+        ways to contribute</a>.
+        </p>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+import Header from './Header.vue'
+
+export default {
+  name: 'Build',
+  components: {
+    Header
+  },
+}
+</script>

src/components/Contribute.vue

@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <Header/>
+    <div>
+      <section class="mw7 center ph2">
+        <h1 class="mt5">Contribute to the Community</h1>
+        <p class="f4 fw5 lh-copy ma0 pv3">
+        ProtoSchool is a community-driven open source project dedicated to
+        making it easy to get started with decentralized web technologies.
+        We accomplish this by <strong>creating interactive tutorials</strong>
+        and <strong>hosting community learning events</strong>.
+        </p>
+        <h2>Interactive Tutorials</h2>
+        <p class="f4 fw5 lh-copy ma0 pv3">
+        Our <router-link to="/tutorials">interactive tutorials</router-link> are
+        the heart of our educational mission. Each browser-based tutorial
+        consists of lessons of increasing difficulty, in which a new
+        concept is explained and the learner is given a code challenge
+        to solve to apply their learning. The learner submits their solution
+        when ready, and receives contextual feedback if needed to try again.
+        If their code passes, they move on to the next lesson in the tutorial.
+        </p>
+
+        <p class="f4 fw5 lh-copy ma0 pv3 ">
+        For contributors <router-link to="/build">building new tutorials,</router-link>
+        the process feels similar to creating a unit test suite
+        which the learner must pass by implementing the correct code.
+        </p>
+
+
+        <h2>Topics</h2>
+        <p class="f4 fw5 lh-copy ma0 pv3 ">
+        ProtoSchool content is designed to introduce learners to the concepts,
+        protocols, and tools that support the decentralized web. We're excited
+        to add new tutorials to our collection, and we'd love your help building
+        content about projects such as
+        <a href="https://ipfs.io/" target="blank">IPFS</a>,
+        <a href="https://ipld.io/" target="blank">IPLD</a>,
+        <a href="https://libp2p.io/" target="blank">libp2p</a>,
+        <a href="https://multiformats.io/" target="blank">Multiformats</a>,
+        and more.
+        </p>
+
+        <h2>Chapter Events</h2>
+        <p class="f4 fw5 lh-copy ma0 pv3 ">
+        Community events around the world provide an opportunity for learners
+        to explore ProtoSchool tutorials with guidance from mentors in their
+        <router-link to="/chapters">local chapters</router-link>. Anyone can
+        <router-link to="/host">host a ProtoSchool chapter</router-link>, and we
+        provide tools and tips for managing local chapters and organizing events
+        that are fun and welcoming for everyone.
+        </p>
+
+        <h2>Contributing</h2>
+        <p class="f4 fw5 lh-copy ma0 pv3 ">
+        ProtoSchool is a community-driven effort, and we depend on contributors
+        to <router-link to="/host">build tutorials</router-link>,
+        <router-link to="/host">organize chapter events</router-link>,
+        improve our existing tutorials and documentation, and answer community
+        questions. Learn more about
+        <a href="https://github.com/ProtoSchool/organizing/blob/master/CONTRIBUTING.md" target="blank">
+        ways to contribute</a>.
+        </p>
+
+        <h2>Get in Touch</h2>
+        <p class="f4 fw5 lh-copy ma0 pv3 ">
+        We use GitHub to organize ProtoSchool. The best place to get in touch
+        with questions about chapter leadership and community engagement is our
+        <a href="https://github.com/ProtoSchool/organizing" target="blank">organizing
+        repository</a>, where you can open a new issue and organizers will be
+        notified and respond. If you have a new tutorial idea or suggestions for
+        improving the ProtoSchool site, please open an issue in the
+        <a href="https://github.com/ProtoSchool/protoschool.github.io" target="blank">
+        website repository</a>.
+        </p>
+
+        <h2>Code of Conduct</h2>
+        <p class="f4 fw5 lh-copy ma0 pv3 ">
+        We strive to make ProtoSchool a welcoming place for all community members.
+        All community members, including chapter organizers, must abide by the
+        <a href="https://github.com/protoschool/organizing/blob/master/CODE_OF_CONDUCT.md">
+        Code of Conduct</a> outlined in our organizing repository.
+        </p>
+
+        <p class="f4 fw5 lh-copy ma0 pv3 ">
+        Additionally, each ProtoSchool chapter is responsible for maintaining
+        their own Code of Conduct for chapter events and repos. If you have questions about the
+        Code of Conduct for a specific chapter, you can open an issue in their
+        associated GitHub repository.
+        </p>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+import Header from './Header.vue'
+
+export default {
+  name: 'Community',
+  components: {
+    Header
+  },
+}
+</script>

src/components/Header.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="home">
+    <header>
+      <section class="flex items-center bg-navy white pv3">
+        <div class="flex-auto">
+          <div class="pseudo-logo center mw7">
+            <a href="/">
+              <img src="../images/ps_symbol_color.svg" alt="ProtoSchool" class="mr3" />
+            </a>
+            <div class="header-text">
+              <h1 class="ma0 fw4">
+                <span class="montserrat fw4">Proto</span>
+                <span class="montserrat fw2">School</span>
+              </h1>
+              <h2 class="ma0 montserrat fw3">
+                Interactive tutorials on decentralized web protocols
+              </h2>
+            </div>
+            </div>
+        </div>
+      </section>
+      <Navigation/>
+    </header>
+  </div>
+</template>
+
+<script>
+import Navigation from './Navigation.vue'
+export default {
+  name: 'Header',
+  components: {
+    Navigation
+  }
+}
+</script>
+
+<style scoped>
+
+.header-text h1 {
+  font-size: 32px;
+}
+.header-text h2 {
+  font-size: 16px;
+}
+.pseudo-logo {
+  display: flex;
+  align-items: center;
+}
+.pseudo-logo img {
+  height: 80px;
+}
+
+@media screen and (min-width: 530px) {
+  .header-text h1 {
+    font-size: 40px;
+  }
+  .header-text h2 {
+    font-size: 20px;
+  }
+  .pseudo-logo img {
+    height: 100px;
+  }
+}
+
+@media screen and (max-width: 435px) {
+  .header-text h1 {
+    font-size: 24px;
+  }
+  .header-text h2 {
+    font-size: 12px;
+  }
+  .pseudo-logo img {
+    height: 60px;
+  }
+}
+</style>