markdown-editor/index.html at main · wbyljs/markdown-editor · 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
142
143
144
145
146
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="The best markdown editor, export your markdown as .html and .md files quickly and free!"
    />
    <meta
      name="keywords"
      content="markdown, editor, markdown previewer, markdown live, markdown, markdown tool, markdown export html"
    />
    <meta name="author" content="osakitadev" />
    <meta property="og:title" content="Markdown Editor" />
    <meta
      property="og:url"
      content="https://osakitadev.github.io/markdown-editor/"
    />
    <meta property="og:image" content="/favicon.svg" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="stylesheet" href="/src/style.css" />
    <link rel="stylesheet" href="/src/markdown-styles.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/gradient-light.css"
    />

    <title>Markdown Editor</title>

    <script defer type="module" src="/src/main.js"></script>
  </head>
  <body class="font-geist overflow-hidden">
    <main class="h-screen flex flex-col">
      <header
        class="border-b border-b-bprimary px-6 py-2 flex justify-between items-center"
      >
        <h1 class="font-medium">Markdown Editor <small>by devokro</small></h1>

        <div class="flex items-center gap-2">
          <button
            class="border border-bprimary rounded-md px-2 py-1 transition-colors hover:bg-[#f5f5f5] flex items-center gap-1 text-sm font-medium"
            id="export"
          >
            <img
              src="/icons/export.svg"
              alt="Arrow up export icon"
              class="w-4 h-4"
            />
            Export
          </button>
          <a
            href="https://github.com/osakitadev/markdown-editor"
            rel="nofollow"
            target="_blank"
            title="Source Code"
            class="ml-4"
          >
            <img src="/icons/github.svg" alt="GitHub icon" class="w-5 h-5" />
          </a>
        </div>
      </header>

      <div class="flex-1 grid grid-cols-1 md:grid-cols-2 min-h-0">
        <section class="border-r border-bprimary flex flex-col min-h-0">
          <header
            class="px-4 py-2 bg-secondary border-b border-bprimary flex items-center justify-between"
          >
            <h2 class="text-sm font-medium text-neutral-500">Editor</h2>
          </header>

          <div
            id="editor-container"
            class="flex-1 min-h-0 overflow-y-auto"
          ></div>
        </section>

        <section class="border-r border-bprimary flex flex-col min-h-0">
          <header
            class="px-4 py-2 bg-secondary border-b border-bprimary flex items-center"
          >
            <h2 class="text-sm font-medium text-neutral-500">Preview</h2>
          </header>

          <div
            id="editor-preview"
            class="flex-1 min-h-0 p-2 overflow-y-auto"
          ></div>
        </section>
      </div>
    </main>

    <div
      id="modal"
      class="fixed w-full h-full top-0 left-0 items-center justify-center bg-black/40 backdrop-blur-[2px] hidden"
    >
      <div class="bg-white p-4 rounded-md hidden z-20" id="export-modal">
        <div class="flex items-center justify-between">
          <h2 class="text-2xl font-semibold">Export File</h2>
          <button class="close-button font-bold">X</button>
        </div>
        <p class="text-sm text-neutral-400 mb-5">
          Export your markdown as a file and save it on your device
        </p>

        <form id="form-export" class="flex flex-col mt-2">
          <label for="file-name" class="text-sm text-neutral-500"
            >File Name</label
          >
          <input
            type="text"
            name="file-name"
            placeholder="Untitled Markdown"
            class="bg-input-primary p-1 rounded-md border border-bprimary focus:outline-none"
          />

          <label for="file-extension" class="text-sm text-neutral-500 mt-4"
            >Export As</label
          >
          <select
            name="file-extension"
            class="bg-input-primary p-1 rounded-md border border-bprimary focus:outline-none"
          >
            <option
              value="html"
              selected
              class="bg-input-primary hover:bg-input-primary"
            >
              HTML (.html)
            </option>
            <option value="md" class="bg-input-primary hover:bg-input-primary">
              Markdown (.md)
            </option>
          </select>

          <button
            type="submit"
            class="mt-10 bg-input-primary border border-bprimary py-1 rounded-lg font-medium"
          >
            Export
          </button>
        </form>
      </div>
    </div>
  </body>
</html>