Un semblant de présentation css de l’index

src/Stage/IndexStage.php

@@ -4,6 +4,7 @@ namespace Spip\Autodoc\Stage;
 
 use Spip\Autodoc\Context;
 use Spip\Autodoc\Exception\ContextException;
+use Symfony\Component\Filesystem\Filesystem;
 
 /** Create index.html page with links of all available documentations */
 class IndexStage implements StageInterface {
@@ -22,6 +23,7 @@ class IndexStage implements StageInterface {
         $list = $this->load($context->directory->output_base);
         $list = $this->sort($list);
         $this->createIndex($context, $list);
+        $this->copyCss($context);
 
         return $context;
     }
@@ -77,12 +79,17 @@ class IndexStage implements StageInterface {
         }
 
         $index = $twig->render('index.html.twig', [
-            'title' => 'Documentation automatique de SPIP et ses plugins',
+            'title' => 'SPIP Code',
+            'subtitle' => 'Documentation du code de SPIP et ses plugins',
             'groups' => $groups,
             'organizations' => $organizations,
         ]);
         file_put_contents($context->directory->output_base . '/index.html', $index);
+    }
 
-        return $context;
+    private function copyCss(Context $context) {
+        $fs = new Filesystem();
+        $fs->copy($context->directory->templates . '/autodoc.png', $context->directory->output_base . '/autodoc.png');
+        $fs->copy($context->directory->templates . '/autodoc.css', $context->directory->output_base . '/autodoc.css');
     }
 }

templates/autodoc.css

@@ -0,0 +1,145 @@
+:root {
+    --theme-color: #660e5c;
+    --theme-color--light: #a887b8;
+
+    --theme-gray-light: #d4d4d4;
+    --theme-gray-lighten: #f2f2f2;
+    --theme-gray-lighter: #fafafa;
+
+    --border-color: #cfcfcf;
+    --border-color--dark: #ccc;
+    --table-heading-bg: #f6f6f6;
+    --table-hover-bg: #f5f5f5;
+}
+html {
+    accent-color: var(--theme-color);
+    font-size: 100%;
+    line-height: 1.25;
+}
+html.avec_boussole_topnav body .header {
+    padding-top: 45px;
+}
+body {
+    margin: 0;
+}
+main {
+    line-height: 1.5;
+}
+
+a {
+    color: #91548C;
+    text-decoration: none;
+    transition: color .2s;
+}
+a:hover, a:focus {
+    color: #6D446A;
+    text-decoration: underline;
+}
+
+.hide {
+    display: none;
+}
+
+.container {
+    max-width: 1200px;
+    width: 100%;
+    margin: auto;
+}
+
+.header {
+    padding: 0;
+    padding-top: 0px;
+    color: white;
+    background: -moz-linear-gradient(250deg, var(--theme-color) 0%, var(--theme-color--light) 100%) repeat scroll 0 0
+        transparent;
+    position: relative;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 0, 0, 0.075);
+}
+
+.header .title {
+    position: relative;
+}
+.header h1 {
+    font-size: 40px;
+    margin-bottom: 0;
+    margin-top: 0;
+    padding: 34px 0 10px 150px;
+    font-weight: normal;
+}
+.header h1:before {
+    content: "";
+    position: absolute;
+    top: 8px;
+    left: -20px;
+    width: 176px;
+    height: 122px;
+    display: block;
+    background: url(autodoc.png) no-repeat top left;
+}
+
+.navbar {
+    min-height: 40px;
+    padding-left: 20px;
+    padding-right: 20px;
+    background-color: var(--theme-gray-lighter);
+    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid var(--theme-gray-light);
+    background-image: linear-gradient(to bottom, #ffffff, var(--theme-gray-lighten));
+    background-repeat: repeat-x;
+    display: flex;
+}
+.navbar .subtitle {
+    padding-left: 150px;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    width: 100%;
+    margin: 1em 0 2em 0;
+    text-align: left;
+}
+table td,
+table th {
+    padding: 0.3em 0.4em;
+}
+table tr {
+    border-bottom: 1px dotted var(--border-color--dark);
+}
+table tr:last-child {
+    border-bottom: 1px solid var(--border-color);
+}
+table caption {
+    border-bottom: 1px solid var(--border-color);
+    padding: 0.2em;
+    font-weight: bold;
+}
+table thead tr {
+    border-bottom: 1px solid var(--border-color);
+    background: var(--table-heading-bg);
+}
+
+table tbody > tr:hover > td,
+table tbody > tr:hover > th {
+    background-color: var(--table-hover-bg);
+}
+.table {
+    margin: 1em 0 2em 0;
+}
+.table th,
+.table td {
+    border-top: none;
+}
+td.links a + a:before {
+    content: "/";
+    display: inline-flex;
+    color: var(--theme-gray-light);
+    margin-right: 0.3em;
+}
+
+.footer {
+    background-color: #F5F5F5;
+    border-top: 1px solid #E5E5E5;
+    margin-top: 70px;
+    padding: 40px 0;
+}

templates/index.html.twig

@@ -7,12 +7,9 @@
 
 		<link href="__data/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
 
-		<link rel="stylesheet" href="__data/css/perso.css" />
+		<link rel="stylesheet" href="autodoc.css" />
 		<link rel="shortcut icon" type="image/png" href="favicon.png" />
 
-		<script src="__data/js/jquery.min.js"></script>
-		<script src="__data/bootstrap/js/bootstrap.min.js"></script>
-
 		{%- if topnav %}
 		<script type="text/javascript">
 		(function() {
@@ -24,34 +21,23 @@
 	</head>
 
 	<body>
-		<header class="header subhead" id="header">
+		<header class="header" id="header">
 			<div class='container'>
-				<div class="heading row">
-					<div class="titre span12">
-						<h1><span></span>{{ title }}</h1>
-					</div>
+				<div class="title">
+					<h1>{{ title }}</h1>
 				</div>
-			</div><!-- .container -->
+			</div>
 		</header>
-		<div class="nav hornav clearfix" id="nav">
-			<div class="navbar navbar-static-top">
-				<div class="navbar-inner">
-					<div class="container">
-						<div class='babarre'>
-
-						</div><!-- /.babarre -->
-					</div>
-				</div><!-- /navbar-inner -->
+		<div class="navbar">
+			<div class="container">
+				<strong class="subtitle">{{ subtitle }}</strong>
 			</div>
-		</div><!-- #nav -->
+		</div>
 
 	{%- block principal %}
-		<div class='container'>
-			<div class="principal">
+		<main class="main">
+			<div class='container'>
 				<div class="content" id="content">
-
-					<h1 class='hide'>{{ title }}</h1>
-
 					{% for organization, name in organizations %}
 						{% if groups[organization] %}
 						<h2>{{ name }}</h2>
@@ -87,8 +73,8 @@
 					{% endfor %}
 
 				</div><!-- #content -->
-			</div><!-- .principal -->
-		</div><!-- .container -->
+			</div><!-- .container -->
+		</main>
 	{% endblock %}
 
 	{%- block footer %}