Merge pull request #549 from jupyter/alpha-in-use

Alpha in use

Author: palewire

.github/images/netlify-preview.png

@@ -5,3 +5,5 @@ Gemfile.lock
 vendor
 .bundle
 .sass-cache
+.nox
+__pycache__/

.gitignore

@@ -2,52 +2,103 @@
 
 This is the source to [Jupyter.org](https://jupyter.org/).
 
-# Build instructions
+## Build the site locally
 
-The site is built using GitHub Pages Jekyll, see [Jekyll
-website](https://jekyllrb.com/) for customizing the build process, and detail on how
-what where.
+The site is built with Jekyll, see [the Jekyll website](https://jekyllrb.com/) for how to customize the build process.
 
-# Quick local testing
+There are a few ways to build the site locally, see the sections below.
 
-Clone this repository locally, and cd into it:
+### Build the site automatically with `nox`
 
-```
-git clone https://github.com/jupyter/jupyter.github.io
-cd jupyter.github.io
-```
+The easiest way to build the site locally is by using the [`nox` command line tool](https://nox.thea.codes/). This tool makes it easy to automate commands in a repository, and we have included a `build` command to quickly install the dependencies and build the site.
 
-Install `bundler`, and use it to install the dependencies to build the website:
+To build and preview the site locally, follow these steps:
 
-```
-gem install bundler
-bundle install
-```
+1. **Clone this repository**.
+   
+   ```console
+   $ git clone https://github.com/jupyter/jupyter.github.io
+   $ cd jupyter.github.io
+   ```
+2. **Install `nox`**
 
-Now you can ask Jekyll to build the website.
+   ```console
+   $ pip install nox
+   ```
+3. **Run the `build` command**
+   
+   ```console
+   $ nox -s build
+   ```
 
-```
-bundle exec jekyll serve liveserve
-```
 
-Open your browser to localhost:4000.
+This will install the needed dependencies in a virtual environment using [the `conda` package manager](https://docs.conda.io/en/latest/). 
 
-Edit the various parts, the `liveserve` option should automatically rebuild and
-refresh the pages when changes occur.
+**When the build is finished, go to `localhost:4000`**. When Jekyll finishes building your site, it will open a port on your computer and serve the website there so that you may preview it.
+
+**You can make changes and watch the preview auto-update**. When you make changes to the website, they will automatically be updated in your preview in the browser.
 
 To stop serving the website, press **`Ctrl`**-`C` in your terminal
 
-Enjoy.
+### Build the site manually
+
+To build the site manually, you'll need Ruby, Jekyll, and the packages that Jekyll uses to build the site (these are defined in [`Gemfile`](Gemfile)).
+
+Follow these steps:
+
+1. **Install Jekyll**. You have two options:
+   - [Follow the Jekyll installation instructions](https://jekyllrb.com/docs/#instructions). These steps will guide you through installing Ruby and Jekyll locally.
+   - Use [the anaconda distribution](https://conda.io) and [conda-forge](https://conda-forge.org/).
+
+     First [install miniconda](https://conda.io/miniconda.html), then run the following command:
+
+     ```console
+     $ conda install -c conda-forge ruby c-compiler compilers cxx-compiler
+     ```
+
+     Finally install Jekyll and Bundler, which will let you install the site's dependencies:
+
+     ```console
+     $ gem install jekyll bundler
+     ```
+2. **Install the site's build dependencies**. These are specified in [`Gemfile`](Gemfile).
+   
+   ```console
+   $ bundle install
+   ```
+
+   This step might take a few moments as it must download and install a number of local extensions. It will create a local file called `Gemfile.lock`. These are the "frozen" dependencies and their version numbers needed to build the site.
 
-# What is where
+3. **Build the site locally**.
+   
+   ```console
+   $ bundle exec jekyll serve liveserve
+   ```
+
+   This will build the site's HTML and open a server at `localhost:4000` for you to preview the site.
+
+
+## Where the site is hosted
+
+The site is automatically built with [Netlify](https://netlify.com), a hosting service for static websites. When any changes are merged into the `master` branch, Netlify will automatically build them and update the website at [jupyter.org](https://jupyter.org).
+
+## Preview changes in a Pull Request
+
+Netlify will automatically build a preview of the website in an open Pull Request. To see this, click on the **`Show all checks`** button just above the comment box in the Pull Request window. Then click on the **`details`** link on the **`deploy/netlify`** row to see a preview of the built site.
+
+Here's an image of this box on a GitHub PR page:
+
+![Netlify Preview Button](.github/images/netlify-preview.png)
+
+## Structure of this website
 
 Most pages are located at the place where their URL is, nothing fancy.  Headers
 and footer are in `_includes/head.html`, `_includes/header.html`,
 `_includes/footer.html`.
 
 The **navbar** is in `_data/nav.yml` and looks like that:
 
-```
+```yaml
 head:
     - Home
     - title: Install
@@ -70,7 +121,7 @@ which means, insert in order the following links into the navbar:
 The navbar will automatically target `_blank` pages where the url is explicit,
 and mark the correct link as the "current" one.
 
-# How do I create a new page?
+## Create a new page
 
 Create `my_page.html` (will have url `https://jupyter.org/my_page.html`)
 or `my_page/index.html` (will have url `https://jupyter.org/my_page/`), start with the following:
@@ -88,11 +139,20 @@ You cannot do it yet with .md file, but you will be able soon.
 
 Add commit (and don't forget to add to `_data/nav.yml`).
 
-# Previewing a Pull Request
+## Site quirks and tips
+
+### Lazy loading of images
+
+The Jupyter website uses [lazy loading of images](https://web.dev/browser-level-image-lazy-loading/). In general, images that are "below the fold" (below the browser window on page load) for laptop-sized screen sizes are encouraged to be configured for "lazy loading".
+
+Add lazy loading to an image by adding a `loading="lazy"` configuration to the `<img>` element. For example:
+
+```html
+<img class="my-class" src="my/src.png" loading="lazy" />
+```
 
-Netlify is used to provide a link to a rendered website with the changes proposed
-in a PR. This convenience helps reviewers see how the change would look
-before it is deployed in production.
+For images that are "above the fold" (that will be seen by users immediately after page load), use "eager" loading to make sure they are loaded immediately. For example:
 
-The link is found in the GitHub PR status box. In the **deploy/netlify** section,
-click on the `Details` link.
+```html
+<img class="my-class" src="my/src.png" loading="eager" />
+```

README.md

@@ -3,12 +3,8 @@ head:
       url: /install
     - title: Get Involved
       url: /community
-    - title: Events
-      url: /events
     - title: Documentation
       url: /documentation
-    - title: Widgets
-      url: /widgets
     - title: News
       url: https://blog.jupyter.org
       newpage: true

_data/nav.yml

@@ -8,7 +8,7 @@
     <meta property="og:title" content="Project Jupyter" />
     <meta property="og:description" content="{{ site.description|strip_html }}">
     <meta property="og:url" content="{{ site.url }}" />
-    <meta property="og:image" content="{{ "/assets/homepage.png" | prepend: site.url }}" />
+    <meta property="og:image" content="{{ "/assets/share.png" | prepend: site.url }}" />
     <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
     <link rel="stylesheet" href="{{ "/assets/css/bootstrap.css" | prepend: site.baseurl }}">
     <link rel="stylesheet" href="{{ "/assets/css/main.css" | prepend: site.baseurl }}">

_includes/head.html

@@ -15,12 +15,22 @@ div.page_content.container > p,
 div.page_content.container > h1,
 div.page_content.container > h2,
 div.page_content.container > h3,
+div.page_content.container > h4,
 div.page_content.container > div.highlighter-rouge
 {
     padding-left:30px;
     padding-right: 30px;
 }
 
+div.page_content.container > iframe {
+    margin-left: 30px;
+}
+
+div.page_content.container > ul {
+    padding-left: 50px;
+}
+
+
 img.title_image {
   max-height: 200px;
   padding-top: 10px;

_sass/_markdown.scss

@@ -124,3 +124,68 @@ where you can get involved. **We always welcome participation in the Jupyter com
     </div>
 </div>
 </section>
+
+## Live events
+
+Project Jupyter events provide a forum for community members to come together in person or virtually to share and learn from each other.
+
+This page is for in person, one-of-a-kind events, for community engagement, see the community page. 
+
+### Calendar
+
+This is a calendar of regular online events.  It might not be exhaustive.
+
+<iframe title="Calendar of Project Jupyter events" id="calendariframe" src="https://calendar.google.com/calendar/embed?height=600&amp;wkst=1&amp;bgcolor=%23ffffff&amp;ctz=local&amp;src=ZGdwZDM2ZjQzZXQ5Z3JhYm42dGRpbjZwbWNAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&amp;src=bTNoZWs2OWRhZzczODF1bXQ4a2NqZDc1dTRAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&amp;src=YXFwa3VpNXE3b2kzMnBrOXRjcDUzaG5zc2NAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&amp;src=ZDE4NzR1cjZmZGh1ajBzbmpuaWxhYzJubGNAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&amp;src=cGlhaGluZWpqcjZzc3ZpOGlrbWpqb3A2cm9AZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&amp;color=%23AD1457&amp;color=%23EF6C00&amp;color=%23616161&amp;color=%23F6BF26&amp;color=%239E69AF" style="border:solid 1px #777" width="800" height="600" frameborder="0" scrolling="no"></iframe>
+<script>document.getElementById("calendariframe").src = document.getElementById("calendariframe").src.replace("ctz=local", "ctz=" + Intl.DateTimeFormat().resolvedOptions().timeZone)</script>
+
+See [this page](https://jupyter.readthedocs.io/en/latest/community/content-community.html#jupyter-wide-meetings) for
+more informations.
+
+### JupyterCon
+
+Global JupyterCon conferences provide opportunities for the Jupyter community to come together to learn and share.
+
+* [JupyterCon 2017](https://conferences.oreilly.com/jupyter/jup-ny-2017.html) ([videos](https://www.youtube.com/playlist?list=PL055Epbe6d5aP6Ru42r7hk68GTSaclYgi))
+* [JupyterCon 2018](https://conferences.oreilly.com/jupyter/jup-ny.html) ([videos](https://www.youtube.com/playlist?list=PL055Epbe6d5b572IRmYAHkUgcq3y6K3Ae))
+* [JupyterCon 2020 (virtual)](https://jupytercon.com/) ([videos](https://www.youtube.com/c/JupyterCon/videos))
+
+### Jupyter Community Workshops
+
+[Jupyter Community Workshops](https://blog.jupyter.org/jupyter-community-workshops-cbd34ac82549) bring together small groups (approximately 12 to 24 people) of Jupyter community members and core contributors for high-impact strategic work and community engagement on focused topics.
+
+Much of Jupyter’s work is accomplished through remote, online collaboration; yet, over the years, we have found deep value in focused in-person work over a few days. These in-person events are particularly useful for tackling challenging development and design projects, growing the community of contributors, and strengthening collaborations.
+
+#### Round 1: 2018
+
+- [Round 1: Call for Proposals](https://blog.jupyter.org/jupyter-community-workshops-cbd34ac82549)
+
+Individual workshops:
+- [Jupyter Widgets workshop](https://blog.jupyter.org/jupyter-community-workshops-cbd34ac82549)
+- [Jupyter Hackathon in Hawaii](https://blog.jupyter.org/jupyter-hackathon-series-in-hawaii-97b3d1fbce68)
+- [Teaching and Learning with Jupyter](https://blog.jupyter.org/teaching-and-learning-with-jupyter-c1d965f7b93a)
+
+#### Round 2: 2019
+
+- [Round 2: Call for Proposals](https://blog.jupyter.org/jupyter-community-workshops-call-for-proposals-26a8417e5b6a)
+- [Round 2: Announcement of Workshops](https://blog.jupyter.org/jupyter-community-workshops-a7f1dca1735e)
+- [Round 2: 2019 Year in Review](https://blog.jupyter.org/jupyter-community-workshops-2019-year-in-review-8876336924e4)
+
+Individual workshops:
+- [Jupyter Server Design and Roadmap Workshop](https://blog.jupyter.org/jupyter-community-workshop-jupyter-server-design-and-roadmap-workshop-6e6760cc5098): (Luciano Resende)
+- [Building upon the Jupyter Kernel Protocol](https://blog.jupyter.org/field-report-on-the-kernel-community-workshop-a4ad73a1a718) (Sylvain Corlay)
+- [Jupyter nbgrader Hackathon/Code Sprint](https://blog.jupyter.org/https-blog-jupyter-org-university-of-edinburgh-jupyter-community-nbgrader-hackathon-2eff14df298a): (James Slack)
+- [Intro to Python for Kids, Parents & Teachers Series](https://datasciencecornwall.blogspot.com/2019/06/python-data-science-for-kids-taster.html): (Tariq Rashad)
+- [Dashboarding in the Jupyter Ecosystem](https://blog.jupyter.org/report-on-the-jupyter-community-workshop-on-dashboarding-14f8ad9f3c0): (Pascal Bugnion, Sylvain Corlay)
+- [Jupyter for Scientific User Facilities and High-Performance Computing](https://blog.jupyter.org/jupyter-for-science-user-facilities-and-high-performance-computing-de178106872): (Rollin Thomas)
+- [South America Jupyter Community Workshop](https://blog.jupyter.org/south-america-jupyter-community-workshop-4edc51c7a6ce): (Damian Avila)
+
+#### Round 3: 2020-2022
+
+- [Round 3: Call for Proposals](https://blog.jupyter.org/jupyter-community-workshops-call-for-proposals-for-jan-aug-2020-710f687e30f4)
+
+Due to the COVID-19 pandemic, workshops were put on hold during 2020. Stay tuned for more details about workshops funded in round 3.
+
+### Jupyter Community Calls
+
+[Jupyter Community Calls](https://jupyter.readthedocs.io/en/latest/community/content-community.html#jupyter-wide-meetings) provide a regular virtual forum for community-wide discussion and sharing.
+