Skip to content

Commit c68cb36

Browse files
dsymedsyme
authored
Merge pull request #956 from IanWitham/gh-pages
Upgrade styles, integrate HTMX and AlpineJS, and enhance testimonials page
2 parents 14a5911 + e69f50e commit c68cb36

File tree

128 files changed

+34175
-9709
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

128 files changed

+34175
-9709
lines changed

‎.devcontainer/devcontainer.json

+11-2
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,19 @@
33
{
44
"name": "Jekyll",
55
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
6-
"image": "mcr.microsoft.com/devcontainers/jekyll:2-bullseye"
6+
"image": "mcr.microsoft.com/devcontainers/jekyll:2-bullseye",
77

88
// Features to add to the dev container. More info: https://containers.dev/features.
9-
// "features": {},
9+
"features": {
10+
"ghcr.io/devcontainers/features/node:1": {}
11+
},
12+
"customizations": {
13+
"vscode": {
14+
"extensions": [
15+
"bradlc.vscode-tailwindcss"
16+
]
17+
}
18+
},
1019

1120
// Use 'forwardPorts' to make a list of ports inside the container available locally.
1221
// "forwardPorts": [],

‎.github/workflows/jekyll.yml

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
# This workflow uses actions that are not certified by GitHub.
2+
# They are provided by a third-party and are governed by
3+
# separate terms of service, privacy policy, and support
4+
# documentation.
5+
6+
# Sample workflow for building and deploying a Jekyll site to GitHub Pages
7+
name: Deploy Jekyll site to Pages
8+
9+
on:
10+
# Runs on pushes targeting the default branch
11+
push:
12+
branches: ["gh-pages"]
13+
14+
# Allows you to run this workflow manually from the Actions tab
15+
workflow_dispatch:
16+
17+
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
18+
permissions:
19+
contents: read
20+
pages: write
21+
id-token: write
22+
23+
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
24+
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
25+
concurrency:
26+
group: "pages"
27+
cancel-in-progress: false
28+
29+
jobs:
30+
# Build job
31+
build:
32+
runs-on: ubuntu-latest
33+
steps:
34+
- name: Checkout
35+
uses: actions/checkout@v4
36+
- name: Setup Ruby
37+
# https://github.com/ruby/setup-ruby/releases/tag/v1.207.0
38+
uses: ruby/setup-ruby@4a9ddd6f338a97768b8006bf671dfbad383215f4
39+
with:
40+
ruby-version: '3.1' # Not needed with a .ruby-version file
41+
bundler-cache: true # runs 'bundle install' and caches installed gems automatically
42+
cache-version: 1 # Increment this number if you need to re-download cached gems
43+
- name: Setup Node.js
44+
uses: actions/setup-node@v3
45+
with:
46+
node-version: '22' # Specify the Node.js version you need
47+
- name: Install npm dependencies
48+
run: npm install
49+
- name: Setup Pages
50+
id: pages
51+
uses: actions/configure-pages@v5
52+
- name: Build with Jekyll
53+
# Outputs to the './_site' directory by default
54+
run: bundle exec jekyll build --baseurl "${{ steps.pages.outputs.base_path }}"
55+
env:
56+
JEKYLL_ENV: production
57+
- name: Upload artifact
58+
# Automatically uploads an artifact from the './_site' directory by default
59+
uses: actions/upload-pages-artifact@v3
60+
61+
# Deployment job
62+
deploy:
63+
environment:
64+
name: github-pages
65+
url: ${{ steps.deployment.outputs.page_url }}
66+
runs-on: ubuntu-latest
67+
needs: build
68+
steps:
69+
- name: Deploy to GitHub Pages
70+
id: deployment
71+
uses: actions/deploy-pages@v4

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.paket/paket.exe
22
packages/
3+
node_modules/
34
paket-files/
45
_site/
56
*~

‎.vscode/settings.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
{
2-
2+
"tailwindCSS.experimental.configFile": "/workspaces/fsharp.org/css/main.css",
3+
"tailwindCSS.experimental.classRegex": []
34
}

‎Gemfile

+1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ gem "minima", "~> 2.0"
2020
# If you have any plugins, put them here!
2121
group :jekyll_plugins do
2222
gem "jekyll-feed", "~> 0.17"
23+
gem 'jekyll-postcss-v2'
2324
end
2425

2526
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem

‎Gemfile.lock

+2
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ GEM
4141
webrick (~> 1.7)
4242
jekyll-feed (0.17.0)
4343
jekyll (>= 3.7, < 5.0)
44+
jekyll-postcss-v2 (1.0.2)
4445
jekyll-redirect-from (0.15.0)
4546
jekyll (>= 3.3, < 5.0)
4647
jekyll-sass-converter (3.1.0)
@@ -90,6 +91,7 @@ DEPENDENCIES
9091
csv
9192
jekyll (~> 4.4.1)
9293
jekyll-feed (~> 0.17)
94+
jekyll-postcss-v2
9395
jekyll-redirect-from (~> 0.15.0)
9496
minima (~> 2.0)
9597
rexml

‎_config.yml

+19-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,23 @@
1-
safe: true
21
encoding: utf-8
32
markdown: kramdown
3+
4+
include:
5+
- /css/*
6+
7+
exclude:
8+
- package-lock.json
9+
- node_modules
10+
- package.json
11+
- postcss.config.js
12+
- tailwind.config.js
13+
414
gems:
515
- jekyll-redirect-from
16+
17+
collections:
18+
testimonials:
19+
output: false
20+
permalink: /testimonials/#:id
21+
22+
23+

‎_includes/navbar.html

+212
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
<nav id="nav-bar" hx-preserve
2+
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"
3+
x-data="{
4+
mobileNavOpen: false,
5+
theme: localStorage.theme ?? null,
6+
initDarkMode() {
7+
// Set up listener for system preference changes
8+
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
9+
10+
// Initial check based on system preference if no explicit theme is set
11+
if (this.theme === null && darkModeMediaQuery.matches) {
12+
document.documentElement.classList.add('dark');
13+
}
14+
15+
// Listen for changes in system preference
16+
darkModeMediaQuery.addEventListener('change', (e) => {
17+
if (this.theme === null) {
18+
if (e.matches) {
19+
document.documentElement.classList.add('dark');
20+
} else {
21+
document.documentElement.classList.remove('dark');
22+
}
23+
}
24+
});
25+
}
26+
}" x-init="initDarkMode()" @click.away="mobileNavOpen = false">
27+
28+
<div class="max-w-6xl mx-auto">
29+
30+
<div class="flex flex-row h-12 items-center">
31+
32+
<a class="navbar-brand mr-auto gap-2 flex flex-row items-center" href="{{ '/' | relative_url }}"
33+
@click="open=false; mobileNavOpen=false;">
34+
<img class="inline dark:hidden" src="{{ '/img/logo/fsharp100mclight.png' | relative_url }}"
35+
alt="F# Logo" width="30" height="30" />
36+
<img class="hidden dark:inline" src="{{ '/img/logo/fsharp100mcdark.png' | relative_url }}" alt="F# Logo"
37+
width="30" height="30" />
38+
<span class="font-heading">F# Software Foundation</span>
39+
</a>
40+
41+
<button @click="mobileNavOpen = !mobileNavOpen" class="visible md:hidden" type="button">
42+
<i class="fa-solid fa-bars ml-auto "></i>
43+
</button>
44+
45+
<div x-bind:aria-expanded="mobileNavOpen"
46+
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 '>
47+
48+
<!-- <a class="navbar-brand md:hidden px-4 py-2 mr-auto gap-2 flex flex-row items-center" href="{{ '/' | relative_url }}"
49+
@click="open=false; mobileNavOpen=false;">
50+
<img class="inline dark:hidden" src="{{ '/img/logo/fsharp100mclight.png' | relative_url }}" alt="F# Logo" width="30" height="30" />
51+
<img class="hidden dark:inline" src="{{ '/img/logo/fsharp100mcdark.png' | relative_url }}" alt="F# Logo" width="30" height="30" />
52+
<span class="font-heading">F# Software Foundation</span>
53+
</a> -->
54+
55+
<div class="nav-item" x-data="{open: false}" @click.away="open= false">
56+
<button type="button" @click="open=!open" x-bind:aria-expanded="open">
57+
Learn <i class="fa-solid fa-chevron-down text-white/70 dark:text-slate-950/70"></i>
58+
</button>
59+
60+
<div x-cloak @click="open=false; mobileNavOpen=false;" x-transition x-show="open" role="menu"
61+
aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
62+
<div role="none">
63+
<!-- Active: "bg-gray-100 text-gray-900 outline-hidden", Not Active: "text-gray-700" -->
64+
<a href="{{ '/learn' | relative_url }}" role="menuitem" class="group" tabindex="-1">Learn
65+
F#</a>
66+
<a href="{{ '/docs' | relative_url }}" role="menuitem" class="group"
67+
tabindex="-1">Documentation</a>
68+
<a href="{{ '/testimonials' | relative_url }}" role="menuitem" class="group"
69+
tabindex="-1">Testimonials</a>
70+
<a href="{{ '/teaching/research' | relative_url }}" role="menuitem" class="group"
71+
tabindex="-1">Publications</a>
72+
<a href="https://www.youtube.com/c/fsharporg" role="menuitem" class="group"
73+
tabindex="-1">Videos (FSFF channel)</a>
74+
<a href="https://www.youtube.com/results?search_query=learn+f%23" role="menuitem"
75+
class="group" tabindex="-1">Videos <span class="badge">unaffiliated</span></a>
76+
</div>
77+
</div>
78+
</div>
79+
80+
<div class="nav-item" x-data="{open: false}" @click.away="open= false">
81+
<button type="button" @click="open=!open" x-bind:aria-expanded="open">
82+
Use <i class="fa-solid fa-chevron-down text-white/70 dark:text-slate-950/70"></i></i>
83+
</button>
84+
85+
{% include usemenu.html %}
86+
</div>
87+
88+
<div class="nav-item" x-data="{open: false}" @click.away="open= false">
89+
<button type="button" @click="open=!open" x-bind:aria-expanded="open">
90+
Guides <i class="fa-solid fa-chevron-down text-white/70 dark:text-slate-950/70"></i>
91+
</button>
92+
93+
<div x-cloak @click="open=false; mobileNavOpen=false;" x-transition x-show="open" role="menu"
94+
aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
95+
<div role="none">
96+
<a href="{{ '/guides/cloud/' | relative_url }}" role="menuitem" class="group"
97+
tabindex="-1">Cloud</a>
98+
<a href="{{ '/guides/data-access/' | relative_url }}" role="menuitem" class="group"
99+
tabindex="-1">Data Access</a>
100+
<a href="{{ '/guides/data-science/' | relative_url }}" role="menuitem" class="group"
101+
tabindex="-1">Data Science</a>
102+
<a href="{{ '/guides/enterprise/' | relative_url }}" role="menuitem" class="group"
103+
tabindex="-1">Enterprise</a>
104+
<a href="{{ '/guides/mobile-apps/' | relative_url }}" role="menuitem" class="group"
105+
tabindex="-1">Mobile Apps</a>
106+
<a href="{{ '/guides/web/' | relative_url }}" role="menuitem" class="group"
107+
tabindex="-1">Web</a>
108+
</div>
109+
</div>
110+
</div>
111+
112+
<div class="nav-item" x-data="{open: false}" @click.away="open= false">
113+
<button type="button" @click="open=!open" x-bind:aria-expanded="open">
114+
Community <i class="fa-solid fa-chevron-down text-white/70 dark:text-slate-950/70"></i>
115+
</button>
116+
117+
<div x-cloak @click="open=false; mobileNavOpen=false;" x-transition x-show="open" role="menu"
118+
aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
119+
<div role="none">
120+
<a href="{{ '/guides/engineering/issues' | relative_url }}" role="menuitem" class="group"
121+
tabindex="-1">
122+
<i class="fa-solid fa-screwdriver-wrench"></i> Contribute a Fix / Report an Issue
123+
</a>
124+
</div>
125+
<div role="none">
126+
<a role="menuitem" class="group" href="{{ '/community/projects/' | relative_url }}">F# Community Projects</a>
127+
<a role="menuitem" class="group" href="http://www.fssnip.net/">F# Code Snippets</a>
128+
<a role="menuitem" class="group"
129+
href="http://codereview.stackexchange.com/questions/tagged/f%23">F# Code Review <span
130+
class="badge">unaffiliated</span></a>
131+
</div>
132+
<div role="none">
133+
<a role="menuitem" class="group" href="https://community.fsharp.org/user_groups">User
134+
Groups</a>
135+
<a role="menuitem" class="group" href="https://community.fsharp.org/speakers">Speakers
136+
Program</a>
137+
</div>
138+
<div role="none">
139+
<a role="menuitem" class="group" href="https://forums.fsharp.org">
140+
<i class="fa-solid fa-table-list"></i> Forum
141+
</a>
142+
<a href="{{ '/guides/slack' | relative_url }}" role="menuitem" class="group" tabindex="-1">
143+
<i class="fa-brands fa-slack"></i> Slack
144+
</a>
145+
<a role="menuitem" class="group" href="https://discord.gg/R6n7c54">
146+
<i class="fa-brands fa-discord"></i> Discord <span class="badge">unaffiliated</span>
147+
</a>
148+
<a href="https://bsky.app/starter-pack/blizard.io/3la4zswhqbt2e" role="menuitem"
149+
class="group" tabindex="-1">
150+
<i class="fa-brands fa-bluesky"></i> Bluesky <span class="badge">unaffiliated</span>
151+
</a>
152+
<a role="menuitem" class="group" href="https://x.com/search?q=%23fsharp">
153+
<i class="fa-brands fa-x-twitter"></i> X.com <span class="badge">unaffiliated</span>
154+
</a>
155+
<a role="menuitem" class="group" href="https://www.reddit.com/r/fsharp/">
156+
<i class="fa-brands fa-reddit"></i> Reddit <span class="badge">unaffiliated</span>
157+
</a>
158+
<a role="menuitem" class="group" href="http://stackoverflow.com/questions/tagged/f%23">
159+
<i class="fa-brands fa-stack-overflow"></i> StackOverflow <span
160+
class="badge">unaffiliated</span>
161+
</a>
162+
</div>
163+
</div>
164+
</div>
165+
166+
<div class="nav-item" x-data="{open: false}" @click.away="open= false">
167+
<button type="button" @click="open=!open" x-bind:aria-expanded="open">
168+
Foundation <i class="fa-solid fa-chevron-down text-white/70 dark:text-slate-950/70"></i>
169+
</button>
170+
171+
<div x-cloak @click="open=false; mobileNavOpen=false;" x-transition x-show="open" role="menu"
172+
aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
173+
<div role="none">
174+
<a role="menuitem" href="https://foundation.fsharp.org">Mission statement</a>
175+
<a role="menuitem" href="https://foundation.fsharp.org/join">Join</a>
176+
<a role="menuitem" href="https://foundation.fsharp.org/announcements">Announcements</a>
177+
<a role="menuitem" href="https://foundation.fsharp.org/member_roster">Member Roster</a>
178+
<a role="menuitem" href="https://foundation.fsharp.org/code_of_conduct">Code of Conduct</a>
179+
<a role="menuitem" href="https://foundation.fsharp.org/donate">Donate</a>
180+
<a role="menuitem" href="https://foundation.fsharp.org/logo">F# Logo</a>
181+
<a role="menuitem" href="https://foundation.fsharp.org/contact">Contact</a>
182+
</div>
183+
</div>
184+
</div>
185+
186+
<button role="button" type="button" class="w-6 ml-2">
187+
<i x-show="theme == null"
188+
@click="localStorage.theme = 'dark'; theme = 'dark'; document.documentElement.classList.add('dark')"
189+
class="ml-auto fa-solid fa-circle-half-stroke"></i>
190+
<i x-cloak x-show="theme === 'dark'"
191+
@click="localStorage.theme = 'light'; theme = 'light'; document.documentElement.classList.remove('dark')"
192+
class="ml-auto fa-solid fa-moon"></i>
193+
<i x-cloak x-show="theme === 'light'"
194+
@click="localStorage.removeItem('theme'); theme = null; if (window.matchMedia('(prefers-color-scheme: dark)').matches) document.documentElement.classList.add('dark')"
195+
class="ml-auto fa-solid fa-sun"></i>
196+
</button>
197+
</div>
198+
199+
</div>
200+
201+
202+
</div>
203+
204+
<div x-cloak @click="mobileNavOpen=false" x-transition.opacity.duration.300 x-show="mobileNavOpen"
205+
class="fixed inset-0 top-12 z-10 bg-black/30" ></div>
206+
207+
208+
</nav>
209+
210+
<div class="htmx-indicator" hx-preserve id="loading-strip"></div>
211+
212+

‎_includes/usemenu.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<div x-cloak @click="open=false; mobileNavOpen=false;" x-transition x-show="open" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
2+
<div role="none">
3+
<a href="{{ '/use/mac/' | relative_url }}" role="menuitem" class="group" tabindex="-1"><i class="fa-brands fa-apple"></i> F# on Mac</a>
4+
<a href="{{ '/use/linux/' | relative_url }}" role="menuitem" class="group" tabindex="-1"><i class="fa-brands fa-linux"></i> F# on Linux</a>
5+
<a href="{{ '/use/windows/' | relative_url }}" role="menuitem" class="group" tabindex="-1"><i class="fa-brands fa-microsoft"></i> F# on Windows</a>
6+
</div>
7+
<div role="none">
8+
<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>
9+
<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>
10+
<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>
11+
<a href="{{ '/use/notebooks/' | relative_url }}" role="menuitem" class="group" tabindex="-1"><i class="fa-solid fa-book"></i> F# for Jupyter Notebooks</a>
12+
</div>
13+
<div role="none">
14+
<a href="{{ '/use/browser/' | relative_url }}" role="menuitem" class="group" tabindex="-1"><i class="fa-solid fa-globe"></i> F# in the browser</a>
15+
</div>
16+
</div>

0 commit comments

Comments
 (0)