omnivore/packages/web/pages/help/search.tsx

/* eslint-disable @next/next/no-img-element */
import { Box } from '../../components/elements/LayoutPrimitives'
import { SettingsLayout } from '../../components/templates/SettingsLayout'

export default function Search(): JSX.Element {
  return (
    <SettingsLayout>
      <Box
        css={{
          m: '42px',
          maxWidth: '640px',
          color: '$grayText',
          img: {
            maxWidth: '85%',
          },
          '@smDown': {
            m: '16px',
            maxWidth: '85%',
            alignSelf: 'center',
          },
        }}
      >
        <h1>Search</h1>
        <hr />
        <p>
          Omnivore uses search to filter items in your library. You can use a
          simple keyword search or our advanced search syntax to find items.
        </p>
        <ul>
          <li>
            <a href="#text">Searching for text</a>
          </li>
          <li>
            <a href="#label">Filtering by label</a>
          </li>
          <li>
            <a href="#in">Filtering by archive status</a>
          </li>
          <li>
            <a href="#is">Filtering by read state</a>
          </li>
          <li>
            <a href="#type">Filtering by type</a>
          </li>
          <li>
            <a href="#has">Finding highlights</a>
          </li>
          <li>
            <a href="#dates">Filtering by save/publish dates</a>
          </li>
          <li>
            <a href="#sort">Sorting</a>
          </li>
        </ul>

        <h2 id="text">Searching for text</h2>
        <p>
          Omnivore will perform full text search across library item&apos;s
          content, title, description, and site by default. You can search for
          specific terms by quoting your terms. By default all results that
          match your search will be returned in the order they were saved. To
          change your search to relevance use the <code>sort:score</code>{' '}
          parameter.
        </p>

        <h2 id="label">Filtering by label</h2>
        <p>
          You can filter your search based on labels using AND and OR clauses.
          You can also negate a label search to find pages that do not have a
          certain label.
        </p>

        <p>Some examples:</p>

        <ul>
          <li>
            label:Newsletter finds all pages that have the label Newsletter
          </li>
          <li>
            label:Cooking,Fitness finds all your pages with either the Cooking
            or Fitness labels
          </li>
          <li>
            label:Newsletter label:Surfing finds all pages with both the
            Newsletter and Surfing labels
          </li>
          <li>
            label:Coding -label:News finds all pages with the Coding label that
            do not have the News label
          </li>
        </ul>

        <h2 id="in">Filtering by archive status</h2>
        <p>
          The <code>in:</code> filter is used to filter search by archive
          status. The options are:
        </p>

        <ul>
          <li>
            <code>in:inbox</code> (the default): show unarchived items
          </li>
          <li>
            <code>in:archive</code>: show archived items
          </li>
          <li>
            <code>in:all</code>: Show all items regardless of archive state
          </li>
        </ul>

        <h2 id="is">Filtering by read state</h2>
        <p>
          The <code>is:</code> filter is used to filter search by read state.
          Note that in Omnivore &apos;read&apos; means fully read, not just
          opened.
        </p>
        <p>
          The <code>is:</code> filter options are:{' '}
        </p>
        <ul>
          <li>
            <code>is:read</code>: Show only items that are fully read
          </li>
          <li>
            <code>is:unread</code> (the default): show unread items
          </li>
        </ul>

        <h2 id="type">Filtering by type</h2>
        <p>
          The <code>type:</code> filter is used to filter search by type.
        </p>
        <ul>
          <li>
            <code>type:article</code>: Show only articles
          </li>
          <li>
            <code>type:file</code>: Show only files
          </li>
          <li>
            <code>type:pdf</code>: Show only PDFs
          </li>
          <li>
            <code>type:highlights</code>: Show your highlights
          </li>
        </ul>

        <h2 id="has">Finding highlights</h2>
        <p>
          You can find your highlights by using the <code>type:highlights</code>{' '}
          filter or find saved items with highlights using the{' '}
          <code>has:highlights</code> filter.
        </p>

        <h2 id="dates">Filtering by save/publish dates</h2>
        <p>
          You can filter your searches based on the time they were saved or
          published using the
          <code>saved:</code> and <code>published:</code> filters. These filters
          take two dates to create a date range. The <code>*</code> wildcard
          will accept any date.
        </p>
        <p>For Example:</p>
        <ul>
          <li>
            <code>saved:2022-04-21..*</code> All items saved since 2022-04-21
          </li>
          <li>
            <code>published:2020-01-01..2022-02-02</code> All items published
            between 2020-01-01 and 2022-02-02
          </li>
          <li>
            <code>published:*..2020-01-01</code> All items published before
            2020-01-01
          </li>
        </ul>

        <h2 id="sort">Sorting</h2>
        <p>
          By default all search results in Omnivore are sorted by saved date.
          This puts the most recently saved items at the top of your library.
          You can use sort options to change the library order:
        </p>
        <ul>
          <li>
            <code>sort:saved</code>: Sort by saved date
          </li>
          <li>
            <code>sort:updated</code>: Sort by time the item was updated, for
            example having a label or highlight added.
          </li>
          <li>
            <code>sort:score</code>: Sort by query term relevance.
          </li>
        </ul>
      </Box>
      <Box css={{ height: '120px' }} />
    </SettingsLayout>
  )
}