Commit graph

9 commits

Author SHA1 Message Date
Dominic Elm
d2caaeab64
docs: add 'Open in StackBlitz' buttons to various examples (#25853)
This PR adds a `Preview` section and a `Open in StackBlitz` button to various examples. I have tested all examples and omitted the ones that require third party API keys, or didn't work. Some examples don't work locally either.

Here's an example:
![image](https://user-images.githubusercontent.com/12571019/121027783-88971280-c7a7-11eb-851a-0ad30cf74b42.png)

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [x] Examples updated
- [ ] Telemetry added. In case of a feature if it's used or not.

## Documentation / Examples

- [x] Make sure the linting passes
2021-06-08 20:45:02 +00:00
Luis Alvarez D
e28fd50441
Include utm_source on example links to vercel.com (#21305) 2021-01-19 07:28:54 +00:00
Luc Leray
8eaabe2fb0
Fix deploy buttons URLs (#20834)
Fix all deploy button URLs in the Next.js repo to follow the following format:
```
https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/<EXAMPLE_NAME>&project-name=<EXAMPLE_NAME>&repository-name=<EXAMPLE_NAME>
```

The detailed docs for the Deploy Button can be found here: https://vercel.com/docs/more/deploy-button.

Also updates legacy Vercel import flow URLs (starting with vercel.com/import or with vercel.com/new/project), to use the new vercel.com/new URLs.

---

For example, for the `hello-world` example:

The URL is https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/hello-world&project-name=hello-world&repository-name=hello-world

And the deploy button looks like this:
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/hello-world&project-name=hello-world&repository-name=hello-world)

---

For reference, I used the following regexes to search for the incorrect URLs

```
\(https://vercel.com/import/git\?s=https://github.com/vercel/next.js/tree/canary/examples/(.*)\)
\(https://vercel.com/import/git\?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/([^&]*)(.*)\)
\(https://vercel.com/import/project\?template=https://github.com/vercel/next.js/tree/canary/examples/(.*)\)
https://vercel.com/import/git
https://vercel.com/import/select-scope
https://vercel.com/import
https://vercel.com/new/project
```
2021-01-07 01:40:29 +00:00
NorbertLuszkiewicz
c03d4931de
Simplify example usage instructions (#16678)
Co-authored-by: Joe Haddad <joe.haddad@zeit.co>
2020-08-29 22:22:02 -04:00
Joe Haddad
b7e17e09e5
Update references to zeit/next.js (#13463) 2020-05-27 17:51:11 -04:00
Jimmy Merritello
001230e0a8
Add Route as Modal Page Example (#12945)
### Add dynamic routes to _with-route-as-modal_ example

This PR adds [dynamic routes](https://nextjs.org/docs/routing/dynamic-routes), [getStaticPaths](https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation), and [getStaticProps](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation) to the **with-route-as-modal** example. This change might also clear up some confusion here on https://github.com/zeit/next.js/issues/11971

Additionally this PR makes sure each modal route is also a modal **page.**

This is an important distinction and makes sure the experience is the same should the URL (route) be shared as a link. In other words, `index.js` need not be the only "entrypoint" to browsing the website.

With the additions in this PR, each post page is an actual page, so if you were to share the link for **Post 3** you'd get this:

<img src="https://user-images.githubusercontent.com/7191639/82058282-25ad7780-968a-11ea-94f1-9b4a36abccf9.png" width="200px" />

(clickable outer region brings you back to the 'gallery')

**Update:** I have also included the `pathname` to signal the difference in which page component is rendered

Rather than this (previously):

<img src="https://user-images.githubusercontent.com/7191639/82058199-0878a900-968a-11ea-97d2-e9e20c9267fc.png" width="200px" />

I have used a similar approach [here 🔗](https://hashiconf.com/digital-june/schedule/the-hitchhikers-guide-to-terraform-your-infrastructure)
2020-05-27 21:22:33 +00:00
JJ Kasper
1f6ce106ae
Update codeload and deploy links for org rename (#13141)
Co-authored-by: Joe Haddad <joe.haddad@zeit.co>
2020-05-27 14:11:39 -04:00
Tim Neutkens
483bd3ddda
Rename ZEIT to Vercel (#12075)
* Find/replace

* Update more URLs

* More rename

* Fix remaining examples

* More updates

* Update create-next-app

* Update remaining text

* Update

Co-authored-by: Shu Uesugi <shu@chibicode.com>
2020-04-21 11:47:12 +02:00
Hugo Morosini
226387694b
added "with-route-as-modal" example (#11473)
* added "with-route-as-modal" exemple

extra space missing in style.css

oops

linted

* Use Link and removed unrequired imports

Co-authored-by: Luis Alvarez <luis@zeit.co>
2020-03-31 14:10:55 -05:00