diff --git a/package.json b/package.json new file mode 100644 index 0000000..93669e7 --- /dev/null +++ b/package.json @@ -0,0 +1,31 @@ +{ + "name": "blog", + "version": "0.1.0", + "private": true, + "dependencies": { + "@fortawesome/fontawesome-svg-core": "^1.2.15", + "@fortawesome/free-solid-svg-icons": "^5.7.2", + "@fortawesome/react-fontawesome": "^0.1.4", + "i": "^0.3.6", + "npm": "^6.8.0", + "react": "^16.8.2", + "react-dom": "^16.8.2", + "react-router-dom": "^4.3.1", + "react-scripts": "2.1.5" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": "react-app" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..7de0039 Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..9e6b41d --- /dev/null +++ b/public/index.html @@ -0,0 +1,41 @@ + + + + + + + + + + + Blog Mika + + + +
+ + + diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..1f2f141 --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,15 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/src/App.test.js b/src/App.test.js new file mode 100644 index 0000000..a754b20 --- /dev/null +++ b/src/App.test.js @@ -0,0 +1,9 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App'; + +it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render(, div); + ReactDOM.unmountComponentAtNode(div); +}); diff --git a/src/composant/Footer.js b/src/composant/Footer.js new file mode 100644 index 0000000..9c65b2b --- /dev/null +++ b/src/composant/Footer.js @@ -0,0 +1,19 @@ +import React from 'react' +import '../css/Home.css' + +//composant pied de page +function Footer(){ + return ( + + ); +} + +export default Footer \ No newline at end of file diff --git a/src/composant/Header.js b/src/composant/Header.js new file mode 100644 index 0000000..47c14df --- /dev/null +++ b/src/composant/Header.js @@ -0,0 +1,64 @@ +import React from 'react' +import '../css/Home.css' +//importaion du composant de bouton pour le menu burger +import MenuButton from './MenuButton' +//importation du logo et du jeu d'icones +import logo from '../images/Metallica-M.jpg' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' + +//tableau pour afficher le menu +const monMenu = [ + { + ancre: "Accueil", + url: "/", + title: "Retour à l'accueil" + }, + { + ancre: "Contact", + url: "/contact", + title:"Contactez-moi" + + }, + { + ancre: "Admin", + url: "/admin", + title: "Connexion administrateur" + } +] + +//composant d'entête de page avec comme paramètre l'identifiant de page qui correspond à l'index du tableau de menu +function Header({idPage}){ + return ( +
+ + Logo + + {/* composant MenuButton qui affiche le menu burger quand l'écran est inférieur à 850px de large */} + + +
+ ); +} + +export default Header \ No newline at end of file diff --git a/src/composant/ListeArticle.js b/src/composant/ListeArticle.js new file mode 100644 index 0000000..e2e1191 --- /dev/null +++ b/src/composant/ListeArticle.js @@ -0,0 +1,29 @@ +import React from 'react' +import '../css/Home.css' +//importation du jeu d'icones +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' + +//composant pour afficher la liste des articles avec comme paramètres un tableau de données +function ListeArticle({entries}) { + return ( + + ); +} + +export default ListeArticle \ No newline at end of file diff --git a/src/composant/MenuButton.js b/src/composant/MenuButton.js new file mode 100644 index 0000000..2087f40 --- /dev/null +++ b/src/composant/MenuButton.js @@ -0,0 +1,29 @@ +import React, {Component} from 'react'; +import '../css/Home.css'; +//importation des icones +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' + +class MenuButton extends Component { + + //j'utilise l'état local pour afficher ou effacer le menu dans le cas où l'écran est petit (<850px) + state = { + open : false + } + + //fonction appelée au click sur le bouton, on change l'état local et on le met à jour + toggleMenu(e){ + const newButtonState = !this.state.open + this.setState({open:newButtonState}) + } + + render() { + const open = this.state.open + return ( + + ); + } +} + +export default MenuButton; diff --git a/src/composant/data.js b/src/composant/data.js new file mode 100644 index 0000000..106d575 --- /dev/null +++ b/src/composant/data.js @@ -0,0 +1,71 @@ +//tableau de données fictive +const MY_DATAS = [ + { + id: 1, + url: 'article/1-kill-em-all', + title: "Kill 'em All", + date: '10/10/2018', + img: require('../images/kill.jpg'), + accroche: "Kill 'Em All est le premier album officiel du groupe de thrash metal Metallica, sorti le 25 juillet 1983. Cet album marque le début d'une des légendes du thrash metal. Plus rapide que ses successeurs, cet album est considéré comme incontournable par les fans.", + texte: "

Peu après sa signature avec le label Megaforce Records, Metallica entre en mai 1983 dans les studios Music America à Rochester dans l'État de New York pour enregistrer son premier album. L'enregistrement sera bouclé en 17 jours du 10 au 27 mai et produit par Paul Curcio, Jon Zazula étant le producteur exécutif. Dès la sortie de l'album, le 25 juillet 1983, le groupe s'embarque pour une tournée avec le groupe britannique Raven.

