GitCodeViewer/frontend/shell.astro at main · ada87/GitCodeViewer · 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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
---
// Component Imports
import MainHead from '../components/MainHead.astro';
import Button from '../components/Button.astro';
import Footer from '../components/Footer.astro';
import Nav from '../components/Nav.astro';

// Component Script:
// You can write any JavaScript/TypeScript that you'd like here.
// It will run during the build, but never in the browser.
// All variables are available to use in the HTML template below.
let title = 'GitCode Viewer';
let description = 'The perfect offline Git client for developers.';
const permalink = 'https://gitcodeviewer.com/';
let lang = 'en';

// Data Fetching example
const response = await fetch('https://api.github.com/repos/ada87/GitCodeViewer');
const repoData = await response.json();
const stars = repoData.stargazers_count || 0;

// Conditional logic for classes
const isProduction = import.meta.env.PROD;
const containerClass = isProduction ? 'container-prod' : 'container-dev';

const features = [
  'Offline Git Access',
  'Syntax Highlighting (100+ langs)',
  'Mermaid & Markdown Support',
  'Jupyter Notebook Rendering',
  'Dark/Light Mode'
];
---
<html lang={lang}>
  <head>
    <MainHead title={title} description={description} />
    <style>
      /* Scoped Styles */
      header {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 2em 0;
      }
      .hero {
        background: linear-gradient(to bottom, #1a1a2e, #16213e);
        color: white;
        padding: 4rem 2rem;
        text-align: center;
        border-radius: 12px;
        margin: 1rem 0;
      }
      .title {
        font-size: 3em;
        font-weight: 800;
        margin: 0;
      }
      .features-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        padding: 2rem 0;
      }
      .card {
        padding: 1.5rem;
        border: 1px solid #eee;
        border-radius: 8px;
        transition: transform 0.2s;
      }
      .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      }
    </style>
  </head>

  <body>
    <Nav />

    <header class={containerClass}>
      <div class="hero">
        <h1 class="title">{title}</h1>
        <p>{description}</p>
        <div class="stars-badge">
          ⭐ {stars} GitHub Stars
        </div>
        <Button href="https://play.google.com/store/apps/details?id=com.xdnote.codeviewer">
          Download on Google Play
        </Button>
      </div>
    </header>

    <main class="wrapper">
      <section class="intro">
        <h2>Why Code Viewer?</h2>
        <p>
          Reading code on mobile devices has always been painful.
          We fixed that by building a high-performance rendering engine
          on top of React Native and CodeMirror.
        </p>
      </section>

      <section class="features">
        <h3>Key Features</h3>
        <div class="features-grid">
          {features.map((feature) => (
            <div class="card">
              <h4>✅ Supported</h4>
              <p>{feature}</p>
            </div>
          ))}
        </div>
      </section>

      <section class="demo">
        <h3>Try it yourself</h3>
        <p>
          Clone this repository within the app to see
          syntax highlighting in action.
        </p>
        <pre><code>
          git clone https://github.com/ada87/GitCodeViewer.git
        </code></pre>
      </section>
    </main>

    <Footer />

    <script>
      // Client-side JavaScript
      console.log('Welcome to Code Viewer documentation!');

      const buttons = document.querySelectorAll('button');
      buttons.forEach(btn => {
        btn.addEventListener('click', () => {
          console.log('Button clicked');
        });
      });
    </script>
  </body>
</html>