Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
61 changes: 29 additions & 32 deletions .github/workflows/static.yml
Original file line number Diff line number Diff line change
@@ -1,49 +1,46 @@
name: Deploy SvelteKit to GitHub Pages
# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
# Runs on pushes targeting the default branch
push:
branches: [main]
branches: ["main"]

# 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

# 2 jobs: build the SvelteKit static site, and deploy the built site to GitHub Pages
# 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:
# Single deploy job since we're just deploying
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest

steps:
# Check out the repo code
- uses: actions/checkout@v4

# Use the Node version defined in .nvmrc
- uses: actions/setup-node@v4
with:
node-version-file: .nvmrc
cache: npm # cache node_modules for faster builds
- name: Checkout
uses: actions/checkout@v4

- name: Install dependencies
run: npm ci # ci (not install) to install exact versions from package-lock.json
- name: Setup Pages
uses: actions/configure-pages@v5

# Build the SvelteKit project
- name: Build project
run: npm run build

# Upload build output as artifact
- uses: actions/upload-pages-artifact@v3
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: ./build # SvelteKit static output folder

deploy:
needs: build # make the build artifact available here in deploy job
runs-on: ubuntu-latest
# Upload entire repository
path: '.'

environment:
name: github-pages
url: ${{ steps.deploy.outputs.page_url }} # just a convenience, adds page url to action summary page

steps:
- id: deploy
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
1 change: 0 additions & 1 deletion .npmrc

This file was deleted.

1 change: 0 additions & 1 deletion .nvmrc

This file was deleted.

1 change: 1 addition & 0 deletions CNAME
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
seattlecommunitynetwork.org
79 changes: 1 addition & 78 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,78 +1 @@
# SCN website (operated by LCL)

Code repo for the seattlecommunitynetwork.org website.

This site is built using [SvelteKit](https://svelte.dev/docs/kit/introduction). SvelteKit supports building fully static sites - which is how this site is built. SvelteKit uses NodeJS to run the static site build.

The website is hosted on GitHub pages. See `./.github/workflows/static.yml` for deployment info.


## How to update this website

You'll want to run the site locally so you can preview your changes. It's fairly simple to setup if you have any programming experience.

Make your changes and confirm them in your locally running site. Commit change to a feature Branch, and create a pull request in GitHub.

The changes will then need to be reviewed and merged. After merging, a GitHub Action (`./.github/workflows/static.yml`) will kick off to build and deploy the site. This should only take 5 mins, after which your changes will be live!


### Local setup

**Install NodeJS** - two options:

1. Download and install NodeJS https://nodejs.org/en/download
See `./.nvmrc` for the version of NodeJS to install
1. Use NVM https://github.com/nvm-sh/nvm

**Setup**

1. Clone the repo
1. Using NVM?
1. `nvm install` to install the correct NodeJS version
1. `nvm use` to use the installed NodeJS version
1. Install dependencies with `npm install`
1. Start a development server `npm run dev`

Open your browser to http://localhost:5173


### Update text

All website text is in `./messages/en.json`.

Adding or removing text sections will most certainly require updating a template


### Update templates

The website is built with a bunch of `*.svelte` files. Each file has a section for JS, HTML, and CSS.

Each page of the website starts with a `+page.svelte` template, eg: `./src/routes/+page.svelte` for the homepage, and `./src/routes/about-us/+page.svelte` for the About Us.

There's 1 layout template used for all pages - `./src/routes/+layout.ts`.

There is a variety of reusable components in `./src/lib/components/*.svelte`


## Tests

There are automated tests using Playwright.

- run this the first time, to install Playwright dependencies: `npx playwright install`
- `npm run test` to run tests


## Production build

To create a *local* production version of your app:

1. `npm run build`
1. `npm run preview`
1. open http://localhost:4137


## Redirects

No good way to do this with GitHub pages, so we need to create stub sveltekit pages that do a client side redirect.

See `./create-redirect.js`.
#SCN website (operated by LCL)
210 changes: 210 additions & 0 deletions aboutUs.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,210 @@

<!DOCTYPE html>
<!-- home page ?-->
<html>

<head> <!-- probably on all pages -->

<link rel="stylesheet" href="bootstrap-5.0.1-dist/css/bootstrap.css">
<script src="bootstrap-5.0.1-dist/js/bootstrap.bundle.js"></script>
<link rel="stylesheet" href="style.css">

</head>

<body>
<!--nav bar with header and tabs-->
<!-- nave bar should have click able drop downs-->
<header>
<a href = "index.html">
<img class = "img-logo" src = "assets/logo.png" alt = "Local Connectivity Lab Logo">
</a>
<h1>
<a id = "landing-link" href = "index.html"> Seattle Community Network </a>
</h1>
</header>

<!--NAV BAR CODE-->
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="aboutUs.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://docs.seattlecommunitynetwork.org/">Docs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="ourSites.html">Get Connected</a>
</li>
<li class="nav-item">
<a class = "nav-link" href="https://coverage.seattlecommunitynetwork.org/">Map</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://docs.seattlecommunitynetwork.org/community/space/">Visit Our Space</a>
</li>
<li class="nav-item">
<a class="nav-link" href="donate.html">Donate</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://seattlecommunitynetwork.square.site/">Merch!</a>
</li>
</ul>
</div>
</div>
</nav>

<!-- "About Us" Section-->
<div class = "section-min-sizer">
<div class = basic-box>
<h2> Local Connectivity Lab </h2>
<div>
<p>
The Seattle Community Network began in 2019 as a project of the
Local Connectivity Lab (LCL), a 501(c)(3) registered non-profit
that develops and deploys open source cellular network technologies
to help people run their own community networks. LCL works in
partnership with the University of Washington (UW) to share free
or low-cost broadband access in higher-need areas throughout the
city, making use of existing city network infrastructure such as
buildings and fiber-optic cables to extend coverage to more people.
Our mission is to facilitate community focused technology
development and research in support of low-income, marginalized
populations and groups.
See our most recent <a href = "https://tinyurl.com/scn-blog-2">blog post</a> for the latest updates!
</p>
</div>
<img class = "aboutUs-img" src = "assets/aboutUs1.jpg" alt = "add image soon">

</div>
</div>
<!-- Mission-->
<div class=basic-box>

<h2> Mission </h2>
<p>
LCL seeks to democratize knowledge, skills, and resources to enable
people to establish and run their own local, community-centered, and
community-owned Internet access networks and digital infrastructure.
</p>

<img class = "aboutUs-img" src = "assets/aboutUs2.jpg" alt = "add image soon">

</div>

<!-- Vision -->
<div class=basic-box>
<h2> Vision </h2>
<p>
We envision a world where no one is excluded from access to the Internet,
and where anyone can achieve the expertise and capability to bring
communications infrastructure to their community and improve their
quality of life.
</p>
<img class = "aboutUs-img" src = "assets/aboutUs3.jpg" alt = "add image soon">

</div>

<!-- Values -->
<div class=basic-box>
<div>
<h2> Values </h2>
<p>
We value the ability to access the Internet and all public information
and digital resources therein as a human right.
</p>
<ul class="bulleted-list">
<li class="bulleted-list-point">Digital privacy of our users and partner organizations</li>
<li class="bulleted-list-point">Collaboration, especially with the communities and organizations we work with </li>
<li class="bulleted-list-point">Care, consideration, allyship, and peer mentorship between individuals within our organization</li>
<li class="bulleted-list-point">Education, sharing, and capacity-building- emphasize teaching and dissemination of information and skills</li>
<li class="bulleted-list-point">Openness, transparency, and accountability of our organization and its processes</li>
<li class="bulleted-list-point">Democratization and inclusiveness of decision processes among stakeholders</li>
<li class="bulleted-list-point">Long-term sustainability of our technology deployments and community structures</li>
<li class="bulleted-list-point">Equity in planning for resource allocation, programming, and contribution</li>
</ul>
</div>
</div>
<!-- Our Partners -->
<!-- ADD PARTNERS' LINKS SOON -->
<!--<h2> Our Partners </h2>
<img id = "partners-image" src = "assets/partners.png" alt = "partners logos">
-->
<!--<div class = "flex-container">
<a href = "">
<img class = "flex-image" src = "assets/derp Timo.jpg" alt = "add image soon">
</a>
<a href = "">
<img class = "flex-image" src = "assets/derp Timo.jpg" alt = "add image soon">
</a>
<a href = "" >
<img class = "flex-image" src = "assets/derp Timo.jpg" alt = "add image soon">
</a>
<a href = "">
<img class = "flex-image" src = "assets/derp Timo.jpg" alt = "add image soon">
</a>
<a href = "">
<img class = "flex-image" src = "assets/derp Timo.jpg" alt = "add image soon">
</a>
</div>-->
<div class = landing-tan style = "margin-bottom:50px;">
<h2> Follow us on social media! </h2>
<br>
<div class = "flex-container">
<a href ="https://www.instagram.com/seattlecommnet/" > <img class = "flex-logo-round" src = "assets/Instagram logo purple.png" alt = "purple instagram logo"></a>
<a href ="https://twitter.com/SeattleCommNet" > <img class = "flex-logo-round" src = "assets/Twitter logo purple.png" alt = "purple twitter logo"></a>
<a href ="https://www.facebook.com/SeattleCommNet" > <img class = "flex-logo-round" src = "assets/Facebook logo purple.png" alt = "purple facebook logo"></a>
</div>
<br>

<a href = "donate.html"><button id = "support-our-mission-button">
Donate to Support our Mission &rarr;
</button></a>
</div>
<!-- FOOTER -->
<div class = "footer">
<div class = "flex-container">
<div class = "flex-item-left">
<h3> Address </h3>
<p class = "footer-text">
3800 E Stevens Way NE, Seattle, WA 98195
<br>
lcl@seattlecommunitynetwork.org
</p>
<a href = "https://www.instagram.com/seattlecommnet/"><img class = "logo" src = "assets/IG_icon_circle.png" alt = "Instagram logo"></a>
<a href = "https://twitter.com/SeattleCommNet"><img class = "logo" src = "assets/twitter_icon_circle.png" alt = "twitter logo"></a>
<a href = "https://www.facebook.com/SeattleCommNet"><img class = "logo" src = "assets/facebook_icon_circle.png" alt = "Facebook logo"></a>
<br><br>
</div>

<div class = "flex-item-left">
<h3> Mission </h3>
<p class = "footer-text">
To facilitate community focused technology development and
research in support of low-income, marginalized populations
and groups.
</p>
</div>

<div class = "flex-item-left">
<div class = "flex-item-left">
<button onclick="location.href='https://discord.gg/gn4DKF83bP'" id = "subscribe-button">
&nbsp; Join our Discord &nbsp;
</button>
<br><br>
<button onclick="location.href='https://groups.google.com/a/seattlecommunitynetwork.org/g/local-connectivity-lab/'" id = "subscribe-button">
Subscribe to Mailing List
</button>
</div>
</div>
</div>
</div>s
</body>

</html>
Loading