Skip to main content
SimilarExport ZIP
100%

Gist 749f66edf8a547d2508e958f7ec38e50

✓ Published0🌍 Public
LLucyI
Last edited Jul 26, 2013
Created on Jul 25, 2017

This example displays a styled list of articles with titles, publication dates, short descriptions, and "Read More" buttons, built using a Nunjucks template that extends a layout file. It shows how to structure a content listing page by iterating through articles sorted by a helper function, pulling metadata like feature images and date formatting. The template integrates Jinja-style logic with `moment` for date display and uses environment helpers to retrieve local assets. The rendering relies on HTML and CSS classes, with no client-side JavaScript libraries involved.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist a8da3e8cbb2e652a76db50d9774e916a

This visualization is a reference document for Nunjucks template filters. It shows the input syntax and corresponding output for a wide range of built-in filters, including `abs`, `batch`, `capitalize`, `dictsort`, `escape`, `groupby`, `indent`, `join`, `random`, and `replace`. The examples use Jinja-style template syntax with `{{ }}` for expressions and `{% %}` for statements, and the outputs are displayed as plain text results.

LLucyI
66% match
Loading thumbnail…

html: article

This example demonstrates a semantic HTML5 article layout with a header containing a two-level heading hierarchy and an inner content division. The code constructs a static document structure using `<article>`, `<header>`, `<hgroup>`, and `<div>` elements, with no interactive or data-driven features. It shows how to organize a standalone content block with a nested heading group, while the empty `.inner` div suggests a placeholder for future content or styling. The rendering relies purely on native browser default styles for HTML elements, with no external libraries, JavaScript, or data sources involved.

BBraMKJ
61% match
Loading thumbnail…

Gist 466252

This example is a data-art composition built from a personal list of recommended web design and programming books, rendered as an interactive force-directed graph. It visualizes the relationships between books, their authors, and their associated topics (like usability, web standards, JavaScript, Ruby, and Rails) using `d3.forceSimulation` for physics-based layout and dynamic node positioning. Each book title, URL, and annotation from the original text is embedded as textual nodes and links, with the graph’s structure and labels derived directly from the source gist’s content. The rendering approach uses SVG elements updated via D3’s data join, and while no explicit additional libraries are mentioned, the code relies on standard D3 v4+ APIs for simulation, drag behavior, and tick updates to show the clustered, interlinked reading list.

DDylanFM
60% match
Loading thumbnail…

Gist 7232670

This example demonstrates how a single-page application skeleton is transformed from a static document into an interactive, AJAX-driven experience. The visualization shows a list of user-submitted code entries, with each entry dynamically loaded and rendered without a full page refresh. The implementation uses jQuery’s `$.ajax` method to fetch the `lucky_ajax.md` file and other resources, then updates the DOM with the retrieved content. The code also relies on JavaScript’s `Promise` API for handling asynchronous responses, and highlights the use of `XMLHttpRequest` for network communication. The data source is the downloaded application skeleton, whose structure is revealed through the fetched files. The example focuses on the interaction between client-side scripting and server responses.

EElaineYu
59% match
Loading thumbnail…

format

This example demonstrates how to display a list of newsletter articles grouped by their publication date. The code organizes the data into a dictionary keyed by date, though the actual visualization is not implemented in the provided files. It uses React’s `useState` and `useEffect` hooks to process the data, and relies on React Context and the `createContext` API to pass user information between components. The rendering output shows only a text element, with the data-processing logic visible in the `App` component.

MMark Lam
59% match
Loading thumbnail…

Set Active Class on Nav-Menu-Item in Nunjucks

This example demonstrates a Nunjucks template pattern for conditionally applying an "active" class to a navigation menu item based on the current page. It shows how a `page_title` variable, set in an extending template, is compared against each item in a `navItems` array from a `data.json` file. The `for` loop iterates through the items, and an inline `if` statement appends the `menu-item-current` class when the titles match. The resulting HTML output is displayed, highlighting the active "about" link.

LLucyI
59% match
Loading thumbnail…

Gist fdb22d9ec25b96538814323e0609c895

The example is a curated markdown document that catalogs online resources for synthetic media, organized by categories such as synthetic text, voice, music, art, and gaming. It lists specific websites and tools, including thispersondoesnotexist.com, Hugging Face’s BERT, OpenAI’s GPT-3 and Jukebox, Descript, and AI Dungeon, with hyperlinks for each entry. The page is a static text file, not an interactive visualization, using no JavaScript libraries or rendering APIs. It functions as a reference list, showing the breadth of generative media platforms rather than demonstrating any particular code or chart.

CCliffordAnderson
58% match
Loading thumbnail…

{p.title}

This animated visualization illustrates the structure and interactive features of a FastHTML-based blogging application, rendering the flow from notebook files to styled HTML pages. The code demonstrates how Jupyter notebooks are parsed and converted into markdown with embedded HTML, using `mistletoe` for markdown processing and `fastcore.nbio` for file handling. The application manages subscriber data through a SQLite database via `fastlite`, while the user interface is built with `fasthtml.common` and `monsterui.all` components. The animation highlights the templating system that transforms content into a complete blog layout, including navigation, article rendering, and social media links.

深深度碎片
58% match