Version allégée de App.js pour publicodes
Mael
Maxime Quandalle
parent
c9dacf0087
commit
dbb210bea2
|
|
@ -1,99 +1,47 @@
|
|||
import exemple1 from '!!raw-loader!./exemple1.yaml'
|
||||
import exemple2 from '!!raw-loader!./exemple2.yaml'
|
||||
import ColoredYaml from 'Components/rule/ColoredYaml'
|
||||
import { rules as baseRulesEn, rulesFr as baseRulesFr } from 'Engine/rules'
|
||||
import 'iframe-resizer'
|
||||
import React, { useEffect } from 'react'
|
||||
import emoji from 'react-easy-emoji'
|
||||
import { Route, Switch } from 'react-router-dom'
|
||||
import 'Ui/index.css'
|
||||
import '../mon-entreprise.fr/App.css'
|
||||
import Provider from '../../Provider'
|
||||
import { getSessionStorage } from '../../utils'
|
||||
import Landing from './Landing'
|
||||
|
||||
let Landing = () => {
|
||||
function Router({ basename, language }) {
|
||||
useEffect(() => {
|
||||
var css = document.createElement('style')
|
||||
css.type = 'text/css'
|
||||
css.innerHTML = `
|
||||
#js {
|
||||
animation: appear 0.5s;
|
||||
opacity: 1;
|
||||
}
|
||||
#loading {
|
||||
display: none !important;
|
||||
}`
|
||||
document.body.appendChild(css)
|
||||
})
|
||||
getSessionStorage()?.setItem('lang', language)
|
||||
}, [language])
|
||||
const rules = language === 'en' ? baseRulesEn : baseRulesFr
|
||||
return (
|
||||
<div className="app-container">
|
||||
<div className="app-content ui__ container">
|
||||
<div css="text-align: center">
|
||||
<h1 css="">
|
||||
<span css="border: 3px solid var(--color); color: var(--color); padding: 0.1rem 0.4rem 0.1rem 0.6rem ; width: 5rem">
|
||||
publi
|
||||
</span>
|
||||
<span css="background: var(--color); color: white; padding: 0.1rem 0.6rem 0.1rem 0.3rem; width: 5rem; border: 3px solid var(--color)">
|
||||
codes
|
||||
</span>
|
||||
</h1>
|
||||
<p css="width: 28rem; margin: 0 auto; font-size: 120%">
|
||||
Un nouveau langage de calcul pour encoder les algorithmes d'intérêt
|
||||
public.
|
||||
</p>
|
||||
</div>
|
||||
<h2>Pourquoi ?</h2>
|
||||
<p>
|
||||
Certains algorithmes sont bien trop importants pour être maintenus
|
||||
dans une boîte noire, souvent privée, que seuls les développeurs
|
||||
expérimentés peuvent comprendre.
|
||||
</p>
|
||||
<p>
|
||||
{' '}
|
||||
C'est notamment le cas d'une bonne partie de la loi, qui spécifie en
|
||||
français des règles... et charge à d'autres de les implémenter
|
||||
librement.
|
||||
</p>
|
||||
<p>
|
||||
La plateforme <em>publicodes</em> fusionne documentation et
|
||||
implémentation en partant d'un code simple. Ajouter une règle de
|
||||
calcul, c'est déployer sans effort sur le Web la page de documentation
|
||||
correspondante, lisible par tout citoyen.
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
{emoji('📖 ')} Pour aller plus loin, lisez la{' '}
|
||||
<a href="https://github.com/betagouv/publicodes/wiki">
|
||||
documentation
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
<h2>Projets phares</h2>
|
||||
<h3>
|
||||
La sécurité sociale et les impôts -{' '}
|
||||
<a href="https://mon-entreprise.fr">mon-entreprise.fr</a>
|
||||
</h3>
|
||||
<ColoredYaml source={exemple1} />
|
||||
<p>
|
||||
En plus du site Web, Mon-entreprise est disponible comme une{' '}
|
||||
<a href="/intégration/bibliothèque-de-calcul">
|
||||
bibliothèque de calcul autonome
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
|
||||
<h3>
|
||||
L'impact climatique de nos gestes du quotidien -
|
||||
<a href="https://futur.eco">futur.eco</a>
|
||||
</h3>
|
||||
<ColoredYaml source={exemple2} />
|
||||
</div>
|
||||
</div>
|
||||
<Provider
|
||||
basename={basename}
|
||||
language={language}
|
||||
reduxMiddlewares={[]}
|
||||
initialStore={{
|
||||
rules
|
||||
}}
|
||||
>
|
||||
<RouterSwitch />
|
||||
</Provider>
|
||||
)
|
||||
}
|
||||
|
||||
let ExportedApp = Landing
|
||||
let RouterSwitch = () => {
|
||||
return (
|
||||
<>
|
||||
<Switch>
|
||||
<Route exact path="/publicodes" component={Landing} />
|
||||
<Route exact path="/" component={Landing} />
|
||||
</Switch>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
// Remove loader
|
||||
let ExportedApp = Router
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
const { hot } = require('react-hot-loader')
|
||||
ExportedApp = hot(module)(Landing)
|
||||
ExportedApp = hot(module)(Router)
|
||||
}
|
||||
|
||||
export default ExportedApp
|
||||
|
|
|
|||
|
|
@ -0,0 +1,86 @@
|
|||
import exemple1 from '!!raw-loader!./exemple1.yaml'
|
||||
import exemple2 from '!!raw-loader!./exemple2.yaml'
|
||||
import ColoredYaml from 'Components/rule/ColoredYaml'
|
||||
import React, { useEffect } from 'react'
|
||||
import emoji from 'react-easy-emoji'
|
||||
|
||||
export default function Landing() {
|
||||
useEffect(() => {
|
||||
var css = document.createElement('style')
|
||||
css.type = 'text/css'
|
||||
css.innerHTML = `
|
||||
#js {
|
||||
animation: appear 0.5s;
|
||||
opacity: 1;
|
||||
}
|
||||
#loading {
|
||||
display: none !important;
|
||||
}`
|
||||
document.body.appendChild(css)
|
||||
})
|
||||
return (
|
||||
<div className="app-container">
|
||||
<div className="app-content ui__ container">
|
||||
<div css="text-align: center">
|
||||
<h1 css="">
|
||||
<span css="border: 3px solid var(--colour); color: var(--colour); padding: 0.1rem 0.4rem 0.1rem 0.6rem ; width: 5rem">
|
||||
publi
|
||||
</span>
|
||||
<span css="background: var(--colour); color: white; padding: 0.1rem 0.6rem 0.1rem 0.3rem; width: 5rem; border: 3px solid var(--colour)">
|
||||
codes
|
||||
</span>
|
||||
</h1>
|
||||
<p css="width: 28rem; margin: 0 auto; font-size: 120%">
|
||||
Un nouveau langage de calcul pour encoder les algorithmes d'intérêt
|
||||
public.
|
||||
</p>
|
||||
</div>
|
||||
<h2>Pourquoi ?</h2>
|
||||
<p>
|
||||
Certains algorithmes sont bien trop importants pour être maintenus
|
||||
dans une boîte noire, souvent privée, que seuls les développeurs
|
||||
expérimentés peuvent comprendre.
|
||||
</p>
|
||||
<p>
|
||||
{' '}
|
||||
C'est notamment le cas d'une bonne partie de la loi, qui spécifie en
|
||||
français des règles... et charge à d'autres de les implémenter
|
||||
librement.
|
||||
</p>
|
||||
<p>
|
||||
La plateforme <em>publicodes</em> fusionne documentation et
|
||||
implémentation en partant d'un code simple. Ajouter une règle de
|
||||
calcul, c'est déployer sans effort sur le Web la page de documentation
|
||||
correspondante, lisible par tout citoyen.
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
{emoji('📖 ')} Pour aller plus loin, lisez la{' '}
|
||||
<a href="https://github.com/betagouv/publicodes/wiki">
|
||||
documentation
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
<h2>Projets phares</h2>
|
||||
<h3>
|
||||
La sécurité sociale et les impôts -{' '}
|
||||
<a href="https://mon-entreprise.fr">mon-entreprise.fr</a>
|
||||
</h3>
|
||||
<ColoredYaml source={exemple1} />
|
||||
<p>
|
||||
En plus du site Web, Mon-entreprise est disponible comme une{' '}
|
||||
<a href="/intégration/bibliothèque-de-calcul">
|
||||
bibliothèque de calcul autonome
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
|
||||
<h3>
|
||||
L'impact climatique de nos gestes du quotidien -
|
||||
<a href="https://futur.eco">futur.eco</a>
|
||||
</h3>
|
||||
<ColoredYaml source={exemple2} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue