1
Fork 0

Compare commits

..

No commits in common. "37848af05fdf5f33626e7ab2e1e9f67df302c07d" and "ce27fa886678ff42063390eaef1441a369da3099" have entirely different histories.

9 changed files with 4 additions and 185 deletions

View File

@ -1,101 +0,0 @@
# Development Guide
## Prerequisites
### Nix + Direnv
If you have [Nix](https://nixos.org/) with flakes enabled and [Direnv](https://direnv.net/) installed, all you need to do is `direnv allow` the directory and all the prerequisites will be automatically installed. This may take a moment on first load.
Firefox and git are excluded, which are assumed to already be present on your system.
### Manual
To build and develop Tildes Shepherd you will need:
* [git](https://git-scm.com)
* [NodeJS](https://nodejs.org) (recommended 18.16.0)
* [pnpm](https://pnpm.io) (recommended 8.6.0)
* [cargo-make](https://sagiegurari.github.io/cargo-make/)
* [Firefox](https://mozilla.org/firefox) (recommended at least 102.0)
## cargo-make
All the different tasks we'd want to do are setup in `Makefile.toml` to be used with `cargo-make` (or the `makers` alias).
In the Tasks section below you can find a list of all the tasks, or you can look at the Makefile itself, where all the tasks have a description of what they do.
### Environment
Two important environment variables are `BROWSER` and `NODE_ENV`.
`BROWSER` dictates what browser should be targeted, by default `BROWSER="firefox"`. To target Chromium set `BROWSER="chromium"`.
`NODE_ENV` dictates minifying and optimization found in `source/build.ts`, by default `NODE_ENV="development"` which does no minifying and includes sourcemaps in the build. Setting `NODE_ENV="production"` will minify and exclude sourcemaps.
### Tasks
<details>
<summary>Click to view all tasks</summary>
* The most common scenario will likely be that you want a live-reloading browser instance, this can be done using the `dev` task.
```sh
# If makers doesn't work, replace it with cargo-make.
makers dev
# To change the environment, prefix the command with the
# variables you want to set.
BROWSER="chromium" NODE_ENV="production" makers dev
```
* To watch for changes but without starting a live-reloading browser instance, use the `watch` task.
```sh
makers watch
# Which is a simple alias for the following.
WATCH="true" makers build
```
* To start a browser instance with an already built extension present in the `build/` directory, the `run` task is available. Note that this will fail if the extension hasn't been built before.
```sh
makers run
```
* To clean the build directory, a `clean` task is available. This uses `trash-cli` so if you accidentally remove something and want it back, check your trash bin where you can restore it.
```sh
makers clean
# Clean the Chromium directory.
BROWSER="chromium" makers clean
```
* To lint the code, `lint` is the task.
```sh
makers lint
# To only lint JS or SCSS.
makers lint-js
makers lint-scss
```
* To pack the WebExtension for publishing, `pack` is what you need.
```sh
# Make sure to set NODE_ENV, otherwise the extension size will be
# a lot bigger than it needs to be.
NODE_ENV="production" makers pack
# To pack Chromium.
BROWSER="chromium" NODE_ENV="production" makers pack
```
* Mozilla Addons requires the zipped source code too, since we're using minification, so `zip-source` is available. This uses Git's `archive` command.
```sh
makers zip-source
```
</details>

View File

@ -2,11 +2,6 @@
> **A WebExtension providing interactive guided tours of Tildes.** > **A WebExtension providing interactive guided tours of Tildes.**
## Documentation
* If you'd like to contribute to the tours, see [TOURS.md].
* To develop and run Tildes Shepherd yourself, see [DEVELOPMENT.md].
## License ## License
Distributed under the [AGPL-3.0-or-later](https://spdx.org/licenses/AGPL-3.0-or-later.html) license, see [LICENSE](https://git.bauke.xyz/tildes-community/tildes-shepherd/src/branch/main/LICENSE) for more information. Distributed under the [AGPL-3.0-or-later](https://spdx.org/licenses/AGPL-3.0-or-later.html) license, see [LICENSE](https://git.bauke.xyz/tildes-community/tildes-shepherd/src/branch/main/LICENSE) for more information.

View File

@ -1,23 +0,0 @@
# Tours
## Contributing
If you'd like to create a new tour or add/edit any of the existing tours, but don't know how to set up a development environment, please feel free to describe it in whatever way works for you. Show what you think should be highlighted, how it should be explained, etc. in whatever way you want.
Draw it in GIMP, sketch it on paper and take a picture, as long as you can show it to us! Send all your ideas to [@Community](https://tildes.net/user/Community) and we'll take care of the beeps and boops to get it into the WebExtension. Thank you!
## Completion Status
Below is a rough list of the planned tours together with which version of the WebExtension the tour is available in. Names and organization will likely change and differ from what's shown in the options page.
If a tour is checked and has a version number it's available from Mozilla Addons right now. If it is checked and doesn't have a version number it's finished but hasn't yet been published. And if it's unchecked it hasn't been finished yet.
* [x] Introduction (0.1.0)
* [ ] Interface
* [x] Homepage (0.1.0)
* [ ] Account Settings
* [ ] Invites
* [ ] Groups
* [ ] Topics
* [ ] Comments
* [ ] Messages

View File

@ -9,7 +9,7 @@
<link rel="shortcut icon" href="/tildes-shepherd.png" type="image/png"> <link rel="shortcut icon" href="/tildes-shepherd.png" type="image/png">
</head> </head>
<body> <body class="catppuccin">
<noscript> <noscript>
This WebExtension doesn't work without JavaScript enabled, sorry! 😭 This WebExtension doesn't work without JavaScript enabled, sorry! 😭
</noscript> </noscript>

View File

@ -13,7 +13,7 @@ export function createManifest(browser: string): Manifest.WebExtensionManifest {
manifest_version: Number.NaN, manifest_version: Number.NaN,
name: "Tildes Shepherd", name: "Tildes Shepherd",
description: "A WebExtension providing interactive guided tours of Tildes.", description: "A WebExtension providing interactive guided tours of Tildes.",
version: "0.1.1", version: "0.1.0",
permissions: ["storage"], permissions: ["storage"],
options_ui: { options_ui: {
page: "options/index.html", page: "options/index.html",

View File

@ -1,5 +1,4 @@
import {Component} from "preact"; import {Component} from "preact";
import {PageFooter} from "./components/page-footer.js";
import {PageHeader} from "./components/page-header.js"; import {PageHeader} from "./components/page-header.js";
import {Tours} from "./components/tours.js"; import {Tours} from "./components/tours.js";
@ -9,7 +8,6 @@ export class App extends Component {
<> <>
<PageHeader /> <PageHeader />
<Tours /> <Tours />
<PageFooter />
</> </>
); );
} }

View File

@ -1,41 +0,0 @@
import {Component} from "preact";
import browser from "webextension-polyfill";
export class PageFooter extends Component {
render() {
const manifest = browser.runtime.getManifest();
const copyright = (
<p>
&copy;{" "}
<a
target="_blank"
href="https://git.bauke.xyz/tildes-community/tildes-shepherd/src/branch/main/LICENSE"
>
AGPL-3.0-or-later
</a>
</p>
);
const messageCommunity = (
<a target="_blank" href="https://tildes.net/user/Community/new_message">
Message @Community
</a>
);
const version = (
<a
target="_blank"
href={`https://git.bauke.xyz/tildes-community/tildes-shepherd/releases/tag/${manifest.version}`}
>
v{manifest.version}
</a>
);
return (
<footer class="page-footer">
{messageCommunity} / {version} / {copyright}
</footer>
);
}
}

View File

@ -1,7 +0,0 @@
.page-footer {
border-top: 2px solid var(--background-secondary);
display: flex;
gap: 8px;
margin: 16px;
padding: 16px;
}

View File

@ -1,5 +1,4 @@
@use "reset"; @use "reset";
@use "components/page-footer";
@use "components/page-header"; @use "components/page-header";
@use "components/tours"; @use "components/tours";
@ -43,12 +42,11 @@ body {
} }
a { a {
color: var(--accent-1, var(--light-blue)); color: var(--accent-1);
cursor: pointer;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
color: var(--accent-2, var(--light-magenta)); color: var(--accent-2);
text-decoration: underline; text-decoration: underline;
} }
} }