Skip to content

Commit 6dde755

Browse files
samokisssamokiss
authored
Merge pull request #686 from akeneo/API-1900
feat(API-1900): Build the filtering system of our guided tutorials
2 parents 8de99ae + 1cdb215 commit 6dde755

25 files changed

+705
-214
lines changed

‎components/components.css

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import "tile.css";
2+
@import "search-bar.css";
13

24
/** Default pim-api-doc CSS **/
35
body {
@@ -192,6 +194,33 @@ button {
192194
background-color: #F74B64;
193195
border-color: #F74B64;
194196
}
197+
.tag-color-yellow {
198+
background-color: #FCCE76;
199+
border-color: #FCCE76;
200+
}
201+
.tag-color-purple {
202+
background-color: #9452BA;
203+
border-color: #9452BA;
204+
}
205+
.tag-color-light-green{
206+
background-color: #81CCCC;
207+
border-color: #81CCCC;
208+
}
209+
210+
.tag-color-pink{
211+
background-color: #F8A0E5;
212+
border-color: #F8A0E5;
213+
}
214+
215+
.tag-color-orange{
216+
background-color: #FCAC76;
217+
border-color: #FCAC76;
218+
}
219+
220+
.tag-color-coral{
221+
background-color: #F74B64;
222+
border-color: #F74B64;
223+
}
195224

196225
.tag-label {
197226
font-size: 12px;

‎components/components.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,5 +85,9 @@
8585
</div>
8686
</div>
8787

88+
<hr>
89+
90+
<iframe src="./tile.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>
91+
8892
</body>
8993
</html>

‎components/tile.css

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
.tile {
2+
position: relative;
3+
box-sizing: border-box;
4+
word-wrap: break-word;
5+
6+
display: flex;
7+
flex-direction: row;
8+
align-items: flex-start;
9+
padding: 20px 25px 10px;
10+
gap: 10px;
11+
12+
width: 355px;
13+
height: 130px;
14+
15+
background: #F1F4F9;
16+
17+
border: 1px solid #8C9AAF;
18+
border-radius: 5px;
19+
}
20+
21+
.tile-title {
22+
position: absolute;
23+
font-family: 'Lato';
24+
font-style: normal;
25+
font-weight: 600;
26+
font-size: 24px;
27+
line-height: 29px;
28+
29+
display: flex;
30+
align-items: center;
31+
32+
color: #414D97;
33+
34+
flex: none;
35+
order: 0;
36+
flex-grow: 0;
37+
}
38+
39+
.tile-tag {
40+
display: flex;
41+
flex-direction: row;
42+
width: auto;
43+
position: absolute;
44+
bottom: 10px;
45+
right: 0;
46+
}
47+
48+
.tile-tag .tag-selectable {
49+
margin-right: 10px;
50+
}

‎components/tile.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<div class="tile">
2+
<div class="tile-title">
3+
How to get your App token & other think
4+
</div>
5+
<div class="tile-tag">
6+
<button aria-pressed="false" class="tag-selectable">
7+
<div class="tag-color tag-color-red"></div>
8+
<div class="tag-label">Channel</div>
9+
</button>
10+
<button aria-pressed="false" class="tag-selectable">
11+
<div class="tag-color tag-color-light-blue"></div>
12+
<div class="tag-label">App Workflow</div>
13+
</button>
14+
</div>
15+
</div>

‎content/apps/old/apps-getting-started.md

Lines changed: 0 additions & 154 deletions
This file was deleted.

‎content/apps/overview.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,6 @@ Your app is good to go?
7777

7878
## Next steps
7979

80-
- Learn more about how to [create an app](/apps/apps-how-to-get-your-app-token.html#how-to-get-app-token)
80+
- Learn more about how to [create an app](/tutorials/how-to-get-your-app-token.html#how-to-get-app-token)
8181
- Read our documentation about [authorization and authentication](/apps/authentication-and-authorization.html)
8282
- Learn how to use [catalogs](/apps/catalogs.html) to retrieve product data

‎content/getting-started/synchronize-pim-products-6x/step-1.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# Synchronize PIM structure
22

33
:::warning
4-
This guide is being deprecated and will soon be unpublished. Please go to the newest guide [here](/apps/how-to-retrieve-pim-structure.html).
4+
This guide is being deprecated and will soon be unpublished. Please go to the newest guide [here](/tutorials/how-to-retrieve-pim-structure.html).
55
:::
66

77
## What do we synchronize?

‎content/redirections/to-get-your-app-token.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta http-equiv="refresh" content="0; URL=https://api.akeneo.com/apps/apps-how-to-get-your-app-token.html" />
4+
<meta http-equiv="refresh" content="0; URL=/tutorials/how-to-get-your-app-token.html" />
55
<!-- Hotjar Tracking Code for https://api.akeneo.com/ -->
66
<script>
77
(function(h,o,t,j,a,r){

‎content/apps/apps-how-to-get-your-app-token.md renamed to ‎content/tutorials/guides/how-to-get-your-app-token.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
Implement the required parts of the App activation process and receive an App access token for querying your PIM API.
44

5-
<table class="tag-container">
5+
<table class="tag-container-xs">
66
<tr>
77
<td>Use case:</td>
88
<td>
@@ -93,7 +93,7 @@ First of all, go to `Connect`, then `App Store`
9393
### Permissions
9494

9595
If you see `Create a test App` skip to [Connect app](https://www.notion.so/Guided-tutorial-How-to-get-your-app-token-022acb1113c1413faefaec3c8f3585a5), else please enable the `developer mode`.
96-
![Create a test app button](../img/apps/create-a-test-app-button.png)
96+
![Create a test app button](../../img/apps/create-a-test-app-button.png)
9797

9898
To do so, you need to:
9999
1. Go to `System`, then `Roles`
@@ -107,17 +107,17 @@ To do so, you need to:
107107
To create a test App:
108108
1. On the top right corner, click on `Create a test App`
109109
2. Fill in all the required information
110-
![Test_app_creation_credentials](../img/apps/test-app-creation-info.png)
110+
![Test_app_creation_credentials](../../img/apps/test-app-creation-info.png)
111111
3. Then click on `Create`
112112
4. Copy/paste credentials in your app configuration file
113-
![Test_app_creation_credentials](../img/apps/test-app-creation-credentials.png)
113+
![Test_app_creation_credentials](../../img/apps/test-app-creation-credentials.png)
114114
5. And click on `Done`
115115
6. Your test App appears on the App Store page
116116

117117

118118
## Step 4: Connect your test App and access its settings
119119

120-
![Test app on the App Store](../img/apps/marketplace-with-test-app.png)
120+
![Test app on the App Store](../../img/apps/marketplace-with-test-app.png)
121121

122122
Connecting a test App is like connecting a published App.
123123

@@ -133,7 +133,7 @@ Now that your App is connected, you can enjoy all the available App features fro
133133
To access the settings of your connected App on Akeneo PIM, please go to `Connected Apps`, then click on `Manage App`.
134134
You can also open your App from Akeneo PIM UI, to do so, click on `Open app`.
135135

136-
![Connected test app on Apps](../img/apps/connected-test-app.png)
136+
![Connected test app on Apps](../../img/apps/connected-test-app.png)
137137

138138
::: info
139139
To know more about the step-by-step activation process, please read our article:
@@ -156,13 +156,13 @@ At the end of this process, you receive the following response with an `access_t
156156
You can use this token to call the Akeneo PIM REST API.
157157

158158
<div class="block-next-steps">
159-
<img src="../img/illustrations/illus--Attribute.svg" width="140px">
159+
<img src="../../img/illustrations/illus--Attribute.svg" width="140px">
160160
<div class="block-next-steps-column">
161161
<div class="block-next-steps-title">Next Steps</div>
162-
<div class="block-next-steps-text">Now that you collected your categories, we advise you to follow</div>
162+
<div class="block-next-steps-text">Now that you collected your token, we advise you to follow</div>
163163
<div>
164164
<ul>
165-
<li><a href="https://api.akeneo.com/apps/overview.html">Learn more about Apps</a></li>
165+
<li><a href="/apps/overview.html">Learn more about Apps</a></li>
166166
<li><a href="/api-reference-index.html">Explore the REST API reference</a></li>
167167
</ul>
168168
</div>

‎content/apps/how-to-retrieve-pim-structure.md renamed to ‎content/tutorials/guides/how-to-retrieve-pim-structure.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,10 @@ Retrieve the PIM structure through a channel resource. This is usually the requi
3333
If you're starting building your App, make sure you previously followed:
3434
</div>
3535
<div class="block-requirements-row">
36-
<img src="../img/illustrations/illus--Attributegroup.svg" width="110px">
36+
<img src="../../img/illustrations/illus--Attributegroup.svg" width="110px">
3737
<div class="block-requirements-steps">
3838
<ul>
39-
<li>Step 1. <a href="apps-how-to-get-your-app-token.html" target="_blank" rel="noopener noreferrer">Get your App token tutorial</a></li>
39+
<li>Step 1. <a href="how-to-get-your-app-token.html" target="_blank" rel="noopener noreferrer">Get your App token tutorial</a></li>
4040
</ul>
4141
</div>
4242
</div>

0 commit comments

Comments
 (0)