Giter Site home page Giter Site logo

oxfordrse / gutenberg Goto Github PK

View Code? Open in Web Editor NEW
4.0 5.0 5.0 1.83 MB

Home Page: https://oxfordrse.github.io/gutenberg

License: BSD 3-Clause "New" or "Revised" License

HTML 0.10% JavaScript 2.62% TypeScript 93.93% CSS 1.37% Dockerfile 1.09% Shell 0.05% Python 0.84%

gutenberg's Introduction

Gutenberg

Build and Test

Gutenberg is an open source research and teaching platform developed by the Oxford Research Software Engineering Group (OxRSE) at the University of Oxford as part of the UNIVERSE-HPC project.

It provides an environment for hosting training materials in a structured, pathway-based style, offering a visual interface for browsing the various sections of training content and viewing them.

A course management interface allows trainers to create a course syllabus based on materials set up within the system and then to make this available to students. Details of modules completed and results of exercises and challenges within the training material are collated and made available to course leaders to enable them to keep track of student progress.

You can deploy your own instance of the Gutenberg platform locally. Training material is stored in separate GitHub repositories that can be linked to a Gutenberg deployment. A set of open research computing training material that has been collated and updated to fit into the Gutenberg structure is configured within the system by default but you can develop and add your own material to the system.

A hosted deployment of Gutenberg is available at https://train.oxrse.uk/.

Application Overview

This is a Next.js project bootstrapped with create-next-app.

To see our full documentation, please visit our documentation site.

To get a development environment running, follow the instructions below:

Getting started (installing locally)

Setting up a local development requires the following software:

  • git version 2.43.0 or later - install according to instructions for your system
  • npm version 9.2.0 or later - install according to instructions for your system
  • node version v18.19.1 or later - packaged with npm
  • corepack version 0.28.0 or later - install with npm install -g corepack
  • yarn version 3.3.0 or later - installed via corepack with yarn --version
  • For developing the full web application functionality rather than just previewing materials, you'll also need a postgres instance

1. Clone repository

Clone the repository with git clone https://github.com/OxfordRSE/gutenberg.git.

Enter the directory with cd gutenberg.

2. Enable corepack

Install corepack if necessary with npm install -g corepack.

Enable corepack with corepack enable.

3. Install dependencies

Run yarn --version to check the version of your yarn package manager. corepack will prompt you to install it if you don't have it already.

With yarn installed you can run yarn install to install dependencies listed in package.json. The specific versions of packages we use are frozen in yarn.lock, so you'll be guaranteed to have working versions of each dependency.

4. Pull the material from any target repositories

Gutenberg separates its source material from its rendering engine by design. This means you need to copy some source material before you have anything to display!

The HPC materials are already listed as a source via the NEXT_PUBLIC_MATERIAL_URL variable in the .env file.

To download those materials, so we have something to work with, run yarn pullmat and they will be cloned into a local .materials directory.

5. (Setting up a postgres database)

If you just want to develop materials and preview their rendering, skip this step.

If you want to change the rendering system itself, you'll need a database. The database is required for the interactive parts of the site - tracking users' behaviour etc.

The connection string for the database is listed in .env. It wants a postgres service listening on localhost:5432 (the default port), that will accept connections from postgres:password.

One way to do this fairly simply is using docker.

docker run -d -e POSTGRES_PASSWORD=password -p 5432:5432 postgres

If you're already in a docker container, you can install postgres directly with apt install postgresql and then run it with service postgresql start. You'll also need to do a couple more steps to enable serving over localhost:5432 and connecting with postgres:password as the username:password. Those steps can be found on the Ubuntu support pages. If that's all too hard, you can install docker within a container using apt install docker and it should all be fine, at least for local development. The instructions for doing so are on the Docker support pages.

With the database available, we then need to create the various tables etc. that Gutenberg uses with yarn prisma migrate dev.

6. Start the development server

The local development server can be started with yarn dev.

When the next server is ready, it will print out its URL. This will probably be http://localhost:3000.

Visit that URL in your browser to see your local instance deployed. The development server watches your files, and refreshes when it sees changes. This means that your edits will be reflected instantly.

Now everything should be set up for local development of the core systems.

Getting started (using Docker-compose)

Gutenberg also has a deployable dev environment using docker-compose. If you wish to use this alternative then see getting started using docker compose.

Developing material

You can develop material by editing the .material folder. Changes will be instantly reflected in the browser if you are running the development server.

All of the content is standard markdown, with the addition of special callouts you can use to present exercises, etc. in a consistent manner.

When you're happy with your changes, you can issue a pull request for your changes to the repository you originally cloned in Getting Started.

Developing the renderer

The renderer code is written in TypeScript, and consists of a React frontend and NextJS backend, both located within this repository.

The backend's interaction with the database is performed using prisma.

Prisma Studio

Prisma Studio is a GUI for viewing and editing the database. It can be started with:

npx prisma studio

The prisma command only reads from .env and not .env.local, so you will need to either copy the values from .env.local to .env, or use a command like dotenv to populate the environment variables. For example:

npm install dotenv-cli -g
dotenv -e .env.local npx prisma studio

Deployment

Gutenberg is automatically deployed to fly.io by a GitHub action whenever a new commit is pushed to the main branch.

To see how to deploy the application, see our deployment guide.

gutenberg's People

Contributors

alasdairwilson avatar dependabot[bot] avatar eatyourgreens avatar fcooper8472 avatar iamjulian0 avatar jackleland avatar jcohen02 avatar martinjrobins avatar mjaquiery avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

