cc-archive / cccatalog-frontend

[PROJECT TRANSFERRED] CC Search is a search tool for CC-licensed and public domain content across the internet.

---

Project Transferred

This project was transfered to WordPress:

• WordPress/openverse-frontend: The gateway to the Openverse. Openverse is a search tool for CC-licensed and public domain content across the internet.

For additional context see:

• 2020-12-07: Upcoming Changes to the CC Open Source Community — Creative Commons Open Source
• 2021-05-03: CC Search to Join WordPress - Creative Commons
• 2021-05-10: Welcome to Openverse – Openverse — WordPress.org
• 2021-12-13: Dear Users of CC Search, Welcome to Openverse - Creative Commons

---

cccatalog-frontend

CC Search is the official web application for the Creative Commons Catalog API . CC Search is an interface to search for content that is licensed under Creative Commons licenses or marked with public domain tools. This repositiory contains all the front-end code.

The application is avaliable at search.creativecommons.org.

Technology

The frontend app is built using Vue.JS and NuxtJS. You can learn more about the migration to Nuxt.js here.

The user interface is powered by Vocabulary, Creative Common's design system. If you have an issue with colors or a specific ui component, it should probably go in that repository.

Local Development

Run the following commands in order to have the code up and running on your machine:

# installs dependencies
npm install

# Builds and serves assets with hot-reload
npm run dev

Docker setup

Alternatively, you can use Docker to build and run the application. You just have to run:

docker-compose up

You should now have the application running and accessible at http://localhost:8443.

You don't need to have the CC Search API running locally to be able to run the frontend application. It's configured to communicate, by default, with the API that's already publicly available. If you wish, you can change the URL of the API that's used during development by setting the API_URL environment variable.

Running tests

You can run the unit tests by executing:

npm run test

localhost tunneling

If you want to make your local development server accessible to the internet (for testing or showing someone something you're working on), you can use ngrok. Follow the documentation on the ngrok site to install it and set it up. Once you have it installed, get the development server for CC Search running and in a separate window/tab, run:

# The extra parameters are required to ensure that ngrok redirects to the HTTPS version of the site
# and that the host header matches one that is accepted by the server
# (ngrok's default hostname is randomly generated and is not whitelisted).
ngrok http http://localhost:8443 -host-header="localhost:8443"

If you need to run a HTTP version (for example, if you're testing against third-party websites that do not accept the self-signed cerificate generated by the dev server), run the dev server using npm run dev and use the following command to start ngrok:

ngrok http 8443 -host-header="localhost:8443"

Formatting and Linting

The code in this repository is formatted using prettier. If you have prettier setup in your code editor it should work out of the box; otherwise you can use the npm run lintfix script to format and fix lint errors in your code. Checks are run to lint your code and validate the formatting on git precomit using husky.

You will need to fix any linting issues before comitting. We reccommend formatting your JavaScript files on save in your text editor. You can learn how to do this in Visual Studio Code here.

Versioning

CC Search uses CalVer for version numbering, in the YYYY.M.Micro format. This format is intentionally compatiable with NPM's semver parser. Micro is bumped whenever there are multiple releases in a month, for example 2020.07.1 is the first release in July 2020, while 2020.07.2 is the second.

Deployment

Details about how to deploy the frontend code can be found on the CC Wiki (Accessible to CC Staff only).

cccatalog-frontend's Issues

Photo zoom doesn't work in some scenarios

On the image detail page, the photo zoom isn't working in some scenarios.

Replace /about page text

Replace current text at http://ccccatalog.herokuapp.com/about with the following, and also [insert symbol] with the Clarifai symbol below.

There is no larger compendium of shared human knowledge and creativity than the Commons, including over 1.4 billion digital works available under CC tools. Despite the tremendous growth of the Commons, and the widespread use of the CC licenses and public domain marks, there is no simple way to maximize use of, and engagement with, all of that content. There is no front door — no tool designed for the general public to facilitate discovery for the purpose of reuse and remix, to simplify the license terms, make attribution easy, or support curation, and crowdsourced metadata.

Creative Commons’ “CC Search” project will develop and release an open online search and re-use tool that will allow high-quality content from the commons to surface in a more seamless and accessible way. Our beta relies on open APIs and the Common Crawl dataset and focuses on photos as its first media type. It is meant to elicit discussion and inform our development as we build out the full set of tools. “CC Search” will enable users to curate, tag, and remix that content. It will go beyond simple search to aggregate results from across the hundreds of public repositories into a single catalog, and also facilitate the use and re-use through tools like curated lists, saved searches, one- or no-click attribution, and provenance.

This release contains several new features, including AI image tags generated from our collaborator, Clarifai. Clarifai is a best in class image classification software that provides tagging support and visual recognition. Clarifai’s API was integrated in the process-flow as a means to automatically generate tags for the new and existing images. This means that CC search has machine-generated tags, user-defined tags, and platform-defined tags that were obtained from the web crawl data. Collectively, these will enhance the user’s search experience and improve the quality of the results. Currently, 10.3 million images have their respective Clarifai tags and the outstanding images will be integrated on an ongoing basis. Tags generated via Clarifai are marked with a [insert symbol] on the detail page for each image. With this addition, we’re not just cataloging the commons, we’re making it better. Thank you to Clarifai for their support.

License filter order and presentation

The order in the license filter dropdown seems random. Any reason why this is so and not in order of most liberal to most restrictive?

Also, the filter is all lower case initials, e.g. "by-nc-nd" without any explanation. Maybe better to experiment to see what resonates with users... do users understand the initials? Would it be better if it read "CC BY-NC-ND" for example? or alternatively, "Attribution-Noncommercial-NoDerivatives"?

license icons need spacing on image page

see https://ccsearch.creativecommons.org/photos/423611. no space between cc and attribution man icon, for example.

Explore Lists UX Curation and Sharing

After searching, users need the capability to quickly curate and share lists.

Notes

Need to explore how other sites handle sharing on other content curation platforms.

Screenshots

Submitted from @pa-w

give jane access to categorize and add assignees to issues on this repo

thanks!

Create HTML, CSS, and JS for Homepage

Create HTML and CSS for search components

Change "ADD TO LIST" text in pop-up

This needs to be changed before release Wed. Please change the text "ADD TO LIST" to read "ADD TO PUBLIC LIST" in list pop-up

Create HTML, CSS, JS for image detail page

license filter order should be most open to least open

CC0
Public Domain Mark
CC BY
CC BY-SA
CC BY-NC
CC BY-ND
CC BY-NC-SA
CC BY-NC-ND

go back to old filter layout

the additional drop-down is another extra step. did we change it to this for a reason?

tooltip should appear when hovering over "+" to read "Add to public list"

e.g. on results page without having to click on +

post front end release notes somewhere

and provide link to Jane to add to blog post

need this prior to release

Add this text to lists page (or where otherwise appropriate)

"We've migrated to public lists. Looking for a private list you created with your CC ID? Shoot us an email at [email protected] and we are happy to retrieve it for you."

http://ccccatalog.herokuapp.com/lists

cc: @pa-w

clicking on the image in the detail page brings up the wrong image in the lightbox

It looks like it brings up the first "related" image?

Create JS for search components

Release front end to AWS for production

Create mock search UI

CC0 3.0 does not exist

Seems like a fault in the dataset (also unsure if I should post it here).

1. Go to https://ccsearch.creativecommons.org/photos/9540075
2. Notice the CC0 3.0 sign on the right.
   There is no cc0 3.0 there is only 1.0

For bonus points:
3. Click on CC link
Notice that this is a 404, of course.

URI with filtering options does not load correctly

This is a bug
Steps to reproduce

1. Go to https://ccsearch.creativecommons.org
2. Search for cats (because that is what the internet is for of course)
3. Filter on CC BY-NC licenses
4. Change 'cats' to 'cat' and search again, notice that the address bar now states, also note that are no search results:
   ''''
   https://ccsearch.creativecommons.org/search?q=cat&provider=&li=by-nc&lt=
   ''''
5. copy that URL and paste in a new tab.

Notice that the filter is not being set by the URI

CC0 photos don't filter when selecting CC0 for the Met

e.g. http://ccccatalog.herokuapp.com/photos/9676915

Reads: CC CC 1.0

Modify data model to track image views

In order for the UI to display metrics such as "trending" and "popular", we need to track image views via the data model.

@aldenstpage

Create JS API layer

Filtering on CC BY shows other licenses as well

Steps to reproduce

1. go to https://ccsearch.creativecommons.org/search?q=Cat&provider=500px&li=by&lt=
   (notice I filtered on CC BY)
2. Click on an image
   (Notice that other more restrictive license applies, you might have to try a few images)

When filtering on CC BY I expect only getting those images that are licensed as such.

Modify about page to use API

Modify about page to use api for displaying provider statistics.

change front page image

replace https://pixabay.com/en/agriculture-rice-plantation-thailand-1807581/ with a non pixabay (but similar aesthetic!) image :)

Improve image loading time when searching

Create Vue.js structure

License types filter order and presentation

The categories could be more specific, e.g. "commercial" should be "commercial use allowed". "Modification" should be "modification" allowed. Also, what if people want both commercial and modification allowed? A dropdown doesn't allow that.

"all-cc" could be written "All Creative Commons" to be clearer. See Flickr's search interface filters at https://www.flickr.com/search/?text=cat.

In general, like Flickr's search interface, filter categories should be capitalized and written so it is human readable.

Add the ability to edit / remove items for an existing list

Add the ability to edit / remove items for an existing list

mirror footer from cc.org

footer should be footer from https://creativecommons.org but with current cc search disclaimer text and sans the text "Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 4.0 International license," also sans text "Website by Affinity Bridge," and sans the search box,

Create HTML, CSS, and JS for Share Bar

Browse page issues

• Add a header (see main page issue)
• The roll-up script should show the correct attribution (see above) and use the CC icons if possible as well
• Tooltip should appear when mousing over circle+ to say “add to list”
• Letterbox image format often crops the images so much that you can’t select one without clicking into it. That adds lots of clicks to the user to find the image they want. Ideally they should be able to see the whole image, or the significant majority of it.
• Results equally favour tags and author names. Eg., in the “nature” list, the sixth image is by someone named “nerdy by nature”. Can we favour tag results first, exclude author names from search, or make “search by author name” an advanced feature?
• Once you start scrolling down through results, the header quickly disappears, then immediately fades back in, but is no longer the full width of the page (Chrome desktop). 1) Not sure it needs to disappear/reappear, and 2) it should be the same width as the header bar
  Issue: it’s unclear that the word for the search is editable in the top left after selecting a result, so when you click the search icon and nothing appears to happen, it’s confusing - UI needs to be clearer here

Filters

• “Providers” should be “Collection” or “Archive” or something else -- the “provider” is the author, so it’s a bit confusing
• “Museum of the Netherlands” should be “Rijksmuseum” or “Rijksmuseum NL”
• No ability to select multiple repos
• Licenses should be all-caps, and formatted as users usually see them:
  CC BY, CC BY-SA, CC BY-NC-ND, PD, CC0, etc.
• Is there a difference between the blank checkbox and “all”? If not, remove “all”
• Add the “-” symbol or “no filter” in place of the blank space
• Change “commercial” to “Commercial use permitted”
• Change “modification” to “Modification permitted”
• Change “all-cc” to “CC-licensed works only (no PD)”

Lists

• When you add an item, the list pop-up appears, with no information on what it is.
• You can’t click on the item in the list window to go to the detail page for it
• When you close a list, it’s gone.

Home page issues

• Add a header - could be the CC site orange header or a transparency w/ link
• Add a feedback link (see prototype - ideally ask the same questions so we can compare data)
• Wallpaper image - should have complete attribution: “Title” by AUTHOR, via SOURCE, licenced CC X

Top images

• The vertical space between the images seems odd
• The roll-up script should show the correct attribution (see above) and use the CC icons if possible as well

Top categories

• Are the images here curated? Yes, all images on the home page are curated.

Footer

• Mirror the footer from cc.org

would be nice to have an easy back-to-search-results button from detail page rather than having to use browser back button

Add the ability to add images to lists across all search results

HTML page title says cccatalog-frontend, could use a more human readable title

Add front-end build process

Create HTML, CSS, and JS for Search Grid

Provider filter

Should be capitalized.

Will there eventually be a place listing all the providers and who they are? I don't recognize some on the list and not sure I would choose geographdfdk without know what it was..

command tab in mac doesn't open in new tab

when clicking on a search result hitting command on a mac does not open search result in new tab (works on other links). this is true across browsers (safari, chrome)

Change url when filtering to allow sharing of search questions

Applying filters to a search does not actively change the url of the search. Adding this feature would be good for sharing URIs with friends.

Create generic layout for photo attribution product

Create generic layout for photo attribution product

Create HTML, CSS, JS for browse page

Feedback from user testing

• The header background image is cool, but I feel it's a little too visually intricate and is hiding the search box.
• Load times are very long on individual images and not all of the grids are populating at roughly the same speed – v slow.
• I'm not sure why "Top Categories" would be useful to a user unless they can filter or know the source on it? The images in the categories feel pretty random
• The disclaimer on the bottom – is there a way to spruce up that text a bit?
• "Website by CC" in the footer – the link is Affinity Bridge
• I can't open the images in new tabs unless I click the title, in which case it just gives me the image (slowly loading) with no metadata
• this seems to work for me on safari on the iphone, but search just hangs on all browsers i’m using on my laptop. any thoughts as to why ( OS: macos mojave 10.14 beta )?
• Strip whitespace from the queries
• Add a fixed header on scroll
• Add the ability to scroll to the top of the page, when infinite scroll is enabled
• Add Clarafai badge when displaying tags generated by Clarafai

---

Image Detail page issues

• License format should be CC BY, not CC by, also the photo attribution, and the output HTML, and the one click attribution
• Use the CC icons on the detail page to show license type as well
• When I click zoom on the image, I get a different image:
• I don’t know what that little pop-up navigator thing is, but it’s confusing. I’d remove it.
  Issue: No download link to get the image, or clear link to go to the source site. Have to intuit to click on the right link in the detail information.

Increase unit test code coverage to 90%

Configure repo testing process for Travis

Add provider images and license icons on rollover overlay

Add provider images and license icons on rollover overlay