Moving to pnpm

Hello fellow OpenersOpeners Contributors to and users of the Openverse project.! I am happy to announce that the Openverse frontend repository has moved from npm to pnpm for package management. Please refer to that PR and its history for the rationale behind this change.

What does this mean for existing contributors?

If you already have used npm to work on the OpenverseOpenverse Openverse is a search engine for openly-licensed media, including photos, audio, and video. Openverse is also the name for the collection of related code repositories that make up the project. frontend repository, follow these steps to prepare your environment for using pnpm in the future:

  1. Delete your node_modules folder (for example, rm -rf node_modules)
  2. Install pnpm using volta by running volta install pnpm
  3. Reinstall dependencies using pnpm by running pnpm install

Now you’ll be able to run all the project scripts using pnpm instead of npm. Note that pnpm‘s “house style†leaves out the run keyword for referencing package.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. scripts, so npm run dev becomes pnpm dev. pnpm run dev will also work, it just doesn’t match what the official pnpm documentation recommends. This is similar to yarn.

For new contributors

Please follow the instructions in the repository’s README for setting up your dev environment.

If you run into any issues with pnpm package management while working on Openverse, please open a dx bug in the openverse-frontend repository here.

CC Search Now Redirects to Openverse

Today (2021-12-13) Creative Commons officially began redirecting from search.creativecommons.org to wordpress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org//openverseOpenverse Openverse is a search engine for openly-licensed media, including photos, audio, and video. Openverse is also the name for the collection of related code repositories that make up the project..

CleanShot 2021-12-13 at 15.01.27@2x

All CC Search users can now enjoy an improved experience, including access to images from new sources like StockSnap, along with new Meta Search providers like EDUimages and Images of Empowerment.

Crucially, to make Openverse accessible to a global audience, the user interface is fully translated into 10 languages, with additional partial translations in 22 more languages. Our translations are supplied by our users and contributors; we’d love your help in getting more languages to 100% completion. You can view our translations here and learn more about getting started with translating in the polyglots community.

We’d like to thank Creative Commons for their support through this process, and welcome all the users of CC Search to Openverse!

A week in Openverse: 2021-12-06 – 2021-12-13

openverse

Merged PRs

  • #121: Add a workflow for a notification on new discussions

openverse-catalog

Merged PRs

  • #301: Remove `get_*_operator` functions, simplify commoncrawl logic
  • #299: Remove unnecessary logging.basicConfig calls
  • #298: Refactor delay tests to prevent them from being flaky
  • #297: SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. alerting for DAG failures
  • #296: Retire common_api_workflows, clean up config
  • #295: Specific error message for auth errors on request, improve tests

Closed issues

  • #291: Provide a more descriptive message for auth errors
  • #284: Retire/remove common_api_workflows.py
  • #242: [Improvement] Use operators directly, remove `get_.*_operator` functions
  • #214: Add DAG alerting in Slack
  • #199: [Quality] Move logging.basicConfig calls out of import scope
  • #160: [Infrastructure] `test_get_waits_before_getting` is flaky

openverse-api

Merged PRs

  • #394: Fix page_size setting for related media
  • #387: Bump pytest-django from 4.4.0 to 4.5.1 in /openverse_api
  • #386: Bump boto3 from 1.20.16 to 1.20.20 in /openverse_api
  • #382: Bump ipython from 7.30.0 to 7.30.1 in /ingestion_server

Closed issues

  • #393: page_size for /related/ endpoint is set incorrectly and causes 400 error

openverse-frontend

Merged PRs

  • #509: Fix APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. endpoints for related media and provider stats
  • #503: Add progressive TypeScript compilation
  • #498: Update README.md to remove broken link
  • #497: Add a transform step after receiving data from the API
  • #492: Redirect on image detail page
  • #474: Persist search term across pages
  • #473: Add e2e test for image detail page
  • #469: Add Modal component
  • #459: Improve focus styles for audio subcomponents

Closed issues

  • #502: Seeking doesn’t work when zoomed
  • #494: Remove broken link from README
  • #486: Restyle filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.
  • #472: Required e2e tests for single result page
  • #458: Modal component
  • #407: Improve focus styles on `AudioTrack` subcomponents
  • #348: Persist current search term in search bar across all pages
  • #175: Explore adding progressive typechecking where possible

