Merge branch 'master' into ayan-patch-1

Author: kgodey

.github/CODEOWNERS

@@ -1,7 +1,7 @@
 # These owners will be the default owners for everything in
 # the repo. Unless a later match takes precedence, they will 
 # be requested for review when someone opens a pull request.
-* @creativecommons/engineering @creativecommons/ct-cc-open-source-core-committers 
+* @creativecommons/engineering @creativecommons/ct-cc-open-source-core-committers @creativecommons/ct-cc-open-source-collaborators
 
 # These users own any files in the specified directory and 
 # any of its subdirectories.

content/blog/authors/soccerdroid/contents.lr

@@ -5,6 +5,6 @@ name: María Belén Guaranda Cabezas
 md5_hashed_email: a177edcce952c2c82ac8716a4586a28f
 ---
 about:
-Maria is an undergraduate Computer Science student from ESPOL, in Ecuador. She has worked for the past 2 years as a research assistant. She has worked in projects including computer vision, the estimation of socio-economic indexes through CDRs analysis, and a machine learning model with sensors data. During her spare time, she likes to watch animes and read. She loves sports, especially soccer. She is also committed to environmental causes, and she is a huge fan of cats and dogs (she has 4 and 1 respectively).
+Maria is a Bachelor of Computer Science from Ecuador. As a research assistant, she worked in projects including computer vision, the estimation of socio-economic indexes through CDRs analysis, and a machine learning model with sensors data. During her spare time, she likes to watch animes and read. She loves sports, especially soccer. She is also committed to environmental causes, and she is a huge fan of cats and dogs (she has 4 and 1 respectively).
 
