diff --git a/Makefile b/Makefile index a0fc8c115..8420166e7 100644 --- a/Makefile +++ b/Makefile @@ -2,6 +2,8 @@ build: npm install curl -o workspace.json -L "https://github.com/packagecontrol/thecrawl/releases/download/crawler-status/workspace.json" npx @11ty/eleventy + curl -o _site/channel.json -L "https://github.com/packagecontrol/thecrawl/releases/download/the-channel/channel.json" + curl -o _site/channel_st3.json -L "https://github.com/packagecontrol/thecrawl/releases/download/the-st3-channel/channel_st3.json" lint: npx eslint diff --git a/_includes/header.njk b/_includes/header.njk index aa0828930..bbfea4d69 100644 --- a/_includes/header.njk +++ b/_includes/header.njk @@ -1,23 +1,27 @@
- +
+ -

Package Control R

-

The Sublime Text package directory, {{ [ - "re-imagined", - "reassembled", - "rebooted", - "recompiled", - "refactored", - "reinvigorated", - "remastered", - "replenished", - "restarted", - "resurrected", - "revisited", - "rewired" - ] | random - }}.

+

Package Control R

+

The Sublime Text package directory, {{ [ + "re-imagined", + "reassembled", + "rebooted", + "recompiled", + "refactored", + "reinvigorated", + "remastered", + "replenished", + "restarted", + "resurrected", + "revisited", + "rewired" + ] | random + }}.

+
diff --git a/_includes/layout.njk b/_includes/layout.njk index f288f2fd9..a3a97a695 100644 --- a/_includes/layout.njk +++ b/_includes/layout.njk @@ -1,5 +1,5 @@ - + {% include "head.njk" %} diff --git a/about.md b/about.md new file mode 100644 index 000000000..c01930d57 --- /dev/null +++ b/about.md @@ -0,0 +1,75 @@ +--- +layout: layout.njk +title: About / FAQ +--- + +# About + +**Package Control R** is the community-driven package management solution for Sublime Text. It's a front-to-back, top-to-bottom, rewrite of the original [packagecontrol.io](https://packagecontrol.io), managed entirely by the Sublime Text community. + +The system consists of several components: + +- [This website](https://packages.sublimetext.io), listing publicly available packages for Sublime Text. +- A registry of libraries (a.k.a. dependencies) available for package authors. +- A [registry of packages](https://github.com/wbond/package_control_channel), where you can submit your package to be published here. +- A [crawler](https://github.com/packagecontrol/thecrawl) that compiles the data that drives the system: it finds new versions of all packages and makes them available to the site and to the Package Control package. +- The [Package Control package](https://packages.sublimetext.io/packages/Package%20Control/) that provides the user interface inside Sublime Text to find, install, and update packages. + +You can start using the new hotness today by replacing the existing channel in your Package Control package settings with the new one: + +```sh +https://packages.sublimetext.io/channel.json +``` + +If you're still using Sublime Text 3, you can use: +`https://packages.sublimetext.io/channel_st3.json` + +## Why does this website exist? + +The original [Package Control](https://packagecontrol.io) is aging. It was built in a different time, when many of the tools we take for granted today were not available. It has seen some iterations during its time, but it has reached the end of the road in several ways. Most importantly, it's currently not possible for the community to ensure its ongoing stability and performance. + +Outages of certain aspects of the system over the past year or so have spurred members of the community (🙇‍♂️ [@kaste](https://github.com/kaste) and crew) to rebuild it from the ground up. + +Building this while keeping the original in place, allows us to iterate towards feature-completeness and stability. This also enables us to find new solutions that better fit the project's new "governance model". Hopefully we will eventually be able to fully replace Will Bond's original project (and domain name), but these things take time to organize properly. + +## State of affairs + +This project is a work in progress. Some features, like counting how often a package has been installed, are currently missing. While the project is in flux, much of the user facing aspects of Package Control remains unchanged to avoid disturbing users with potential breaking or disorienting changes. +The package registry is still in its "old" GitHub repository and might be moved eventually. The "old" website is still up and still much more visible than this new one. The "old" `channel.json` is still the default that's included in the Package Control package. + +However, the website is functionally very far along, features all packages, and is updated throughout the day with new release versions. And more importantly, the crawler and the `channel.json` it generates are fully functional and very reliable. + +You are very much invited to make the switch and come along for the ride! + +## Other F.A.Q. + +- Q: Where can I ask questions? + - A: On [Discord](https://discord.sublimetext.io/): look for the "#package-control" channel. +- Q: Where can I contribute or report issues? + - A: On [GitHub](https://github.com/packagecontrol/thecrawl/issues). +- Q: What does the "R" stand for? + - A: Rewrite, refactor, revisited... something along those lines 😉 +- Q: How do I even use this? + - A: Find a package you like using the search feature on the [homepage](/), then paste the name into the "Install Package" command in Sublime Text. The [existing documentation](https://packagecontrol.io/docs/usage) for this is still valid. + + diff --git a/static/style/header.css b/static/style/header.css index 4f9e9c6d2..31895024a 100644 --- a/static/style/header.css +++ b/static/style/header.css @@ -1,8 +1,14 @@ header { margin-bottom: 22px; - padding: 4px 1rem; + padding: 4px var(--side-padding); color: var(--foreground-lighter); + .inner { + max-width: 92rem; + margin: 0 auto; + position: relative; + } + * { margin: 0; padding: 0; @@ -16,22 +22,19 @@ header { color: var(--foreground); } - .hot { - color: var(--primary-accent); - font-style: italic; - } - nav { float: right; line-height: 1.33; padding-top: 1.33rem; + * + * { - margin-left: 1ex; + margin-left: 1.6em; } - @media (max-width: 600px) { - /* the links don't fit, but also appear in the footer so goodbye */ - display: none; + @media (max-width: 480px) { + [href="/"] { + display: none; + } } } } diff --git a/static/style/typography.css b/static/style/typography.css index 6896bf75c..a68d523e6 100644 --- a/static/style/typography.css +++ b/static/style/typography.css @@ -15,9 +15,9 @@ background-position-y: 26px !important; }*/ -pre, code { font-family: "IBM Plex Mono", monospace; + font-size: 0.92em; } html, diff --git a/static/styles.css b/static/styles.css index 004ecbf1c..b66507eb5 100644 --- a/static/styles.css +++ b/static/styles.css @@ -9,6 +9,11 @@ html { height: 100%; + + --side-padding: 1rem; + @media (min-width: 78rem) { + --side-padding: 1.6rem; + } } body { @@ -19,9 +24,15 @@ body { } main { - max-width: 80rem; + max-width: 78rem; margin: 0 auto; - padding: 0 1rem 3.2rem 1rem; + padding: 0 var(--side-padding) 3.2rem var(--side-padding); + + html.about-faq & { + /* limit paragraph length for readability */ + max-width: 48rem; + } + } a { @@ -49,6 +60,49 @@ section { } } +code { + background: var(--background-darker); + border: 1px solid var(--background-darkest); + padding: 0 4px; + border-radius: 3px; +} + +pre { + white-space: break-spaces; + background: var(--background-darker); + &:not(.fallback) { + border: 1px solid var(--background-darkest); + padding: 1rem; + } + code { + background: revert; + border: revert; + padding: revert; + border-radius: revert; + } +} + +.clipboard-wrapper { + position: relative; + &.copied pre { + background: var(--background-darkest); + } + pre { + transition: background .1s ease-out; + padding-right: 6em; + word-break: break-word; + } + button { + position: absolute; + top: 1rem; + right: 1rem; + margin: 0; + padding: 0; + background: transparent; + color: var(--primary-accent-darker); + } +} + .screenreader-only { width: 1px; height: 1px; @@ -58,6 +112,11 @@ section { overflow:hidden } +.hot { + color: var(--primary-accent); + font-style: italic; +} + .description { font-size: 25px; line-height: 44px; @@ -127,24 +186,11 @@ dl { code { background: var(--background); - border: 1px solid var(--background-darker); - padding: 0 4px; - border-radius: 3px; + border-color: var(--background-darker); } pre { - white-space: break-spaces; background: var(--background); - &:not(.fallback) { - border: 1px solid var(--background-darker); - padding: 1rem; - } - code { - background: revert; - border: revert; - padding: revert; - border-radius: revert; - } } }