Make pagefind work in docker (#3899)

* Make search results appear in a fixed window;
Make search text clickable;
Improve search layout on mobile.

* On window resize, adjust layout

* Maybe make Firefox not resize.

* Tweak initial- and maximum-scale

* Make live-html work with pagefind;
Make pagefind work in docker

* Lint

* Fix netlify deploy

.gitignore

@@ -11,3 +11,5 @@ venv
 .vscode
 *.DS_Store
 /.idea/
+
+_pagefind/

Dockerfile

@@ -9,8 +9,24 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
         software-properties-common \
         && apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/*
 
+ENV PAGEFIND_VERSION="1.1.0"
+ARG TARGETARCH
+SHELL ["/bin/bash", "-c"]
+RUN <<EOF
+    export TARGETARCH=${TARGETARCH/arm64/aarch64}
+    export TARGETARCH=${TARGETARCH/amd64/x86_64}
+    curl -o pagefind.tar.gz https://github.com/CloudCannon/pagefind/releases/download/v$PAGEFIND_VERSION/pagefind-v$PAGEFIND_VERSION-$TARGETARCH-unknown-linux-musl.tar.gz -L
+    file pagefind.tar.gz
+    ls -l pagefind.tar.gz
+    tar xzf pagefind.tar.gz
+    rm pagefind.tar.gz
+    mv pagefind /usr/bin
+    chmod +x /usr/bin/pagefind
+EOF
+
 RUN useradd -ms /bin/bash esphome
 
+
 USER esphome
 
 WORKDIR /workspaces/esphome-docs

Makefile

@@ -4,21 +4,21 @@ PAGEFIND_VERSION=1.1.0
 PAGEFIND=pagefind
 NET_PAGEFIND=../pagefindbin/pagefind
 
-.PHONY: html html-strict cleanhtml deploy help live-html live-pagefind Makefile netlify netlify-api api netlify-dependencies svg2png copy-svg2png minify
+.PHONY: pagefind build-html html html-strict cleanhtml deploy help live-html live-pagefind Makefile netlify netlify-api api netlify-dependencies svg2png copy-svg2png minify
 
-html:
+html: pagefind
+	sphinx-build -M html . _build -j auto -n $(O) -Dhtml_extra_path=_redirects,_pagefind
+
+pagefind:
 	sphinx-build -M html . _build -j auto -n $(O)
+	mkdir -p _pagefind/pagefind
 	${PAGEFIND}
 
-live-html:	html
-	sphinx-autobuild . _build -j auto -n $(O) --host 0.0.0.0
-
-live-pagefind:	html
-	${PAGEFIND} --serve
+live-html:	pagefind
+	sphinx-autobuild . _build -j auto -n $(O) --host 0.0.0.0 -Dhtml_extra_path=_redirects,_pagefind
 
 html-strict:
 	sphinx-build -M html . _build -W -j auto -n $(O)
-	${PAGEFIND}
 
 minify:
 	minify _static/webserver-v1.js > _static/webserver-v1.min.js
@@ -43,7 +43,9 @@ api:
 
 net-html:
 	sphinx-build -M html . _build -j auto -n $(O)
+	mkdir -p _pagefind/pagefind
 	${NET_PAGEFIND}
+	sphinx-build -M html . _build -j auto -n $(O) -Dhtml_extra_path=_redirects,_pagefind
 
 netlify-api: netlify-dependencies
 	mkdir -p _build/html/api
@@ -60,9 +62,9 @@ netlify-dependencies: pagefind-binary
 
 pagefind-binary:
 	mkdir -p ../pagefindbin
-	curl -o pagefind-v$(PAGEFIND_VERSION)-x86_64-unknown-linux-musl.tar.gz https://github.com/CloudCannon/pagefind/releases/download/v$(PAGEFIND_VERSION)/pagefind-v$(PAGEFIND_VERSION)-x86_64-unknown-linux-musl.tar.gz -L
-	tar xzf pagefind-v$(PAGEFIND_VERSION)-x86_64-unknown-linux-musl.tar.gz
-	rm pagefind-v$(PAGEFIND_VERSION)-x86_64-unknown-linux-musl.tar.gz
+	curl -o pagefind.tar.gz https://github.com/CloudCannon/pagefind/releases/download/v$(PAGEFIND_VERSION)/pagefind-v$(PAGEFIND_VERSION)-x86_64-unknown-linux-musl.tar.gz -L
+	tar xzf pagefind.tar.gz
+	rm pagefind.tar.gz
 	mv pagefind ${NET_PAGEFIND}
 
 
@@ -74,6 +76,10 @@ netlify: netlify-dependencies netlify-api net-html copy-svg2png
 lint: html-strict
 	python3 lint.py
 
+clean:
+	rm -rf _pagefind/
+	sphinx-build -M clean . _build $(O)
+
 # Catch-all target: route all unknown targets to Sphinx using the new
 # "make mode" option.  $(O) is meant as a shortcut for $(SPHINXOPTS).
 %: Makefile

pagefind.yml

@@ -1,4 +1,5 @@
 site: _build/html
+output_path: _pagefind/pagefind
 exclude_selectors:
   - "a.headerlink"
   - ".toctree-wrapper"