Giter VIP home page Giter VIP logo

curriculum's Introduction

Curriculum Platform

What is it?

This is a white label multi-tenant platform for us and our code school friends to use to manage our curricula. It's built on top of Hugo and Netlify CMS.

The platform, layout, styles and components are all developed in the Hugo module /common-theme.

The content is developed in the Hugo module /common-content. This content is all headless blocks. It doesn't create any pages on your site unless you call it somewhere.

Multi-language support is provided by Hugo's i18n support.

Each org builds its own Hugo site that uses the common theme and content modules, and then makes any customisations they need and deploys it wherever they want.

Examples

To build a new site

  1. In the root of this repo, run:
hugo new site org-<your-org-name>
cd org-<your-org-name>
  1. Initialise your new site as a hugo module, as only modules can import modules:
hugo mod init github.com/CodeYourFuture/curriculum/org-<your-org-name>

Then add the common theme and content modules as hugo modules to hugo.toml:

[module]
  [[module.imports]]
    path = "github.com/CodeYourFuture/curriculum/common-theme"
  [[module.imports]]
    path = "github.com/CodeYourFuture/curriculum/common-content"
    [[module.imports.mounts]]
      source = "en"
      target = "content"

Look at the org-cyf and org-mcb examples for more details and options.

To customise the css, make a dir assets/custom-theme and throw any scss in there. It will be compiled and added last.

To add site logo/s, make a dir and add svgs to assets/custom-images/site-logo/. They will be added to the site header.

Add your content to content/ and customise the site config in config.toml. Please contribute any improvements you make back to the common theme and content modules.

For each module you import, add a replace directive to your go.mod file - if you forget to do this, you won't get live updates to your site when shared content changes. CI will remind you if you forget.

To locally develop your site

Check org-cyf/README.md on how to set up your local environment. Once that is done you can cd into the site you wish to develop, and run npm run start:dev to get a live preview.

curriculum's People

Contributors

40thieves avatar barny-6 avatar berkeli avatar dedekind561 avatar dependabot[bot] avatar fikretellek avatar fridisar avatar illicitonion avatar jaymayer avatar jxz12 avatar kayali436 avatar kfklein15 avatar larahuzjan avatar metinbaris avatar omahs avatar rbavci avatar sallymcgrath avatar sztupy avatar varuna-v avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar

Forkers

illicitonion omahs maryamalattal louuu jaymayer jxz12 bow-rr kayali436 sztupy avary codeyourfuture metinbaris allisons11 dedekind561 drakkrar jessicarose mastercodees vokeh0007 k31vin marube2005 elai5 mindconrol semartinl wafaajaunnoo amarjha01 keithbremer hasidu00 fikretellek

curriculum's Issues

Search UI: Can the entire result be clickable please

I also expected this - I bashed on the kbd flow to make the li the focus object.

We can't easily change the provided UI components, but there's also a full JS API:

https://pagefind.app/docs/api/

So we can prolly:

  1. Copy the provided Svelte Components into Hugo... can we just build them with Pipes or do we need to do something more? (dunno yet)
  2. Modify https://github.com/CloudCannon/pagefind/blob/main/pagefind_ui/default/svelte/result.svelte to wrap the inner result in an anchor block
  3. namespace our hacked component and call it in much the same way as the canonical one https://github.com/CloudCannon/pagefind/blob/main/pagefind_ui/default/README.md

I am getting on a local train and will pick this up after I've got on the intercity. Don't think it's blocking but it is a good idea.

Originally posted by @SallyMcGrath in #41 (comment)

Feature request: Full text search

Which module(s) and week(s) does this change affect?
Module(s): N/A
Week(s): N/A

What is the work that needs to be done?

Add the ability to search the full text of all content.

The "old" syllabus has a search that appears to index all of the content. The old implementation appears to be here, at a glance it's possible this is a "official" plugin. (Actually it's not immediately obvious how it works...)

Why is this work important to do?

I don't really have any data to back this up, but it seems to me that search across modules would be useful for trainees.

However @SallyMcGrath mentioned that it was previously broken for ~6 months without anyone noticing, which doesn't indicate much usage.

Who might need to know about this change?

@CodeYourFuture/global-syllabus

Make the menu icon more obviously an icon

Which module(s) and week(s) does this change affect?

Module(s): N/A
Week(s): N/A

What is the work that needs to be done?

I'm not actually sure what the best outcome is here. My suggestions:

  • Change the icon to be a 🍔 icon (i.e. not randomised)
  • Change the icon to be something more "standard" (e.g. ☰)

Why is this work important to do?

Currently, the icon for the nav menu is a randomised set of emojis, e.g.:

Screenshot 2023-06-08 at 21 45 11

Both myself & @illicitonion didn't immediately recognise that it was a menu icon. This suggests that others would also not be able to find the menu and the content within it.