gutenberg's Issues

light-mode issues

  • buttons on challenges not showing up in light mode
  • some images don't work well in light mode

clean up material diagram

  • remove cross-theme links at toplevel
  • remove sections from top level
  • add cross-course links at course level

need an admin user role

So we can implement admin UI / endpoints (e.g. creating / editing an event, adding users to an event)

toUTCString -> toLocaleString

In some pages/components we are displaying datetimes as UTC strings rather than user's locale (e.g. see EventView.tsx).

Need to find these and change to using toLocaleString()

Comments system

students should be able to ask questions on material and receive responses, each CommentThread row has:

  • event (foreign key to Event, required)
  • eventgroup (foreign key to EventGroup, optional)
  • section (string, link to material page, blank if not linked to material)
  • problem (string, link to problem, blank if not linked to a problem)
  • text_ref (string, text within section that this comment refers to, includes surrounding text, blank if not linked to material)
  • text_ref_start (optional, index within text_ref that indicates start of text that this comment refers to)
  • text_ref_end (optional, index within text_ref that indicates end of text that this comment refers to)

each Comment has:

  • markdown for content (string, required)
  • comment (foreign key, required)
  • next_comment (foreign key to Comment, optional)

In UI:

  • users can add comments to event and eventgroup pages
  • users can highlight text in the material (or select a paragraph, this might be more feasible) and add a comment along with some markdown
  • users can see and respond to comments if they have selected (and enrolled in) its event

Anchor links for challenges

challenges should have id=<id>, where <id> is the id from the challenge directive in the material. This way we can link to them from elsewhere

student/instructor views

  • students should see their progression through the material
  • Instructors should see problem data submitted by students

In Sidebar:

  • Instructors :"x%" next to each item indicating the average percentage complete of each item across the enrolled students. If the item has no problems this is not displayed
  • Students: "a/b" next to each item indicating the number of complete problems in each item. If the item has no problems this is not displayed. If a section is complete it changes color to green with a tick instead.

On Problem:

  • Instructors: eye icon that opens a dialog showing full list of responses
  • Instructors: tick icon and "a/b" indicating number of students who have completed this problem
  • Instructors: easy / average / hard colored amber / green / red with tooltip showing "a/b" difficulty

render markdown slides

We've started putting in markdown slide material in some courses (under slides subdir). Would be good if gutenberg rendered these in some format (e.g. reveal.js)

add deployment ci

deployment step in test.yml is empty, need to fill this in to deploy to train.oxrse.uk (if other site exist, southampton, should have other jobs to deploy there as well? @steve-crouch)

note that we have depoy.yml to deploy to github static pages, this should be merged into test.yml perhaps?

Templatise the front-page layout

It would be nice to have a templatised front-page layout in some way, to make it easier for new deployers to customise to their own needs - and then reference it in the deployment instructions.

timeline summary on event page

need a timeline summary on the main event page. This page is viewable by those who are not yet enrolled, so shouldn't contain locations or any other info we want to restrict

Have paragraph selectors for headings and exercises

It would be convenient to have a heading/exercise paragraph selector for copying direct links to sections or exercises to send to others (like with the Carpentries formatting style). This would be particularly useful for instructors referencing particular sections or challenges for learners.

intermittent fails on component tests with Error: ResizeObserver loop limit exceeded

fail
pass

I thought this was an issue with updating the node version to 18 to but I can semi-reliably recreate this on node 16 as well. It seems to happen less often with cypress 13+ (which requires node>20), working every time for me locally and well at least once on the CI, though with 1 fail too.

Stack overflow seems to suggest this error should just be caught and ignored as it is meaningless but making an issue just in case this is inaccurate.

cannot clear active event

  1. select an active event
  2. unselect active event
  3. refresh the page and the original event is still active

Change topbar nav to burger menu on small screens

When you go deep down a material tree the navbar gets destroyed on mobile devices, we should make it collapse on small screens, rprobably keep the right hand side icons but make the material nav into a burger menu

image

Backwards/forwards navigation between episodes

Consider adding backwards and forwards navigation icons (perhaps at the bottom or top of the episode content pages) so learners and instructors can progress to previous and next episodes more quickly.

useEffect warnings

we've got various useEffect warnings for dependencies, need to tidy up these

semantic search for material

My plan is to use openai to make vectors, save them to a local qdrant vector db and search terms are also vectorised and compared to the db.

survey forms for event + eventGroup

@steve-crouch has put together a great set of survey questions based on those used at the southampton pilots. It would be good to incorporate them as feedback froms into gutenberg. Perhaps:

  1. Pre-event questionair: This might be event specific so would be difficult to implement as I'm not sure how you could automatically generate a form from a supplied desciptor. You sorta can do it using json-schemas, but its fiddly
  2. Post-event questionair: Again very event specific so not sure how to implement this. Could just link to a google/microsoft form? Put the link into the event content markdown
  3. feedback for eventGroup. This I can see being easier to implement as the questions are very generic, so could put together a standard form. Then each eventGroup has a link to the feedback from for that eventGroup, and stored in the dbase linked to that particular eventGroup

More responsive material pages web layout

Would it make sense to have a more responsive web layout for material pages, where the content width resizes proportionally to the browser width? This may make sense for learners (and those delivering instructor-led sessions) with larger monitors.

Render bullet-pointed list of material on main material overview page

On the materials overall page, below the diagram it might be useful to have the materials rendered as a bullet point-style list (e.g. by module/lesson) which links to the modules/lessons in the material. This may become more important as more material is added to ease navigation.

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.