Skip to content

Latest commit

 

History

History
195 lines (161 loc) · 6.05 KB

README.md

File metadata and controls

195 lines (161 loc) · 6.05 KB
Raw

The website of the
Consortium for Open Scientific Collections in Austria (OSCA)

osca-logo
logo created by Brandy Brandstätter

An Angular App generated from and based on https://github.com/juanmesa2097/angular-boilerplate/
(an angular starter for enterprise-grade front-end projects, built under a clean architecture
that helps to scale and maintain a fast workflow.)

https://osca.science

Contributing Guidelines · Submit an Issue

⚗️ Features

  • Strict mode.
  • Lazy loading.
  • Smart and pure components pattern.
  • SCAM pattern.
  • Self-contained components and encapsulated modules.
  • Components types (e.g. component, page).
  • Amazing directory structure.
  • PWA
  • Dynamic titles and content meta tags.
  • TailwindCSS.
  • Dark mode and theme configuration.
  • Scalable CSS architecture in favor of TailwindCSS layers.
  • Lighthouse reports improved.
  • ESLint.
  • Run unit tests & lint code using Husky & validate commit messages using commitlint

📄 Pages

  • General
    • home
    • not-found

Upcoming:

  • Auth
    • sign-in
    • sign-up
    • forgot-password
    • forgot-password-email-sent
    • password-reset
    • password-reset-succeeded
    • password-reset-failed
  • Settings
    • account
    • appearance
    • billing
    • blocked-Users
    • notifications
    • security
    • security-log
  • User
    • my-profile
    • overview
  • Features
    • dashboard

🧱 Self-contained components

  • footer
  • header
  • layout

📡 Services

  • AuthService
  • SeoService
  • ThemeService

📛 Custom directives

  • click-outside: detects when the user clicks outside an element.

🧪 Custom pipes

  • bytes: transforms a numeric value into bytes, KB, MB, GB, etc.

🛠️ Make some initial tweaks

  • Change pages routes:

    Go to src/app/core/utils/router.utils.ts to find all the registered routes inside a config object.

    For example, you could replace sign-in with SignIn, login or iniciar_sesion

  • Change your TailwindCSS configuration:

    You can find the config file in the project root, then you can refer to https://tailwindcss.com/docs/configuration to learn how to make your own adjustments.

  • Set a default theme (First time load)

    Go to src\app\@core\services\theme\theme.config.ts and change the following line of code

    from operating system preference

    export const DEFAULT_BASE_THEME = ThemeList.System;

    to light mode

    export const DEFAULT_BASE_THEME = ThemeList.Light;

    or dark mode

    export const DEFAULT_BASE_THEME = ThemeList.Dark;

⛩️ Project structure

├───app
│   ├───@core
│   │   ├───directives
│   │   │   └───click-outside
│   │   ├───guards
│   │   ├───interceptors
│   │   ├───pipes
│   │   │   └───bytes
│   │   ├───services
│   │   │   ├───seo
│   │   │   └───theme
│   │   └───utils
│   ├───@shell
│   │   ├───ft
│   │   └───ui (layout components)
│   │       ├───footer
│   │       ├───header
│   │       ├───layout
│   │       └───not-found
│   ├───components (generic shared components)
│   └───pages
│       ├───auth
│       │   ├───pages
│       │   │   ├───forgot-password
│       │   │   ├───forgot-password-email-sent
│       │   │   ├───password-reset
│       │   │   ├───password-reset-failed
│       │   │   ├───password-reset-succeeded
│       │   │   ├───sign-in
│       │   │   └───sign-up
│       │   └───services
│       ├───dashboard
│       ├───home
│       ├───settings
│       │   └───pages
│       │       ├───account
│       │       ├───appearance
│       │       ├───billing
│       │       ├───blocked-users
│       │       ├───notifications
│       │       ├───security
│       │       └───security-log
│       └───user
│           └───pages
│               ├───my-profile
│               └───overview
├───assets
├───environments
└───theme
    ├───01-base
    ├───02-components
    └───03-utilities

🧙‍♂️ Commands

Command Description NPM Yarn Pnpm Background command
ng See available commands npm run ng yarn ng pnpm ng ng
start Run your app in development mode npm start yarn start pnpm start ng serve
build Build your app for production npm run build yarn build pnpm build ng build
watch Run build when files change. npm run watch yarn watch pnpm watch ng build --watch --configuration development
test Run your unit tests npm run test yarn test pnpm test ng test
lint Use ESLint to lint your app npm run lint yarn lint pnpm lint ng lint