Who might need to know about this change?

@CodeYourFuture/global-syllabus

Mermaid diagrams are blowing up 🔥

Describe the bug

I recently merged changes from main into the branches that contain the draft versions of JS1 ( e.g. rewrite_js1_week-2 ). Following the merge, Mermaid diagrams are behaving weirdly: not rendering properly in the UI. They seem to be taking up loads of the page and there is a huge amount of whitespace between the parts of the diagram.

What is wrong with the content?

image

How could this be fixed?
The only thing I could think of is some CSS is tampering with their layout but I couldn't track it down.

Link to content

JS1 Week 2 deploy preview

Additional context

Mermaid diagrams normally throw when there is a syntax error so I think we can eliminate that possibility.
Who else might need to know about this?

Feature: kitchen sink

Which module(s) and week(s) does this change affect?
Module(s):
Week(s):

What is the work that needs to be done?

create a kitchen sink page with all possible components on it:
page header, blocks, youtube, tabs, codemirror, codefence, mermaid, timeline, breadcrumbs, card

Why is this work important to do?

useful for testing
very useful for trainees

Additional context

Who might need to know about this change?

Fundamentals Week 1: Backlog ordering

Describe the bug

The backlog lists three items, in order:

  1. Learning to learn
  2. CYF Blocks
  3. Code.org

But the CYF Blocks work depends on the Code.org work.

Rendering them in this order is probably misleading. While teaching people "you need to think about the dependencies between tasks" is useful, at this stage in the course, it's probably a bit much to expect people with so little context of the two tasks to realise the dependency and swap them.

I think we should either:

  1. Swap the order of these tasks in the page
  2. Explicitly call out in the CYF Blocks issue that it depends on the Code.org issue, and the Code.org issue should be tackled first (and use it as a useful learning moment to tell the trainees explicitly "Sometimes dependencies won't be as obvious as we've called out, consider ordering and dependencies when planning your work")

Feature: PWA

Which module(s) and week(s) does this change affect?

What is the work that needs to be done?

Write a serviceworker that precaches urls
And a proper manifest
To make the site available offline and as a pinned app offline

Why is this work important to do?

We need to make our site as available as possible to our users
Many of our users have restricted data and choppy access
Caching our entire site (within reason, limiting images and no videos) is about 20mb? That's about 20 minutes of browsing time on average
I would probably just forward cache a subset - prep, day-plan, backlogs, and guides? Probably 7- 12mb

Additional context

Who might need to know about this change?

Embed python tutor visualiser

What are people's thoughts on using Python Visualiser temporarily whilst @gregdyke implements the "think like a computer" interpreter?
We can generate iframes:

<iframe width="800" height="500" frameborder="0" src="https://pythontutor.com/iframe-embed.html#code=%0A%0A%0Afunction%20convertToPercentage%28%29%20%7B%0A%20%20%20%20const%20num%20%3D%200.5%3B%0A%20%20%20%20const%20percentage%20%3D%20%60%24%7Bnum%20*%20100%7D%25%60%3B%0A%20%20%20%20return%20percentage%3B%0A%7D%0A%0Aconsole.log%28convertToPercentage%280.5%29%29%3B%0Aconsole.log%28convertToPercentage%280.23%29%29%3B%0A%0A&codeDivHeight=400&codeDivWidth=350&cumulative=false&curInstr=0&heapPrimitives=nevernest&origin=opt-frontend.js&py=js&rawInputLstJSON=%5B%5D&textReferences=false"> </iframe>

@CodeYourFuture/syllabus-team

Fundamentals Sprint 1 Success: Missing learning objectives

Describe the bug

https://cyf-curriculum.netlify.app/fundamentals/sprints/1/success/ currently shows some slightly odd content:

Screenshot 2023-06-11 at 20 20 17

Things of note:

  1. There are more leaning objectives in the day-plan (e.g. from the code.org exercise), but only one on the page (from the code of conduct exercise)
  2. I'm not sure what the "Importance of Professional Development" and "Let's talk about our Code of Conduct" links are doing on this page
  3. I'd maybe drop the word "compiled" from the heading, while it's accurate, I'm not sure how helpful it is.

Feature: Highlight sections of a code block

Given a code block,
I want to highlight various parts of the code fence by altering the opacity so to draw a user's attention to a particular section of the code block.

function sum(a,b) {
      return a + b;
}

const result = sum(10,32);

Given the code snippet above, I might want to highlight the line with the call site, so the rest of the code block's opacity would need to be lowered so the call site line stands out.

Feature: Lighthouse CLI on prs

Which module(s) and week(s) does this change affect?
n/a

What is the work that needs to be done?

A github lighthouse action to ensure 98/100 for access, 92/100 for performance, 100/100 Best Practices, PWA check complete , 100/100 for SEO

