Update documentation and add SITE_TITLE token

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "cSpell.words": ["SUMMARISEAPI", "SUMMARISEAPIKEY"]
+  "cSpell.words": ["categorised", "SUMMARISEAPI", "SUMMARISEAPIKEY"]
 }

README.md

@@ -1,27 +1,71 @@
-# Postreader
+# Post Reader
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.1.0.
+Post Reader is a Github repository that can be forked to deploy a hyperlink aggregating website, for your specific topic, to Github Pages. Anyone with a GitHub account that creates a Pull Request can contribute content to the website.
 
-## Development server
+The source repository (this one), includes a few example hyperlinks related to [Angular](https://angular.dev/), the framework this repository was built with. The examples can be viewed at this repository's [Github Page](https://thebeard.github.io/post-reader/).
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+## How to Contribute an Article or Post (Hyperlink)
 
-## Code scaffolding
+_For points (7) to (10) see the example template below list this._
 
-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`.
+1. <a href="https://github.com/signup" target="_blank">Create a Github Account</a> if you don't have one yet
+1. Return to this page
+1. Go to the <a href="https://github.com/thebeard/post-reader/blob/main/src/content/template" target="_blank">New Hyperlink Template Page</a>
+1. Copy the template using the **Copy raw file** button located in the File Preview toolbar 
+1. Click the `+` (**Add file**) button in the **Files** sidebar on the left
+1. Paste the template content
+1. Optionally, insert a `Title` tag. (Will be inferred from original content if ommitted)
+1. Insert one or more `Tags` tags, to ensure your content is categorised accordingly.
+1. Most importantly, insert the hyperlink into the `Link` tag using the format in the example.
+1. Below the meta section (starting and ending with `---`) you are able to add a summary for your hyperlink using **Markdown** syntax. If not submitted, a summary will be automatically generated.
+1. Use the **Commit** button to progress to the next step.
+1. If prompted, optionally add a commit message.
+1. From the two options presented, to commit directly or to create a Pull Request, select the **Pull Request** option.
+1. Finally confirm your commit to submit your hyperlink post.
+1. A member of the approval committee will now receive your submission and approve it for display on the website.
 
-## Build
+```markdown
+---
+[//]:# (Title: My title)
+[//]:# (Tags: #my, #tags)
+[//]:# (Link: https://my-example.com)
+---
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+# My Example header
 
-## Running unit tests
+My example summary goes here. Lorem Ipsum dolor sit amet ...
+```
+_Example template_
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+## How to use this Github Repository to create your own Hyperlink Aggregator site
 
-## Running end-to-end tests
+### Select your deployment method
 
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+#### Github Pages
 
-## Further help
+By default, for any commits made to the `main` branch of your new repository, a deployment to Github Pages will triggered using Github Workflows.
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+Configure your Custom Domain to allow your website to display on your pre-registered domain of choice.
+
+To disable Github Pages deployments, delete the file `.github/workflows/npm-publish-github-packages.yml`
+
+#### Via Terraform
+
+A sample set of terraform scripts can be found at the `/terraform` location. The sample terraform scripts are configured to deploy to AWS. Update and use as per your cloud provider and CI/CD framework accordingly.
+
+See other section below as well.
+
+#### Other
+
+When setting up your own build and continuous integration pipelines, please note this application uses a custom npm command. Use `npm run build-with-content` to build your application.
+
+
+### Fork the application
+
+1. Fork the project to a new public repository
+1. Ensure necessary Pull Request and Commit permissions are set up to allow for post approvals by the administrator and/or moderators
+1. Change the title at the top of this markdown file (`# Post Reader`)
+1. Change the two intro paragraphs at the top of this markdown file, to reflect the topic and purpose of your own website.
+1. In the file located at `src/app/app.config.ts` change the site title on **line 24**
+1. Remove the example posts in the `src/content` folder
+1. Submit and commit your first post

src/app/app.config.ts

@@ -2,12 +2,13 @@ import { ApplicationConfig, importProvidersFrom, provideZoneChangeDetection } fr
 import { provideRouter } from '@angular/router';
 import { provideClientHydration } from '@angular/platform-browser';
 import { LucideAngularModule, Info, Wand } from 'lucide-angular';
+import Showdown from 'showdown';
 
 import { DiskPostReader } from './services/post-reader.service';
+import { MARKDOWN_CONVERTER } from './tokens/markdown-converter.token';
 import { POST_READER } from './tokens/post-reader.token';
 import { routes } from './app.routes';
-import { MARKDOWN_CONVERTER } from './tokens/markdown-converter.token';
-import Showdown from 'showdown';
+import { SITE_TITLE } from './tokens/site-title.token';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -19,6 +20,7 @@ export const appConfig: ApplicationConfig = {
       provide: POST_READER,
       useExisting: DiskPostReader
     },
-    { provide: MARKDOWN_CONVERTER, useFactory: () => new Showdown.Converter() }
+    { provide: MARKDOWN_CONVERTER, useFactory: () => new Showdown.Converter() },
+    { provide: SITE_TITLE, useValue: 'post reader' }
   ]
 };

src/app/components/header.component.ts

@@ -1,12 +1,13 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, inject, Input, Output } from '@angular/core';
 import { LucideAngularModule } from 'lucide-angular';
 import { ToggleComponent } from './toggle.component';
 import { Toggle } from '../models/toggle';
+import { SITE_TITLE } from '../tokens/site-title.token';
 
 @Component({
   selector: 'app-header',
   template: `<header>
-    <h1>post reader</h1>
+    <h1>{{ siteTitle }}</h1>
     <div>
       <app-toggle [toggled]="toggled" [caption]="caption" (toggledChange)="toggledChange.emit($event)"></app-toggle>
       <lucide-icon
@@ -49,9 +50,9 @@ import { Toggle } from '../models/toggle';
   standalone: true
 })
 export class HeaderComponent {
+  readonly siteTitle = inject(SITE_TITLE);
+
+  @Input() caption!: string;
   @Input() toggled: Toggle = 'off';
   @Output() toggledChange = new EventEmitter<Toggle>();
-
-  @Input()
-  caption!: string;
 }

src/app/tokens/site-title.token.ts

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+
+export const SITE_TITLE = new InjectionToken<string>('post reader');

src/content/template

@@ -2,12 +2,4 @@
 [//]:# (Title: My title)
 [//]:# (Tags: #my, #tags)
 [//]:# (Link: https://my-example.com)
----
-
-# My example markdown
-
-Write any legitimate markdown to include a summary of the article on the website. Please note markdown header tags are manipulated to display appropriately on the website.
-
-- `#` will render as H4's.
-- `##` will render as H5's.
-- `###` to `######` will render as H6's.
+---