Skip to content

Upgrade styles, integrate HTMX and AlpineJS, and enhance testimonials page #956

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

Merged
merged 1 commit into from
Mar 10, 2025
Merged

Upgrade styles, integrate HTMX and AlpineJS, and enhance testimonials page #956

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 11 additions & 2 deletions .devcontainer/devcontainer.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,19 @@
{
"name": "Jekyll",
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
"image": "mcr.microsoft.com/devcontainers/jekyll:2-bullseye"
"image": "mcr.microsoft.com/devcontainers/jekyll:2-bullseye",

// Features to add to the dev container. More info: https://containers.dev/features.
// "features": {},
"features": {
"ghcr.io/devcontainers/features/node:1": {}
},
"customizations": {
"vscode": {
"extensions": [
"bradlc.vscode-tailwindcss"
]
}
},

// Use 'forwardPorts' to make a list of ports inside the container available locally.
// "forwardPorts": [],
Expand Down
71 changes: 71 additions & 0 deletions .github/workflows/jekyll.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
# This workflow uses actions that are not certified by GitHub.
# They are provided by a third-party and are governed by
# separate terms of service, privacy policy, and support
# documentation.

# Sample workflow for building and deploying a Jekyll site to GitHub Pages
name: Deploy Jekyll site to Pages

on:
# Runs on pushes targeting the default branch
push:
branches: ["gh-pages"]

# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
group: "pages"
cancel-in-progress: false

jobs:
# Build job
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Ruby
# https://github.com/ruby/setup-ruby/releases/tag/v1.207.0
uses: ruby/setup-ruby@4a9ddd6f338a97768b8006bf671dfbad383215f4
with:
ruby-version: '3.1' # Not needed with a .ruby-version file
bundler-cache: true # runs 'bundle install' and caches installed gems automatically
cache-version: 1 # Increment this number if you need to re-download cached gems
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '22' # Specify the Node.js version you need
- name: Install npm dependencies
run: npm install
- name: Setup Pages
id: pages
uses: actions/configure-pages@v5
- name: Build with Jekyll
# Outputs to the './_site' directory by default
run: bundle exec jekyll build --baseurl "${{ steps.pages.outputs.base_path }}"
env:
JEKYLL_ENV: production
- name: Upload artifact
# Automatically uploads an artifact from the './_site' directory by default
uses: actions/upload-pages-artifact@v3

# Deployment job
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
needs: build
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
.paket/paket.exe
packages/
node_modules/
paket-files/
_site/
*~
Expand Down
3 changes: 2 additions & 1 deletion .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
{

"tailwindCSS.experimental.configFile": "/workspaces/fsharp.org/css/main.css",
"tailwindCSS.experimental.classRegex": []
}
1 change: 1 addition & 0 deletions Gemfile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ gem "minima", "~> 2.0"
# If you have any plugins, put them here!
group :jekyll_plugins do
gem "jekyll-feed", "~> 0.17"
gem 'jekyll-postcss-v2'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
Expand Down
2 changes: 2 additions & 0 deletions Gemfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ GEM
webrick (~> 1.7)
jekyll-feed (0.17.0)
jekyll (>= 3.7, < 5.0)
jekyll-postcss-v2 (1.0.2)
jekyll-redirect-from (0.15.0)
jekyll (>= 3.3, < 5.0)
jekyll-sass-converter (3.1.0)
Expand Down Expand Up @@ -90,6 +91,7 @@ DEPENDENCIES
csv
jekyll (~> 4.4.1)
jekyll-feed (~> 0.17)
jekyll-postcss-v2
jekyll-redirect-from (~> 0.15.0)
minima (~> 2.0)
rexml
Expand Down
20 changes: 19 additions & 1 deletion _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,23 @@
safe: true
encoding: utf-8
markdown: kramdown

include:
- /css/*

exclude:
- package-lock.json
- node_modules
- package.json
- postcss.config.js
- tailwind.config.js

gems:
- jekyll-redirect-from

collections:
testimonials:
output: false
permalink: /testimonials/#:id



212 changes: 212 additions & 0 deletions _includes/navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,212 @@
<nav id="nav-bar" hx-preserve
class="z-20 px-6 xl:px-0 bg-brand-dark dark:bg-brand-light text-white overflow-x-clip dark:text-slate-950 sticky left-0 right-0 top-0"
x-data="{
mobileNavOpen: false,
theme: localStorage.theme ?? null,
initDarkMode() {
// Set up listener for system preference changes
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

// Initial check based on system preference if no explicit theme is set
if (this.theme === null && darkModeMediaQuery.matches) {
document.documentElement.classList.add('dark');
}

// Listen for changes in system preference
darkModeMediaQuery.addEventListener('change', (e) => {
if (this.theme === null) {
if (e.matches) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}
});
}
}" x-init="initDarkMode()" @click.away="mobileNavOpen = false">

<div class="max-w-6xl mx-auto">

<div class="flex flex-row h-12 items-center">

<a class="navbar-brand mr-auto gap-2 flex flex-row items-center" href="{{ '/' | relative_url }}"
@click="open=false; mobileNavOpen=false;">
<img class="inline dark:hidden" src="{{ '/img/logo/fsharp100mclight.png' | relative_url }}"
alt="F# Logo" width="30" height="30" />
<img class="hidden dark:inline" src="{{ '/img/logo/fsharp100mcdark.png' | relative_url }}" alt="F# Logo"
width="30" height="30" />
<span class="font-heading">F# Software Foundation</span>
</a>

<button @click="mobileNavOpen = !mobileNavOpen" class="visible md:hidden" type="button">
<i class="fa-solid fa-bars ml-auto "></i>
</button>

<div x-bind:aria-expanded="mobileNavOpen"
class='bg-brand-light transition-transform p-2 md:p-0 z-20 translate-x-0 md:translate-0 aria-expanded:-translate-x-72 ease-out duration-300 w-72 md:w-auto aria-expanded:flex h-screen md:h-auto overflow-y-auto md:overflow-y-visible absolute top-12 -right-72 md:static md:bg-transparent md:flex flex-col md:flex-row md:align-items-stretch '>

<!-- <a class="navbar-brand md:hidden px-4 py-2 mr-auto gap-2 flex flex-row items-center" href="{{ '/' | relative_url }}"
@click="open=false; mobileNavOpen=false;">
<img class="inline dark:hidden" src="{{ '/img/logo/fsharp100mclight.png' | relative_url }}" alt="F# Logo" width="30" height="30" />
<img class="hidden dark:inline" src="{{ '/img/logo/fsharp100mcdark.png' | relative_url }}" alt="F# Logo" width="30" height="30" />
<span class="font-heading">F# Software Foundation</span>
</a> -->

<div class="nav-item" x-data="{open: false}" @click.away="open= false">
<button type="button" @click="open=!open" x-bind:aria-expanded="open">
Learn <i class="fa-solid fa-chevron-down text-white/70 dark:text-slate-950/70"></i>
</button>

<div x-cloak @click="open=false; mobileNavOpen=false;" x-transition x-show="open" role="menu"
aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
<div role="none">
<!-- Active: "bg-gray-100 text-gray-900 outline-hidden", Not Active: "text-gray-700" -->
<a href="{{ '/learn' | relative_url }}" role="menuitem" class="group" tabindex="-1">Learn
F#</a>
<a href="{{ '/docs' | relative_url }}" role="menuitem" class="group"
tabindex="-1">Documentation</a>
<a href="{{ '/testimonials' | relative_url }}" role="menuitem" class="group"
tabindex="-1">Testimonials</a>
<a href="{{ '/teaching/research' | relative_url }}" role="menuitem" class="group"
tabindex="-1">Publications</a>
<a href="https://www.youtube.com/c/fsharporg" role="menuitem" class="group"
tabindex="-1">Videos (FSFF channel)</a>
<a href="https://www.youtube.com/results?search_query=learn+f%23" role="menuitem"
class="group" tabindex="-1">Videos <span class="badge">unaffiliated</span></a>
</div>
</div>
</div>

<div class="nav-item" x-data="{open: false}" @click.away="open= false">
<button type="button" @click="open=!open" x-bind:aria-expanded="open">
Use <i class="fa-solid fa-chevron-down text-white/70 dark:text-slate-950/70"></i></i>
</button>

{% include usemenu.html %}
</div>

<div class="nav-item" x-data="{open: false}" @click.away="open= false">
<button type="button" @click="open=!open" x-bind:aria-expanded="open">
Guides <i class="fa-solid fa-chevron-down text-white/70 dark:text-slate-950/70"></i>
</button>

<div x-cloak @click="open=false; mobileNavOpen=false;" x-transition x-show="open" role="menu"
aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
<div role="none">
<a href="{{ '/guides/cloud/' | relative_url }}" role="menuitem" class="group"
tabindex="-1">Cloud</a>
<a href="{{ '/guides/data-access/' | relative_url }}" role="menuitem" class="group"
tabindex="-1">Data Access</a>
<a href="{{ '/guides/data-science/' | relative_url }}" role="menuitem" class="group"
tabindex="-1">Data Science</a>
<a href="{{ '/guides/enterprise/' | relative_url }}" role="menuitem" class="group"
tabindex="-1">Enterprise</a>
<a href="{{ '/guides/mobile-apps/' | relative_url }}" role="menuitem" class="group"
tabindex="-1">Mobile Apps</a>
<a href="{{ '/guides/web/' | relative_url }}" role="menuitem" class="group"
tabindex="-1">Web</a>
</div>
</div>
</div>

<div class="nav-item" x-data="{open: false}" @click.away="open= false">
<button type="button" @click="open=!open" x-bind:aria-expanded="open">
Community <i class="fa-solid fa-chevron-down text-white/70 dark:text-slate-950/70"></i>
</button>

<div x-cloak @click="open=false; mobileNavOpen=false;" x-transition x-show="open" role="menu"
aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
<div role="none">
<a href="{{ '/guides/engineering/issues' | relative_url }}" role="menuitem" class="group"
tabindex="-1">
<i class="fa-solid fa-screwdriver-wrench"></i> Contribute a Fix / Report an Issue
</a>
</div>
<div role="none">
<a role="menuitem" class="group" href="{{ '/community/projects/' | relative_url }}">F# Community Projects</a>
<a role="menuitem" class="group" href="http://www.fssnip.net/">F# Code Snippets</a>
<a role="menuitem" class="group"
href="http://codereview.stackexchange.com/questions/tagged/f%23">F# Code Review <span
class="badge">unaffiliated</span></a>
</div>
<div role="none">
<a role="menuitem" class="group" href="https://community.fsharp.org/user_groups">User
Groups</a>
<a role="menuitem" class="group" href="https://community.fsharp.org/speakers">Speakers
Program</a>
</div>
<div role="none">
<a role="menuitem" class="group" href="https://forums.fsharp.org">
<i class="fa-solid fa-table-list"></i> Forum
</a>
<a href="{{ '/guides/slack' | relative_url }}" role="menuitem" class="group" tabindex="-1">
<i class="fa-brands fa-slack"></i> Slack
</a>
<a role="menuitem" class="group" href="https://discord.gg/R6n7c54">
<i class="fa-brands fa-discord"></i> Discord <span class="badge">unaffiliated</span>
</a>
<a href="https://bsky.app/starter-pack/blizard.io/3la4zswhqbt2e" role="menuitem"
class="group" tabindex="-1">
<i class="fa-brands fa-bluesky"></i> Bluesky <span class="badge">unaffiliated</span>
</a>
<a role="menuitem" class="group" href="https://x.com/search?q=%23fsharp">
<i class="fa-brands fa-x-twitter"></i> X.com <span class="badge">unaffiliated</span>
</a>
<a role="menuitem" class="group" href="https://www.reddit.com/r/fsharp/">
<i class="fa-brands fa-reddit"></i> Reddit <span class="badge">unaffiliated</span>
</a>
<a role="menuitem" class="group" href="http://stackoverflow.com/questions/tagged/f%23">
<i class="fa-brands fa-stack-overflow"></i> StackOverflow <span
class="badge">unaffiliated</span>
</a>
</div>
</div>
</div>

<div class="nav-item" x-data="{open: false}" @click.away="open= false">
<button type="button" @click="open=!open" x-bind:aria-expanded="open">
Foundation <i class="fa-solid fa-chevron-down text-white/70 dark:text-slate-950/70"></i>
</button>

<div x-cloak @click="open=false; mobileNavOpen=false;" x-transition x-show="open" role="menu"
aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
<div role="none">
<a role="menuitem" href="https://foundation.fsharp.org">Mission statement</a>
<a role="menuitem" href="https://foundation.fsharp.org/join">Join</a>
<a role="menuitem" href="https://foundation.fsharp.org/announcements">Announcements</a>
<a role="menuitem" href="https://foundation.fsharp.org/member_roster">Member Roster</a>
<a role="menuitem" href="https://foundation.fsharp.org/code_of_conduct">Code of Conduct</a>
<a role="menuitem" href="https://foundation.fsharp.org/donate">Donate</a>
<a role="menuitem" href="https://foundation.fsharp.org/logo">F# Logo</a>
<a role="menuitem" href="https://foundation.fsharp.org/contact">Contact</a>
</div>
</div>
</div>

<button role="button" type="button" class="w-6 ml-2">
<i x-show="theme == null"
@click="localStorage.theme = 'dark'; theme = 'dark'; document.documentElement.classList.add('dark')"
class="ml-auto fa-solid fa-circle-half-stroke"></i>
<i x-cloak x-show="theme === 'dark'"
@click="localStorage.theme = 'light'; theme = 'light'; document.documentElement.classList.remove('dark')"
class="ml-auto fa-solid fa-moon"></i>
<i x-cloak x-show="theme === 'light'"
@click="localStorage.removeItem('theme'); theme = null; if (window.matchMedia('(prefers-color-scheme: dark)').matches) document.documentElement.classList.add('dark')"
class="ml-auto fa-solid fa-sun"></i>
</button>
</div>

</div>


</div>

<div x-cloak @click="mobileNavOpen=false" x-transition.opacity.duration.300 x-show="mobileNavOpen"
class="fixed inset-0 top-12 z-10 bg-black/30" ></div>


</nav>

<div class="htmx-indicator" hx-preserve id="loading-strip"></div>


16 changes: 16 additions & 0 deletions _includes/usemenu.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<div x-cloak @click="open=false; mobileNavOpen=false;" x-transition x-show="open" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
<div role="none">
<a href="{{ '/use/mac/' | relative_url }}" role="menuitem" class="group" tabindex="-1"><i class="fa-brands fa-apple"></i> F# on Mac</a>
<a href="{{ '/use/linux/' | relative_url }}" role="menuitem" class="group" tabindex="-1"><i class="fa-brands fa-linux"></i> F# on Linux</a>
<a href="{{ '/use/windows/' | relative_url }}" role="menuitem" class="group" tabindex="-1"><i class="fa-brands fa-microsoft"></i> F# on Windows</a>
</div>
<div role="none">
<a href="{{ '/use/desktop-apps/' | relative_url }}" role="menuitem" class="group" tabindex="-1"><i class="fa-solid fa-computer"></i> F# for Desktop Apps</a>
<a href="{{ '/use/mobile-apps/' | relative_url }}" role="menuitem" class="group" tabindex="-1"><i class="fa-solid fa-mobile-screen-button"></i> F# for Mobile Apps</a>
<a href="{{ '/use/web-apps/' | relative_url }}" role="menuitem" class="group" tabindex="-1"><i class="fa-solid fa-globe"></i> F# for Web Apps</a>
<a href="{{ '/use/notebooks/' | relative_url }}" role="menuitem" class="group" tabindex="-1"><i class="fa-solid fa-book"></i> F# for Jupyter Notebooks</a>
</div>
<div role="none">
<a href="{{ '/use/browser/' | relative_url }}" role="menuitem" class="group" tabindex="-1"><i class="fa-solid fa-globe"></i> F# in the browser</a>
</div>
</div>
Loading