Compare commits
No commits in common. "develop" and "1.0.0" have entirely different histories.
15
.github/pull_request_template.md
vendored
15
.github/pull_request_template.md
vendored
@ -1,15 +0,0 @@
|
|||||||
## Description
|
|
||||||
<!-- Adition information & context -->
|
|
||||||
...
|
|
||||||
|
|
||||||
## Issues
|
|
||||||
<!-- Issues this PR will address -->
|
|
||||||
- closes #___
|
|
||||||
- owner/repo#___
|
|
||||||
|
|
||||||
## Checklist
|
|
||||||
<!-- Compelte after creating PR -->
|
|
||||||
- [ ] Linked issues
|
|
||||||
- [ ] Reviewed changes
|
|
||||||
- [ ] Updated comments/documentation
|
|
||||||
|
|
||||||
54
.github/workflows/website.yaml
vendored
54
.github/workflows/website.yaml
vendored
@ -1,54 +0,0 @@
|
|||||||
name: Build Website
|
|
||||||
run-name: Build Website
|
|
||||||
|
|
||||||
on:
|
|
||||||
push:
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
build:
|
|
||||||
name: Build NPM Project
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
container: node
|
|
||||||
steps:
|
|
||||||
- name: Clone Repository
|
|
||||||
uses: ztimson/actions/clone@develop
|
|
||||||
|
|
||||||
- name: Install Dependencies
|
|
||||||
run: npm i
|
|
||||||
|
|
||||||
- name: Build Project
|
|
||||||
run: npm run build
|
|
||||||
|
|
||||||
- name: Upload Artifacts
|
|
||||||
if: ${{inputs.artifacts}} != "false"
|
|
||||||
uses: actions/upload-artifact@v3
|
|
||||||
with:
|
|
||||||
name: website
|
|
||||||
path: dist
|
|
||||||
retention-days: 7
|
|
||||||
|
|
||||||
tag:
|
|
||||||
name: Tag Version
|
|
||||||
needs: build
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
container: node
|
|
||||||
steps:
|
|
||||||
- name: Clone Repository
|
|
||||||
uses: ztimson/actions/clone@develop
|
|
||||||
|
|
||||||
- name: Get Version Number
|
|
||||||
run: echo "VERSION=$(cat package.json | grep version | grep -Eo ':.+' | grep -Eo '[[:alnum:]\.\/\-]+')" >> $GITHUB_ENV
|
|
||||||
|
|
||||||
- name: Tag Version
|
|
||||||
uses: ztimson/actions/tag@develop
|
|
||||||
with:
|
|
||||||
tag: ${{env.VERSION}}
|
|
||||||
|
|
||||||
publish:
|
|
||||||
name: Build & Push Dockerfile
|
|
||||||
needs: build
|
|
||||||
uses: ztimson/actions/.github/workflows/docker.yaml@develop
|
|
||||||
with:
|
|
||||||
name: ztimson/291st
|
|
||||||
repository: ${{github.server_url}}/${{github.repository}}.git
|
|
||||||
pass: ${{secrets.DEPLOY_TOKEN}}
|
|
||||||
82
.gitlab/.gitlab-ci.yml
Normal file
82
.gitlab/.gitlab-ci.yml
Normal file
@ -0,0 +1,82 @@
|
|||||||
|
image: node:16
|
||||||
|
|
||||||
|
stages:
|
||||||
|
- build
|
||||||
|
- test
|
||||||
|
- deploy
|
||||||
|
|
||||||
|
npm:
|
||||||
|
stage: build
|
||||||
|
cache:
|
||||||
|
- key:
|
||||||
|
files:
|
||||||
|
- package-lock.json
|
||||||
|
paths:
|
||||||
|
- node_modules
|
||||||
|
policy: pull-push
|
||||||
|
- key: $CI_PIPELINE_ID
|
||||||
|
paths:
|
||||||
|
- dist
|
||||||
|
policy: push
|
||||||
|
script:
|
||||||
|
- npm install
|
||||||
|
- npm run build
|
||||||
|
artifacts:
|
||||||
|
paths:
|
||||||
|
- dist
|
||||||
|
expire_in: 1 week
|
||||||
|
rules:
|
||||||
|
- if: $CI_COMMIT_BRANCH
|
||||||
|
|
||||||
|
audit:
|
||||||
|
stage: test
|
||||||
|
cache:
|
||||||
|
- key:
|
||||||
|
files:
|
||||||
|
- package-lock.json
|
||||||
|
paths:
|
||||||
|
- node_modules
|
||||||
|
policy: pull
|
||||||
|
script:
|
||||||
|
- echo "vulnerabilities_high $(npm audit | grep -oE '[0-9]+ high' | grep -oE '[0-9]+' || echo 0)" > metrics.txt
|
||||||
|
- echo "vulnerabilities_medium $(npm audit | grep -oE '[0-9]+ moderate' | grep -oE '[0-9]+' || echo 0)" >> metrics.txt
|
||||||
|
- echo "vulnerabilities_low $(npm audit | grep -oE '[0-9]+ low' | grep -oE '[0-9]+' || echo 0)" >> metrics.txt
|
||||||
|
artifacts:
|
||||||
|
reports:
|
||||||
|
metrics: metrics.txt
|
||||||
|
rules:
|
||||||
|
- if: $CI_COMMIT_BRANCH
|
||||||
|
|
||||||
|
registry:
|
||||||
|
stage: deploy
|
||||||
|
image: docker
|
||||||
|
cache:
|
||||||
|
- key: $CI_PIPELINE_ID
|
||||||
|
paths:
|
||||||
|
- dist
|
||||||
|
policy: pull
|
||||||
|
before_script:
|
||||||
|
- docker login -u $CI_REGISTRY_USER -p $CI_JOB_TOKEN $CI_REGISTRY
|
||||||
|
script:
|
||||||
|
- TAG=$([ "$CI_COMMIT_BRANCH" = "$CI_DEFAULT_BRANCH" ] && echo "latest" || echo "$CI_COMMIT_BRANCH" | sed -E "s/[_/]/-/g")
|
||||||
|
- docker build --no-cache -t "$CI_REGISTRY_IMAGE:$TAG" .
|
||||||
|
- docker push "$CI_REGISTRY_IMAGE:$TAG"
|
||||||
|
rules:
|
||||||
|
- if: $CI_COMMIT_BRANCH
|
||||||
|
allow_failure: true
|
||||||
|
|
||||||
|
tag:
|
||||||
|
stage: deploy
|
||||||
|
image:
|
||||||
|
name: alpine/git
|
||||||
|
entrypoint: [ "" ]
|
||||||
|
cache: [ ]
|
||||||
|
before_script:
|
||||||
|
- git remote set-url origin https://ReleaseBot:$DEPLOY_TOKEN@gitlab.zakscode.com/$CI_PROJECT_PATH.git
|
||||||
|
script:
|
||||||
|
- VERSION=$(cat package.json | grep version | grep -Eo ':.+' | grep -Eo '[[:alnum:]\.\/\-]+')
|
||||||
|
- git tag -f $VERSION $CI_COMMIT_SHA
|
||||||
|
- git push -f origin $VERSION
|
||||||
|
rules:
|
||||||
|
- if: '$CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH'
|
||||||
|
allow_failure: true
|
||||||
@ -1 +0,0 @@
|
|||||||
* @ztimson
|
|
||||||
@ -17,7 +17,7 @@ COPY . .
|
|||||||
RUN if [ ! -d "dist" ] && [ ! -d "node_modules" ]; then npm install; fi
|
RUN if [ ! -d "dist" ] && [ ! -d "node_modules" ]; then npm install; fi
|
||||||
|
|
||||||
# Build
|
# Build
|
||||||
RUN BUILD_MODE=$([ "$NODE_ENV" = "prod" ] && echo "prod" || echo "dev") && \
|
RUN BUILD_MODE=$([ "$NODE_ENV" = "prod" ] && echo "dynmaic-prod" || echo "dynamic") && \
|
||||||
if [ ! -d "dist" ]; then npm run "build:$BUILD_MODE"; fi
|
if [ ! -d "dist" ]; then npm run "build:$BUILD_MODE"; fi
|
||||||
|
|
||||||
# Use Nginx to serve
|
# Use Nginx to serve
|
||||||
|
|||||||
11
LICENSE
11
LICENSE
@ -1,11 +0,0 @@
|
|||||||
Copyright (c) 2023 Zakary Timson
|
|
||||||
|
|
||||||
All Rights Reserved.
|
|
||||||
|
|
||||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
||||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
||||||
THE SOFTWARE.
|
|
||||||
116
README.md
116
README.md
@ -1,98 +1,46 @@
|
|||||||
<!-- Header -->
|
# 291st JTF
|
||||||
<div id="top" align="center">
|
[Clan page](https://291st.ca) for the 291st Joint Task Force
|
||||||
<br />
|
|
||||||
|
|
||||||
<!-- Logo -->
|
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.2.2.
|
||||||
<a href="/src/assets/img/header.png">
|
|
||||||
<img src="./src/assets/img/logo.png" alt="Logo" width="200" height="200">
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<!-- Title -->
|
|
||||||
### 291st Joint Task Force
|
|
||||||
|
|
||||||
<!-- Description -->
|
|
||||||
Clan website for the _291st Joint Task Force_
|
|
||||||
|
|
||||||
<!-- Repo badges -->
|
|
||||||
[](https://git.zakscode.com/ztimson/291st/tags)
|
|
||||||
[](https://git.zakscode.com/ztimson/291st/pulls)
|
|
||||||
[](https://git.zakscode.com/ztimson/291st/issues)
|
|
||||||
|
|
||||||
<!-- Links -->
|
|
||||||
|
|
||||||
---
|
|
||||||
<div>
|
|
||||||
<a href="https://git.zakscode.com/ztimson/291st/releases" target="_blank">Release Notes</a>
|
|
||||||
• <a href="https://git.zakscode.com/ztimson/291st/issues/new?template=.github%2fissue_template%2fbug.md" target="_blank">Report a Bug</a>
|
|
||||||
• <a href="https://git.zakscode.com/ztimson/291st/issues/new?template=.github%2fissue_template%2fenhancement.md" target="_blank">Request a Feature</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
---
|
|
||||||
</div>
|
|
||||||
|
|
||||||
## Table of Contents
|
## Table of Contents
|
||||||
- [291st](#top)
|
[[_TOC_]]
|
||||||
- [About](#about)
|
|
||||||
- [Demo](https://291st.ca)
|
|
||||||
- [Built With](#built-with)
|
|
||||||
- [Setup](#setup)
|
|
||||||
- [Production](#production)
|
|
||||||
- [Development](#development)
|
|
||||||
- [License](#license)
|
|
||||||
|
|
||||||
## About
|
## Prerequisites
|
||||||
|
- [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
|
||||||
This website was created for the _291st Joint Task Force_ to act as a simple landing page for their domain.
|
- [NodeJS 16](https://nodejs.org/en/)
|
||||||
|
- _[Docker](https://docs.docker.com/install/) (Optional)_
|
||||||
It includes a list of managed servers & the _Discord_ server list.
|
|
||||||
|
|
||||||
The technology stack consists of a front-end built with _Angular_ & is deployed using _Docker_.
|
|
||||||
|
|
||||||
### Demo
|
|
||||||
Website: https://291st.ca
|
|
||||||
|
|
||||||
### Built With
|
|
||||||
[](https://angular.io/)
|
|
||||||
[](https://getbootstrap.com)
|
|
||||||
[](https://docker.com/)
|
|
||||||
[](https://nodejs.org/)
|
|
||||||
[](https://typescriptlang.org/)
|
|
||||||
|
|
||||||
## Setup
|
## Setup
|
||||||
|
The project can either be run using NPM or Docker. NPM is recommended for development.
|
||||||
<details>
|
<details>
|
||||||
<summary>
|
<summary>NPM</summary>
|
||||||
<h3 id="production" style="display: inline">
|
|
||||||
Production
|
|
||||||
</h3>
|
|
||||||
</summary>
|
|
||||||
|
|
||||||
#### Prerequisites
|
|
||||||
- [Docker](https://docs.docker.com/install/)
|
|
||||||
|
|
||||||
#### Instructions
|
|
||||||
1. Run the docker image: `docker run -p 80:80 git.zakscode.com/ztimson/291st:latest`
|
|
||||||
2. Open [http://localhost](http://localhost)
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary>
|
|
||||||
<h3 id="development" style="display: inline">
|
|
||||||
Development
|
|
||||||
</h3>
|
|
||||||
</summary>
|
|
||||||
|
|
||||||
#### Prerequisites
|
|
||||||
- [Node.js](https://nodejs.org/en/download)
|
|
||||||
|
|
||||||
#### Instructions
|
|
||||||
1. Install the dependencies: `npm install`
|
1. Install the dependencies: `npm install`
|
||||||
2. Start the Angular server: `npm run start`
|
2. Start the Angular server: `npm run start`
|
||||||
3. Open [http://localhost:4200](http://localhost:4200)
|
</details>
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>Docker</summary>
|
||||||
|
|
||||||
|
1. Build the docker image: `docker build -t 291st:<TAG> .`
|
||||||
|
2. Start the new image: `docker run -p 4200:80 291st:<TAG>`
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
## License
|
The website should now be accessible on [http://localhost:4200](http://localhost:4200)
|
||||||
Copyright © 2023 Zakary Timson | All Rights Reserved
|
|
||||||
|
|
||||||
See the [license](./LICENSE) for more information.
|
## Cheatsheet
|
||||||
|
```bash
|
||||||
|
# Start Angular server
|
||||||
|
npm run start
|
||||||
|
|
||||||
|
# Build production
|
||||||
|
npm run build:prod
|
||||||
|
|
||||||
|
# Build docker image
|
||||||
|
docker build -t 291st:<TAG>
|
||||||
|
|
||||||
|
# Run docker image
|
||||||
|
docker run -p 4200:80 291st:<TAG>
|
||||||
|
```
|
||||||
|
|||||||
@ -21,7 +21,7 @@
|
|||||||
"index": "src/index.html",
|
"index": "src/index.html",
|
||||||
"main": "src/main.ts",
|
"main": "src/main.ts",
|
||||||
"polyfills": "src/polyfills.ts",
|
"polyfills": "src/polyfills.ts",
|
||||||
"tsConfig": "tsconfig.json",
|
"tsConfig": "tsconfig.app.json",
|
||||||
"inlineStyleLanguage": "scss",
|
"inlineStyleLanguage": "scss",
|
||||||
"assets": [
|
"assets": [
|
||||||
"src/assets"
|
"src/assets"
|
||||||
|
|||||||
@ -25,7 +25,7 @@ http {
|
|||||||
autoindex off;
|
autoindex off;
|
||||||
|
|
||||||
location / {
|
location / {
|
||||||
try_files $uri $uri/ /index.html;
|
try_files $uri$args $uri$args/ /index.html;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
10
package.json
10
package.json
@ -1,11 +1,13 @@
|
|||||||
{
|
{
|
||||||
"name": "291st",
|
"name": "291st",
|
||||||
"version": "2.0.0",
|
"version": "0.0.0",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "npx ng serve",
|
"ng": "ng",
|
||||||
|
"start": "ng serve",
|
||||||
"build": "npm run build:dev",
|
"build": "npm run build:dev",
|
||||||
"build:dev": "npx ng build --configuration development",
|
"build:dev": "ng build --configuration development",
|
||||||
"build:prod": "npx ng build --configuration production"
|
"build:prod": "ng build --configuration production",
|
||||||
|
"watch": "ng build --watch --configuration development"
|
||||||
},
|
},
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|||||||
@ -1,9 +1,8 @@
|
|||||||
import {NgModule} from '@angular/core';
|
import {NgModule} from '@angular/core';
|
||||||
import {BrowserModule} from '@angular/platform-browser';
|
import {BrowserModule} from '@angular/platform-browser';
|
||||||
import {AppRouting} from './app.routing';
|
import {AppRouting} from './app.routing';
|
||||||
import {DiscordComponent} from './components/discord/discord.component';
|
|
||||||
import {FooterComponent} from './components/footer/footer.component';
|
import {FooterComponent} from './components/footer/footer.component';
|
||||||
import {ServersComponent} from './components/servers/servers.component';
|
import {NavbarComponent} from './components/navbar/navbar.component';
|
||||||
import {AppComponent} from './containers/app/app.component';
|
import {AppComponent} from './containers/app/app.component';
|
||||||
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
|
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
|
||||||
import {MaterialModule} from './material.module';
|
import {MaterialModule} from './material.module';
|
||||||
@ -11,10 +10,9 @@ import {HomeComponent} from './views/home/home.component';
|
|||||||
|
|
||||||
export const APP_COMPONENTS = [
|
export const APP_COMPONENTS = [
|
||||||
AppComponent,
|
AppComponent,
|
||||||
DiscordComponent,
|
|
||||||
FooterComponent,
|
|
||||||
HomeComponent,
|
HomeComponent,
|
||||||
ServersComponent,
|
FooterComponent,
|
||||||
|
NavbarComponent
|
||||||
]
|
]
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
|||||||
@ -1,7 +0,0 @@
|
|||||||
import {Component} from '@angular/core';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-discord',
|
|
||||||
template: `<iframe src="https://discordapp.com/widget?id=399625240927404033&theme=dark" width="100%" height="98%" allowtransparency="true" frameborder="0" style="min-height: 400px" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>`
|
|
||||||
})
|
|
||||||
export class DiscordComponent { }
|
|
||||||
@ -1,7 +1,7 @@
|
|||||||
<footer>
|
<footer>
|
||||||
<div class="py-2 text-center">
|
<div class="py-2 text-center">
|
||||||
<p class="copywright m-0">
|
<p class="copywright m-0">
|
||||||
Copyright © 291st JTF 2023 | All Rights Reserved<br>
|
Copyright © 291st JTF 2022 | All Rights Reserved<br>
|
||||||
Created by <a href="https://zakscode.com" target="_blank">Zak Timson</a>
|
Created by <a href="https://zakscode.com" target="_blank">Zak Timson</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
16
src/app/components/navbar/navbar.component.html
Normal file
16
src/app/components/navbar/navbar.component.html
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
<mat-toolbar>
|
||||||
|
<mat-toolbar-row>
|
||||||
|
<div>
|
||||||
|
<a class="navbar-brand d-flex align-items-center" routerLink="/">
|
||||||
|
<div class="px-2">291st Joint Task Force</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow-1"></div>
|
||||||
|
<div *ngIf="!hamburger">
|
||||||
|
</div>
|
||||||
|
<button *ngIf="hamburger" mat-icon-button class="mr-3">
|
||||||
|
<mat-icon (click)="hamburgerClick.emit()">menu</mat-icon>
|
||||||
|
</button>
|
||||||
|
</mat-toolbar-row>
|
||||||
|
</mat-toolbar>
|
||||||
|
<div class="navbar-spacing"><!-- Spacing --></div>
|
||||||
58
src/app/components/navbar/navbar.component.scss
Normal file
58
src/app/components/navbar/navbar.component.scss
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
.navbar-spacing {
|
||||||
|
height: 64px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
::ng-deep mat-toolbar {
|
||||||
|
background: #000 !important;
|
||||||
|
border-bottom: #fff solid 1px;
|
||||||
|
height: 64px;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
.mat-toolbar-row {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand {
|
||||||
|
color: #fff;
|
||||||
|
//font-weight: lighter;
|
||||||
|
|
||||||
|
&:hover img {
|
||||||
|
filter: brightness(5%) sepia(75) saturate(100) hue-rotate(25deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-button {
|
||||||
|
//color: rgba(255, 255, 255, 0.55);
|
||||||
|
font-weight: normal;
|
||||||
|
padding: 0 8px 0 8px;
|
||||||
|
|
||||||
|
//&:hover {
|
||||||
|
// color: rgba(255, 255, 255, 0.75);
|
||||||
|
//}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::ng-deep .mat-menu-content {
|
||||||
|
background: #000;
|
||||||
|
border: #fff solid 1px;
|
||||||
|
padding: 0 !important;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
|
||||||
|
mat-divider {
|
||||||
|
border-color: white;
|
||||||
|
margin-top: 0.2rem;
|
||||||
|
padding-bottom: 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
height: 36px;
|
||||||
|
line-height: 36px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.15) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
34
src/app/components/navbar/navbar.component.ts
Normal file
34
src/app/components/navbar/navbar.component.ts
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
import {AfterViewInit, Component, EventEmitter, Input, OnDestroy, Output} from '@angular/core';
|
||||||
|
import {ActivatedRoute} from '@angular/router';
|
||||||
|
import {Subscription} from 'rxjs';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-navbar',
|
||||||
|
templateUrl: './navbar.component.html',
|
||||||
|
styleUrls: ['./navbar.component.scss']
|
||||||
|
})
|
||||||
|
export class NavbarComponent implements AfterViewInit, OnDestroy {
|
||||||
|
private sub!: Subscription;
|
||||||
|
|
||||||
|
@Input() hamburger = true;
|
||||||
|
|
||||||
|
@Output() hamburgerClick = new EventEmitter<void>();
|
||||||
|
|
||||||
|
constructor(private route: ActivatedRoute) { }
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
this.sub = this.route.fragment.subscribe(frag => {
|
||||||
|
if(frag) this.scroll(frag);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy(): void {
|
||||||
|
if(this.sub) this.sub.unsubscribe();
|
||||||
|
}
|
||||||
|
|
||||||
|
scroll(id: string) {
|
||||||
|
const el = document.getElementById(id);
|
||||||
|
if(el) el.scrollIntoView({behavior: 'smooth'});
|
||||||
|
else setTimeout(() => this.scroll(id), 500);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,21 +0,0 @@
|
|||||||
<div *ngFor="let s of servers">
|
|
||||||
<div class="d-flex p-2">
|
|
||||||
<div class="flex-shrink-1 align-self-center">
|
|
||||||
<img *ngIf="s.icon" [src]="s.icon">
|
|
||||||
<mat-icon *ngIf="!s.icon">dns</mat-icon>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex flex-column flex-grow-1">
|
|
||||||
<div mat-line>{{s.name}}</div>
|
|
||||||
<div mat-line class="text-muted">{{s.url}}</div>
|
|
||||||
<div *ngIf="s.mods" mat-line><a [href]="s.mods.link">{{s.mods.num}} mods</a></div>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex flex-shrink-1 justify-content-end">
|
|
||||||
<mat-icon [style.visibility]="s.private ? 'visible' : 'hidden'" class="text-muted" matTooltip="Private" style="font-size: 14px">lock</mat-icon>
|
|
||||||
<div style="width: 12px; height: 12px; border-radius: 6px;"
|
|
||||||
[style.background-color]="s.online ? '#00FF00' : '#FF0000'"
|
|
||||||
[matTooltip]="s.online ? 'Online' : 'Offline'">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<mat-divider></mat-divider>
|
|
||||||
</div>
|
|
||||||
@ -1,48 +0,0 @@
|
|||||||
import {Component} from '@angular/core';
|
|
||||||
|
|
||||||
type Server = {
|
|
||||||
icon?: string;
|
|
||||||
name: string;
|
|
||||||
private: boolean;
|
|
||||||
online: boolean;
|
|
||||||
mods?: {num: number, link: string};
|
|
||||||
url: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-servers',
|
|
||||||
templateUrl: './servers.component.html'
|
|
||||||
})
|
|
||||||
export class ServersComponent {
|
|
||||||
servers: Server[] = [{
|
|
||||||
name: 'Arma 3',
|
|
||||||
private: false,
|
|
||||||
online: false,
|
|
||||||
url: '291st.ca:2302'
|
|
||||||
}, {
|
|
||||||
name: 'Astroneer',
|
|
||||||
private: true,
|
|
||||||
online: false,
|
|
||||||
url: '291st.ca:7777'
|
|
||||||
}, {
|
|
||||||
name: 'Minecraft (Bedrock)',
|
|
||||||
private: true,
|
|
||||||
online: true,
|
|
||||||
url: '291st.ca:19132'
|
|
||||||
}, {
|
|
||||||
name: 'Minecraft (Java)',
|
|
||||||
private: true,
|
|
||||||
online: true,
|
|
||||||
url: '291st.ca:25565'
|
|
||||||
}, {
|
|
||||||
name: 'Valheim',
|
|
||||||
private: true,
|
|
||||||
online: true,
|
|
||||||
url: '291st.ca:2456'
|
|
||||||
}, {
|
|
||||||
name: 'V Rising',
|
|
||||||
private: true,
|
|
||||||
online: false,
|
|
||||||
url: '291st.ca:27015'
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
@ -1,2 +1,5 @@
|
|||||||
|
<app-navbar [hamburger]="mobile"></app-navbar>
|
||||||
|
<div class="fill app-container">
|
||||||
<router-outlet></router-outlet>
|
<router-outlet></router-outlet>
|
||||||
<app-footer></app-footer>
|
<app-footer></app-footer>
|
||||||
|
</div>
|
||||||
|
|||||||
@ -1,16 +1,12 @@
|
|||||||
import {NgModule} from '@angular/core';
|
import {NgModule} from '@angular/core';
|
||||||
import {MatButtonModule} from '@angular/material/button';
|
import {MatButtonModule} from '@angular/material/button';
|
||||||
import {MatIconModule} from '@angular/material/icon';
|
import {MatIconModule} from '@angular/material/icon';
|
||||||
import {MatListModule} from '@angular/material/list';
|
import {MatToolbarModule} from '@angular/material/toolbar';
|
||||||
import {MatTabsModule} from '@angular/material/tabs';
|
|
||||||
import {MatTooltipModule} from '@angular/material/tooltip';
|
|
||||||
|
|
||||||
export const MATERIAL_MODULES = [
|
export const MATERIAL_MODULES = [
|
||||||
MatButtonModule,
|
MatButtonModule,
|
||||||
MatIconModule,
|
MatIconModule,
|
||||||
MatListModule,
|
MatToolbarModule
|
||||||
MatTabsModule,
|
|
||||||
MatTooltipModule,
|
|
||||||
];
|
];
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
|||||||
@ -1,38 +1,9 @@
|
|||||||
<div class="h-100 d-none d-sm-flex align-items-center justify-content-center" style="background: #000 url('/assets/img/helicopter.gif'); background-size: cover;">
|
<section class="fill background d-flex flex-column flex-md-row">
|
||||||
<img src="/assets/img/logo.png" width="auto" height="60%" style="max-width: 60%">
|
<div class="flex-grow-1 p-3" style="flex-basis: 0">
|
||||||
|
<iframe src="https://discordapp.com/widget?id=399625240927404033&theme=dark" width="100%" height="100%" allowtransparency="true" frameborder="0" style="min-height: 500px" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex d-sm-none align-items-center justify-content-center" style="background: #000 url('/assets/img/helicopter.gif'); background-size: cover;">
|
<div class="flex-grow-1 p-3" style="flex-basis: 0">
|
||||||
<img src="/assets/img/logo.png" width="auto" height="60%" style="max-width: 60%">
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="flex-grow-1 p-3" style="flex-basis: 0">
|
||||||
<div style="position: absolute; top: 2rem; left: 2rem;">
|
|
||||||
<h1 class="mb-1 stencil" style="font-size: 3rem">
|
|
||||||
291st
|
|
||||||
<span class="d-none d-sm-inline">Joint Task Force</span>
|
|
||||||
<span class="d-inline d-sm-none">JTF</span>
|
|
||||||
</h1>
|
|
||||||
<h2 class="d-none d-sm-block stencil">"Putting the Damned to Rest"</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content">
|
|
||||||
<mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" class="h-100" style="min-height: 400px">
|
|
||||||
<mat-tab class="h-100">
|
|
||||||
<ng-template mat-tab-label>
|
|
||||||
<mat-icon class="me-2">discord</mat-icon>
|
|
||||||
Discord
|
|
||||||
</ng-template>
|
|
||||||
<app-discord></app-discord>
|
|
||||||
</mat-tab>
|
|
||||||
<mat-tab>
|
|
||||||
<ng-template mat-tab-label>
|
|
||||||
<mat-icon class="me-2">dns</mat-icon>
|
|
||||||
Servers
|
|
||||||
</ng-template>
|
|
||||||
<div class="d-flex justify-content-center">
|
|
||||||
<div class="pt-4" style="width: 300px">
|
|
||||||
<app-servers></app-servers>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</mat-tab>
|
|
||||||
</mat-tab-group>
|
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|||||||
@ -1,23 +1,3 @@
|
|||||||
.content {
|
.background {
|
||||||
text-align: center;
|
background: url("/assets/img/291st-background.png") no-repeat center center;
|
||||||
background-color: #202225;
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media(orientation: landscape) {
|
|
||||||
.content {
|
|
||||||
position: fixed;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 30vw;
|
|
||||||
height: calc(100% - 2rem);
|
|
||||||
margin: 1rem;
|
|
||||||
box-shadow: 6px 6px 5px black;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
::ng-deep .mat-tab-body-wrapper {
|
|
||||||
height: 100%;
|
|
||||||
}
|
}
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.0 MiB |
@ -4,16 +4,17 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<!-- TODO: Description-->
|
||||||
<meta name="description" content="291st Joint Task Force">
|
<meta name="description" content="">
|
||||||
<meta name="author" content="Zak Timson">
|
<meta name="author" content="Zak Timson">
|
||||||
|
|
||||||
<title>291st JTF</title>
|
<title>291st JTF</title>
|
||||||
|
|
||||||
<link href="assets/img/logo.png" rel="icon" type="image/png">
|
<link href="assets/img/logo.png" rel="icon" type="image/png">
|
||||||
|
<link href="https://use.fontawesome.com/releases/v6.1.1/css/all.css" rel="stylesheet">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
|
||||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||||
<link href="https://fonts.googleapis.com/icon?family=Saira+Stencil+One" rel="stylesheet">
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="mat-typography" style="background: #000">
|
<body class="mat-typography" style="background: #000">
|
||||||
|
|||||||
@ -2,18 +2,18 @@
|
|||||||
@include mat.core();
|
@include mat.core();
|
||||||
|
|
||||||
// hue. Available color palettes: https://material.io/design/color/
|
// hue. Available color palettes: https://material.io/design/color/
|
||||||
$JTF-primary: mat.define-palette(mat.$red-palette, 900);
|
$LegioXXX-primary: mat.define-palette(mat.$red-palette, 900);
|
||||||
$JTF-accent: mat.define-palette(mat.$indigo-palette, 900);
|
$LegioXXX-accent: mat.define-palette(mat.$indigo-palette, 900);
|
||||||
$JTF-warn: mat.define-palette(mat.$orange-palette, 500);
|
$LegioXXX-warn: mat.define-palette(mat.$orange-palette, 500);
|
||||||
$JTF-theme: mat.define-dark-theme((
|
$LegioXXX-theme: mat.define-dark-theme((
|
||||||
color: (
|
color: (
|
||||||
primary: $JTF-primary,
|
primary: $LegioXXX-primary,
|
||||||
accent: $JTF-accent,
|
accent: $LegioXXX-accent,
|
||||||
warn: $JTF-warn,
|
warn: $LegioXXX-warn,
|
||||||
)
|
)
|
||||||
));
|
));
|
||||||
|
|
||||||
@include mat.all-component-themes($JTF-theme);
|
@include mat.all-component-themes($LegioXXX-theme);
|
||||||
|
|
||||||
@import '~bootstrap/dist/css/bootstrap-utilities.min.css';
|
@import '~bootstrap/dist/css/bootstrap-utilities.min.css';
|
||||||
|
|
||||||
@ -39,19 +39,16 @@ body {
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
font-family: Roboto, sans-serif;
|
font-family: Roboto, sans-serif;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
a, a:visited {
|
a, a:visited {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #3c0000;
|
color: rgba(255, 255, 255, 0.6);
|
||||||
}
|
}
|
||||||
a:hover, a:visited:hover { color: #550000; }
|
a:hover, a:visited:hover { color: #b10000; }
|
||||||
|
|
||||||
.fill {
|
.fill {
|
||||||
height: 0;
|
height: 0;
|
||||||
min-height: calc(100vh - 64px);
|
min-height: calc(100vh - 64px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stencil {
|
|
||||||
font-family: Saira Stencil One !important;
|
|
||||||
}
|
|
||||||
|
|||||||
15
tsconfig.app.json
Normal file
15
tsconfig.app.json
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||||
|
{
|
||||||
|
"extends": "./tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "./out-tsc/app",
|
||||||
|
"types": []
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"src/main.ts",
|
||||||
|
"src/polyfills.ts"
|
||||||
|
],
|
||||||
|
"include": [
|
||||||
|
"src/**/*.d.ts"
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -1,8 +1,9 @@
|
|||||||
|
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||||
{
|
{
|
||||||
"compileOnSave": false,
|
"compileOnSave": false,
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"baseUrl": "./",
|
"baseUrl": "./",
|
||||||
"outDir": "./out-tsc/app",
|
"outDir": "./dist/out-tsc",
|
||||||
"forceConsistentCasingInFileNames": true,
|
"forceConsistentCasingInFileNames": true,
|
||||||
"strict": true,
|
"strict": true,
|
||||||
"noImplicitOverride": true,
|
"noImplicitOverride": true,
|
||||||
@ -16,7 +17,6 @@
|
|||||||
"moduleResolution": "node",
|
"moduleResolution": "node",
|
||||||
"importHelpers": true,
|
"importHelpers": true,
|
||||||
"target": "es2020",
|
"target": "es2020",
|
||||||
"types": [],
|
|
||||||
"module": "es2020",
|
"module": "es2020",
|
||||||
"lib": [
|
"lib": [
|
||||||
"es2020",
|
"es2020",
|
||||||
@ -28,12 +28,5 @@
|
|||||||
"strictInjectionParameters": true,
|
"strictInjectionParameters": true,
|
||||||
"strictInputAccessModifiers": true,
|
"strictInputAccessModifiers": true,
|
||||||
"strictTemplates": true
|
"strictTemplates": true
|
||||||
},
|
}
|
||||||
"files": [
|
|
||||||
"src/main.ts",
|
|
||||||
"src/polyfills.ts"
|
|
||||||
],
|
|
||||||
"include": [
|
|
||||||
"src/**/*.d.ts"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user