arve0 / codeclub_lesson_builder Goto Github PK
View Code? Open in Web Editor NEWbuild code club lessons to html and pdf
License: MIT License
build code club lessons to html and pdf
License: MIT License
This appears to be a problem with metalsmith:
metalsmith/metalsmith#65 (comment)
Here’s the output:
$ gulp
[16:05:52] Using gulpfile metalsmith-kodeklubben/gulpfile.js
[16:05:52] Starting 'build'...
[16:05:52] Starting 'css'...
[16:05:52] Starting 'js'...
[16:05:52] Starting 'assets'...
[16:05:53] Finished 'js' after 851 ms
[16:05:54] Finished 'css' after 1.53 s
{ [Error: EMFILE, open 'metalsmith-kodeklubben/src/oppgaver/scratch/kurs_viderekommende/hvor_i_all_verden/europakart.png']
errno: 20,
code: 'EMFILE',
path: 'metalsmith-kodeklubben/src/oppgaver/scratch/kurs_viderekommende/hvor_i_all_verden/europakart.png' }
[16:05:54] 'build' errored after 1.55 s
[16:05:54] Error: EMFILE, open 'metalsmith-kodeklubben/src/oppgaver/scratch/kurs_viderekommende/hvor_i_all_verden/europakart.png'
[16:05:54] Finished 'assets' after 1.52 s
Search-boksen i meny-linjen står skjevt i forhold til Home-knappen. Muligens fordi LKK-lenken er tatt bort.
Vil også nevne at den lille versjonen av KodeTimen-ikonet ikke er alignet på samme måte som de andre ikonene (teksten under er f.eks. mye høyere oppe).
Screenshot var tatt på Chrome på OSX (mac) Version 46.0.2490.86 (64-bit), og codeclub_lesson_builder bygget fra commit 3310724 (p.t. HEAD på master).
If the webhook receives several merged PR close in time, the builder will spin up multiple builds at the same time. A check should be added to avoid this.
I think we should be able to add resources/links to lessons, such as a youtube tutorials showing how the lessons can be solved etc.
In Scratch projects inline code is marked up like for instance if on edge, bounce
{.blockblue} to get proper coloring. These styles are currently missing.
We should support all colors from the old formatter: grey, lightgrey, orange, purple, pink, blue, lightblue, yellow, green and lightgreen.
In addition, some colors were missing and should be added: brown (events), darkpurple (more blocks), darkgrey (extensions).
Can we add the type of project (scratch, python etc) to the header so that it will be easy to see the type without knowing the project itself?
Also, add the difficulty-icon to the header.
It would be cool to have a scoreboard, so that the kids can compete to solve the most lessons! (Stealed this idea from @gahjelle)
I feel stupid for not having thought of this before.
http://blog.npmjs.org/post/118810260230/building-a-simple-command-line-tool-with-npm
@kwrl Hva synes du om denne løsningen: https://github.com/arve0/metalsmith-kodeklubben/tree/playlist?
(Du må ta en pull på src/oppgaver for å få omstruktureringen).
Strukturen er følgende
title
og feks level: 1
Every image has the style
display: block
which forces the text to wrap. This is set to allow for resizing of images upon browser resize.
TODO
Master branch should be international and only include files in english.
It would be simpler for new contributors if the builder had an interface which hides some of github's features.
@kwrl You did start on this, do you have any code that is relevant?
[16:44:40] Working directory changed to ~/Projects/oppgaver/codeclub_lesson_builder
[16:44:43] Using gulpfile ~/Projects/oppgaver/codeclub_lesson_builder/gulpfile.js
[16:44:43] Starting 'pdf'...
[16:44:43] 'pdf' errored after 99 ms
[16:44:43] Error: PhantomJS not installed
at /home/okpedersen/Projects/oppgaver/codeclub_lesson_builder/node_modules/nodepdf-series/index.js:119:28
at /home/okpedersen/Projects/oppgaver/codeclub_lesson_builder/node_modules/nodepdf-series/child.js:36:12
at ChildProcess.exithandler (child_process.js:641:7)
at ChildProcess.EventEmitter.emit (events.js:98:17)
at maybeClose (child_process.js:743:16)
at Socket.<anonymous> (child_process.js:956:11)
at Socket.EventEmitter.emit (events.js:95:17)
at Pipe.close (net.js:466:12)
It is already installed:
$ pwd
~/Projects/oppgaver/codeclub_lesson_builder/node_modules/nodepdf-series/node_modules
$ ls
phantomjs shell-quote
Tried kodeklubben.github.io today in IE. The intro tour asks if I want the tour. If I say no, it keeps asking on every page I visit.
When making headlines with the {.flag} or {.save} styles, horizontal lines are drawn both above and below the environment. This seems a bit too busy, it would probably be enough with just the line above the headline.
Many tasks would benefit from having the possibility to 'toggle' a hint. Currently the only possibility is to always show a hint:
* Do x, y, z
**Hint:** use a loop
which becomes:
Do x, y, z
Hint: use a loop
The line https://github.com/arve0/codeclub_lesson_builder/blob/master/scripts/index.js#L17 creates problems when this.id
is "Videregående Python"
, and you can't get the course info. The built html source looks like this:
<h1 id="Videregående Python" [..omitted]></h1>
Removing the whitespace in the header in python2\index.md
fixed the problem, but doesn't (obviously) display nicely.
Possible fix:
Let this.id
be the folder name ( ex. python2
), which is guaranteed to be without whitespace.
Use linguist such as github flavored markdown.
Work have already begun in docs branch.
In order to make it easier to debug, let gulp create sourcemaps of the js-files in scripts (mapping script.min.js).
Is it possible to create a new "course" named "Hour of Code", where we have playlists named for example "first grade", "second grade" etc? The playlist would then contain projects from the other courses or links to other webpages. For example the playlists:
"first grade" would go to studio.code.org
"fourth grade" would contain projects in scratch
"sevent grade" would contain projects in python
..through external
in YAML:
---
title: Yep
external: https://kodegenet.no/track/scratch/courses/courses_scratch/chapter/chapters_scratch_ch1
---
In a while there are going to be a lot of resources available, and we should prioritize what to show and what not to show at the front page.
One suggestion is that we both have the following at the front page:
Ideas?
put them beside the header with a fancy zip-icon
Takes ~3 seconds, due to building complete search index. Think about building search index as part of dist-task or upon force builds.
Code Club World prefers if their logo are shown in lessons translated from them.
TODO
Hi Sorry to bother you again,
So now I'm trying to create my own resources but it's only showing as plain text. If I copy and paste the "Balloons" example into an md file, gulp will first produce everything correctly and the structure is there. As soon as I try to edit it to make it what I want it reloads as just plain text.
For instance, the exact same file but with the div class ='scratch-preview' html block removed from the introduction, it will just load the plain text. Any idea why?
playlist line 58 does not remove lines which contain \r
.
I got some unexpected results using the builder, which seemed to be caused by pre-generated webpages in the build
-folder.
./gulp clean
./gulp
solved the problem.
So that one doesn't need to go back to continue.
A couple of approaches:
I'm not really sure how this all works. I've got it running, do I need to create index files myself? The main thing I'm after is just the ability to make (standalone) HTML files to support my research as well as PDFs of the same files that can be available as a download.
Yes, you'll need to create an index.md
file for the "course" you are building. It's metadata is used to create the course name, and scaffold the course index.
This minimum layout should get you going:
- codeclub_lesson_builder
- src
- Turtlebots
-index.md
-lesson1.md
I'm considering using another markdown implementation than pandoc, which will ease adding features like:
markdown-it has a plugin system and seems to be the goto solution nowadays.
Thoughts?
@gahjelle Is there a reason why we should use {.blockmotion} etc, when inline exists? https://github.com/blob8108/scratchblocks2#inline-blocks
Haven't tried it, but I guess all inline blocks can be changed to something like
.turn ccw (10)
{.blocks}
The bouncing i seems to have the desired effect that more people are finding the information text.
However, several people have commented that they find it too intrusive and disturbing, so we should try to improve upon it, while still making sure that people realize that there is text revealed by the icon.
Below are a few suggestions:
Click for more information
. This text could possibly be animated into place so as to catch the attention of the viewer but then not move as the text is more explicit than the current icon.If projects are hidden using indexed: False the headlines Novice, Apprentice etc are still shown. They should not be shown if no projects are listed.
For an example, see the Kodetimen-page at kodeklubben/oppgaver#132
Create print version of lessons with absolute URL's for downloads, such that they can be used standalone. Also check colors scratchblocks upon printing/pdf.
Should we add translator as a field in the yaml-header similar to author? And then building it into the project-file the same way we do for author (in the footer). That way we can give some credit also to the fine people doing the hard work of translating projects.
For archives
A fixed width (monospaced) font will make the code listings easier to read. We currently use that in the HTML, but not in the PDF.
Use linguist such as github flavored markdown.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.