Merge branch '6-dev' into add-buildout.coredev-docs

Author: stevepiercy

.github/CONTRIBUTING.md

@@ -1 +1 @@
-See our [contributing guidelines](https://6.dev-docs.plone.org/contributing/index.html).
+See our [contributing guidelines](https://6.docs.plone.org/contributing/index.html).

.github/PULL_REQUEST_TEMPLATE/pull_request_template.md

@@ -2,9 +2,10 @@ Thank you for your contribution to the Plone Documentation.
 
 Before submitting this pull request, please make sure you follow our guides:
 
-- [ ] [Contributing to Plone Documentation](https://6.dev-docs.plone.org/contributing/index.html)
-- [ ] [Building and Checking the Quality of Documentation](https://6.dev-docs.plone.org/contributing/setup-build.html)
-- [ ] [General Guide to Writing Documentation](https://6.dev-docs.plone.org/contributing/writing-docs-guide.html)
+-   [Contributing to Plone documentation](https://6.docs.plone.org/contributing/index.html)
+-   [Building and checking the quality of documentation](https://6.docs.plone.org/contributing/setup-build.html)
+-   [Authors guide](https://6.docs.plone.org/contributing/authors.html)
+-   [MyST reference](https://6.docs.plone.org/contributing/myst-reference.html)
 
 ## Issue Number
 

.github/workflows/build_deploy.yml

@@ -9,13 +9,14 @@ jobs:
   build_deploy:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
-
-      - name: Set up Python ${{ matrix.python-version }}
-        uses: actions/setup-python@v2
+      - uses: actions/checkout@v3
+      - name: Setup Graphviz
+        uses: ts-graphviz/setup-graphviz@v1
+      - name: Set up Python 3.10
+        uses: actions/setup-python@v4
         with:
-          python-version: "3.10"
-
+          python-version: '3.10'
+          cache: 'pip'
       - name: Install dependencies
         run: |
           pip install -q -r requirements-initial.txt
@@ -32,31 +33,34 @@ jobs:
         run: make deploy
 
       # node setup
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+      - name: Use Node.js 16
+        uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node-version }}
-
+          node-version: '16'
+      - name: Install Yarn
+        run: npm install -g yarn
       # node cache
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         working-directory: submodules/volto
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - uses: actions/cache@v1
+        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
+      - uses: actions/cache@v3
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-yarn-
 
-
       - name: StoryBook build
-        run: cd submodules/volto && yarn && yarn build-storybook -o ../../_build/html/storybook
+        run: |
+          cd submodules/volto 
+          yarn install --immutable 
+          yarn build-storybook -o ../../_build/html/storybook
 
       - name: Deploy to server
         id: deploy
-        uses: Pendect/action-rsyncer@v1.1.0
+        uses: Pendect/action-rsyncer@v2.0.0
         env:
           DEPLOY_KEY: ${{secrets.DEPLOY_KEY_DOCS}}
         with:

Makefile

@@ -62,7 +62,7 @@ docs/volto:
 	@echo "Documentation of volto initialized."
 
 .PHONY: deps
-deps: bin/python docs/volto docs/plone.restapi docs/plone.api ## Create Python virtual environment, install requirements, initialize or update the volto, plone.restapi, and plone.api submodules, and finally create symlinks to the source files.
+deps: bin/python docs/volto docs/plone.restapi docs/plone.api  ## Create Python virtual environment, install requirements, initialize or update the volto, plone.restapi, and plone.api submodules, and finally create symlinks to the source files.
 
 
 .PHONY: html

docs/_static/copy.svg

@@ -58,6 +58,11 @@ img.figure,
   margin-bottom: 1rem;
 }
 
+img.inline {
+  margin: 0;
+  height: 1em;
+}
+
 span.linenos {
   padding-right: 1em;
 }
@@ -184,6 +189,25 @@ div.admonition.admonition-todo>.admonition-title::before {
   display: block;
 }
 
+#search-form:focus-within #shortcut-page,
+.bd-search:focus-within #shortcut {
+  display: none;
+}
+
+#shortcut-page.input-group-text {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+input#q {
+  border-radius: .25rem 0 0 .25rem;
+}
+
+.form-control:focus {
+  box-shadow: none;
+  border-width: 2px;
+}
+
 ul.search {
   margin-left: 0;
 }
@@ -234,6 +258,45 @@ ul.search li p.context {
   margin-left: 0;
 }
 
+/* Search form sidebar */
+
+.bd-search {
+  font-size: .8rem;
+}
+
+.bd-search:focus-within #search-input {
+  border-radius: .25rem;
+}
+
+#shortcut.input-group-text {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.bd-search input,
+.bd-search .input-group-text {
+  font-size: .8rem;
+  padding-left: .5em;
+}
+
+input#search-input {
+  padding-left: 2.1875rem;
+  border-radius: .25rem 0 0 .25rem;
+}
+
+.search-icon {
+  position: absolute;
+  color: #a4a6a7;
+  left: .625rem;
+  z-index: 100;
+  align-self: center;
+}
+
+.input-group-text kbd {
+  padding: 0rem 0.4rem;
+  font-size: 135%;
+}
+
 .pathseparator {
   padding: 0 0.7rem;
 }

docs/_static/custom.css

@@ -0,0 +1,35 @@
+/**
+ * Add shortcut `ctrl+k` to focus on search field
+ */
+
+ $(document).ready(() => {
+    if (window.location.pathname === '/search.html') {
+        $('form.bd-search .input-group').hide(); // Hide Sidebar Search field
+
+        $(document).keydown(function(event) {
+            if ((event.ctrlKey || event.metaKey) && event.key == "k") {
+                event.preventDefault();
+                $('#q').focus();
+            }
+        });
+    } else {
+        $(document).keydown(function(event) {
+            if ((event.ctrlKey || event.metaKey) && event.key == "k") {
+                event.preventDefault();
+                $('#search-input').focus();
+            }
+        });
+    }
+    
+    // if OS isn't Mac change visual indication of search field
+    if (navigator.platform.indexOf('Mac') === -1) {
+        $('#search-shortcut').html("^");
+        $('#search-page-shortcut').html("^");
+    }
+    
+});
+
+function onReset() {
+    $('#search-form').trigger('reset');
+    $('#search-form').trigger('submit');
+}

docs/_static/search_shortcut.js

@@ -342,7 +342,10 @@ var Search = {
       else {
         Search.stopPulse();
         Search.title.text(_('Search Results'));
-        if (!resultCount)
+        if (query === '') {
+          Search.status.text(_('No query, no results.'));
+        }
+        else if (!resultCount)
           Search.status.text(_('Your search did not match any documents. Please make sure that all words are spelled correctly. Searching for multiple words only shows matches that contain all words.'));
         else
             Search.status.text(_('Found %s page(s) matching the search query.').replace('%s', resultCount));

docs/_static/searchtools.js

@@ -0,0 +1,19 @@
+<form class="bd-search d-flex align-items-center" action="{{ pathto('search') }}" method="get">
+  <div class="input-group">
+    <label for="q" class="sr-only">Search string
+    </label>
+    <i class="fa fa-search fa-lg search-icon" aria-hidden="true"></i>
+    <input
+    type="search" name="q" id="search-input"
+    class="form-control"
+    placeholder="{{ _(theme_search_bar_text) }}"
+    aria-labelledby="{{ _(theme_search_bar_text) }}"
+    value="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+    />
+    <div class="input-group-append">
+      <span class="input-group-text" id="shortcut">
+        <kbd id="search-shortcut">⌘</kbd>&nbsp;<kbd>K</kbd>
+      </span>
+    </div>
+  </div>
+</form>

docs/_templates/search-field.html

@@ -48,20 +48,29 @@ <h1 id="search-documentation">{{ _('Search') }}</h1>
       >
       <div class="row">
         <div class="input-group col-xl-8 mb-2">
+          <label for="q" class="sr-only">Search string
+          </label>
           <input
-            type="text" name="q" id="q"
-            class="form-control"
-            placeholder="Search the docs…"
-            aria-labelledby="search-documentation" value="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"/>
-          <label for="q" class="sr-only">Search string</label>
+          type="search" name="q" id="q"
+          class="form-control"
+          placeholder="{{ _(theme_search_bar_text) }}"
+          aria-labelledby="{{ _(theme_search_bar_text) }}"
+          value="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+          />
           <div class="input-group-append">
-            <button type="submit" class="btn btn-primary">{{ _('search') }}</button>
+            <span class="input-group-text" id="shortcut-page">
+              <kbd id="search-page-shortcut">⌘</kbd>&nbsp;<kbd>K</kbd>
+            </span>
           </div>
           <div class="input-group-append">
             <button
-              type="button"
-              class="clear_search btn btn-secondary"
-            >{{ _('reset') }}</button>
+            type="button"
+            onclick="onReset()"
+            class="btn btn-danger"
+            ><i class="fas fa-times"></i></button>
+          </div>
+          <div class="input-group-append">
+            <button type="submit" class="btn btn-primary"><i class="fas fa-search fa-lg" aria-hidden="true"></i></button>
           </div>
         </div>
       </div>
@@ -70,7 +79,7 @@ <h1 id="search-documentation">{{ _('Search') }}</h1>
         <label for="doc_section" class="col sr-only">Filter by section</label>
         <div class="col">
           <div class="form-check">
-            <input class="form-check-input" type="radio" name="doc_section" id="doc_section_all" value="all">
+            <input class="form-check-input" type="radio" name="doc_section" id="doc_section_all" value="all" checked>
             <label class="form-check-label" for="doc_section_all">
               All Documentation
             </label>