diff --git a/README.md b/README.md index 6180a9a4..23442188 100644 --- a/README.md +++ b/README.md @@ -54,7 +54,7 @@ Please check the [wiki](https://github.com/Flomp/wanderer/wiki) for the complete ## Contributing Help is welcome at any time. If you are not sure where you can start check the [roadmap](https://github.com/users/Flomp/projects/2/views/1) for features in the backlog. -If you would like to contribute a translation, you can do so [here](https://translate.codeberg.org/projects/wanderer/wanderer/). +If you would like to contribute a translation, you can do so [here](https://crowdin.com/project/wanderer). ## License This project is licensed under the AGPLv3 License. See the [LICENSE](LICENSE) file for the full license text. diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index 24e2d86d..5cfc4629 100644 --- a/docs/astro.config.mjs +++ b/docs/astro.config.mjs @@ -9,28 +9,31 @@ export default defineConfig({ integrations: [starlight({ title: 'Docs with Tailwind', logo: { - light: '/src/assets/logo_dark.svg', - dark: '/src/assets/logo_light.svg', + light: '/src/assets/logo_dark_text.svg', + dark: '/src/assets/logo_light_text.svg', replacesTitle: true }, social: { github: 'https://github.com/flomp/wanderer' }, + components: { + Footer: './src/components/Footer.astro', + }, sidebar: [{ - label: 'Guides', + label: 'Getting Started', items: [ - // Each item here is one entry in the navigation menu. - { - label: 'Example Guide', - link: '/guides/example/' - }] + // Each item here is one entry in the navigation menu. + { + label: 'Installation', + link: '/getting-started/installation/' + }] }, { label: 'Reference', autogenerate: { directory: 'reference' } }], - customCss: ['./src/tailwind.css', '@fontsource/ibm-plex-sans/400.css', '@fontsource/ibm-plex-sans/600.css', '@fontsource/ibm-plex-mono/400.css', '@fontsource/ibm-plex-mono/600.css'] + customCss: ['./src/custom.css', './src/tailwind.css', '@fontsource/ibm-plex-sans/400.css', '@fontsource/ibm-plex-sans/600.css', '@fontsource/ibm-plex-mono/400.css', '@fontsource/ibm-plex-mono/600.css'] }), tailwind({ applyBaseStyles: false }), svelte()] diff --git a/docs/src/assets/hero.png b/docs/src/assets/hero.png new file mode 100644 index 00000000..5c9972be Binary files /dev/null and b/docs/src/assets/hero.png differ diff --git a/docs/src/assets/logo_dark.svg b/docs/src/assets/logo_dark.svg index d01e6f0f..75c37d38 100644 --- a/docs/src/assets/logo_dark.svg +++ b/docs/src/assets/logo_dark.svg @@ -1,98 +1,23 @@ - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/src/assets/logo_dark_text.svg b/docs/src/assets/logo_dark_text.svg new file mode 100644 index 00000000..d01e6f0f --- /dev/null +++ b/docs/src/assets/logo_dark_text.svg @@ -0,0 +1,98 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/src/assets/logo_light.svg b/docs/src/assets/logo_light_text.svg similarity index 100% rename from docs/src/assets/logo_light.svg rename to docs/src/assets/logo_light_text.svg diff --git a/docs/src/components/button.svelte b/docs/src/components/button.svelte deleted file mode 100644 index c0455723..00000000 --- a/docs/src/components/button.svelte +++ /dev/null @@ -1,34 +0,0 @@ - - - - {/if} - - {:else} - - {/if} - diff --git a/docs/src/components/footer.astro b/docs/src/components/footer.astro new file mode 100644 index 00000000..c902d28a --- /dev/null +++ b/docs/src/components/footer.astro @@ -0,0 +1,197 @@ +--- +const isNotHomepage = Astro.props.slug !== ""; +--- + +{ + isNotHomepage ? ( +
+ ) : ( + + ) +} + + diff --git a/docs/src/content/docs/getting-started/Installation.md b/docs/src/content/docs/getting-started/Installation.md new file mode 100644 index 00000000..f859dce3 --- /dev/null +++ b/docs/src/content/docs/getting-started/Installation.md @@ -0,0 +1,183 @@ +--- +title: Installation +description: Detailed installation instructions for docker and bare-metal +--- + +wanderer consists of three components: +1. the frontend written with [SvelteKit](https://github.com/sveltejs/kit) +2. the backend, a custom [PocketBase](https://github.com/pocketbase/pocketbase) fork +3. the index, a standard [meilisearch](https://github.com/meilisearch/meilisearch) application + +You can install these components in two ways. + +## Docker + +This is the easiest and most convenient way to install wanderer. After cloning the repository you will find a [docker-compose.yml](https://github.com/Flomp/wanderer/blob/main/docker-compose.yml) file in the root directory that will install and run all necessary components by running `docker compose up -d`. + +:::note +If you are not hosting wanderer at `http://localhost:3000` make sure to change `ORIGIN` environment variable to `http(s)://:`. Otherwise you will run into CORS errors. +::: + +```docker-compose +version: '3' + +x-common-env: &cenv + MEILI_URL: http://search:7700 + MEILI_MASTER_KEY: vODkljPcfFANYNepCHyDyGjzAMPcdHnrb6X5KyXQPWo + +services: + search: + container_name: wanderer-search + image: flomp/wanderer-search + environment: + <<: *cenv + MEILI_NO_ANALYTICS: true + ports: + - 7700:7700 + networks: + - wanderer + volumes: + - ./data/data.ms:/meili_data/data.ms + restart: unless-stopped + healthcheck: + test: curl --fail http://localhost:7700/health || exit 1 + interval: 15s + retries: 10 + start_period: 20s + timeout: 10s + db: + container_name: wanderer-db + image: flomp/wanderer-db + depends_on: + search: + condition: service_healthy + environment: + <<: *cenv + ports: + - "8090:8090" + networks: + - wanderer + restart: unless-stopped + volumes: + - ./data/pb_data:/pb_data + web: + container_name: wanderer-web + image: flomp/wanderer-web + depends_on: + search: + condition: service_healthy + db: + condition: service_started + environment: + <<: *cenv + ORIGIN: http://localhost:3000 + BODY_SIZE_LIMIT: Infinity + PUBLIC_POCKETBASE_URL: http://db:8090 + PUBLIC_DISABLE_SIGNUP: false + UPLOAD_FOLDER: /app/uploads + UPLOAD_USER: + UPLOAD_PASSWORD: + PUBLIC_VALHALLA_URL: https://valhalla1.openstreetmap.de + volumes: + - ./data/uploads:/app/uploads + ports: + - "3000:3000" + networks: + - wanderer + restart: unless-stopped + +networks: + wanderer: + driver: bridge +``` +### Networking +All three components must be on the same network for wanderer to function properly. This is the case in the default configuration shown above. However, if you run wanderer behind a proxy like traefik, please ensure all three components can communicate. +Notice that you must set the `ORIGIN` environment variable for the web service to the public IP or hostname including the port that wanderer is reachable at. Otherwise, you will see wanderer's frontend throw an `Cross-site POST form submissions are forbidden` error. + +The standard configuration makes all three services publically available by forwarding their ports. For the database and the index service this is not strictly necessary. In case you do not require direct access to them you can disable their ports in the docker-compose file. + +### Volumes +By default, wanderer uses two volumes. One for meilisearch indices and one for all PocketBase data. In the default configuration, the data is stored in volumes. However, if you prefer to use bind mounts you can simply adapt the configuration accordingly. + +### Environment +The default configuration contains all necessary environment variables. However, there are more options that allow you to modify how the backend and index operate. For more details, you can take a look at the respective section of the [documentation](https://github.com/Flomp/wanderer/wiki/Configuration). + +:::caution +Ensure that you change the `MEILI_MASTER_KEY` to a different value if you plan to use wanderer in a production environment. +::: + +### Updating + +To update all containers to a new version simply run `docker compose pull && docker compose up -d`. Make sure to read the changelog to check for breaking changes. + +## From source + +While not recommended it is absolutely possible to install wanderer from source. + +### Prerequisites +1. git installed && `git clone https://github.com/Flomp/wanderer.git` +2. go >= 1.21.1 installed +3. node >= 18.17.0 installed + +### meilisearch +wanderer uses meilisearch without any further modifications. As a result, you can simply head over to [their website](https://www.meilisearch.com/docs/learn/getting_started/installation) and follow the instructions for your preferred platform. We assume that you put the binary in the `wanderer/search` directory. If you did not, adapt the launch script below accordingly. + +Furthermore, you will need to import the cities index manually. To do so launch meilisearch once with `--import-dump` parameter: +```bash +./meilisearch --import-dump migrations/migration.dump +``` +Wait for the process to finish and terminate meilisearch afterwards. + +### PocketBase +wanderer uses a slightly modified version of the PocketBase backend framework. As a result, you will need to build the PocketBase binary first. +```bash +cd wanderer/db +go mod tidy && go build +``` +This will create a binary in the `wanderer/db` folder. Verify that it is there. + +### Web +wanderer's frontend is written in SvelteKit. We first install all dependencies and build the project. +```bash +cd wanderer/web +npm ci --omit=dev +npm run build +``` + +This will create a directory `wanderer/web/build`. Verify that it is there. + +### Launch + +To launch our three services we will use a small bash script. This ensures that all necessary environment variables are set and the services are started in the correct order. All three services are executed as background tasks, but are being trapped so that terminating the bash script will also terminate all three services at once. + +:::caution +Caution: Ensure that you change the `MEILI_MASTER_KEY` to a different value if you plan to use wanderer in a production environment. +::: + +```bash +trap "kill 0" EXIT + +export ORIGIN=http://localhost:3000 +export MEILI_URL=http://127.0.0.1:7700 +export MEILI_MASTER_KEY=CHANGE_ME! +export PUBLIC_POCKETBASE_URL=http://127.0.0.1:8090 +export PUBLIC_VALHALLA_URL=https://valhalla1.openstreetmap.de + +cd search && ./meilisearch --master-key $MEILI_MASTER_KEY & +cd db && ./pocketbase serve & +cd web/build && node build & + +wait +``` + +### Updating + +To update wanderer to the newest version simply run `git pull origin main` and run the launch script. Make sure to read the changelog to check for breaking changes. + +## Verify the installation +No matter which installation method you chose, you should now be able to access wanderer on localhost:3000. + +:::note[Bootstrapping] +On the first launch, wanderer will create a rather large city index with over 200,000 entries in meilisearch. This process happens automatically but can take up to 2 minutes to complete. During this time the search functionality might not yet work properly. +::: + diff --git a/docs/src/content/docs/guides/example.md b/docs/src/content/docs/guides/example.md deleted file mode 100644 index ebd0f3bc..00000000 --- a/docs/src/content/docs/guides/example.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Example Guide -description: A guide in my new Starlight docs site. ---- - -Guides lead a user through a specific task they want to accomplish, often with a sequence of steps. -Writing a good guide requires thinking about what your users are trying to do. - -## Further reading - -- Read [about how-to guides](https://diataxis.fr/how-to-guides/) in the Diátaxis framework diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx index 82c9fa05..063677bd 100644 --- a/docs/src/content/docs/index.mdx +++ b/docs/src/content/docs/index.mdx @@ -10,7 +10,7 @@ hero: file: ../../assets/logo_dark.svg actions: - text: Read the docs - link: /guides/example/ + link: /getting-started/installation/ icon: right-arrow variant: primary - text: Visit the demo @@ -19,7 +19,8 @@ hero: --- import { Card, CardGrid } from '@astrojs/starlight/components'; -import Button from '../../components/button.svelte'; + +![Mockups of wanderer on laptop, tablet and phone](../../assets/hero.png) ## Features @@ -34,11 +35,22 @@ import Button from '../../components/button.svelte'; wanderer comes with extensive filter and search functionality right out of the box, so you can focus only on the trails relevant to you. - - Use wanderer's API to interact with your trail data directly and automate the tasks that you don't want to do manually. + + Simply upload all your trails in one go with wanderer's automatic import feature. + + [Learn more →]() + + + Use wanderer's API to interact with your trail data directly and automate the tasks you don't want to do manually. [API reference →]() + + wanderer is self-hosted and open-source. Your data stays on your machine and your machine only. + + + We currently support 8 different languages, with plans to add more in the near future. +
## Contributing @@ -47,4 +59,4 @@ Help is welcome at any time. Check out the [GitHub repository](https://github.co ## Support wanderer -wanderer is a passion project and will always stay free and open-source. If you like wanderer and want to support it's development you can make a small donation and [buy me a coffee](https://buymeacoffee.com/wanderertrails). \ No newline at end of file +wanderer is a passion project and will always stay free and open-source. If you like wanderer and want to support it's development you can make a small donation and [buy me a coffee](https://buymeacoffee.com/wanderertrails). diff --git a/docs/src/custom.css b/docs/src/custom.css new file mode 100644 index 00000000..66e2ab9a --- /dev/null +++ b/docs/src/custom.css @@ -0,0 +1,13 @@ +@import 'tailwindcss/utilities'; +@import 'tailwindcss/base'; +@import 'tailwindcss/components'; + +.card { + @apply rounded-xl +} + + +.card .icon { + background-color: transparent!important; + border-color: var(--sl-color-text)!important +} \ No newline at end of file diff --git a/docs/tailwind.config.mjs b/docs/tailwind.config.mjs index f693b140..cd56a16e 100644 --- a/docs/tailwind.config.mjs +++ b/docs/tailwind.config.mjs @@ -1,16 +1,19 @@ import colors from 'tailwindcss/colors'; import starlightPlugin from '@astrojs/starlight-tailwind'; +const accent = { 200: '#b0c8fd', 600: '#2a56f1', 900: '#152b6d', 950: '#112149' }; + /** @type {import('tailwindcss').Config} */ export default { content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], theme: { extend: { colors: { + primary: "#242734", // Your preferred accent color. Indigo is closest to Starlight’s defaults. - accent: colors.blue, + accent: accent, // Your preferred gray scale. Zinc is closest to Starlight’s defaults. - gray: "#242734", + gray: colors.gray, }, fontFamily: { // Deine bevorzugte Schriftart. Starlight verwendet standardmäßig eine Systemschriftart. diff --git a/web/src/lib/components/trail/map_with_elevation.svelte b/web/src/lib/components/trail/map_with_elevation.svelte index d7bed46d..408dd2c9 100644 --- a/web/src/lib/components/trail/map_with_elevation.svelte +++ b/web/src/lib/components/trail/map_with_elevation.svelte @@ -142,7 +142,7 @@
-
+