Skip to content

Instantly share code, notes, and snippets.

---
import ButtonGroup from "./ButtonGroup.astro";
interface Props {
projectTitle: string;
body: string;
href: string;
type?: string;
repo?: string;
external?: boolean;
image?: string;
@leabs
leabs / main.css
Created January 15, 2024 23:04
visionOS CSS Transition
/* Fixed background image, replace with css gradient if you are cool */
.cssbackground {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("bg.png");
background-size: cover;
z-index: -1;
@leabs
leabs / Jekyll-Simple-Search-All-Collections.json
Last active May 2, 2023 13:16
Search all Jekyll collections using jekyll-simple-search
---
layout: none
---
{% assign allCollections = site.collections %}
{% for collection in allCollections %}
{% assign allPosts = allPosts | concat: collection.docs %}
{% endfor %}
@leabs
leabs / navbar.astro
Created March 8, 2023 16:56
Astro - Set active class on Navbar component.
<!--Set active class on nav when the page is active -->
<script>
const nav = document.querySelector(".navbar");
const navLinks = nav.querySelectorAll("a");
const currentURL = window.location.href;
navLinks.forEach((link) => {
if (link.href === currentURL) {
link.classList.add("active");
}
});
@leabs
leabs / jekyll-modulo-columns.html
Created March 5, 2023 12:21
This adds a parent wrapper div every 3 children using Liquid's modulo filter. This uses bulma CSS classes, but applies to any CSS framework
<!-- This loops through the paginated posts in Jekyll -->
{% for post in paginator.posts %}
<!-- Modulo counter in liquid, will enclose div.columns every 3 posts starting at 0 -->
{% assign mod = forloop.index0 | modulo:3 %}
<!-- If the modulo counter is 0, then open a div with class columns -->
{% if mod == 0 %}
<div class="columns">
{% endif %}
<!-- This is the post div, it will be repeated 3 times -->
<div class="column">
@leabs
leabs / jekyll-sorted-table.html
Last active December 28, 2022 16:36
Display collection data and sort on front matter property based on current page title
<!--Capture page title to use for collection filter on for loop, collection must be listed in the _config.yml to be used as a key pair-->
{% assign thisCollection = page.title | downcase %}
<!--determine the sorted sections to iterate over using front matter-->
{% assign items_grouped = site.[thisCollection] | group_by: 'frontmatterProp' %}
<table class="table table-sm table-responsive">
<thead>
<tr>
<th style="width: 50%; text-align: left;">item name</th>
@leabs
leabs / jekyll-no-posts.html
Last active December 28, 2022 16:36
Remove posts collection from FOR loop output in Jekyll
{% for collection in site.collections %}
{% if collection.label == "posts" %}
{% continue %}
{% endif %}
{% for item in site[collection.label] %}
<div>
<h5 class="card-title">{{item.name}}</h5>
<p>{{ item.description }}</p>
</div>
{% endfor %}
@leabs
leabs / combine-arrays-by-id.js
Last active April 12, 2022 15:14
Adding Javascript object arrays based on key-value pair (id)
// Add the number property of array1 and array2 where the id matches and declare as array3
let array1 = [{ id: 1, number: 3}, { id: 3, number: 4}, { id: 2, number: 4}]
let array2 = [{ id: 1, number: 3}, { id: 2, number: 5}, {id: 3,number: 3}]
let array3 = [];
for (let i = 0; i < array2.length; i++) {
for (let j = 0; j < array1.length; j++) {
if (array2[i].id === array1[j].id) {
array3.push({
id: array2[i].id,