#openverse, #week-in-openverse

A week in Openverse: 2021-11-29 – 2021-12-06

openverse

Merged PRs

  • #116: Add priority label to sync PRs
  • #115: Send SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.†when PR is marked ready for review
  • #101: Add linting and pre-commit hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same. for Python code
  • #90: Added formatting rules to js folder

openverse-catalog

Merged PRs

  • #294: 🔄 Synced file(s) with WordPress/openverseOpenverse Openverse is a search engine for openly-licensed media, including photos, audio, and video. Openverse is also the name for the collection of related code repositories that make up the project.

openverse-api

Merged PRs

  • #380: 🔄 Synced file(s) with WordPress/openverse
  • #379: Bump boto3 from 1.18.64 to 1.20.15 in /openverse_api
  • #378: Bump boto3 from 1.20.10 to 1.20.15 in /ingestion_server
  • #377: Bump ipython from 7.29.0 to 7.30.0 in /openverse_api
  • #375: Bump ipython from 7.28.0 to 7.30.0 in /ingestion_server
  • #368: Bump filelock from 3.3.1 to 3.4.0 in /ingestion_server
  • #366: Add gunicorn to project requirements
  • #365: Include deleted & mature existence checks when updating indices
  • #360: Capture log output before docker stack is torn down
  • #359: Make categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. a single-value field shared by all media types
  • #355: Bump sqlalchemy from 1.4.26 to 1.4.27 in /analytics
  • #354: Bump alembic from 1.7.4 to 1.7.5 in /analytics
  • #350: Bump psycopg2-binary from 2.9.1 to 2.9.2 in /ingestion_server
  • #348: Bump django from 3.2.7 to 3.2.9 in /openverse_api
  • #346: Production deployment files
  • #345: Bump locust from 2.4.0 to 2.5.0 in /openverse_api
  • #343: Bump django-braces from 1.14.0 to 1.15.0 in /openverse_api

Closed issues

  • #361: Index update fails on missing deleted columns
  • #357: Category must be a single value string

openverse-frontend

Merged PRs

  • #484: Fix a typo that prevents subsequent fetches to not be decoded
  • #481: 🔄 Synced file(s) with WordPress/openverse
  • #471: Fix button ring offset
  • #467: Add /healthcheck endpoint
  • #461: Set default English locale correctly
  • #456: Make single result page for images RTL-compatible
  • #455: Update Sass breakpoints to match tailwind
  • #454: Converge `NavSection` components
  • #452: Safelist the classes for common icon sizes
  • #450: Update Sentry version and turn it on only for production
  • #448: VLogoLoader
  • #439: Toggle `SearchGridFilter` completely according to view width
  • #434: Set explicit ltr direction for pages untranslated in rtl languages
  • #432: Simplify FilterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. SidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. component and improve scrollbar styles
  • #422: Give licenses the full name and retire `LicenseIcons`
  • #420: Update video demos for MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. Search
  • #415: Remove `nuxt-ssr-cache` and move dependencies
  • #410: Add VItemGroup component
  • #388: Improve `Dockerfile` and enable pipeline to automate docker image generation

Closed issues

  • #475: FiltersButton
  • #470: Button focus styles are difficult to see
  • #466: Create a health check endpoint
  • #451: Ensure icon size classes are not purged
  • #446: Upgrade to the latest version of the Sentry SDK
  • #440: Match Bulma’s breakpoints to those of Tailwind
  • #438: Ids of filters input are not unique
  • #435: Make single result page for images RTL compatible
  • #433: Make `EmbeddedNavSection` the standard `NavSection`
  • #431: Sources page
  • #428: Make Search results page ready for RTL
  • #418: Recreate Meta Search marketing page documentation with Openverse screenshots
  • #371: Component: HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. Logo (`VLogoLoader`)
  • #370: Content switcher on mobile
  • #363: Add automatic RTL CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. generation for Sass and PostCSS VueVue Vue (pronounced /vjuË/, like view) is a progressive framework for building user interfaces. https://vuejs.org/. and external stylesheets
  • #358: License icons/titles accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access†(i.e. unassisted) and “indirect access†meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility)
  • #308: Visiting english site doesn’t set english locale