I actually obviously always want 100 for access but sequential headings will probably defeat us with external repos and it's not useful to fail the build for that

I will build for 100s myself (will do an audit and get the base to all 100 this week)

Why is this work important to do?

We will teach the trainees to audit the curriculum with Lighthouse so it had better be half decent! Putting it on the CI will help us not stray too far from the path.

Also maybe it's good to write good code idk why not do it right

Additional context

Who might need to know about this change?

@illicitonion ?

Improve Fundamentals prep instructions

Which module(s) and week(s) does this change affect?
Module(s): Fundamentals
Week(s): prep

What is the work that needs to be done?

  • Need to clarify the instructions for beginners who are setting up their module repos for the first time
  • Explain the purpose of setting up a coursework planner - a way of tracking your work over the course

Why is this work important to do?

Additional context

Who might need to know about this change?

@nirmeet-baweja

Fundamentals Sprint 3: "Sharing Our Blockers" exercise is pretty light for its allocated time

Describe the bug

On https://cyf-curriculum.netlify.app/fundamentals/sprints/3/day-plan/ the "Sharing Our Blockers" session has 45 minutes allocated, but as written is basically just "write up your blockers".

I suspect there's a second half of this, which is "In groups, discuss your blockers, ask people about the issues they suffer from, and give each other advice about how to avoid them" which can easily fill a lot of time - we should maybe be more explicit about this? Or allocate less time?

Feature: PDF book

Which module(s) and week(s) does this change affect?
Module(s): all
Week(s): all

What is the work that needs to be done?

  1. create a layouts/_default/book.html
  2. compose all the preps, day plans , guides, etc that we want on to this page
  3. write a proper print stylesheet (do this even if not the pdf part)
  4. consider: generating a pandoc pdf after build or throw in a jsPDF and put the book in the Guides menu

Why is this work important to do?

We want to make this site as usable as possible and properly thought out printable pdfs is part of that

Additional context

I'll probably do this, just writing it down so I don't forget, but feel free to scalp me 😉 just make sure you update the ticket

Who might need to know about this change?

Feature: provide curriculum APIs

Which module(s) and week(s) does this change affect?
Module(s): all
Week(s): all

What is the work that needs to be done?

  • Create some static JSON apis for trainees to interact with using real curriculum data
  • I could probably also use one in the offline caching strategy
  • Hugo supports alternative output formats
  • Just need to write some .json layouts in layouts/_default/

Why is this work important to do?

It's not it's just it would be good to have some static apis to look at directly and connect instantly to a front end and it's easy to generate this right in the platform

Additional context

Who might need to know about this change?

Fundamentals Sprint 3: PD Placeholder

Describe the bug

Currently Fundamentals Sprint 3 has a placeholder for a PD session at 11:15. We should make sure this is filled in before our first cohort uses this website.

Fundamentals Sprint 3: LinkedIn task conflicts with Sprint 1 LinkedIn task

Describe the bug

A couple of things conflict:

  1. Sprint 3's ticket is called "Join LinkedIn" (I just renamed it to "Start Using LinkedIn" on GitHub, should propagate soon-ish). But Sprint 1 already required our trainees to join LinkedIn.
  2. Sprint 3's ticket says "If it's not safe for you to share your name online, you can skip this task." but Sprint 1's ticket talked about how you should make one regardless but settle on a name you're able to use, whether or not it's your legal name. This seems to be conflicting, and we should make sure we have a more consistent story here.

cc @kfklein15 @esma-g @SallyMcGrath

Revise: block header

I think the blocks look a bit messy and the main issue is the headers. Plan:

  • tidy up byline to a coin stack layout that springs out on hover/focus but is otherwise just a single github icon
  • suppress empty headings
  • more notes from next train

Bug: Quirksmode

Describe the bug

I've deleted the doctype at some point and this site is running in quirksmode

What is wrong with this content?

Not much will change but it probably means the SVG will be weird when I change it back and I'll need to remake it

How could this be fixed?

  1. Add back the doctype
  2. Fix the small changes (most likely just the SVGs)

Link to content

Additional context

Who else might need to know about this?

[TECH ED] Using Fetch

Link to the coursework

https://github.com/CodeYourFuture/Module-JS3/tree/main/using-fetch

Why are we doing this?

We will use fetch a lot in web development. To get familiar with this API, use fetch to load a greeting from the API and display it in the HTML element with the id "greeting-text". There are some stretch exercises linked at the bottom of the ticket.

Maximum time in hours (Tech has max 16 per week total)

1

How to get help

To learn more about fetch, refer to the doc:
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

How to submit

  1. Fork to your Github account.
  2. Make a branch for this project.
  3. Make regular small commits in this branch with clear messages.
  4. When you are ready, open a PR to the CYF repo, following the instructions in the PR template.
