Val Town Code SearchReturn to Val Town

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![b7321ca2cd80899250589b9aa08bc3cae9c7cea276282561194e7fc537259b46.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/311a81bb-18d8-4583-b7e3-64bac326f700/public)
6
7Use this button to install the val:

3View and interact with your Val Town SQLite data. It's based off Steve's excellent [SQLite Admin](https://www.val.town/v/stevekrouse/sqlite_admin?v=46) val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by [LibSQL Studio](https://github.com/invisal/libsql-studio) by [invisal](https://github.com/invisal). This is now more an SPA, with tables, queries and results showing up on the same page. 
4
5![image.webp](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c8e102fd-39ca-4bfb-372a-8d36daf43900/public)
6
7## Install 

92  appName: 'ValPush',
93  appIconUrl: '${iconURL}',
94  assetUrl: 'https://cdn.jsdelivr.net/gh/philfung/add-to-homescreen@1.9/dist/assets/img/',  // Link to directory of library image assets.
95  maxModalDisplayCount: -1
96});

3View and interact with your Val Town SQLite data. It's based off Steve's excellent [SQLite Admin](https://www.val.town/v/stevekrouse/sqlite_admin?v=46) val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by [LibSQL Studio](https://github.com/invisal/libsql-studio) by [invisal](https://github.com/invisal). This is now more an SPA, with tables, queries and results showing up on the same page. 
4
5![image.webp](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c8e102fd-39ca-4bfb-372a-8d36daf43900/public)
6
7## Install 

2
3- `node-emoji` [github here](https://github.com/omnidan/node-emoji) - replaces all emojis with spans
4- emoji images for replacement are hosted at netlify (sourced from private repo) 

1export async function replaceEmojisWithImages(
2  req: express.Request,
3  res: express.Response,

5export const generateRAdioDjRss = async () => {
6  const rssItems = previousDjs.map((dj) => {
7    const djImgSrc = `https://r-a-d.io/api/dj-image/${
8      encodeURIComponent(
9        dj.djimage,
10      )
11    }`

60  const [isComplete, setIsComplete] = useState(false);
61  const [inputStatus, setInputStatus] = useState([]);
62  const [imageData, setImageData] = useState("");
63  const [isLoading, setIsLoading] = useState(false);
64  const [isTransitioning, setIsTransitioning] = useState(false);
88  };
89
90  const fetchImage = async (romaji) => {
91    setIsLoading(true);
92    try {
93      const response = await fetch(`/api/image/${romaji}`);
94      if (!response.ok) {
95        throw new Error("Failed to fetch image");
96      }
97      const data = await response.json();
98      if (data && data.image) {
99        const dataUrl = `data:image/png;base64,${data.image}`;
100        setImageData(dataUrl);
101      } else {
102        throw new Error("Invalid image data received");
103      }
104    } catch (error) {
105      console.error("Error fetching image:", error);
106      setImageData("");
107    } finally {
108      setIsLoading(false);
119      setInputStatus([]);
120      setIsComplete(false);
121      fetchImage(newWord.romaji);
122      setIsTransitioning(false);
123    }, 300);
178            </div>
179          )
180          : imageData
181          ? <img src={imageData} alt="Vocabulary word" className="w-40 h-40 object-cover rounded-lg shadow-md" />
182          : (
183            <div className="w-40 h-40 flex items-center justify-center bg-gray-200 rounded-lg">
184              <span className="text-gray-500">No image available</span>
185            </div>
186          )}
264  const url = new URL(request.url);
265
266  if (url.pathname.startsWith("/api/image/")) {
267    const romaji = url.pathname.split("/").pop();
268    try {
269      // This is a placeholder for the actual image retrieval from Val Town blob storage
270      // You'll need to implement the actual retrieval logic here
271      const vocabularyJson = await blob.getJSON(romaji);
275      });
276    } catch (error) {
277      console.error("Error fetching image:", error);
278      return new Response("Image not found", { status: 404 });
279    }
280  }

5
6function App() {
7  const [imageData, setImageData] = useState<string | null>(null);
8  const [error, setError] = useState<string | null>(null);
9
10  useEffect(() => {
11    async function fetchImage() {
12      try {
13        const response = await fetch("/image");
14        if (!response.ok) {
15          throw new Error(`HTTP error! status: ${response.status}`);
16        }
17        const data = await response.json();
18        if (data && data.image) {
19          setImageData(`data:image/png;base64,${data.image}`);
20        } else {
21          throw new Error("Invalid image data received");
22        }
23      } catch (error) {
24        console.error("Error fetching image:", error);
25        setError(error instanceof Error ? error.message : "Error loading image");
26      }
27    }
28    fetchImage();
29  }, []);
30
31  return (
32    <div>
33      <h1>Image from Blob Storage</h1>
34      {imageData
35        ? (
36          <img
37            src={imageData}
38            alt="Fetched from blob storage"
39            style={{ maxWidth: "100%" }}
42        : error
43        ? <p>Error: {error}</p>
44        : <p>Loading image...</p>}
45    </div>
46  );
56
57export default async function server(request: Request): Promise<Response> {
58  if (request.url.endsWith("/image")) {
59    try {
60      const jsonData = await blob.getJSON("image-test");
61      return new Response(JSON.stringify(jsonData), {
62        headers: { "Content-Type": "application/json" },
76    <html>
77      <head>
78        <title>Image from Blob Storage</title>
79        <style>${css}</style>
80      </head>

5
6function App() {
7  const [imageData, setImageData] = useState<string | null>(null);
8  const [error, setError] = useState<string | null>(null);
9
10  useEffect(() => {
11    async function fetchImage() {
12      try {
13        const response = await fetch("/image");
14        if (!response.ok) {
15          throw new Error(`HTTP error! status: ${response.status}`);
22        });
23
24        setImageData(dataUrl);
25      } catch (error) {
26        console.error("Error fetching image:", error);
27        setError(error instanceof Error ? error.message : "Error loading image");
28      }
29    }
30    fetchImage();
31  }, []);
32
33  return (
34    <div>
35      <h1>Image from Blob Storage</h1>
36      {imageData
37        ? (
38          <img
39            src={imageData}
40            alt="Fetched from blob storage"
41            style={{ maxWidth: "100%" }}
44        : error
45        ? <p>Error: {error}</p>
46        : <p>Loading image...</p>}
47    </div>
48  );
58
59export default async function server(request: Request): Promise<Response> {
60  if (request.url.endsWith("/image")) {
61    try {
62      const response = await blob.get("test.png");
63
64      return new Response(response.body, {
65        headers: { "Content-Type": "image/png" },
66      });
67    } catch (error) {
79    <html>
80      <head>
81        <title>Image from Blob Storage</title>
82        <style>${css}</style>
83      </head>