openverse-browser-extension

Merged PRs

  • #26: 🔄 Synced file(s) with WordPress/openverse

#openverse, #week-in-openverse

Development Weekly Chat Recap 2021-11-30

Takeaways

  • OpenverseOpenverse Openverse is a search engine for openly-licensed media, including photos, audio, and video. Openverse is also the name for the collection of related code repositories that make up the project. contributors intend to speed up our code review time, as we identified a number of PRs that had been awaiting review for several weeks.
  • Our focus for this month is going to be continued focus on the new front-end components, and RTL support. Infra is focused on a new deployment strategy and staging previews for the frontend, while Catalog work is still on hold as we fix some production issues with the data refresh process.
  • We will manually generate new sample data for work on the APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. to resume.
  • Contributors are excited to discuss some re-architecture of the data pipeline, where we can potentially eliminate the need for two near-identical databases.

A week in Openverse: 2021-11-22 – 2021-11-29

openverse

Merged PRs

  • #114: Enforce the presence of priority labels on PRs

openverse-catalog

Merged PRs

  • #293: 🔄 Synced file(s) with WordPress/openverseOpenverse Openverse is a search engine for openly-licensed media, including photos, audio, and video. Openverse is also the name for the collection of related code repositories that make up the project.

openverse-api

Merged PRs

  • #371: Add priority labels to Dependabot PRs
  • #370: 🔄 Synced file(s) with WordPress/openverse
  • #367: Bump boto3 from 1.19.5 to 1.20.10 in /ingestion_server
  • #353: Bump psycopg2 from 2.9.1 to 2.9.2 in /analytics
  • #349: Bump psycopg2 from 2.9.1 to 2.9.2 in /openverse_api

openverse-frontend

Merged PRs

  • #449: 🔄 Synced file(s) with WordPress/openverse
  • #445: SearchGridFilter wrapper component selected based on reactive media query
  • #444: Restore husky
  • #441: Bump axios from 0.21.1 to 0.21.2
  • #437: Fix Search form on smaller viewports
  • #429: Make HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. RTL-compatible
  • #404: Removed unused image assets

Closed issues

  • #443: Husky was removed unexpectedly
  • #436: SearchGridForm adjusts to screen size changes incorrectly
  • #426: Make Header RTL-compatible
  • #396: Clean up image assets

openverse-browser-extension

Merged PRs

  • #25: 🔄 Synced file(s) with WordPress/openverse

#openverse, #week-in-openverse

A week in Openverse: 2021-11-15 – 2021-11-22

openverse-api

Merged PRs

  • #358: Add migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. for removing ShortendLink
  • #356: Protect foreign key constraint between `imagelist_images` and `imagelist`

openverse-frontend

Merged PRs

  • #430: Fix package-lock.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. engines
  • #427: Make Homepage and Searchbar RTL-compatible
  • #425: Make Homepage RTL-compatible
  • #417: Fix state errors
  • #413: Node 16 and NPM 8
  • #406: Add Checkbox component
  • #398: Search and media store refactoring
  • #397: Add VPopover component
  • #380: Create the `InputField` and `SearchBar` components

Closed issues

  • #424: Make Homepage RTL-compatible
  • #416: State handling bugs
  • #405: Component: Checkbox input
  • #383: App shows “no results for {query}†while results are loading
  • #375: Component: SearchBar
  • #374: Component: InputField
  • #366: Popover component

#openverse, #week-in-openverse

A week in Openverse: 2021-11-08 – 2021-11-15

openverse

Merged PRs

  • #106: Automate the archiving of PRs in the PR board

openverse-catalog

Merged PRs

  • #289: Reduce TSV loader complexity
  • #288: Retire cleaner_worfklow, pg_cleaner
  • #287: Retire legacy ingestion column fix
  • #286: Remove tsv_to_postgres_loader_overwrite
  • #280: Add index creation for matviews
  • #279: SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. alerting utilities
  • #277: Add DAG tags, remove health check workflow
  • #271: Add production deployment documentation
  • #95: Add Provider APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. script for Freesound

Closed issues

  • #290: Permissions issue for default OUTPUT_DIR
  • #282: Retire/remove _fix_ingestion_column
  • #273: Retire the tsv_to_postgres_loader_overwrite DAG
  • #261: How-to guide for deployment
  • #222: Add DAG tags
  • #201: [Quality] Remove `pg_cleaner.py` script
  • #16: [API Integration – AUDIO] FreeSound.org (original #282)

openverse-api

Merged PRs

  • #339: Bump ipython from 7.28.0 to 7.29.0 in /openverse_api
  • #337: Bump django-storages from 1.12.2 to 1.12.3 in /openverse_api

openverse-frontend

Merged PRs

  • #411: Replace PDM logo
  • #408: Update breakpoints to the new Tailwind config
  • #403: Tailwind breakpoints
  • #399: Create a global audio player (amongst many smaller improvements)
  • #394: Add playwright e2e tests
  • #392: Create Skeleton components

Closed issues

  • #409: Wrong icon for Public Domain tool
  • #395: Global Audio Player
  • #391: Use Tailwind default screen breakpoints and/or add one for smaller screens
  • #376: Component: “Skeleton†loaders / placeholders

#openverse, #week-in-openverse

A week in Openverse: 2021-11-01 – 2021-11-08

openverse

Merged PRs

  • #110: Update GITHUB.md

openverse-catalog

Merged PRs

  • #276: Respository restructure

Closed issues

  • #262: Move one-off or obsolete DAGs to “retired†folder
  • #231: [Quality] Structure DAGs based on general type

openverse-frontend

Merged PRs

  • #379: Add a dependencies section and remove the redundant title
  • #372: Add base Button component
  • #367: Avoid error using only local translation files
  • #355: Use Tailwind RTL styles everywhere

Closed issues

  • #365: Create base Button component
  • #298: [Bug] Frontend fails to run if translations aren’t fetched first

#openverse, #week-in-openverse

A Symbol for Openverse

When we started discussing what it means for OpenverseOpenverse Openverse is a search engine for openly-licensed media, including photos, audio, and video. Openverse is also the name for the collection of related code repositories that make up the project. to be part of the WordPress ecosystem, our first thought was the uniqueness of reaching a variety of users and contexts through a tool connected to multiple sources. That reason was enough to start thinking of the brand identity and introducing the search engine as a new tool in the open-source community.

An open universe

Openverse is a word game that stands for Open and Universe. In that vein, it points to the essence of what Openverse aims: a space that gathers content and encourages its reuse. A space that boosts creativity by assembling components to form something meaningful.

While seeking equivalent comparisons from daily life, I came up with two concepts: Communities and Constellations. Both have in common the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. idea of individual contributions to a shared purpose. 

I started by drawing the two concepts from practical uses. A profile image for the blog and a favicon for the web the team was already working on.

Symbol ideas

The jazzy context

Although Openverse is a unique, standalone tool, it lives on WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/, contextualized alongside other projects. When we realized this, jazz emerged as the main connecting aesthetic to blend the Openverse and WordPress identities. Jazz has informed WordPress from the project’s beginning.

In parallel, the News section was in a redesign process, and the work there inspired this new direction. The graphics shown below gave Openverse a vintage and modern look-and-feel that paved the way to what ended up becoming the brand symbol.

An expanded and bold symbol

The most preferred characteristic of all versions made were the transitional shapes. It brings the expanding idea of the universe while adding the boldness of geometric shapes found in jazz album covers.

Openverse is a powerful tool that surfaces a vast range of openly-licensed content. This symbol portrays that complexity and encourages future applications. We envision the search engine in many situations where content creators can find inspiration.

Yet this task has not ended. Interfaces and other brand applications remain in our roadmap, but this is a firm first step towards a robust identity.

I enjoyed this first brand release and looking forward to working on interface contexts. Thanks to the design community for all fruitful feedback and @beafialho for the inspiring work in News section.