- Inside the correct technology directory, create a folder with the URL slug as the name
- Each page of the tutorial has a separate folder. Inside this folder is the following structure:
intial - The project shown when the page loads
solved - The project shown when you press the "Show solution" button
guide.mdx - The markdown guide
OR
intial - The project shown when the page loads
solved-diff - The project files that differ to initial when you press "Show solution" button
guide.mdx - The markdown guide
- Inside
initial
andsolved
you can place a Next.js project (and other project types later). - Inside the files you can use tokens. I'd recommend using these the way I'm using them in
getting-started
- You should copy
_app.tsx
andstyles/global.css
fromgetting-started
into every Next.js project, and then modify then as needed. - To add your pages to the tutorial, add them to
/learn/tutorials.json
Use .env
and not .env.local
for environment variables, e.g.:
LIVEBLOCKS_SECRET_KEY={% LIVEBLOCKS_SECRET_KEY %}
NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY={% LIVEBLOCKS_PUBLIC_KEY %}
I'm using .env.development
to hide unimportant variables.
For tutorials, I'd recommend showing everything in /pages
, /styles
, /src
, /components/
, .env
, package.json
, and liveblocks.config.ts
. I don't think other config files are important.
In the getting started guide, I'll be hiding most files to make everything as simple as possible.
---
// which file is open on page load
openFile: "/liveblocks.config.ts"
// which files are visible in the project
showFiles: [
"/liveblocks.config.ts",
"/pages/index.tsx",
]
---
[MDX guide here]
To create a link that changes files in the editor, use a file hash: e.g. [this file](#/pages/index.tsx)
will change to /pages/index.tsx
.
Note that this always starts with #/
and the link should NOT have ` around it e.g.: [this file]
is correct and will be displayed like code.
{
"slug": "welcome", // url slug
"title": "Welcome to Liveblocks", // page title, goes in <title>
"description": "Interactively learn Liveblocks" // goes in <title>
},
{% LIVEBLOCKS_PUBLIC_KEY %} - Public API key
{% LIVEBLOCKS_SECRET_KEY %} - Secret API key
{% ROOM_ID %} - The room name that is being used
{% RANDOM_ID %} - A random id
{% DEFAULT_SCRIPTS %} - Needed in _app.tsx of every project
{% DEFAULT_STYLES %} - Needed in globals.css file in every project