Drini Cami cdrini

We have three types of components on Open Library:

CSS Components: Components which only require a little bit of CSS. These could have a separate HTML template file in openlibrary/templates if it makes sense to have one, and will usually have a separate .less file in static/css/components. Note the .less file must then be imported from the corresponding page's .less file, E.g. static/css/page-user.less.
JavaScript/JQuery components: These are components which require a small amount of functionality, or are legacy implementations. E.g. the multi-input-autocomplete. These will have a JS file in openlibrary/plugins/openlibrary/js, and an import line in openlibrary/plugins/openlibrary/js/index.js.
Vue components: For new, more interactive components, we prefer to use Vue.js. These components will have a .vue file in openlibrary/components. For more info on Vue, read the README in that directory. E.g: LibraryExplorer.vue

All these components make use of BEM class notation to define the c

Script to convert a normal /type/page to a /type/i18n_page. Assumes the current page is in English, and creates the .en page with the same body.

~80% tested. I used it recently but then made some changes. You should be able to copy and paste it into your terminal, or it'll probably also work as a bookmarklet:

[Get the Bookmarklet](https://s4xfk.csb.app/#js=javascript%3A%28async+function%28%29+%7B%0A++++function+copy_json%28json%29+%7B%0A++++++++return+JSON.parse%28JSON.stringify%28json%29%29%3B%0A++++%7D%0A%0A++++function+convert_page_to_i18n_page%28page%29+%7B%0A++++++++const+copy+%3D+copy_json%28page%29%3B%0A++++++++copy.type+%3D+%7B+key%3A+%27%2Ftype%2Fi18n_page%27+%7D%3B%0A++++++++delete+copy.body%3B%0A++++++++return+copy%3B%0A++++%7D%0A%0A++++%2F**%0A+++++*+%40param+%7Bstring%7D+key+The+key+of+the+source+page+to+become+an+i18n_page%0A+++++*%2F%0A++++async+function+make_i18n_page%28key%29+%7B%0A++++++++const+data+%3D+await+fetch%28%60%24%7Bkey%7D.json%60%29.then%28r+%3D%3E+r.json%28%29%29%3B%0A+++

This is a bookmarklet that gives some heuristics for data quality of the books in a search result, author page, or list.

To use, go to this page and copy the bookmarklet! (GitHub won't let me place the bookmarklet here).

[Get the Bookmarklet](https://s4xfk.csb.app/#js=javascript%3A%0Aasync+function+main%28%29+%7B%0A++class+DQSChecks+%7B%0A++++%2F**%0A+++++*+%0A+++++*+%40param+%7BObject%7D+opts+%0A+++++*+%40param+%7BAbstractPageHandler%7D+opts.pageHandler%0A+++++*%2F%0A++++constructor%28%7Bchecks%2C+pageHandler%7D%29+%7B%0A++++++this.checks+%3D+checks%3B%0A++++++this.pageHandler+%3D+pageHandler%3B%0A++++++this.table+%3D+document.createElement%28%27table%27%29%3B%0A++++++this.table.classList.add%28%27dqs-results%27%29%3B%0A%0A++++++this.style+%3D+document.createElement%28%27style%27%29%3B%0A++++++this.style.textContent+%3D+%60%0A++++++++.dqs-running-check+td+%7B+padding%3A+0+8px%3B+%7D%0A++++++++.dq

Turn on/off all layers

img = gimp.image_list()[0]  # Not sure if this gets the last image or the active image
for layer in img.layers:
    layer.visible = False

Thoughts on OL server-side options from 2021-06-09 call with @jdlrobson

Executing vue template from the python

This is apparently an option! @jdlrobson exploring with PyMiniRacer.

Custom webpack loader to import jsdef function from python files

This is one possibility; it would allow us to keep some of the rendering logic in python, and pull it in from the JavaScript.

Node-based call-out

Note: This is a draft and not well proofread. Likely contains errors.

Things I like:

`instanceof` type guards

class Book { id: string }
class Film { imdbId: string }

Well that was a headache! This is certainly not an elegant solution, but it works. Hopefully someone can use these notes to save themselves a bunch of time.

Known issues:

This does not scale easily to any other library
Requires some internal knowledge of lodash's types library which might break on a lodash update

Add `raw-loader` and `@types/lodash`

npm install --save-dev @types/lodash raw-loader

	from dataclasses import dataclass
	import web

	@dataclass
	class ImportRecord:
	title: str
	subtitle: str
	...

	def from_web_data(data: bytes) -> 'ImportRecord':

	"""
	Examples:
	# Get first 20 pages
	python djvu_to_single_line.py ~/Downloads/isbn_9781531610494_djvu.xml -- :20
	# Get first 20 pages and last 5 pages
	python djvu_to_single_line.py ~/Downloads/isbn_9781531610494_djvu.xml -- :20 -5:
	"""
	import xml.etree.ElementTree as ET
	from typing import List

	const packageJson = require('./package.json');
	const shrinkwrapJson = require('./npm-shrinkwrap.json');
	const fetch = require('node-fetch');
	const fs = require('fs');
	const { execSync } = require('child_process');
	const GH_API_ROOT = 'https://api.github.com';
	const REPO = "internetarchive/bookreader";

	async function main() {
	// Make sure branching off of latest master