From 125b661007a7c82eca869f5e8f62916bb996470f Mon Sep 17 00:00:00 2001 From: joshua <40035381+joshua-isaac@users.noreply.github.com> Date: Tue, 6 Jul 2021 10:43:44 -0400 Subject: [PATCH] Update README.md --- README.md | 113 ++++++++++++++++++++++-------------------------------- 1 file changed, 45 insertions(+), 68 deletions(-) diff --git a/README.md b/README.md index 4ff1339..c684c8d 100644 --- a/README.md +++ b/README.md @@ -1,85 +1,62 @@ -# Agility CMS + Angular -> Blog +# Agility CMS & Angular Starter -This is a sample Angular 11 blog with Agility CMS. You can use this as a starting point to build a fully-featured Angular App with a headless cms like Agility. +New to Agility CMS? [Sign up for a FREE account](https://agilitycms.com/free) -### Builds: +[Introduction to Angular and Agility CMS](https://help.agilitycms.com/hc/en-us/articles/360056766852) -- Preview: https://agilitycms-angular-blog-preview.netlify.app/ +## About This Starter +- Angular is a popular platform and framework maintained by Google for building single-page client applications using HTML and TypeScript. +- Supports full [Page Management](https://help.agilitycms.com/hc/en-us/articles/360055805831). +- Supports Preview Mode. - - [![Netlify Status](https://api.netlify.com/api/v1/badges/8ecd8982-86bf-498a-a05d-7ecbf4bbf11b/deploy-status)](https://app.netlify.com/sites/agilitycms-angular-blog-preview/deploys) +### Tailwind CSS -- Production: https://agilitycms-angular-blog.netlify.app/ - - [![Netlify Status](https://api.netlify.com/api/v1/badges/0f0a9c03-92a2-4b6a-8d71-187b449c8566/deploy-status)](https://app.netlify.com/sites/agilitycms-angular-blog/deploys) +This starter uses [Tailwind CSS](https://tailwindcss.com/), a simple and lightweight utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup. -## Getting Started - -Angular and Agility CMS, also TypeScript? Oh ya, let's go! - -### Agility CMS Account - -The first thing you need is a free Agility CMS account. [You can get that here πŸ‘‹](https://manager.agilitycms.com/org/subscriptions/instance-setup?template=jamstack-blog&plan=agility-free). -Once you create your Agility CMS account and ✨new✨ project name, come back here. - -### Clone the Repo - -Now that you've got the **content**, _you need the `code`!_ - -Go ahead and clone the repo from github: πŸ‘‡ - -```shell -https://github.com/agility/agilitycms-angular-blog.git -``` - -### Install Dependencies - -`npm install` or `yarn install` - -Normally, this will create 9,999,999,999 files in your `node_modules` folder. Luckily, we're only gonna create 9,999,999 for this small demo. - -YAY! πŸ‘πŸ‘πŸ‘ - -### Environment Variables +It also comes equipped with [Autoprefixer](https://www.npmjs.com/package/autoprefixer), a plugin which use the data based on current browser popularity and property support to apply CSS prefixes for you. -You care about the environment don't you? πŸŒ²πŸŒ³πŸŒ΄πŸŽ‹ - -Either way, you're gonna need to grab a few variables from your Agility CMS account. Head over to the [API Keys page](https://manager.agilitycms.com/settings/apikeys) in Agility CMS (https://manager.agilitycms.com/settings/apikeys) and grab your GUID, and API Keys for Preview and Fetch. - -- Open up your `src/environments` folder -- Overwrite the values in the `environment.ts` file. - - πŸ—„ Use your PREVIEW KEY for the API Key. -- Overwrite the values in the `environment.prod.ts` file - - πŸ—„ Use your FETCH KEY for the API Key. - -## Development server - -Run `npm start` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. - -This will also load the latest (staging mode) content from Agility CMS. When you change content in the CMS, simply reload your page to see those changes updated in the site. - -### Agility Service - -Agility CMS content is loaded using methods in the `agility/agility.service.ts` class. - -## Code scaffolding - -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. - -Agility CMS modules are named `module-[module_name]`, and are also registered in the `agility/module.service.ts` file, indexed by the module reference name in lower case. Each module component implements `IAgilityModuleComponent` with a special `data` input property that has the content for that module. +## Getting Started -Check out the examples we've provided to learn more! +To start using the Agility CMS & Angular Starter, [sign up](https://agilitycms.com/free) for a FREE account and create a new Instance using the Blog Template. -## Build +### Setting up the Starter -Run `npm run dev` to build the project in preview mode. The build artifacts will be stored in the `dist/` directory. +1. cd into the `src/environments` directory. +2. Overwrite the values in the `environment.ts` file using your Preview API Key. +4. Overwrite the values in the `environment.prod.ts` file using your Fetch API Key. -Run `npm run build` flag for a production build. +You can get these values from the API Keys page in [Agility Settings](https://manager.agilitycms.com/settings/apikeys). -## Further help +## Running the Site Locally +- `npm run start` => Starts your development environment. +- `npm run build` => Builds your production enviornment. -### Angular +## How It Works +- [How Pages Work](https://help.agilitycms.com/hc/en-us/articles/4403477298701) +- [How Page Modules Work](https://help.agilitycms.com/hc/en-us/articles/4403477635853) +- [How To Fetch Additional Data in Page Modules](https://help.agilitycms.com/hc/en-us/articles/4403478652301) -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. +## Resources ### Agility CMS +- [Official site](https://agilitycms.com) +- [Documentation](https://help.agilitycms.com/hc/en-us) -To get help with Agility CMS, reach out to us on our website https://agilitycms.com +### Angular +- [Official site](https://angular.io/) +- [Documentation](https://angular.io/docs) + +### Tailwind CSS +- [Official site](http://tailwindcss.com/) +- [Documentation](http://tailwindcss.com/docs) + +### Community +- [Official Slack](https://join.slack.com/t/agilitycommunity/shared_invite/enQtNzI2NDc3MzU4Njc2LWI2OTNjZTI3ZGY1NWRiNTYzNmEyNmI0MGZlZTRkYzI3NmRjNzkxYmI5YTZjNTg2ZTk4NGUzNjg5NzY3OWViZGI) +- [Blog](https://agilitycms.com/resources/posts) +- [GitHub](https://github.com/agility) +- [Forums](https://help.agilitycms.com/hc/en-us/community/topics) +- [Facebook](https://www.facebook.com/AgilityCMS/) +- [Twitter](https://twitter.com/AgilityCMS) + +## Feedback and Questions +If you have feedback or questions about this starter, please use the [Github Issues](https://github.com/agility/agilitycms-angular-starter/issues) on this repo, join our [Community Slack Channel](https://join.slack.com/t/agilitycommunity/shared_invite/enQtNzI2NDc3MzU4Njc2LWI2OTNjZTI3ZGY1NWRiNTYzNmEyNmI0MGZlZTRkYzI3NmRjNzkxYmI5YTZjNTg2ZTk4NGUzNjg5NzY3OWViZGI) or create a post on the [Agility Developer Community](https://help.agilitycms.com/hc/en-us/community/topics).