Skip to content

Commit 76f3c34

Browse files
committed
add prev/next buttons on guides
1 parent e353268 commit 76f3c34

File tree

7 files changed

+142
-27
lines changed

7 files changed

+142
-27
lines changed

src/app/guides/customization/admin-crud/page.mdx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import Alert from '../../../../components/Alert';
1+
import Alert from '@/components/Alert';
2+
import GuideNavigator from '@/components/GuideNavigator';
23

34
# Admin CRUD
45

@@ -390,3 +391,8 @@ We now have our todo and category entities as well as a way for the admins to ma
390391
Next up we need to make a frontend controller to show these categories, and to allow users to add and check off todos.
391392
392393
As an exercise, you could create an admin CRUD controller for the todos too.
394+
395+
<GuideNavigator
396+
previous={{ href: '/guides/customization/entities', label: 'Entities' }}
397+
next={{ href: '/guides/customization/frontend', label: 'Frontend' }}
398+
/>

src/app/guides/customization/entities/page.mdx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import Alert from '../../../../components/Alert';
1+
import Alert from '@/components/Alert';
2+
import GuideNavigator from '@/components/GuideNavigator';
23

34
# Entities
45

@@ -328,3 +329,8 @@ In the next guide, we'll create 2 admin CRUD (**c**reate, **r**ead, **u**pdate,
328329
### Learn more
329330
- [Symfony Doctrine Guide](https://symfony.com/doc/current/doctrine.html)
330331
- [Doctrine ORM](https://www.doctrine-project.org/projects/doctrine-orm/en/3.2/index.html)
332+
333+
<GuideNavigator
334+
previous={{ href: '/guides/customization/introduction', label: 'Introduction' }}
335+
next={{ href: '/guides/customization/admin-crud', label: 'Admin CRUD' }}
336+
/>

src/app/guides/customization/frontend/page.mdx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import GuideNavigator from '@/components/GuideNavigator';
2+
13
# Frontend
24

35
Up until now we've been helped by forumify's abstractions to do most of the heavy lifting.
@@ -380,3 +382,7 @@ First we fetch the todo using our repository, and if one was found, we delete it
380382
And there you have it. We now have a functional todo app. We're going to round off this introduction to customizing the platform
381383
by adding some security elements to our categories and our frontend in general in the next and final guide.
382384

385+
<GuideNavigator
386+
previous={{ href: '/guides/customization/admin-crud', label: 'Admin CRUD' }}
387+
next={{ href: '/guides/customization/security', label: 'Security' }}
388+
/>

src/app/guides/customization/introduction/page.mdx

Lines changed: 77 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import Alert from '../../../../components/Alert';
1+
import Alert from '@/components/Alert';
2+
import GuideNavigator from '@/components/GuideNavigator';
23

34
# Customizing forumify
45

@@ -9,9 +10,12 @@ With that in mind, we highly recommend getting familiar with the [Symfony Framew
910

1011
This short guide is a tutorial-style introduction to customizing the forumify platform that covers most of the basic concepts.
1112

13+
<Alert severity="info">
14+
If you are looking to get into plugin development, you should follow this guide first to understand the basics.
15+
</Alert>
1216
<Alert severity="warning">
13-
This kind of customization is only available to self-hosted versions of forumify.
14-
If you are using hosted instances you can only customize forumify through plugins and themes from the marketplace.
17+
This level of customization is only available to self-hosted versions of forumify.
18+
If you are using forumify cloud you can only customize forumify through plugins and themes from the marketplace.
1519
</Alert>
1620

1721
## Development Environment
@@ -29,14 +33,38 @@ While you could use the [forumify docker image](https://hub.docker.com/r/forumif
2933
- [NodeJS](https://nodejs.org/en)
3034
- [Symfony CLI](https://symfony.com/download)
3135

36+
<Alert severity="error">
37+
For Windows users:
38+
39+
Using the forumify, or any PHP docker image is highly discouraged. The file system emulation is too slow to run large scale PHP apps.
40+
Mounting a volume with PHP scripts can slow a single request down to 30-45 seconds!
41+
42+
If you do want to use docker, use WSL, and install everything inside of your WSL drive!
43+
</Alert>
44+
3245
## Development Project
3346

34-
If you are using self-hosting, you can fork the forumify production template.
35-
You can commit and push all the files that are created to your own git repository. A standard .gitignore will ensure only required files are included.
36-
Then later, on your production server, you can clone/pull your repository instead of the production template.
47+
Start by cloning the [forumify production template](https://github.com/forumify/forumify-production-template):
48+
```
49+
$ git clone https://github.com/forumify/forumify-production-template.git forumify-app
50+
$ cd forumify-app
51+
```
52+
53+
This will be your "application" folder. All commands, instructions,... in this guide will be happening inside of this directory.
3754

38-
When using forumify cloud hosting, you will have to use sFTP to copy the files from the host to your local environment, make changes, and then upload them back onto the server.
39-
After uploading these files, you'll have to clear cache so your changes get picked up by forumify.
55+
If you are planning to develop plugins, this will be your sandbox during development for testing.
56+
57+
If you are building a custom forumify application, you can commit and push all the files that are created to your own git repository.
58+
A standard .gitignore will ensure only required files are included.
59+
Then later, on your production server, you can clone/pull your repository to update.
60+
61+
Reset git so you can link your own repository later:
62+
```
63+
$ rm -rf .git
64+
$ git init
65+
$ git add .
66+
$ git commit -m "initial commit"
67+
```
4068

4169
### Installing Dependencies
4270

@@ -46,18 +74,18 @@ $ composer install
4674
$ npm install --force
4775
```
4876

49-
This will also use the Symfony Flex composer plugin to set up your project with some basic files that are needed to run the platform.
77+
This will use the Symfony Flex composer plugin to set up your project with some basic files that are needed to run the platform.
5078
These files are unique to your project, and you should commit them to version control.
5179

52-
### Docker Compose
80+
#### Docker Compose
5381

5482
You need 2 services for development, a MySQL server and an email server. You can also add more services like PHPMyAdmin if required.
5583

5684
Here's an example `docker-compose.yml` which you can place at your project's root directory.
57-
```
85+
```yaml
5886
services:
5987
mysql:
60-
image: mysql:latest
88+
image: mysql:8.4
6189
container_name: mysql
6290
ports:
6391
- '3306:3306'
@@ -84,7 +112,12 @@ volumes:
84112
You can go to `localhost:1080` to see all emails sent by your development environment.
85113
</Alert>
86114

87-
### Environment variables
115+
Start your dependencies:
116+
```
117+
docker compose up -d
118+
```
119+
120+
#### Environment variables
88121

89122
Inside your project, you will find a `.env` file with some preset environment variables. We'll want to override some for local development.
90123

@@ -97,28 +130,31 @@ DATABASE_URL="mysql://root:[email protected]:3306/forumify?serverVersion
97130
MAILER_DSN=smtp://host.docker.internal:1025
98131
```
99132
100-
### Ready To Launch
133+
#### Database
101134
102-
Once all of your dependencies are ready, you can start your webserver. If you're using Symfony CLI and docker-compose, it'd look somewhat like this:
135+
We can use the following commands to prepare our database:
103136
```
104-
$ docker compose up -d
105-
$ symfony server:start -d
106-
$ npm run watch
137+
$ symfony console doctrine:database:create
138+
$ symfony console doctrine:migrations:migrate
107139
```
108140
141+
This will create the database specified in our `.env.local` file, and the migrations will add all tables and basic data required to run forumify.
142+
109143
<Alert severity="info">
110-
If you are using Symfony CLI as web server, it's recommended to install a CA certificate to enable HTTPS for your development environment.
111-
See [this guide](https://symfony.com/doc/current/setup/symfony_server.html#enabling-tls) for more info.
144+
If you are not using Symfony CLI, replace "symfony console" in these command with "php bin/console".
112145
</Alert>
113146
114-
When you launch for the first time, you will not have a database yet. You can run the install command to create the database and an initial admin user for you.
147+
### Ready To Launch
148+
149+
Once all of your dependencies are ready, you can start your webserver and file watcher:
115150
```
116-
$ symfony console forumify:install
151+
$ symfony server:start -d
152+
$ npm run watch
117153
```
118154
119155
<Alert severity="info">
120-
The `symfony` command will only work when you have Symfony CLI installed.
121-
You can run console commands without Symfony CLI by using `php bin/console forumify:install` instead.
156+
If you are using Symfony CLI as web server, it's recommended to install a CA certificate to enable HTTPS for your development environment.
157+
See [this guide](https://symfony.com/doc/current/setup/symfony_server.html#enabling-tls) for more info.
122158
</Alert>
123159
124160
## Finished!
@@ -137,6 +173,19 @@ $ symfony server:start -d
137173
$ npm run watch
138174
```
139175
176+
<Alert severity="info">
177+
With Symfony Server you can also create a `.symfony.local.yaml` file that starts the file watcher and message consumers so you don't have to run them manually each time.
178+
</Alert>
179+
180+
```yaml
181+
# Symfony HTTP Server config for local development
182+
workers:
183+
npm_encore_watch:
184+
cmd: ['npm', 'run', 'watch']
185+
messenger_consume_async:
186+
cmd: ['symfony', 'console', 'messenger:consume', 'async']
187+
```
188+
140189
## What's next?
141190

142191
In the following guides we will be creating a small TODO application inside forumify by using some of the platform's helpers to speed us up.
@@ -149,3 +198,7 @@ This would be a good moment to review the [Symfony Best Practices](https://symfo
149198
- [Docker](https://docs.docker.com/guides/)
150199
- [Symfony](https://symfony.com/)
151200
- [Symfony Web Server](https://symfony.com/doc/current/setup/symfony_server.html)
201+
202+
<GuideNavigator
203+
next={{ href: '/guides/customization/entities', label: 'Entities' }}
204+
/>

src/app/guides/customization/security/page.mdx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Link from 'next/link';
22
import Alert from '@/components/Alert';
3+
import GuideNavigator from '@/components/GuideNavigator';
34

45
# Security
56

@@ -281,4 +282,8 @@ to return a forbidden HTTP status.
281282

282283
## Conclusion
283284

284-
That's it. You should now be familiar with the most common concepts used in forumify.
285+
That's it. You can now protect your entites so only certain roles can access or modify them.
286+
287+
<GuideNavigator
288+
previous={{ href: '/guides/customization/frontend', label: 'Frontend' }}
289+
/>

src/components/GuideNavigator.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
'use client';
2+
3+
import React from 'react';
4+
import Link from 'next/link';
5+
import { ArrowLeft, ArrowRight } from '@phosphor-icons/react';
6+
7+
interface NavigatorLink {
8+
className: string;
9+
href: string;
10+
label: string;
11+
}
12+
13+
const Navigator: React.FC<React.PropsWithChildren<NavigatorLink>> = ({ href, label, className, children }) => (
14+
<Link href={href} className={'btn-outlined h-auto p-4 flex-col ' + className}>
15+
<span className='mb-1'>{children}</span>
16+
<span className='text-small'>{label}</span>
17+
</Link>
18+
);
19+
20+
interface IGuideNavigatorProps {
21+
previous?: NavigatorLink;
22+
next?: NavigatorLink;
23+
}
24+
25+
export const GuideNavigator: React.FC<IGuideNavigatorProps> = ({ next, previous }) => (
26+
<div className='flex justify-between mt-8'>
27+
<div>
28+
{previous && <Navigator {...previous} className='items-start'><ArrowLeft /> Previous Chapter</Navigator>}
29+
</div>
30+
<div>
31+
{next && <Navigator {...next} className='items-end'>Next Chapter <ArrowRight /></Navigator>}
32+
</div>
33+
</div>
34+
);
35+
36+
export default GuideNavigator;

src/styles/index.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,3 +147,6 @@ ol, ul {
147147
}
148148
}
149149

150+
.h-auto {
151+
height: auto;
152+
}

0 commit comments

Comments
 (0)