Dev-Encyclopedia/src/components/Hero.astro at fc3e0fcde235bfb26d67e5b601e8fae37938e9a4 · KC900201/Dev-Encyclopedia · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
---
const { terms } = Astro.props
const categories = new Set<string>()

terms.forEach((term: any) => {
  // fetch all categories
  term.data.categories.forEach((category: string) => categories.add(category))
})

let sortedCategories = Array.from(categories).sort((a, b) => a.localeCompare(b))
---

<hero-com data>
  <div class="hero-section">
    <div
      class="hero-paragraph"
      id="heroParagraph"
      style="font-size: 10px;
    margin-top: 15px !important;  /* Pull element UP */
    padding-top: 0 !important;
    position: relative;
    top: -8px; /* Fine-tune position */
    display: block;"
    >
      Backed by
      <a
        href="https://codedoodles.xyz"
        target="_blank"
        rel="dofollow noopener noreferrer"
        style="color:rgb(128, 128, 128);"
        aria-label="Visit Programming and Doodles official website"
      >
        <span itemscope itemtype="https://schema.org/Organization">
          <meta itemprop="name" content="Programming and Doodles™" />
          <span itemprop="name">Programming and Doodles</span>&#8482;</span
        >
        <time datetime="2025">2025.</time></a
      > All rights reserved.
    </div>
    <div class="search-and-filter">
      <div class="search-bar">
        <i class="fas fa-search"></i>
        <input
          autocomplete="off"
          type="text"
          id="searchInput"
          class="form-control"
          placeholder="Search for keywords..."
        />
        <div id="autocomplete-list"></div>
      </div>
      <div class="category-filter">
        <select class="select" id="category-select">
          <option value="" disabled selected hidden>Category</option>
          <option value="">(None)</option>
          {
            Array.from(sortedCategories).map((category) => (
              <option value={category}>{category}</option>
            ))
          }
        </select>
      </div>
    </div>

    <div class="buttons" id="heroButtons">
      <button class="button" id="aboutButton">
        <i class="fas fa-user" style="padding-right: 10px;"></i> About
      </button>
      <button
        class="button"
        onclick="window.open('https://github.com/Buzzpy/Programming-Simplified', '_blank')"
      >
        <i class="fab fa-github" style="padding-right: 10px;"></i> Contribute
      </button>

      <button class="button" id="darkModeToggle">
        <i class="fas fa-moon" style="padding-right: 10px;"></i><span
          id="darkModeText">Dark Mode</span
        >
      </button>

      <button class="button" id="sponsorButton">
        <i class="fa-solid fa-dollar-sign" style="padding-right: 10px;"></i> Sponsor
      </button>
      <button
        class="button"
        onclick="window.open('https://docs.google.com/forms/d/e/1FAIpQLSfKxg9lGenniBRrmPQz_qsCa7NtlN1uZPu_vv780UiRCppcOQ/viewform', '_blank')"
      >
        <i class="fa-solid fa-pen" style="padding-right: 10px;"></i> User survey
      </button>
    </div>

    <div class="hero-title" id="heroTitle" style="padding-top: 50px;">
      Dev Encyclopedia;
    </div>
    <div class="hero-paragraph" id="heroParagraph">
      Find out what that Sr. Developer is talking about.
    </div>
  </div>
</hero-com>