Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Can pagefind pull its data from a json index file? #277

Closed
Jieiku opened this issue Apr 18, 2023 · 8 comments
Closed

Can pagefind pull its data from a json index file? #277

Jieiku opened this issue Apr 18, 2023 · 8 comments

Comments

@Jieiku
Copy link

Jieiku commented Apr 18, 2023 •
edited
Loading

I ask because in many static site generators it would be rather simple to generate an index during site build that contains the data that you wish pagefind to index.

I do something similar for generating the json for tinysearch in my zola site:

https://github.com/Jieiku/abridge/blob/master/templates/tinysearch_json.html

When I issue a zola build, the above linked template generates json data, I then use the tinysearch executable to consume that json data and generate the real index that tinysearch will use.

So basically the json index that I generate from zola is an intermediate index.

The demo for that search is here: https://jieiku.github.io/abridge-tinysearch/

tinysearch uses bloom filters so in the below json I also have a 'meta' field which is meant to be the data to include as a description of the indexed link. For pagefind you would likely only have title, url, body

this is what that intermediate json data looks like:

[{
"title": "Abridge Zola Theme",
"url": "https://abridge.netlify.app/overview-abridge/",
"meta": "Abridge is a fast and lightweight Zola theme using semantic html, only ~6kb css before svg icons and syntax highlighting, no mandatory JS, and perfect…",
"body": "Abridge is a fast and lightweight Zola theme using semantic html, only ~6kb css before svg icons and syntax highlighting, no mandatory JS, and perfect Lighthouse, YellowLabTools, and Observatory scores. Here is a Zola Themes Benchmarks Page.\n\nFor quick setup copy the config.toml from the abridge theme into the root of your zola site, this will give you a base configuration with all config values used.\nYou can then edit or comment out the values in this file as necessary.\nYou should also uncomment out the line #theme = "abridge" in your root zola config.toml file. This tells your root zola site to use the abridge theme in the themes folder.\nYou can set the number of items that appear on the home page by editing themes\\abridge\\content\\_index.md file and adjusting paginate_by = 5\nYou can set the overal page width by editing themes\\abridge\\sass\\_variables.scss file, and adjusting these two lines:\n$mw:50% !default;// max-width\n$mb:1200px !default;// value at which to switch from fluid layout to using max-width\n\n"
},{
"title": "Code Blocks and Themes",
"url": "https://abridge.netlify.app/overview-code-blocks/",
"meta": "This article shows various Code Blocks allowing to easily compare sublime themes.\n",
"body": "This article shows various Code Blocks allowing to easily compare sublime themes.\nCode Blocks\nCode blocks.. ❤️ with automatic syntax highlighting ✨‍\nSee the docs for options.\nInline Code block\nIf we want, we can also specify inline code which is useful for the small stuff.\nrust\n1//! jelly-actix-web-starter - A starter template for actix-web projects that feels very Django-esque. Avoid the boring stuff and move faster.\n2\n3use jelly::actix_web;\n4use mainlib;\n5use std::io;\n6\n7#[actix_web::main]\n8async fn main() -> io::Result<()> {\n9    mainlib::main().await\n10}\n11\n12let context = Context::new();\n\nTOML\n1base_url = "https://abridge.netlify.app/"\n2title = "Abridge"\n3description = "Abridge is a fast and lightweight Zola theme using semantic html, abridge.css class-light CSS, and No Mandatory JS."\n4default_language = "en"\n5#theme = "abridge"\n6\n7build_search_index = true\n8minify_html = false\n9feed_filename = "atom.xml"\n10taxonomies = [\n11    {name = "categories", feed = true},\n12    {name = "tags", feed = true},\n13]\n\nhtml\n<!doctype html>\n<html lang="en">\n<head>\n  <meta charset="utf-8">\n  <title>Example HTML5 Document</title>\n</head>\n<body>\n  <!--Main Content Area-->\n  <p>Test</p>\n</body>\n</html>\n\njavascript\nfunction closeSearch() {//close the search displaying the regular page.\n    const e = document.querySelector("main");\n    e.innerHTML = window.main\n}\n\nfunction goSearch() {// on enter key or search icon click display results to the page.\n    const e = document.querySelector("main");\n    window.main || (window.main = e.innerHTML);\n    var t = document.getElementById("suggestions"),\n        n = ((ResultsClone = t.cloneNode(!0)).id = "results", document.createElement("div")),\n        o = '<h2><button type="button" title="Close Search" onclick="closeSearch()"><i class="svgs x"></i></button> Results For: '.concat(document.getElementById("searchinput").value, "</h2>");\n    return n.innerHTML = o, ResultsClone.insertBefore(n, ResultsClone.firstChild), e.innerHTML = ResultsClone.outerHTML, t.innerHTML = "", document.getElementById("searchinput").value = "", !1\n}! function() {\n  // search function code goes here\n}\n\nphp\n<?php\n/**\n * Postfix Admin\n */\nrequire_once('common.php');\n$CONF = Config::getInstance()->getAll();\n\nif ($_SERVER['REQUEST_METHOD'] == "POST") {\n    if (!isset($_SESSION['PFA_token'])) {\n        die("Invalid token (session timeout; refresh the page and try again?)");\n    }\n    $fUsername = trim(safepost('fUsername'));\n    if ($lang != check_language(false)) { # only set cookie if language selection was changed\n        setcookie('lang', $lang, time() + 60*60*24*30); # language cookie, lifetime 30 days\n    }\n}\n\n$_SESSION['PFA_token'] = md5(uniqid("pfa" . rand(), true));\n\n/* vim: set expandtab softtabstop=4 tabstop=4 shiftwidth=4: */\n\njson\n{\n    "name": "Abridge Zola Theme",\n    "short_name": "Abridge",\n    "description": "Fast & Lightweight Zola Theme",\n    "start_url": "/index.html",\n    "scope": "/",\n    "background_color": "#111111",\n    "theme_color": "#222222",\n    "display": "standalone",\n    "icons": [\n        {\n            "src": "/android-chrome-192x192.png",\n            "sizes": "192x192",\n            "type": "image/png"\n        },\n        {\n            "src": "/android-chrome-512x512.png",\n            "sizes": "512x512",\n            "type": "image/png"\n        },\n        {\n            "src": "/android-chrome-192x192m.png",\n            "sizes": "192x192",\n            "type": "image/png",\n            "purpose": "maskable"\n        }\n    ]\n}\n\nSQL\n-- jelly-actix-web-starter - Creates an accounts table, along with some associated helpers.\n\ncreate or replace function update_timestamp() returns trigger as $$\nbegin\n    new.updated = now();\n    return new;\nend;\n$$ language 'plpgsql';\n\ncreate table if not exists accounts (\n    id serial primary key,\n    name text not null,\n    email text not null unique,\n    password text not null,\n    profile jsonb not null default '{}',\n    plan integer not null default 0,\n    is_active boolean not null default true,\n    is_admin boolean not null default false,\n    has_verified_email boolean not null default false,\n    last_login timestamp with time zone,\n    created timestamp with time zone not null default now(),\n    updated timestamp with time zone not null default now()\n);\n\ncreate unique index accounts_unique_lower_email_idx on accounts (lower(email));\n\ncreate trigger user_updated before insert or update on accounts\nfor each row execute procedure update_timestamp();\n\nLua\nfunction square(x)\n    return x * x\nend\n\nprint(square(2)) -- prints '4'\n\nfunction getPlayerInformation()\n   playerName = UnitName("player")\n   playerLevel = UnitLevel("player")\n   specId, specName = GetSpecializationInfo(GetSpecialization())\n\n   return "Hey, I'm " .. playerName .. " (Level " .. playerLevel .. "). I'm currently in spec " .. specName .. "."\nend\n\nprint(getPlayerInformation())\n\nC\n#include <stdio.h>\nint main() {\n    int a;\n    /* actual initialization */\n    a = 10;\n    printf("Hello, World!");\n    return 0;\n}\n\nC++\n// Your First C++ Program\n\n#include <iostream>\n\nint main() {\n    int a;\n    /* actual initialization */\n    a = 10;\n    std::cout << "Hello World!";\n    return 0;\n}\n\nGo\npackage main\n\nimport "fmt"\n\nfunc main() {\n    var myvariable1 = 20\n    var myvariable2 = "hello world"\n    fmt.Println("hello world")\n}\n\nPython\n#!/usr/bin/env python3\nimport smtplib, socket\nfrom influxdb import InfluxDBClient\n\nwhile True:\n    send = 1\n    later = time.time() + 25200\n    iso = time.ctime(later)\n    tempF = round(bme280.temperature * 1.8 + 29, 3) #C to F formula is +32, difference is to correct bme280 temperature offset\n    humidity = round(bme280.humidity, 3)\n    pressure = round(bme280.pressure, 3)\n    # serialize data as JSON\n    data = [\n        {\n          "measurement": measurement,\n              "tags": {\n                  "location": location,\n              },\n              "time": iso,\n              "fields": {\n                  "temperature" : tempF,\n                  "humidity": humidity,\n                  "pressure": pressure\n                               }\n          }\n        ]\n    # Send the JSON data to InfluxDB\n    try:\n      client.write_points(data)\n    except socket.error as e:\n      print("Could Not Connect to InfluxDB!")\n    if tempF > 90 and humidity > 55:\n      emailSubject = "Humidity>55:  " + str(int(humidity)) + "%H  , Temperature>90:  " + str(int(tempF)) + "F"\n      emailContent = 'Humidity:  ' + str(int(humidity)) + '%H  , Temperature:  ' + str(int(tempF)) + 'F  <a href="https://metrics.example.com">Dashboard</a>'\n    elif humidity > 55:\n      emailSubject = "Humidity>55:  " + str(int(humidity)) + "%H"\n      emailContent = 'Humidity:  ' + str(int(humidity)) + '%H  , Temperature:  ' + str(int(tempF)) + 'F  <a href="https://metrics.example.com">Dashboard</a>'\n    elif tempF > 90:\n      emailSubject = "Temperature>90:  " + str(int(tempF)) + "F"\n      emailContent = 'Humidity:  ' + str(int(humidity)) + '%H  , Temperature:  ' + str(int(tempF)) + 'F  <a href="https://metrics.example.com">Dashboard</a>'\n    else:\n      send = 0\n    if send == 1:\n      try:\n        if time.time() > lastEmailTime or abs(lastTemp-int(tempF)) > 1:\n          lastEmailTime = time.time()+emailInterval\n          lastTemp = int(tempF)\n          sender.sendmail('jake@example.com', emailSubject, emailContent)\n      except socket.error as e:\n        print("Could Not Connect to SMTP server!")\n    time.sleep(interval)\n\n"
},{
"title": "Markdown and Style Guide",
"url": "https://abridge.netlify.app/overview-markdown-and-style/",
"meta": "This article offers a sample of basic Markdown syntax that can be used in Zola content files, also it shows if basic HTML elements are decorated with …",
"body": "This article offers a sample of basic Markdown syntax that can be used in Zola content files, also it shows if basic HTML elements are decorated with CSS in a Zola theme.\nHeadings\nThe following HTML <h1>—<h6> elements represent six levels of section\nheadings. <h1> is the highest section level while <h6> is the lowest.\nH1\nH2\nH3\nH4\nH5\nH6\nParagraph\nXerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum,\nvoluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma\ndolestendit peritin re plis aut quas inctum laceat est volestemque commosa as\ncus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin\nporecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur?\nQuiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit\nut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda\nveliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore\neost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata\ntiustia prat.\nItatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne\nsapicia is sinveli squiatum, core et que aut hariosam ex eat.\nBlockquotes\nThe blockquote element represents content that is quoted from another source,\noptionally with a citation which must be within a footer or cite element,\nand optionally with in-line changes such as annotations and abbreviations.\nBlockquote no attribution\n\nTiam, ad mint andaepu dandae nostion secatur sequo quae.\nNote that you can use Markdown syntax within a blockquote.\n\nBlockquote with attribution\n\nDon't communicate by sharing memory, share memory by communicating.\n— Rob Pike1\n\n\nAll men by nature desire to know.\n― Aristotle2\n\n\nPower comes in response to a need, not a desire.\n— Goku\n\nTables\nTables aren't part of the core Markdown spec, but Zola supports them\nout-of-the-box.\nNameAge\nAlice23\nBob27\nCody33\nJohn59\nKerry23\n\nTable with Inline Markdown\nItalicsBoldCodeStrikeThrough\nitalicsboldcodestrikethrough\n\nLarge table within figure tag\nSurround very Large tables with <figure></figure> so they can scroll horizontally.\n\nManufacturerVolkswagenToyotaFordHondaChevroletBMWHyundaiAudiNissanKiaMercedesTeslaMitsubishiSuzukiVolvoSubaruMazdaJaguarBuickLexusGMCPorscheCadillac\nRevenue $B$254$249$127$124$123$113$88$83$74$61$55$54$38$31$30$28$27$22$21$19$17$16$12\n\n\n*revenue values found on search engine and not verified, for figure scroller table demonstration purposes only.*\nFoldable Text\n\n    Title 1\n    IT'S A SECRET TO EVERYBODY.\n\n\n    Title 2\n    Stay awhile, and listen!\n\nCode Blocks\nCode blocks.. ❤️ with automatic syntax highlighting ✨‍\nSee the docs for options.\nCode block with backticks\n<!doctype html>\n<html lang="en">\n<head>\n  <meta charset="utf-8">\n  <title>Example HTML5 Document</title>\n</head>\n<body>\n  <p>Test</p>\n</body>\n</html>\n\nLine Numbers, Highlighting\n1<!doctype html>\n2<html lang="en">\n3<head>\n4  <meta charset="utf-8">\n5  <title>Example HTML5 Document</title>\n6</head>\n7<body>\n8  <p>Test</p>\n9</body>\n10</html>\n\nInline Code block\nIf we want, we can also specify inline code which is useful for the small stuff.\nList Types\nOrdered List\n\nFirst item\nSecond item\nThird item\n\nUnordered List\n\nList item\nAnother item\nAnd another item\n\nNested list\n\nFruit\n\nApple\nOrange\nBanana\n\n\nDairy\n\nMilk\nCheese\n\n\n\nOther Elements — abbr, sub, sup, kbd, mark, link\nGIF is a bitmap image format.\nH2O\nXn + Yn = Zn\nPress CTRL+ALT+Delete to end the\nsession.\nMost salamanders are nocturnal, and hunt for insects, worms, and\nother small creatures.\n\n\n1\nThe above quote is excerpted from Rob Pike's talk\nduring Gopherfest, November 18, 2015.\n\n2\nThe quote is the first sentence of Aristotle's Metaphysics.\n\nNavs\nSite primary menu is created by nesting the nav under a header tag. Refer to the top of this site for an example.\nIf the nav tag is under the main tag instead of the header tag then the links will have a border:\n\n    \n        \n            < Previous\n            Next >\n        \n    \n\nForms\n\n    Name\n        \n    \n    Email Address\n        \n    \n    Message\n        \n    \n    \n    Send\n    \n    \n    Fruit\n    \n        Select a fruit…\n        Banana\n        Watermelon\n        Apple\n        Orange\n        Mango\n    \n    \n    \n        Size\n        \n        \n        Small\n        \n        \n        \n        Medium\n        \n        \n        \n        Large\n        \n        \n        \n        Extra Large\n        \n    \n    \n    \n        \n        \n        I agree to the Terms and Conditions\n        \n        \n        \n        I agree to share my information with partners\n        \n    \n    \n    \n        \n        \n        Publish on my profile\n        \n        \n        \n        Publish on my profile my accomplishments\n        \n    \n    \n    \n    \n    \n    File browser\n    \n    \n    \n    Range slider\n    \n    \n    \n    Date\n    \n    \n    \n    Time\n    \n    \n    \n    Color\n    \n    \n\n"
},{
"title": "Image Shortcodes",
"url": "https://abridge.netlify.app/overview-images/",
"meta": "This post covers the imghover and img shortcodes. Images can also be embedded directly using markdown ![Ferris](ferris.svg), but it is better to use a…",
"body": "This post covers the imghover and img shortcodes. Images can also be embedded directly using markdown ![Ferris](ferris.svg), but it is better to use a shortcode so you can explicitly set the width and height, this will help prevent content layout shift which improves user experience and the google lighthouse score.\nimg Shortcode\n\nsrc is the path and filename of the image. (mandatory)\nclass sets a class for the image. (optional)\nalt sets the alt note for the image. (recommended for google lighthouse)\nw is the width of the image. (recommended for google lighthouse)\nh is the height of the image. (recommended for google lighthouse)\n\nUsage (same path)\n{{ img(src="ferris-happy.svg" alt="Ferris is Happy" w=600 h=400) }}\n\nOutput\n \n<img src="ferris-happy.svg" alt="Ferris is Happy" width="600" height="400" />\n\n\n \n\nUsage (relative path ./)\n{{ img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" w=600 h=400) }}\n\nOutput\n \n<img src="img/ferris-gesture.svg" alt="Ferris says Hello" width="600" height="400" />\n\n\n \n\nUsage (root path /)\n{{ img(src="/overview-rich-content/ferris.svg" alt="Ferris the Rustacean" w=600 h=400) }}\n\nOutput\n \n<img src="https://abridge.netlify.app/overview-rich-content/ferris.svg" alt="Ferris the Rustacean" width="600" height="400" />\n\n\n \n\nSVG image directly in code:\n<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 489" width="600" height="489"><g fill="#8f1f1d"><path d="M70 324c1 3 3 4 6 4l24 4 2 5-10 20v5l7 4 24-1 4 4-7 21c0 2 0 4 3 6 1 2 4 2 7 2l24-5 4 4-1 22c-1 2 0 4 3 5h6l23-8 6 3 4 22c0 2 1 3 3 4h7l21-13 6 2 8 20 5 5c3 0 5 0 7-2l18-15h5l13 18c1 2 3 4 6 4l5-3 14-18h6l17 16c1 1 4 2 6 1 3 0 5-1 6-3l9-21 6-1 19 14h7c3 0 5-3 5-5l4-21 6-2 22 9 7-1c2-1 3-2 3-5v-21l5-4 24 6c3 0 5 0 6-2 2-2 3-4 2-6l-4-21 3-5 24 2c4 0 6 0 7-3v-5l-9-21 3-5 25-2 5-5-1-5-14-18c0-1-1-19-12-33v-1c-26-36-106-64-201-65-100-2-184 26-206 64-10 10-12 26-11 26l-15 17c-1 3-2 5-1 7z"/><path d="M565 247c-1-3-12-2-14-3l-38 1-4-7 26-38c1-2 7-7 6-9-3-3-12 1-14 1l-39 7-4-6 22-49c0-3 7-15 5-18-2-2-11 6-13 6l-43 28-4-5 11-43c0-3 7-18 5-19-2-2-9 5-12 6l-38 30-5-4 9-51c0-3 3-18 1-19s-15 13-17 14l-30 38-6-3-3-56c0-3 0-14-3-14-3-1-5 8-8 11l-25 50-7-1-13-57c-1-3-2-12-4-12-4 0-5 10-7 13l-15 56-7 1-22-52c-1-2-4-12-7-12-3 1-2 9-3 12l-7 61-6 3-19-27c-3-1-15-19-18-18-2 1 0 21-1 23l1 40-6 4-36-35c-3-1-7-7-10-5-2 2 0 10 0 13l13 53-4 5-41-26c-2-1-10-7-12-4-2 2 3 4 3 7l22 56-5 6-65-22c-3-1-10-5-12-1-1 2 5 6 6 9l49 53-3 7-47-6c-3 0-9-1-11 1-1 4 6 7 7 9l36 40a116 116 0 0 0 14 46c27 50 110 87 209 87 105 0 193-41 214-95 11-15 13-37 12-38l29-31c2-4 9-9 8-11z"/><path d="m99 289-67 10c-13 3-5 5 0 6 14 2 84 3 85 4zm402 3 67 10c13 4 5 6 0 6-14 2-84 5-86 5z"/></g><path d="M227 293s-24-26-47 0c0 0-18 35 0 52 0 0 30 24 47 0 0 0 21-20 0-52z"/><path fill="#fff" d="M200 302c0 11 6 19 14 19 7 0 12-8 12-19 0-10-5-18-12-18-8 0-14 8-14 18z"/><path d="M360 283s-40-17-52 22c0 0-11 47 33 49 0 0 58-10 19-71z"/><path fill="#fff" d="M339 299c0 10 7 20 14 20 8 0 14-10 14-20s-6-18-14-18c-7 0-14 8-14 18z"/></svg>\n\n\nimghover Shortcode\nThe first image in the src array is the one compared to all the others.\nWhen you hover your mouse over an image it will display the image to compare.\nThis can be used to compare only one image with another by passing only two src in the array.\n\nsrc is an array of paths and filenames for the images. (mandatory)\nw is the width of the image.\nh is the height of the image.\np is the percent size that you want the image to use on the page. (50 is the default)\n\nw and h are used only to calculate the aspect ratio, overall size is set by p\nUsage (same path)\n{{ imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) }}\n\nOutput\n  \n    <div id="same-ferris-gesture"><b>same-ferris-gesture on hover</b></div>\n    <div id="same-ferris-gestureimage" title="same-ferris-gesture"> </div> \n    <div id="same-ferris-happy"><b>same-ferris-happy on hover</b></div>\n    <div id="same-ferris-happyimage" title="same-ferris-happy"> </div>\n\n<style>  \n      #same-ferris-gestureimage {\n        background-image: url('ferris.svg');\n        background-size: contain;\n        background-repeat: no-repeat;\n        width: 45%;\n        height: 0;\n        padding-top: 30%;\n\n      }\n      #same-ferris-gestureimage:hover {\n        background-image: url('ferris-gesture.svg');\n      } \n      #same-ferris-happyimage {\n        background-image: url('ferris.svg');\n        background-size: contain;\n        background-repeat: no-repeat;\n        width: 45%;\n        height: 0;\n        padding-top: 30%;\n\n      }\n      #same-ferris-happyimage:hover {\n        background-image: url('ferris-happy.svg');\n      }\n</style>\n\n\n  \n    same-ferris-gesture on hover\n      \n    same-ferris-happy on hover\n     \n\n  \n      #same-ferris-gestureimage {\n        background-image: url('ferris.svg');\n        background-size: contain;\n        background-repeat: no-repeat;\n        width: 45%;\n        height: 0;\n        padding-top: 30%;\n\n      }\n      #same-ferris-gestureimage:hover {\n        background-image: url('ferris-gesture.svg');\n      } \n      #same-ferris-happyimage {\n        background-image: url('ferris.svg');\n        background-size: contain;\n        background-repeat: no-repeat;\n        width: 45%;\n        height: 0;\n        padding-top: 30%;\n\n      }\n      #same-ferris-happyimage:hover {\n        background-image: url('ferris-happy.svg');\n      }\n\nUsage (relative path ./)\n{{ imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) }}\n\nOutput\n  \n    <div id="rel-ferris-gesture"><b>rel-ferris-gesture on hover</b></div>\n    <div id="rel-ferris-gestureimage" title="rel-ferris-gesture"> </div>\n\n<style>  \n      #rel-ferris-gestureimage {\n        background-image: url('img/ferris.svg');\n        background-size: contain;\n        background-repeat: no-repeat;\n        width: 45%;\n        height: 0;\n        padding-top: 30%;\n\n      }\n      #rel-ferris-gestureimage:hover {\n        background-image: url('img/ferris-gesture.svg');\n      }\n</style>\n\n\n  \n    rel-ferris-gesture on hover\n     \n\n  \n      #rel-ferris-gestureimage {\n        background-image: url('img/ferris.svg');\n        background-size: contain;\n        background-repeat: no-repeat;\n        width: 45%;\n        height: 0;\n        padding-top: 30%;\n\n      }\n      #rel-ferris-gestureimage:hover {\n        background-image: url('img/ferris-gesture.svg');\n      }\n\nUsage (root path /)\n{{ imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) }}\n\nOutput\n  \n    <div id="root-ferris-gesture"><b>root-ferris-gesture on hover</b></div>\n    <div id="root-ferris-gestureimage" title="root-ferris-gesture"> </div>\n\n<style>  \n      #root-ferris-gestureimage {\n        background-image: url('https://abridge.netlify.app/overview-rich-content/ferris.svg');\n        background-size: contain;\n        background-repeat: no-repeat;\n        width: 45%;\n        height: 0;\n        padding-top: 30%;\n\n      }\n      #root-ferris-gestureimage:hover {\n        background-image: url('https://abridge.netlify.app/overview-rich-content/ferris-gesture.svg');\n      }\n</style>\n\n\n  \n    root-ferris-gesture on hover\n     \n\n  \n      #root-ferris-gestureimage {\n        background-image: url('https://abridge.netlify.app/overview-rich-content/ferris.svg');\n        background-size: contain;\n        background-repeat: no-repeat;\n        width: 45%;\n        height: 0;\n        padding-top: 30%;\n\n      }\n      #root-ferris-gestureimage:hover {\n        background-image: url('https://abridge.netlify.app/overview-rich-content/ferris-gesture.svg');\n      }\n\n"
},{
"title": "Rich Content",
"url": "https://abridge.netlify.app/overview-rich-content/",
"meta": "Several custom shortcodes are included to augment CommonMark (courtesy of d3c3nt theme), in addition to those already provided by Zola. video, image, …",
"body": "Several custom shortcodes are included to augment CommonMark (courtesy of d3c3nt theme), in addition to those already provided by Zola. video, image, gif, and audio were created to help you take advantage of modern HTML elements in your writing.\nVideo\nThe video shortcode takes a sources parameter (an array of strings)\nand returns a <video> tag. Each string in the sources array should\nbe a path to a video file of a different type (webm, mp4, etc). Each\nindividual source is then converted into a <source> tag, and the\nelement is returned.\nUsage\n{{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }}\n\nOutput\n<video controls>\n  <source src="https://abridge.netlify.app/overview-rich-content/over9000_av1.mp4" type="video/mp4" />\n  <source src="https://abridge.netlify.app/overview-rich-content/over9000_vp9.webm" type="video/webm" />\n  Your browser doesn't support the video tag and/or the video formats in use here – sorry!\n</video>\n\n\n\n  \n  \n  Your browser doesn't support the video tag and/or the video formats in use here – sorry!\n\nImage\nThe image shortcode returns a <picture> tag and accepts three\nparameters: sources (an array of strings), fallback_path, and\nfallback_alt (both strings).\nEach string in the sources array should be a path to an image file of\na different type (webp, png, jpg, etc). fpath and\nfalt are used to create an <img> tag for the browser to fall\nback on if the other formats aren't yet supported, fw and fh set the width and height of the fallback\nUsage\n{{ image(sources=["over9000-960.webp", "over9000-640.webp", "over9000-400.webp"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") }}\n\nOutput\n<picture>\n  <source srcset="https://abridge.netlify.app/overview-rich-content/over9000-960.webp" type="img/webp" />\n  <source srcset="https://abridge.netlify.app/overview-rich-content/over9000-640.webp" type="img/webp" />\n  <source srcset="https://abridge.netlify.app/overview-rich-content/over9000-400.webp" type="img/webp" />\n  <img src="over9000-640.webp" alt="ITS OVER 9000!" width="640" height="480" />\n</picture>\n\n\n\n  \n  \n  \n  \n\nGIF\nThe gif shortcode is exactly the same as the video shortcode\n– it takes an array of strings called sources and returns a\n<video> tag. The only difference is in the outermost tag, which has\nfour additional properties: autoplay, loop, muted, playsinline.\nUsing the <video> tag in place of gifs allows for reduced file sizes,\nwhich is especially important in regions where internet is slower or\nless reliable.\nUsage\n{{ gif(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }}\n\nOutput\n<video autoplay loop muted playsinline>\n  <source src="https://abridge.netlify.app/overview-rich-content/over9000_av1.mp4" type="video/mp4" />\n  <source src="https://abridge.netlify.app/overview-rich-content/over9000_vp9.webm" type="video/webm" />\n  Your browser doesn't support the video tag, which I use in place of .gifs, and/or the video formats in use here – sorry!\n</video>\n\n\n\n  \n  \n  Your browser doesn't support the video tag, which I use in place of .gifs, and/or the video formats in use here – sorry!\n\nAudio\nThe audio shortcode takes a sources array of strings and returns an\n<audio> tag. Each string in the sources array should be a path to an\naudio file of a different type (ogg, mp3, flac, wav, etc).\nThe browser will play the first type it supports, so placing them in order of size smallest to largest will use the least bandwidth if that is your goal.\nUsage\n{{ audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]) }}\n\nOutput\n<audio controls>\n  <source src="https://abridge.netlify.app/overview-rich-content/over9000.ogg" type="audio/ogg" />\n  <source src="https://abridge.netlify.app/overview-rich-content/over9000.mp3" type="audio/mp3" />\n  <source src="https://abridge.netlify.app/overview-rich-content/over9000.flac" type="audio/flac" />\n  <source src="https://abridge.netlify.app/overview-rich-content/over9000.wav" type="audio/wav" />\n  Your browser doesn't support the audio tag and/or the audio formats in use here – sorry!\n</audio>\n\n\n\n  \n  \n  Your browser doesn't support the audio tag and/or the audio formats in use here – sorry!\n\n"
},{
"title": "Embedded Youtube Videos",
"url": "https://abridge.netlify.app/overview-embedded-youtube/",
"meta": "Zola has many shortcodes, and new are easily added, this example shows youtube.\n",
"body": "Zola has many shortcodes, and new are easily added, this example shows youtube.\nYoutube\nwith yt(id="the_id_here")\n\nid: the video id (mandatory)\nplaylist: the playlist id (optional)\nclass: a class to add to the <div> surrounding the iframe (optional)\nautoplay: when set to "true", the video autoplays on load (optional)\ntitle - set alt title for the iframe (optional, defaults to "Youtube")\ncookie - set to "true" if you want tracking cookies, otherwise it defaults to false.\n\n\n\t\n\n"
},{
"title": "Embedded Vimeo Videos",
"url": "https://abridge.netlify.app/overview-embedded-vimeo/",
"meta": "Zola has many shortcodes, and new are easily added, this example shows vimeo.\n",
"body": "Zola has many shortcodes, and new are easily added, this example shows vimeo.\nVimeo\nwith vm(id="id_here")\n\nid: the video id (mandatory)\nclass: a class to add to the <div> surrounding the iframe (optional)\nautoplay: when set to "true", the video autoplays on load (optional)\nloop: when set to "true", the video plays on a loop (optional)\nnoautopause: when set to "true", the video will not autopause (optional)\ntitle - set alt title for the iframe (optional, defaults to "Vimeo")\ncookie - set to "true" if you want tracking cookies, otherwise it defaults to false.\n\n\n\t\n\n"
},{
"title": "Mathematical Notations",
"url": "https://abridge.netlify.app/overview-math/",
"meta": "You can use KaTeX to render mathematical notations.\nYou can enable the $\\KaTeX$ support globally, per-section or per-page basis.\n",
"body": "You can use KaTeX to render mathematical notations.\nYou can enable the $\\KaTeX$ support globally, per-section or per-page basis.\nEnable Globally\nTo enable the $\\KaTeX$ support globally, add math = true under [extra] of the config.toml\nat your site root. Now the katex shortcode will be rendered, you can also add math_auto_render = true\nand every section and page of your site will load the KaTeX autorender extension.\n[extra]\nmath = true\nmath_auto_render = false\n\nPer-section Basis\nTo enable the $\\KaTeX$ support in a particular section, add math = true under [extra] in the [SECTION_NAME]/_index.md.\nNow the katex shortcode will be rendered, you can also add math_auto_render = true\nand the section of your site will load the KaTeX autorender extension.\n+++\n[extra]\nmath = true\n+++\n\nPer-page Basis\nTo enable the $\\KaTeX$ support in a particular page, add math = true under [extra] in the page's\nfrontmatter. Now the katex shortcode will be rendered, you can also add math_auto_render = true\nand the page of your site will load the KaTeX autorender extension.\n+++\n[extra]\nmath = true\nmath_auto_render = true\n+++\n\nIt is a good practice to enable $\\KaTeX$ support on a per-page basis, since this will only load the\nrequired files on that particular page, without affecting the page load speed of other pages.\nIf your site is not math-heavy, please do NOT enable this feature globally or per-section basis.\nUsage\nWrap any valid $\\KaTeX$ syntax with $...$ for inline\nMathematics and $$...$$ for block Mathematics.\nInline Mathematics\nThis is the most beautiful equation I've ever seen:\nUsage\n{% katex(block=false) %} e^{i\\pi}+1=0 {% end %}\n\nOutput\n<script type="math/tex">e^{i\\pi}+1=0</script>\n\n\ne^{i\\pi}+1=0\nBlock Mathematics\nSome Mathematics in display mode is fair enough:\nUsage\n{% katex(block=true) %} \\int_0^1 x^2 dx {% end %}\n\nOutput\n<script type="math/tex;mode=display">\\int_0^1 x^2 dx</script>\n\n\n\\int_0^1 x^2 dx\nAuto Render Inline Example\n$ e^{i\\pi}+1=0 $\n\n$ e^{i\\pi}+1=0 $\nAuto Render Block Example\n$$\nf(x) = \\int_{-\\infty}^\\infty\\hat f(\\xi)\\,e^{2 \\pi i \\xi x}\\,d\\xi\n$$\n\n$$\nf(x) = \\int_{-\\infty}^\\infty\\hat f(\\xi),e^{2 \\pi i \\xi x},d\\xi\n$$\n"
}]
@bglw
Copy link
Contributor

