Commit 64c97970 authored by Maarten de Waard's avatar Maarten de Waard 🤘🏻 Committed by Remon Huijts
Browse files

Resolve "Deploy to something other than "course uploads""

parent 70069c7a
---
default:
image: "${CI_REGISTRY_IMAGE}:${CI_COMMIT_REF_NAME}"
variables:
FTP_USER: 'webmaster_totemproject_org'
DOMAIN_NAME: 'totem-project.org'
stages:
- build-container
- provision
- build
- deploy
# Build a docker container in a docker container to build the website in a
# docker container in a docker container "yo dawg.."
build-container:
stage: build-container
image:
# We need a shell to provide the registry credentials, so we need to use the
# kaniko debug image (https://github.com/GoogleContainerTools/kaniko#debug-image)
name: gcr.io/kaniko-project/executor:debug
entrypoint: [""]
script:
- echo "{\"auths\":{\"$CI_REGISTRY\":{\"username\":\"$CI_REGISTRY_USER\",\"password\":\"$CI_REGISTRY_PASSWORD\"}}}" > /kaniko/.docker/config.json
- /kaniko/executor --cache=true --context ${CI_PROJECT_DIR}/ --dockerfile ${CI_PROJECT_DIR}/Dockerfile --destination ${CI_REGISTRY_IMAGE}:${CI_COMMIT_REF_NAME}
only:
changes:
- package.json
- Dockerfile
- .dockerignore
# Build the website
build:
stage: provision
script:
# Install dependencies (cached)
- yarn install
# Build the js components
- grunt build
variables:
LANG: C.UTF-8
LANGUAGE: C.UTF-8
LC_ALL: C.UTF-8
cache:
key: "${CI_COMMIT_REF_NAME}-provision"
paths:
- node_modules/**/*
artifacts:
# The cache can be unstable between GitLab CI stages
# (https://gitlab.com/gitlab-org/gitlab/issues/27382) so we need artifacts
# for the installation packages to be sure build-nl and build-net can use it
paths:
- build/**
expire_in: 1 hour
deploy-staging:
stage: deploy
environment:
name: staging
url: https://www-staging.totem-project.org
except:
- '/^master$/'
variables:
SUBDOMAIN: 'www-staging'
script:
- ./deploy.sh
deploy-production:
stage: deploy
environment:
name: production
url: https://www.totem-project.org
only:
- '/^master$/'
variables:
SUBDOMAIN: 'DEFAULT'
script:
- ./deploy.sh
FROM node:12-alpine
WORKDIR /volume
# Install sass
RUN apk add --update sassc git ruby-rdoc ruby-dev libffi libffi-dev make gcc libc-dev
# Install sass, and rsync and ssh-agent for deploying in CI
RUN apk add --update sassc git ruby-rdoc ruby-dev libffi libffi-dev make gcc libc-dev rsync openssh
RUN gem install sass --no-user-install
# Install grunt (yarn is already in the base image)
RUN npm install -g grunt-cli
......
......@@ -32,10 +32,7 @@ module.exports = (grunt) ->
data.debug = debug
build_arr = if debug then data.dev else data.build
for key, val of build_arr
if debug
data[key] = "../#{val}"
else
data[key] = val
data[key] = "../#{val}"
# Allows dynamic content markdown!
data.markdown = wrapMd data
data
......@@ -104,7 +101,7 @@ module.exports = (grunt) ->
expand: true
cwd: './src/sass/'
src: ['*.scss']
dest: '<%= settings.build.build_folder %><%= settings.build.fonts_path %>'
dest: '<%= settings.build.build_folder %><%= settings.build.css_path %>'
ext: '.css'
} ]
server:
......@@ -139,14 +136,13 @@ module.exports = (grunt) ->
extension: ".yml"
rename: 'dir'
yaml_mode: true
pretty: true
build:
options:
pretty: true
data: composeData false
filters:
markdown: wrapMd composeData false
coffee: require('coffee-script').compile
rename: 'file'
files: [ {
expand: true
ext: '.html'
......@@ -159,7 +155,6 @@ module.exports = (grunt) ->
} ]
server:
options:
pretty: true
data: composeData true
filters:
markdown: wrapMd composeData true
......
What this is
############
This is a collection components ("problems") that can be plugged into edX
This is a collection of components ("problems") that can be plugged into edX
courses. The "problems" are completely JavaScript based. There are no servers
to install, no additional components or requirements, the course creator can add
the problems to their courses entirely from within edX Studio.
......@@ -136,35 +136,21 @@ dependencies down to just a few compressed files – which is what we want.
Everything will be compiled and compressed and delivered to the project's
``build/`` directory.
When you enter the build directory you will find a whole bunch of files. Among
them the HTML files transpiled per localisation, the JavaScript file
(``totp.min.js``), the CSS file, a lot of font files, they all belong to edX's
"pattern library" (read style), and a few images. I would much rather have these
files be organised by directory.. But edX expects you to upload these into 1
directory and so, to load dependencies, we need to reference them from within
this single directory.
When you enter the build directory you will find a ``/common`` directory
containing ``/css``, ``/js``, ``/fonts`` and ``/media`` for style, javascript,
fonts and images respectively. You will also find a directory for each locale
the application is delivered in, containing the html files for that locale.
Adding the problem to a course
------------------------------
First you will need to upload the files:
The problems are hosted at
``https://totem-project.org/js-components/<locale>/<problem>.html``
- Open the course you want to use this in
- Click **Content** and then **Files and Uploads**
- Click on **Upload new File** or **Upload your first asset**.
- Click on **Choose file**
- Upload all the files in the ``build`` directory
- Take note of the locations of the files, you will see two file locations, one
really long one with many variables like:
``yourdomain.tls/asset-v1:UniversityOfMuppets+MFA001+201710+type@asset+block@problem_en.html``
and one that looks more friendly: ``/static/problem_en.html`` the latter is what you want!
.. Note::
It may appear that the upload interface will allow you to only upload a file
at a time, however you can select all the files in the file dialog and upload
them in a batch. However you cannot upload folders.
Next, in a course unit you can:
You can add a problem as a "Javascript Display and Grading", or as HTML only.
The first option contains a Submit button, applicable for example to check if
the TOTP problem was completed successfully. The latter will only include the
problem in the course, for example to show your IP address information.
If you want a "Submit" button with your problem:
......@@ -174,8 +160,8 @@ If you want a "Submit" button with your problem:
- Click on **Edit**
- Now, you need to paste the contents from this repository's
``examples/<your-problem>.html`` into the editor.
- Make sure the ``html_file`` attribute contains the URL you found in the
uploading step.
- Make sure the ``html_file`` attribute contains a link to the locale your
course is in.
Or, if you don't need a Submit button:
......@@ -185,8 +171,8 @@ Or, if you don't need a Submit button:
- Click the **HTML** button in the editor, so you can paste raw HTML.
- Now, you need to paste the contents from this repository's
``examples/<your-problem.html>-no-submit-button.html`` into the editor.
- Make sure the ``src`` attribute contains the URL you found in the uploading
step.
- Make sure the ``src`` attribute contains a link to the locale your course is
in.
- **Optional**:
......
#!/bin/sh
set -v
# Run ssh-agent and add ssh key.
eval $(ssh-agent -s)
printf '%s\n' "$SSH_PRIVATE_KEY" | ssh-add -
# Add server's ssh host key to known hosts.
mkdir -p ~/.ssh
[[ -f /.dockerenv ]] && echo "$SSH_SERVER_HOSTKEYS" > ~/.ssh/known_hosts
# Upload site.
rsync -avz --delete --exclude js-components ./build/ \
"${FTP_USER}@ftp.greenhost.nl:${DOMAIN_NAME}/${SUBDOMAIN}/js-components"
<p></p>
<p>Feel free to replace this text with your own.</p>
<p></p>
<p><iframe title="Check password" src="/static/problem_ip_en.html" marginwidth="0" marginheight="0" scrolling="no" width="402" height="202" frameborder="0">
<p><iframe title="Check password" src="//totem-project.org/js-components/en/problem_ip.html" marginwidth="0" marginheight="0" scrolling="no" width="402" height="202" frameborder="0">
Your browser does not support IFrames.
</iframe></p>
<p></p>
<p><em>Note:&nbsp;password checkers are good to test your password strategy, but do NOT submit your actual passwords!</em></p>
<p></p>
<p><iframe title="Check password" src="/static/problem_password_en.html" marginwidth="0" marginheight="0" scrolling="no" width="402" height="402" frameborder="0">
<p><iframe title="Check password" src="//totem-project.org/js-components/en/problem_password.html" marginwidth="0" marginheight="0" scrolling="no" width="402" height="402" frameborder="0">
Your browser does not support IFrames.
</iframe></p>
......@@ -22,7 +22,7 @@ def check_function(e, resp):
initial_state=''
width="600"
height="400"
html_file="/static/problem_totp_en.html"
html_file="//totem-project.org/js-components/en/problem_totp.html"
title="Multi Factor Authentication problem"
sop="true"/>
</customresponse>
......
......@@ -24,10 +24,10 @@ password_requirements:
build:
build_folder: "./build/"
html_path: ""
media_path: ""
js_path: ""
fonts_path: ""
css_path: ""
media_path: "common/media/"
js_path: "common/js/"
fonts_path: "common/fonts/"
css_path: "common/css/"
# These will be prefixed with the build direcory
# please make sure all paths are suffixed with "/"
dev:
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment