Everything You Need to Know About Openverse and the WordPress Photo Directory

A screenshot of the redesigned Openverse homepage, with images from a search for 'Olympic games' of athletes from many decades and backgrounds.
The redesigned wordpress.org/openverse homepage

When we announced that Openverse had joined WordPress earlier last year, we were thrilled about the exciting changes coming to the platform. Many of those updates are here.

Openverse, previously known as CC Search, is a search engine for openly licensed media. The index, which joined WordPress in mid-2021, has over 600 million Creative Commons licensed and public domain image and audio files. All files can be used free of charge.

 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. has several new features, including:

  • A redesigned interface: Openverse has a new brand identity and user interface optimized for usability. Find the images and audio files you’re looking for and 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. results by license, source, and many other options.
  • Internationalization: Openverse is fully translated in 12 languages, with additional partial translations in other languages. We encourage anyone in the community to submit translations in their own languages.
  • Audio support: Openverse now includes songs, podcasts, samples, and other audio files from FreeSound, Wikimedia Commons, and Jamendo.
  • New image providers: The Openverse team has added two new sources of high-quality photographs, the WordPress Photo Directory and StockSnap. In addition, photo libraries such as EDUimages and Images of Empowerment are now available from Meta Search.

The Openverse project is part of the WordPress community and welcomes contributions from those who want to help it become the best openly licensed media search engine on the internet. The WordPress Photo Directory provides such an opportunity. 

What’s the WordPress Photo Directory?

The WordPress Photo Directory is both a new curated source of free, high-quality photographs and a new submission tool for Openverse, powered by the WordPress community. Without it, you’d need to use Flickr, Wikimedia Commons, or other sources to submit your work to Openverse.

The WordPress Photo Directory aims to be a trusted place for the community to create, share, discover, and reuse free and openly licensed media. All photos in the WordPress Photo Directory images are licensed with the CC0 public domain tool.

The WordPress Photo Directory welcomes contributions in different forms. One of the best ways to get involved is by submitting your photos:

  • Anyone with a wordpress.org account can submit their work to the photo directory. All submissions must meet these guidelines to ensure the quality of content. 
  • Photos will also be categorized and tagged to facilitate searching. Once a submission gets approved, it will be automatically added to the WordPress Photo Directory and the Openverse search engine.

You can also report issues with the directory, or become a photo directory moderator.

It is worth noting that Openverse and the WordPress Photo Directory are separate and independent projects. However, they are complementary in that the images from the directory are discoverable via the Openverse search. All WordPress Photo Directory images can be viewed in Openverse.

Where can you learn more about Openverse?

The Make Openverse blog is one of the best ways to follow along with the project. Feel free to reach out to any Openverse contributors on 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/. #openverse, GitHub, or any other channel to learn more about the project. If you are interested in contributing code to Openverse, look at our good first issues or our guide for new contributors.

We hope you are as excited as we are about Openverse, and we look forward to your contributions!

Happy searching!


Thanks to @rmartinezduque @anjanavasan @callye @zackkrida @angelasjin for their work on this post.

#media, #openverse, #photos

TypeScript is now a first class citizen in Openverse frontend

Well, mostly

As of the merging of this PR in the WordPress/openverse-frontend repository, it is now possible to use native TypeScript for a lot of the code in 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. for which we were previously using JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/.. The only exception to this are VueVue Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. https://vuejs.org/. single-file-components (SFCs)1. We will continue to use regular JavaScript with helpful but non-contractual2 JSDoc annotations in Vue SFCs; for the rest of our JavaScript we will slowly add type-checking via one of the two methods described below.

There are now two ways to add types to any given module. You can either:

  1. Include the JavaScript module directly in the tsconfig.json includes array, as has been done with use-event-listener-outside.js on this line. This prompts TypeScript to rely on JSDoc type annotations to type-check regular JavaScript.
  2. Rename the file from .js to a .ts. All TypeScript files are automatically included in our tsconfig.json and will be type-checked.

Please note, the second will require restarting your dev server as Webpack won’t be able to keep track of file extensions changing (it’ll get stuck looking for a now non-existent *.js file).

In general, the current contributors to Openverse’s frontend prefer to use native TypeScript over the JSDoc variant. In particular more of us know native TypeScript syntax than the intricacies of the JSDoc variant.

There is a Milestone in the WordPress/openverse-frontend repository to track progress on adding type checking to all the modules that would allow it. If you work on these issues, please note that it is best practice to reduce the number of runtime changes to the module when converting them to TypeScript; however, sometimes it is necessary to add additional runtime type-checks to satisfy the TypeScript compiler. Anticipate needing to do this.

Some specific techniques to keep in mind

There are some specific techniques I’ve found helpful for gradually adding TypeScript to an existing JavaScript project; in particular, much of this was learned during the ongoing effort to add type-checking to GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ and its various packages.

Discriminated union type narrowing

This technique is useful when you get a discriminated union type from a function return and need to prove to TypeScript that you know what the type of the object is you’re working with. For example, take our MediaDetail type. Perhaps you have an array typed MediaDetail[] and would like to iterate over each and do something different with each media type.

The way to do this is to use the MediaDetail‘s shared frontendMediaType property. The presence of this property is what makes the MediaDetail type a discriminated (or “tagged”) union: the value of the frontendMediaType property allows the type checker to discriminate between the possible types that can be assigned to a MediaDetail. For example, because frontendMediaType on AudioDetail is typed as the string constant 'audio', the type checker will know that the following assertion will narrow the type of the object to the AudioDetail type:

const mediaDetails: MediaDetail[] = getMediaDetailArray()

mediaDetails.forEach((mediaDetail) => {
  if (mediaDetail.frontendMediaType === 'audio') {
    // In here, TypeScript will know that mediaDetail is an AudioDetail type
  } else {
    // Because MediaDetail can only by AudioDetail or ImageDetail (for now), in here TS will know that mediaDetail is an ImageDetail type
  }
})

Here is an example of the above in the TypeScript playground for you to play around with.

Type assertion functions

Sometimes we need to assert the type of something that is not starting from a discriminated union type. For example, variables typed as unknown need to be cast to a known type before properties on them can be accessed. To do this, we can use a type assertion function.

Note: Before getting too deep in the weeds of this tool, please keep in mind that under the hood a type assertion function is essentially a hard cast that is theoretically backed by a runtime “type check” (where type here usually refers to shaped types rather than nominal types). That means that there’s effectively no difference between a type assertion function and foo as unknown as WhateverIWant. TypeScript is going to take our word that our type assertion functions actually do the work to “prove” (in so far as types are provable in TypeScript) that we have the type we say we have. That means that we should carefully consider how we use this tool and also ensure that we cover the implementing functions with 100% unit test coverage. TypeScript will gladly accept the following function as a boolean type assertion, despite it being nonsense:

function isBoolean(o: any): o is boolean {
return typeof o === 'string'
}

So be careful! Anyway, back to the show…

The TypeScript project has a playground that describes this feature here. It’s kind of wordy, so I’ll summarize it here.

Essentially, if you can prove to yourself via some runtime type checks that a variable is a specific type, then you can let TypeScript know this through a special is return type annotation.

const isNumber = (o: any): o is number => typeof o === 'number'

That’s the simplest example. A more complex example could be the following:

const isPromise = (o: any): o is Promise => {
return (
o &&
typeof o.then === 'function' &&
typeof o.catch === 'function' &&
typeof o.finally === 'function'
)
}

You may also use the special keyword asserts to indicate to TypeScript that the function will stop execution in the parent context (probably by throwing an error but it could also be via process.exit in a Node context) if the runtime type check does not pass.

This is useful when you know code needs to fail to execute if a value is null or undefined for example:

export function assertIsDefined(val: T): asserts val is NonNullable {
if (typeof val === 'undefined' || val === null) {
throw new Error()
}
}

When you use this function, after calling assertIsDefined(foo), TypeScript will know that foo is not null or undefined.

Casting to const

Casting to const is an invaluable tool in TypeScript as it allows you to derive specific types from object and array definitions rather than general types. If you want to declare an array a tuple in TypeScript, you must use the as const cast.

const generalStringArray = ['one', 'two', 'three']

const tuple = ['one', 'two', 'three'] as const

The generalStringArray will have the inferred type of string[] where as tuple will have the much more specific type of ['one', 'two', 'three'] (literally, the type will be the same as the value, how amazing is that?!).

This is particularly useful (and in fact necessary) to use for typing a dependency array for the watch function. Without casting the dependency array to const, TypeScript will infer a mixed type for each element of the array passed to the watcher callback that combines all the constituent parts of the dependencies.

Please open this TypeScript playground link to see a live example of this problem and how to solve it by casting to const. Note how in the first watch example, each of the values in the callback are typed as a combination of the types of each element of the dependency array. In the second, which uses as const, TypeScript is told to determine the type of the values in the callback by position as in a tuple where each element is typed separate from the others.

Packages to know about

@types/nuxt

This package is already included in our dependencies and houses all of the various Nuxt types like the type for context and app. Extending the types in this package via interface merging allows us to describe our additional modifications to Nuxt’s context. For example, we currently add annotations for the $ua and i18n extensions to Nuxt’s context. When typing anything that uses the useContext composable, it may be necessary to add further extensions to those types.

vue

This is of course one of the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. packages of our frontend application. It also houses many core types for Vue, like the Component type.

@nuxtjs/composition-api

You likely already are aware of this package, but please note that it includes a wealth of Vue related types for the Composition 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.. In here you will find the Ref type for example.

utility-types

The utility-types package includes a helpful set of types for dealing with common TypeScript scenarios. This is not currently included in our dependencies but is a reliable source of utility types should we need them. Check this package first before trying to write super-complex generic mapped types.

More helpful resources

TypeScript playground

The TypeScript playground (https://www.typescriptlang.org/play) is very helpful for collaborating with others on type-related problems. I’ve found it particularly helpful in that it forces me to narrow the problem I’m having to the bare-minimum example of it. Often times this practice alone can help me resolve an issue I’m having or at least see it more clearly.

Type challenges

If you’re looking to flex new, growing, or even strong TypeScript muscles, the type-challenges repository is a great resource. It’s a collection of small (though almost never simple) TypeScript challenges that force you to explore things like type inference, generic types, mapped types, and other intermediate to advanced TypeScript features.

I will say that even some of the so-called “easy” challenges are not for the faint of heart! They can be quite the brain teasers and sometimes pretty frustrating but so satisfying to find solutions for. The community is also quite active in sharing their solutions and this is a great way to pick up new tricks from TypeScript wizards.


1 There’s a little bit more tooling we’d have to do to get Vue files able to be typed, in particular around distinguishing Vue templates from ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. JSX (it appears TypeScript gets quite confused about this). Storybook, unfortunately, is the culprit here as its dependencies pull in the @types/react package which pollutes (at least from a Vue perspective) the global JSX namespace with React specific types. For example, React’s type for the class attribution on an HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. element does not allow for Vue’s array and object classname binding syntax. One solution would be to switch to the vue-tsc library, and indeed we will do that when time comes for us to upgrade Nuxt via Nuxt bridge; but for now plain old TypeScript is fine for our purposes.

2 I use the phrase “helpful but non-contractual” here to distinguish from the “contractual” aspect of actually type checking a file. The JSDoc annotations in SFCs are helpful to indicate to the reader (and likely to their editor) what the intention is; but they are non-contractual in that they are not checked for correctness or enforced by the TypeScript compiler. You may still notice some editors giving you TypeScript errors in this file (VSCode will do this, for example) but they will not be enforced by the CI type-checking.

A week in Openverse: 2022-02-28 – 2022-03-07

openverse

Merged PRs

  • #174: RFC: MigrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. from Vuex to Pinia in the front-end
  • #165: RFC: Visual regression testing

openverse-catalog

Merged PRs

Closed issues

  • #381: Report the environment in TSV Slack messages

openverse-api

Merged PRs

  • #547: Bump boto3 from 1.21.0 to 1.21.10 in /ingestion_server
  • #544: Bump sentry-sdk from 1.5.5 to 1.5.6 in /api
  • #543: Bump furo from 2022.2.14.1 to 2022.2.23 in /api
  • #542: Bump locust from 2.8.2 to 2.8.3 in /api
  • #541: Bump ipython from 8.0.1 to 8.1.0 in /api
  • #539: Bump spectree from 0.7.3 to 0.7.6 in /analytics
  • #538: Bump alembic from 1.7.5 to 1.7.6 in /analytics
  • #537: Bump filelock from 3.5.1 to 3.6.0 in /ingestion_server
  • #535: Bump ipython from 8.0.1 to 8.1.0 in /ingestion_server
  • #534: Bump python-decouple from 3.5 to 3.6 in /analytics
  • #533: Bump tldextract from 3.1.2 to 3.2.0 in /ingestion_server
  • #524: Send peak data in search results and details

openverse-frontend

Merged PRs

  • #1052: Convert more utils to TypeScript
  • #1049: Add group class to audio track
  • #1046: handling null and undefined value for userAgent
  • #1044: Minor improvements to `.eslintrc.js` and `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.`
  • #1041: Add the missing tape that causes e2e errors
  • #1038: Extract 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. definition to constants directory
  • #1036: changed the scroll to top button color B->P
  • #1035: Add width and height properties to images
  • #1023: Convert 6 utils to TypeScript
  • #1013: Add missing labels to VPopover
  • #1011: Use props instead of store for searchTerm (query.q)
  • #1006: Image cell focus state improvements
  • #999: Add eslint rules for imports and eslint comments
  • #906: Create a proof-of-concept for Pinia migration
  • #881: Use talkback proxy to mock e2e 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. requests
  • #738: Truncate text in content switcher button, allow width to change
  • #603: Create the updated ‘No results’ and ‘Server timeout’ sections

Closed issues

  • #1048: Boxed audio doesn’t show license icons on focus
  • #1012: Some VPopovers are missing labels
  • #1010: Single type search pages (`search/`) should not use the store
  • #1004: Image results lack a focus state
  • #939: Add types to `utils/srand.js`
  • #938: Add types to `utils/sentry-config.js`
  • #937: Add types to `utils/send-message.js`
  • #936: Add types to `utils/resampling.js`
  • #935: Add types to `utils/prng.js`
  • #933: Add types to `utils/math.js`
  • #930: Add types to `utils/case.js`
  • #927: Add types to `utils/format-strings.js`
  • #926: Add types to `utils/env.js`
  • #925: Add types to `utils/string-to-boolean.js`
  • #924: Add types to `utils/dev.js`
  • #922: Add types to `utils/decode-data.js`
  • #903: Non-string UserAgent can crash the app
  • #901: Add eslint-pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party-eslint-comments to prevent accidentally leaving disabled rules for entire files
  • #857: Update attribution HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. generation to point to 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. license/mark glyphs
  • #855: Add eslint-plugin-import to enforce import order and extension consistency
  • #831: Set up Pinia
  • #830: Rename getters that have the same name as state properties in Vuex stores
  • #602: No results page
  • #499: SSR request mocking on E2E tests

#openverse, #week-in-openverse

Community Meeting Recap (Mar 1st)

Announcements

  • Next week’s meeting will be hosted by @zackkrida, as we continue our hosting rotation amongst the sponsored 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. developers.

Takeaways

Done

  • The provider DAGs have been reactivated and audited [ref]
  • Add peaks to the AudioDetail interface, new contributor 🎉 [ref]
  • We added logging levels to the 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/. utility in 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. [ref]
  • Reconfigured retries and timeouts for DAGs [ref]
  • Support for locale based locale paths in WordPress themes, a big step for frontend i18n [ref]
  • Completed the v3.1.0 frontend milestone with post-launch bug fixes [ref]

In progress

  • Sending peak data in the API needs final review [ref]
  • Adding eslint rules, needs review [ref]
  • Adding linting for JSDoc [ref]
  • Discussed SEO issues related to the iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser.-approach. Issues that are fixable within the iframe have been resolved. We are optimistically waiting on feedback about moving away from the iframe before investing time in the remaining work. [ref]
  • Help needed in debugging Postgres connection crashes in the production API [ref]
  • Feedback needed on the 3D Model RFC [ref]

Upcoming

  • Tracking issue for issues coming out of the provider DAG audit [ref]
  • Milestone created for TypeScript RFC [ref]
  • Milestone created for Visual Regression Testing [ref]
  • Milestone created for Pinia migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. [ref]
  • Milestone created for UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. state cookie [ref]
  • Dependabot PRs to be tackled this week [ref]
  • RFC for feature flags in the frontend [ref]

#openverse-weekly-community-meeting

#openverse, #openverse-weekly-community-meeting

A week in Openverse: 2022-02-21 – 2022-02-28

openverse

Merged PRs

  • #173: Add new tech labels for Bash and TypeScript
  • #172: Add minimum wait period to RFCs
  • #164: RFC: Introduce UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. state cookie
  • #163: Add RFC README.md

Closed issues

  • #144: Support locale based locale paths in WordPress theme

openverse-catalog

Merged PRs

Closed issues

  • #374: Format duration in TSV load complete Slack message
  • #370: [RFC] Catalog & 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. 3D Model Support
  • #356: TSV loader completion slack message
  • #352: Reactivate provider DAGs
  • #349: Improve provider workflow retries
  • #348: Use `execution_timeout` rather than `dagrun_timeout`
  • #283: Audit Provider scripts and associated DAGs

openverse-api

Merged PRs

  • #532: Add logging levels to Slack notifications in ingestion server
  • #507: Run CI/CD on every pull request
  • #500: Bump django-oauth-toolkit from 1.5.0 to 1.7.0 in /api

Closed issues

  • #481: Add “limited reporting” mode for ingestion server
  • #443: Run integration tests on all PRs
  • #416: `test_dead_links_are_correctly_filtered` Flakiness
  • #389: `just` scripting for the Analytics server

openverse-frontend

Merged PRs

  • #998: Add optional peaks key to AudioDetail interface
  • #997: Make active media setup store and add unit tests
  • #995: Remove unguarded localStorage access
  • #993: Fix CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. import ordering
  • #990: Fix attribution HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. glyph reference and fix historical usages as well
  • #988: Remove z-index from brand blocking search type switcher
  • #982: Fetch single image result in `asyncData` hook instead of `fetch`
  • #981: Split CI into discrete jobs
  • #979: Add support for native TypeScript
  • #944: Remove dead code and fix errant type
  • #918: Enable SSR for migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. banner
  • #917: Lint TS files in GitGit Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Git is easy to learn and has a tiny footprint with lightning fast performance. Most modern plugin and theme development is being done with this version control system. https://git-scm.com/. 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.
  • #916: Disallow all link components except “ with eslint rule
  • #904: Add migration notice and translation banner to the blank layout; fix translation banner logic
  • #898: Avoid translating brand names
  • #893: Rename Skeleton components
  • #892: Rename AudioDetails
  • #884: Use v-show instead of v-if for width-based condition
  • #880: Fix browser back button handling in search pages
  • #879: Make VLink component that wraps around both external and internal links
  • #867: Refactor media services
  • #851: Remove `mediaType` from `search.query` state
  • #850: Update license explanation tooltip

Closed issues

  • #996: Add peaks to the AudioDetail interface
  • #994: Rendering crashes in Chrome if localStorage is blocked
  • #992: Focused image result license icons are wrong colors
  • #983: Open external links in parent frame
  • #980: Navigate to the image detail page with an invalid id breaks it
  • #921: Add native TS support for non-VueVue Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. https://vuejs.org/. SFC files
  • #909: [RFC] Introduce UI state cookie to fix pop-in issues
  • #891: [RFC] Visual Regression Testing
  • #890: Split tests and static analysis into separate actions in the CI
  • #889: [RFC] Frontend 3D Model Support
  • #882: SSR Audio results page crashes
  • #875: Pages menu lacks focus styles
  • #866: Simplify media services
  • #860: Switching search type from an SSR’d audio results page to all content does not fetch all results
  • #856: Using the back button to navigate from the images search to the all content search results in only images showing
  • #835: Remove `query.mediaType` state property
  • #807: Strings with a value of “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.” should never be translated
  • #801: Unable to choose images on landing page, under content types on the search bar
  • #784: Blank layout doesn’t show the translation banner or CC referral banner
  • #759: 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. size in tablet
  • #761: Horizontal scroll issue on Openverse main page, when viewing license information.
  • #663: Browser back button doesn’t resubmit previous search
  • #558: Fix Audio e2e tests
  • #541: Add license definition in 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.
  • #515: CC Migration banner doesn’t SSR
  • #468: External links NOT opening in the Openverse iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser.
  • #423: License explanation popup should close on click outside and be placed correctly

#openverse, #week-in-openverse

Community Meeting Recap (Feb 22nd)

Announcements

  • Next week’s meeting will be hosted by @stacimc, as we continue our hosting rotation amongst the sponsored 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. developers.
  • 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/. was having an ongoing outage during the course of this meeting, which caused some delays in communication.

Takeaways

Done

  • TSV loading is now performed at the end of 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. DAGs [ref]
  • Audio waveforms are now cached in the API database after being computed [ref]
  • Lots of movement on the frontend to remove dead code and general cleanup [ref]
  • A new VLink component which will help wrap internal and external links [ref]
  • Testing guidelines for the frontend! [ref]
  • Browser back button now behaves as expected [ref]

In progress

  • Numerous RFCs in need of review [ref]
  • A refactor of Media Services in the frontend [ref]
  • Changes to catalog DAG timeouts and retries [ref]
  • Improvements to E2E testing in the frontend [ref]
  • Slack completion message after a provider API DAG completes [ref]
  • Removing all external styles (some upcoming changes to this PR as well) [ref]
  • Decoupling waveform generation from the API by moving it out into a separate service [ref]
  • Native TypeScript support [ref]

Upcoming work

  • Catalog milestone v1.1.0 is very near completion [ref], and v1.2.0 will be underway soon [ref]
  • Improvements to automated 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) testing via Vuetensils [ref]
  • A new RFC + milestone for application monitoring [ref]
  • Some discussion around moving openverse-frontend into the openverse repository as the first step towards a monorepo [ref]

✨ That’s all for now ✨

#openverse-weekly-community-meeting

#openverse, #openverse-weekly-community-meeting

A week in Openverse: 2022-02-14 – 2022-02-21

openverse-catalog

Merged PRs

  • #362: Use Airflow Variables for storing 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. keys
  • #360: Add provider media type to DAG tags
  • #359: Differentiate between 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/. channels
  • #357: Trigger TSV loading immediately after workflow

Closed issues

  • #346: Verify Freesound data
  • #323: Add DAG tags for media types
  • #285: Trigger TSV loader as a subDAG or DAG run
  • #209: Move API keys from .env to Airflow Variables

openverse-api

Merged PRs

  • #519: Remove pipdeptree
  • #518: Update Quickstart guide with troubleshooting tips
  • #515: Bump boto3 from 1.20.26 to 1.20.54 in /ingestion_server
  • #514: Bump spectree from 0.6.8 to 0.7.3 in /analytics
  • #513: Bump locust from 2.5.1 to 2.8.2 in /api
  • #511: Bump django from 3.2.9 to 3.2.12 in /api
  • #510: Cache waveform data in database
  • #509: Add quickstart and API documentation to README.md
  • #501: Bump ipython from 7.31.0 to 8.0.1 in /api
  • #495: Bump confluent-kafka from 1.7.0 to 1.8.2 in /analytics
  • #493: Bump pytest-order from 1.0.0 to 1.0.1 in /ingestion_server
  • #492: Bump sqlalchemy from 1.4.29 to 1.4.31 in /analytics
  • #459: Bump requests from 2.26.0 to 2.27.1 in /analytics

Closed issues

  • #517: Add troubleshooting tips to the Quickstart docs
  • #516: Remove `pipdeptree`
  • #490: Cache waveform data
  • #488: Reference quickstart guide in top level README.md

openverse-frontend

Merged PRs

  • #912: Re-add the viewport 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. tag
  • #911: Use actual image source instead of foreign landing url as single result `og:image` path
  • #908: Remove outdated labelling instructions
  • #905: Remove unused Google Analytics code
  • #902: Remove old seo tags reintroduced via bad commit
  • #900: Disable friendly errors overlay
  • #897: Remove excessive padding from VContentItem
  • #894: Rename NoticeBar and MigrationNotice components
  • #886: Add TESTING_GUIDELINES.md initial draft
  • #883: Remove footer and associated styles and i18n strings
  • #872: Remove unused PhotoTags component
  • #870: Fix inline popover content taking up space
  • #869: Use single function to fetch single media item
  • #865: Add tags in image single result page
  • #864: Fix text colors
  • #863: Remove unused store modules
  • #861: Duplicate button classnames for increased specificity
  • #852: Fix search bar button crashing index page
  • #849: Fix global layout issues
  • #819: Fix homepage searchbar appearance when focused in mobile safari
  • #818: (#692) Fix duration mismatch between audio and metadata
  • #744: Audio single result refinements

Closed issues

  • #874: Back navigation after applying filters does not fetch new results
  • #862: Remove unused store modules
  • #859: Only show “load more results” when there are more results to load
  • #825: About page is broken
  • #817: 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. logo link is broken on search pages
  • #802: Update meta tags to reflect wp.org
  • #787: Explore visual regression testing
  • #782: Unguarded `sessionStorage` access fails on certain privacy settings
  • #781: Single audio result view has horizontal scroll on mobile
  • #742: Adding tags in image single result page
  • #741: Audio download button should have rounded right corners when there’s no dropdown
  • #740: Single audio result view cleanup
  • #708: Wrong color in texts
  • #692: Audio waveform progress bar extends beyond the end of the waveform body
  • #671: Single audio view lacks ‘return to results’ link
  • #576: Search results title
  • #554: Add E2E tests to CI
  • #544: Audio result page responsiveness is messy
  • #495: Rename components to names with `V` prefix
  • #460: Decouple AudioController from `audio` in favour of headless `Audio`
  • #248: [Bug] Information list looks strange with long names (German)

#openverse, #week-in-openverse

Community Meeting Recap (Feb 15th)

This week we are approaching the end of a sprint focused on our Frontend Postlaunch cleanup.

Announcements

  • Next week’s meeting will be hosted by @aetherunbound, as we continue our hosting rotation amongst the sponsored 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. developers.

Takeaways

Done

  • Single audio result view cleanup, now it’s a more responsive page [ref]
  • New sponsored contributor, @stacimc, first PR 🎉 [ref]
  • Redesigned content reporting flow [ref]
  • Fixes to the global layout [ref]
  • The Openverse Catalog has milestones for future releases, so if anyone wants to contribute from that side, they can find the ongoing and required work there [ref]

In progress

Upcoming changes

  • We agreed to dedicate next weeks to plan following milestones for the Frontend and 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. repositories while fixing most critical bugs [ref]. Pending points for planning that were mentioned:
    • Vuex to Pinia migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies.
    • Monitoring across the stack
    • Further TypeScriptifying composables and other areas
    • Adding more comprehensive e2e tests (especially ones that test keyboard navigation)
    • Visual regression testing
  • Evaluate the guidelines for reviewing pull requests and complete them. Maintainers should remember to remove the awaiting triage label when creating or reviewing issues. [ref]

#openverse-weekly-community-meeting

A week in Openverse: 2022-02-07 – 2022-02-14

openverse

Merged PRs

  • #155: Bump node-fetch from 2.6.1 to 2.6.7 in /js
  • #146: Bump ipython from 7.30.0 to 7.31.1 in /python

openverse-api

Closed issues

  • #390: Analytics server is broken in production

openverse-frontend

Merged PRs

  • #854: Add default placeholder for VSearchBar
  • #848: Document global ref SSR safety
  • #844: Use the correct list of filters for All content
  • #841: Fix/silence some warnings
  • #840: Improve e2e tests
  • #837: Replace `@` imports with `~` imports
  • #836: Fix unit test warnings
  • #833: Unstuck `searchStatus` of search bar
  • #829: Add a check for blank search term before searching
  • #828: Change button text color from black to charcoal
  • #827: Fix homepage content switcher size
  • #826: Add underline to the “contribute a translation” link
  • #821: Allow local network access from other devices when in development
  • #816: Complete missing props
  • #814: Set default size of VAudioTrack with a computed property
  • #806: Basic SEO 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. Fixes
  • #800: Update color ‘primary’ to ‘pink’ after redesign
  • #798: Remove usage session cookie
  • #796: Fix homepage RTL
  • #795: Fix unguarded `ResizeObserver` access
  • #793: Guard `local` util against thrown errors
  • #788: Tweak search bar styles in homepage
  • #770: Unify number localization strategy across the app.
  • #720: Create the Content Report flow

Closed issues

  • #853: Nuxt static assets don’t seem to be served via Docker build
  • #824: [@nuxtjs/i18n] Locale ISO code is required to generate alternate link
  • #820: Allow access from hosts other than `localhost` during development
  • #815: Multiple warnings for “Missing required prop”
  • #803: Add global handler for a `meta` query param that returns the raw text of meta tags generated for the request
  • #809: Prevent indexing of search.openverse.engineering content (when not embedded)
  • #808: Search results should output a noindex directive
  • #794: Unguarded `ResizeObserver` access
  • #792: Unguarded `localStorage` access causes Security Error
  • #791: Move analytics server `sessionId` to localstorage; rename.
  • #786: 404 Searchbar styles are broken
  • #769: Disable homepage search submission without a query
  • #765: RTL broken on homepage
  • #758: Audio title in global player component
  • #731: Translation banner link doesn’t look like a link
  • #728: Search bar styles in homepage
  • #726: Search bar result count always displays “no results”
  • #721: All content grid is using an invalid size prop
  • #646: Align content switcher inside search bar with Figma mockups
  • #644: 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. searchbar is missing placeholder text
  • #543: Add a report content action in single result views
  • #535: RTL languages still using eastern arabic numerals on search page
  • #75: Update URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org metadata to reflect rebranding to 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, #week-in-openverse

Community Meeting Recap (Feb 8th)

This week we began the third week of a sprint focused on our Frontend Postlaunch cleanup.

Announcements

  • Next week’s meeting will be hosted by @krysal as we continue our hosting rotation amongst the sponsored 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. developers.
  • We are still working on issues for the Postlaunch Milestone in GithubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ as part of Openverse redesign.

Takeaways

Done

In progress

Upcoming changes

#openverse-weekly-community-meeting

A week in Openverse: 2022-01-31 – 2022-02-07

openverse

Merged PRs

  • #145: Add CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. technology label

Closed issues

  • #124: Maybe add 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 WP bug tracking code?

openverse-catalog

Merged PRs

  • #355: Updated user agent for Wikimedia Commons #140
  • #344: Remove buckets after testing

Closed issues

  • #343: Buckets are not destroyed appropriately after testing
  • #300: Remove `create_dag` functions
  • #140: Update user agent for Wikimedia Commons

openverse-api

Closed issues

  • #502: Turn down Sentry transaction sample rate
  • #20: Error formatting issue (original #675)

openverse-frontend

Merged PRs

  • #790: Remove dead a/b testing (sixpack) code
  • #785: Adjust styles of `VContentLink`
  • #783: Fix double focus ring in item groups
  • #780: Fix global audio rtl close placement
  • #773: Truncate global audio text to two lines
  • #771: Add skip to content button
  • #768: Make audio/image pages without ids show a 404
  • #767: Fix logo button paddings and simplify implementation
  • #763: Check for `null` localStorage explicitly
  • #755: Enable source maps in production
  • #753: Use jed1x 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. format to correctly handle pluralization
  • #752: Fix logo color on error page layout
  • #747: Remove Jamendo and Wikimedia Commons from audio 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. sources
  • #701: Switch to path-based i18n routing
  • #682: New image details page
  • #563: Staging and production deployment workflows

Closed issues

  • #789: A/B Test Module (aka Sixpack) is no longer in use
  • #779: Global audio player RTL is slightly broken
  • #778: Pink text underline on content links
  • #766: `focus-visible` polyfill breaking some button focus styles in Firefox
  • #762: `~/utils/local` does not properly handle missing localStorage property
  • #757: ImageGrid is not showing license icons
  • #754: Publish source maps to Sentry on release
  • #751: Openverse logo on 404 page is pink
  • #743: Remove Jamendo and Wikimedia Commons from Audio Meta search
  • #737: Image attributions load incorrectly on client-side routing
  • #732: Styles in Content link component
  • #710: Horizontal scroll issues on single image result view
  • #702: [i18n] Pluralized translations are not downloaded
  • #700: Translations aren’t shown on localized homepages
  • #687: 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. button small in mobile view
  • #659: Executing a search from the homepage using a screen reader is confusing
  • #529: New single image result page
  • #508: Store 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. state in cookie
  • #496: Going to `/photos/` without an id should not fetch

#openverse, #week-in-openverse