{"id":21942325,"url":"https://github.com/taedonn/alding","last_synced_at":"2026-04-13T16:04:24.259Z","repository":{"id":87557430,"uuid":"589802252","full_name":"taedonn/alding","owner":"taedonn","description":"A simple animated landing page","archived":false,"fork":false,"pushed_at":"2024-04-07T05:40:39.000Z","size":9698,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-22T15:33:39.380Z","etag":null,"topics":["nextjs","web","web-app"],"latest_commit_sha":null,"homepage":"https://alding.vercel.app","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/taedonn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-17T00:59:29.000Z","updated_at":"2024-04-08T16:54:49.000Z","dependencies_parsed_at":"2023-03-13T18:44:12.432Z","dependency_job_id":"e173f210-95db-451b-a4fe-caef54f9c4f5","html_url":"https://github.com/taedonn/alding","commit_stats":null,"previous_names":["taedonn/taedonn-landing","taedonn/animated-landing"],"tags_count":13,"template":true,"template_full_name":null,"purl":"pkg:github/taedonn/alding","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taedonn%2Falding","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taedonn%2Falding/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taedonn%2Falding/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taedonn%2Falding/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/taedonn","download_url":"https://codeload.github.com/taedonn/alding/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taedonn%2Falding/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31759574,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T15:25:13.801Z","status":"ssl_error","status_checked_at":"2026-04-13T15:25:09.162Z","response_time":93,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs","web","web-app"],"created_at":"2024-11-29T03:18:31.572Z","updated_at":"2026-04-13T16:04:24.218Z","avatar_url":"https://github.com/taedonn.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./public/logo.svg\" height=\"120\"\u003e\n  \u003ch1 align=\"center\"\u003eAlding\u003c/h1\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/node-v18.+-%2340E0D0\" alt=\"Node version badge\"/\u003e \n    \u003cimg src=\"https://img.shields.io/github/v/release/taedonn/alding?color=40E0D0\" alt=\"Release badge\"/\u003e\n    \u003cimg src=\"https://img.shields.io/github/release-date/taedonn/alding?color=40E0D0\" alt=\"Release date badge\"/\u003e\n    \u003cimg src=\"https://img.shields.io/badge/license-MIT-%2340E0D0\" alt=\"License badge\"/\u003e\n  \u003c/p\u003e\n\u003c/p\u003e\n\n`alding` is a simple animated landing page using [Next.js](https://github.com/vercel/next.js) and [TypeScript](https://github.com/microsoft/TypeScript).\n\n- [Alding](#alding)\n  - [Getting started](#getting-started)\n  - [Before installing](#before-installing)\n  - [Deploying your app](#deploying-your-app)\n  - [Components](#components)\n    - [`\u003cHeader\u003e`](#header)\n    - [`\u003cLogo\u003e`](#logo)\n    - [`\u003cMenu\u003e`](#menu)\n    - [`\u003cMenuLink\u003e`](#menulink)\n    - [`\u003cMenuList\u003e`](#menulist)\n    - [`\u003cMenuOption\u003e`](#menuoption)\n  - [License](#license)\n\n-----\n\n## Getting started\n\n`fork`, or `git clone` this repo by running the following command.\n\n```bash\ngit clone --depth 1 https://github.com/taedonn/alding.git \u003cyour-directory\u003e\n```\n\n-----\n\n## Before installing\n\nMake sure `node.js` version over 18 is installed on your machine.\n\n```bash\nnode -v\n```\n\n\u003e if node version is below 18, you can run one of the following commands to upgrade or change node version.\n\n`Homebrew`\n\n```bash\n# Install node version using homebrew.\nbrew install node@18\n\n# Unlink previously used node version.\nbrew unlink node\n\n# Link newly installed node version.\nbrew link node@18\n```\n\n`nvm`\n\n```bash\n# Install node version using nvm.\nnvm install v18.12.0\n\n# Choose newly installed node version.\nnvm use v18.12.0\n```\n\n`sudo`\n\n```bash\n# Install node version using sudo.\nsudo n 18.12.0\n\n# Choose newly installed node version on drop-down menu.\nsudo n\n```\n\n-----\n\n## Deploying your app\n\nMost hosting platforms allow you to define `build` command and `output` folder:\n\n- Build command: `npm run build` or `next build`\n- Output folder: `.next`\n\n\u003e If you are using [Vercel](https://vercel.com), you don't need to configure any options since vercel will automatically detect output directory.\n\n-----\n\n## Components\n\n`alding` requires a precise component structure in `/app/layout.tsx`:\n\n- [`\u003cHeader\u003e`](#header)\n- [`\u003cLogo\u003e`](#logo)\n- [`\u003cMenu\u003e`](#menu)\n- [`\u003cMenuLink\u003e`](#menulink)\n- [`\u003cMenuList\u003e`](#menulist)\n- [`\u003cMenuOption\u003e`](#menuoption)\n\n### `\u003cHeader\u003e`\n\n`\u003cHeader\u003e` is a wrapper component of all the other header components.\n\n| name       | type    | default | description                     |\n| ---------- | ------- | ------- | ------------------------------- |\n| height     | integer | 5       | Height of `\u003cHeader\u003e`.           |\n| heightUnit | string  | rem     | Unit of height. ex) px, rem, %  |\n\n```jsx\n\u003cHeader\n  height={5}\n  heightUnit=\"rem\"\n\u003e\n  {/* Children */}\n\u003c/Header\u003e\n```\n\n### `\u003cLogo\u003e`\n\n`\u003cLogo\u003e` displays logo inside `\u003cHeader\u003e`.\n\n| name        | type    | default | description                       |\n| ----------- | ------- | ------- | --------------------------------- |\n| src         | string  |         | Image path of the logo.           |\n| name        | string  |         | Name of the company/project/team. |\n| hoverEffect | boolean | true    | Enable/disable hover effect.      |\n\n```jsx\n\u003cHeader\n  height={5}\n  heightUnit=\"rem\"\n\u003e\n  \u003cLogo\n    src=\"/logo.svg\"\n    name=\"Alding\"\n  /\u003e\n\u003c/Header\u003e\n```\n\n### `\u003cMenu\u003e`\n\n`\u003cMenu\u003e` displays menu inside `\u003cHeader\u003e`.\n\n```jsx\n\u003cHeader\n  height={5}\n  heightUnit=\"rem\"\n\u003e\n  \u003cLogo\n    src=\"/logo.svg\"\n    name=\"Alding\"\n  /\u003e\n  \u003cMenu\u003e\n    {/* Children */}\n  \u003c/Menu\u003e\n\u003c/Header\u003e\n```\n\n### `\u003cMenuLink\u003e`\n\n`\u003cMenuLink\u003e` displays menu with link inside `\u003cMenu\u003e`\n\n| name   | type   | default          | description                |\n| ------ | ------ | ---------------- | -------------------------- |\n| href   | string |                  | Anchor `href` attribute.   |\n| target | string | _self            | Anchor `target` attribute. |\n\n```jsx\n\u003cMenu\u003e\n  \u003cMenuLink\n    href=\"/\"\n    target=\"_blank\"\n  \u003e\n    LINK\n  \u003c/MenuLink\u003e\n\u003c/Menu\u003e\n```\n\n### `\u003cMenuList\u003e`\n\n`\u003cMenuList\u003e` is a wrapper component of the popup list that will be displayed underneath when the menu hovered.\n\n| name        | type    | default | description                   |\n| ----------- | ------- | ------- | ----------------------------- |\n| name        | string  |         | Name of the menu.             |\n| width       | number  | 100     | Width of the menu.            |\n| widthUnit   | string  | %       | Unit of width. ex) px, rem, % |\n| hoverEffect | boolean | true    | Enable/disable hover effect.  |\n\n```jsx\n\u003cMenu\u003e\n  \u003cMenuList\n    name=\"LINKS\"\n    width={12}\n    widthUnit=\"rem\"\n  \u003e\n    {/* Children */}\n  \u003c/MenuList\u003e\n\u003c/Menu\u003e\n```\n\n### `\u003cMenuOption\u003e`\n\n`\u003cMenuOption\u003e` is a component that will be displayed inside popup list of `\u003cMenuList\u003e`.\n\n| name   | type   | default          | description                   |\n| ------ | ------ | ---------------- | ----------------------------- |\n| href   | string |                  | Anchor `href` attribute.      |\n| target | string | _self            | Anchor `target` attribute.    |\n| icon   | string | fa-solid fa-bolt | Font Awesome icon class name. |\n| image  | string |                  | Image path.                   |\n\n```jsx\n\u003cMenuList\n  name=\"LINKS\"\n  width={12}\n  widthUnit=\"rem\"\n\u003e\n  \u003cMenuOption\n    href=\"/\"\n    target=\"_blank\"\n  \u003e\n    External link\n  \u003c/MenuOption\u003e\n\u003c/MenuList\u003e\n```\n\n-----\n\n## License\n\nMIT License © 2023-PRESENT, Alding.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaedonn%2Falding","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftaedonn%2Falding","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaedonn%2Falding/lists"}