Skip to content

Commit 7d2f47e

Browse files
author
Thomas Hanke
committed
update readme
1 parent f74f4a2 commit 7d2f47e

6 files changed

Lines changed: 116 additions & 91 deletions

File tree

‎README.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,34 @@ twig_doc:
3838
# or for localized: prefix: /{_locale}/twig/doc/
3939
```
4040

41+
### Template
42+
43+
To use your design in the documentation, you have to override the component template.
44+
45+
Create a template in your project: templates/bundles/TwigDocBundle/component.html.twig
46+
47+
```twig
48+
{% extends '@!TwigDoc/component.html.twig' %}
49+
50+
{% block stylesheets %}
51+
<link rel="stylesheet" href="{{ asset('css/your-styles.css') }}">
52+
{% endblock %}
53+
```
54+
55+
#### Customizing the documentation
56+
57+
If you want to customize the documentation, you can override the template.
58+
59+
Create a template in your project: templates/bundles/TwigDocBundle/documentation.html.twig
60+
61+
```twig
62+
{% extends '@!TwigDoc/documentation.html.twig' %}
63+
64+
{% block stylesheets %}
65+
<link rel="stylesheet" href="{{ asset('css/your-styles.css') }}">
66+
{% endblock %}
67+
```
68+
4169
### Configuration
4270

4371
Create a config file: configs/packages/twig_doc.yaml

‎src/Controller/TwigDocController.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ public function index(Request $request): Response
3131
}
3232

3333
return new Response(
34-
$this->twig->render('@TwigDoc/pages/index.html.twig', [
34+
$this->twig->render('@TwigDoc/documentation.html.twig', [
3535
'components' => $components,
3636
'filterQuery' => $filterQuery,
3737
'filterType' => $filterType ?? null,

‎templates/base.html.twig‎

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

‎templates/documentation.html.twig‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<html lang="en">
2+
{% block head %}
3+
{% block stylesheets %}
4+
<style>
5+
{{ include('@TwigDoc/style/style.css.twig') }}
6+
</style>
7+
{% endblock %}
8+
<title>{% block title %}Twig Component Documentation{% endblock %}</title>
9+
{% block javascripts %}
10+
{% endblock %}
11+
{% endblock %}
12+
</html>
13+
14+
<body>
15+
{% block body %}
16+
<div id="twig-doc-container">
17+
18+
<div class="breakpoints">
19+
<div id="screenwidth"></div>
20+
<div class="one"></div>
21+
<div class="two"></div>
22+
<div class="three"></div>
23+
<div class="four"></div>
24+
<div class="five"></div>
25+
<div class="six"></div>
26+
<div class="seven"></div>
27+
<div class="eight"></div>
28+
</div>
29+
<!-- find better solution -->
30+
<script>
31+
function widthResizer(){
32+
var width = window.innerWidth
33+
if(document.getElementById("screenwidth")) {
34+
document.getElementById("screenwidth").innerHTML = "Width: " + width + "px"
35+
}
36+
console.log(width)
37+
}
38+
39+
// Getting the width of the browser on load
40+
widthResizer()
41+
42+
// Getting the width of the browser whenever the screen resolution changes.
43+
window.addEventListener('resize', widthResizer)
44+
</script>
45+
46+
{% include '@TwigDoc/component/_search.html.twig' %}
47+
48+
{% if not components %}
49+
<div class="twig-doc-error">
50+
No components found
51+
</div>
52+
{% endif %}
53+
<div class="twig-doc-body">
54+
55+
{# <button onClick="setScreenwidth('small');">S</button>
56+
<button onClick="setScreenwidth('medium');">M</button>
57+
<button onClick="setScreenwidth('large');">L</button>
58+
<button onClick="setScreenwidth('default');">Default</button> #}
59+
60+
<div class="navigation">
61+
<ul>
62+
<li>
63+
<a href="?filterQuery=Atoms&filterType=category">Atoms</a>
64+
<ul>
65+
<li><a href="?filterQuery=Buttons&filterType=sub_category">Buttons</a></li>
66+
<li><a href="?filterQuery=Typography&filterType=sub_category">Typography</a></li>
67+
</ul>
68+
</li>
69+
<li><a href="?filterQuery=Commons&filterType=category">Commons</a></li>
70+
<li><a href="?filterQuery=Snippets&filterType=category">Snippets</a></li>
71+
<li><a href="?filterQuery=Blocks&filterType=category">Blocks</a></li>
72+
<li><a href="?filterQuery=Templates&filterType=category">Templates</a></li>
73+
</ul>
74+
</div>
75+
76+
{% for items in components %}
77+
<div>
78+
{% for item in items %}
79+
{% include '@TwigDoc/component/_item.html.twig' with { component: item }%}
80+
{% endfor %}
81+
</div>
82+
{% endfor %}
83+
</div>
84+
</div>
85+
{% endblock %}
86+
</body>

‎templates/pages/index.html.twig‎

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

‎templates/pages/invalid_components.html.twig‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
{% extends'@TwigDoc/base.html.twig' %}
1+
{% extends'@TwigDoc/documentation.html.twig' %}
22

33
{% block body %}
44
<h1>Invalid Components</h1>

0 commit comments

Comments
 (0)