1. Yml Settings
  2. 📱 app.yml

Yml Settings

📱 app.yml

Introduction

The App.yml file is a important part of our folder of .yml files, it is responsible for setting up: SEO configurations, Security configurations, Favicon configuration, and Theme of your application, by setting the primary and secondary colours.

Here is an example of the app.yml file:

        version: 0.1
baseUrl: 'http://localhost:5173'
assets: 'static'

lang: 'en'

security:
  csp:
    directives:
      script-src: 'self'
    reportOnly:
      script-src: 'self'
seo:
  title: 'Tangle Media App'
  googleAnalytics:
    id: G-xxx
    openGraph:
      image: xxx
favicon:
  path:
    - src: /facicon.ico
      size: 32x32
      svg: /favicon.svg
      appleTouch: /apple-trouch-icon.png
  manifest: '/path/to/manifest'

viewport: width=device-width,initial-scale=1

settings:
  primary_color: '#0959e6'
  accent_color: '#030066'

      

Breakdown

Let's break down each piece of the yml file, so that we can better understand what happens when the internal @tanglemedia packages read from this file.

Base URL

This value is used on the @tanglemedia/svelte-starter-core package. It will let the apis you are connecting to to know where the connection is comming from. i.e. localhost:5173.

Lang

  • Description: [To Be Determined]

Security

  • Description: [To Be Determined]

CSP

  • Description: [To Be Determined]

SEO

Title

This value is used on the @tanglemedia/svelte-starter-layout package.
It will set the head title, i.e. the tab's title of the application to be the value of the title.

Google Analytics

  • Description: [To Be Determined]

Favicon

This value is used on the @tanglemedia/svelte-starter-core package.
It will set your application's favicon.

Viewport

This value is used on the @tanglemedia/svelte-starter-layout package.
It will set your application's viewport.

Settings

Primary Color

This value is used on the @tanglemedia/svelte-starter-layout package.
By adding this on the creation of the app it will be reasponsible for creating your first theme.ts tailwindcss theme for your app, as well as setting some css variables to your DOM element. With this you will be able to use bg-primary and all the shades values from 50 to 950, as well as it will set the value of your css variable --settings-text-contrast-primary-color to be either black or white, depending on the the contrast with the primary color. If you change the value after the creation of the app, you might have to change your theme.ts file to have the corresponding new values. You can do that by going to 🎨 Theme Generator page, passing your new color value and copying the tailwindcss shades payload.

Accent Color

This value is used on the @tanglemedia/svelte-starter-layout package.
By adding this on the creation of the app it will be reasponsible for creating your first theme.ts tailwindcss theme for your app, as well as setting some css variables to your DOM element. With this you will be able to use bg-accent and all the shades values from 50 to 950, as well as it will set the value of your css variable --settings-text-contrast-accent-color to be either black or white, depending on the the contrast with the accent color. If you change the value after the creation of the app, you might have to change your theme.ts file to have the corresponding new values. You can do that by going to 🎨 Theme Generator page, passing your new color value and copying the tailwindcss shades payload.