gitGraph
    commit id: "start"
    branch feature/book-library
    commit id: "skeleton page code"
    commit id: "Fonts and colours"
    commit id: "mobile layout"
    commit id: "lighthouse audit revisions mobile"
    commit id: "desktop layout"
    commit id: "lighthouse audit revisions desktop"
    checkout main
    merge feature/book-library

There are several projects in this repo. Make a new branch for each project.

How to review

  1. Complete your PR template
  2. Ask for review from a classmate or mentor
  3. Make changes based on their feedback
  4. Review and refactor again once the coursework solutions are released.

Anything else?

Dog photo gallery - activity found in this repo
Code reading - activity can be found in this repo

Set up "failed deploy" notifications

We have nightly build that re-builds our static site every evening, mostly to pick up new content imports from GitHub issues.

We have set up the site to hard-error the build if certain problems are found fetching GitHub issues.

We need to make sure we're notified of these failures so people know to actually act on them.

Ideally a slack message to #cyf-github-owners or an email to some relevant group.

Curriculum mapping tool

Problem:

Often need to reorder curriculum content and think deeply about it how should be ordered.
It is very easy to lose track of conceptual dependencies and prerequisites when developing a new module.
For example, suppose we're developing a module for higher order function.
It is essential to work out:

  • what is the optimal way forwards

Feature: Create a runtime diagram from a code snapshot

A super useful thing to have would be a means of generating a runtime diagram from a snippet of code.
For example, given a code block like this:

function sum(a,b) {
      return a + b;
}
const result = sum(a,b);

I want to indicate a specific line in this piece of code and from there take a snapshot of the following things:
Call stack, memory, thread
This would almost be like taking a snapshot of the debugger output - but formatted in a nice diagram.
Here's some inspiration as to what that diagram could look like:

image

Fundamentals Week 1 Backlog: "Share your solution" is too vague

Describe the bug

On https://cyf-curriculum.netlify.app/fundamentals/sprints/1/backlog/ from this issue:

Screenshot 2023-06-11 at 13 48 08

"Share your solution" is a bit vague for this being the first time we've asked our trainees to do this. Share your solution with whom? Where?

It should maybe say something like "Share your solution with your cohort on your cohort's Slack channel" or whatever else we expect people to do. (I don't think this needs to happen every week, but the first time we ask, we should be super clear).

Fundamentals Prep: Skip links are confusing

Describe the bug

There's a paperclip link that hovers over the content on the right-hand side. It appears to go to an anchor at the top, and make a button in the top-left appear which says "Skip to main".

I'm not sure why it's there or what it's for - the paperclip icon doesn't have an obvious meaning to me, jumping to top can be useful but it's not clear that's what it does and there are browser-native shortcuts to do so, and showing a "Skip to main" button which appears to unconditionally scroll the content by about 50px doesn't seem super useful?

I'm not sure if these are better tailored to different styles of pages with different layouts, but right now on this page the paperclip is a bit distracting and I'm not really sure why it's there...

Screenshot with paperclip:
Screenshot 2023-06-11 at 00 00 48

Screenshot of "Skip to main" button:
Screenshot 2023-06-11 at 00 01 09

Screenshot after clicking "Skip to main" button:
Screenshot 2023-06-11 at 00 01 17

Link to content

https://cyf-curriculum.netlify.app/fundamentals/prep/

Link render hook sometimes(?) breaks in note shortcodes

Describe the bug

If there is a link within a note shortcode, the <a> is malformed and ends up getting split into several <p> tags. See this example on the Fundamentals prep page:

image

This is perhaps a bad example, as we only intend this URL to be in plain text - actually making it a hyperlink is not helpful.

Playing around with this locally, it seems that converting this to a "normal" link (i.e. [foo](bar.com)) is also broken:

image

What's weird is that on other pages links inside note shortcodes seem to be fine, like the Code.org exercise in the day plan for Fundamentals week 1 🤷🏻‍♂️

How could this be fixed?

I'm not really very sure - I've poked at this a little bit but I think there's some interaction of Hugo features that I'm not understanding.

Who else might need to know about this?

@SallyMcGrath

Issue embedding: Lists get lost in markdown interpretation

Describe the bug

On https://cyf-curriculum.netlify.app/fundamentals/sprints/1/backlog/ in the Code.org backlog item, in the GitHub issue the list of lessons to do is nicely newline-separated:

Screenshot 2023-06-11 at 13 53 57

When embedded in Hugo, it isn't:

Screenshot 2023-06-11 at 13 54 20

I'm not sure what wizardry GitHub issue are doing here, because in markdown I would expect these to be rendered as a single run-on line, but it appears GitHub issues does something smart to avoid this - we should try to emulate it.

In the short-term, we could edit the issue to have a bulleted list, which should make them appear correctly, but in general I suspect we'll hit this issue again in the future, so we should consider a structural fix.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.