diff --git a/README.md b/README.md index 34c44ef..db835c9 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,19 @@ -# Jupyter Book Manual +# TeachBooks Manual -A short introduction to Git, VSCode and Jupyter Books for teachers and TA's. Currently, this book only holds some generic installation instructions. In the near future, this will be extended with guides on the Git/Jupyter Book workflow, as well as some recipes and examples on Jupyter Book components. +This manual assists you in creating and collaborating on [JupyterBooks](https://jupyterbook.org/) for educational purposes. Some parts are specifically aimed for teachers at Delft University of Technology, although all material and tools are openly available. This manual aims at providing an easy start and advanced usages for new and existing users with or without skills on this topic. it is part of TeachBooks, for more information visit [https://teachbooks.tudelft.nl/](https://teachbooks.tudelft.nl/). -## Contributing +## Contact +If you encounter any issues and you have a TU Delft account, report it by clicking --> {fa}`lightbulb` on the top right corner of this page. Or contribute directly by creating a merge request in the [repository](https://gitlab.tudelft.nl/interactivetextbooks-citg/jupyter-book-manual). -Feedback is always welcome. If something doesn't work, or if you have suggestions, you can always make an issue on the Issue Board or make a Merge Request. If you create a branch, that branch will also be visible on the mirrored repository on GitHub to ease reviewing: https://github.com/TeachBooks/mirror_teachbook_manual/actions +If you have questions, contact Tom van Woudenberg, Robert Lanzafame or our TA Julie Kirsch at TeachBooks@tudelft.nl, also for non-TU Delft account holders. TU Delft account holder can also contact us in the [MS Teams Open Interactive Textbooks Community](https://teams.microsoft.com/l/team/19%3Ah9-uRcP_yYauh-VuoPFozJVUvHVOB4a0mz1ZWvh4q4Q1%40thread.tacv2/conversations?groupId=3e88c1f3-4a4f-483a-a366-7e617de9ba99&tenantId=096e524d-6929-4030-8cd3-8ab42de0887b) -If you've questions, contact Tom van Woudenberg, Robert Lanzafame or our TAs Julie Kirsch at TeachBooks@tudelft.nl, also for non-TU Delft account holders. TU Delft account holder can also contact us in the [MS Teams Open Interactive Textbooks Community](https://teams.microsoft.com/l/team/19%3Ah9-uRcP_yYauh-VuoPFozJVUvHVOB4a0mz1ZWvh4q4Q1%40thread.tacv2/conversations?groupId=3e88c1f3-4a4f-483a-a366-7e617de9ba99&tenantId=096e524d-6929-4030-8cd3-8ab42de0887b) \ No newline at end of file +We really value your feedback on this manual. This helps us improving it. Please keep using the manual as you build your own Jupyter Book and come back to fill out this short [survey](https://forms.gle/hXbFUQgN95H8ftxt9). + +## Contribute +This book will continue to develop, so feel free to contribute https://gitlab.tudelft.nl/interactivetextbooks-citg/jupyter-book-manual! You can do so directly by forking this repository and creating a merge request. + +The released book can be found on on https://teachbooks.tudelft.nl/jupyter-book-manual. This page shows the built book of the `release` branch. The `main` branch is meant for reviewing and is visible here: https://teachbooks.tudelft.nl/jupyter-book-manual/draft. All branches will also be visible on the mirrored repository on GitHub Pages: https://github.com/TeachBooks/mirror_teachbook_manual/actions + +Some parts of this book are taken from other sources in the form of submodules (linked in the folder [book/external](book/external)). To contribute to those pages, contribute to the source repository directly with a fork and merge/pull request. If you intent to clone this boko including its submodules, clone using: `git clone --recurse-submodules git@gitlab.tudelft.nl:interactivetextbooks-citg/jupyter-book-manual.git` + +Happy book building! \ No newline at end of file diff --git a/book/_toc.yml b/book/_toc.yml index e875ba8..85cba5c 100644 --- a/book/_toc.yml +++ b/book/_toc.yml @@ -4,23 +4,23 @@ root: intro parts: - caption: Getting started! chapters: - - file: installation-and-setup/user_types - - file: installation-and-setup/git - - file: installation-and-setup/overview + - file: installation-and-setup/user_types.md + - file: installation-and-setup/git.md + - file: installation-and-setup/overview.md sections: - - file: installation-and-setup/vscode-setup - - file: installation-and-setup/git-setup_local - - file: installation-and-setup/anaconda + - file: installation-and-setup/vscode-setup.md + - file: installation-and-setup/git-setup_local.md + - file: installation-and-setup/anaconda.md - file: installation-and-setup/git_bash_conda_vs-code.md - - file: installation-and-setup/jupyter-book-setup + - file: installation-and-setup/jupyter-book-setup.md - file: external/template/README.md - - file: workflows/collaboration + - file: workflows/collaboration.md sections: - - file: workflows/milestones_issues - - file: workflows/branches - - file: workflows/edit_book - - file: workflows/check_changes_online - - file: workflows/merge_request + - file: workflows/milestones_issues.md + - file: workflows/branches.md + - file: workflows/edit_book.md + - file: workflows/check_changes_online.md + - file: workflows/merge_request.md - file: installation-and-setup/collab - file: installation-and-setup/tools - file: installation-and-setup/creating_content.md @@ -39,7 +39,7 @@ parts: title: Banner or Announcement - file: basic-features/hypothesis.md - file: basic-features/utterances.md - - file: features/overview + - file: features/overview.md sections: - file: external/TeachBooks/README.md - file: external/deploy-book-workflow/README.md diff --git a/book/basic-features/References.md b/book/basic-features/References.md index 1a8c1ee..c2e5a27 100644 --- a/book/basic-features/References.md +++ b/book/basic-features/References.md @@ -8,7 +8,8 @@ To make references to figures, equations et cetera, use the following syntax: **Examples** -Using ``{numref}`Figure {number} ` `` produces the output: {numref}`Figure {number} `. +- Using ``{numref}`Figure {number} ` `` produces the output: {numref}`Figure {number} `. + ```{figure} ../images/git-push.png --- width: 50% @@ -17,7 +18,7 @@ name: fig-gitpush Some caption here ``` -Or, the derivation results in equation {eq}``. +- Using ``{eq}`` `` to refer to Newton's second law {eq}`eq:Newton`. $$ F = m\cdot a $$(eq:Newton) diff --git a/book/basic-features/equations.md b/book/basic-features/equations.md index 1aa80d1..4f6d293 100644 --- a/book/basic-features/equations.md +++ b/book/basic-features/equations.md @@ -1,6 +1,8 @@ # Equations -Equations can be included in two ways: inline or display mode. To make an inline equation, just put the LaTeX equation between \$-signs. For example, `$F = m \cdot a$` produces: $F = m \cdot a$. +Equations can be included in two ways: inline or display mode. + +To make an inline equation, just put the LaTeX equation between \$-signs. For example, `$F = m \cdot a$` produces: $F = m \cdot a$. Display mode equations (the ones that take up a whole line), can be inserted using double \$-signs, like this: @@ -35,9 +37,9 @@ Resulting in: $$ F = m \cdot a -$$ (newtons_second_law) +$$ (show_newtons_second_law) -Equation {eq}`newtons_second_law` can now be referred to. +Equation {eq}`show_newtons_second_law` can now be referred to. > **Note** > diff --git a/book/basic-features/jupyterbook.md b/book/basic-features/jupyterbook.md index cb04343..6737a17 100644 --- a/book/basic-features/jupyterbook.md +++ b/book/basic-features/jupyterbook.md @@ -9,7 +9,7 @@ To build a Jupyter Book, you need three things: ## The configuration file The configuration file of Jupyter Books is named `_config.yml`. It mainly contains settings that apply when building the book. Here is a basic example of a configuration file, taken from this book: -```yml +```yaml title: Jupyter Book Manual author: Interactive Textbooks CiTG logo: images/TUDelft_logo_rgb.png @@ -43,7 +43,7 @@ The configuration and table of contents files are in YAML format (short for YAML The table of contents (`_toc.yml`) file is where you define the structure of your book. You can organize content in *parts*, *chapters*, and *sections* (and subsections, each new section creating a dropdown menu in the ToC). This is what a table of contents could look like: -```yml +```yaml - format: jb-book - root: intro @@ -61,7 +61,7 @@ et cetera... `root` is the landing page of your book. It will be the first page that people see when they visit the book. You can include files by providing their *relative* path (so the location with respect to `_toc.yml`). These files can be a combination of Markdown, Jupyter Notebooks, and Restructured Text. The example above does not have parts, so the menu on the left will consist of just a list of the chapters. You can also group chapters in parts like this: -```yml +```yaml - format: jb-book - root: diff --git a/book/examples/book_structure.md b/book/examples/book_structure.md index daba15f..db702ee 100644 --- a/book/examples/book_structure.md +++ b/book/examples/book_structure.md @@ -16,7 +16,7 @@ DSAIE Overview Page ``` While the left menu shows the first two chapters in the table of contents (Home & Logistics), the right hand side menu shows the sections of the current chapter where an introduction is given on the different units of the course, the responsible lecturers as well as the schedule of lectures and practicals. Additionally, the book layout is explained to the students which can help clarify how to use the interactive sections! -The anatomy of a jupyter book is explained more in detail in [this](/jupyter-book-manual/book/basic-features/jupyterbook.md) page. In short, you can create structure in your book by having chapters and subschapters defined in the `.toc` file. In each chapter you can organize the content in sections using the `#` syntax which is visible in the menu on the right. +The anatomy of a jupyter book is explained more in detail on [this page](../basic-features/jupyterbook.md). In short, you can create structure in your book by having chapters and subschapters defined in the `.toc` file. In each chapter you can organize the content in sections using the `#` syntax which is visible in the menu on the right. ## Tagged content diff --git a/book/examples/h5p_examples.md b/book/examples/h5p_examples.md index 85ea397..bce73d9 100644 --- a/book/examples/h5p_examples.md +++ b/book/examples/h5p_examples.md @@ -5,7 +5,8 @@ This page will show some examples of H5p quizzes built into a variety of TeachBo ## Getting started with H5p Some best-practices on the use of H5p: - - To startup your H5p-account, first login to H5p via Brightspace (follow instructions as under [https://www.tudelft.nl/teaching-support/educational-tools/h5p](https://www.tudelft.nl/teaching-support/educational-tools/h5p)). After that, direct login is possible via [tudelft.h5p.com](tudelft.h5p.com) + - To startup your H5p-account, first login to H5p via Brightspace. You can follow instructions as under [https://www.tudelft.nl/teaching-support/educational-tools/h5p](https://www.tudelft.nl/teaching-support/educational-tools/h5p). + - After that, direct login is possible via [tudelft.h5p.com](https://tudelft.h5p.com) - Place your H5p-elements in a shared folder in H5p. - Disable the display options "Toolbar Below Content" and "Display author's name to public (anonymous users) (only relevant when content's status is set to Public )" for each diff --git a/book/examples/live_code.md b/book/examples/live_code.md index 1b1a6bb..c6fa5f4 100644 --- a/book/examples/live_code.md +++ b/book/examples/live_code.md @@ -17,9 +17,9 @@ align: center --- Rocket Button ``` -To activate the live coding, the rocket button has to be activated like in the figure above. It's always useful to point this out in the beginning of the chapter because it might not be obvious to new users. Here's a not eused in the MUDE book +To activate the live coding, the rocket button has to be activated like in the figure above. It's always useful to point this out in the beginning of the chapter because it might not be obvious to new users. Here's a note used in the MUDE book. -```{Interactive Pages—Use Python in your Browser!} +```{Note} Interactive Pages — Use Python in your Browser! This online textbook has a number of pages that are set up to be used interactively. You can use the “Live Code” button under the Rocket Ship icon in the top right to activate the interactive features and use Python interactively! Sometimes the interactivity will involve completing an exercise, wheras on other pages it might simply provide the opportunity to edit the contents of code cells and execute it to explore the page contents interactively. Other pages may provide interactive figures (e.g., widgets). diff --git a/book/examples/overview.md b/book/examples/overview.md index 160131d..595f6a1 100644 --- a/book/examples/overview.md +++ b/book/examples/overview.md @@ -1,4 +1,4 @@ -# Overview +# TeachBooks Examples This chapter will showcase some TeachBooks making great use of Jupyter Book and TeachBooks features. They can serve as an inspiring starting point for structuring your own TeachBook or just to get an idea of how other teachers and students are using it. Lastly some example pages are shown which combine theory and interactive questions and coding to different degrees. diff --git a/book/features/live_code.ipynb b/book/features/live_code.ipynb index 84e5d01..1546fa0 100644 --- a/book/features/live_code.ipynb +++ b/book/features/live_code.ipynb @@ -153,6 +153,7 @@ "metadata": {}, "source": [ "## Alternative with JupyterLite (less well integrated)\n", + "\n", "Another option to use python in your browser is to use JupyterLite. However, this doesn't give a similar seamless interface. You could create 'iframe-like' Ipython consoles / jupyterbook / jupyter lab environments in your book. As these 'iframes' are separate modules added to your page, the integration with the other content in your book is less flexible as with our sphinx-thebe extension. Furthermore, the best way to use a JupyterLite session would be a separate repo with the jupyter lab interface anyway, so you get the full browser experience. Alternatively, the ipython REPL better can be usefull, as shown here: https://teachbooks.github.io/learn-python/main/Python_Toolbox.html." ] } diff --git a/book/features/overview.md b/book/features/overview.md index ea508a4..989d876 100644 --- a/book/features/overview.md +++ b/book/features/overview.md @@ -8,5 +8,5 @@ This chapter provides a list of commonly used book features together with sub-pa - how to use them - where to find the source code -To see examples for these features, go to the [Examples chapter](/book/examples/overview.md). +To see examples for these features, go to the [Examples chapter](../examples/overview.md). diff --git a/book/features/widgets.ipynb b/book/features/widgets.ipynb index 36bff96..2d441bb 100644 --- a/book/features/widgets.ipynb +++ b/book/features/widgets.ipynb @@ -6,7 +6,7 @@ "source": [ "# Ipywidgets\n", "\n", - "If you publish widgets in a jupyter book they might (depending on your implementation) require an active python kernel for the output to be interactive. Using the [thebe-integration](live_code.md), this is possible. Note: You can circumvent the use of a kernel by using packages which don't need such a kernel, for example the [non-kernel-based widgets using Plotly](interactive_element).\n", + "If you publish widgets in a jupyter book they might (depending on your implementation) require an active python kernel for the output to be interactive. Using the [thebe-integration](../examples/live_code.md), this is possible. Note: You can circumvent the use of a kernel by using packages which don't need such a kernel, for example the [non-kernel-based widgets using Plotly](interactive_element).\n", "\n", "## `matplotlib` widgets\n", "When you'd like to use `ipywidgets` in combinations with a `matplotlib` figure, import the following packages:\n", diff --git a/book/helper_code/intro.md b/book/helper_code/intro.md index 8268cf1..c5e7c38 100644 --- a/book/helper_code/intro.md +++ b/book/helper_code/intro.md @@ -4,7 +4,7 @@ This chapter contains a few scripts which can be useful in the book-editing proc - [LaTeX to markdown conversion](../external/latex-to-markdown-conversion/README.md) to convert a LaTeX file into jupyter-book compatible markdown. - [Snippitall](Snippitall) to insert the same code snippet at a certain point in each md file in a specific folder and all subfolder. - [Snippitonce](Snippitonce) to insert the same code snippet at a certain point in each md file only in a specific folder. - - [Extensionchecker](extensionchecker) to identify the kind of files present in subfolder - - [Filedownloader](filedownloader) to return the downloadlink for markdown for all files with a specified extension + - [Extensionchecker](Extensionchecker) to identify the kind of files present in subfolder + - [Filedownloader](Filedownloader) to return the downloadlink for markdown for all files with a specified extension - [Figreturner](figreturner) to return the markdown code for a figure in a specific extension - [Figshrinker](../external/Useful_python_code/figshrinker.ipynb) to compress JPEG images. \ No newline at end of file diff --git a/book/installation-and-setup/git-setup_local.md b/book/installation-and-setup/git-setup_local.md index 3444fd1..b765577 100644 --- a/book/installation-and-setup/git-setup_local.md +++ b/book/installation-and-setup/git-setup_local.md @@ -127,6 +127,6 @@ This is a (non-exhaustive) list of terminology that will be used in Git for loca - Tracked (files): files that Git knows about and keeps track of their history. - Untracked (files): files that Git does not yet know about. -## More on GitLab +## More on GitLab/GitHub -To get to know more about working in GitLab and getting familiar with its features, click [here](/jupyter-book-manual/book/workflows/overview.md) or watch this [video](https://www.youtube.com/watch?v=1SBtM3znviU&t=1s)! \ No newline at end of file +To get to know more about working in GitLab/GitHub and getting familiar with its features, click [here](../workflows/collaboration.md) or watch this [video](https://www.youtube.com/watch?v=1SBtM3znviU&t=1s)! \ No newline at end of file diff --git a/book/installation-and-setup/jupyter-book-setup.md b/book/installation-and-setup/jupyter-book-setup.md index 9c9c2d2..a947a77 100644 --- a/book/installation-and-setup/jupyter-book-setup.md +++ b/book/installation-and-setup/jupyter-book-setup.md @@ -5,7 +5,7 @@ This page is useful for user type 5. ``` -Jupyter book is a regular Python package which converts our content into a website. It's part of all of the `requirements.txt` files for a book repository. At TeachBooks we developed a Python package called `teachbooks` which takes over the these features and adds [additional features](/book/features/overview.md). One of those additional features, for example, is the workflow to GitHub Pages. +Jupyter book is a regular Python package which converts our content into a website. It's part of all of the `requirements.txt` files for a book repository. At TeachBooks we developed a Python package called `teachbooks` which takes over the these features and adds [additional features](../features/overview.md). One of those additional features, for example, is the workflow to GitHub Pages. Concretely, this means that the teachbooks package can be used to replace the Jupyter book package when calling these features. You could think of it as `jupyter-book` being a dependency of `teachbooks`. @@ -32,7 +32,7 @@ Note: use `--all` for the jupyter-book whenever building a book to make sure the Once the build process is completed successfully, you will see the file location in your terminal output. Your terminal will look something like this. Simply open this in the browser (you may have to copy/paste). -```{figure} ./figures/Terminal.PNG +```{figure} figures/Terminal.PNG --- width: 80% name: terminal diff --git a/book/installation-and-setup/user_types.md b/book/installation-and-setup/user_types.md index 9f99f01..df278be 100644 --- a/book/installation-and-setup/user_types.md +++ b/book/installation-and-setup/user_types.md @@ -17,8 +17,9 @@ Different types of users will interact with the website or the Jupyter Books dif 5. **Colleague making text and code (especially Python) adjustments to multiple files at the same time locally**.
Example Image
This user has more knowledge in GitLab/GitHub than the previous user and can basically take care of branching and merging by themselves. They know how to work with software for editing .md and .ipynb files. They can use the draft book online to view their changed in the book, or build the book locally. +
```{Note} -At this point, you might already be trying to see which user type fits you the best. We are aware that the lines between user types can be a bit blurry, especially between type 3, 4 and 5. If case you're (1) a user type 3 and want to dabble in git or (2) a user type 4/5 and want to make some quick edits with only a few clicks, then you might consider using a more advanced online editor in GitHub (GitHub Dev) as explained [further on in Collaborative book-editing - Edit - User type 3 - GitHub](../workflows/edit_book.md). +At this point, you might already be trying to see which user type fits you the best. We are aware that the lines between user types can be a bit blurry, especially between type 3, 4 and 5. In case you're (1) a user type 3 and want to dabble in git or (2) a user type 4/5 and want to make some quick edits with only a few clicks, then you might consider using a more advanced online editor in GitHub (GitHub Dev) as explained further on in [Collaborative book-editing > Edit](../workflows/edit_book.md) > User type 3 > GitHub > Using VS Code in your browser. ``` \ No newline at end of file diff --git a/book/intro.md b/book/intro.md index f362f04..b3c986b 100644 --- a/book/intro.md +++ b/book/intro.md @@ -1,13 +1,19 @@ # TeachBooks Manual -This is an introduction to Git, VS Code and Jupyter Books for teachers and teaching assistants involved in TeachBooks, our platform easing the process of making a Jupyter book. This book will continue to develop, so feel free to contribute https://gitlab.tudelft.nl/interactivetextbooks-citg/jupyter-book-manual! For more information about teachbooks, visit [https://teachbooks.tudelft.nl/](https://teachbooks.tudelft.nl/). +This manual assists you in creating and collaborating on Jupyter book for educational purposes. Some parts are specifically aimed for teachers at Delft University of Technology, although all material and tools are openly available. This manual aims at providing an easy start and advanced usages for new and existing users with or without skills on this topic. it is part of TeachBooks, for more information visit [https://teachbooks.tudelft.nl/](https://teachbooks.tudelft.nl/). ## Contact If you encounter any issues and you have a TU Delft account, report it by clicking --> {fa}`lightbulb` on the top right corner of this page. Or contribute directly by creating a merge request in the [repository](https://gitlab.tudelft.nl/interactivetextbooks-citg/jupyter-book-manual). If you have questions, contact Tom van Woudenberg, Robert Lanzafame or our TA Julie Kirsch at TeachBooks@tudelft.nl, also for non-TU Delft account holders. TU Delft account holder can also contact us in the [MS Teams Open Interactive Textbooks Community](https://teams.microsoft.com/l/team/19%3Ah9-uRcP_yYauh-VuoPFozJVUvHVOB4a0mz1ZWvh4q4Q1%40thread.tacv2/conversations?groupId=3e88c1f3-4a4f-483a-a366-7e617de9ba99&tenantId=096e524d-6929-4030-8cd3-8ab42de0887b) -## Feedback We really value your feedback on this manual. This helps us improving it. Please keep using the manual as you build your own Jupyter Book and come back to fill out this short [survey](https://forms.gle/hXbFUQgN95H8ftxt9). +## Contribute +This book will continue to develop, so feel free to contribute https://gitlab.tudelft.nl/interactivetextbooks-citg/jupyter-book-manual! You can do so directly by forking this repository and creating a merge request. + +The released book can be found on on https://teachbooks.tudelft.nl/jupyter-book-manual. This page shows the built book of the `release` branch. The `main` branch is meant for reviewing and is visible here: https://teachbooks.tudelft.nl/jupyter-book-manual/draft. All branches will also be visible on the mirrored repository on GitHub Pages: https://github.com/TeachBooks/mirror_teachbook_manual/actions + +Some parts of this book are taken from other sources in the form of submodules (linked in the folder [book/external](book/external)). To contribute to those pages, contribute to the source repository directly with a fork and merge/pull request. If you intent to clone this boko including its submodules, clone using: `git clone --recurse-submodules git@gitlab.tudelft.nl:interactivetextbooks-citg/jupyter-book-manual.git` + Happy book building! \ No newline at end of file diff --git a/book/workflows/branches.md b/book/workflows/branches.md index 904f05d..4be0eaf 100644 --- a/book/workflows/branches.md +++ b/book/workflows/branches.md @@ -21,66 +21,15 @@ The act of making a new branch from an existing one is called *branching*. Usual ``````{tab-item} ... GitLab -1. Navigate to the repository of your project. Under the project description, you should see a menu button with a "+" in it (see {numref}`new-branch-button`). Click this button, then click on "New branch". - -```{figure} ../images/gitlab-branch.png -:name: new-branch-button - -Click the highlighted button to make a new branch. +```{include} new_branch_gitlab.md ``` -2. A new page opens ({numref}`new-branch-menu`), on which you can specify the name of your branch and the source branch. Try to think of a good name for your branch. For example, `chapter-2` is a suitable name if we're going to be working on Chapter 2 of our book. After you've made sure that the selected source branch is correct, click "Create branch". - -```{figure} ../images/gitlab-branch-name.png -:name: new-branch-menu - -We're making a new branch called `chapter-2` from the `main` branch. -``` - -3. You should be sent back to an overview page of your repository. In the branch selection menu (see {numref}`new-branch-repo`), it should now say `chapter-2` instead of `main`. Here you can also select another existing branch which is what we previously called `selecting an existing version`. - -```{figure} ../images/gitlab-new-branch-repo.png -:name: new-branch-repo - -The circled menu is the branch selection menu. -``` `````` - ``````{tab-item} ... GitHub -How to branch is demonstrated in the figure below, all steps are elaborated on in the following step-by-step tutorial. - -```{figure} figures/branching-github-ezgif.com-optimize.gif ---- -name: branching_demo ---- -Demonstration, video available [here](https://youtu.be/3ceMSLQpD70) +```{include} new_branch_github.md ``` -1. Open the repository in which you want to work in. In the top bar you will see your current branch `main` and next to that there is a tab called `Branches`. - -
- Example Image -
- -2. Clicking on `Branches` will bring you to an overview of all the branches in the repository. Click on the green `Create Branch` button. - -
- Example Image -
- -3. Finally, give your branch a name and specifiy the source branch.
-Tip: It makes sense to give the branch a name related to the content you will be creating or altering. - -
- Example Image -
- -4. You will find your new branch in the drop down menu as seen on the figure below. You can then select your new branch and start working in it (new version) but you can also work in any other branch if you are helping out a colleague with their chapter for example (existing version). - -
- Example Image -
`````` ``````` `````````` @@ -103,11 +52,13 @@ If your repository is already cloned on your computer, you are almost ready to s ``````{tab-item} ... GitLab -1. Navigate to the repository of your book. Click on the blue button that says "Clone" ({numref}`gitlab-clone`), and copy the link under "Clone with SSH". +1. Navigate to the repository of your book. Click on the blue button that says "Clone", and copy the link under "Clone with SSH". + ```{figure} ../images/gitlab-clone.png -:name: gitlab-clone - +--- +name: gitlab-clone +--- The cloning menu. ``` `````` @@ -116,36 +67,50 @@ The cloning menu. 1. Open the repository that you would like to clone. In the top bar on the right, you will a green button called `<> Code`. -
- Example Image -
+```{figure} figures/NewBranch_GitHub.PNG +--- +name: NewBranch_GitHub1 +--- +Overview +``` 2. Clicking on the button will display the following screen. Make sure the option `SSH` is selected and copy the link. -
- Example Image -
-`````` +```{figure} figures/Clone_GitHub.PNG +--- +name: Clone_GitHub +--- +Clone using SSH +``` ``````{tab-item} ... GitHub through GitHub Desktop 1. Open the repository that you would like to clone. In the top bar on the right, you will a green button called `<> Code`. -
- Example Image -
+```{figure} figures/NewBranch_GitHub.PNG +--- +name: NewBranch_GitHub2 +--- +Overview +``` 2. Clicking on the button will display the following screen. Click on `Open with GitHub Desktop`. -
- Example Image -
+```{figure} figures/Clone_GitHub.PNG +--- +name: Clone_GitHub1 +--- +Clone using SSH +``` 3. The Browser should then automatically open GitHub Desktop. Customize the path to the location where you would like to save to files locally. Finally, click on `Clone`. -
- Example Image -
+```{figure} figures/CloneRepo_TroughGithubdesk.PNG +--- +name: CloneRepo_TroughGithubdesk.PNG +--- +Clone through GitHub Desktop +``` You have now directly cloned the repository, so you can skip the next step! `````` @@ -154,9 +119,10 @@ You have now directly cloned the repository, so you can skip the next step! **(b) ... and opening (cloning) the local repository with ...** ```````{tab-set} + ``````{tab-item} ... VS Code -1. Open a new VS Code window. You should be greeted with a welcome page ({numref}`vscode-welcome`). On this page, click "Clone Git Repository". Alternatively, open the Source Control menu from the left side bar, and click on "Clone Repository". +1. Open a new VS Code window. You should be greeted with a welcome page. On this page, click "Clone Git Repository". Alternatively, open the Source Control menu from the left side bar, and click on "Clone Repository". ```{figure} ../images/vscode-welcome.png :name: vscode-welcome @@ -197,71 +163,20 @@ Have a look at the other section!** **(a) by creating my own version (branching) or select an existing version (checkout branch) ...** -Although it is possible to create new branches in VS Code directly, creating new branches on the remote repository (on GitLab or GitHub) is better for collaborating because the new branch becomes immediately visible to everyone working in the repository as opposed to becoming visible after being pushed to the remote repository. +Although it is possible to create new branches in VS Code or GitHub Desktop directly, creating new branches on the remote repository (on GitLab or GitHub) is better for collaborating because the new branch becomes immediately visible to everyone working in the repository as opposed to becoming visible after being pushed/published to the remote repository. `````{tab-set} ````{tab-item} ... in GitLab -1. Navigate to the repository of your project. Under the project description, you should see a menu button with a "+" in it (see {numref}`new-branch-button`). Click this button, then click on "New branch". - -```{figure} ../images/gitlab-branch.png -:name: new-branch-button - -Click the highlighted button to make a new branch. +```{include} new_branch_gitlab.md ``` -2. A new page opens ({numref}`new-branch-menu`), on which you can specify the name of your branch and the source branch. Try to think of a good name for your branch. For example, `chapter-2` is a suitable name if we're going to be working on Chapter 2 of our book. After you've made sure that the selected source branch is correct, click "Create branch". - -```{figure} ../images/gitlab-branch-name.png -:name: new-branch-menu - -We're making a new branch called `chapter-2` from the `main` branch. -``` - -3. You should be sent back to an overview page of your repository. In the branch selection menu (see {numref}`new-branch-repo`), it should now say `chapter-2` instead of `main`. - -```{figure} ../images/gitlab-new-branch-repo.png -:name: new-branch-repo - -The circled menu is the branch selection menu. -``` ```` ````{tab-item} ... GitHub -How to branch is demonstrated in the figure below, followed by a step-by-step tutorial. - -```{figure} figures/branching-github-ezgif.com-optimize.gif ---- -name: branching_demo ---- -Demonstration, video available [here](https://youtu.be/3ceMSLQpD70) +```{include} new_branch_github.md ``` -1. Open the repository in which you want to work in. In the top bar you will see your current branch `main` and next to that there is a tab called `Branches`. - -
- Example Image -
- -2. Clicking on `Branches` will bring you to an overview of all the branches in the repository. Click on the green `Create Branch` button. - -
- Example Image -
- -3. Finally, give your branch a name and specifiy the source branch.
-Tip: It makes sense to give the branch a name related to the content you will be creating or altering. - -
- Example Image -
- -4. You will find your new branch in the drop down menu as seen on the figure below. You can then select your new branch and start working in it (new version). - -
- Example Image -
- ```` ````` @@ -279,14 +194,16 @@ In VS Code, open the branch menu from the bottom left (see {numref}`git-branch-m Check out the branch by simply clicking on it. Check that the branch is indeed checked out by looking at the branch menu button in the bottom left again; it should now say the name of your branch instead of `main` (in our case `chapter-2`). ```{figure} ../images/git-branch-menu-main.png -:name: git-branch-menu-main - +--- +name: git-branch-menu-main +--- Location of the branch menu. ``` ```{figure} ../images/git-branch-selection-menu.png -:name: git-branch-selection-menu - +--- +name: git-branch-selection-menu +--- The branch selection menu, where our new branch has shown up. From this menu you can also select (checkout in git terms) another existing branch. ``` @@ -294,8 +211,8 @@ The branch selection menu, where our new branch has shown up. From this menu you Since you are working in a repository with multiple colleagues, it is good practice to make sure your local repository is up to date. This is especially important when you want to work in an existing branch. In that case you want to make sure that the existing branch shows in your local repository. Therefore, you first need to pull all the changes from the remote repository to your local repository. Simply click the Icon with the two arrows. -```{figure} ../figures/Pull_VS.PNG -:name: Pull_VS +```{figure} figures/Pull_VS.PNG +name: Pull_VS Location of the branch menu. ``` @@ -309,17 +226,21 @@ The next step is to *check out* our new branch in GitHub Desktop. *Checking out* In GitHub Desktop, the top bar has a menu called `Current Branch`. By clicking on it you can see all the branches you created on the remote repository. -```{figure} ../figures/CheckOutBranch_GitHubDesktop.PNG +```{figure} figures/CheckOutBranch_GitHubDesktop.PNG + +Branches overview ``` 2. Check out the branch by simply clicking on it. The following window will pop up. -```{figure} ../figures/CheckOutBranch_GitHubDesktop2.PNG +```{figure} figures/CheckOutBranch_GitHubDesktop2.PNG + +Leave changes ``` Leave your changes (stashed) on your working branch, in this case I was working in the branch called `collaboration git`. 3. Check that the branch is indeed checked out by looking at the branch menu at the the top left again; the current branch should say the name. -4. Update your repository** +4. Update your repository Since you are working in a repository with multiple colleagues, it is good practice to make sure your local repository is up to date. This is especially important when you want to work in an existing branch. In that case you want to make sure that the existing branch shows in your local repository. Therefore, you first need to pull all the changes from the remote repository to your local repository. @@ -332,7 +253,7 @@ This synchronizes the remote repository with your local repository on your compu `````` ``````` -**Now that you have created and checked out your new branch, you can start {ref}`making and committing changes `.** +**Now that you have created and checked out your new branch, you can start [making and committing changes](edit_book.md).** ```````` ````````` diff --git a/book/workflows/collaboration.md b/book/workflows/collaboration.md index 08496da..1453a39 100644 --- a/book/workflows/collaboration.md +++ b/book/workflows/collaboration.md @@ -14,13 +14,13 @@ The steps involved are as follows: 1. **Assign a task to yourself (milestones, issues)** 2. **Create your own version of the book as...** ```````{tab-set} -``````{tab-item} ... user type 3... +``````{tab-item} ... user type 3 ... **... by creating your own version of the book (branching) or selecting existing version:** - branching `````` -``````{tab-item} ... user type 4 and 5 +``````{tab-item} ... user type 4 and 5. `````{tab-set} ````{tab-item} Open repository for first time... @@ -49,14 +49,14 @@ The steps involved are as follows: 3. **Edit the book as ...** ```````{tab-set} -``````{tab-item} ... user type... 3 +``````{tab-item} ... user type 3 ... **... by directly adding changes on a single file to Git-timeline (committing):** - adding file or making changes to single file - committing `````` -``````{tab-item} ... user type 4... +``````{tab-item} ... user type 4 ... `````{tab-set} ````{tab-item} ... on a brand new version (branch)... @@ -90,7 +90,7 @@ The steps involved are as follows: ```` ````` `````` -``````{tab-item} ... user type 5... +``````{tab-item} ... user type 5 ... `````{tab-set} ````{tab-item} ... on a brand new version (branch)... diff --git a/book/workflows/edit_book.md b/book/workflows/edit_book.md index 99b78ea..f5b6ae8 100644 --- a/book/workflows/edit_book.md +++ b/book/workflows/edit_book.md @@ -4,7 +4,7 @@ Suppose we are writing a new chapter, or are updating an existing chapter for ou **Edit files as ...** `````````{tab-set} -````````{tab-item} ... user type 3 ... +````````{tab-item} ... user type 3 ... **... by directly adding changes on a single file to the Git-timeline (committing) in ...** @@ -17,39 +17,52 @@ In GitLab, you can directly make changes in the files on the remote repository. 2. Create a new file by clicking on the plus button in the top bar. You can either create an entirely new file by clicking `New File` or if you already have created a file you can upload it by clicking `Upload File`. -
- Example Image -
+```{figure} figures/User3_NewFile.PNG +width: 60% +align: center + +Create new file +``` 3. In the new window, you can start typing your content. Give your file a name and make sure to use the markdown extension: `Chapter1.md`. Once you are done, commit the new file to the repository by clicking the blue button `Commit changes`. -
- Example Image -
+```{figure} figures/User3_NewFile2.PNG +align: center + +Edit new file +``` 4. In case you want to make changes to an existing file, navigate to the file in your remote repository. Then click the blue button called `Edit` and select the option `Edit single file`. -
- Example Image -
+```{figure} figures/User3_EditFile.PNG +align: center + +Web Editor +``` 5. Make your changes in the text editor and when you are ready, commit your changes to the remote repository by clicking on the blue `Commit changes` button. -
- Example Image -
+```{figure} figures/User3_NewFile2.PNG +align: center -6. In case you added a new file, you also need to include it table of contents of your book! The table of contents is specified in a file called `toc.yml` and it is already included in your repository if you used the teachbooks template. +Commit changes +``` -
- Example Image -
+6. In case you added a new file, you also need to include it table of contents of your book! The table of contents is specified in a file called `toc.yml` and it is already included in your repository if you used the teachbooks template. You can edit it and commit the changes in the same manner as you did with markdown `file.md` files. -You can edit it and commit the changes in the same manner as with markdown (.md) files. +```{figure} figures/User3_toc.PNG +align: center + +Table of contents (TOC) +``` `````` -``````{tab-item} ... GitHub -How to make an edit and make a commit is demonstrated in the figure below, all steps are elaborated on in the following step-by-step tutorial. +``````{tab-item} ... GitHub... + +`````{tab-set} +````{tab-item} ... using 'Edit in place' + +How to make an edit and make a commit is demonstrated in the gif below.
Don't worry if the steps are too fast, all steps are elaborated on in the following step-by-step tutorial. ```{figure} figures/user3-collaboration.gif --- @@ -64,84 +77,63 @@ In GitHub, you can directly make changes in the files on the remote repository. 2. Create a new file by clicking on the button called `Add file` in the top bar. You can either create an entirely new file by clicking `Create new File` or if you already have created a file you can upload it by clicking `Upload files`. -
- Example Image -
+```{figure} figures/HubUser3_NewFile.PNG +width: 80% +align: center -3. In the new window, you can start typing your content. Give your file a name and make sure to use the markdown extension: `Chapter1.md`. Once you are done, commit the new file to the repository by clicking the green button `Commit changes`. +Create new file +``` -
- Example Image -
+3. In the new window, you can start typing your content. Give your file a name and make sure to use the markdown extension: `file_name.md`. Once you are done, commit the new file to the repository by clicking the green button `Commit changes`. -`````{tab-set} -````{tab-item} ... using 'Edit in place' +```{figure} figures/HubUser3_NewFile2.PNG +width: 80% +align: center + +Edit new file +``` 4. In case you want to make changes to an existing file, navigate to the file in your remote repository. Then click the downward pointing arrow on the very left in the top bar. Select the option `Edit in place`. -
- Example Image -
+```{figure} figures/HubUser3_EditFile.PNG +width: 80% +align: center + +Edit in place +``` 5. Make your changes in the text editor and when you are ready, commit your changes to the remote repository by clicking on the green `Commit changes` button. -
- Example Image -
+```{figure} figures/HubUser3_EditFile2.PNG +width: 80% +align: center -6. In case you added a new file, you also need to include it table of contents of your book! The table of contents is specified in a file called `toc.yml` and it is already included in your repository if you used the teachbooks template. +Commit changes +``` -
- Example Image -
+6. In case you added a new file, you also need to include it table of contents of your book! The table of contents is specified in a file called `toc.yml` and it is already included in your repository if you used the teachbooks template. You can edit it and commit the changes in the same manner as with markdown `(file.md)` files. -You can edit it and commit the changes in the same manner as with markdown (.md) files. +```{figure} figures/HubUser3_toc.PNG +width: 80% +align: center +Table of contents +``` ```` + ````{tab-item} ... using 'VS Code in your browser' -Using this feature, you can open VS Code in your browser and edit the files in your repository. By doing this, you completely by-pass the need to open (and install) VS Code and GitHub Desktop on your laptop making it the optimal way to quickly fix something. +Using this feature, you can open VS Code in your browser and edit the files in your repository. By doing this, you completely by-pass the need to open (and install) VS Code and GitHub Desktop on your laptop making it the optimal way to quickly fix something. You can make changes to the files already in the repository but you can also upload new files! -1. Navigate to your main page (`code`) of your repository in GitHub -2. Press the dot key on your keyboard `.` This will open VS Code -3. Navigate to a file and make some changes - -```{figure} ./figures/Online_VS1.PNG -:name: VS Code in Browser -:width: 70% -:align: center - -VS Code in Browser +```{include} github_dev.md ``` -In the bottom left you can see the branch you are working in. - -4. This feature requires you to use git in VS Code. You can do that in the Source Control tab in the activity bar on the left side of the window (it looks like a branching icon). Write your commit message and click on commit & push. -5. Now let's see the result. Go back to your GitHub repo. In the top bar, go to actions. - -```{figure} ./figures/Online_VS2.PNG -:name: GitHub Actions -:width: 70% -:align: center - -GitHub Actions -``` -You will see the latest commit you just did (in this case text). After the pipeline has run, the yellow icon will turn green. Click on the commit and scroll until you see the title Deployed Branches. - -```{figure} ./figures/Online_VS3.PNG -:name: Deployed Branches -:width: 60% -:align: center - -Deployed Branches -``` -Click on the link and admire your changes:) ```` ````` - `````` ``````` ```````` + ````````{tab-item} ... user type 4 ... ```````{tab-set} @@ -162,36 +154,36 @@ How to make an edit and make a commit using VS Code is demonstrated in the figur name: user4_clone_edit_demo --- Demonstration, video available [here](https://youtu.be/bThimdDRXTc) +``` 1. Make some changes to a file in for example VS Code and save them. -2. Select the files ready to be added to Git-timeline (staging) +2. Select the files ready to be added to Git-timeline (staging). -For demonstration purposes, we have created a new Markdown file called `new-chapter.md`, which we want to add to the book. Since this is a new file, Git has no knowledge about its existence yet. I.e., the file is *untracked*. To add new files to our repository, we need to *stage* and *commit* them. To do this, open the Source Control menu in the left side bar. Our new file should appear in this menu: + For demonstration purposes, we have created a new Markdown file called `new-chapter.md`, which we want to add to the book. Since this is a new file, Git has no knowledge about its existence yet. I.e., the file is *untracked*. To add new files to our repository, we need to *stage* and *commit* them. To do this, open the Source Control menu in the left side bar. Our new file should appear in this menu: ```{figure} ../images/git-new-file.png The new file appears in the Source Control menu. ``` - -Notice that there is a green letter U placed besides the file, meaning that our file is untracked. To add a file to the *staging area*, click on the + that appears when you hover over the file. + Notice that there is a green letter U placed besides the file, meaning that our file is untracked. To add a file to the *staging area*, click on the + that appears when you hover over the file. 3. Adding changes to the Git-timeline (committing) -Next, in the field that says "Message", write a short description of the changes you have made. This message is what is called the *Commit Message*. After we've done this, the menu should now look something like this: + Next, in the field that says "Message", write a short description of the changes you have made. This message is what is called the *Commit Message*. After we've done this, the menu should now look something like this: ```{figure} ../images/git-file-added.png The new file has been staged, and we've written a Commit Message. ``` -Now, we are ready to add the changes to the repository. This is done by *committing* the staged changes. To do this, simply press the big, blue "Commit" button in the Source Control menu. + Now, we are ready to add the changes to the repository. This is done by *committing* the staged changes. To do this, simply press the big, blue "Commit" button in the Source Control menu. 4. In the bottom left corner, next to the branch name, click the "Synchronize Changes" button (the one that looks like this: 🔄, highlighted in the image below) to push the changes to GitLab. ```{figure} ../images/git-push.png After committing, click the 🔄 button to push our changes to the remote repository. - +``` ```` ````{tab-item} ... GitHub Desktop @@ -256,7 +248,7 @@ Choose one of the options to resolve the merge conflict. You now have updated yo 3. Make some further changes to a file in for example VS Code and save them. -4. Select the files ready to be added to Git-timeline (staging) +4. Select the files ready to be added to Git-timeline (staging) For demonstration purposes, we have created a new Markdown file called `new-chapter.md`, which we want to add to the book. Since this is a new file, Git has no knowledge about its existence yet. I.e., the file is *untracked*. To add new files to our repository, we need to *stage* and *commit* them. To do this, open the Source Control menu in the left side bar. Our new file should appear in this menu: @@ -333,6 +325,14 @@ Alternatively, you can also click on `Push origin` in the top bar. Example Image +```` +````{tab-item} ... using 'VS Code in your browser' + +Using this feature, you can open VS Code in your browser and edit the files in your repository. This can be really useful for **quick fixes** when you dont want to launch GitHub Dekstop or VS Code. However, we would recommend to limit the use of this feature to quick changes as the other workflows allow for more complex tasks. + +```{include} github_dev.md +``` + ```` ````` `````` @@ -345,7 +345,7 @@ Alternatively, you can also click on `Push origin` in the top bar. ``````{tab-item} ... for brand new version (branch) **... by (a) making changes on a single or multiple file(s)
- (b) checking changes locally,
+ (b) checking changes locally
(c) selecting changes to be added to the Git-timeline (staging)
(d) adding changes to the Git-timeline (committing) and
(e) adding changes to GitLab/GitHub (pushing) with ...** @@ -364,15 +364,18 @@ Demonstration, video available [here](https://youtu.be/2ttjBevkEP8) 1. Make some changes to a file in for example VS Code and save them. -2. Once all the changes are made, it can be useful to check the changes locally on your device in order to see how it will look on the website. If all the required environments and packages are downloaded, checking changes locally is fairly easy! +2. Once all the changes are made, it can be useful to check the changes locally on your device.
+ +By doing that you can preview how it will look on the website. If all the required environments and packages are downloaded, checking changes locally is fairly easy. Navigate to the terminal in VS code, located at the bottom of the window or by clicking on `Terminal` in the top bar. - You will firstly need to activate the right environment. Type the following command: -`conda activate jupyter-book-env` +``` +conda activate jupyter-book-env +``` -(or the environment in which you have installed the TeachBooks package) +(or the environment in which you have installed the `teachbooks` package!) Then we can build the book locally. Make sure you are in the right repository in VS code and type the following command: @@ -390,7 +393,7 @@ Note: use `--all` for the jupyter-book whenever building a book to make sure the Where book is the name of the folder containing all the files that make up your book. After `teachbooks` is done running you will get the following: -```{figure} ../figures/buildbook.PNG +```{figure} figures/buildbook.PNG Output ``` @@ -438,17 +441,20 @@ After committing, click the 🔄 button to push our changes to the remote reposi ````{tab-item} ... GitHub Desktop -1.. Make some changes to a file in for example VS Code and save them. +1. Make some changes to a file in for example VS Code and save them. -2. Once all the changes are made, it can be useful to check the changes locally on your device in order to see how it will look on the website. If all the required environments and packages are downloaded, checking changes locally is fairly easy! +2. Once all the changes are made, it can be useful to check the changes locally on your device.
+ +By doing that you can preview how it will look on the website. If all the required environments and packages are downloaded, checking changes locally is fairly easy. Navigate to the terminal in VS code, located at the bottom of the window or by clicking on `Terminal` in the top bar. - You will firstly need to activate the right environment. Type the following command: -`conda activate jupyter-book-env` +``` +conda activate jupyter-book-env +``` -(or the environment in which you have installed the TeachBooks package) +(or the environment in which you have installed the `teachbooks` package!) Then we can build the book locally. Make sure you are in the right repository in VS code and type the following command: @@ -466,7 +472,7 @@ Note: use `--all` for the jupyter-book whenever building a book to make sure the Where book is the name of the folder containing all the files that make up your book. After `teachbooks` is done running you will get the following: -```{figure} ../figures/buildbook.PNG +```{figure} figures/buildbook.PNG Output ``` @@ -486,24 +492,21 @@ If your book includes interactive element a webserver is required to host the bo The staging GitHub Desktop assumes you want to stage all files. These files will show up on the left side bar when you open GitHub Desktop. You can unselect some of them (unstaging them) by clicking on the *check*. -
- Example Image -
+```{figure} figures/Stage_GitHubDekstop.PNG +width: 50% -4. Add changes to Git-timeline locally (committing). In the field that says `Summary(Required)`, write a short description of the changes you have made. This message is what is called the *Commit Message*. After we've done this, click the blue button `Commit to repository`. +Staging +``` -5. Now we need to add changes to GitHub/GitLab. This is called pushing to the local repository. After committing, the following screen will pop up. Click on `Push Origin`. +4. Add changes to Git-timeline locally (committing). In the field that says `Summary (Required)`, write a short description of the changes you have made. This message is what is called the *Commit Message*. After we've done this, click the blue button `Commit to repository`. -
- Example Image -
+5. Now we need to add changes to GitHub/GitLab. This is called pushing to the local repository. After committing, click on `Push Origin` in the top bar. -Alternatively, you can also click on `Push origin` in the top bar. - -
- Example Image -
+```{figure} figures/Push_GitHubDekstop.PNG +width: 100% +Push origin +``` ```` ````` `````` @@ -571,7 +574,7 @@ Note: use `--all` for the jupyter-book whenever building a book to make sure the Where book is the name of the folder containing all the files that make up your book. After `teachbooks` is done running you will get the following: -```{figure} ../figures/buildbook.PNG +```{figure} figures/buildbook.PNG Output ``` @@ -659,7 +662,7 @@ Note: use `--all` for the jupyter-book whenever building a book to make sure the Where book is the name of the folder containing all the files that make up your book. After `teachbooks` is done running you will get the following: -```{figure} ../figures/buildbook.PNG +```{figure} figures/buildbook.PNG Output ``` @@ -694,9 +697,17 @@ Alternatively, you can also click on `Push origin` in the top bar.
Example Image
+```` +````{tab-item} ... using 'VS Code in your browser' + +Using this feature, you can open VS Code in your browser and edit the files in your repository. This can be really useful for **quick fixes** when you dont want to launch GitHub Dekstop or VS Code. However, we would recommend to limit the use of this feature to quick changes as the other workflows allow for more complex tasks. + +```{include} github_dev.md +``` + ```` ````` `````` ``````` ```````` -````````` \ No newline at end of file +````````` diff --git a/book/workflows/figures/Merge_Request_GitLab.PNG b/book/workflows/figures/Merge_Request_GitLab.PNG new file mode 100644 index 0000000..b7bfaa3 Binary files /dev/null and b/book/workflows/figures/Merge_Request_GitLab.PNG differ diff --git a/book/workflows/figures/Online_VS0.PNG b/book/workflows/figures/Online_VS0.PNG new file mode 100644 index 0000000..6c3fc61 Binary files /dev/null and b/book/workflows/figures/Online_VS0.PNG differ diff --git a/book/workflows/figures/Push_GitHubDesktop.PNG b/book/workflows/figures/Push_GitHubDesktop.PNG index 49d499d..70c3275 100644 Binary files a/book/workflows/figures/Push_GitHubDesktop.PNG and b/book/workflows/figures/Push_GitHubDesktop.PNG differ diff --git a/book/workflows/figures/Push_GitHubDesktop2.PNG b/book/workflows/figures/Push_GitHubDesktop2.PNG deleted file mode 100644 index ff74fb9..0000000 Binary files a/book/workflows/figures/Push_GitHubDesktop2.PNG and /dev/null differ diff --git a/book/workflows/github_dev.md b/book/workflows/github_dev.md new file mode 100644 index 0000000..9c5b815 --- /dev/null +++ b/book/workflows/github_dev.md @@ -0,0 +1,44 @@ +1. Navigate to the repository you want to work in and make sure you're in the correct branch. +2. Navigate to your main page (`code`) of your repository in GitHub. +3. Press the dot key on your keyboard `.` This will open VS Code. +4. In case you want to add a new file, navigate to the explorer file (the page icon) and click on the `New File` icon. This will create a new file in the folder that you are in. Give it the right extension! + +```{figure} figures/Online_VS0.PNG +name: New File +width: 50% +align: center + +New File +``` + +5. In case you want to make changes to an existing file, navigate to a file and make some changes. + +```{figure} figures/Online_VS1.PNG +name: VS Code in Browser +width: 70% +align: center + +VS Code in Browser +``` +In the bottom left you can see the branch you are working in. + +6. Once all the changes are made it's time to commit and push. GitHub Dev requires you to use git in VS Code. You can do that in the Source Control tab in the activity bar on the left side of the window (it looks like a branching icon). Write your commit message and click on commit & push. +7. Now let's see the result. Go back to your GitHub repo. In the top bar, go to actions. + +```{figure} figures/Online_VS2.PNG +name: GitHub Actions +width: 70% +align: center + +GitHub Actions +``` +You will see the latest commit you just did (in this case text). After the pipeline has run, the yellow icon will turn green. Click on the commit and scroll until you see the title Deployed Branches. + +```{figure} figures/Online_VS3.PNG +name: Deployed Branches +width: 60% +align: center + +Deployed Branches +``` +Click on the link and admire your changes:) \ No newline at end of file diff --git a/book/workflows/merge_request.md b/book/workflows/merge_request.md index 25cc607..b83ce4c 100644 --- a/book/workflows/merge_request.md +++ b/book/workflows/merge_request.md @@ -1,4 +1,4 @@ -# Reviewing and combine versions (merge / pull request, merging) +# Reviewing and combine versions (merge/pull request, merging) Merging a branch into the main branch is also good moment to let a team-member review the content. By assigning a colleague to review your branch you can check the quality of your new content. @@ -15,33 +15,33 @@ We're finished with our chapter, and now it's time to include all of our commits 2. Go the repository overview on GitLab. In the left menu bar, go to "Merge requests". On the Merge requests page, click "New merge request". -3. You can now choose a source branch and a target branch. Since we want to merge our changes from `chapter-2` *into* `main`, `chapter-2` is the source branch and `main` is the target branch ({numref}`gitlab-merge-request`) . Once you've selected the correct branches, click "Compare branches and continue". +3. You can now choose a source branch and a target branch. Since we want to merge our changes from `chapter-2` *into* `main`, `chapter-2` is the source branch and `main` is the target branch. Once you've selected the correct branches, click "Compare branches and continue". ```{figure} ../images/gitlab-merge-request.png -:name: gitlab-merge-request +name: gitlab-merge-request Creating a new merge request to merge `chapter-2` into `main`. ``` -4. On the next page, you can give your merge request a name, and provide a description of your changes ({numref}`gitlab-merge-request-description`). If somebody has to review your changes, you can add them in the "Reviewer menu". They will then be notified via email that they need to review your work. Finally, watch out for the option "Delete source branch when merge request is accepted". If you want to keep working on the same branch, even after your previous work has been merged, make sure you untick the box! Once everything is filled in, click "Create merge request". +4. On the next page, you can give your merge request a name, and provide a description of your changes. If somebody has to review your changes, you can add them in the "Reviewer menu". They will then be notified via email that they need to review your work. Finally, watch out for the option "Delete source branch when merge request is accepted". If you want to keep working on the same branch, even after your previous work has been merged, make sure you untick the box! Once everything is filled in, click "Create merge request". ```{figure} ../images/gitlab-merge-request-description.png -:name: gitlab-merge-request-description +name: gitlab-merge-request-description Example of a filled-in merge request. ``` 5. After clicking `create merge request` you should land on the following page. Here, you can track the merge request. Right after your request, GitLab will do some checks to see if you've tried to merge conflicting files. As you can see in the figure below the merge is blocked due to the conflicts. Click on 'Resolve conflicts`. -```{figure} ../figures/Merge_Request_GitLab.PNG -:name: gitlab-merge-request-conflict +```{figure} figures/Merge_Request_GitLab.PNG +name: gitlab-merge-request-conflict Example of a blocked merge. ``` -Clicking on 'Resolve conflicts`, will open the conflicted files in the text editor. There you can manually edit the files to the version you would like to retain. By clicking on `use ours` or `use theirs` you can select which version you would like to keep. +Clicking on `Resolve conflicts`, will open the conflicted files in the text editor. There you can manually edit the files to the version you would like to retain. Alternatively, by clicking on `use ours` or `use theirs` you can select which version you would like to keep. -```{figure} ../figures/Solve_Conflict.PNG -:name: gitlab-conflict +```{figure} figures/Solve_Conflict.PNG +name: gitlab-conflict Solving the conflict. ``` @@ -49,10 +49,10 @@ Once you are done, click on `Commit to source branch`. Do this for all conflicte In case you have cloned the repositery you can also resolve the conflicts locally using VS Code for example. You can read more about for [GitHub Dekstop](edit_book.md#... GitHub Desktop) or [VS Code](edit_book.md#... VS Code) -6. On the page of our merge request ({numref}`gitlab-finished-merge-request`), we're greeted with some more information. On top, you can read the description we just provided when creating the merge request. We can also see an "Approve" button, which you may or may not see, depending on your repository rights. Next, we can see a green checkmark, with a "Merge" button. This is good news: our changes do not conflict with existing files on the `main` branch, and we can merge our changes directly by clicking the button (if applicable: only after somebody else approved the request). +6. On the page of our merge request, we're greeted with some more information. On top, you can read the description we just provided when creating the merge request. We can also see an "Approve" button, which you may or may not see, depending on your repository rights. Next, we can see a green checkmark, with a "Merge" button. This is good news: our changes do not conflict with existing files on the `main` branch, and we can merge our changes directly by clicking the button (if applicable: only after somebody else approved the request). -```{figure} ../../images/gitlab-finished-merge-request.png -:name: gitlab-finished-merge-request +```{figure} ../images/gitlab-finished-merge-request.png +name: gitlab-finished-merge-request The finished merge request. ``` diff --git a/book/workflows/new_branch_github.md b/book/workflows/new_branch_github.md new file mode 100644 index 0000000..71de101 --- /dev/null +++ b/book/workflows/new_branch_github.md @@ -0,0 +1,37 @@ +How to branch is demonstrated in the figure below, all steps are elaborated on in the following step-by-step tutorial. + +```{figure} figures/branching-github-ezgif.com-optimize.gif + +Demonstration, video available [here](https://youtu.be/3ceMSLQpD70) +``` + +1. Open the repository in which you want to work in. In the top bar you will see your current branch `main` and next to that there is a tab called `Branches`. + +```{figure} figures/NewBranch_GitHub.PNG + +Overview +``` + +2. Clicking on `Branches` will bring you to an overview of all the branches in the repository. Click on the green `Create Branch` button. + +```{figure} figures/NewBranch_GitHub2.PNG + +Overview Branches +``` + +3. Finally, give your branch a name and specifiy the source branch.
+Tip: It makes sense to give the branch a name related to the content you will be creating or altering. + +```{figure} figures/NewBranch_GitHub3.PNG +--- +width: 60% +--- +New Branch +``` + +4. You will find your new branch in the drop down menu as seen on the figure below. You can then select your new branch and start working in it (new version) but you can also work in any other branch if you are helping out a colleague with their chapter for example (existing version). + +```{figure} figures/NewBranch_GitHub4.PNG + +Select New Branch +``` \ No newline at end of file diff --git a/book/workflows/new_branch_gitlab.md b/book/workflows/new_branch_gitlab.md new file mode 100644 index 0000000..154718d --- /dev/null +++ b/book/workflows/new_branch_gitlab.md @@ -0,0 +1,22 @@ +1. Navigate to the repository of your project. Under the project description, you should see a menu button with a "+" in it. Click this button, then click on "New branch". + +```{figure} ../images/gitlab-branch.png + +Click the highlighted button to make a new branch. +``` + +2. A new page opens, on which you can specify the name of your branch and the source branch. Try to think of a good name for your branch. For example, `chapter-2` is a suitable name if we're going to be working on Chapter 2 of our book. After you've made sure that the selected source branch is correct, click "Create branch". + +```{figure} ../images/gitlab-branch-name.png +--- +width: 80% +--- +We're making a new branch called `chapter-2` from the `main` branch. +``` + +3. You should be sent back to an overview page of your repository. In the branch selection menu, it should now say `chapter-2` instead of `main`. + +```{figure} ../images/gitlab-new-branch-repo.png + +The circled menu is the branch selection menu. +``` diff --git a/book/workflows/user45_check_changes.md b/book/workflows/user45_check_changes.md new file mode 100644 index 0000000..c4d3f0f --- /dev/null +++ b/book/workflows/user45_check_changes.md @@ -0,0 +1,44 @@ + Once all the changes are made, it can be useful to check the changes locally on your device. + + By doing that you can preview how it will look on the website. If all the required environments and packages are downloaded, checking changes locally is fairly easy. + + Navigate to the terminal in VS code, located at the bottom of the window or by clicking on `Terminal` in the top bar. + You will firstly need to activate the right environment. Type the following command: + +``` +conda activate jupyter-book-env +``` + + (or the environment in which you have installed the `teachbooks` package!) + + Then we can build the book locally. Make sure you are in the right repository in VS code and type the following command: + +``` +teachbooks build +``` + + Alternatively: + +``` +jupyter-book build --all +``` + + Note: use `--all` for the jupyter-book whenever building a book to make sure the table of contents fully updates. Or alternatively, delete the old `_build` folder before building the new book. + + Where book is the name of the folder containing all the files that make up your book. After `teachbooks` is done running you will get the following: + +```{figure} ../figures/buildbook.PNG + +Output +``` + Paste the last line into your browser to see the updated changes. + +```{Note} + +Sometimes there are problems building the book. It could be that the building requires extensions that are not present in your environment. To prevent issues, make sure to update your environment by routinely updating your packages. You can do this by executing the following line in your environment in the command line. + +`pip install -r requirements.txt --upgrade` + +``` + + If your book includes interactive element a webserver is required to host the book. If you want to do this locally, you can make use of (the teachbooks package to start up a local webserver)[setup-local-server] \ No newline at end of file