Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/taedonn/alding
A simple animated landing page
https://github.com/taedonn/alding
nextjs web web-app
Last synced: 25 days ago
JSON representation
A simple animated landing page
- Host: GitHub
- URL: https://github.com/taedonn/alding
- Owner: taedonn
- License: mit
- Created: 2023-01-17T00:59:29.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-07T05:40:39.000Z (9 months ago)
- Last Synced: 2024-04-07T06:34:42.198Z (9 months ago)
- Topics: nextjs, web, web-app
- Language: CSS
- Homepage: https://alding.vercel.app
- Size: 9.25 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Alding
`alding` is a simple animated landing page using [Next.js](https://github.com/vercel/next.js) and [TypeScript](https://github.com/microsoft/TypeScript).
- [Alding](#alding)
- [Getting started](#getting-started)
- [Before installing](#before-installing)
- [Deploying your app](#deploying-your-app)
- [Components](#components)
- [``](#header)
- [``](#logo)
- [``](#menu)
- [``](#menulink)
- [``](#menulist)
- [``](#menuoption)
- [License](#license)
-----
## Getting started
`fork`, or `git clone` this repo by running the following command.
```bash
git clone --depth 1 https://github.com/taedonn/alding.git
```
-----
## Before installing
Make sure `node.js` version over 18 is installed on your machine.
```bash
node -v
```
> if node version is below 18, you can run one of the following commands to upgrade or change node version.
`Homebrew`
```bash
# Install node version using homebrew.
brew install node@18
# Unlink previously used node version.
brew unlink node
# Link newly installed node version.
brew link node@18
```
`nvm`
```bash
# Install node version using nvm.
nvm install v18.12.0
# Choose newly installed node version.
nvm use v18.12.0
```
`sudo`
```bash
# Install node version using sudo.
sudo n 18.12.0
# Choose newly installed node version on drop-down menu.
sudo n
```
-----
## Deploying your app
Most hosting platforms allow you to define `build` command and `output` folder:
- Build command: `npm run build` or `next build`
- Output folder: `.next`
> If you are using [Vercel](https://vercel.com), you don't need to configure any options since vercel will automatically detect output directory.
-----
## Components
`alding` requires a precise component structure in `/app/layout.tsx`:
- [``](#header)
- [``](#logo)
- [``](#menu)
- [``](#menulink)
- [``](#menulist)
- [``](#menuoption)
### ``
`` is a wrapper component of all the other header components.
| name | type | default | description |
| ---------- | ------- | ------- | ------------------------------- |
| height | integer | 5 | Height of ``. |
| heightUnit | string | rem | Unit of height. ex) px, rem, % |
```jsx
{/* Children */}
```
### ``
`` displays logo inside ``.
| name | type | default | description |
| ----------- | ------- | ------- | --------------------------------- |
| src | string | | Image path of the logo. |
| name | string | | Name of the company/project/team. |
| hoverEffect | boolean | true | Enable/disable hover effect. |
```jsx
```
### ``
`` displays menu inside ``.
```jsx
{/* Children */}
```
### ``
`` displays menu with link inside ``
| name | type | default | description |
| ------ | ------ | ---------------- | -------------------------- |
| href | string | | Anchor `href` attribute. |
| target | string | _self | Anchor `target` attribute. |
```jsx
LINK
```
### ``
`` is a wrapper component of the popup list that will be displayed underneath when the menu hovered.
| name | type | default | description |
| ----------- | ------- | ------- | ----------------------------- |
| name | string | | Name of the menu. |
| width | number | 100 | Width of the menu. |
| widthUnit | string | % | Unit of width. ex) px, rem, % |
| hoverEffect | boolean | true | Enable/disable hover effect. |
```jsx
{/* Children */}
```
### ``
`` is a component that will be displayed inside popup list of ``.
| name | type | default | description |
| ------ | ------ | ---------------- | ----------------------------- |
| href | string | | Anchor `href` attribute. |
| target | string | _self | Anchor `target` attribute. |
| icon | string | fa-solid fa-bolt | Font Awesome icon class name. |
| image | string | | Image path. |
```jsx
External link
```
-----
## License
MIT License © 2023-PRESENT, Alding.