Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/panoply/spx
⚡ Single Page XHR for enhancing SSR powered web applications.
https://github.com/panoply/spx
pjax spa spx ssr xhr
Last synced: 3 days ago
JSON representation
⚡ Single Page XHR for enhancing SSR powered web applications.
- Host: GitHub
- URL: https://github.com/panoply/spx
- Owner: panoply
- License: other
- Created: 2021-03-07T17:52:02.000Z (almost 4 years ago)
- Default Branch: next
- Last Pushed: 2024-12-21T00:58:03.000Z (about 1 month ago)
- Last Synced: 2025-01-17T12:15:38.643Z (10 days ago)
- Topics: pjax, spa, spx, ssr, xhr
- Language: TypeScript
- Homepage: https://spx.js.org
- Size: 4.96 MB
- Stars: 42
- Watchers: 6
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: docs/readme.md
- License: LICENSE
Awesome Lists containing this project
README
# SPX Documentation
Documentation website for SPX (Single Page XHR). Built using [11ty](https://www.11ty.dev/docs/) and served up on [Netlify](https://netlify.com). The documentation is leveraging SPX so feel free to reference as a strap in your next project.
Visit the docs: [spx.js.org](https://spx.js.org)
### Supports
- Generated using 11ty
- SCSS to CSS Compilation with SASS Dart
- CSS Post Processing via PostCSS + CSSPurge
- TypeScript Transpilation using TSUP
- SVG Sprites with SVGO
- HTML Minification with HTML Terser
- Documentation Version generation
# Development
All dependencies are included within the `package.json` file. ESLint, Prettier and Stylelint is assumed to be installed globally but available as optional dependencies. Documentation is written in markdown and views are composed in Liquid. Frontmatter and JSON data files are used for the order of navigation and various other reference specific information.
### Commands
After installing, run `pnpm dev` to start in development mode. Documentation will build and be deployed via Github actions.
```cli
pnpm dev # Starts development in watch mode
pnpm stage # Serve up via Netlify for staging
pnpm build # Builds for production and applies version copy .zip
pnpm release # Runs netlify build, generates sitemap and deploys
pnpm 11ty:build # Triggers an 11ty build
pnpm 11ty:watch # Starts 11ty in watch mode with server
pnpm sass:build # Compiles SASS into CSS
pnpm sass:watch # Start SASS in watch mode
pnpm ts:build # Build production JS bundle
pnpm ts:watch # Start ESBuild in watch mode
```
# Markdown Customizations
Markdown files will are processed using [markdown-it](https://github.com/markdown-it/markdown-it) and a couple of custom plugins. Frontmatter and JSON data files are used to the order of navigation and various other reference specific information.
- [Grid Container](#grid-container)
- [Rule Heading](#rule-heading)
- [Rule Showcase](#rule-showcase)
## Grid Container
Grid access is made possible using fenced containers in the markdown. The `grid` keyword along with quadruple `::::` or triple `:::` markers will result in content encapsulation in the output rendering. The [Brixtol Bootstrap](https://brixtol.github.io/bootstrap/) variation grid system and CSS framework class utilities are available and used for styling.
### INPUT
Take the following code structure in `.md` files:
```md
:::: grid row jc-center ai-center
::: grid col-sm-6 col-md-4
Lorem ipsum dolor sit...
:::
::: grid col-6 col-md-8
Lorem ipsum dolor sit...
:::
::::
```
### OUTPUT
The generated output result in `.html` files:
```html
Lorem ipsum dolor sit...
Lorem ipsum dolor sit...
```
# Versions
Version copies are generated automatically for documentation based on SPX versions. Generation happens in the TSUP (TypeScript → JavaScript) bundle process. When SPX versions increment and documentation differs then the previous version will be added to the distributed output (`public/v`). The `.eleventy.js` configuration file provides a Liquid short code for versions made available via `{% versions %}` tag.
The [version](/docs/version/) directory contains `.zip` files of previously generated documentation in accordance with SPX versions. Running a **production** build (i.e: `pnpm build`) will automatically create an archive of distributed docs and add the `.zip` copy within this directory. The production build will extract contained documentation versions and add them to the `public/v` directory upon deployment.
# License
Licensed under **[MIT](#LICENSE)**