Skip to content

The frontend for An-Nadaa website built with Nuxtjs and Tailwind, backed by Netlify and Netlify CMS

License

Notifications You must be signed in to change notification settings

an-nadaaa/nda-front

Repository files navigation

An-Nadaa Frontend

Netlify Status

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-pluginnetlify lm:installnetlify loginnetlify linknetlify lm:setup → commit the .lfsconfig file.)


Project commands

  1. 📦 Install dependencies.
yarn install
  1. 🏗 Run the project for local dev. This will start a hot-reloading server at localhost:8888.
yarn dev:n
  1. 🌌 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
  1. ⚡️ 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.ymlsite_url & logo_url
    • content/site/info.jsonsitename, sitedescription & sitelang
    • package.jsonname, 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

About

The frontend for An-Nadaa website built with Nuxtjs and Tailwind, backed by Netlify and Netlify CMS

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published