Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/danirod/danirod.dev
I made a new professional website to let people know that I write code in exchange of money. Now with handcrafted HTML.
https://github.com/danirod/danirod.dev
nuxt portfolio unocss
Last synced: 3 months ago
JSON representation
I made a new professional website to let people know that I write code in exchange of money. Now with handcrafted HTML.
- Host: GitHub
- URL: https://github.com/danirod/danirod.dev
- Owner: danirod
- License: lgpl-3.0
- Created: 2023-11-10T19:54:52.000Z (about 1 year ago)
- Default Branch: trunk
- Last Pushed: 2024-06-23T16:20:29.000Z (7 months ago)
- Last Synced: 2024-06-23T17:34:30.916Z (7 months ago)
- Topics: nuxt, portfolio, unocss
- Language: Vue
- Homepage: https://danirod.dev
- Size: 2.66 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# danirod.dev
Yes, I made a new portfolio website for my freelance services. Features include:
- Not based on WordPress (I guess that is a feature for some).
- Multilingual, serves content both in English and in Spanish.
- New domain, to keep the SEO clean (danirod.es can be a digital garden again).
Powered by Nuxt 3 and UnoCSS.
## Commands
- Setup: `npm install`
- Run the server: `npm run dev`
- Build the app: `npm run build`
- Test in production: `npm run preview`
## Development notes
### Contact form
It uses an integration against Mailgun. There is a server endpoint in
/server/api/contact.post.ts which will receive the payload from the contact form
and deliver it via their REST API. Here are some important remarks.
#### Non-XHR fallback
**It is important that the contact form does content negotiation, period**. I've
seen a couple of times an unhandled exception inside the Nuxt internals that
causes all the JavaScript of the site to stop working and handling events, so
this is a real threat.
Pressing "Send" and not having the form submitted is unacceptable, which means
that the form requires proper `action` and `method` parameters so that if the
JavaScript event handler fails, it does a standard HTTP POST submit like in the
good old times.
It is important that the AJAX request sets the `Accept` header to
`application/json`, because that is what the backend endpoint will use to detect
if this is a XHR request or not. XHR requests will receive a JSON body as this
is what the Accept header asks. If it's not an XHR request, the endpoint will
302 to contact/success.vue, which presents a fairly traditional and boring
confirmation message.
#### Environment
The following four environment variables must be declared and present:
- `MAILGUN_API_KEY`: An API key to use Mailgun's REST API in order to deliver
contact forms.
- `MAILGUN_API_DOMAIN`: The domain to use when sending an e-mail. Might be
danirod.dev, might be the sandbox domain.
- `MAILGUN_API_FROM`: Just a way to parameterize the email to show in the From
header, usually [email protected], but not hardcoded anyway.
- `MAILGUN_API_TO`: Just a way to parameterize the email where the contact form
will be delivered, usually my business mail, but not hardcoded anyway.
- `MAILGUN_API_ENDPOINT`: Set to https://api.eu.mailgun.net when Mailgun is
configured to use European servers, otherwise it will return HTTP 401.
### i18n
Situation:
- Spanish is configured at https://danirod.dev/es
- English is configured at https://danirod.dev/en
- Visiting either one of both should provide the contents in the given language.
- Visiting https://danirod.dev should 302 to the appropiate language based on
the Accept-Language header.
Additional requirements (should be covered by nuxt-i18n but it is important to
take a look):
- Make sure that the html tag has the proper lang="" attribute.
- Make sure that there are hreflang references in the head.