Le groupe souhaitait appeler son album Metal Up Your Ass, la pochette représentant une main tenant fermement une dague sortant d'une cuvette de toilette. La société chargée de distribuer l'album s'y est opposée. Le groupe a alors choisi de changer le titre en Kill 'Em All (« tuez-les tous »), en référence aux timides distributeurs1. L'idée serait venue, selon Scott Zazula, de Cliff Burton2. La nouvelle pochette figure l'ombre d'une main au-dessus d'un marteau ensanglanté.

Metallica était à l'origine constitué de James Hetfield (guitare/voix), Lars Ulrich (batterie), Ron McGovney (basse) et Dave Mustaine (guitare solo/voix). McGovney a quitté le groupe en raison de tensions entre lui et Mustaine. Le bassiste Cliff Burton, né à Castro Valley, a été recruté pour le remplacer.

Mustaine et Hetfield avaient également des accrochages récurrents, Mustaine expliquant plus tard cette rivalité par le fait qu'« il y avait trop de personnalité » dans le groupe3. À la suite de l'une d'entre elles, Mustaine frappe Hetfield qui avait donné un coup de pied à sa chienne, au motif que celle-ci avait rayé sa voiture.

Mustaine fut congédié au début de 1983, juste avant l'enregistrement de Kill 'Em All. Hetfield et Ulrich ont expliqué qu'ils l'avaient renvoyé à cause de ses problèmes d'alcool, ce que Mustaine a nié au début. Dans le film de 2004 Some Kind of Monster, Mustaine a néanmoins déclaré qu'il aurait souhaité que Metallica lui dise d'aller aux Alcooliques anonymes. Après le départ de Mustaine, Metallica a recruté Kirk Hammett, guitariste du groupe Exodus et élève de Joe Satriani. Le groupe a commencé à enregistrer Kill 'Em All avec Hammett à peine un mois après son arrivée. Mustaine, pour sa part, a formé le groupe Megadeth.

Malgré leurs différends, la contribution de Mustaine aux premières années Metallica ne fut pas entièrement négligée ; il est crédité pour avoir coécrit quatre des chansons de \"Kill 'Em All\". La chanson \"The Four Horsemen\" fut à l'origine écrite par Mustaine et appelée \"The Mechanix\", elle figure au sein de Killing Is My Business... and Business Is Good ! le premier album de Megadeth. Les autres chansons de Kill 'Em All pour lesquelles Mustaine est crédité sont \"Jump in the Fire\", \"Phantom Lord\", et \"Metal Militia\".

", + nbCommentaires: 0, + commentaires: [], + }, + { + id: 2, + url: 'article/2-ride-the-lightning', + title: "Ride the Lightning", + date: '23/10/2018', + img: require('../images/ride.jpg'), + accroche: "Ride the Lightning est le deuxième album du groupe de thrash metal américain Metallica. Il est sorti le 27 juillet 1984 chez Megaforce Records et Music for Nations. Il est sorti chez Elektra Records le 19 novembre 1984 après que le groupe ait signé chez ces derniers en septembre 1984.", + texte: "

Le groupe a commencé à travailler sur leur deuxième album en automne 19836. Contrairement à l'album précédent, le bassiste Cliff Burton participe pour la première fois à l'écriture de chansons (celles de Kill'Em All ayant été écrites avant son arrivée dans le groupe en janvier 1983). La connaissance musicale classique et du jazz de Burton a eu un grand impact sur la musique de Ride the Lightning, qui est mélodique et techniquement plus développée que sur le précédent album5.

« Cliff nous a montré, à moi et James [Hetfield], la voie vers de tous nouveaux horizons musicaux, des harmonies et des mélodies [...] De toute façon, comme James et moi sommes associés pour écrire les chansons [...] et comme Cliff [Burton] était dans le groupe, nous avons eu beaucoup à faire avec les contributions musicales de Cliff. »
— Lars Ulrich 19927

Contrairement au premier album Kill 'Em All, sur Ride the Lightning de nombreux morceaux sont plus lent. Selon le batteur Lars Ulrich, il est devenu clair qu'ils \"n'ont pas nécessairement à jouer vite pour sembler dur et puissant.\" Lyriquement le groupe reste à l'écart des genres typiques tels que le sexe, Satan et la violence afin de ne pas paraître interchangeables8.

Le 24 octobre 1983, le groupe enregistre la démo de Ride the Lightning, financée par l'ancien chef du label européen Music for Nations. La démo contient des chansons déjà écrites à l'époque de Kill 'Em All ; \"Fight Fire with Fire\" et \"Ride the Lightning\", la chanson \"Creeping Death\" et le morceau instrumental \"When Hell Freezes Over\", qui se trouve sur l'album sous le nom de \"The Call of Ktulu\".

Comme mentionné avant l'enregistrement de Kill 'Em All, le chanteur James Hetfield est en proie à des doute sur ses capacités vocales. Hetfield a, à de nouveau, proposé au chanteur John Bush de venir avec Metallica. Bush a rejeté comme l'année précédant l'offre et ne voulait pas laisser tomber les membres de son propre groupe Armored-Saint. Dans une interview en 1991, John Bush explique qu'il ne regrette pas sa décision.

« Je ne sais pas si Metallica aurait connu un tel succès avec moi en tant que chanteur. Je ne peux, de toute façon, que mal imaginer ma voix sur Ride the Lightning. »
— John Bush 19919

En février 1984, Metallica joue en première partie pour Venom dans le cadre des Seven-Dates-of-Hell Tour, leurs premiers concerts en Europe. Après la fin de la tournée, Metallica s'est rendu dans la capitale danoise Copenhague, dans une salle de répétition du groupe compatriote Mercyful Fate répéter les nouvelles chansons10.

James Hetfield et Lars Ulrich ont participé à la composition de toutes les chansons. Cliff Burton a participé à six et Kirk Hammett à quatre chansons. Le guitariste Dave Mustaine, qui a été congédié l'an dernier (avant l'enregistrement de Kill 'Em All) est crédité sur les deux chansons Ride the Lightning et The Call of Ktulu en tant que coauteur, car certains des riffs de ces chansons ont été écrits avant son renvoi.

", + nbCommentaires: 2, + commentaires: [ + { + auteur: "James H.", + commentaire: "Cet album est génial!!!", + date: "12/02/2019" + }, + { + auteur: "Lars U.", + commentaire: "Tu l'as dit bouffy!", + date: "13/02/2019" + } + ] + }, + { + id: 3, + url: 'article/3-master-of-puppets', + title: "Master of Puppets", + date: '06/11/2018', + img: require('../images/master.jpg'), + accroche: "Master of Puppets, sorti le 3 mars 1986, est le troisième album studio du groupe de Thrash metal Metallica. C'est le dernier album du groupe avec le bassiste Cliff Burton, ce dernier décède en effet dans un accident de bus en Suède lors de la tournée de promotion de l'album.", + texte: "

Automne 1984, Metallica signe chez Elektra Records. Le label réédite Ride the Lightning le 16 novembre, et le groupe commence à faire le tour des plus grandes salles et festivals tout au long de l'année 1985. Après avoir laissé partir leur ancien manager Johnny Zazula, ils embauchent Cliff Burnstein et Peter Mensch. Pendant un été fort occupé, ils ont joué aux Monsters of Rock Festival à Castle Donington avec Bon Jovi et Ratt devant 70 000 personnes6.

Le groupe a commencé à écrire leur nouvel album dans les premières semaines de l'été 1985. Lars Ulrich et James Hetfield se sont initialement retrouvés seuls au garage de El Cerrito. Ils ont commencé à composer les premières démos avant d'y faire participer Cliff Burton et Kirk Hammett. En conséquence, Hetfield et Ulrich assemblent huit titres qui composeront le prochain album, déjà intitulé Master of Puppets7. L'éditeur Tom King a déclaré que Metallica « avait une inspiration incroyable pour l'écriture des chansons » pendant la session d'enregistrement de l'album, en partie parce que Cliff Burton lui-même a beaucoup contribué à l'écriture des chansons8. Hetfield et Ulrich décrivent que le processus d'écriture d'un album de Metallica commence par « les riffs de guitare, assemblés et réassemblés jusqu'à ce qu'ils commencent à ressembler à une chanson ». Ensuite le groupe trouve un titre et un sujet, et Hetfield écrit des paroles qui collent au titre de la chanson9.

À l'automne 1985, ils retournent à Copenhague pour enregistrer Master of Puppets avec Flemming Rasmussen. Metallica commence à enregistrer cet album au Danemark en septembre 1985 et termine la séance d'enregistrement avec Flemming Rasmussen le 27 décembre de la même année10. Décrivant le processus d'enregistrement, le producteur Rasmussen a déclaré que « Metallica, durant cette période, a fait de très bonnes démos, et toutes les chansons ont été composées, arrangées et enregistrées sur une très bonne démo. Quand nous avons changé l'une des chansons, la plupart des changements étaient mineurs »11. Dans une récente interview pour le magazine Rolling Stone, Kirk Hammet a partagé son l'expérience en disant « à l'époque nous étions juste là pour faire un autre album » et le groupe « n'avait aucune idée que l'enregistrement aurait l'influence qu'il a finalement eue ». Il a en outre déclaré que le groupe était « certainement au sommet » à l'époque et que l'album était « le son d'un groupe vraiment unis, qui a vraiment appris à bien travailler ensemble »12. Malheureusement, Flemming et Metallica n'ont pas réussi à compléter le mixage à leur satisfaction mutuelle. Au lieu de cela, les bandes originales ont été remises à Michael Wagener en janvier 1986. Wagener, qui a déjà eu l'expérience de la production avec Mötley Crüe, Dokken et Accept, a terminé avec succès le mixage de l'album7.

", + nbCommentaires: 0, + commentaires: [] + }, + { + id: 4, + url: 'article/4-and-justice-for-all', + title: "...And Justice for All", + date: '27/11/2018', + img: require('../images/justice.jpg'), + accroche: "…And Justice for All est le quatrième album studio du groupe de thrash metal Metallica sorti le 25 août 1988 par Elektra Records. Le titre de l'album est une allusion aux quatre derniers mots du serment d'allégeance au drapeau des États-Unis.", + texte: "

Le titre …And Justice For All a été directement inspiré par le film du même titre sorti en 1979 avec Al Pacino et qui tourne autour d'une histoire de chantage exercé sur un juge. Il s'agit également des derniers mots du Serment d'allégeance au drapeau des États-Unis « (…)one Nation under God, indivisible, with liberty and justice for all. ». Comme les paroles de la chanson parlent d'injustice, ce titre est donc ironique.

One est considéré comme légendaire par les fans, basé sur le roman Johnny s'en va-t-en guerre (Johnny got his gun) de Dalton Trumbo adapté à l'écran et porté comme film culte et symbole de la lutte pacifiste aux États-Unis lors de la guerre du Viêt Nam. Cette chanson est sans doute l'une des plus connues de Metallica.

La chanson (et peut-être l'album entier) est un hommage au bassiste Cliff Burton décédé après l'album précédent. Bien que la piste soit considérée comme instrumentale, elle contient des paroles écrites par le poète Paul Gerhardt et dites par Hetfield.

La chanson parle de la pollution engendrée par l'homme, et des conséquences de cette pollution. Elle est souvent jouée par le groupe en concert[réf. nécessaire].

La chanson critique des pratiques du blacklisting, de surveillance et des atteintes à la liberté de penser et d'agir aux États-Unis, faisant écho aux pratiques du maccarthysme dans les années 50. C'est une des chansons les moins jouées en live. Le batteur Lars Ulrich dit que The Shortest Straw est une des chansons des années 80 de Metallica qu'il préfère et qu'il aimerait bien la jouer plus souvent.[réf. non conforme]. C'est l'une des rares chansons de l'album à être vendue en single, avec One et Harvester of Sorrow

Le début de The Frayed Ends of Sanity (les 30 premières secondes de la chanson) est une reprise du thème de la Marche des soldats de la méchante sorcière qui figure originellement dans la bande originale du film Le Magicien d'Oz. Les paroles font surtout référence à la paranoïa. Ce morceau a été joué pour la première fois en entier le 28 mai 2014, à Helsinki en Finlande4. Six Feet Under a fait une reprise de ce morceau sur son album Graveyard Classics III.[réf. nécessaire]

Le thème abordé fait référence au ressenti d'un enfant surprotégé par ses parents et à son isolement du monde extérieur consécutif à son éducation, et qui souffre terriblement une fois confronté à la vie que ses parents lui ont toujours cachée. Tant par la rapidité de son tempo, que par les aspects inventifs et techniques des riffs qui le composent, ce titre est fort apprécié des fans du groupe, certains d'entre eux allant jusqu'à déployer des drapeaux aux slogans tels que Jouez Dyers Eve pendant les concerts. Malgré cet enthousiasme, Metallica se refuse cependant à inclure cette chanson dans ses setlists habituelles. Une des raisons officieusement invoquées est que la chanson est à présent trop rapide pour que Lars Ulrich soit capable de la jouer. Toujours est-il que le groupe interprétera la chanson durant leur concert de juillet 2009 aux arènes de Nîmes pour la plus grande joie des fans français.

", + nbCommentaires: 0, + commentaires: [] + }, + { + id: 5, + url: 'article/5-metallica', + title: "Metallica", + date: '14/12/2018', + img: require('../images/black.jpg'), + accroche: "Metallica est le cinquième album studio du groupe de heavy metal éponyme sorti le 13 août 1991.", + texte: "

L'album Metallica sort en 1991. Avec sa pochette presque entièrement noire, il est rapidement surnommé le Black Album tant par les fans que les membres du groupe. Cet album est à l'heure actuelle le plus grand succès commercial du groupe, avec plus de 30 millions d'exemplaires vendus à travers le monde3.

L'album marque une évolution importante dans le style du groupe. Les tempos sont plus lents, les morceaux sont plus courts et leurs structures beaucoup plus simples, aspirant ainsi à du simple rock. C'est principalement un album de heavy metal, et il n'y a plus beaucoup de traces de thrash metal. Par son côté plus « commercial » que les précédents albums du groupe, qui a déplu à un certain nombre de fans de la première heure, il lui a permis d'atteindre un plus large public. C'est aussi le premier album du groupe produit par Bob Rock qui restera leur producteur jusqu'à St. Anger. Comme dans ...And Justice for All, Jason Newsted ne collabore qu'à un seul titre dans l'écriture des chansons.

Les titres les plus connus sont Enter Sandman, Sad but True, The Unforgiven, Nothing Else Matters, Wherever I May roam (tous sortis en single).

Malgré son côté plus accessible, l'album Metallica reste une production respectée dans le milieu du heavy metal. On note par ailleurs l'importance croissante que prennent les ballades ou power ballads pour Metallica (Nothing Else Matters, The Unforgiven, deux ballades très connues).

Jason Newsted utilisera pour la première fois dans un album de Metallica une basse 12 cordes, dans Wherever I May Roam. Enter Sandman fut notamment composé par Lars Ulrich à partir d'un riff que Kirk Hammett avait composé à 3h15 du matin.

James Hetfield nous informe dans le documentaire \"Classic Albums: Metallica\" (2002), que la plupart des chansons partaient d'un simple riff, qui fut exploité et poussé jusqu'au maximum.

Certaines personnes diront que : \"cet album est heavy sans être thrash, donc mesuré mais puissant\" (David Fricke, éditeur du magazine Rolling Stone). D'autres diront qu'avec cet album Metallica devient \"Le Led Zeppelin d'une génération\" (Cliff Burnstein : Co-Manageur). Les paroles de cet album sont souvent plus personnelles que celles des albums précédents. The God That Failed en est l'exemple le plus concret, James Hetfield y parlant de la secte religieuse dans laquelle ses parents étaient embrigadés.

", + nbCommentaires: 0, + commentaires: [] + }, +] + +export default MY_DATAS \ No newline at end of file diff --git a/src/css/Home.css b/src/css/Home.css new file mode 100644 index 0000000..36a62bf --- /dev/null +++ b/src/css/Home.css @@ -0,0 +1,305 @@ +/*global*/ +#root,html,body{ + height: 100%; +} +.blogContainer { + width: 100%; + min-height: calc(100% - 8em); + padding: 0 0 8em 0; + position: relative; +} + +/* header */ +.blogHeader,.blogFooter{ + padding: .3% 5%; + border-bottom: 1px dashed #000; + margin: 0 0 1% 0; +} +.lienLogo{ + width: 10%; + display: inline-block; + vertical-align: middle; +} +.logo{ + display: block; + max-width: 100%; + height: auto; +} +.menuBurger{ + display: none; +} +.navMenu{ + display: inline-block; + width: 90%; + text-align: right; + vertical-align: middle; +} +.lienMenu{ + color: #000; + text-decoration: none; + display: inline-block; + vertical-align: middle; + font-size: 0.9em; + padding: 1em 2em; + border: 1px dotted #000; + margin: 0 1%; +} +.lienMenu:hover,.lienMenu.actif{ + border-color: #ccc; +} +.formSearch{ + display: inline-block; + vertical-align: middle; + padding: 0 .5em; + border: 1px dotted #000; + margin: 0 3.5% 0 1%; +} +.champSearch{ + border: none; + background: none; + font-size: 1em; + box-sizing: border-box; + padding: .85em 0; +} +.boutonFormSearch{ + background: none; + border: none; + cursor: pointer; + font-size: 1.1em; +} + +/* footer */ +.blogFooter{ + border-top: 1px dashed #000; + border-bottom: none; + background: #ccc; + margin: 0; + text-align: center; + padding: .5% 8%; + position: absolute; + left: 0; bottom: 0; right: 0; +} +.adrFooter{ + font-style: normal; + width: 35%; + text-align: left; + display: inline-block; + vertical-align: top; +} +.infoBlog{ + display: inline-block; + vertical-align: top; + margin: 0; + width: 65%; + text-align: right; +} + +/* liste articles page d'accueil*/ +.listeArticle{ + width: 90%; + margin: 1% auto; + list-style: none; + padding: 0; +} +.liArticle{ + width: 44%; + margin: 3%; + display: inline-block; + background: #ccc; + box-sizing: border-box; + border: 1px dotted #000; +} +.figListeArticle{ + padding: 0; + margin: 0; +} +.imgListeArticle{ + display: block; + max-width: 100%; + height: auto; +} +.liArticle h1,.liArticle p{ + padding: 0 2%; +} +.lienListeArticle{ + display: block; + margin: 2% auto; + width: 60%; + text-decoration: none; + color: #000; + padding: .5em 1em; + border: 1px dotted #000; + background: #eee; + text-align: center; +} +.footerListeArticles{ + background: #333; + padding: 1% 2%; + display: flex; + justify-content: space-between; + color: #fff; +} + +/* page détail article */ +.articleDetailArticle{ + width: 85%; + margin: 1% auto; + text-align: justify; +} +.figDetailArticle{ + padding: 0; + margin: 0 1% 1% 0; + float: left; + width: 25%; +} +.footerArticle{ + border-top: 1px dashed #000; + margin: 1% 0 0 0; + padding: 1% 0 0 0; + display: flex; + justify-content: space-between; +} +.listeCommentaires{ + padding: 0; + margin: 2% auto; + width: 80%; + list-style: none; +} +.liCommentaire{ + border: 1px dotted #000; + margin: 2% 0; +} +.headerCommentaire{ + display: flex; + justify-content: space-between; + background: #333; + color: #fff; + padding: 1% 2%; +} +.liCommentaire p{ + padding: 0 2%; +} +.formCommentaire{ + width: 80%; + margin: 2% auto; + border: 1px dotted #000; + padding: 1% 2%; + background: #333; + color: #fff; + box-sizing: border-box; +} +.labelCommentaire,.labelContact{ + display: inline-block; + vertical-align: middle; + width: 20%; +} +.champCommentaire,.champContact{ + display: inline-block; + vertical-align: middle; + box-sizing: border-box; + padding: 1%; + border: none; + background: #ccc; + width: 80%; + margin: 1% 0; +} +textarea.champCommentaire,textarea.champContact{ + height: 8em; + resize: none; +} +.boutonFormCommentaire,.boutonContact{ + display: block; + margin: 1% auto; + cursor: pointer; + border: none; + background: #ccc; + padding: 1% 2%; + font-size: 1em; +} + +/* page contact */ +.formContact{ + width: 60%; + margin: auto; + border: 1px dotted #000; + padding: 0 2% 1% 2%; + background: #ccc; +} +.formContact p{ + text-align: center; +} +.labelContact{ + width: 25%; +} +.champContact{ + width: 75%; + background: #fff; +} +.boutonContact{ + background: #fff; +} + +/* modification des styles pour les écrans inférieurs à 850px de large */ +@media only screen and (max-width: 850px){ + .blogContainer { + min-height: calc(100% - 12em); + padding: 0 0 12em 0; + } + .lienLogo{ + vertical-align: top; + } + .navMenu{ + max-height: 0; + width: 100%; + overflow: hidden; + vertical-align: top; + } + .menuBurger.ouvert + .navMenu{ + max-height: 800px; + } + .lienMenu,.formSearch{ + display: block; + margin: 0 1%; + } + .menuBurger{ + display: inline-block; + vertical-align: middle; + color: #000; + width: 90%; + text-align: right; + box-sizing: border-box; + padding: 1em 4%; + font-size: 1em; + border: none; + background: none; + cursor: pointer; + } + .liArticle{ + width: 100%; + margin: 3% 0; + } + .adrFooter{ + width: 100%; + text-align: center; + } + .infoBlog{ + margin: 2% 0; + width: 100%; + text-align: center; + } + .formContact,.listeCommentaires,.formCommentaire{ + width: 100%; + } + .labelCommentaire,.labelContact{ + display: block; + width: 100%; + } + .champCommentaire,.champContact{ + display: block; + width: 100%; + margin: .5% 0 2% 0; + } + .figDetailArticle{ + width: 35%; + } +} \ No newline at end of file diff --git a/src/css/index.css b/src/css/index.css new file mode 100644 index 0000000..cee5f34 --- /dev/null +++ b/src/css/index.css @@ -0,0 +1,14 @@ +body { + margin: 0; + padding: 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", + "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", + monospace; +} diff --git a/src/images/Metallica-M.jpg b/src/images/Metallica-M.jpg new file mode 100644 index 0000000..4ad80d5 Binary files /dev/null and b/src/images/Metallica-M.jpg differ diff --git a/src/images/black.jpg b/src/images/black.jpg new file mode 100644 index 0000000..76876a4 Binary files /dev/null and b/src/images/black.jpg differ diff --git a/src/images/justice.jpg b/src/images/justice.jpg new file mode 100644 index 0000000..b2bd095 Binary files /dev/null and b/src/images/justice.jpg differ diff --git a/src/images/kill.jpg b/src/images/kill.jpg new file mode 100644 index 0000000..2afb630 Binary files /dev/null and b/src/images/kill.jpg differ diff --git a/src/images/master.jpg b/src/images/master.jpg new file mode 100644 index 0000000..b697145 Binary files /dev/null and b/src/images/master.jpg differ diff --git a/src/images/ride.jpg b/src/images/ride.jpg new file mode 100644 index 0000000..d6339ea Binary files /dev/null and b/src/images/ride.jpg differ diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..c092693 --- /dev/null +++ b/src/index.js @@ -0,0 +1,39 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import './css/index.css'; +//importation des composants de page +import Home from './page/Home'; +import Contact from './page/Contact'; +import Admin from './page/Admin'; +import Article from './page/Article'; +import Error404 from './page/Error404'; +import * as serviceWorker from './serviceWorker'; +//importation du système de routes +import { BrowserRouter, Switch, Route} from 'react-router-dom' +//importation de font awesome +import { library } from '@fortawesome/fontawesome-svg-core' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faComment,faSearch,faUserCircle,faBan,faBars } from '@fortawesome/free-solid-svg-icons' +library.add(faComment,faSearch,faUserCircle,faBan,faBars) + +const Root = () => ( + + + + + + + +) + +//j'encapsule le composant principal par le composant de routage +ReactDOM.render( + + + , +document.getElementById('root')); + +// If you want your app to work offline and load faster, you can change +// unregister() to register() below. Note this comes with some pitfalls. +// Learn more about service workers: http://bit.ly/CRA-PWA +serviceWorker.unregister(); diff --git a/src/page/Admin.js b/src/page/Admin.js new file mode 100644 index 0000000..403a133 --- /dev/null +++ b/src/page/Admin.js @@ -0,0 +1,36 @@ +import React, {Component} from 'react'; +import '../css/Home.css'; +//importation des composants +import Header from '../composant/Header.js' +import Footer from '../composant/Footer.js' + +class Home extends Component { + + componentDidMount(){ + //mise à jour de la balise title de la page + document.title = "Connexion adminsitration | Blog Mika" + } + + render() { + return ( +
+
+
+

Connexion à l'administration

+
+

Veuillez vous connecter pour accéder à l'administration

+ + + + + +
+
+
+
+
+ ); + } +} + +export default Home; diff --git a/src/page/Article.js b/src/page/Article.js new file mode 100644 index 0000000..4da6602 --- /dev/null +++ b/src/page/Article.js @@ -0,0 +1,94 @@ +import React, {Component} from 'react'; +import '../css/Home.css'; +//importation des composants +import Header from '../composant/Header.js' +import Footer from '../composant/Footer.js' +//importation du tableau de données fictives +import MY_DATAS from '../composant/data.js' +//importation des icones +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' + +//composant pour affichage des commentaires +function ListeCommentaires({entries}) { + return ( + + ); +} + +class Home extends Component { + //fonction qui va rechercher l'article actif dans la tableau de données + //on récupère l'url demandée dans les props du composant + //on boucle sur le tableau de données et on renvoi un objet contenant les informations + getArticle(){ + const urlActive = `article/${this.props.match.params.name}` + var myArticle + MY_DATAS.forEach(({url, title, date, img, texte, nbCommentaires, commentaires}) => { + if(url === urlActive){ + myArticle = { + titre: title, + date: date, + img: img, + texte: texte, + nbCommentaires: nbCommentaires, + commentaires: commentaires + } + } + }) + return myArticle + } + + componentDidMount(){ + //mise à jour dynamique de la balise title de la page + const monArticle = this.getArticle() + document.title = `${monArticle.titre} | Blog Mika` + } + render() { + const monArticle = this.getArticle() + return ( +
+
+
+

{ monArticle.titre }

+
+ { +
+ {/* j'utilise la props dangerouslySetInnerHTML pour interpréter les balises html enregistrées dans le tableau de données */} +
+
+ + {/* affichage conditionnel en fonction du nombre de commentaire */} + {monArticle.nbCommentaires===0 ? "Pas encore de commentaire" : monArticle.nbCommentaires} + +
+ {/* Si commentaires enregistrées, j'affiche la liste des commentaires */} + {monArticle.nbCommentaires > 0 && + + } +
+

Laissez votre commentaire en utilisant le formulaire ci-dessous

+ + + + + +
+
+
+
+
+ ); + } +} + +export default Home; diff --git a/src/page/Contact.js b/src/page/Contact.js new file mode 100644 index 0000000..3a93284 --- /dev/null +++ b/src/page/Contact.js @@ -0,0 +1,45 @@ +import React, { Component } from 'react'; +import '../css/Home.css'; +//importation des composants +import Header from '../composant/Header.js' +import Footer from '../composant/Footer.js' + +class Home extends Component { + + componentDidMount(){ + //mise à jour de la balise title de la page + document.title = "Contact | Blog Mika" + } + + render() { + return ( +
+ {/* Je passe l'identifiant de page pour afficher le menu actif */} +
+
+

Contact

+
+ {/* formulaire non fonctionnel */} +

Veuillez utiliser le formulaire ci-dessous pour toute information supplémentaire

+ + + + + + + + + + + + {/* balise de réception du message de feedback du formulaire */} +
+
+
+
+
+ ); + } +} + +export default Home; diff --git a/src/page/Error404.js b/src/page/Error404.js new file mode 100644 index 0000000..5f556d1 --- /dev/null +++ b/src/page/Error404.js @@ -0,0 +1,30 @@ +import React, { Component } from 'react'; +import '../css/Home.css'; +//importation des composants +import Header from '../composant/Header.js' +import Footer from '../composant/Footer.js' +//importation du jeu d'icones +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' + +class Home extends Component { + + componentDidMount(){ + //mise à jour de la balise title de la page + document.title = "Erreur | Blog Mika" + } + + render() { + return ( +
+
+
+

Erreur

+

Désolé mais la page que vous recherchez n'existe pas ou a été déplacée/supprimée

+
+
+
+ ); + } +} + +export default Home; diff --git a/src/page/Home.js b/src/page/Home.js new file mode 100644 index 0000000..eff9e8d --- /dev/null +++ b/src/page/Home.js @@ -0,0 +1,24 @@ +import React, { Component } from 'react'; +import '../css/Home.css'; +//importation des composants +import Header from '../composant/Header.js' +import Footer from '../composant/Footer.js' +import ListeArticles from '../composant/ListeArticle.js' +//tableau de données fictives +import MY_DATAS from '../composant/data.js' + +class Home extends Component { + render() { + return ( +
+ {/* Je passe l'identifiant de page pour afficher le menu actif */} +
+ {/* Affichage de la liste des articles en passant le tableau de données */} + +
+ ); + } +} + +export default Home; diff --git a/src/serviceWorker.js b/src/serviceWorker.js new file mode 100644 index 0000000..2283ff9 --- /dev/null +++ b/src/serviceWorker.js @@ -0,0 +1,135 @@ +// This optional code is used to register a service worker. +// register() is not called by default. + +// This lets the app load faster on subsequent visits in production, and gives +// it offline capabilities. However, it also means that developers (and users) +// will only see deployed updates on subsequent visits to a page, after all the +// existing tabs open on the page have been closed, since previously cached +// resources are updated in the background. + +// To learn more about the benefits of this model and instructions on how to +// opt-in, read http://bit.ly/CRA-PWA + +const isLocalhost = Boolean( + window.location.hostname === 'localhost' || + // [::1] is the IPv6 localhost address. + window.location.hostname === '[::1]' || + // 127.0.0.1/8 is considered localhost for IPv4. + window.location.hostname.match( + /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ + ) +); + +export function register(config) { + if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { + // The URL constructor is available in all browsers that support SW. + const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); + if (publicUrl.origin !== window.location.origin) { + // Our service worker won't work if PUBLIC_URL is on a different origin + // from what our page is served on. This might happen if a CDN is used to + // serve assets; see https://github.com/facebook/create-react-app/issues/2374 + return; + } + + window.addEventListener('load', () => { + const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; + + if (isLocalhost) { + // This is running on localhost. Let's check if a service worker still exists or not. + checkValidServiceWorker(swUrl, config); + + // Add some additional logging to localhost, pointing developers to the + // service worker/PWA documentation. + navigator.serviceWorker.ready.then(() => { + console.log( + 'This web app is being served cache-first by a service ' + + 'worker. To learn more, visit http://bit.ly/CRA-PWA' + ); + }); + } else { + // Is not localhost. Just register service worker + registerValidSW(swUrl, config); + } + }); + } +} + +function registerValidSW(swUrl, config) { + navigator.serviceWorker + .register(swUrl) + .then(registration => { + registration.onupdatefound = () => { + const installingWorker = registration.installing; + if (installingWorker == null) { + return; + } + installingWorker.onstatechange = () => { + if (installingWorker.state === 'installed') { + if (navigator.serviceWorker.controller) { + // At this point, the updated precached content has been fetched, + // but the previous service worker will still serve the older + // content until all client tabs are closed. + console.log( + 'New content is available and will be used when all ' + + 'tabs for this page are closed. See http://bit.ly/CRA-PWA.' + ); + + // Execute callback + if (config && config.onUpdate) { + config.onUpdate(registration); + } + } else { + // At this point, everything has been precached. + // It's the perfect time to display a + // "Content is cached for offline use." message. + console.log('Content is cached for offline use.'); + + // Execute callback + if (config && config.onSuccess) { + config.onSuccess(registration); + } + } + } + }; + }; + }) + .catch(error => { + console.error('Error during service worker registration:', error); + }); +} + +function checkValidServiceWorker(swUrl, config) { + // Check if the service worker can be found. If it can't reload the page. + fetch(swUrl) + .then(response => { + // Ensure service worker exists, and that we really are getting a JS file. + const contentType = response.headers.get('content-type'); + if ( + response.status === 404 || + (contentType != null && contentType.indexOf('javascript') === -1) + ) { + // No service worker found. Probably a different app. Reload the page. + navigator.serviceWorker.ready.then(registration => { + registration.unregister().then(() => { + window.location.reload(); + }); + }); + } else { + // Service worker found. Proceed as normal. + registerValidSW(swUrl, config); + } + }) + .catch(() => { + console.log( + 'No internet connection found. App is running in offline mode.' + ); + }); +} + +export function unregister() { + if ('serviceWorker' in navigator) { + navigator.serviceWorker.ready.then(registration => { + registration.unregister(); + }); + } +}