pwagenerator
v2.0.4
filesinc Annuairetemplates et template-partsfontsimg Répertoirejs Répertoirescss PWA Generator est un générateur de sites statiques qui crée des sites Web statiques basés sur la configuration du projet spécifiée dans projects.json . Il peut générer tout ce dont un site Web a besoin pour fonctionner comme une application Web progressive, par exemple, il fonctionne hors ligne et il est installable. Il peut également le déployer sur Netlify.
Répertorier tous les projets configurés pour la construction projects.json
./pwagenerator.php projects
Créez, déployez et/ou générez des icônes pour un projet à l'aide de la configuration du projet projects.json
./pwagenerator.php [project] [option]
options:
-v verbose
-b build
-i generate icons
-d deploy
Par exemple:
./pwagenerator exampleproject.com -b
Pour créer un nouveau projet, ajoutez-le à projects.json , puis créez-le.
-v ) : fournit une sortie plus détaillée pour l'autre option sélectionnée ( -b , -i ou -d ),-b ) : construit le projet. Au cours de ce processus, PWA Generator génère tous les fichiers nécessaires au fonctionnement du projet. Voir Processus de génération pour plus d'informations.-i ) : génère des icônes pour le projet. Au cours de ce processus, PWA Generator configure un tableau de configuration et génère un ensemble de favicons à partir du fichier img/favicon.svg dans le répertoire du projet à l'aide de real-favicon.-d ) : Déploie le projet. Au cours de ce processus, PWA Generator incrémente la version du projet et déploie le répertoire du projet sur Netlify à l'aide du netlify_id défini projects.json et netlify-cli. files Le répertoire files contient les fichiers qui sont copiés dans le projet lors de sa construction.
Les polices du répertoire fonts ne seront copiées que si elles sont répertoriées dans l'objet fonts dans projects.json , par exemple :
"fonts": {
"heading": "Roboto Slab",
"body": "Roboto"
}
Les fichiers du répertoire opt ne seront copiés que s'ils sont répertoriés dans l'objet opt_files dans projects.json , par exemple :
"opt_files": [
"opt/google_auth.js"
]
inc Annuaire Le répertoire inc contient des fichiers utilisés pour exécuter les tâches du projet.
class-build.php contient des fonctionnalités pour créer, déployer et générer des favicons.class-cli.php contient des fonctionnalités pour les opérations en ligne de commande.class-projects.php contient des fonctionnalités permettant d'obtenir des projets à partir projects.json .class-text.php contient des fonctionnalités de formatage du texte.templates et template-parts Les répertoires templates et template-parts contiennent des fichiers utilisés pour créer des pages.
Lorsqu'un projet est construit pour la première fois, plusieurs fichiers et répertoires sont créés dans le répertoire du projet.
index.php : ne sera pas écrasé par les versions futures et doit contenir des balises et des fonctionnalités spécifiques au projet.js/main.ts : ne sera pas écrasé par les versions futures et doit contenir toute fonctionnalité spécifique au projet.scss/style.scss : ne sera pas écrasé par les versions futures et doit contenir tous les styles spécifiques au projet._redirects : fichier de redirection Netlify. Peut contenir des règles de redirection et de réécriture..gitignore : Git ignore le fichier. Contient une liste de fichiers et de dossiers que Git ne doit pas suivre.manifest.json : fichier manifeste de l’application Web. Contient des données qui indiquent au navigateur l'application Web progressive et comment elle doit se comporter une fois installée.package.json : fichier de données du projet npm . Contient les données de projet pour le gestionnaire de packages npm .package-lock.json : fichier de version de dépendance npm . Contient les versions de dépendances pour les packages installés par le gestionnaire de packages npm . Il est automatiquement généré par npm lorsqu'un package est installé.robots.txt : fichier robots. Contient une liste de règles pour aider les moteurs de recherche à déterminer les pages qu'ils doivent et ne doivent pas explorer.sitemap.xml : Fichier de plan du site. Contient une liste de pages pour aider les moteurs de recherche à découvrir du contenu et améliore ainsi l'optimisation des moteurs de recherche (SEO).sw.js : fichier du travailleur de service. Contient des fonctionnalités qui mettent en cache les actifs et permettent une navigation hors ligne et une expérience « semblable à une application » téléchargeable.tsconfig.json : fichier de configuration de compilation Webpack TypeScript.webpack.config.js : Fichier de configuration Webpack pour générer le bundle.[hash].js à partir des fichiers js/*.ts et scss/*.scss .fonts Le répertoire fonts contient des fichiers de polices copiés à partir de files/fonts pendant le processus de construction. Toutes les modifications apportées à ce répertoire seront écrasées par les futures versions.
img Répertoire Le répertoire img contient des images et des fichiers générés via la commande -i . Un favicon.svg doit être placé dans ce répertoire avant d'exécuter cette commande.
Ce répertoire doit également contenir :
cache_files dans projects.json . Si elle est incluse dans cache_files et dans l'objet nav.image projects.json , l'image sera utilisée dans la barre de navigation de l'en-tête supérieure. Si elle est incluse dans cache_files et dans l'objet header.image projects.json , l'image sera utilisée dans l'en-tête principal.share.jpg utilisée pour le partage sur les réseaux sociaux.posts.json , qui doit être nommée l'URL de la publication avec une extension de fichier .jpg .screenshots dans projects.json .js Répertoire Le répertoire js contient des fichiers .ts qui sont copiés à partir de files/js pendant le processus de construction, ainsi qu'un fichier bundle.[hash].js généré à partir de ces fichiers .ts et des fichiers dans le répertoire scss .
Ce répertoire contient également un fichier main.ts , qui sera généré en tant que fichier vierge lors de la construction initiale. Il ne sera pas écrasé par les versions futures et doit contenir des fonctionnalités spécifiques au projet.
Ce répertoire peut également éventuellement contenir un main.js , si un fichier non compilé est nécessaire. Si cela est nécessaire, ce fichier doit également être inclus dans l'objet cache_files dans projects.json .
scss Le répertoire scss contient les fichiers .scss qui sont copiés à partir de files/scss pendant le processus de construction.
Ce répertoire contient également un fichier style.scss , qui sera généré lors de la construction initiale en tant que fichier contenant uniquement une déclaration :root {} contenant les polices et les couleurs des objets fonts et colors dans projects.json . Il ne sera pas écrasé par les versions futures et doit contenir des styles spécifiques au projet.
projects.json en fonction du project transmis via la ligne de commande.$this->project_data['files']['compile'] est utilisé pour compiler les fichiers dans le répertoire du projet.$this->project_data['files']['compile']$this->project_data['files']['copy'] est utilisé pour copier des fichiers dans le répertoire du projet.files/scss et files/js sont ajoutés à $this->project_data['files']['copy'] .files/opt ne sont ajoutés à $this->project_data['files']['copy'] que s'ils sont également répertoriés dans l'objet opt_files projects.json , par exemple : "opt_files": [
"opt/google_auth.js"
]
$this->project_data['files']['copy'] .$this->project_data['files']['cache'] est utilisé pour ajouter des fichiers au fichier sw.js pour la mise en cache par le service worker.data.json (utilisés pour générer des pages supplémentaires pour créer une expérience de recherche semblable à celle d'une application) et posts.json (utilisés pour générer des articles de blog), sont ajoutés à $this->project_data['files']['cache'] .cache_files dans projects.json sont ajoutés à $this->project_data['files']['cache'] , par exemple : "cache_files": [
"img/logo_header.svg",
"img/logo_nav.svg",
"img/shortcut.png"
]
files/opt ne sont ajoutés à $this->project_data['files']['cache'] que s'ils sont également répertoriés dans l'objet opt_files projects.json , par exemple : "opt_files": [
"opt/google_auth.js"
]
$this->project_data['files']['cache']post (par exemple extraite de posts.json ), une image est également ajoutée à $this->project_data['files']['cache'] , en utilisant l'URL de la page et l'extension de fichier .jpg .$this->project_data['files']['cache']$this->project_data['sitemap']['urls'] pour générer le fichier sitemap.xml ultérieurement.package.jsonindex.phpscss et scss/style.scss avec une déclaration :root {} contenant les polices et les couleurs des objets fonts et colors dans projects.json , par exemple "fonts": {
"heading": "Roboto Slab",
"body": "Roboto"
},
"colors": {
"main": {
"normal": "92D7DA",
"dark": "489094"
},
"accent": {
"normal": "FA96C0",
"dark": "B34F78"
}
}
js et js/main.tsopt.gitignore avec node_modulessw.js$this->project_data['files']['copy'] dans le répertoire du projet.bundle.[hash].js à partir des fichiers js/*.ts et scss/*.scss fournis à l'aide de Webpack via webpack-cli, puis utilise la commande php avec le project , page et project_data transmis comme arguments à compilez chaque fichier dans $this->project_data['files']['compile'] dans un fichier .html minifié.manifest.json . Le fichier manifest.json est copié dans le répertoire du projet, puis modifié en fonction des valeurs de projects.json ( categories , screenshots , shortcuts , android_app_id et apple_app_id ).$this->project_data['files']['compile'] et $this->project_data['files']['copy'] :***FILES*** : Fichiers de $this->project_data['files']['cache']***URLS*** : URL de $this->project_data['redirects'] et $this->project_data['sitemap']['urls']***REDIRECT_URLS*** : URL de $this->project_data['files']['compile'] et $this->project_data['redirects']***URL*** : L'URL du projet depuis $this->project_data['url']***TITLE*** : Le titre du projet depuis $this->project_data['title']***DESCRIPTION*** : La description du projet de $this->project_data['description']***VERSION*** : La version du projet depuis $this->project_data['version'] (extraite de sw.js )***DATE*** : date('Am-d') Voici les polices disponibles pour une utilisation dans l'objet fonts dans projects.json , par exemple :
"fonts": {
"heading": "Roboto Slab",
"body": "Roboto"
}
Les projets open source suivants ont été construits à l'aide de PWA Generator. Consultez le site Web, le dépôt GitHub et la configuration du projet pour projects.json ci-dessous.
{
"url": "nicolefurlan.com",
"title": "Nicole Furlan",
"description": "Software engineer on a pursuit of equality, compassion, and justice for all.",
"keywords": "nicole furlan, nicole pitts",
"categories": [],
"netlify_id": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
"gtm_id": "G-XXXXXXXXXX",
"fbpixel_id": null,
"repixel_id": null,
"google_ads": false,
"amazon_ads": false,
"other_ads": false,
"google_api": {
"google_api_client_id": null,
"google_api_client_key": null,
"google_api_key": null,
"google_api_scope": null,
"google_api_url": null,
"google_api_callback": null
},
"fonts": {
"heading": "Playfair Display",
"body": "Raleway"
},
"fontawesome": true,
"android_app_id": {
"free": null,
"paid": null
},
"apple_app_id": {
"free": null,
"paid": null
},
"screenshots": [
"img/screenshot.png"
],
"shortcuts": null,
"links": [],
"nav": {
"image": "img/logo_nav.svg"
},
"header": {
"title": "Hi! I'm Nicole",
"description": "I'm a Software Engineer working on building a better world for us all",
"image": "img/background.webp",
"image_credit": "Photo by <a href="https://pbase.com/tclout/root" alt="Thomas Cloutier Photography">Thomas Cloutier Photography</a>"
},
"social": {
"mailto": "[email protected]",
"facebook": null,
"twitter": null,
"github": "nikkifurls",
"patreon": null,
"paypal": "donate?hosted_button_id=M7MMF3EWQTLKG",
"portfolio": null,
"yelp": null,
"tripadvisor": null,
"custom": [
{
"url": null,
"label": null,
"text": null,
"link": null
}
]
},
"author": {
"name": "Nicole Furlan",
"twitter": "nicolemfurlan"
},
"redirects": [
{
"from": "/donate",
"to": "https://www.paypal.com/donate?hosted_button_id=M7MMF3EWQTLKG"
}
],
"pages": [],
"cache_files": [
"img/background.webp",
"img/logo_nav.svg"
],
"opt_files": []
}
{
"url": "dogsafefoods.com",
"title": "Dog Safe Foods",
"description": "Sharing food with your dog? Make sure it's safe first",
"keywords": "dog safe foods, dog safe human food, dog safe human foods, safe for dogs to eat, can dogs eat, can my dog eat, can dogs have, can my dog have, good human food for dogs, food dog can eat",
"categories": [
"pets",
"food"
],
"netlify_id": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
"gtm_id": "G-XXXXXXXXXX",
"fbpixel_id": "xxxxxxxxxxxxxxx",
"repixel_id": "xxxxxxxxxxxxxxxxxxxxxxxx",
"google_ads": true,
"amazon_ads": false,
"other_ads": false,
"google_api": {
"google_api_client_id": null,
"google_api_client_key": null,
"google_api_key": null,
"google_api_scope": null,
"google_api_url": null,
"google_api_callback": null
},
"fonts": {
"heading": "Roboto Slab",
"body": "Roboto"
},
"fontawesome": true,
"android_app_id": {
"free": "com.dog_safe_foods.twa",
"paid": "com.dogsafefoods.twa"
},
"apple_app_id": {
"free": null,
"paid": null
},
"screenshots": [
"img/screenshot1.png",
"img/screenshot2.png",
"img/screenshot3.png"
],
"shortcuts": [
{
"name": "View Safe Foods",
"description": "View all foods that are safe for dogs to eat",
"url": "./safe",
"icons": [
{
"src": "img/icon-thumbs-up.png",
"sizes": "512x512"
}
]
},
{
"name": "View Unsafe Foods",
"description": "View all foods that are not safe for dogs to eat",
"url": "./unsafe",
"icons": [
{
"src": "img/icon-thumbs-down.png",
"sizes": "512x512"
}
]
}
],
"links": [],
"nav": {
"image": "img/logo_nav.svg"
},
"header": {
"title": null,
"description": null,
"image": "img/logo_header.svg",
"image_credit": null
},
"social": {
"mailto": "[email protected]",
"facebook": null,
"twitter": "dogsafefoods",
"github": "nikkifurls/dogsafefoods",
"patreon": null,
"paypal": "donate?hosted_button_id=M7MMF3EWQTLKG",
"portfolio": "nicolefurlan.com",
"yelp": null,
"tripadvisor": null,
"custom": [
{
"url": "https://catsafefoods.com",
"label": "Cat Safe Foods",
"text": null,
"link": "<i class='fas fa-cat'></i>"
}
]
},
"author": {
"name": "Nicole Furlan",
"twitter": "nicolemfurlan"
},
"redirects": [
{
"from": "/healthy",
"to": "/safe 301!"
},
{
"from": "/unhealthy",
"to": "/unsafe 301!"
},
{
"from": "/healthy.html",
"to": "/safe 301!"
},
{
"from": "/unhealthy.html",
"to": "/unsafe 301!"
},
{
"from": "/* food=:food",
"to": "/:food 301!"
}
],
"pages": {
"*": {
"url": "",
"title": "",
"description": "Sharing ***TITLE*** with your dog? Make sure it's safe first",
"keywords": "can dogs eat ***TITLE***, can dogs have ***TITLE***, dogs ***TITLE***, dogs and ***TITLE***, ***TITLE*** safe for dogs, ***TITLE*** bad for dogs, ***TITLE*** ok for dogs, is it safe for dogs to eat ***TITLE***, is it safe for dogs to have ***TITLE***"
},
"safe": {
"url": "safe",
"title": "Safe Foods for Dogs",
"description": "Sharing food with your dog? Make sure it's on this list of safe foods for dogs first",
"keywords": "healthy human food for dogs, safe human food for dogs, human food that dogs can eat, good human food for dogs"
},
"unsafe": {
"url": "unsafe",
"title": "Unsafe Foods for Dogs",
"description": "Sharing food with your dog? Make sure it's not on this list of unsafe foods for dogs first",
"keywords": "unhealthy human food for dogs, food not to feed dogs, bad food for dogs, bad human food for dogs"
}
},
"cache_files": [
"img/logo_header.svg",
"img/logo_nav.svg",
"img/icon-thumbs-up.png",
"img/icon-thumbs-down.png",
"ads.txt",
"sellers.json"
],
"opt_files": []
}
Les contributions sont les bienvenues ! Si vous découvrez un problème ou avez une idée d'amélioration, n'hésitez pas à créer un problème.
