Skip to content

Commit

Permalink
feat: website 2.0 (#440)
Browse files Browse the repository at this point in the history
* wip: clear out previous implementation

* wip: setup build stack

* fix build, update iosevka

* Set css vars

* Use tailwind config for palette

* Test loading svg from url

* Add bold typeface

* tmp: comment out problematic src

Issue with webpack, doesn't know what to do with an url that has a file
extension I think, it tries to handle it like local assets

* Refactor parse palette

Previously i modified the accumulator, which works just fine, kinda just
really irks me that I'm mutating something in a functional pattern

* Replace webpack with vite, fix tailwind opts

Gonna try out Alpine, which makes a lot of webpacks features mute. I
still needed a dev server though, so I figured I'd give vite a go,
seeing as its often used in alpine examples.

Tailwind opts used in my copypasta was deprecated, jit isn't needed
anymore, and purge is now content, with some caveats

* Move assets to root folder

* Setup triangle and circle header

* Fix header size

* Add dots next to title

* Hide dot on small screen

* Use local glyph

I might animate this, so I cant use the static asset for this

* Include secondary colors in tailwind palette

Use key instead of termcol for names, unfortunately it will result is
some odd casing, but it'll work

* Fix dot color

* Add dev script

* Fix scaling issues

* Add copy, modify nav menu when scaled

* Add hover effect

* Remove dangling closing tag

* Give text content more width

* Add favicon

* Setup highlight js

* Update initial paragraph

* Fix code example container width

* Fix issue with non-shrinking container

* Add tabs above pre/code (noop)

* Fix tab alignment, add click handler

* Render language example text reactivly

* Fix highlighting class issue

Use generated html in languages obj, this way we don't have to
reinitialize highlight js, and no issue swapping classname

* Add remaining language examples

* Remove dup content key, remove deprecated opt

* Add fibonacci to various examples

Except vim, which didn't have one, so I did number to binary fn for no
particular reason

* Have the code area be static (416px)

* Make tabs full width

* Only use tailwind

Moved all custom styles in style.css to tailwind classes, or config or both

* Use @apply and extract a few repeated classes

* Fix dangling h tag

* Add preview copy, reuse link class

* Reword, adjust spacing

* Add link to rosetta code

* Adjust spacing

* Prevent default using alpine

Change click handler signature, we no longer need the event object

* Rearrange import statements

* Fix issue where tab border would push label down

by like 1-2px, subtle but annoying

* Fix tabs on mobile screens

Vertical scroll

* Extract tab classes, fix label movement issue

Fixed an issue reintroduced with the previous commit, when we didn't set
a border, the label text moved, so I set it to transparent so that the
layout is the same for both states

* Update title

* Resolve root path

* Make logo clickable

* Hoist state to main tag

I suppose at this point I could use global state, but this works to

* Rearrange state

Isolate tab state again, want to reset on home nav

* Wrap main section, unwrap nav

* Fix logo scaling issue

Resolves the menu scaling issue as well

* Setup basic navigation

* Use hash based navigation

Needed to create some sub sections, and its controlled by alpine, but I
still want an entry in history so I setup basic hashed based navigation.

* Update title

Bit more descriptive

* Fix text centering issue

Used justify space between, but the text wasn't centered in the middle,
wrap in full width span, and set individual text alignment to fix.

* Add devicons

* Add proof of concept for the themes layout

* Use width, not max-width for main container

* Add emacs svg

* Populate themes object, loop and set template

Also had to fix the svg css rule to color every icon

* Add thmux theme and icon

* Add terminal theme

* Fix grid layout when scaling down

* Add missing img alt attr

* Add meta description

* Add keywords to theme obj

Plan on enabling search, and just a plain text match would work, but
using tags we can allow for broader specificity

* Fix link

* Rename homepage to repository

* Add steamdeck theme, rename repo key

Fix typo on temp placeholder (yes whatever)

* Add label to themes obj

Instead of using key as label, sometimes we need space or other chars
that are not valid key

* Add insomnia theme

* Add font awesome

* Add gui, shell repos to themes

Add missing keywords for insomnia

* Remove width/height attrs

* Optionally render link el, fall back to span

* Change themes obj to array, rename label to name

* Setup filter input, attach query

* Filter themes on names and keywords

* Update steam deck to steam themes repo

* Add palette section

* Fix urls

* Add icons to list items, setup custom list-style

* Setup fetching palette version

* Add version paragraph

* Hide paren when version is missing

* Use undefined for a missing result

remove return statement, we don't use it. Use optional chaining when
getting value from json, short circuit to undefined, so a failed request
will not error out

* Update placeholder

* Add web assets section to resources

* Wrap resource sections

Helps with spacing etc

* Add deprecated palette

* Adjust resource section spacing

* Add missing semicolons and add inline-code

* Use code class for command example

* Add graphic assets section

* Add misc section

* Match link style everywhere

Extra span text shouldn't be part of the link

* Split up pages

Used hash/state based navigation, but I'm not a fan, a lot of finagling
to get working what a simple folder structure does for free

There is some copy pasting going on, it was either that or setup some
templating ala handlebars, I opted for the former, to keep things simple

* Update titles and descriptions for each page (SEO)

* Update placeholder text

Trying to indicate that you can search for more than whats in plain
text (tags)

* Add initial community p

* Add missing meta charset

* Update deps

* Fix security issue (audit)

* Ignore tmp files

* Install lodash, octokit

* Rearrange deps, regen lock file

* Add node fetch script

I want to populate the site with some data from github, notably
contributors, but due to rate limit and authentication I opted to setup
a script that dumps the data we need. Only at build time, and it's only
publicly available information. No auth required, but we might hit a
rate limit, depending on when we dispatch this script, or how often.

wip: fetch scripts

wip: contributors

wip: contributors

wip: refactor

wip: cleanup, refactor

Set exit status

wip: remove old curl script

* Fetch members, filter from contributors

* Add clean script

Remove untracked github json file

* Setup writing to file

* Handle errors and exit status

* Comments

* Setup state and render github data

* Fix hyphen mistake

* Add a warning when github token is undefined

* Add fetch script to start and build npm scripts

We need this file to compile the site, but we don't track it, so in
essence it needs to always exist by executing the fetch script

* whitespace

* Refactor for better error handling

I wanted a single break point, where the process would exit on first
error. Say we hit some error while in a loop, it'll just keep going,
hitting an error each time.

This way it'll print the error, then exit with a non-zero value

* Filter out dependabot users

* Add border to avatars

* Remove dup class attribute

* Remove html hint config

Using default config, no need for the below rule, it was a leftover from
a handlebars project

* Remove dangling br element

Not ever sure if br elements are good form, or just bad practice,
but linter complained about dangling tag

* Add discord section

* Add merchandise section

* Rewrite discord copy, add badge

Rewrote the copy, was a bit short. Added the badge we use in the various
readmes, nice to get a user count.

* Add page indicator

* Reword copy

Says "first and foremost", without providing a second to the first

* Comment out discord icon

Not using icons on any other heading...

* Fix missing centering for discord headline

Also center links < sm

* Remove script from start + build

Relegate to a separate script, that fetches data, can be called on
demand instead of each call to build.

* Fix build, prepend root path to index paths

Root path not taken into account when building for production, only
reload server.

* Remove debug log statement

* Update docs

* Fix output dir

* ci: add fetch job, remove arg from build command

* ci: fix test script

* ci/test: setup env for fetch script

* ci/deploy: setup env for deploy script

* Fix casing

Co-authored-by: Birger J. Nordølum <contact@mindtooth.no>

* Move tailwind to dev deps

* Fix casing

Co-authored-by: Birger J. Nordølum <contact@mindtooth.no>

* Use revised merch copy

I messed up and discarded a recent commit improving this

e9d082d

* Use latest revision of deploy file + modifications

I missed 3ed699f when merging master, did -s ours but failed to notice
commits other than dependabot commits.

* doc: fix casing

Co-authored-by: Birger J. Nordølum <contact@mindtooth.no>

* doc: fix casing

Co-authored-by: Birger J. Nordølum <contact@mindtooth.no>

* doc: fix missing period, fix casing

Co-authored-by: Birger J. Nordølum <contact@mindtooth.no>

* doc: add missing colon

Co-authored-by: Birger J. Nordølum <contact@mindtooth.no>

* doc: fix missing period

Co-authored-by: Birger J. Nordølum <contact@mindtooth.no>

* Use force option when cleaning

Prevents error on missing file

Co-authored-by: Birger J. Nordølum <contact@mindtooth.no>

* Fix missing oxford comma in meta desc

Co-authored-by: Birger J. Nordølum <contact@mindtooth.no>

* Rephrase srcery convert description

* Capitalize Srcery

* Apply suggestions from code review

Mostly casing, punctuation, and rephrasing. Thanks @MindTooth

Co-authored-by: Birger J. Nordølum <contact@mindtooth.no>

* Use etc long word to avoid punctuation issues

* Apply suggestions from code review

Missed a few suggestions in previous suggestion commit, might rebase.

Co-authored-by: Birger J. Nordølum <contact@mindtooth.no>

* Fix npm script call

Co-authored-by: Birger J. Nordølum <contact@mindtooth.no>

---------

Co-authored-by: Birger J. Nordølum <contact@mindtooth.no>
  • Loading branch information
roosta and MindTooth committed Aug 9, 2023
1 parent 6229944 commit 81117fa
Show file tree
Hide file tree
Showing 69 changed files with 5,544 additions and 4,381 deletions.
16 changes: 16 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
module.exports = {
"env": {
"browser": true,
"node": true,
"es2021": true
},
"extends": "eslint:recommended",
"parser": "@babel/eslint-parser",
"parserOptions": {
"ecmaVersion": 13,
"sourceType": "module"
},
"rules": {
"no-unused-vars": "warn"
}
};
3 changes: 3 additions & 0 deletions .github/workflows/deploy.yml
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@ jobs:
- name: Use Node.js
uses: actions/setup-node@v3
- run: npm ci
- run: npm run fetch
env:
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- run: npm run build --if-present

- name: Upload artifact
Expand Down
5 changes: 5 additions & 0 deletions .github/workflows/test.yml
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,10 @@ jobs:
- name: Install packages
run: npm ci

- name: Fetch data
run: npm run fetch
env:
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

- name: Run tests (build is okay)
run: npm run build
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,5 @@ dist
parcel-debug*
dist
.parcel-cache
*.tmp
src/github.json
73 changes: 62 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,38 @@
![Srcery Banner](https://raw.githubusercontent.com/srcery-colors/srcery-assets/master/title.png)
<p align="center">
<img src="https://raw.githubusercontent.com/srcery-colors/srcery-assets/master/src/logo_border.svg">
</p>

<p align="center">
<img src="https://github.com/srcery-colors/srcery-colors.github.io-src/workflows/Build%20&%20Deploy/badge.svg">
<a href="https://snyk.io/test/github/srcery-colors/srcery-colors.github.io-src?targetFile=package.json">
<img src="https://snyk.io/test/github/srcery-colors/srcery-colors.github.io-src/badge.svg?targetFile=package.json">
</a>
<a href="https://github.com/srcery-colors/srcery-colors.github.io-src/blob/master/LICENSE">
<img src="https://img.shields.io/github/issues/srcery-colors/srcery-colors.github.io-src.svg">
</a>
<a href="https://github.com/srcery-colors/srcery-colors.github.io-src/issues">
<img src="https://img.shields.io/github/issues/srcery-colors/srcery-colors.github.io-src.svg">
</a>
<a href="https://github.com/srcery-colors/srcery-colors.github.io-src/network">
<img src="https://img.shields.io/github/forks/srcery-colors/srcery-colors.github.io-src.svg">
</a>
<a href="https://github.com/srcery-colors/srcery-colors.github.io-src/stargazers">
<img src="https://img.shields.io/github/stars/srcery-colors/srcery-colors.github.io-src.svg">
</a>
</p>

![Build & Deploy](https://github.com/srcery-colors/srcery-colors.github.io-src/workflows/Build%20&%20Deploy/badge.svg)
[![Known Vulnerabilities](https://snyk.io/test/github/srcery-colors/srcery-colors.github.io-src/badge.svg?targetFile=package.json)](https://snyk.io/test/github/srcery-colors/srcery-colors.github.io-src?targetFile=package.json)
[![GitHub license](https://img.shields.io/github/license/srcery-colors/srcery-colors.github.io-src.svg)](https://github.com/srcery-colors/srcery-colors.github.io-src/blob/master/LICENSE)
[![GitHub issues](https://img.shields.io/github/issues/srcery-colors/srcery-colors.github.io-src.svg)](https://github.com/srcery-colors/srcery-colors.github.io-src/issues)
[![GitHub forks](https://img.shields.io/github/forks/srcery-colors/srcery-colors.github.io-src.svg)](https://github.com/srcery-colors/srcery-colors.github.io-src/network)
[![GitHub stars](https://img.shields.io/github/stars/srcery-colors/srcery-colors.github.io-src.svg)](https://github.com/srcery-colors/srcery-colors.github.io-src/stargazers)

## Introduction

This is the repo for the `srcery` website. All contributions are
welcome and encouraged.

[View site](https://srcery-colors.github.io/)
[View site](https://srcery.sh)

## Web Stack

* [Snowpack](https://snowpack.dev)
* [Vite](https://vitejs.dev/)
* [Alpine.js](https://alpinejs.dev/)
* [PostCSS](https://postcss.org)
* [TailwindCSS](https://tailwindcss.com)

Expand All @@ -28,12 +44,47 @@ Install dependencies:
npm install
```

Building the site. This opens the dev server in a new browser window/tab.
Fetch GitHub data

```
npm run fetch
```

Running the development server

```sh
npm run serve
npm start
```

Runs a live reload Vite server, see `stdout` for port

### GitHub token

The fetch script fetches GitHub data, you should be able to fetch a few times
before the rate limit it reached.

If you do hit the rate limit when trying to fetch data, create a scoped auth
token, doesn't need any permissions, and define it in the environment variable
`$GH_TOKEN` when running the fetch script.

## Building for production

- [Vite documentation](https://vitejs.dev/guide/build.html)

To build for production, make sure you have a copy of the `github.json` file in `src`, then run:

```
npm run build
```

Alternatively you can run:

```
npm run preview
```

To preview the production build on a local server.

## License

MIT License. See `LICENSE` for more information.
Loading

0 comments on commit 81117fa

Please sign in to comment.