├── .github ├── CODEOWNERS ├── actions │ └── install-sql-localdb │ │ └── action.yml └── workflows │ ├── ci.yml │ ├── npm-publish.yml │ └── nuget-release.yml ├── .gitignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── samples ├── music-festival-vue-coupled │ ├── .editorConfig │ ├── App_Data │ │ ├── DefaultSiteContent.episerverdata │ │ └── db.mdf │ ├── ClientApp │ │ ├── .gitignore │ │ ├── app.vue │ │ ├── assets │ │ │ ├── images │ │ │ │ ├── back.svg │ │ │ │ ├── pattern-wave.svg │ │ │ │ └── wave.svg │ │ │ └── styles │ │ │ │ ├── common │ │ │ │ ├── _grid.less │ │ │ │ ├── _normalize.less │ │ │ │ ├── _typography.less │ │ │ │ ├── base.less │ │ │ │ └── variables.less │ │ │ │ ├── components │ │ │ │ ├── atoms │ │ │ │ │ ├── Button.less │ │ │ │ │ ├── Heading.less │ │ │ │ │ ├── Icon.less │ │ │ │ │ └── Link.less │ │ │ │ ├── molecules │ │ │ │ │ ├── Content.less │ │ │ │ │ ├── ContentBlock.less │ │ │ │ │ ├── Grid.less │ │ │ │ │ └── Hero.less │ │ │ │ └── organisms │ │ │ │ │ ├── Footer.less │ │ │ │ │ ├── Header.less │ │ │ │ │ ├── NavBar.less │ │ │ │ │ └── Page.less │ │ │ │ ├── main.less │ │ │ │ └── utils │ │ │ │ ├── utils-align.less │ │ │ │ ├── utils-display.less │ │ │ │ ├── utils-layout.less │ │ │ │ ├── utils-link.less │ │ │ │ ├── utils-offset.less │ │ │ │ ├── utils-position.less │ │ │ │ ├── utils-size.less │ │ │ │ ├── utils-state.less │ │ │ │ ├── utils-text.less │ │ │ │ └── utils.less │ │ ├── components │ │ │ ├── ArtistImage.vue │ │ │ ├── BackButton.vue │ │ │ ├── Card.vue │ │ │ ├── ConditionalImage.vue │ │ │ ├── Hero.vue │ │ │ ├── LanguageSelector.vue │ │ │ ├── Modal.vue │ │ │ └── episerver │ │ │ │ ├── Block.vue │ │ │ │ ├── ContentArea.vue │ │ │ │ ├── Link.vue │ │ │ │ ├── Page.vue │ │ │ │ ├── Property.vue │ │ │ │ └── ViewModeLink.vue │ │ ├── composables │ │ │ ├── useDisplayOptions.ts │ │ │ ├── useModal.ts │ │ │ └── useResolvedContent.ts │ │ ├── nuxt.config.ts │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── pages │ │ │ ├── AccessDenied.vue │ │ │ ├── NotFound.vue │ │ │ └── [...path].vue │ │ ├── plugins │ │ │ ├── epiEdit.ts │ │ │ └── updateOnContentSaved.ts │ │ ├── tsconfig.json │ │ └── views │ │ │ ├── blocks │ │ │ ├── BuyTicketBlock.vue │ │ │ ├── ContentBlock.vue │ │ │ └── GenericBlock.vue │ │ │ ├── media │ │ │ └── ImageFile.vue │ │ │ └── pages │ │ │ ├── ArtistContainerPage.vue │ │ │ ├── ArtistDetailsPage.vue │ │ │ ├── BlockPreview.vue │ │ │ └── LandingPage.vue │ ├── GlobalUsings.cs │ ├── Models │ │ ├── Blocks │ │ │ ├── BuyTicketBlock.cs │ │ │ └── ContentBlock.cs │ │ ├── Media │ │ │ └── ImageFile.cs │ │ └── Pages │ │ │ ├── ArtistContainerPage.cs │ │ │ ├── ArtistDetailsPage.cs │ │ │ ├── BasePage.cs │ │ │ └── LandingPage.cs │ ├── MusicFestival.csproj │ ├── MusicFestival.sln │ ├── Program.cs │ ├── Properties │ │ └── launchSettings.json │ ├── README.md │ ├── Startup.cs │ ├── appsettings.json │ ├── diagram.jpg │ ├── nuget.config │ ├── setup.cmd │ └── setup.sh └── music-festival-vue-decoupled │ ├── MusicFestivalDecoupled.sln │ ├── README.md │ ├── backend │ ├── .editorConfig │ ├── App_Data │ │ ├── DefaultSiteContent.episerverdata │ │ └── db.mdf │ ├── MusicFestival.Backend.csproj │ ├── Program.cs │ ├── ProvisionDatabase.cs │ ├── Startup.cs │ ├── appsettings.json │ ├── properties │ │ └── launchSettings.json │ └── wwwroot │ │ └── favicon.ico │ ├── frontend │ ├── .editorconfig │ ├── .env.development │ ├── .env.test │ ├── MusicFestival.Frontend.csproj │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ ├── images │ │ │ │ ├── back.svg │ │ │ │ ├── pattern-wave.svg │ │ │ │ └── wave.svg │ │ │ └── styles │ │ │ │ ├── common │ │ │ │ ├── _grid.less │ │ │ │ ├── _normalize.less │ │ │ │ ├── _typography.less │ │ │ │ ├── base.less │ │ │ │ └── variables.less │ │ │ │ ├── components │ │ │ │ ├── atoms │ │ │ │ │ ├── Button.less │ │ │ │ │ ├── Heading.less │ │ │ │ │ ├── Icon.less │ │ │ │ │ └── Link.less │ │ │ │ ├── molecules │ │ │ │ │ ├── Content.less │ │ │ │ │ ├── ContentBlock.less │ │ │ │ │ ├── Grid.less │ │ │ │ │ └── Hero.less │ │ │ │ └── organisms │ │ │ │ │ ├── Footer.less │ │ │ │ │ ├── Header.less │ │ │ │ │ ├── NavBar.less │ │ │ │ │ └── Page.less │ │ │ │ ├── main.less │ │ │ │ └── utils │ │ │ │ ├── utils-align.less │ │ │ │ ├── utils-display.less │ │ │ │ ├── utils-layout.less │ │ │ │ ├── utils-link.less │ │ │ │ ├── utils-offset.less │ │ │ │ ├── utils-position.less │ │ │ │ ├── utils-size.less │ │ │ │ ├── utils-state.less │ │ │ │ ├── utils-text.less │ │ │ │ └── utils.less │ │ ├── components │ │ │ ├── EpiBlockComponentSelector.vue │ │ │ ├── EpiContentArea.vue │ │ │ ├── EpiLink.vue │ │ │ ├── EpiPageComponentSelector.vue │ │ │ ├── EpiProperty.vue │ │ │ ├── EpiViewModeLink.vue │ │ │ └── widgets │ │ │ │ ├── ArtistImage.vue │ │ │ │ ├── BackButton.vue │ │ │ │ ├── Card.vue │ │ │ │ ├── ConditionalImage.vue │ │ │ │ ├── Hero.vue │ │ │ │ ├── LanguageSelector.vue │ │ │ │ └── Modal.vue │ │ ├── constants.js │ │ ├── directives │ │ │ └── epiEdit.js │ │ ├── epiBootstrap.js │ │ ├── main.js │ │ ├── router │ │ │ └── index.js │ │ ├── store │ │ │ ├── index.js │ │ │ └── modules │ │ │ │ ├── appContext.js │ │ │ │ ├── epiContext.js │ │ │ │ └── epiDataModel.js │ │ ├── urlHelpers.js │ │ └── views │ │ │ ├── 403.vue │ │ │ ├── 404.vue │ │ │ ├── BlockPreview.vue │ │ │ ├── blocks │ │ │ ├── BuyTicketBlock.vue │ │ │ ├── ContentBlock.vue │ │ │ └── GenericBlock.vue │ │ │ ├── media │ │ │ └── ImageFile.vue │ │ │ └── pages │ │ │ ├── ArtistContainerPage.vue │ │ │ ├── ArtistDetailsPage.vue │ │ │ └── LandingPage.vue │ └── vue.config.js │ ├── nuget.config │ └── setup.cmd └── src ├── @episerver ├── .editorconfig ├── .eslintrc.js ├── content-definitions │ ├── README.md │ ├── bin │ │ └── cli.mjs │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── authService.mjs │ │ ├── manifest.mjs │ │ └── utils.mjs │ └── test │ │ ├── cli.tests.mjs │ │ ├── cmd.mjs │ │ ├── fixture.mjs │ │ └── manifests │ │ ├── empty-json.json │ │ ├── major-downgrade.json │ │ ├── major-update.json │ │ ├── new.json │ │ └── no-json.json ├── content-delivery │ ├── README.md │ ├── lib │ │ ├── apiClient.d.mts │ │ ├── apiClient.d.mts.map │ │ ├── apiClient.mjs │ │ ├── apiClient.mjs.map │ │ ├── config.d.mts │ │ ├── config.d.mts.map │ │ ├── config.mjs │ │ ├── config.mjs.map │ │ ├── contentLoader.d.mts │ │ ├── contentLoader.d.mts.map │ │ ├── contentLoader.mjs │ │ ├── contentLoader.mjs.map │ │ ├── contentResolver.d.mts │ │ ├── contentResolver.d.mts.map │ │ ├── contentResolver.mjs │ │ ├── contentResolver.mjs.map │ │ ├── main.d.mts │ │ ├── main.d.mts.map │ │ ├── main.mjs │ │ ├── main.mjs.map │ │ ├── models.d.mts │ │ ├── models.d.mts.map │ │ ├── models.mjs │ │ ├── models.mjs.map │ │ ├── siteLoader.d.mts │ │ ├── siteLoader.d.mts.map │ │ ├── siteLoader.mjs │ │ └── siteLoader.mjs.map │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── apiClient.mts │ │ ├── config.mts │ │ ├── contentLoader.mts │ │ ├── contentResolver.mts │ │ ├── main.mts │ │ ├── models.mts │ │ └── siteLoader.mts │ ├── test │ │ ├── contentLoader.tests.mjs │ │ ├── contentResolver.tests.mjs │ │ ├── fixture.mjs │ │ └── siteLoader.tests.mjs │ └── tsconfig.json └── test-setup │ ├── backend │ ├── Backend.csproj │ ├── CreateTestContentFirstRequestInitializer.cs │ ├── CustomHeaderContentApiFilter.cs │ ├── DatabaseHelper.cs │ ├── Program.cs │ ├── ProvisionDatabase.cs │ ├── Startup.cs │ ├── UsernameAuthenticationHandler.cs │ ├── appsettings.json │ ├── nuget.config │ └── properties │ │ └── launchSettings.json │ ├── data │ └── DefaultSiteContent.episerverdata │ ├── package-lock.json │ ├── package.json │ └── src │ └── index.mjs └── EPiServer.ContentDelivery.NodeProxy ├── DependencyInjection ├── NodeJsEndpointRouteBuilderExtensions.cs └── NodeJsServiceCollectionExtensions.cs ├── EPiServer.ContentDelivery.NodeProxy.csproj ├── NodeJsForwarder.cs ├── NodeJsOptions.cs ├── NodeJsProcess.cs ├── icon.png └── nuget.config /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | # Users referenced in this file will automatically be requested as reviewers for PRs that modify the given paths. 2 | 3 | # See https://help.github.com/articles/about-code-owners/ 4 | 5 | # Default owners for everything in this repo 6 | 7 | - @episerver/cms-delivery 8 | -------------------------------------------------------------------------------- /.github/actions/install-sql-localdb/action.yml: -------------------------------------------------------------------------------- 1 | name: 'Install SQL LocalDB' 2 | description: 'Installs Microsoft SQL Server Express LocalDB 2016 SP2' 3 | runs: 4 | using: "composite" 5 | steps: 6 | - run: | 7 | Write-Host "Downloading" 8 | Import-Module BitsTransfer 9 | Start-BitsTransfer -Source https://download.microsoft.com/download/4/1/A/41AD6EDE-9794-44E3-B3D5-A1AF62CD7A6F/sql16_sp2_dlc/en-us/SqlLocalDB.msi -Destination SqlLocalDB.msi 10 | Write-Host "Installing" 11 | Start-Process -FilePath "SqlLocalDB.msi" -Wait -ArgumentList "/qn", "/norestart", "/l*v SqlLocalDBInstall.log", "IACCEPTSQLLOCALDBLICENSETERMS=YES"; 12 | Write-Host "Checking" 13 | sqlcmd -l 60 -S "(localdb)\MSSQLLocalDB" -Q "SELECT @@VERSION;" 14 | shell: pwsh 15 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: Continuous integration 2 | 3 | on: 4 | pull_request: 5 | branches: 6 | - develop 7 | - master 8 | - main 9 | 10 | jobs: 11 | build: 12 | name: Build & test SDK 13 | runs-on: windows-latest 14 | steps: 15 | - uses: actions/checkout@v2 16 | - uses: ./.github/actions/install-sql-localdb 17 | - uses: actions/setup-node@v2 18 | with: 19 | node-version: 18 20 | - name: Build & test Content Definitions 21 | working-directory: ./src/@episerver/content-definitions 22 | run: | 23 | npm ci 24 | npm test 25 | - name: Build & test Content Delivery 26 | working-directory: ./src/@episerver/content-delivery 27 | run: | 28 | npm ci 29 | npm test 30 | 31 | build_test_pack_proxy: 32 | name: Build, test & pack Node.js proxy 33 | runs-on: windows-latest 34 | env: 35 | buildConfiguration: release 36 | versionSuffix: ci-${{github.RUN_NUMBER }} 37 | DOTNET_NOLOGO: 1 38 | steps: 39 | - uses: actions/checkout@v2 40 | - name: Restore Node.js proxy 41 | working-directory: ./src/EPiServer.ContentDelivery.NodeProxy 42 | run: dotnet restore 43 | - name: Build Node.js proxy 44 | working-directory: ./src/EPiServer.ContentDelivery.NodeProxy 45 | run: dotnet build --no-restore --configuration $env:buildConfiguration --version-suffix $env:versionSuffix 46 | - name: Test Node.js proxy 47 | working-directory: ./src/EPiServer.ContentDelivery.NodeProxy 48 | run: dotnet test --no-build --configuration $env:buildConfiguration 49 | - name: Pack Node.js proxy 50 | working-directory: ./src/EPiServer.ContentDelivery.NodeProxy 51 | run: dotnet pack --no-build --configuration $env:buildConfiguration --version-suffix $env:versionSuffix 52 | - name: Archive packages 53 | uses: actions/upload-artifact@v4 54 | with: 55 | name: packages 56 | path: artifacts/**/*.nupkg 57 | retention-days: 2 58 | 59 | publish: 60 | name: Publish packages 61 | needs: build_test_pack_proxy 62 | runs-on: windows-latest 63 | env: 64 | nugetSource: https://nuget.pkg.github.com/${{ github.repository_owner }}/index.json 65 | DOTNET_NOLOGO: 1 66 | steps: 67 | - name: Download artifacts 68 | uses: actions/download-artifact@v4 69 | with: 70 | name: packages 71 | - name: Publish to Github Packages 72 | run: dotnet nuget push "**/*.nupkg" --source $env:nugetSource --skip-duplicate --api-key ${{ secrets.GITHUB_TOKEN }} 73 | -------------------------------------------------------------------------------- /.github/workflows/npm-publish.yml: -------------------------------------------------------------------------------- 1 | name: Npm publish 2 | 3 | on: 4 | release: 5 | types: [published] 6 | 7 | jobs: 8 | build: 9 | name: Build & test 10 | runs-on: windows-latest 11 | steps: 12 | - uses: actions/checkout@v2 13 | - uses: ./.github/actions/install-sql-localdb 14 | - uses: actions/setup-node@v2 15 | with: 16 | node-version: 18 17 | - name: Build & test Content Definitions 18 | working-directory: ./src/@episerver/content-definitions 19 | run: | 20 | npm ci 21 | npm test 22 | - name: Build & test Content Delivery 23 | working-directory: ./src/@episerver/content-delivery 24 | run: | 25 | npm ci 26 | npm test 27 | 28 | publish: 29 | name: Publish packages 30 | needs: build 31 | runs-on: ubuntu-latest 32 | steps: 33 | - uses: actions/checkout@v2 34 | - uses: actions/setup-node@v2 35 | with: 36 | node-version: 14 37 | registry-url: https://registry.npmjs.org/ 38 | - name: Publish Content Definitions 39 | working-directory: ./src/@episerver/content-definitions 40 | env: 41 | NODE_AUTH_TOKEN: ${{secrets.npm_token}} 42 | run: npm publish --access public 43 | - name: Publish Content Delivery 44 | working-directory: ./src/@episerver/content-delivery 45 | env: 46 | NODE_AUTH_TOKEN: ${{secrets.npm_token}} 47 | run: npm publish --access public 48 | -------------------------------------------------------------------------------- /.github/workflows/nuget-release.yml: -------------------------------------------------------------------------------- 1 | name: NuGet release 2 | 3 | on: 4 | release: 5 | types: [published] 6 | 7 | jobs: 8 | build_test_pack: 9 | name: Build, test & pack Node.js proxy 10 | runs-on: windows-latest 11 | env: 12 | buildConfiguration: release 13 | DOTNET_NOLOGO: 1 14 | steps: 15 | - uses: actions/checkout@v2 16 | - name: Restore Node.js proxy 17 | working-directory: ./src/EPiServer.ContentDelivery.NodeProxy 18 | run: dotnet restore 19 | - name: Build Node.js proxy 20 | working-directory: ./src/EPiServer.ContentDelivery.NodeProxy 21 | run: dotnet build --no-restore --configuration $env:buildConfiguration 22 | - name: Test Node.js proxy 23 | working-directory: ./src/EPiServer.ContentDelivery.NodeProxy 24 | run: dotnet test --no-build --configuration $env:buildConfiguration 25 | - name: Pack Node.js proxy 26 | working-directory: ./src/EPiServer.ContentDelivery.NodeProxy 27 | run: dotnet pack --no-build --configuration $env:buildConfiguration 28 | - name: Archive packages 29 | uses: actions/upload-artifact@v4 30 | with: 31 | name: packages 32 | path: artifacts/**/*.nupkg 33 | retention-days: 2 34 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | dist 4 | app_data 5 | packages 6 | bin 7 | obj 8 | modules 9 | artifacts 10 | 11 | # local env files 12 | .env.local 13 | .env.*.local 14 | 15 | # Log files 16 | npm-debug.log* 17 | yarn-debug.log* 18 | yarn-error.log* 19 | pnpm-debug.log* 20 | 21 | # Editor directories and files 22 | .idea 23 | .vs 24 | .vscode 25 | *.suo 26 | *.ntvs* 27 | *.njsproj 28 | *.sw? 29 | *.user 30 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # How to contribute 2 | 3 | ## Did you find a bug? 4 | 5 | * Do not open up a GitHub issue if the bug is a security vulnerability, instead contact support@optimizely.com. 6 | 7 | * Ensure the bug was not already reported by searching on GitHub under [Issues](https://github.com/episerver/content-delivery-js-sdk/issues). 8 | 9 | * If you're unable to find an open issue addressing the problem, [open a new one](https://github.com/episerver/content-delivery-js-sdk/issues/new). Be sure to include a **title and clear description**, as much relevant information as possible, and a **code sample** or an **executable test case** demonstrating the expected behavior that is not occurring. 10 | 11 | ## Did you write a patch that fixes a bug? 12 | 13 | * Open a new GitHub pull request with the patch. 14 | 15 | * Ensure the pull request description clearly describes the problem and solution. Include the relevant issue number if applicable. 16 | 17 | ## Do you intend to add a new feature or change an existing one? 18 | 19 | * Don't surprise us with a large pull requests. Instead, file an issue and start a discussion so we can agree on a direction before you invest a large amount of time. 20 | 21 | ## Do you have questions about the source code? 22 | 23 | * Ask any question about how to use this code on the [Optimizely World forum](https://world.optimizely.com/forum/). 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Optimizely Content Delivery JavaScript SDKs and samples 2 | 3 | [![Npm publish](https://github.com/episerver/content-delivery-js-sdk/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/episerver/content-delivery-js-sdk/actions/workflows/npm-publish.yml) [![Continuous integration](https://github.com/episerver/content-delivery-js-sdk/actions/workflows/ci.yml/badge.svg)](https://github.com/episerver/content-delivery-js-sdk/actions/workflows/ci.yml) 4 | 5 | 6 | This repository contains the source code for the Content Delivery JavaScript SDKs and samples. 7 | 8 | ## Content Definitions 9 | 10 | * [Source code and documentation](https://github.com/episerver/content-delivery-js-sdk/tree/master/src/%40episerver/content-definitions) 11 | * [REST API documentation](https://world.optimizely.com/documentation/developer-guides/content-definitions-api/) 12 | 13 | ## Content Delivery 14 | 15 | * [Source code and documentation](https://github.com/episerver/content-delivery-js-sdk/tree/master/src/%40episerver/content-delivery) 16 | * [REST API documentation](https://world.optimizely.com/documentation/developer-guides/content-delivery-api/) 17 | 18 | ## Samples 19 | 20 | The samples are using Nuxt and Vue CLI v5. 21 | 22 | * [Nuxt - Coupled](samples/music-festival-vue-coupled) 23 | * [Vue.js - Decoupled](samples/music-festival-vue-decoupled) 24 | 25 | ## Prerequisites for building and testing the SDKs 26 | 27 | This project uses: 28 | * Node.js 18+ 29 | * .NET SDK 6+ 30 | * SQL Server 2016 Express LocalDB ([download here](https://www.microsoft.com/en-us/sql-server/sql-server-downloads)) 31 | 32 | ## Create a release 33 | 34 | 1. Update the version in all modules with `npm version 1.2.3`. 35 | 2. Run `npm install` in all samples to update their package-lock.json files. 36 | 3. Commit, push, and create PR to `master` branch. 37 | 4. Create new Github release based of `master` branch. 38 | 5. Tag version with following format `v1.2.3`. 39 | 6. Give the release a title and write an optional description. 40 | 7. Publish. 41 | 42 | ## Contributing 43 | 44 | The easiest way to contribute is to join in with the discussions on Github issues or create new issues with questions, suggestions or any other feedback. If you want to contribute code or documentation, you are more than welcome to create pull-requests, but make sure that you read the contribution page first. 45 | -------------------------------------------------------------------------------- /samples/music-festival-vue-coupled/App_Data/DefaultSiteContent.episerverdata: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/episerver/content-delivery-js-sdk/67bf8bd6c726cca97aa3ea6b1fe90f016fa8e6e2/samples/music-festival-vue-coupled/App_Data/DefaultSiteContent.episerverdata -------------------------------------------------------------------------------- /samples/music-festival-vue-coupled/App_Data/db.mdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/episerver/content-delivery-js-sdk/67bf8bd6c726cca97aa3ea6b1fe90f016fa8e6e2/samples/music-festival-vue-coupled/App_Data/db.mdf -------------------------------------------------------------------------------- /samples/music-festival-vue-coupled/ClientApp/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log* 3 | .nuxt 4 | .nitro 5 | .cache 6 | .output 7 | .env 8 | dist 9 | -------------------------------------------------------------------------------- /samples/music-festival-vue-coupled/ClientApp/app.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 47 | -------------------------------------------------------------------------------- /samples/music-festival-vue-coupled/ClientApp/assets/images/back.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /samples/music-festival-vue-coupled/ClientApp/assets/styles/common/variables.less: -------------------------------------------------------------------------------- 1 | @basePath: '/'; 2 | 3 | // - Fonts - 4 | @baseFontSize: 16; 5 | @fontFamilyPrimary: "barlow", "Helvetica", "Arial", sans-serif; 6 | @fontFamilySecondary: "ubuntu", "Helvetica", "Arial", serif; 7 | @fontHeading: "ubuntu-bold"; 8 | @fontSubHeading: "barlow-bold"; 9 | 10 | // - Container Width - 11 | @widthContainer: 1204px; 12 | 13 | // - Text Sizes - 14 | @textSizeXSmall: unit((12 / @baseFontSize), em); // 12px 15 | @textSizeSmall: unit((14 / @baseFontSize), em); // 14px 16 | @textSizeMedium: unit((16 / @baseFontSize), em); // 16px 17 | @textSizeLarge: unit((18 / @baseFontSize), em); // 18px 18 | @textSizeXLarge: unit((20 / @baseFontSize), em); // 20px 19 | 20 | // - Colors - 21 | @backgroundColor: @colorBlue; 22 | @backgroundGradient: linear-gradient(to bottom, rgba(255,0,0,0) 0%, rgba(255,0,0,.35) 100%); 23 | @colorBlack: #000; 24 | @colorWhite: #fff; 25 | @colorBlue: #1A237E; 26 | @colorTurquoise: #41FFF5; 27 | @colorPink: #EC407A; 28 | //# Text 29 | @colorText: #fff; 30 | @colorTextLight: #aaa; 31 | 32 | //# Links 33 | @colorLink: #fff; 34 | @colorLinkHover: #ccc; 35 | 36 | // - Space - 37 | @spaceDefault: unit((20 / @baseFontSize), em); 38 | @spaceXSmall: @spaceDefault / 2; 39 | @spaceSmall: @spaceDefault / 1.5; 40 | @spaceMedium: @spaceDefault; 41 | @spaceLarge: @spaceDefault * 1.5; 42 | @spaceXLarge: @spaceDefault * 2; 43 | 44 | @space: 1em; 45 | @space-and-half: @space*1.5; 46 | @space-double: @space*2; 47 | @space-triple: @space*3; 48 | @space-quad: @space*4; 49 | @space-half: @space/2; 50 | @space-quarter: @space/4; 51 | 52 | 53 | // - Breakpoint Widths - 54 | @widthXSmall: (420 / @baseFontSize); 55 | @widthSmall: (544 / @baseFontSize); 56 | @widthMedium: (768 / @baseFontSize); 57 | @widthLarge: (920 / @baseFontSize); 58 | @widthXLarge: (1200 / @baseFontSize); 59 | 60 | // - Breakpoint Media Queries - 61 | @bpXSmall: ~ "only screen and (min-width: @{widthXSmall}em), print"; 62 | @bpSmall: ~ "only screen and (min-width: @{widthSmall}em), print"; 63 | @bpMedium: ~ "only screen and (min-width: @{widthMedium}em), print"; 64 | @bpLarge: ~ "only screen and (min-width: @{widthLarge}em), print"; 65 | @bpXLarge: ~ "only screen and (min-width: @{widthXLarge}em)"; 66 | 67 | @bpMediumMax: ~ "only screen and (max-width: @{widthMedium}em), print"; 68 | 69 | 70 | // - Size Prefixes - 71 | @prefixXSmall: ~ "xsm-"; 72 | @prefixSmall: ~ "sm-"; 73 | @prefixMedium: ~ "md-"; 74 | @prefixLarge: ~ "lg-"; 75 | @prefixXLarge: ~ "xlg-"; 76 | 77 | // menu 78 | @menuTransition: left .4s ease-in-out; 79 | 80 | // Grid 81 | @gutterSize: 24px; // needs to be in pixels 82 | -------------------------------------------------------------------------------- /samples/music-festival-vue-coupled/ClientApp/assets/styles/components/atoms/Button.less: -------------------------------------------------------------------------------- 1 | /*# 2 | 3 | The button classes are best applied to links and buttons. 4 | These components can be used in forms, as calls to action, or as part of the general UI of the site/app. 5 | */ 6 | 7 | @import "../../common/variables.less"; 8 | 9 | .Button, button { 10 | background: @colorTurquoise; 11 | border-radius: 2em; 12 | color: @colorBlue; 13 | text-transform: uppercase; 14 | font-size: 12px; 15 | font-weight: 700; 16 | letter-spacing: 1.2px; 17 | padding: 12px 26px; 18 | font-family: @fontFamilyPrimary; 19 | box-shadow: 0 0 12px 0 fade(@colorBlack, 36%); 20 | border: 0; 21 | transition: all 300ms; 22 | &:hover{ 23 | text-decoration: none; 24 | background-color: @colorBlue; 25 | color: @colorTurquoise; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /samples/music-festival-vue-coupled/ClientApp/assets/styles/components/atoms/Heading.less: -------------------------------------------------------------------------------- 1 | @import (reference) "../../common/variables.less"; 2 | 3 | @Heading-color: @colorText; 4 | @Heading-size1: 80px; 5 | @Heading-size2: 80px; 6 | @Heading-size3: 48px; 7 | @Heading-size4: 32px; 8 | @Heading-size5: 22px; 9 | @Heading-size6: 14px; 10 | 11 | .Heading { 12 | display: block; 13 | margin-top: 0; 14 | margin-bottom: .5em; 15 | color: @Heading-color; 16 | font-weight: 700; 17 | line-height: 1em; 18 | text-transform: lowercase; 19 | font-family: @fontFamilySecondary; 20 | 21 | a:hover & { 22 | color: @colorLinkHover; 23 | } 24 | } 25 | 26 | .Heading--h1, h1 { 27 | &:extend(.Heading all); 28 | font: 48px/50px @fontHeading; 29 | margin: .25em 0; 30 | 31 | @media @bpMedium { 32 | font-size: unit((@Heading-size1 / @baseFontSize), em); 33 | } 34 | } 35 | 36 | .Heading--h2, h2 { 37 | &:extend(.Heading all); 38 | font-size: unit(((@Heading-size2*.65) / @baseFontSize), em); 39 | margin: 20px 0 10px; 40 | 41 | @media @bpMedium { 42 | font-size: unit((@Heading-size2 / @baseFontSize), em); 43 | } 44 | } 45 | 46 | .Heading--h3, h3 { 47 | &:extend(.Heading all); 48 | font-size: unit(((@Heading-size3*.75) / @baseFontSize), em); 49 | font-family: @fontSubHeading; 50 | 51 | @media @bpMedium { 52 | font-size: unit((@Heading-size3 / @baseFontSize), em); 53 | } 54 | } 55 | 56 | .Heading--h4, h4 { 57 | &:extend(.Heading all); 58 | font-weight: 300; 59 | font-size: 18px; 60 | 61 | @media @bpMedium { 62 | font-size: unit((@Heading-size4 / @baseFontSize), em); 63 | } 64 | } 65 | 66 | .Heading--h5, h5, .Heading--h6, h6 { 67 | &:extend(.Heading all); 68 | font-weight: 700; 69 | letter-spacing: 2.2px; 70 | font-family: @fontFamilyPrimary; 71 | text-transform: uppercase; 72 | font-size: 18px; 73 | 74 | @media @bpMedium { 75 | font-size: unit((@Heading-size5 / @baseFontSize), em); 76 | } 77 | } 78 | 79 | .Heading--h6, h6 { 80 | &:extend(.Heading all); 81 | text-transform: uppercase; 82 | margin-bottom: 0; 83 | font-size: 1em; 84 | 85 | @media @bpMedium { 86 | font-size: unit((@Heading-size6 / @baseFontSize), em); 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /samples/music-festival-vue-coupled/ClientApp/assets/styles/components/atoms/Icon.less: -------------------------------------------------------------------------------- 1 | /*# 2 | 3 | Icon component displaying icons using an Icomoon.io generated icon web font. 4 | 5 | To add or remove icons navigate to https://icomoon.io/app/ and import "selection.json" from the Styles/Fonts/Icons folder. 6 | 7 | **Usage** 8 | To use an icon in a different component start by importing the Icon.less file: 9 | @import (reference) "../Atoms/Icon.less"; 10 | 11 | Then extend the CSS rule with .Icon and set "content" to the icon you're looking for: 12 | .MyComponent { 13 | &:after { 14 | &:extend(.Icon); 15 | content: @Icon--checkmark; 16 | } 17 | } 18 | 19 | Examples: 20 | 21 |
22 | 23 |
24 | 25 | */ 26 | 27 | @import "../../common/variables.less"; 28 | -------------------------------------------------------------------------------- /samples/music-festival-vue-coupled/ClientApp/assets/styles/components/atoms/Link.less: -------------------------------------------------------------------------------- 1 | .Link {} 2 | 3 | .Link--skipLink { 4 | border: 0; 5 | clip: rect(0 0 0 0); 6 | height: 1px; 7 | margin: -1px; 8 | overflow: hidden; 9 | padding: 0; 10 | position: absolute; 11 | width: 1px; 12 | 13 | &:focus { 14 | clip: auto; 15 | height: auto; 16 | margin: 0; 17 | width: auto; 18 | background: #fff; 19 | padding: .1875em .3125em; 20 | z-index: 1000; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /samples/music-festival-vue-coupled/ClientApp/assets/styles/components/molecules/Content.less: -------------------------------------------------------------------------------- 1 | /*# 2 | 3 | Responsible for styling CMS content where it is not possible to add custom CSS-classes. 4 | For example adding styling for

,