An-Nadaa Frontend

Live Demo

This repo contains the code of our website frontend.

Technologies Used

• Nuxt.js (in "universal mode", where both SEO and speed is great)
• Vue 2
• Vuex (supported by adding to /store, but not implemented)
• PostCSS (no SCSS)
• Tailwind
• PurgeCSS (removes unused CSS-selectors)
• Dark mode & ColorModePicker (Set to "dark mode first")
• PWA (install website as standalone app)
• Netlify CMS (no need for a separate server)
• Prettier
• Nuxt-content (w/ exensible support for markdown and code-blocks)
• Nuxt-i18n (w/ support for multiple languages)

Optional extra setup

• Git LFS (store uploaded images outside the main repo)
• Netlify LM (Netlify’s Git LFS support)

These extra steps are only necessary if you want to upload large media in Netlify CMS:

This way it doesn't clutter up your repo with large unmanageable files. But do know that it is easier to add later than undoing it later.

1. Install git-lfs on your computer and remove the # in the project's .gitattributes

2. Setup Netlify LM by following these steps. (In short: netlify plugins:install netlify-lm-plugin → netlify lm:install → netlify login → netlify link → netlify lm:setup → commit the .lfsconfig file.)

---

Project commands

1. 📦 Install dependencies.

yarn install

2. 🏗 Run the project for local dev. This will start a hot-reloading server at localhost:8888.

yarn dev:n

3. 🌌 Build the app for server-side rendered deployment. See more about Universal SSR in the Nuxt.js docs.

yarn build

# And to serve that deployment...
npm run start

4. ⚡️ Generate a fully pre-rendered static site. See more in the docs.

yarn generate

How we are setup for deployment

1. Copy and change the .env-file

   • cp .env-example .env
   • Then change the values

2. Change the value on these lines

   • static/admin/config.yml — site_url & logo_url
   • content/site/info.json — sitename, sitedescription & sitelang
   • package.json — name, description, author & repository.url
   • pages/index.vue — The start page of your new website!

3. Change colors, favicon, content & content collections

   • Colors are managed in assets/scss/_vars.scss & tailwind.config.js
   • Favicon is generated by @nuxt/pwa. You should change the static/icon.png to something new, and then match the new filename and source in nuxt.config.js under pwa.icon. Replace the preview.jpg as well.
   • Content is managed mainly in local Netlify CMS by going to your /admin, in development mode by double-clicking on a post or by hand in /content
   • Content collections are managed in static/admin/config.yml

4. Change font

   1. Add/change your font link in nuxt.config.js under head.link. You can add a <link rel="stylesheet" href="font.css"> as link: [{ rel: 'stylesheet', href: 'font.css' }], like this
   2. Then append your font name in tailwind.config.js under theme.extend.fontFamily.sans (or other). Like sans: ['Inter', ...defaultTheme.fontFamily.sans]
   3. Then if you've uncommented the included netlify plugin "Subfont" in netlify.toml, it will automatically post-processes your web page to use an optimal font loading strategy.

More info

This project was bootstrapped with create-nuxt-app. There are more detailed explanations of how everything works in the [Nuxt.js docs](https://nuxtjs.org§

TODO: migrate to Nuxt3