bglw commented Apr 20, 2023

No directly, no, and the primary goal is still to index from HTML.

There's a little bit of discussion for this in #142, and ultimately this flow will be made possible with the release of #72 by using a NodeJS interface to populate a search index.

(Closing this issue but feel free to jump into either of the linked issues)

@bglw bglw closed this as completed Apr 20, 2023
@bglw
Copy link
Contributor

bglw commented Sep 13, 2023

Just dropping a notification here that the Node API has shipped in v1.0.0!

@Jieiku
Copy link
Author

Jieiku commented Sep 13, 2023

That is exciting, I am going to experiment with it once I get some free time, thanks!

This was referenced Jul 1, 2024
Merged
Closed
@typo3ua typo3ua mentioned this issue Aug 4, 2024
Closed
@typo3ua
Copy link

typo3ua commented Aug 4, 2024

Hi! @Jieiku
How is your experiment? Do you have resolve that?

@Jieiku
Copy link
Author

Jieiku commented Aug 4, 2024 •
edited
Loading

Yes, this was recently implemented in the abridge theme for Zola, I was already making use of a node script in the abridge theme so that made things a little more staightforward.

This was discussed a bit here Jieiku/abridge#178 and was implemented by @Hysterelius here: Jieiku/abridge@a7244a2

EDIT: Once I have time I will put a demo of abridge online that is using pagefind. (The Abridge demo by default uses elasticlunr because not everyone using Zola is interested in using node/npm)

@typo3ua
Copy link

typo3ua commented Aug 4, 2024

...thank you reply ... I want to try to use this JS for Jekyll static site generator.. What do you think this is good idea?

@Jieiku
Copy link
Author

Jieiku commented Aug 4, 2024

I have never used jekyll but the pagefind node api seems versatile enough that it should work with any static site generator if your willing/able to do the work implementing it and using npm/node is not a problem.

@Jieiku
Copy link
Author

Jieiku commented Aug 6, 2024 •
edited
Loading

The demo can be seen here https://abridge-pagefind.pages.dev/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Jieiku @typo3ua @bglw