Code Snippets for learn.livinglabs.network

This repository contains a collection of code snippets designed to enhance the functionality of a Ghost-based website. These snippets provide features like course filtering, interactive timelines, a global glossary, and general-purpose post filtering.

Overall Structure

The repository is organized into the following directories:

• Course List: Contains the code for a filterable course list.
• Timeline: Includes the necessary files to generate an interactive timeline.
• Global: Holds snippets that are intended to be used globally across the site, such as the glossary.
• FAQ: Contains the code for a FAQ section.
• Home page: Contains the code for the main cards on the home page.
• TOC: Contains the code for a table of contents.

Course List Filter

This feature allows users to filter a list of courses based on various attributes.

Functionality:

• Fetches course data from the Ghost API.
• Filters courses by tags, which are parsed in a keyword-value format (e.g., #level-beginner).
• Active filters are "course"/"#course" and "Active".
• Displays the filtered results in a grid layout.

Files:

• Course List/Ghost/filterhtml.html: The HTML structure for the filter interface and the course list.
• Course List/Ghost/filterjs.html: The JavaScript that handles the API requests, filtering logic, and DOM manipulation.
• Course List/Ghost/filtercss.html: The CSS for styling the filter and the course list.

Timeline

This snippet uses the Knight Lab's Timeline.js library to create an interactive, chronological timeline of events.

Functionality:

• Loads timeline data from a JSON file.
• Renders an interactive timeline with navigation and zoom features.
• Includes an auto-scroll feature that advances through the timeline slides automatically.

Files:

• Timeline/Ghost Snippets/main.html: The basic HTML structure to embed the timeline.
• Timeline/Ghost Snippets/mainjs.html: The JavaScript that initializes the timeline, loads the data, and implements the auto-scroll functionality.
• 2025-2026_timeline.json: The data file for the timeline in JSON format.
• Timeline/csv-to-timeline-json.py: A Python script to convert a CSV file to the required JSON format.

My process to make changes to the timeline

1. All changes are first made in Timeline/Course Catalog.xlsx inside the Timeline format sheet
2. There are csv templates in the same spreadsheet and also in Timeline/timeline-csv-template.csv
3. I save the changes in Timeline/Course Catalog.xlsx to Timeline/2025-2026.csv
4. I then create a python venv (optional) and run python3 csv-to-timeline-json.py --interactive as a command
5. Answers to questions
   • 📁 Enter CSV file path (or 'quit' to exit): /full/path/here/Code-Snippets-for-Learn-Ghost/Timeline/2025-2026.csv
   • Timeline scale ([human]/cosmological): human
   • Enable validation [Y/n]: y
   • 💾 Output file [/mnt/2TA/Dev Stuff/Aruvu/Code-Snippets-for-Learn-Ghost/Timeline/2025-2026_timeline.json]: [Nothing to type. Just press enter]
   • Show JSON preview [y/N]: y
   • Validate output [Y/n]: y
6. After this the json file is generated here Timeline/2025-2026_timeline.json. THIS is NOT the production file
7. I then manually copy Timeline/2025-2026_timeline.json to 2025-2026_timeline.json
8. Commit and push to github
9. Timelinejs on the website is looking for https://raw.githubusercontent.com/Aruvu-collab/Code-Snippets-for-Learn-Ghost/refs/heads/main/2025-2026_timeline.json

Global Snippets

These snippets are designed to be included in the global code injection of a Ghost site to provide site-wide functionality.

Glossary

This feature automatically creates tooltips for predefined terms throughout the website.

Functionality:

• Loads a dictionary of terms and definitions from a JSON file.
• Scans the text content of the page and wraps the defined terms in a <span> tag.
• Uses Tippy.js to display a tooltip with the definition when a user hovers over a term.

Files:

• Global/glossary.html: The HTML and JavaScript code to load the dictionary, parse the content, and initialize the tooltips.
• Global/glossary.json: The JSON file containing the dictionary of terms and definitions.

General Purpose Filtered Posts

This is a flexible script that allows you to display a filtered list of posts anywhere on your site.

Functionality:

• Fetches posts from the Ghost API based on a set of tags.
• Supports both "AND" and "OR" logic for tag filtering.
• Includes a "Load More" button to paginate through the results.
• Can be configured to have multiple instances on the same page.

Files:

• Global/General Purpose Filtered Posts/GPFPhtml.html: The HTML structure for the filter configuration and the post container.
• Global/General Purpose Filtered Posts/GPFPjs.html: The JavaScript that handles the API requests, filtering, and "Load More" functionality.
• Global/General Purpose Filtered Posts/GPFPcss.html: The CSS for styling the filtered posts.

FAQ

This feature creates a FAQ section from a Markdown file.

Functionality:

• Loads a Markdown file from a URL.
• Parses the Markdown into sections and questions/answers.
• Generates an interactive FAQ section with expandable answers.

Files:

• FAQ/FAQhtml.html: The HTML structure for the FAQ container.
• FAQ/FAQjs.html: The JavaScript that loads and parses the Markdown file, and handles the interactivity.
• FAQ/FAQcss.html: The CSS for styling the FAQ section.
• FAQ/faq.md: The Markdown file containing the FAQ content.

Home Page Cards

This snippet creates a set of cards for the home page.

Functionality:

• Displays a grid of cards with images and text.
• Each card links to a different page.

Files:

• Home page/main cards.html: The HTML and CSS for the cards.

Table of Contents (TOC)

This archived snippet generates a table of contents for a page.

Functionality:

• Scans the page for headings (h1, h2, h3, h4).
• Generates a nested list of links to the headings.
• Inserts the TOC at a specified position on the page.

Files:

• TOC/TOCjs.html: The JavaScript that generates the TOC.
• TOC/TOCcss.html: The CSS for styling the TOC.

Documentation

For more detailed information about the project, please refer to the following documents:

• Filtering Scripts: Provides insights into the implementation details and challenges.
• Interlinking Strategy: Describes the strategy for interlinking content within the Ghost site and outlines the tagging schema used for content organization.
• Database Generation: Explains the process of generating the JSON data files from the Ghost API.