chtijs / chtijs.francejs.org

ChtiJS website

ChtiJS Website

Welcome to the ChtiJS community website repository.

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, clone the repo locally and install the libs :

git clone https://github.com/ChtiJS/chtijs.francejs.org.git
cd ./chtijs.francejs.org/
npm ci

Then, create a GitHub token to be able to use their API and put it into a local env file :

echo "GH_TOKEN=mysecrettoken\
" >> .env.local

Then run the development server:

npm run dev
# or
yarn dev

Open http://chtijs.localhost:3000 with your browser to see the result.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

chtijs.francejs.org's Issues

Ajouter un package.json ?

Pour les dépendances.

Create the meetup list

To do so, list the markdown files and pickup the metadata. Convert the current metadata to frontmatter ones ( see here https://raw.githubusercontent.com/nfroidure/politics/main/contents/blog/2020-02-26-education-numerique.md ) and read those metadata to display the meetup list (see a full example here: https://github.com/nfroidure/politics/blob/main/src/pages/blog/index.tsx#L186-L236 ).

Todo

• reorganise the markdown files to be more simple
• code the page
• add a readme section to explain how to create a meetup entry

Deploy with github pages (static build)

Fichiers Markdown et metadata

Une première solution de génération de pages web via markdown est dispo sur la branche /feature/build.

Il faut maintenant voir comment on peut ajouter des "metadatas" à ces fichiers;

ça nous permettra d'injecter différentes données au niveau de la page générée (auteur(s), titre, mots-clefs, feuille de style, fichier js, etc...), directement depuis le contenu.

Il y a des plugins qui font celà (https://npmjs.org/package/markdown-extra ou https://npmjs.org/package/meta-marked par exemple), C'est aussi faisable à la mano (exemple en Coffeescript : https://github.com/jnordberg/wintersmith/blob/89d74509edaf8893a5de4a41bbfb8d29c7e93b49/src/plugins/markdown.coffee)

Les critères à examiner sont :

• Syntaxe des metadata : style commentaire HTML, style YAML, etc..
• possibilité des metadata : clef:valeur uniquement, objets composites, tableaux etc...

Postez ici vos trouvailles ;)

Cacher les appels HTTP

Durant le build, les url de certains profils sont appelées deux fois (pour la liste des membres et pour la liste des contributeurs), il faudrait un hashmap local à ghrequest qui permette d'éviter cela.

Faire une page de liens avec les acteurs locaux Lillois

Au chtiJUG, même s'ils font du JAVA ^^, ils nous ont inclus dans les acteurs locaux Lillois :

https://twitter.com/chtijug/lists/lilletechcommunities/members

C'est plutôt une bonne idée je trouve, on pourrait faire une page comme ça chez nous.

Conventions de code ?

Hello,

J'ai une question au sujet des conventions de code utilisées dans le projet. Suivez vous des conventions particulières ?

Cela pourrait ressembler à de l'hystérie mais c'est plutôt pour un point de vue de consistance du code. Par exemple : dans quel cas utilises tu des single quotes et dans quel cas utilises tu des double quotes ? Y a t'il des réglementations sur l'utilisation des ternaires ?

En Ruby (ou en coffeescript), par exemple, on utilise des double quotes quand on a besoin d'interpoler des variables et, le reste du temps, on utilise des single quotes.

Pour Python, par exemple, on a pas le choix dans les conventions. Elles sont dictées par le PEP: http://www.python.org/dev/peps/pep-0008/

Pour Ruby il y a des conventions dictées par la communauté. À chaque projet de choisir le style qui l'intéresse : https://github.com/bbatsov/ruby-style-guide/ ou https://github.com/styleguide/ruby

Le JS ça ressemble plus à Ruby il y'a une multitude d'écoles. Celles dictées par Google, par Airbnb, ...
Avez vous décidé d'en suivre et si oui lesquelles ?

Try to add URL Rewriting ?

URIs changed and it is not cool for SEO etc...

Gulp vs Grunt

Toujours dans l'esprit de l'expérimentation, je me disais que ça pourrait être pas mal de réimplémenter notre workflow Grunt avec Gulp histoire de faire des tests de performance.

Là, je suis en plein travvail pour aider à la préparation de Gulp 4 qui risque de supporter les streams encore plus, mon idée était donc de:

• refaire nos tâches Grunt avec Gulp en mode Buffer.
• refaire nos tâches Grunt avec Gulp en mode Stream

Et faire une comparaison entre Grunt/Gulp buffer/Gulp stream.

Ça tente quelqu'un de s'y mettre avec moi ?

Cleanup unused files

Planète blogs

On en a parlé à l'occasion du dernier ChtiJS. Le planète est en place pour la version Gulp du build.

N'hésitez pas à ajouter le votre et à reporter/fixer tout souci. L'ajout se fait ici :
https://github.com/ChtiJS/chtijs.francejs.org/blob/gulp/config.dat#L25

Create the layout CSS

To do so, check the old styles here : https://github.com/ChtiJS/chtijs.francejs.org/tree/master/documents/less

Since we don't use less anymore, please use CSS variables ( see here https://github.com/nfroidure/politics/blob/main/styles/main.css#L6-L66 for an example )

Todo

• create CSS vars
• build the main layout
• add some instructions on the design in the readme file
• compare to the result in the site https://chtijs.francejs.org/

Recreate readme.md

Original readme.md got overwrote by react native readme. Therefore, it should be recreated and actualized.

(Design) Page d'accueil sur 2 colonnes

Un truc que j'ai essayé de faire, mais sans vraiment y arriver.

Je voulais 2 conteneurs pour "Concept" et pour "Prochaine réunion", histoire de les mettre sur 2 colonnes.

Or, si on peut mettre du HTML dans le markdown, de façon assez logique tout le contenu markdown d'un bloc HTML est ignoré par le convertisseur markdown => html. Je croyais que c'était possible (j'ai un vague souvenir d'y être arrivé, ailleurs, dans d'autres situations... mais "vague" :) ).

Bref, j'ai l'impression que si on veut ça (les 2 colonnes), il faut écrire toute cette zone en pur html, ou changer de syntaxe (certaines extensions à markdown font ce genre de choses... mais on s'éloigne du standard..)

Build a static search engine

Consider using minisearch instead of lunr

lunr seems unmaintained so maybe minisearch worth a try : https://github.com/lucaong/minisearch

Compléter la documentation (readme)

• Détailler un peu le process de build du site.
• Proposer une façon de bosser via github, à la fois propre et adaptée aux débutants (s'inspirer de ce qu'à commencé à faire @flexbox, cf fin du readme).

Create the members page

Missing atom feeds

Atom feeds should be added at some point.
See for implementation: https://github.com/nfroidure/politics/blob/main/src/pages/blog/pages/%5Bpage%5D.tsx#L16-L19

Create the simple markdown page

See https://github.com/nfroidure/politics/blob/main/src/pages/%5Bid%5D.tsx for an example

Le planète ne reporte pas les erreurs XML

Voir si ça se trouve dans les options de FeedR ou si c'est un problème à mentionner dans une issue sur ce repo https://github.com/bevry/feedr

Pagination

Ça paraît con, mais vu qu'on va multiplier les meetups, à un moment, il va falloir penser à paginer le planète, les meetups et/ou la liste des membres.

Des idées ?

Create the contributor page

Build cassé chez moi :-/

J'ai cloné un repo neuf pour #39 .

J'ai une erreur bizarre dès le lancement, je vous met la fin du log :

[20:05:41] Dev server listening on %d 35729
[gulp] Finished 'server' after 1.64 s
[20:05:41] chtijs.svg was reloaded.
<File "about.md" <Buffer 0a 0a 23 20 4e 6f  ...>> { title: 'Les habitudes de notre groupe',
  description: 'Pour mieux comprendre ChtiJS, découvrez nos petites habitudes.',
  shortTitle: 'Nos habitudes',
  shortDesc: 'Découvrir nos habitudes',
  keywords: [ 'JavaScript', 'groupe', 'Nord', 'Pas-de-Calais' ],
  lang: 'fr',
  location: 'FR',
  name: 'about',
  path: '/',
  ext: '.md',
  href: '/about.md' }
[20:05:41] favicon.png was reloaded.

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error in plugin 'gulp-spawn'
/bin/sh: convert: command not found
cat: stdout: Broken pipe

    at Socket.<anonymous> (/Users/Gus/Sites/chtiJS_2/chtijs.francejs.org/node_modules/gulp-spawn/index.js:53:26)
    at Socket.EventEmitter.emit (events.js:117:20)
    at _stream_readable.js:920:16
    at process._tickDomainCallback (node.js:459:13)

Bref, je comprend pas pourquoi chtijs.svg et favicon.pngsont marquées en 'reloaded', au démarrage alors que je viens à peine de lancer la commande.

Contenu du site

Je me permet de déplacer la discussion ici pour le contenu du site. Voici la somme de toutes les propales sur l'arborescence :

Menu

• Accueil
• Meetups (slides, vidéos, compte rendus, blog post sur l'évent).
  --> p-ê aussi un système pour le choix des futures dates, ou au moins, un lien permanent vers le Doodle en cours
• Membres (nom, prénom, twitt, blog)
• Planet (aggrégation des flux des catégories JavaScript de nos blogs respectifs).
  --> peut-être aussi des liens vers des articles importants FR ou internationaux
• Forum
• Contact (pour sponsors éventuels, nouveaux membres etc...)

Contenus annexes

• Un autre truc qui serait cool : un widget Twitter câblé sur le compte @ChtiJS (mais peut-être était-ce implicite car évident ?)
• Liens Mutualab, FranceJS
• Forum ?? Disqus ??

Voilà voilà :)

switch to nextjs and remove gulp stuffs

Add eslint + prettier

Générateur de site statique

Quel système de générateur de site statique ?

De mon coté, j'ai un peu joué avec wintersmith, mais plusieurs trucs m'y dérange pour chtiJS :

• C'est écrit en Coffeescript
• ça s'installe bizarrement, je trouve (ça s'installe au global)

Du coup, je comptais regarder du coté de grunt-assemble, voir s'y on y retrouve les mêmes possibilités.

Optimize images

See : https://github.com/cyrilwanner/next-optimized-images Libs are outdated.

No compatible version found: grunt-ttf2eot@'latest'

C'est que je suis pas doué ?

npm ERR! System Linux 3.11.0-13-generic
npm ERR! command "node" "/usr/local/bin/npm" "install"
npm ERR! cwd /var/www/chtijs.francejs.org
npm ERR! node -v v0.8.22
npm ERR! npm -v 1.1.24
npm ERR! message No compatible version found: grunt-ttf2eot@'latest'
npm ERR! message No valid targets found.
npm ERR! message Perhaps not compatible with your version of node?

Create a 404 page

We should not use the default react 404 page. Therefore, we need to create a custom one.

Refaire le logo ChtiJS

Si quelqu'un a un mac et la police qui va bien pour refaire le logo de ChtiJS à partir du SVG du repo (dans images/) ça serait cool. Ne pas oublier de transformer le texte en chemin.

++

Réduire la complexité du gulpfile

https://codeclimate.com/github/ChtiJS/chtijs.francejs.org/gulpfile.js

Create the planet page

Retrieve the members atom feeds content to display it in the page,

Todo

• move the feed list in a config file
• implement the code that read their content (old code is here https://github.com/ChtiJS/chtijs.francejs.org/blob/63a0ac8cbcb8bb1d21522cec63e45ee216e04d1e/gulpplugins/planet.js )
• put it in the getStaticProps method

Choix du système de template

Si on part sur du statique, il nous faudra un système de template. L'idéal serait une système de template qui puisse être utilisé indépendamment en back et en front, streamable et non destructif si possible. Des idées ?

Make sure site is responsive

Renommer la rubrique "Blog" en "Meetups"

Je trouve que la rubrique blog est pas vraiment représentative de son contenu.

Je suis d'avis de la renommer en "Meetups" ou autre chose qui indique ce c'est la liste des résumés de nos meetups.

Par la suite, nous pourrons créer une rubrique actualités si besoin. De plus, pour les "billets" de blogs, il nous reste la solution du Planet.

Qu'en pensez-vous ?

Annuaire des membres

Suite aux discussions à ChtiJS et sur cette issue #7 je pense qu'on est ok pour l'annuaire.

La question, c'est donc comment. Deux solutions:

• utilisation de l'API de GitHub : http://developer.github.com/v3/orgs/members/
• création d'une liste Twitter avec le compte ChtiJS et utilisation de l'API de Twitter.

La première solution est la plus facile car l'API GitHub est publique, pas comme l'API de Twitter qui nécessite une authentification.

Malheureusement, l'API GitHub ne donne pas le compte Twitter.

Bref, vos idées sont les bienvenues.

Documenter l'orga des tâches Grunt ?

J'arrive pas à saisir l'organisation des tâches Grunt. @0gust1 peux-tu faire un petite intro pour qu'on puisse modifier sans casser la logique que tu as mis en place ?

Des tests sur le générateur de site chtiJS ?

Peut faire l'objet d'un workshop ?

Erreur lors du lancement de gulp

Hello tout le monde, j'ai une erreur après avoir installé les paquets npm en lancant gulp, voilà un screen :
http://grab.by/Kwsi
J'ai du me tromper quelque part dans l'install, si vous avez une idée je suis preneur.

Example de .token

Hello all,
j'ai une sacré lacune par rapport à l'utilisation du gruntfile, est-ce que l'un de vous pourrez me donner un exemple de fichier .token qui permet d'utilise l'API de github , limite en mettre un par défaut qui ne marche pas dans le repo, histoire d'avoir juste à le modifier avec des infos que je générer moi même.

Vidéos des confs

J'ouvre un sujet pour lancer le débat de manière traçable.

@thomassloboda as-tu pu visionner ton enregistrement ? La qualité te semble bonne ?
Peux-tu aussi les transmettre à @oncletom ?

On part sur YouTube DailyMotion ou les deux pour la publication ?

++

Internationalisation

Je pense qu'on devrait avoir au moins une version anglaise du site si on veut pouvoir obtenir des sponsors américains.

Create the meetup detail page

See an example here : https://github.com/nfroidure/politics/blob/main/src/pages/blog/%5Bid%5D.tsx

Refactoriser et nettoyer le générateur de site

Le Gruntfile a bien grossi. Une fois que l'on aura atteint notre objectif (site en ligne), on pourra faire une passe de refacto et de nettoyage (idéalement, après avoir fait un peu de testing).

bloc note liens utiles / à creuser ? :

• https://npmjs.org/doc/cli/npm-link.html (pour les tâches custom ?)
• https://gist.github.com/0gust1/7683132#file-readme-md (#shamelessautopromo ^^) au moins pour la partie qui merge les fichiers de configuration.

Postez vos idées ;)

Blog

Au niveau du blog, plusieurs trucs à trancher :

• l'organisation des billet se fait par un dossier au format date avec un index.md dedans, mais le souci est qu'on aura pas la possibilité de faire pluieurs billet par jours.
• pour la liste des billets, on a deux possibilités :
• * faire deux passes sur les billets : 1 pour collecter les données pour constituezr la liste, récupérer les mots-clés et un autre pour générer les HTML.
• * faire un fichier intermédiaire avec toutes les méta-données pendant la génération des fichiers HTML et paramètrer un watch sur ce fichier qui regénérera le HTML si il est différent. Encore que, je suis pas sûr que le watch soit pas plus bourrin que ça.
• est-ce qu'on fait des billets que pour les rencontres ou est-ce qu'il y aura d'autres cas où on pourrait vouloir faire des billets différents ?

Create the favicon and the banner

Tri

Trier les entrées me paraît important, vu qu'on a un arbre au nombre de noeuds illimités, je me demande quelle serait la bonne façon de faire ça.

J'avais pensé à plusieurs trucs :

• une propriété "position" qu'on ajouterai dans les métas des fichiers MD et qu'on créerai dans les autres pages générées grâce au contenu distant.
• un tri par défaut sur les titres/textes de liens

J'oublie quelque chose ?

Tâche Grunt de création de post

On en a déjà parlé, mais pas encore dans les issues