sourcegraph/client/web
Felix Kling 8296e9804f
feat(svelte): Migrate dotcom community search pages to Svelte (#64388)
What: This PR does the bare minimum to migrate the current community
search pages to Svelte. A better strategy for managing them is needed in
the medium/long term.

How: The community pages live at the root (e.g. `/kubernetes`) which
complicates things, but I'll get to that later. The page is implemented
as a single parameterized route. A parameter matcher is used to validate
the community name. Because these pages should only be accessible on
dotcom the matcher also validates whether or not we are on dotcom (if
not, the path will be matched against a different route).

The page config is stored in a separate module so that it's no included
in every page and so that it can be used in the integration test.

The loader and page implementation themselves are straightforward. I
made a couple of changes in other modules to make implementation easier:

- Extracted the parameter type of the `marked` function so that it can
be used as prop type.
- Added an `inline` option to `marked` that allows formatting markdown
as 'inline', i.e. without `p` wrapper.
- Added a `wrap` prop to `SyntaxHighlightedQuery.svelte` to configure
line wrapping of syntax highlighted search queries (instead of having to
overwrite styles with `:global`).
- Extended the route code generator to be able to handle single
parameter segments and the `communitySearchContext` matcher.

Because the community routes should only be available on dotcom I added
a new tag to the code generator that allows it include routes only for
dotcom.
Once we change how all this works and have community search pages live
under a different path we can simplify this again.

Result:

| React | Svelte |
|--------|--------|
|
![2024-08-09_16-05](https://github.com/user-attachments/assets/a64c4e0c-a9dd-4248-9466-05b348559408)
|
![2024-08-09_16-04](https://github.com/user-attachments/assets/d8ad424b-d04a-4590-b198-a6b2f4a76816)
|


## Test plan

- New integration tests.
- Verified that `/kubernetes` shows a 'repo not found error' when
running against S2.
- Verified that `/kubernetes` shows the community page when running
against dotcom.
- Verified that `window.context.svelteKit.enabledRoutes` contains the
community page route in enterprise mode but not in dotcom mode.
2024-08-09 22:52:47 +02:00
..
__mocks__ reapply "switch from jest to vitest for faster, simpler tests (#57886)" (#58145) 2023-11-07 12:00:18 +02:00
bookmarklet
dev fix(appliance): Make Appliance URL envvars strings (#64227) 2024-08-01 15:45:25 -07:00
dist refactor(svelte): Optimize welcome overlay screenshot assets (#64344) 2024-08-07 17:37:27 +00:00
src feat(svelte): Migrate dotcom community search pages to Svelte (#64388) 2024-08-09 22:52:47 +02:00
tests-examples feat(ci): Adds playwright tests for sveltekit to bazel (#62560) 2024-06-06 12:45:05 -06:00
.bazelignore bazel: ignore files generated into src (#45922) 2022-12-21 20:43:29 -08:00
.eslintignore
.stylelintrc.json
BUILD.bazel Remove old Cody Web completely (#64345) 2024-08-09 10:25:59 +05:30
bundlesize.config.js Bump code-web-experimental version to 0.2.0 (#63675) 2024-07-05 18:57:38 -03:00
package.json chore(local): hotfix when local client assets become too big (#63807) 2024-07-18 14:20:39 +02:00
README.md Update the legacy link to sg doc (#64017) 2024-08-01 16:18:30 -07:00
statoscope Report bundle size diff in PRs (#42277) 2022-10-12 10:19:51 +02:00
tsconfig.json Create a shared Cody Ignore dataset (#61968) 2024-05-09 13:18:35 +00:00
vitest.config.ts bazel: fix vitest_test in Bazel in sandbox mode (#58274) 2023-11-15 10:14:41 +01:00

Web Application

Local development

Use sg CLI tool to configure and start local development server. For more information check out the sg documentation.

Our local development server runs by starting both a Caddy HTTPS server and a Node HTTP server. We then can reverse proxy requests to the Node server to serve client assets under HTTPS.

Configuration

Environment variables important for the web server:

  1. WEB_BUILDER_SERVE_INDEX should be set to true to enable serving of an index page.
  2. SOURCEGRAPH_API_URL is used as a proxied API url. By default it points to the https://k8s.sgdev.org.

It's possible to overwrite these variables by creating sg.config.overwrite.yaml in the root folder and adjusting the env section of the relevant command.

Development server

sg start web-standalone

Public API

To use a public API that doesn't require authentication for most of the functionality:

SOURCEGRAPH_API_URL=https://sourcegraph.com sg start web-standalone

Production server

sg start web-standalone-prod

Web app should be available at https://${SOURCEGRAPH_HTTPS_DOMAIN}:${SOURCEGRAPH_HTTPS_PORT}. Build artifacts will be served from <rootRepoPath>/client/web/dist.

Note: If you are unable to use the above commands (e.g. you can't install Caddy), you can use sg run web-standalone-http instead. This will start a development server using only Node, and will be available at http://localhost:${SOURCEGRAPH_HTTP_PORT}.

API proxy

In both environments, server proxies API requests to SOURCEGRAPH_API_URL provided as the .env variable.