Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: make localhost links clickable #7582

Merged
merged 2 commits into from Jun 8, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Expand Up @@ -31,4 +31,4 @@ Congratulations, you have made your first post!
Feel free to play around and edit this post as much you like.
```

A new blog post is now available at `http://localhost:3000/blog/greetings`.
A new blog post is now available at [http://localhost:3000/blog/greetings](http://localhost:3000/blog/greetings).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

BTW I think the following is a simpler way to achieve the same:

<http://localhost:3000/blog/greetings>

Copy link
Collaborator

@Josh-Cena Josh-Cena Jul 9, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Autolinks are being removed in MDX v2, so I'll avoid them for now.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good to know. Thank you.

Expand Up @@ -20,7 +20,7 @@ Create a markdown file at `docs/hello.md`:
This is my **first Docusaurus document**!
```

A new document is now available at `http://localhost:3000/docs/hello`.
A new document is now available at [http://localhost:3000/docs/hello](http://localhost:3000/docs/hello).

## Configure the Sidebar

Expand Down
Expand Up @@ -28,7 +28,7 @@ export default function MyReactPage() {
}
```

A new page is now available at `http://localhost:3000/my-react-page`.
A new page is now available at [http://localhost:3000/my-react-page](http://localhost:3000/my-react-page).

## Create your first Markdown Page

Expand All @@ -40,4 +40,4 @@ Create a file at `src/pages/my-markdown-page.md`:
This is a Markdown page
```

A new page is now available at `http://localhost:3000/my-markdown-page`.
A new page is now available at [http://localhost:3000/my-markdown-page](http://localhost:3000/my-markdown-page).
Expand Up @@ -26,6 +26,6 @@ Test your production build locally:
npm run serve
```

The `build` folder is now served at `http://localhost:3000/`.
The `build` folder is now served at [http://localhost:3000/](http://localhost:3000/).

You can now deploy the `build` folder **almost anywhere** easily, **for free** or very small cost (read the **[Deployment Guide](https://docusaurus.io/docs/deployment)**).
Expand Up @@ -39,7 +39,7 @@ Start your site on the French locale:
npm run start -- --locale fr
```

Your localized site is accessible at `http://localhost:3000/fr/` and the `Getting Started` page is translated.
Your localized site is accessible at [http://localhost:3000/fr/](http://localhost:3000/fr/) and the `Getting Started` page is translated.

:::caution

Expand Down
4 changes: 2 additions & 2 deletions website/docs/guides/creating-pages.md
Expand Up @@ -51,7 +51,7 @@ export default function Hello() {
}
```

Once you save the file, the development server will automatically reload the changes. Now open `http://localhost:3000/helloReact` and you will see the new page you just created.
Once you save the file, the development server will automatically reload the changes. Now open [http://localhost:3000/helloReact](http://localhost:3000/helloReact) and you will see the new page you just created.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure if this is necessarily useful—but I never followed this part of the tutorial when learning Docusaurus so I can't speak for others. Is it useful for you?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I myself started following the tutorial half an hour ago and this is the first page I came across.
I found myself copy/pasting the links over and over so in the eyes of the next developer who will go through his/her first steps I personally found this change as useful.
Are you referring specifically to this markdown?

Copy link
Collaborator

@Josh-Cena Josh-Cena Jun 8, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, to the Markdown files on the website. Do you read them with a dev server running and actually go through them step-by-step? I can clearly relate to the changes in the create-docusaurus templates.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, as mentioned in the fast track.
I installed a fresh site:

npx create-docusaurus@latest my-website classic

then started the site:

cd my-website
npx docusaurus start

and went on with the 3rd instruction:

Open http://localhost:3000 and follow the tutorial.

Copy link
Contributor Author

@dht dht Jun 8, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the markdown you are referring to is not the one visible when running those steps I can revert those too, no problem. I may have made a mistake regarding which ones are served when you follow the guide. I simply performed a project-wide search with this string:

`http://locahost:3000

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK, makes sense... Just not sure about further down where the instructions go into more details and often involves completely contrived examples that I assume people just don't bother copying.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the markdown you are referring to is not the one visible when running those steps I can revert those too

Yeah those are further down, but I'm fine. If we are to do it we'd rather do it all so it's consistent. Maybe people will find it useful?

Copy link
Contributor Author

@dht dht Jun 8, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like the documentation so far, I find it to the point and easy to follow. You might say it's expected for a documentation-builder project's documentation :-)

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great to hear! We constantly improve it as well, and I definitely think this is going in the right direction.


Each page doesn't come with any styling. You will need to import the `Layout` component from `@theme/Layout` and wrap your contents within that component if you want the navbar and/or footer to appear.

Expand All @@ -77,7 +77,7 @@ hide_table_of_contents: true
How are you?
```

In the same way, a page will be created at `http://localhost:3000/helloMarkdown`.
In the same way, a page will be created at [http://localhost:3000/helloMarkdown](http://localhost:3000/helloMarkdown).

Markdown pages are less flexible than React pages because it always uses the theme layout.

Expand Down
2 changes: 1 addition & 1 deletion website/docs/i18n/i18n-crowdin.mdx
Expand Up @@ -288,7 +288,7 @@ Start your site on the French locale:
npm run start -- --locale fr
```

Make sure that your website is now translated in French at `http://localhost:3000/fr/`.
Make sure that your website is now translated in French at [http://localhost:3000/fr/](http://localhost:3000/fr/).

### Automate with CI {#automate-with-ci}

Expand Down
2 changes: 1 addition & 1 deletion website/docs/i18n/i18n-tutorial.md
Expand Up @@ -76,7 +76,7 @@ Start your localized site in dev mode, using the locale of your choice:
npm run start -- --locale fr
```

Your site is accessible at **`http://localhost:3000/fr/`**.
Your site is accessible at [http://localhost:3000/fr/](http://localhost:3000/fr/).

We haven't provided any translation yet, so the site is mostly untranslated.

Expand Down
2 changes: 1 addition & 1 deletion website/docs/introduction.md
Expand Up @@ -36,7 +36,7 @@ cd my-website
npx docusaurus start
```

Open `http://localhost:3000` and follow the tutorial.
Open [http://localhost:3000](http://localhost:3000) and follow the tutorial.

:::tip

Expand Down
Expand Up @@ -51,7 +51,7 @@ export default function Hello() {
}
```

Once you save the file, the development server will automatically reload the changes. Now open `http://localhost:3000/helloReact` and you will see the new page you just created.
Once you save the file, the development server will automatically reload the changes. Now open [http://localhost:3000/helloReact](http://localhost:3000/helloReact) and you will see the new page you just created.

Each page doesn't come with any styling. You will need to import the `Layout` component from `@theme/Layout` and wrap your contents within that component if you want the navbar and/or footer to appear.

Expand All @@ -77,7 +77,7 @@ hide_table_of_contents: true
How are you?
```

In the same way, a page will be created at `http://localhost:3000/helloMarkdown`.
In the same way, a page will be created at [http://localhost:3000/helloMarkdown](http://localhost:3000/helloMarkdown).

Markdown pages are less flexible than React pages because it always uses the theme layout.

Expand Down
Expand Up @@ -287,7 +287,7 @@ Start your site on the French locale:
npm run start -- --locale fr
```

Make sure that your website is now translated in French at `http://localhost:3000/fr/`.
Make sure that your website is now translated in French at [http://localhost:3000/fr/](http://localhost:3000/fr/).

### Automate with CI {#automate-with-ci}

Expand Down
Expand Up @@ -74,7 +74,7 @@ Start your localized site in dev mode, using the locale of your choice:
npm run start -- --locale fr
```

Your site is accessible at **`http://localhost:3000/fr/`**.
Your site is accessible at [http://localhost:3000/fr/](http://localhost:3000/fr/).

We haven't provided any translation yet, so the site is mostly untranslated.

Expand Down
Expand Up @@ -36,7 +36,7 @@ cd my-website
npx docusaurus start
```

Open `http://localhost:3000` and follow the tutorial.
Open [http://localhost:3000](http://localhost:3000) and follow the tutorial.

:::tip

Expand Down
Expand Up @@ -51,7 +51,7 @@ export default function Hello() {
}
```

Once you save the file, the development server will automatically reload the changes. Now open `http://localhost:3000/helloReact` and you will see the new page you just created.
Once you save the file, the development server will automatically reload the changes. Now open [http://localhost:3000/helloReact](http://localhost:3000/helloReact) and you will see the new page you just created.

Each page doesn't come with any styling. You will need to import the `Layout` component from `@theme/Layout` and wrap your contents within that component if you want the navbar and/or footer to appear.

Expand All @@ -77,7 +77,7 @@ hide_table_of_contents: true
How are you?
```

In the same way, a page will be created at `http://localhost:3000/helloMarkdown`.
In the same way, a page will be created at [http://localhost:3000/helloMarkdown](http://localhost:3000/helloMarkdown).

Markdown pages are less flexible than React pages because it always uses the theme layout.

Expand Down
Expand Up @@ -287,7 +287,7 @@ Start your site on the French locale:
npm run start -- --locale fr
```

Make sure that your website is now translated in French at `http://localhost:3000/fr/`.
Make sure that your website is now translated in French at [http://localhost:3000/fr/](http://localhost:3000/fr/).

### Automate with CI {#automate-with-ci}

Expand Down
Expand Up @@ -74,7 +74,7 @@ Start your localized site in dev mode, using the locale of your choice:
npm run start -- --locale fr
```

Your site is accessible at **`http://localhost:3000/fr/`**.
Your site is accessible at [http://localhost:3000/fr/](http://localhost:3000/fr/).

We haven't provided any translation yet, so the site is mostly untranslated.

Expand Down
Expand Up @@ -36,7 +36,7 @@ cd my-website
npx docusaurus start
```

Open `http://localhost:3000` and follow the tutorial.
Open [http://localhost:3000](http://localhost:3000) and follow the tutorial.

:::tip

Expand Down