Manipulating query string to better allow you to share a dynamically charged page

In-depth exploration of Genomics Daily: improved date sharing and localized operation

After recently interacting with Moreno Colaiacovo on Bluesky, I started exploring his Genomics Daily project. This static website based on GitHub Pages, built using Jekyll, and its archive function made me discover a problem: the date of a specific news cannot be directly shared. Therefore, I decided to submit a Pull Request to improve it.

Website Architecture

Genomics Daily is a static website hosted by GitHub Pages, and its code base is located at emmecola.github.io. As a classic GitHub Pages project, it uses Jekyll as a static site generator (SSG).

I discovered that GitHub Pages now supports deployment via GitHub Actions:

Run two Jekyll instances in parallel

In order to facilitate local development and debugging, I need to run Genomics Daily and my blog (Computaria) at the same time. Genomics Daily uses port 4000 by default. I solved the port conflict problem by modifying Jekyll's port configuration parameters. This can be achieved by modifying the Jekyll command directly or modifying the Rake task in the Rakefile.

I used a Rake task to manage the running of Jekyll and extracted the port number by matching the task name with a regular expression:

<code class="language-ruby">rule(/^run-[0-9]+$/) do |t|
    port = t.name["run-".length() ..]
    run_jekyll port: port
end</code>

The

run_jekyll function receives the port number as a parameter and starts Jekyll:

<code class="language-ruby">def run_jekyll(port: nil)
    require "jekyll"
    opts = {
        'show_drafts' => true,
        'watch' => true,
        'serving' => true
    }
    opts['port'] = port unless port.nil?
    conf = Jekyll.configuration(opts)
    Jekyll::Commands::Build.process conf
    Jekyll::Commands::Serve.process conf
end</code>

In this way, you can use rake run (default port) and rake run-4001 (4001 port) to run Jekyll.

Although it is possible to use Rake parameters to pass the port number, for better compatibility, I finally chose to use optional parameters. Similarly, I also modified the rake browser task to accept a port number parameter.

<code class="language-ruby">task :run,[:port] do |t, args|
    require "jekyll"
    opts = { ... }
    opts['port'] = args.port unless args.port.nil?
    ...
end

task :browser,[:port] do |t, args|
    port = args.port || 4000
    sh "open ... http://localhost:#{port}/blog/"
end</code>

URL modification

Initially tried to modify location.search to change the URL parameters, but this would affect the dynamic loading mechanism of Genomics Daily. So I used the window.history.pushState API instead to update the URL without refreshing the page.

In the article, I added a button that will increment the value of the URL parameter marmota on each click. The code is as follows:

<code class="language-javascript">function alteraQueryParam() {
    const url = new URL(window.location.href);
    if (!window.history) return;
    const paramName = 'marmota';
    let x = url.searchParams.get(paramName) || 0;
    x++;
    url.searchParams.set(paramName, x);
    window.history.pushState(null, '', url.toString());
}</code>

Run Genomics Daily locally

After cloning the Genomics Daily repository, I copied Computaria’s Rakefile. Since Genomics Daily uses the minima theme, I need to add the corresponding gem in Gemfile and execute bundle update to run rake run successfully.

Additionally, I fixed the internal linking issue by changing /genomics-daily/archive/ to a relative path.

Finally, I improved the date selection and page loading logic to ensure that the news content of the corresponding date is loaded according to the URL parameters when the page is loaded. This involves using the window.onload event or document.readyState to determine when the page has finished loading, and dynamically loading content based on the URL parameter date.

In summary, with these improvements, Genomics Daily’s date sharing functionality has been enhanced, and local development and debugging have become more convenient.

The above is the detailed content of Manipulating query string to better allow you to share a dynamically charged page. For more information, please follow other related articles on the PHP Chinese website!