-Maria is working on [data visualizations of the CC Catalog](https://github.com/creativecommons/cccatalog-dataviz) as part of [Google Summer of Code 2019](/gsoc-2019).
+Maria worked in the [data visualizations of the CC Catalog](https://github.com/creativecommons/cccatalog-dataviz) as part of [Google Summer of Code 2019](/gsoc-2019), and is currently a mentor in this year's edition of the program.

content/blog/authors/subhamX/contents.lr

@@ -0,0 +1,8 @@
+username: subhamX
+---
+name: Subham Sahu
+---
+md5_hashed_email: 1ca2562f3046509e3273fe5afd3fdab2
+---
+about:
+Subham Sahu is an undergraduate student from Indian Institute Of Technology, Ropar. He is currently working on the [Linked Commons](https://github.com/creativecommons/cccatalog-dataviz) as part of [Google Summer of Code 2020](/gsoc-2020).

content/blog/categories/cc-dataviz/contents.lr

@@ -0,0 +1 @@
+name: cc-dataviz

content/blog/entries/integration-vocabulary-ccos/contents.lr

@@ -0,0 +1,35 @@
+title: Integration of Vocabulary with CCOS.
+---
+categories:
+outreachy
+tech
+open-source
+---
+author: dhruvi16
+---
+series: outreachy-2020-CCOS
+---
+pub_date: 2020-07-08
+---
+body:
+
+
+This blog demonstrates the project I am working on during the course of my Outreachy internship. My project involves redesigning and reimplementing one of the web products of the CC network using our new cohesive design library — [Vocabulary](https://cc-vocabulary.netlify.app/?path=/docs/vocabulary-introduction--page). After my internship is completed, the [Creative Commons Open Source](https://opensource.creativecommons.org/) website will have a complete revamped interface that will extensively use Vocabulary components.
+
+## The Problem -
+
+There exists a large variety of web products across the Creative Commons network. These products serve different purposes for the network and so do they vary in the way of presenting the existing content. So, to conquer the inconsistency across the different products we have our coherent design system called Vocabulary.
+
+If we come to the current CC Open Source website, it is quite off-track considering our new design system Vocabulary. The styles and components of the website are not well aligned with the components of the Vocabulary. And thus it lacks harmony and consistency concerning the brand.
+
+The purpose of a design system gets dissolved if it is not well incorporated with the products and we do have this problem with the CC Open Source website. Hence, there was a need for a redesign of CCOS as per the new Design Library. This project aims to rectify the problems and inconsistencies of the CCOS website and build a completely new website (as per Vocabulary).
+
+## The Solution -
+
+I started with trying out different mock-ups for the new website in Figma. You can see what I tried to make [here](https://www.figma.com/file/ka3zs1iYnqJvyLnvAV3cW7/Home-proposals). And then with the help of our UX designer Francisco, we created all the mock-ups and finalized how the website will look in a couple of weeks, here is the [link](https://www.figma.com/file/mttcugI1UxvCJRKE5sdpbO/Mockups?node-id=759%3A516) for that.
+
+I started my internship with going through the website’s tech stack, the website is made using [Lektor](https://www.getlektor.com/), with which I was not very familiar. I read the official docs, went through projects, tried making demo projects, and took help from mentors wherever I got stuck.
+
+To keep the project clean I added a theme that only has templates for the project and alters no content (as per aim). While updating templates, some components were not available in the Vocabulary yet, so I worked on adding those components to the library. And then used them in my new templates.
+
+I have thoroughly enjoyed contributing to this project as I got to learn so much. And I am excited for what’s next to come in the upcoming weeks.

content/blog/entries/legal-database-coding-mid-term/contents.lr

@@ -0,0 +1,43 @@
+title: CC Legal Database: Coding and Mid-term status
+---
+categories:
+cc-legal-database
+product
+outreachy
+---
+author: krysal
+---
+series: outreachy-may-2020-legal-database
+---
+pub_date: 2020-07-08
+---
+body:
+We are already in the second half of the time stipulated for the project and it is time to pause for review the initial plan, celebrate the objectives achieved and think about what remains to be done.
+
+## Initial plan
+
+Initially, two weeks were allocated to do the redesign for the new site. I thought there would be plenty of time here, _is just design_ I said to myself, despite not having done any serious project in Figma before beyond a few sketches. Later we will see I was wrong here. This included creating new Vocabulary components if necessary. Between the second and third weeks, I would create the data models (for Django and therefore for the database as well) and from the fourth week onwards it would start to implement all this in code: make the Homepage, listing, details pages and the others.
+
+## Issues in the way
+
+One task that took longer than expected was to finish the designs, a key point because the other tasks depended on this. Though the initial scheme was ready on time, as it was discussed with the stakeholders new requirements became evident, so more modifications had to be made. For example, on the [current site](https://labs.creativecommons.org/caselaw/), the way to explore cases and scholarship is by country, and in principle, this would stay the same way and I designed with that in mind, but talking to our internal user (which acts as a _product owner_ here) was better to change this scheme to one for labels or categories that are more related with both entities. Highlighting the case of the Scholarship model, in which the attribute of the country was eliminated because it is not so relevant, and although it seemed somewhat a small thing, this also caused changes in the design of the home page, the listings and how the content of the database will be explored in general. Design for a good user experience is not so easy as a non-designer may think. There were times when there was a lack of ideas but the important thing is to make decisions and move forward, in later iterations it will be improved.
+
+As in all software development, unexpected things happen and errors will appear no matter how much you plan ahead, for the fourth week I had planned to build a continuous integration system to have a server where anyone can see the progress of my changes, however, there were a few inconveniences that had me googling for a couple of days, publishing a Django project in Heroku can be tricky, specially regarding static files (assets like style sheets and scripts) if they are generated by Heroku at some point in the deployment pipeline, depending on the phase in which it is carried out, they can be lost in the ephemeral file system of Heroku, a process that I will not delve into here but that seems important to me to highlight if anyone else  has similar problems.
+
+## Progress so far
+
+I have managed to finish the main tasks and I would say that even the initially expected result has been improved. So I can list the following achievements:
+- Redesigned the entire website using the Figma Design Library
+- Built first pages: Home, listing and details pages for both Cases and Scholarship, and one for the FAQs.
+- Create a GitHub Action to lint every PR and check if it follows the project's code style
+- Deployment of the Django project on Heroku with a CI process linked to a GitHub repository, see the live development site [here](https://cc-caselaw.herokuapp.com/).
+
+It is said quickly but each task carries its considerable workload. It's been a good result so far, I've learned a lot of things along the way, like basic use of Figma, use of Storybook (related to Vocabulary components), good code security practices, some accessibility details, and more.
+
+## Plan for the second half of the timeline
+
+There are some tasks due from past weeks, such as build forms for Case and Scholarship submissions, but I am confident that now that the project has reached a stable state I can do it quickly in the next days. Other tasks were moved for later: searching records and filtering by tags moved after forms are created, so I can finish the visual parts of the site first and focus on functional work without shifting between types of tasks.
+
+The tasks and they order have changed, like I mentioned earlier, requirements were modified (a bit) so some tasks I planned for last weeks are not necessary anymore or are done already out-of-box with Django admin (benefits of choosing a batteries included framework!). In general, I don't think the initial plan was wrong, we just went through the natural evolution of a product software. Mentors have also been very helpful in keeping a reasonable scope and adjusting priorities.
+
+After main functionalities are done we can start making improvements, as we already identified some nice to have features but not so important at the moment. Stay tuned for more to come.

content/blog/entries/linked-commons-whats-new/big-graph.png

@@ -0,0 +1,75 @@
+title: Linked Commons: What's new?
+---
+categories:
+announcements
+cc-catalog
+product
+gsoc
+gsoc-2020
+open-source
+cc-dataviz
+---
+author: subhamX
+---
+series: gsoc-2020-dataviz
+---
+pub_date: 2020-07-16
+---
+
+body:
+## Introduction
+**Linked Commons** is a visualization project which aims to showcase and establish a relationship between millions of data points of licensed content metadata using graphs. Since it is the first blog of this new series, let’s discuss the core ideology of having this project and then about new features. Development of all components mentioned in this blog is complete and has been successfully integrated, so do check out the development version. Happy Reading!
+
+
+## Motivation and why does visualization matter?
+The number of websites using creative commons licensed content is very huge and growing very rapidly. The CC catalog hosts these millions of data points and each node contains information about the URL of the websites and the licenses used. One can surely do rigorous data analysis, but this would only be interpretable by a few people with a technical background.  On the other hand,  by visualizing data, it becomes incredibly easier to identify patterns and trends. As an old saying, a picture is worth a thousand words. That’s the core ideology of the Linked Commons, i.e. to show the millions of licensed content metadata and how these nodes are connected in a visually appealing form on the HTML canvas like a picture. 
+
+
+## Task 1: Code Refactoring
+My first task was to refactor the code and migrate it to react. The existing codebase had all core functionalities, but we wanted to make it more modular, improve the design, code readability, and reduce complexity. This will help us maintain this project in the long run. Also, it will be easier for the community to contribute and understand the logic. 
+
+
+## Task 2: Graph Filtering
+
+### Need for Filtering Methods
+
+<div style="text-align: center; width: 90%; margin-left: 5%;">
+    <figure>
+        <img src="big-graph.png" alt="Large Graph" style="border: 1px solid black">
+        <figcaption style="font-weight: 500;">Pic showing clustors of a Graph with 9982 nodes 5000 links</figcaption>
+    </figure>
+</div>
+
+The aggregate data that cc catalog has is in hundreds of millions. Rendering a graph with these many nodes will be a nightmare for the browser’s rendering and JavaScript engine. Just like we divide any standard textbook into chapters, we thought about adding filtering options that enable the user to retrieve precise information according to certain criteria selected by them. Hence,  we need to have a way in which we can filter the aggregate data into smaller chunks.
+
+
+### What filtering methods?
+After brainstorming for a while, we converged and agreed to have **filtering based on node name and distance**. The primary reason behind this was, it is kind of basic that a person would like to look for his/her favourite node and its neighbours. This is not the end for sure, and many more filtering methods will be added, maybe with the support of chaining one after another. This is just a baby step!
+
+### Server-side Filtering vs Client-Side Filtering?
+Now that we know on what query params the filter should work, we need to decide where to do the filtering. Should we do it on the client machine or do it on our server and pass the processed and filtered data to the client? In any filtering method, we need to traverse the whole graph. The JS engine in the browser is doing rendering stuff, complex calculation, etc. With all these processes, doing a full traversal of the dataset having more than a million nodes is going to take a lot of time and memory. The above claim assumes that we have a moderately dense graph. On the other hand, another strategy to accomplish graph filtering could be to delegate that load to a server, and the client’s browser can ask for a fresh copy of the filtered data whenever needed. As mentioned above the client-side filtering has serious shortcomings and user experience won’t be very good with browser freezing and frame drops. So, that's why we decided to go with the latter option i.e server-side filtering.
+
+<div style="text-align: center;">
+    <figure>
+        <img src="filtering-in-action.gif" alt="Filtering In Action" style="border: 1px solid black">
+        <figcaption>Filtering In Action</figcaption>
+    </figure>
+</div>
+
+## Task 3: New Design
+My third task was to upgrade the front-end design of the project. It now has a very clean and refreshing look along with the support for both light and dark theme. Check out our webpage in dark mode and do let us know if it saves your PC energy consumption (As claimed by some websites). Now you all can visit the Linked Commons webpage at mid-night too, no strain to the eyes. ;)
+
+<div style="text-align: center; width: 90%; margin-left: 5%;">
+    <figure>
+        <img src="new-design-light.png" alt="Light Theme" style="border: 1px solid black">
+        <figcaption>Linked Commons - Light Theme</figcaption>
+    </figure>
+</div>
+
+## Next steps
+In the next two weeks, I will be working on the following features.
+* Implement suggestions API on the server and integrate it with the frontend
+* Update the visualization with a more recent and bigger dataset
+
+## Conclusion
+Overall, it was fantastic and rejuvenating experience working on these tasks. Now that you have read this blog till the end, I hope that you enjoyed it. For more information visit our [Github repo](https://github.com/creativecommons/cccatalog-dataviz/). We are looking forward to hearing from you on linked commons. Our [slack](https://creativecommons.slack.com/channels/cc-dev-cc-catalog-viz) doors are always open to you, see you there. :)

content/blog/entries/linked-commons-whats-new/contents.lr

@@ -0,0 +1 @@
+name: GSoC 2020: The Linked Commons

content/blog/entries/linked-commons-whats-new/filtering-in-action.gif

@@ -0,0 +1 @@
+name: Outreachy May 2020 round: CC Open source

content/blog/entries/linked-commons-whats-new/new-design-light.png

@@ -18,7 +18,7 @@ So if you're looking to integrate CC licenses or CC licensed works into your app
     </div>
     <div class="card-body" align="center">
       <p class="card-text text-center">Join the CC developer chat and mailing list communities to connect with other developers working with CC tools.</p>
-      <a href="/community" class="btn btn-sm btn-outline-primary">See how to join</a>
+      <a href="/community/" class="btn btn-sm btn-outline-primary">See how to join</a>
     </div>
   </div>
 
@@ -29,7 +29,7 @@ So if you're looking to integrate CC licenses or CC licensed works into your app
     </div>
     <div class="card-body" align="center">
       <p class="card-text text-center">Fix one of our open issues or work on something new that you'd like to use. All skill levels are welcome.</p>
-      <a href="/contributing-code" class="btn btn-sm btn-outline-primary">Guidelines</a>
+      <a href="/contributing-code/" class="btn btn-sm btn-outline-primary">Guidelines</a>
       <a href="https://github.com/search?q=org%3Acreativecommons+is%3Aopen+label%3A%22help+wanted%22" class="btn btn-sm btn-outline-primary">"Help Wanted" issues</a>
     </div>
   </div>
@@ -42,7 +42,7 @@ So if you're looking to integrate CC licenses or CC licensed works into your app
     <div class="card-body" align="center">
       <p class="card-text text-center">Use CC-licensed works in your application or (coming soon!) use our WordPress plugin to license your content.</p>
       <a href="https://api.creativecommons.engineering/" class="btn btn-sm btn-outline-primary">Catalog API</a>
-      <a href="/contributing-code/projects" class="btn btn-sm btn-outline-primary">All our projects</a>
+      <a href="/contributing-code/projects/" class="btn btn-sm btn-outline-primary">All our projects</a>
     </div>
   </div>
 
@@ -52,7 +52,7 @@ So if you're looking to integrate CC licenses or CC licensed works into your app
       <img class="mx-auto d-block" src="/keyboard-solid.png" alt="Keyboard icon icon"/>
     </div>
     <div class="card-body" align="center">
-      <p class="card-text text-center">If you've worked on software that uses CC licenses or tools, tell the community about it on <a href="/blog">our tech blog</a>.</p>
+      <p class="card-text text-center">If you've worked on software that uses CC licenses or tools, tell the community about it on <a href="/blog/">our tech blog</a>.</p>
       <a href="/community/write-a-blog-post/" class="btn btn-sm btn-outline-primary">Write a blog post</a>
     </div>
   </div>
@@ -64,7 +64,7 @@ So if you're looking to integrate CC licenses or CC licensed works into your app
     </div>
     <div class="card-body" align="center">
       <p class="card-text text-center">Participate in one of our regular usability tests for CC tools that we're actively working on (we'll give you a gift card!)</p>
-      <a href="/contributing-code/usability" class="btn btn-sm btn-outline-primary">Learn more</a>
+      <a href="/contributing-code/usability/" class="btn btn-sm btn-outline-primary">Learn more</a>
       <a href="https://github.com/creativecommons/creativecommons.org/issues/new/choose" class="btn btn-sm btn-outline-primary">File an issue</a>
     </div>
   </div>